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

Chèn chữ vào trong Terminal trên Kali Linux

Hello cả nhà, hôm nay mình xin hướng dẫn các bạn chèn chữ vào trong Terminal trên Kali Linux. Đầu tiên các bạn mở Terminal của mình lên và cài đặt package tên là figlet . sudo dnf install figlet Sau khi cài đặt thành công để có thể xem được các font chữ của nó các bạn gõ trong Terminal: showfigfonts Các bạn hãy chọn 1 font với sở thích của các bạn. Sau khi xong các bạn cần mở file .bashrc để bắt đầu chèn font vào, làm như sau: nano .bashrc Sau đó các bạn dùng phím mũi tên di chuyển xuống cuối cùng của file và chèn vào như sau: figlet -f `tên font` `tên cần hiển thị`  VD: figlet -f ivrit Jok Sau khi điền xong các bạn nhấn Ctrl + X  => Y => Enter để save code lại. Sau khi xong các bạn đóng Terminal và mở lại nó để chiêm ngưỡng thành quả. Chúc các bạn thành công !
Post a Comment
Read more

Xóa phần tử Duplicates trong mảng sử dụng ES6

Dưới đây là 3 cách để lọc các phần tử trùng nhau (duplicates) trong mảng và trả về những giá trị duy nhất. Tôi thích sử dụng Set bởi vì nó ngắn và đơn giản. 1. Sử dụng Set: Đầu tiên sẽ tìm hiểu Set là gì: Set là một đối tượng mới được giới thiệu trong ES6. Bởi vì Set chỉ cho lưu trữ các giá trị duy nhất. Khi bạn truyền vào nó 1 mảng thì nó sẽ xóa những giá trị trùng lặp. Okay, chúng ta sẽ nhìn những đoạn code sau để hiểu hơn về Set: 1. Đầu tiên, chúng ta sẽ tạo 1 Set mới bằng cách truyền vào cho nó 1 mảng. Bởi vì Set chỉ nhận các giá trị duy nhất lên sẽ xóa các phần tử trùng lặp. 2. Bây giờ các phần tử trùng nhau biến mất, chúng ta sẽ convert nó lại thành mảng bằng cách sử dụng toán tử ... Convert Set sang mảng sử dụng Array.from Ngoài ra, bạn có thể sử dụng Array.from để convert Set sang mảng: 2. Sử dụng filter: Để hiểu hơn về cách này, chúng ta sẽ xem qua cách 2 phương thức hoạt động: indexOf và filter. indexOf Phương thức indexOf sẽ trả về vị trí ...
1 comment
Read more

Cách mã hóa mật khẩu trong Kali Linux 2016.2 | Encrypt Passwords

Xin chào tất cả mọi người ! Như tất cả mọi người cũng đã biết việc mã hóa mật khẩu là vô cùng quan trọng trong thời buổi công nghệ thông tin phát triển như vũ bão hiện nay. Việc để mật khẩu một cách bình thường là vô cùng nguy hiểm. Hôm nay tôi xin giới thiệu cho tất cả mọi người một công cụ chuyên mã hóa mật khẩu trên Kali Linux đó chính là HashCode Tool. Việc cài đặt và sử dụng HashCode rất đơn giản, chúng ta sẽ bắt đầu luôn nào ! Bước 1:Download  Để Download HashCode các bạn có thể tải bằng cách: ~# cd Desktop ~# git clone https://github.com/Sup3r-Us3r/HashCode.git Sau đó chờ tải file HashCode về. File sẽ được lưu ở ngoài màn hình Desktop. Bước 2: Cài đặt (Install) Sau khi file đã tải xong các bạn trỏ tới file: ~# cd HashCode Chạy 3 lệnh tiếp theo: ~# sudo chmod +x hashcode-en.py ~# sudo chmod +x hashcode-pt.py ~# sudo chmod +x hashcodegui.py Sau khi chạy xong 3 lệnh trên vậy là việc cài đặt của chúng ta đã hoàn tất và bây giờ chúng ta hãy c...
Post a Comment
Read more