Skip to main content

Tạo ứng dụng realtime với Firebase Database và ReactJS

Hello cả nhà !

Như các bạn cũng đã biết thì Firebase được tạo bởi "Ông lớn Google", bởi vậy lên việc sử dụng Firebase khá an toàn và tiên dụng. Mọi người có thể vô trang chủ của Firebase tại địa chỉ: Firebase Google .



Firebase có rất nhiều tính năng vô cùng tuyệt vời như: Storage, Database, Hosting, Function, Authentication, ML Kit.

Hôm nay mình xin phép làm một demo nhỏ cho tạo ứng dụng realtime bằng cách sử dụng Firebase Database với ReactJS. Bài viết này mình xin hướng dẫn các bước chuẩn bị trước khi vô code.

Đầu tiên các bạn vô trang chủ của Firebase, và tới Firebase console.


Sau khi vô tới Console Firebase các bạn nhấn vô Add a Project để tạo 1 dự án mới. Các bạn nhập tên cho project của mình,  nó sẽ tự random ID project cho các bạn theo tên của project mà các bạn đã đặt.

Điền hoàn tất thì nhấn Tạo và chờ vài giây để cho nó tạo Thành công.

Tạo project xong các bạn chọn tiếp tới tạo Database, và chúng ta cũng chỉ quan tâm đến nó :)).



Sau khi vô Database xong các bạn nhấn Create Database nó sẽ có giao diện như sau:


Các bạn có thể thấy nó có 2 lựa chọn về quyền đọc ghi vô cơ sở dữ liệu của chúng ta:

 + Start in locked mode: Ở option này cơ sở dữ liệu của bạn sẽ là riêng tư và tất nhiên không thể ghi hay đọc được.
+ Start in test mode: Với option này thì tất cả quyền truy cập vào cơ sở dữ liệu của bạn sẽ được cho phép đọc và ghi.

Và tất nhiên là chúng ta sẽ chọn cái dưới rồi nhỉ :)), các bạn nhấn Active để hoàn tất.



Và trên chính là Database ban đầu của chúng ta, hiện tại vẫn Null chưa có gì cả !. Vậy làm sao để có thể kết nối được Database của chúng ta với code React ?



Để có thể kết nối được với Database của chúng ta các bạn cần phải lấy được file config của nó.

Các bạn nhấn vào Setting và chọn Project setting, sau đó chọn Add Firebase to your web (Vì chúng ta đang demo trên nền tảng web đó mà :)) ).

Sau khi chọn xong các bạn sẽ nhận được file config dạng như sau: 


Đó là tất cả những gì chúng ta chuẩn bị cho thằng Firebase này, tiếp theo là tới code cho thằng React.

Mọi người có thể coi qua Document của thằng React tại link https://reactjs.org/ .Với những bạn đã quen với ReactJS rồi thì việc tạo project React quá đơn giản rồi.

Để tạo nó đầu tiên các bạn phải code Nodejs trước trong máy rồi, nếu chưa cài đặt Nodejs thì các bạn vô https://nodejs.org/ để download nó về và cài đặt như bao phần mềm khác.

Các bạn cần phải cài đặt thêm vào project react của mình thêm package Firebase bằng cách:
npm install --save firebase
Vậy là toàn bộ đã chuẩn bị xong hết tất cả, chỉ còn "nhào" vô code nữa thôi, LOL :)) và mình xin dành bài viết sau để cho rõ ràng hơn !

Thanks for watching !!!!

 Good luck !
Nhãn:

Comments

Post a Comment

Popular posts from this blog

Hooks in React - How to use it ?

Mới đây, React đã chính thức công bố hooks . Vậy hooks là gì ? Hooks là những hàm cho phép bạn “kết nối” state và lifecycle của React vào các components. Với Hooks bạn có thể sử dụng state và lifecycles mà không cần dùng class. Ví dụ đơn giản cho việc sử dụng hooks useState : - Đầu tiên import thêm useState từ react.  - Ta có 1 function Counter, 2 biến count, setCount và truyền vào cho useState 1 giá trị được gán cho count. - Trong hàm render ta có hiển thị biến count và khi click thì sẽ gọi tới hàm setCount và tăng count lên 1 đơn vị. Qua ví dụ trên ta có thể thấy, việc sử dụng function component kết hợp với hooks hoàn toàn tiện lợi. Nó giúp code trong ngắn gọn và dễ hiểu hơn thay vì ta dùng class và phải setState. Tiếp theo, để có thể dùng được các lifecycles trong function component ta có useEffect . Nó tương tự như các lifecycles componentDidMount , componentDidUpdate , componentWillUnmount . Cách sử dụng useContext trong hooks sẽ như v...
Post a Comment
Read more

Hướng dẫn cài đặt Python 3 trên Kali Linux - How to install Python 3 on Kali Linux

Xin chào tất cả mọi người, Python là một ngôn ngữ lập trình có thế nói là vô cùng "báo đạo" trong giới lập trình ngày nay. Với các phiên bản của Kali Linux mặc định sẽ là python 2.x.x. Tuy nhiên để đuổi kịp theo thời đại, thì Python đã nâng cấp lên phiên bản Python  3 cũng khá lâu rồi. Hôm nay mình xin hướng dẫn các bạn cài đặt Python 3 1 cách rất là simple trên Kali Linux. Ở đây mình hướng dẫn cài đặt Python 3.3.2. Bước 1 : Mở Terminal và copy đoạn mã sau: wget http://python.org/ftp/python/3.3.2/Python-3.3.2.tgz && tar -xvf Python-3.3.2.tgz Bước 2: Tiếp tục gõ: 2.a :  cd Python-3.3.2 2.b: ./configure 2.c: make 2.d: sudo make altinstall Sau khi cài đặt xong để có thể sử dụng bạn phải gõ python3 để chạy, còn không mặc định sẽ là phiên bản Python 2 cũ kia. Chỉ với các bước đơn giản như trên là bạn đã cài đặt thành công Python 3 trên Kali Linux. Quá đơn giản phải không nào. Chúc bạn thành công !
Post a Comment
Read more

Hướng dẫn cài đặt HĐH Kali Linux trên máy thật

Để cài đặt được HĐH Kali Linux trên máy thật các bạn chỉ cần chuẩn bị như sau: 1- USB >=4GB 2- Phiên bản Linux muốn cài đặt (Tải tại đây) 3- Tải win32 disk imager  (Tải tại đây)    Vậy là đã chuẩn bị xong ! TIẾP TỤC: Bước 1 . Khởi động chương trình UUI. Chọn I Agree. Bước 2 . Cấu hình UUI. Step 1: Select a Linux Distribution from the dropdown to put on your USB : Chọn hệ điều hành cần tạo, bạn chọn Kali Linux. Step 2: Select your Kali*.iso : Chọn file cài cài đặt Kali Linux. Lưu ý: tên file phải bắt đầu bằng Kali và kết thúc bằng .iso . Step 3: Select your USB Flash Drive Letter Only: Chọn thiết bị USB của bạn. Check vào We will format E:\ Drive as Fat32 để format lại USB của bạn. Cấu hình UUI Cảnh báo Format USB hiện lên, bạn chọn Yes để bắt đầu tiến trình. Cảnh báo format, chọn Yes. Tiến trình format và tạo USB Boot Kali Linux bắt đầu. Format và gắn nhãn UUI. Bắt đầu giải nén file .iso. Quá trình giải nén. Bước 3 . Hoàn t...
6 comments
Read more