Trong phần 5 này, chúng ta sẽ hoàn thiện Guest Home Page và config để connect với firebase, chuẩn bị cho các phần tiếp theo nhé 😉.
I. Create Header component.
Trong folder components ta tạo thêm component header như sau:
Trong file header.jsx
ta code như sau:
Trong /header/index.jsx
ta thêm code như sau:
File ảnh background và logo, các bạn có thể tải tại đây.
Tiếp tục, tạo thêm file headerContainer.jsx
trong folder containers và thêm đoạn code như sau:
Trong /pages/home.jsx
ta thêm phần header vừa rồi như bên dưới:
Okie! run thử xem chạy có ổn không nhé, nếu được như hình dưới thì đã okie rồi.
II. Connect with firebase.
Để có thể connect vơi firebase, đầu tiên ta cần tạo một firebase project trước đã 😁, nếu bạn chưa từng sử dụng firebase trước đây thì trước tiên bạn cần đăng ký một account với firebase nhé, sau đó làm theo hướng dẫn như bên dưới.
- Step 1: Sau khi vào được trang chủ của firebase bằng account của mình, click vào Go to console như hình.
- Step 2: Sau khi thực hiện xong step 1, ta sẽ thấy UI phần Your Firebase projects của các bạn (Ở đây của mình có 2 cái project cá nhân nên nó sẽ như hình), các bạn click vào Add project để tiến hành tạo project của mình.
- Step 3: Sau khi thực hiện step 2, firebase sẽ cho chúng ta 2 step nhỏ hơn:
- Step 3.1: Phần này là đặt tên, bạn có thể đặt tên tùy ý hoặc cũng có thể đặt tên như hình dưới.
- Step 3.2: Ở bước này chúng ta không cần sử dụng Google Analytics nên tắt nó đi thôi.
- Step 4: Sau khi xong hết step 3, chúng ta sẽ được như hình, chọn phần Firestore Database để tiến hành tạo một Cloud database, lưu trữ những data cần thiết.
- Step 5: Click vào button Create database.
- Step 6: Chọn Start in test mode, bất kỳ ai cũng truy cập và thao tác được với database của chúng ta (chọn mode này để có thể sử dụng được lâu hơn 😁) → click Next để sang step tiếp theo.
- Step 7: Chọn server lưu trữ data của chúng ta, ở đây mình để default là được → click button Enable.
Okie! Vậy là đã setup xong phần firebase project của chúng ta, để project của chúng ta connect được với firebase ta phải config nó như sau:
- Trong folder src tạo folder và file như sau:
/src/lib/firebase.prod.js
và thêm đoạn code như sau:
Config tạm thời như vậy trước, giờ ta quay lại với firebase, chúng ta tiến hành thêm firebase vào web app của chúng ta, các bạn làm như sau:
- Step 1: Click vào icon web này.
- Step 2: Nhập tên firebase project của bạn đã tạo trước đó vào và nhấn vào button Register app như hình.
- Step 3: Sau khi xong step 2, firebase sẽ cung cấp cho chúng ta đoạn script để config với project của chúng ta như hình, copy đoạn script như hình nhé.
- Step 4: Paste đoạn script vào file
/lib/firebase.prod.js
như bên dưới.
Như vậy, chúng ta đã config và connect với firebase xong, tiếp theo chúng ta sẽ add data lên Cloud Firestore của firebase. Chúng ta có thể add trực tiếp bằng tay ở phần Cloud Firestore của firebase như hình bên dưới.
Tuy nhiên chúng ta sẽ không add thủ công như vậy, làm vậy sẽ rất là lâu, do đó các bạn làm như sau:
- Trong folder src tạo thêm file
/src/seedData.js
và thêm đoạn code như sau:
Như tên gọi SeedData, nó có một nhiệm vụ duy nhất là add data lên Cloud Firestore cho chúng ta. Giải thích một tý về các đoạn code trên cho các bạn lần đầu làm quen với firebase nhé 😉.
- getUUID()
: function giúp chúng ta auto generate ID theo dạng string
và id là duy nhất, đây là chỉ là một JS function thông thường thôi. Ex: '0e264c21-96c5-4acd-8be3-b5e41edb04f3'
- firebase.firestore().collection("series").add()
: Tham chiếu đến firestore của firebase thực hiện tạo các collection và add các data vào mỗi collection theo dạng object
.
- Để add các data ta đã chuẩn bị như trên lên Cloud Firestore chúng ta làm như sau:
- Trong file firebase.prod.js
ta thêm dòng code như sau:
Cloud Firestore ban đầu.
- Tiếp theo, trong file /src/index.js
ta edit lại như sau:
Sau đó chúng ta reload lại trang của Cloud Firestore và được kết quả như hình dưới.
Tara 😁! À phần seedData là hàng dùng một lần thôi nhé 😁, vì sao lại dùng một lần ? Bởi vì ta đã add thành công data vào Cloud Firestore của firebase rồi nên sẽ không cần nữa, do đó trong file firebase.prod.js
, ta bỏ phần seedData đi nhé 😉.
III. Tổng kết.
Bài viết hôm nay đến đây thôi, trong phần này chúng ta đã code xong phần header và cũng hoàn thành luôn phần Guest Home Page, setup và connect với firebase. Đồng thời cũng đã add thành công data lên Cloud Firestore của firebase. Trong phần tiếp theo chúng ta sẽ setup một chút React Context cho firebase và sử dụng Authentication do firebase cung cấp để làm trang Sign In nhé 😉. Cảm ơn các bạn đã đọc, See u again~
TỪ QUỐC HƯNG
Đam mêm lập trình Frontend, Yêu thích việc setup workspace theo phong cách tối giản
follow me :
Bài viết liên quan
Event Loop là gì? Cơ chế hoạt động của Event Loop trong JavaScript
Jun 18, 2024 • 7 min read
So sánh Golang và NodeJS chi tiết
Oct 14, 2023 • 22 min read
Home Feed UI Instagram with TailwindCSS: Giới thiệu về series
Nov 28, 2022 • 2 min read
ReactJS Tutorial for Beginners Phần 2
Dec 12, 2021 • 3 min read
ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?
Dec 12, 2021 • 14 min read
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7
Dec 08, 2021 • 8 min read