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

Javascript kiểm tra Array chính xác hơn bằng Array.isArray

Các dev Javascript có thể điều biết, arrays is not true arrays . Mọi thứ trong javascript đều là object. Một cách điều hiểu điều đó rõ nhất là sử dụng typeof để kiểm tra nó, và tất nhiên nó sẽ là object. LOL Vậy làm sao để kiểm tra chính xác một phần tử có phải là array hay không trong javascript ? Đó đã không còn là vấn đề với Array.isArray(). Đây là các đơn giản để kiểm tra chính xác giá trị có phải là mảng hay không. Array is not true array Hãy xem ví dụ dưới để hiểu hơn, array is not true array Đó chính là lý do tại sao ta không lên dùng typeof để kiểm tra array. Array.isArray() demo Ví dụ dưới đây đều là array và đều return về true
Post a Comment
Read more

State Department refugee database vulnerable to hacking, watchdog found

As the debate over President Trump’s order suspending refugee admissions intensifies, Fox News has learned of another potential vulnerability in the system: the State Department refugee database has been susceptible to hacking for years. The State Department internal watchdog, back in December 2016, sent a "classified management alert" regarding ongoing IT security vulnerabilities in the system. Two months later, the inspector general  released a related unclassified report, "Inspection of the Bureau of Population, Refugees, and Migration." "It's very unusual for action to be taken by the inspector general before the final report is reviewed by the bureau that's under investigation," former U.N. ambassador and Fox News contributor John Bolton ex...
Post a Comment
Read more

Kali Linux Cheat Sheet for Penetration Testers - Part 1

Penetration testing (also called pen testing) là thực hành thử nghiệm một hệ thống máy tính , mạng hoặc ứng dụng Web để tìm các lỗ hổng mà kẻ tấn công có thể khai thác . Kali Linux Cheat Sheet cho các xét nghiệm thâm nhập là một cái nhìn tổng quan cấp cao cho môi trường điển hình thử nghiệm thâm nhập từ nmap, sqlmap, ipv4, điều tra, vân tay vv Luôn luôn xem các trang người đàn ông nếu bạn có nghi ngờ hoặc các lệnh này không làm việc như nêu ở đây (có thể được hệ điều hành dựa trên phiên bản thay đổi dựa vv) cho các hệ điều hành bạn đang sử dụng (như BlackBox, Đen Ubuntu, ParrotSec OS, Debian, Ubuntu, vv). Tôi cũng đã tham khảo một số hướng dẫn mà tôi thấy hữu ích trong các phần khác nhau và nó có thể có ích. Recon and Enumeration NMAP Commands Nmap ("Network Mapper") là một tiện ích mã nguồn mở miễn phí cho khám phá mạng và kiểm toán an ninh. Nhiều hệ thống và quản trị mạng cũng tìm thấy nó hữu ích cho các nhiệm vụ như kiểm kê mạng, lịch trình nâng cấp dịch ...
Post a Comment
Read more