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

Best Python Cheatsheet

Python là một trong những ngôn ngữ lập trình tốt nhất để học. Khi bạn bắt đầu, bảng tham chiếu một trang về các biến, phương pháp, và các tùy chọn định dạng có thể có khá tiện dụng.  Mong bạn thấy bài viết hữu ích ! Chúc bạn thành công !
Post a Comment
Read more

Hướng dẫn cài LibreOffice trên Kali Linux

Xin chào mọi người ! Một số bạn không biết cài bộ công cụ văn phòng nào cho máy tính cài HĐH Kali Linux. Hôm nay mình sẽ hướng dẫn cho các bạn cài  LibreOffice trên Kali Linux. Nó giống như bộ Office của Microsoft và trên thực tế thì không bằng Microsoft được đâu. Việc cài đặt bộ Office này khá là đơn giản. Đầu tiên để cài thì bạn hãy tải LibreOffice phù hợp với phiên bản của máy tính đang sử dụng. Như của mình hiện tại là phiên bản LibreOffice_5.2.4 + Link Download (Download) Hãy tải phiên bản mới nhất có đuôi *.deb cho dễ cài đặt. Sau khi tải xong có 2 cách để các bạn cài đặt nó: + Cách 1: Sử dụng phần mềm Gdebi để cài đặt các file *.deb một cách dễ dàng. Tuy nhiên rất hay bị lỗi và không cài đặt được. + Cách 2: (Nên theo cách này) 1- Giải nén file LibreOffice ra. 2- Mở Terminal ra gõ:   ~# cd Downloads Các bạn có thể dùng lệnh ls để biết chính xác tên thư mục của mình và copy paste cho chuẩn. Tiếp sau đó thì gõ:   ~# cd LibreOffice_5....
3 comments
Read more

Hacker takes over thousands of Printers; sends alerts to users

The hacker did it in a good faith and also informed HP about the vulnerability. A critical vulnerability in printers has led to the hacking of thousands of printing devices not at just one location or city but across the globe. Reportedly, the flaw was exploited by a hacker called Stackoverflowin, who managed to hack 150,000 printers at a global level. The hacking spree seems to be the hacker’s way to inform the world regarding the vulnerable nature of printers because as per his findings the Internet-connected printers are functioning without any firewall protection. This is the main reason why almost any hacker can exploit them, said the hacker. “People have done this in the past and sent racist flyers, etc. I’m not about that, I’m about helping people to fix their problem, but having a bit of fun at the same time ;) Everyone’s been cool about it and thanked me, to be honest,” claimed the hacker. To prove his point, Stackoverflowin used an automated script and sca...
Post a Comment
Read more