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

Master Proptypes trong React

React là một thư viện JavaScript cho việc xây dựng giao diện người dùng (UI). React giúp quản lý dễ các trạng thái (state) của ứng dụng hơn và sẽ thay đổi UI khi mà state thay đổi. React dựa vào các component và mỗi component có state của nó. Nếu như là state của component dùng setState() và có thể thể props từ component cha. The Problem Từ khi Reatc là một thư viện JavaScript và JS không cung cấp bất cứ thứ gì về type-checking , bỏ qua việc đó khi sử dụng props component có thể khiến bạn gặp bugs trong ứng dụng. Solution Bạn có thể dùng Js extensions như TypeScript cho việc checking, nhưng nếu bạn không muốn sử dụng nó, React cung cấp đầy đủ cho tính năng type-checking verify props của các component chính xác type. Sử dụng PropTypes, bạn có thể chắc chắn các component nhận đúng type của props. Ví dụ, ta có Person component và nhận 2 props: `name` và `age`. Sử dụng PropTypes, ta có thể chắc chắn `name` luôn luôn là `string` và `age` luôn luôn là number. Installing Pr...
Post a Comment
Read more

Pretty JSON Output

Bạn cảm thấy khó chịu khi JSON output trên cùng 1 dòng, điều đó sẽ chấm dứt với JSON.stringify giúp output ngắn gọn hơn và dễ nhìn hơn. Chỉ cần truyền vào tham số thứ 3 là khoảng cách (space) BOOM ! Tab Spacing Để sử dụng Tab bạn chỉ cần truyền vào tham số "\t" . Ví dụ: Understanding the “Space” argument Tham số thứ 3 của JSON.stringify sử dụng khoảng cách. Nó sẽ giúp cho string output của bạn gọn gàng và dễ nhìn hơn. Nó có 2 loại tham số truyền vào: Number và String . a. Number Bạn có thể dùng bất kì các số từ 0 tới 10. b. String Bạn có thể dùng string thay cho khoảng trống của JSON.stringify. Tối đa bạn chỉ được dùng 10 kí tự. Nếu lớn hơn nó sẽ chỉ lấy 10 kí tự đầu tiên. Hãy thử nó: What is the 2nd parameter ? Tham số thứ 2 dùng để replace. Nó sẽ có 2 loại: Array và Function. a. Array Tôi sẽ demo thử cho bạn với array để thấy sự thú vị của nó: Bạn có thể chọn các cặp key-value bạn muốn output ra...
Post a Comment
Read more

Kali Linux Cheat Sheet for Penetration Testers - Part 2

Password Cracking John The Ripper – JTR John the Ripper là khác nhau từ các công cụ như Hydra. Hydra không mù brute-buộc bằng cách cố gắng kết hợp tên người dùng / mật khẩu trên một daemon dịch vụ như máy chủ FTP hoặc máy chủ telnet. Tuy nhiên John cần băm đầu tiên. Vì vậy, thách thức lớn hơn cho một hacker là lần đầu tiên có được băm mà là để được nứt. Bây giờ một ngày băm là dễ dàng hơn crackable sử dụng các bảng cầu vồng miễn phí trên mạng. Chỉ cần đi đến một trong các trang web, trình băm và nếu băm được làm bằng một từ chung, thì trang web sẽ hiển thị các từ gần như ngay lập tức. Bảng Rainbow cơ bản lưu trữ các từ phổ biến và băm của họ trong một cơ sở dữ liệu lớn. Lớn hơn cơ sở dữ liệu, nhiều hơn những lời phủ. john –wordlist=/usr/share/wordlists/rockyou.txt hashes JTR password cracking john –format=descrypt –wordlist /usr/share/wordlists/rockyou.txt hash.txt JTR forced descrypt cracking with wordlist john –format=descrypt hash –show JTR forced descrypt b...
Post a Comment
Read more