= Lưu trữ một trang web động trên Google Firebase bằng Node.js và Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
URL Git giới thiệu: httpsgithub.com/tusharck/firebase-demo
= Tại sao lại là Lưu trữ Firebase? =
Firebase là một nền tảng ứng dụng toàn diện được xây dựng trên cơ sở hạ tầng của GoogleâÃÂÃÂ, do đó, nó cung cấp một cách an toàn, nhanh chóng, miễn phí (các tùy chọn trả phí cũng có sẵn cho các tài nguyên bổ sung) và cách dễ dàng để lưu trữ nội dung của bạn trên web hoặc ứng dụng di động
== Các tính năng và lợi ích chính của bậc miễn phí: ==
- Nó cung cấp miền tùy chỉnh miễn phí&
SSL(SSL cung cấp lớp bảo mật tiêu chuẩn cho kết nối https
- Cloud Firestore: Cơ sở dữ liệu linh hoạt và có thể mở rộng để đồng bộ hóa dữ liệu theo thời gian thực giữa các ứng dụng khách
- Các tính năng khác: Chức năng đám mây, Nhắn tin qua đám mây (FCM), Crashlytics, Liên kết động, Lưu trữ, Bộ công cụ ML, Lưu trữ, Giám sát hiệu suất, Dự đoán và Phòng thí nghiệm thử nghiệm (Chức năng và tài nguyên của các sản phẩm này có thể được tăng lên bằng cách mua gói trả phí, nhưng các dịch vụ cấp miễn phí rất tốt. Để xem các gói, hãy kiểm tra Giá Firebase)
- Tự động mở rộng tài nguyên
= Các bước để lưu trữ trang web động của bạn trên Firebase =
== Yêu cầu ==
**1. Tài khoản Google**Nếu bạn không có tài khoản Google, bạn cần phải đăng ký một tài khoản. Bạn có thể làm như vậy bằng cách truy cập httpsaccounts.google.com/SignUp. **2. Node.js và npm** Mac/WindowsBạn có thể tải xuống trình cài đặt từ httpsnodejs.org/en/download/. Linux
Thực hiện theo các bước bên dưới để cài đặt Node.js:
1. Mở một thiết bị đầu cuối
2. Chạy các lệnh sau:
sudo apt-get cài đặt curlcurl -sL httpsdeb.nodesource.com/
thiết lập_13.x| sudo bash -sudo apt install nodejs **Tôi đã sử dụng Lưu ý: *** **
setup_13.xbởi vì tại thời điểm hướng dẫn, phiên bản mới nhất là
**13**bạn có thể kiểm tra bản phát hành mới nhất bằng cách truy cập httpsnodejs.org/en/
Để kiểm tra xem Node.js và npm đã được cài đặt thành công hay chưa, hãy chạy các lệnh sau, lệnh này sẽ xuất ra phiên bản đã cài đặt:
nút -v
npm -v
**3. Firebase-CLI (Giao diện dòng lệnhĐây là những công cụ để quản lý, xem và triển khai các dự án Firebase
cài đặt npm -g firebase-tools
= Bước 1: Tạo dự án Firebase =
- Truy cập httpsfirebase.google.com và
Đăng nhậptừ góc trên cùng bên phải
- Bấm vào
Chuyển đến bảng điều khiển, từ góc trên cùng bên phải
- Sau đó bấm vào
Tạo dự án, như hình dưới đây
4. Việc tiếp theo là nhập tên dự án của bạn và nhấn tiếp tục
5. Nhấn tiếp tục để bật Google Analytics cho dự án Firebase của bạn (nếu bạn không muốn thì hãy chọn để tắt)
6. Chọn địa điểm gần nhất cho Google Analytics
7. Bấm vào
**Tạo Dự án và đợi nó tải. Sau đó, bạn sẽ thấy một cái gì đó như dưới đây
= Bước 2: Khởi tạo đăng nhập Firebase =
- Mở một dòng lệnh/thiết bị đầu cuối sau đó tạo và chuyển đến một thư mục mới
mkdir my-firebase-projectcd my-firebase-project
2. Để lưu trữ một trang web trên Firebase, hãy đăng nhập vào firebase bằng lệnh sau. Sau khi bạn chạy lệnh, một cửa sổ trình duyệt sẽ mở ra yêu cầu bạn đăng nhập vào firebase bằng thông tin đăng nhập Google của bạn. Nhập thông tin đăng nhập ở đó và Firebase sẽ đăng nhập vào hệ thống của bạn
đăng nhập căn cứ hỏa lực
= Bước 3: Khởi tạo dự án Firebase vào hệ thống của bạn =
- Bây giờ chúng ta khởi tạo project mà chúng ta đã tạo trên Firebase console vào hệ thống. Để thực hiện chạy lệnh bên dưới
firebase init
2. Nhấn phím xuống rồi chọn
**hai điều **bằng cách nhấn phím **dấu cách
- Chức năng
- Lưu trữ
Sau đó
**Nhấn Enter để tiếp tục
3. Sau đó chọn
sau đó nhấn nhập
**Sử dụng một dự án hiện có**
4. Nhấn enter trên
**my-firebase-project** **hoặc tên dự án bạn đã sử dụnghoặc tên dự án bạn đã sử dụng
5. Chọn
**Javascript** và nhấn enter
6. Bạn có thể nói
**Không** với Bạn có muốn sử dụng ESLint để phát hiện các lỗi có thể xảy ra và thực thi phong cách không?
7. Gõ
**Có** để cài đặt các phụ thuộc với npm
8. Ở đây chúng ta phải thực hiện 2 nhiệm vụ:
- Bạn phải chọn thư mục chứa trang web và nội dung của bạn. Theo mặc định nó là
pubicbạn có thể nhấn enter để tiếp tục hoặc bạn có thể thay đổi tên thư mục mong muốn của mình
- Các loại
Có cho trang một ứng dụng để các URL động của bạn có thể được chuyển hướng đến đích thích hợp của chúng
9. Kiểm tra ứng dụng firebase trên hệ thống cục bộ của bạn bằng cách chạy lệnh sau. Sau đó đi đến
**httplocalhost:5000** để xem trang web cơ bản của bạn đang chạy
firebase phục vụ --chỉ lưu trữ, chức năng
Bạn sẽ thấy một cái gì đó như thế này dưới đây sau khi mở
**httplocalhost:5000** URL
10. Đóng máy chủ từ thiết bị đầu cuối
= Bước 4: Cài đặt các gói và tạo thư mục view cho website động =
- Ở đây chúng ta sẽ chuyển bên trong thư mục hàm để thực hiện việc sử dụng
cd chức năng
**2. Install Express**Đây là khung ứng dụng web Node.js tối thiểu và linh hoạt
npm tôi thể hiện --save
**3. Cài đặt Handle Bars**Đây là một công cụ tạo khuôn mẫu cho Node.js được sử dụng cho giao diện người dùng động của trang web
npm tôi tay lái --save
**4. Cài đặt hợp nhất**
npm tôi hợp nhất --save
5. Tạo một thư mục có tên
**views** bên trong thư mục **functions** nơi chúng tôi sẽ lưu trữ tất cả mã giao diện người dùng
mkdir
lượt xem
6. Chuyển về thư mục chính bằng cách chạy lệnh sau:
đĩa CD .
= Bước 5: Thiết lập Firestore (Cơ sở dữ liệu đám mây) =
== Cấu hình cơ sở dữ liệu ==
- Truy cập httpsconsole.firebase.google.com/
- Chọn dự án của bạn
- Lựa chọn
Cơ sở dữ liệu từ khung bên trái
4. Bấm vào
**Tạo nên cơ sở dữ liệu**
5. Chọn Bắt đầu ở chế độ kiểm tra vì nếu không, bạn sẽ không thể truy cập cơ sở dữ liệu từ hệ thống của mình. Chúng tôi sẽ thay đổi cài đặt này sau khi chúng tôi hoàn thành việc phát triển trang web
Sau đó nhấn vào
**Tiếp theo** sau khi làm như vậy
6. Chọn vị trí của Firestore DB của bạn
**Sau khi bạn đặt vị trí này, bạn không thể thay đổi nó sau này. Ghi chú: **
== Tạo dữ liệu ==
- Bấm vào bắt đầu bộ sưu tập
2. Nhập
** ID bộ sưu tập bạn có thể lấy mẫu ngay bây giờ
3. Nhập dữ liệu mẫu. Đi vào
**sample_doc ** là **ID tài liệu. **Nhập **Tiêu đề** bên trong Trường **. Tôi thích Đám mây** bên trong **Giá trị Sau đó nhấp vào **Lưu**
= Bước 6: Xây dựng nội dung động cho website =
Chúng ta sẽ chia phần này thành hai phần, trong phần đầu tiên, chúng ta sẽ xem cách lấy dữ liệu từ Firestore và sử dụng trong trang web. Trong phần thứ hai, chúng ta sẽ xem cách gửi dữ liệu biểu mẫu
**Đầu tiên, chúng tôi sẽ tải xuống thông tin đăng nhập để truy cập Firestore**
2. Bấm vào
**cài đặt** từ ngăn bên trái và chuyển đến **Cài đặt dự án**
3. Chuyển đến
**Tài khoản dịch vụ** và nhấp vào **Tạo khóa riêng mới
4. Bấm vào
**Tạo khóa Nó sẽ bật lên để tải xuống khóa. Lưu trữ khóa bên trong thư mục **functions** trên trang web của bạn
== Đang tìm nạp từ Firestore ==
- Mở
index.js bên trong thư mục hàm
2. Chúng tôi cần xác định một số thư viện mà chúng tôi muốn sử dụng trong ứng dụng của mình. Đây là những thư viện tương tự mà chúng tôi đã cài đặt trước đó
chức năng const = yêu cầu ('firebase-functionsconst express = yêu cầu ('expressconst động cơ = yêu cầu ('consolidatevar hbs = yêu cầu ('tay láiconst admin = yêu cầu ('firebase-admin
3. Ở đây chúng tôi đặt ra một số điều:
- Khởi tạo ứng dụng bằng express
- Chúng tôi sẽ đặt động cơ của chúng tôi làm tay lái
- Sau đó, chúng tôi sẽ thông báo cho express rằng mã giao diện người dùng của chúng tôi sẽ nằm trong thư mục lượt xem
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Cho phép ứng dụng của bạn truy cập Firestore DB của bạn
*Ghi chú:*
1. Thay đổi
**YOUR_SDK_NAMEjson với tệp bạn đã tải xuống cho **thông tin đăng nhập để truy cập Firestore2. Thay đổi URL cơ sở dữ liệu thành URL cơ sở dữ liệu của bạn. Để xem URL, bạn có thể vào**Cài đặt >Tài khoản dịch vụ**
var serviceAccount = yêu cầu
YOUR_SDK_NAME.jsonadmin.initializeApp({thông tin đăng nhập: admin.credential.cert(serviceAccount), URL cơ sở dữ liệu: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Hàm lấy dữ liệu từ Firestore
- ID bộ sưu tập là
vật mẫu
- ID tài liệu là
sample_doc
Chúng tôi đã xác định ở trên trong khi nhập dữ liệu mẫu
chức năng không đồng bộ getFirestoreconst firestore_con = đang chờ admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Không có tài liệu nào như vậy }
khác {trả về doc.data
.catch(err =>{ console.log('Lỗi nhận tài liệu', errreturn writeResult
}
**Chúng tôi sử dụng Lưu ý: ** **không đồng bộ** vì chúng tôi phải đợi thao tác hứa hoàn thành giữa Cơ sở dữ liệu và trang web của chúng tôi
6. Tạo tuyến đường và gửi kết quả đến giao diện người dùng
app.getasync (yêu cầu, phản hồi) var db_result = đang chờ getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Tạo
**index.hbs** bên trong thư mục **views**. hbs là một tệp handelbars Lưu ý: **
8. Viết mã HTML cơ bản này bên trong
**index.hbs** để xem kết quả tìm nạp
Tushar Chand Kapoor
