Diễn đàn » PHP - HTML - CSS » Source Web Chat Realtime ReactJS + Firebase

Source Web Chat Realtime ReactJS + Firebase

By Ging, Released at 910 View
Share on Facebook Share on Tweet Share on Google+
#TOP

Đầu tiên bạn nào chưa cài NPM (Node Package Manager) 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


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é.
Hướng dẫn cài đặt:

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õ: cmd để mở Command trong thư mục hiện tại của bạn

Sau đó các bạn chạy command: npm install để 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:https://firebase.google.com/

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 ta

Firebase đã hoàn tất tạo project, nhấn Continue để vào Dashboard nhé

Đây là màn hình Dashboard của Firebase

Cá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 app

Và đây là config của chúng ta.
Sau khi đã có config các bạn vào Project của mình ở file .env 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ình

Cá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àohttps://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 Giải trí
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ở cmd 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 -; Database
Giờ ta login vào
Bước xác thực thân quen
Sau khi login thành công nó sẽ thêm vào cho chúng ta
OK nó đã hoạt động
Nó đã hiện danh sách được lấy từ Database của Firebase
Giờ 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 cmd -; npm run buildchạy từ project của mình nha chứ mở cmd từ run lên chạy nó không được đâu
Tiến trình build đang xảy ra
Build thành công
Bâ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/
Gill, Thanh Tam đã thích bài viết này

0 comments:

  1. Chưa có bình luận nào, hãy là người đầu tiên!