Trang này được dịch bởi Cloud Translation API.

Triển khai cho tính năng Lưu trữ ứng dụng Firebase bằng ứng dụng Next.js

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách triển khai đến tính năng Lưu trữ ứng dụng Firebase bằng một ứng dụng web Next.js có tên là Friendly Eats (Quán ăn thân thiện). Đây là một trang web đánh giá nhà hàng.

Ứng dụng web Friendly Eats

Ứng dụng web hoàn chỉnh này cung cấp các tính năng hữu ích minh hoạ cách Firebase có thể giúp bạn tạo ứng dụng Next.js.

Tự động tạo và triển khai: Lớp học lập trình này hướng dẫn bạn cách sử dụng Firebase App Hosting để tự động tạo và triển khai mã Next.js mỗi khi bạn đẩy mã lên một nhánh đã định cấu hình.
Đăng nhập và đăng xuất: Ứng dụng web hoàn chỉnh cho phép người dùng đăng nhập/đăng xuất bằng Google. Hoạt động đăng nhập và duy trì trạng thái đăng nhập của người dùng được quản lý hoàn toàn thông qua Xác thực Firebase.
Hình ảnh: Ứng dụng web hoàn chỉnh cho phép người dùng đã đăng nhập tải hình ảnh nhà hàng lên. Thành phần hình ảnh được lưu trữ trong Cloud Storage cho Firebase. Firebase JavaScript SDK cung cấp một URL công khai cho hình ảnh đã tải lên. Sau đó, URL công khai này sẽ được lưu trữ trong tài liệu nhà hàng có liên quan trong Cloud Firestore.
Bộ lọc: Ứng dụng web hoàn chỉnh cho phép người dùng đã đăng nhập lọc danh sách nhà hàng dựa trên danh mục, vị trí và giá. Bạn cũng có thể tuỳ chỉnh phương thức sắp xếp được dùng. Dữ liệu được truy cập từ Cloud Firestore và các truy vấn Firestore được áp dụng dựa trên các bộ lọc được dùng.
Bài đánh giá: Ứng dụng web hoàn chỉnh cho phép người dùng đã đăng nhập đăng bài đánh giá về nhà hàng, bao gồm điểm xếp hạng theo số sao và thông báo bằng văn bản. Thông tin đánh giá được lưu trữ trong Cloud Firestore.
Bản tóm tắt bài đánh giá: Ứng dụng web đã hoàn tất sẽ tự động tóm tắt các bài đánh giá bằng mô hình Gemini. Bản tóm tắt do AI tạo được lưu trữ trong Cloud Firestore.

Điều kiện tiên quyết

Kiến thức về Next.js và JavaScript

Kiến thức bạn sẽ học được

Cách sử dụng Firebase với Bộ định tuyến ứng dụng Next.js và tính năng hiển thị phía máy chủ
Cách cho phép các lệnh gọi đến Gemini API chỉ bằng cách sử dụng các Secret phía máy chủ

Bạn cần có

Một trình duyệt mà bạn chọn, chẳng hạn như Google Chrome
Quyền truy cập vào IDX.dev (một không gian làm việc dựa trên web)
Một Tài khoản Google để tạo và quản lý dự án Firebase của bạn
Lưu ý: Để sử dụng tín dụng Cloud cho lớp học lập trình này, bạn cần sử dụng tài khoản @gmail.com, chứ không phải tài khoản sinh viên hoặc tài khoản công ty.
Một tài khoản GitHub (không nhất thiết phải là tài khoản email giống như tài khoản ở trên)

2. Thiết lập môi trường phát triển và kho lưu trữ GitHub

Lớp học lập trình này cung cấp cơ sở mã khởi đầu của ứng dụng và dựa vào Firebase CLI cũng như IDX.dev.

Tạo một kho lưu trữ GitHub mới rồi nhập kho lưu trữ đó vào IDX

Dịch vụ Lưu trữ ứng dụng Firebase cho phép bạn thiết lập một kho lưu trữ GitHub để tạo và triển khai mã Next.js mỗi khi bạn đẩy mã lên một nhánh đã định cấu hình.

Tạo một kho lưu trữ GitHub mới cho lớp học lập trình này: https://github.com/new. Bạn có thể đặt tên tuỳ ý, ví dụ: MyFriendlyEatsCodelab.
Sao chép URL của kho lưu trữ mới. Thông báo sẽ có dạng như sau:
https://github.com/USER_NAME/REPOSITORY_NAME.git
Truy cập vào https://idx.google.com rồi đăng nhập.
Nhấp vào Nhập một kho lưu trữ rồi dán URL GitHub mà bạn đã sao chép.
IDX sẽ nhắc bạn liên kết với GitHub, sau đó sẽ sao chép kho lưu trữ (trống) của bạn.

Xem kho lưu trữ mã nguồn của lớp học lập trình

Xem nguồn của lớp học lập trình tại https://github.com/firebase/friendlyeats-web. Kho lưu trữ friendlyeats-web chứa các dự án mẫu cho nhiều nền tảng.

Lớp học lập trình mà bạn đang tham gia chỉ tập trung vào Firebase App Hosting và Gemini API, đồng thời là phiên bản rút gọn của lớp học lập trình đầy đủ "Tích hợp Firebase với ứng dụng Next.js". Lớp học lập trình rút gọn này yêu cầu bạn chỉ làm việc với mã nguồn trong nhánh #io-connect của kho lưu trữ friendlyeats-web, cụ thể là thư mục nextjs-step10.

Hãy lưu ý các thư mục bổ sung sau đây của kho lưu trữ friendlyeats-web. Mặc dù bạn không cần các thư mục này cho lớp học lập trình này, nhưng bạn nên biết chúng là gì.

nextjs-start: chứa đoạn mã khởi đầu cho lớp học lập trình đầy đủ "Tích hợp Firebase với một ứng dụng Next.js".
nextjs-end: chứa đoạn mã giải pháp cho ứng dụng web đã hoàn tất.

Sao chép nguồn codelab vào kho lưu trữ mới

Sau đây là cách sao chép thư mục nextjs-step10 vào kho lưu trữ của riêng bạn:

Trong IDX, hãy mở cửa sổ dòng lệnh bằng cách chọn Menu > Terminal > New Terminal (Trình đơn > Cửa sổ dòng lệnh > Cửa sổ dòng lệnh mới).
Sử dụng gói npm giget để chỉ tìm nạp thư mục nextjs-step10 từ nhánh io-connect:
```
npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
```
Theo dõi các thay đổi cục bộ bằng git:
```
git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main
```
Lưu ý: Bạn cũng có thể sử dụng thẻ "Source Control" (Kiểm soát nguồn) trong thanh bên của IDX để xác nhận và đẩy lên GitHub.

Giờ đây, bạn sẽ thấy mã khởi đầu trong kho lưu trữ GitHub.

3. Xem xét cơ sở mã khởi đầu

Trong phần này, bạn sẽ xem xét một số khu vực của cơ sở mã khởi đầu của ứng dụng mà bạn sẽ thêm chức năng vào trong lớp học lập trình này.

Cấu trúc thư mục và tệp

Bảng sau đây chứa thông tin tổng quan về cấu trúc thư mục và tệp của ứng dụng:

Thư mục và tệp	Nội dung mô tả
`src/components`	Các thành phần React cho bộ lọc, tiêu đề, thông tin chi tiết về nhà hàng và bài đánh giá
`src/lib`	Các hàm tiện ích không nhất thiết phải liên kết với React hoặc Next.js
`src/lib/firebase`	Mã dành riêng cho Firebase và cấu hình Firebase
`public`	Tài sản tĩnh trong ứng dụng web, chẳng hạn như biểu tượng
`src/app`	Định tuyến bằng Bộ định tuyến ứng dụng Next.js
`src/app/restaurant`	Một trình xử lý tuyến đường API
`package.json` và `package-lock.json`	Phần phụ thuộc dự án với npm
`next.config.js`	Cấu hình dành riêng cho Next.js (các thao tác trên máy chủ được bật)
`jsconfig.json`	Cấu hình dịch vụ ngôn ngữ JavaScript

Các thành phần máy chủ và máy khách

Ứng dụng này là một ứng dụng web Next.js sử dụng App Router. Tính năng kết xuất phía máy chủ được dùng trong toàn bộ ứng dụng. Ví dụ: tệp src/app/page.js là một thành phần máy chủ chịu trách nhiệm về trang chính. Tệp src/components/RestaurantListings.jsx là một thành phần ứng dụng khách được biểu thị bằng chỉ thị "use client" ở đầu tệp.

Câu lệnh nhập

Trong một số tệp, bạn có thể nhận thấy các câu lệnh nhập như sau:

import RatingPicker from "@/src/components/RatingPicker.jsx";

Ứng dụng này sử dụng biểu tượng @ để tránh các đường dẫn nhập tương đối rườm rà và được thực hiện nhờ bí danh đường dẫn.

API dành riêng cho Firebase

Tất cả mã Firebase API đều được gói trong thư mục src/lib/firebase. Sau đó, các thành phần React riêng lẻ sẽ nhập các hàm được bao bọc từ thư mục src/lib/firebase, thay vì nhập trực tiếp các hàm Firebase.

Dữ liệu mô phỏng

Dữ liệu nhà hàng và bài đánh giá mô phỏng có trong tệp src/lib/randomData.js. Dữ liệu từ tệp đó được tập hợp trong mã của tệp src/lib/fakeRestaurants.js.

4. Thiết lập dự án Firebase

Trong phần này, bạn sẽ thiết lập một dự án Firebase và liên kết một ứng dụng web Firebase với dự án đó. Bạn cũng sẽ thiết lập các dịch vụ Firebase mà ứng dụng web mẫu sử dụng.

Tạo một dự án Firebase

Đăng nhập vào bảng điều khiển của Firebase bằng chính Tài khoản Google mà bạn đã dùng ở bước trước.
Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: FriendlyEats Codelab).
Tên dự án này được dùng làm tên hiển thị trong các giao diện của Firebase và Firebase sẽ tự động tạo một mã dự án duy nhất dựa trên tên dự án này. Xin lưu ý rằng bạn có thể nhấp vào biểu tượng Chỉnh sửa ngay bây giờ để đặt mã dự án mà bạn muốn, nhưng bạn không thể thay đổi mã này sau khi tạo dự án.

Hãy nhớ mã dự án vì bạn sẽ cần mã này sau này để xác định dự án Firebase của mình trong Firebase CLI. Nếu quên mã nhận dạng, bạn luôn có thể tìm thấy mã này sau trong phần Cài đặt dự án.
Nhấp vào Tiếp tục.
Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, rồi nhấp vào Tiếp tục.
(Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy hãy tắt lựa chọn Google Analytics.
Nhấp vào Tạo dự án, đợi dự án được cấp phép rồi nhấp vào Tiếp tục.

Nâng cấp gói giá của Firebase

Để sử dụng tính năng Lưu trữ ứng dụng Firebase và Bộ nhớ đám mây cho Firebase, dự án Firebase của bạn cần phải sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án đó được liên kết với một tài khoản Thanh toán trên đám mây.

Tài khoản thanh toán trên Cloud yêu cầu bạn phải có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng trị giá 300 USD và Tài khoản thanh toán trên đám mây dùng thử miễn phí hay không.
Nếu bạn đang thực hiện lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có tín dụng Cloud nào không.

Để nâng cấp dự án lên gói Blaze, hãy làm theo các bước sau:

Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết một tài khoản thanh toán trên Cloud với dự án của bạn.
Nếu cần tạo một tài khoản thanh toán trên Cloud trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.

5. Tạo một phần phụ trợ Dịch vụ lưu trữ ứng dụng

Trong phần này, bạn sẽ thiết lập một phần phụ trợ của Dịch vụ lưu trữ ứng dụng để theo dõi một nhánh trên kho lưu trữ git. Bạn cũng sẽ định cấu hình tất cả các dịch vụ mà phần phụ trợ sẽ giao tiếp.

Đến cuối phần này, bạn sẽ có một phần phụ trợ Dịch vụ lưu trữ ứng dụng được kết nối với kho lưu trữ của bạn trong GitHub. Phần phụ trợ này sẽ tự động tạo lại và triển khai một phiên bản mới của ứng dụng bất cứ khi nào bạn đẩy một cam kết mới vào nhánh main.

Tạo một phần phụ trợ

Trong bảng điều khiển của Firebase, hãy chuyển đến trang App Hosting:
Nhấp vào Bắt đầu để bắt đầu quy trình tạo phần phụ trợ.
Làm theo lời nhắc để nhập và kết nối kho lưu trữ GitHub mà bạn đã tạo trước đó.
Đặt chế độ cài đặt triển khai:
- Giữ thư mục gốc là /
- Đặt nhánh phát hành công khai thành main
- Bật tính năng phát hành tự động
Đặt tên cho phần phụ trợ của bạn friendlyeats-codelab (hoặc tên phần phụ trợ mà bạn chọn). Đây sẽ là một phần của miền dùng để truy cập vào phần phụ trợ.
Quy trình này cũng tự động tạo một Ứng dụng web Firebase trong dự án Firebase của bạn. Sau này trong lớp học lập trình này, bạn sẽ sử dụng các giá trị cấu hình của Ứng dụng web này để kết nối cơ sở mã với dự án Firebase.
Nhấp vào Hoàn tất và triển khai. Sau một lát, bạn sẽ được chuyển đến một trang mới, nơi bạn có thể xem trạng thái của phần phụ trợ mới cho Dịch vụ lưu trữ ứng dụng!
Lưu ý: Bạn có thể theo dõi các dịch vụ cơ bản của Google Cloud cho phần phụ trợ của Dịch vụ lưu trữ ứng dụng bằng cách nhấp vào các đường liên kết trên bảng điều khiển. Tìm hiểu thêm trong phần Xem nhật ký và chỉ số.
Sao chép miền mới của bạn từ trang tổng quan Lưu trữ ứng dụng.
Miền này sẽ có dạng như BACKEND_ID--PROJECT_ID.REGION.hosted.app. Bạn sẽ cần miền này để thiết lập Firebase Authentication sau.

Có thể mất vài phút để miền bắt đầu hoạt động do quá trình truyền tải DNS và tạo chứng chỉ SSL. Trong khi hệ thống tạo phần phụ trợ, hãy tiếp tục thiết lập phần còn lại của dự án Firebase và định cấu hình phần phụ trợ (các bước tiếp theo của lớp học lập trình này).

Mỗi khi đẩy một cam kết mới vào nhánh main của kho lưu trữ GitHub, bạn sẽ thấy một bản dựng và quy trình phát hành mới bắt đầu trong bảng điều khiển Firebase, đồng thời trang web của bạn sẽ tự động cập nhật sau khi quy trình phát hành hoàn tất.

6. Thiết lập các dịch vụ khác của Firebase

Mặc dù lớp học lập trình này chỉ tập trung vào Firebase App Hosting và Gemini API, nhưng ứng dụng web đang hoạt động cần các dịch vụ khác của Firebase để hoạt động. Mã để làm cho tất cả các dịch vụ này hoạt động trong ứng dụng của bạn là một phần của cơ sở mã mà bạn đã sao chép vào kho lưu trữ GitHub của riêng mình, nhưng bạn vẫn cần thiết lập các dịch vụ này trong dự án Firebase.

Thiết lập tính năng xác thực

Trong bảng điều khiển của Firebase, hãy chuyển đến mục Xác thực.
Nhấp vào Bắt đầu.
Trong cột Nhà cung cấp bổ sung, hãy nhấp vào Google > Bật.
1. Trong hộp văn bản Tên công khai cho dự án, hãy nhập một tên, chẳng hạn như My FriendlyEatsCodelab app.
2. Trong trình đơn thả xuống Email hỗ trợ cho dự án, hãy chọn địa chỉ email của bạn.
3. Nhấp vào Lưu.
Nhấp vào thẻ Cài đặt trong trang Xác thực.
1. Nhấp vào Miền được uỷ quyền trong trình đơn bên trái trên màn hình.
2. Nhấp vào Thêm miền, rồi thêm miền Lưu trữ ứng dụng mà bạn vừa tạo (miền này kết thúc bằng .hosted.app).
3. Nhấp vào Thêm để lưu.

Thiết lập Cloud Firestore

Trong bảng điều khiển bên trái của bảng điều khiển Firebase, hãy mở rộng mục Tạo rồi chọn Cơ sở dữ liệu Firestore.
Nhấp vào Tạo cơ sở dữ liệu.
Để nguyên Mã cơ sở dữ liệu được đặt thành (default).
Chọn một vị trí cho cơ sở dữ liệu của bạn, rồi nhấp vào Tiếp theo.
Đối với một ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng của mình.
Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Sau này trong lớp học lập trình này, bạn sẽ thêm Quy tắc bảo mật để bảo mật dữ liệu của mình. Không phân phối hoặc công khai một ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
Nhấp vào Tạo.

Thiết lập Cloud Storage cho Firebase

Trong bảng điều khiển bên trái của bảng điều khiển Firebase, hãy mở rộng Tạo rồi chọn Bộ nhớ.
Nhấp vào Bắt đầu.
Chọn một vị trí cho bộ chứa lưu trữ mặc định.
Các bộ chứa ở US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp"Luôn miễn phí" của Google Cloud Storage. Các bộ chứa ở tất cả những vị trí khác đều tuân theo mức giá và mức sử dụng của Google Cloud Storage.
Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Sau này trong lớp học lập trình này, bạn sẽ thêm các quy tắc bảo mật để bảo mật dữ liệu của mình. Không phân phối hoặc công khai ứng dụng mà không thêm Quy tắc bảo mật cho Nhóm lưu trữ.
Nhấp vào Tạo.

7. Định cấu hình ứng dụng web

Giờ đây, khi đã tạo một dự án Firebase và bật tất cả các dịch vụ Firebase được dùng trong ứng dụng, bạn có thể bắt đầu làm việc trong IDX để định cấu hình ứng dụng web nhằm sử dụng các dịch vụ đó.

Đăng nhập vào Firebase CLI trong IDX

IDX đã cài đặt Node.js và Firebase CLI, nên bạn có thể bỏ qua bước cài đặt và chỉ cần bắt đầu thiết lập CLI.

Trong thiết bị đầu cuối trong IDX, hãy chạy các lệnh này để định cấu hình CLI sử dụng dự án Firebase mà bạn đã tạo trước đó:
```
firebase login --no-localhost
firebase use --add
```
Khi được nhắc nhập bí danh, hãy nhập codelab.
Tuỳ thuộc vào việc bạn muốn Firebase thu thập dữ liệu hay không, hãy nhập Y hoặc N. Cả hai lựa chọn đều phù hợp với lớp học lập trình này.
Trong trình duyệt, hãy chọn Tài khoản Google của bạn, rồi nhấp vào Cho phép.

Triển khai Quy tắc bảo mật và chỉ mục

Đoạn mã mà bạn đã sao chép vào kho lưu trữ GitHub của mình đã có các quy tắc bảo mật cho Firestore (trong firestore.rules) và cho Cloud Storage cho Firebase (trong storage.rules). Sau khi bạn triển khai Quy tắc bảo mật, dữ liệu trong cơ sở dữ liệu và nhóm của bạn sẽ được bảo vệ tốt hơn khỏi hành vi sử dụng sai mục đích.

Bạn cũng có thể dùng CLI để triển khai một nhóm chỉ mục cho Firestore (trong firestore.indexes.json) nhằm bật các truy vấn nâng cao.

Trong thiết bị đầu cuối trong IDX, hãy chạy lệnh này để triển khai các Quy tắc bảo mật và chỉ mục này:
```
firebase deploy --only firestore,storage
```
Nếu bạn được hỏi: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", hãy nhấn Enter để chọn Có.

Thêm cấu hình Firebase vào mã ứng dụng web

Trong bảng điều khiển của Firebase, hãy làm như sau:
1. Chuyển đến phần Cài đặt dự án.
2. Di chuyển xuống phần Ứng dụng của bạn, sau đó chọn ứng dụng có cùng tên với phần phụ trợ của Dịch vụ lưu trữ ứng dụng.
3. Trong phần Thiết lập và định cấu hình SDK, hãy chọn tuỳ chọn Config (Cấu hình), sau đó sao chép các thuộc tính của biến firebaseConfig và giá trị của các thuộc tính đó.

Trong IDX, hãy làm như sau:

Mở tệp apphosting.yaml. Đây là nơi bạn sẽ thiết lập các biến môi trường trên Dịch vụ lưu trữ ứng dụng, cũng như các bí mật và cấu hình thời gian chạy.
Lưu ý: Ngoài việc sử dụng apphosting.yaml, bạn cũng có thể quản lý các biến môi trường cho ứng dụng Next.js bằng cách sử dụng .env.

Tìm hiểu thêm.

Điền các giá trị biến môi trường được cung cấp bằng các giá trị cấu hình mà bạn đã sao chép từ bảng điều khiển Firebase.Ví dụ: (thay thế bằng các giá trị của riêng bạn):

runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa

Lưu tệp. Sau đó, trong thiết bị đầu cuối trong IDX, hãy chạy các lệnh sau để đẩy các thay đổi lên GitHub:
```
git commit -a -m "Setup Firebase Config"

git push
```

Quay lại bảng điều khiển của Firebase, rồi chuyển đến trang Lưu trữ ứng dụng, sau đó làm như sau:
1. Nhấp vào Xem trang tổng quan cho phần phụ trợ của bạn.
2. Nhận thấy rằng một bản dựng mới đã được kích hoạt từ lệnh git push của bạn! Quá trình này sẽ mất khoảng 3 phút để hoàn tất việc tạo và triển khai cho Cloud Run. Bạn có thể theo dõi tiến trình của yêu cầu này bằng cách nhấp vào khối build-ID.
3. Làm mới trang bảng điều khiển để kiểm tra xem quá trình phát hành đã hoàn tất hay chưa. Sau khi quá trình này hoàn tất, hãy nhấp vào đường liên kết cho miền của bạn (kết thúc bằng .hosted.app) trong mục domains (miền) để mở miền đó và xem ứng dụng mới triển khai!

Xin chúc mừng, bạn đã triển khai ứng dụng web ban đầu! Hãy cùng tìm hiểu sâu hơn một chút.

8. Dùng thử ứng dụng web trong trình duyệt

Trong trình duyệt, hãy làm mới trang hiển thị ứng dụng web của bạn.
Nhấp vào Đăng nhập bằng Google.
Đăng xuất rồi đăng nhập lại. Trang này cập nhật theo thời gian thực mà không cần làm mới trang. Bạn có thể lặp lại bước này với những người dùng khác.
Không bắt buộc: Trong trình duyệt, hãy làm mới ứng dụng web. Nhấp chuột phải vào ứng dụng web, chọn Xem nguồn trang rồi tìm tên hiển thị. Nội dung này xuất hiện trong nguồn HTML thô do máy chủ trả về.

Xem thông tin về nhà hàng

Ứng dụng web này có dữ liệu mô phỏng cho nhà hàng và bài đánh giá.

Để chèn dữ liệu nhà hàng mô phỏng vào cơ sở dữ liệu Cloud Firestore, hãy chọn > Add sample restaurants (Thêm nhà hàng mẫu).

Xác minh rằng trang thông tin nhà hàng tải vào thời gian chạy máy chủ

Khi sử dụng khung Next.js, có thể bạn không biết rõ thời điểm dữ liệu được tải trong thời gian chạy máy chủ hoặc thời gian chạy phía máy khách.

Để xác minh rằng trang thông tin nhà hàng tải vào thời gian chạy máy chủ, hãy làm theo các bước sau:

Trong ứng dụng web, hãy mở Công cụ cho nhà phát triển rồi tắt JavaScript.
Làm mới ứng dụng web. Danh sách nhà hàng vẫn tải. Thông tin về nhà hàng được trả về trong phản hồi của máy chủ. Khi JavaScript được bật, thông tin nhà hàng sẽ được truy xuất thông qua mã JavaScript phía máy khách.
Trong Công cụ cho nhà phát triển, hãy bật lại JavaScript.
Trong ứng dụng web, hãy chọn > Thêm nhà hàng mẫu. Nếu bạn triển khai đúng chức năng chụp nhanh, các nhà hàng sẽ xuất hiện theo thời gian thực mà không cần làm mới trang.

Thêm bài đánh giá cho nhà hàng

Để thêm một bài đánh giá và xác minh rằng bài đánh giá đó đã được chèn vào Cloud Firestore, hãy làm theo các bước sau:

Làm mới ứng dụng web rồi chọn một nhà hàng trên trang chủ.
Trên trang của nhà hàng, hãy nhấp vào biểu tượng .
Chọn điểm xếp hạng theo sao.
Viết bài đánh giá.
Nhấp vào Gửi. Bài đánh giá của bạn sẽ xuất hiện ở đầu danh sách bài đánh giá.

9. Tóm tắt bài đánh giá nhà hàng bằng AI tạo sinh

Trong phần này, bạn sẽ thêm một tính năng tóm tắt bài đánh giá để người dùng có thể nhanh chóng nắm được ý kiến của mọi người về một nhà hàng mà không cần phải đọc từng bài đánh giá.

Lưu trữ khoá Gemini API trong Cloud Secret Manager

App Hosting tích hợp với Cloud Secret Manager để cho phép bạn lưu trữ các giá trị nhạy cảm như khoá API một cách an toàn.

Để sử dụng Gemini API, bạn cần có một khoá API. Tạo khoá trong Google AI Studio.
Khi được nhắc, hãy chọn cùng một dự án mà bạn đã sử dụng cho lớp học lập trình này (thực tế, dự án Firebase là một dự án trên Google Cloud).
Trong thiết bị đầu cuối trong IDX, hãy chạy lệnh này để tạo một khoá bí mật mới:
```
firebase apphosting:secrets:set gemini-api-key
```
Khi được nhắc nhập giá trị bí mật, hãy sao chép và dán khoá Gemini API của bạn từ Google AI Studio.
Nếu bạn được hỏi: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", hãy nhấn Enter để chọn Có.
Khi được hỏi có nên thêm khoá bí mật mới vào apphosting.yaml hay không, hãy nhập Y để chấp nhận, sau đó nhấn Enter để chọn GEMINI_API_KEY làm tên biến môi trường.

Khoá Gemini API của bạn hiện được lưu trữ an toàn trong Cloud Secret Manager và có thể truy cập vào phần phụ trợ của dịch vụ Lưu trữ ứng dụng. Bạn cũng có thể xem giá trị này trong Trang tổng quan Secrets Manager trong Google Cloud Console.

Mở tệp apphosting.yaml và lưu ý rằng tên của khoá bí mật đã được ghi lại, nhưng không phải là các giá trị.Tệp này sẽ có dạng như sau:

runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

Triển khai thành phần tóm tắt bài đánh giá

Trong IDX, hãy mở src/components/Reviews/ReviewSummary.jsx.

Thay thế hàm GeminiSummary bằng mã sau:

export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}

Trong thiết bị đầu cuối trong IDX, hãy chạy các lệnh này để tạo một cam kết và đẩy cam kết đó vào kho lưu trữ GitHub của bạn.
```
git commit -a -m "Use AI to summarize reviews"

git push
```
Trong bảng điều khiển của Firebase, hãy mở trang Lưu trữ ứng dụng rồi đợi quá trình triển khai mới hoàn tất.
Trong trình duyệt, hãy nhấp vào một thẻ nhà hàng. Ở đầu màn hình, bạn sẽ thấy một câu tóm tắt tất cả các bài đánh giá về nhà hàng.
Thêm một bài đánh giá mới rồi làm mới trang. Bạn sẽ thấy nội dung thay đổi trong phần tóm tắt.

10. Kết luận

Xin chúc mừng! Bạn đã tìm hiểu cách sử dụng tính năng Lưu trữ ứng dụng Firebase để triển khai một ứng dụng Next.js và sử dụng Gemini API để tóm tắt văn bản. Cụ thể, bạn đã sử dụng những thông tin sau:

Firebase App Hosting để tự động tạo và triển khai mã Next.js mỗi khi bạn đẩy mã lên một nhánh GitHub đã định cấu hình.
Cloud Secret Manager (được tích hợp với Dịch vụ lưu trữ ứng dụng) để lưu trữ khoá Gemini API một cách an toàn, nhờ đó bạn có thể tạo các tính năng AI tạo sinh trong ứng dụng của mình.

Tìm hiểu thêm

Tìm hiểu kỹ về lớp học lập trình đầy đủ "Tích hợp Firebase với ứng dụng Next.js" để biết cách chúng tôi thêm Xác thực Firebase, Cloud Firestore và Cloud Storage cho Firebase vào ứng dụng này.

Ngoài ra, hãy xem thêm các lớp học lập trình: