Source Web Chat Realtime ReactJS + Firebase

Đầu tiên bạn nào chưa cài NPM ([b]Node Package Manager) [/b]thì cài cho mình tại link sau: https://nodejs.org/en/

Sau đó các bạn download Project của mình tại link này
 DOWNLOAD

Các bạn download về rồi giải nén ra 1 folder nào đó trong máy của bạn. Sau đó các bạn xem hướng dẫn cài đặt và config bằng hình ảnh nhé.
[b]Hướng dẫn cài đặt:[/b]
Sau khi giải nén ra thư mục các bạn nhấp vào link của folder rồi gõ: [b]cmd [/b]để mở Command trong thư mục hiện tại của bạn

Sau đó các bạn chạy command: [b]npm install [/b]để cài các gói package về tiến trình cài đặt chỉ vài phút thôi.

Đây là main sau khi install xong.
Còn đây là folder sau khi install xong
Sau đó các bạn vào trang chủ của Firebase login và tiến hành tạo database cho project của mình: [b]https://firebase.google.com/[/b]

Sau khi login vào chúng ta tạo 1 Project xem hình tiếp nhé !
Chọn đúng như hình nếu không biết config nhé.Firebase đang tiến hành tạo project cho chúng taFirebase đã hoàn tất tạo project, nhấn Continue để vào Dashboard nhéĐây là màn hình Dashboard của FirebaseCách 1: Các bạn click vào đây để lấy config nhé

Cách 2 thì hơi rườm rà hơn xem hình tiếp nhé.Kéo xuống dưới dùng là thấy tab này nha, rồi click vào Add Firebase to your web appVà đây là config của chúng ta.
Sau khi đã có config các bạn vào Project của mình ở file [b].env [/b]config lại nội dung bên trong đó nha
Sửa file .env này nèMình zip file quên xóa config các bạn đừng phá nha :v, copy từng array đúng với từng dòng nha
Bây giờ chúng ta tiến hành config lại Firebase để đi vào hoạt động, đầu tiên chúng ta sẽ tạo ra 1 Realtime Database. Tiếp tục xem hình nữa nhé
Chọn Database ở menu trái sau đó sẽ thấy như trong hìnhCái này ai biết config thì chọn còn không biết thì làm như mình nha.Sau khi Create xong các bạn chọn Realtime Database.Và chọn theo từng bước ứng với số trên hình, sửa số 2 lại thành true nha, ban đầu mặc định nó là false
OK vậy là chúng ta đã config xong quyền ghi lên database, bây giờ là đến bước Login bằng Facebook, chúng ta vào https://developers.facebook.com/ tạo 1 app để Login.


Cái tên hiển thị các bạn đặt gì cũng được nha.Cái này ở menu trái Cài đặt Thông tin cơ bản. Cái link đó ở config lúc ở bước config Firebase các bạn kéo lên xem lại nhé.Active cái này lên nhé, nếu nó bắt chọn mục thì chọn [b]Giải trí[/b]
Các bạn vào lại Firebase copy và config cái này nữa nhé
Chọn Authentication
Chọn tab Sign-in Method, các bạn thấy Facebook chưa ?Bây giờ bỏ App ID và App secret vào copy cái khung mà mình có note trong hình lại.Chọn Bảng điều khiển -; Đăng nhập Facebook -; Thiết lập.Paste cái link OAuth vừa mới copy vào đây.
OK đã config xong Login bằng Facebook giờ chúng ta run
web app lên và test thôi. vẫn như các bước trên mở [b]cmd [/b]rồi chạy lệnh sau để run web
đây là giao diện trang web của chúng ta sau khi start thành công, cái này mình chụp từ web hiện tại của mình nên nó có cá Dashboard.
Chúng ta kiểm tra database nhé
Chọn AuthenticationĐây là dữ liệu khi User login tại đây, hiện tại là chưa có dữ liệu gì cả.Cái này ở Menu -; DatabaseGiờ ta login vàoBước xác thực thân quenSau khi login thành công nó sẽ thêm vào cho chúng taOK nó đã hoạt độngNó đã hiện danh sách được lấy từ Database của FirebaseGiờ ta chat thử vài câu nhéOK nó thêm thành công
Bây giờ các bạn muốn upload source lên host thì các bạn phải làm thêm 1 bước là build source để nó compile sang javascript và html.
các bạn chạy [b]cmd -; npm run build[/b]chạy từ project của mình nha chứ mở cmd từ run lên chạy nó không được đâuTiến trình build đang xảy raBuild thành côngBây giờ các bạn zip folder build lại rồi up lên host extact ra và đưa hết tất cả file trong folder build/ đem ra ngoài thư mục gốc và chạy thôi.
Các bạn phải add domain của host bạn vào đây để Firebase được chạy nha, nếu đã dùng localhost rồi thì không cần thêm vì nó được add sẵn rồi.

React.js là 1 thư viện JavaScript tạo ra bởi Facebook.
http://facebook.github.io/react/

• Các bạn có thể tham khảo React.js là gì tại đây: https://viblo.asia/p/reactjs-ma-nhieu-nguoi-dang-nhac-den-thich-hop-cho-nhung-ung-dung-web-nao-d6BAMY03Rnjz

Tutorial Simple về ReactJS: https://reactjs.org/tutorial/tutorial.html
Mong các bạn không sử dụng code của mình vào mục đích thương mại, mục đích chia sẻ source web chat realtime này để cho các bạn học hỏi thêm và biết thêm 1 loại ngôn ngữ lập trình mới
Nguồn tại:  http://www.tamkiller.net/

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait