Tạo ứng dụng web dựa trên AI bằng các tiện ích của Firebase

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 xây dựng các ứng dụng web dựa trên AI mang đến trải nghiệm người dùng hấp dẫn bằng các tiện ích của Firebase.

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

• Có kiến thức về Node.js và JavaScript

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

• Cách sử dụng Tiện ích liên quan đến AI để xử lý ngôn ngữ và video nhập.
• Cách sử dụng Cloud Functions cho Firebase để tạo quy trình giữa các Tiện ích.
• Cách sử dụng JavaScript để truy cập vào dữ liệu đầu ra do Tiện ích tạo ra.

Bạn cần có

• Một trình duyệt mà bạn chọn, chẳng hạn như Google Chrome
• Môi trường phát triển có trình soạn thảo mã và thiết bị đầu cuối
• Tài khoản Google để tạo và quản lý dự án Firebase của bạn

2. Xem xét các ứng dụng web và dịch vụ Firebase của chúng

Phần này mô tả các ứng dụng web mà bạn sẽ tạo trong lớp học lập trình này và Firebase mà bạn sẽ sử dụng để tạo các ứng dụng đó.

Đánh giá ứng dụng

Một công ty bán áo phông bị choáng ngợp bởi các bài đánh giá dài về một trong những chiếc áo phông của họ và không chắc chắn về xếp hạng tổng thể của công ty. Ứng dụng web Reviewly hoàn chỉnh tóm tắt từng bài đánh giá, cung cấp điểm xếp hạng theo sao cho mỗi bài đánh giá, đồng thời sử dụng từng bài đánh giá để suy ra điểm xếp hạng chung cho sản phẩm. Người dùng cũng có thể mở rộng từng bài đánh giá tóm tắt để xem bài đánh giá gốc.

Ứng dụng Chatbot

Đội ngũ giáo viên của một trường bị choáng ngợp bởi những câu hỏi lặp lại về các chủ đề chung, nên họ muốn tự động hoá việc trả lời. Ứng dụng Chatbot hoàn chỉnh sẽ cung cấp cho học viên một bot trò chuyện chạy dựa trên một mô hình ngôn ngữ lớn (LLM) và có thể trả lời các câu hỏi về các chủ đề chung. Bot trò chuyện có bối cảnh trong quá khứ, vì vậy, câu trả lời của bot này có thể ảnh hưởng đến những câu hỏi trước đó mà học viên đã đặt ra trong cùng một cuộc trò chuyện.

Ứng dụng Gợi ý video

Một bộ chính phủ muốn video của mình cung cấp nội dung mô tả bằng âm thanh để cải thiện khả năng tiếp cận. Tuy nhiên, họ có hàng trăm video cần chú thích và cần một cách tiếp cận hợp lý. Ứng dụng Gợi ý về video hoàn chỉnh là một nguyên mẫu mà bộ phận này sẽ xem xét nhằm đánh giá mức độ hiệu quả.

Dưới đây là các tiện ích được sử dụng trong ứng dụng Gợi ý video:

• Gắn nhãn video bằng phần mở rộng Cloud Video AI — trích xuất nhãn từ từng video được tải lên Bộ nhớ.
• Tiện ích Language Tasks with PaLM API (Tác vụ ngôn ngữ với API PaLM) — tóm tắt các nhãn thành phần mô tả văn bản.
• Phần mở rộng Chuyển đổi văn bản sang lời nói — tạo một phiên bản âm thanh cho nội dung mô tả video.

3. Thiết lập môi trường phát triển

Xác minh phiên bản Node.js

1. Trong thiết bị đầu cuối của bạn, xác minh rằng bạn đã cài đặt Node.js v20.0.0 trở lên:

   node -v
   

2. Nếu bạn chưa cài đặt Node.js phiên bản 20.0.0 trở lên, hãy tải xuống và cài đặt phiên bản đó.

Tải kho lưu trữ xuống

1. Nếu bạn đã cài đặt git, hãy sao chép kho lưu trữ GitHub của lớp học lập trình:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Nếu bạn chưa cài đặt git, hãy tải kho lưu trữ GitHub xuống dưới dạng tệp zip.

Xem cấu trúc thư mục

Trên máy cục bộ, hãy tìm kho lưu trữ được sao chép rồi kiểm tra cấu trúc thư mục. Bảng sau đây chứa các thư mục và nội dung mô tả về các thư mục đó:

Mỗi thư mục bao gồm một tệp readme.md giúp khởi động nhanh ứng dụng web tương ứng bằng cách sử dụng các hướng dẫn được đơn giản hoá. Tuy nhiên, nếu mới học lần đầu thì bạn nên hoàn thành lớp học lập trình này vì trong đó có bộ hướng dẫn toàn diện nhất.

Nếu không chắc liệu mình đã áp dụng đúng mã như hướng dẫn trong lớp học lập trình này hay chưa, bạn có thể tìm mã giải pháp cho ứng dụng tương ứng trong thư mục reviewly-end, chatbot-end và video-hint-end.

Cài đặt Firebase CLI

Chạy lệnh sau để xác minh rằng bạn đã cài đặt Firebase CLI và phiên bản 12.5.4 trở lên:

firebase --version

• Nếu bạn đã cài đặt CLI của Firebase, nhưng phiên bản này không phải là phiên bản 12.5.4 trở lên, hãy cập nhật:

  npm update -g firebase-tools
  

• Nếu bạn chưa cài đặt Firebase CLI, hãy cài đặt:

  npm install -g firebase-tools
  

Nếu bạn không thể cài đặt Firebase CLI do lỗi về quyền, hãy xem tài liệu npm hoặc sử dụng một tuỳ chọn cài đặt khác.

Đăng nhập vào Firebase

1. Trong dòng lệnh, hãy chuyển đến thư mục ai-extensions-codelab rồi đăng nhập vào Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Nếu thiết bị đầu cuối cho biết bạn đã đăng nhập vào Firebase, hãy chuyển đến phần Thiết lập dự án Firebase của lớp học lập trình này.
3. Tuỳ thuộc vào việc bạn muốn Firebase thu thập dữ liệu, hãy nhập Y hoặc N.
4. 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.

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ẽ bật các dịch vụ Firebase mà các ứng dụng web mẫu sử dụng.

Tạo một dự án Firebase

1. Trong bảng điều khiển của Firebase, hãy nhấp vào Tạo dự án.
2. Trong hộp văn bản Nhập tên dự án của bạn, hãy nhập AI Extensions Codelab (hoặc tên dự án mà bạn chọn), sau đó nhấp vào Tiếp tục.
3. Đố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 tuỳ chọn Bật Google Analytics cho dự án này.
4. Nhấp vào Tạo dự án.
5. Đợi dự án của bạn được cấp phép, sau đó nhấp vào Tiếp tục.
6. Trong dự án Firebase của bạn, hãy chuyển đến phần Cài đặt dự án. Ghi lại mã dự án vì sau này bạn sẽ cần đến mã này. Mã nhận dạng duy nhất này là cách dự án của bạn được xác định (ví dụ: trong Giao diện dòng lệnh (CLI) của Firebase).

Tải tài khoản dịch vụ Firebase xuống

Một số ứng dụng web mà bạn sẽ xây dựng trong lớp học lập trình này sử dụng tính năng kết xuất phía máy chủ bằng Next.js.

SDK quản trị của Firebase cho Node.js được dùng để đảm bảo Quy tắc bảo mật hoạt động tốt từ mã phía máy chủ. Để sử dụng các API trong Bảng điều khiển dành cho quản trị viên Firebase, bạn cần tải một tài khoản dịch vụ Firebase xuống trong bảng điều khiển của Firebase.

1. Trong bảng điều khiển của Firebase, hãy chuyển đến trang Tài khoản dịch vụ trong phần Cài đặt dự án.
2. Nhấp vào Tạo khoá riêng tư mới > Tạo khoá.
3. Sau khi tệp được tải xuống hệ thống tệp của bạn, hãy lấy đường dẫn đầy đủ đến tệp đó.
   Ví dụ: nếu bạn đã tải tệp xuống thư mục Downloads (Tệp đã tải xuống), đường dẫn đầy đủ sẽ có dạng như sau: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. Trong dòng lệnh, hãy đặt biến môi trường GOOGLE_APPLICATION_CREDENTIALS thành đường dẫn của khoá riêng tư đã tải xuống. Trong môi trường Unix, lệnh có thể có dạng như sau:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Hãy luôn mở cửa sổ dòng lệnh này và sử dụng nó trong phần còn lại của lớp học lập trình này, vì biến môi trường có thể bị mất nếu bạn bắt đầu một phiên dòng lệnh mới.
   Nếu mở một phiên dòng lệnh mới, bạn phải chạy lại lệnh trước đó.

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

Để sử dụng Cloud Functions và Tiện ích Firebase, bạn phải sử dụng Gói giá linh hoạt cho dự án Firebase của mình, 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.

• Để sử dụng tài khoản thanh toán Cloud, 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 miễn phí trên đám mây dành cho ưu đãi dùng thử miễn phí hay không.

Tuy nhiên, xin lưu ý rằng việc hoàn thành lớp học lập trình này sẽ không làm phát sinh bất kỳ khoản phí thực tế nào.

Để nâng cấp dự án của bạn lên Gói linh hoạt, hãy làm theo các bước sau:

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

Thiết lập các dịch vụ của Firebase trong bảng điều khiển của Firebase

Trong phần này, bạn sẽ cung cấp và thiết lập một số dịch vụ của Firebase mà các ứng dụng web sẽ sử dụng trong lớp học lập trình này. Lưu ý rằng không phải tất cả các dịch vụ này đều được sử dụng trong từng ứng dụng web, nhưng việc thiết lập tất cả các dịch vụ này ngay bây giờ sẽ giúp bạn thuận tiện khi thực hiện lớp học lập trình này.

Thiết lập chế độ xác thực

Bạn sẽ dùng tính năng Xác thực với cả ứng dụng Chatbot và ứng dụng Gợi ý video. Tuy nhiên, hãy nhớ rằng nếu bạn đang tạo một ứng dụng thực tế, mỗi ứng dụng phải có một dự án Firebase riêng.

1. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Xác thực.
2. Nhấp vào Bắt đầu.
3. Trong cột Nhà cung cấp khác, hãy nhấp vào Google > Bật.

4. Trong hộp văn bản Tên hiển thị công khai cho dự án, hãy nhập một tên dễ nhớ, chẳng hạn như My AI Extensions Codelab.
5. Trong trình đơn thả xuống Email hỗ trợ cho dự án, hãy chọn địa chỉ email của bạn.
6. Nhấp vào Lưu.
   

Thiết lập Cloud Firestore

Bạn sẽ dùng Firestore với cả 3 ứng dụng này. Tuy nhiên, hãy nhớ rằng nếu bạn đang tạo một ứng dụng thực tế, mỗi ứng dụng phải có một dự án Firebase riêng.

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore.
2. Nhấp vào Tạo cơ sở dữ liệu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo.
   Trong phần sau của 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 tiết lộ ứng dụng công khai khi chưa thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
3. Hãy dùng vị trí mặc định hoặc chọn vị trí mà bạn chọn.
   Đối với ứng dụng thực tế, bạn cần chọn vị trí gần người dùng. Xin lưu ý rằng bạn không thể thay đổi vị trí này sau này và vị trí này cũng sẽ tự động là vị trí của bộ chứa Cloud Storage mặc định của bạn (bước tiếp theo).
4. Nhấp vào Xong.

Thiết lập Cloud Storage cho Firebase

Bạn sẽ dùng Cloud Storage với ứng dụng Gợi ý về video và dùng thử tiện ích Chuyển đổi văn bản sang lời nói (bước tiếp theo của lớp học lập trình).

1. Trong bảng điều khiển của Firebase, hãy chuyển đến mục Bộ nhớ.
2. Nhấp vào Bắt đầu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo.
   Trong phần sau của 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 không phân phối hoặc tiết lộ ứng dụng công khai khi chưa thêm Quy tắc bảo mật cho bộ chứa Storage.
3. Bạn phải chọn vị trí cho bộ chứa của mình (do đã thiết lập Firestore ở bước trước).
4. Nhấp vào Xong.

Trong các phần tiếp theo của lớp học lập trình này, bạn sẽ cài đặt tiện ích và sửa đổi cơ sở mã của từng ứng dụng mẫu trong lớp học lập trình này để 3 ứng dụng web khác nhau hoạt động.

5. Thiết lập "Tác vụ ngôn ngữ với API PaLM" phần mở rộng cho phần mở rộng về Đánh giá ứng dụng

Cài đặt tiện ích Ngôn ngữ với PaLM API

1. Chuyển đến tiện ích Language Tasks with PaLM API (Tác vụ ngôn ngữ với PaLM API).
2. Nhấp vào Cài đặt trong bảng điều khiển của Firebase.
3. Chọn dự án Firebase của bạn.
4. Trong phần Review API đã bật và đã tạo tài nguyên, hãy nhấp vào Bật bên cạnh mọi dịch vụ được đề xuất cho bạn:

5. Nhấp vào Tiếp theo > Tiếp theo.
6. Trong hộp văn bản Đường dẫn thu thập, hãy nhập bot.
7. Trong hộp văn bản Prompt (Lời nhắc), hãy nhập {{ input }}.
8. Trong hộp văn bản Trường biến, hãy nhập input.
9. Trong hộp văn bản Trường phản hồi, hãy nhập text.
10. Trong trình đơn thả xuống Vị trí Cloud Functions, hãy chọn Iowa (us-central1) hoặc vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage.
11. Trong trình đơn Mô hình ngôn ngữ thả xuống, hãy chọn text-bison-001.
12. Giữ nguyên tất cả giá trị khác theo mặc định.
13. Nhấp vào Cài đặt tiện ích rồi chờ cài đặt tiện ích.

Hãy dùng thử tiện ích mở rộng Tác vụ ngôn ngữ với PaLM API

Mặc dù mục tiêu của lớp học lập trình này là tương tác với tiện ích Công việc ngôn ngữ với PaLM API thông qua một ứng dụng web, nhưng bạn nên tìm hiểu cách hoạt động của tiện ích này bằng cách kích hoạt tiện ích thông qua bảng điều khiển của Firebase. Tiện ích này kích hoạt khi một tài liệu trên Cloud Firestore được thêm vào bộ sưu tập bot.

Để xem cách tiện ích hoạt động bằng cách sử dụng bảng điều khiển của Firebase, hãy làm theo các bước sau:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore.
2. Trong bộ sưu tập bot, hãy nhấp vào Thêm tài liệu.
3. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
4. Trong hộp văn bản Trường, hãy nhập input.
5. Trong hộp văn bản Giá trị, hãy nhập Tell me about the moon.
6. Nhấp vào Lưu rồi đợi vài giây. Tài liệu của bạn trong tập hợp bot hiện đã có phản hồi cho truy vấn của bạn.

6. Thiết lập ứng dụng Reviewly để dùng Firebase

Để chạy ứng dụng Reviewly, bạn cần thiết lập mã của ứng dụng và giao diện dòng lệnh (CLI) của Firebase để tương tác với dự án Firebase.

Thêm cấu hình và dịch vụ Firebase vào mã của ứng dụng

Để sử dụng Firebase, cơ sở mã của ứng dụng cần có Firebase SDK cho các dịch vụ bạn muốn sử dụng và cấu hình Firebase giúp SDK biết nên sử dụng dự án Firebase nào.

Ứng dụng mẫu của lớp học lập trình này đã có tất cả mã nhập và khởi tạo cần thiết cho các SDK (xem reviewly-start/js/reviews.js), vì vậy, bạn không cần thêm những mã này. Tuy nhiên, ứng dụng mẫu chỉ có các giá trị phần giữ chỗ cho cấu hình Firebase (xem reviewly-start/js/firebase-config.js). Vì vậy, bạn cần đăng ký ứng dụng với dự án Firebase để nhận các giá trị cấu hình Firebase duy nhất cho ứng dụng của mình.

1. Trong bảng điều khiển của Firebase, trong dự án Firebase, hãy chuyển đến phần Tổng quan về dự án, sau đó nhấp vào Web.
   
2. Trong hộp văn bản Biệt hiệu ứng dụng, nhập biệt hiệu dễ nhớ của ứng dụng, chẳng hạn như My Reviewly app.
3. Không chọn hộp đánh dấu Đồng thời thiết lập tính năng Lưu trữ Firebase cho ứng dụng này. Bạn sẽ thực hiện các bước này sau trong lớp học lập trình này.
4. Nhấp vào Đăng ký ứng dụng.
5. Bảng điều khiển sẽ hiển thị một đoạn mã để thêm và khởi chạy SDK Firebase bằng một đối tượng cấu hình Firebase dành riêng cho ứng dụng. Sao chép tất cả các thuộc tính trong đối tượng cấu hình Firebase.
6. Trong trình soạn thảo mã, hãy mở tệp reviewly-start/js/firebase-config.js.
7. Thay thế các giá trị phần giữ chỗ bằng những giá trị bạn vừa sao chép. Sẽ không có vấn đề gì nếu bạn có các thuộc tính và giá trị cho các dịch vụ Firebase mà bạn không sử dụng trong ứng dụng Reviewly.
8. Lưu tệp.
9. Quay lại bảng điều khiển của Firebase, hãy nhấp vào Tiếp tục đến bảng điều khiển.

Thiết lập thiết bị đầu cuối để chạy các lệnh CLI của Firebase dựa trên dự án Firebase của bạn

1. Trong dòng lệnh, hãy chuyển đến thư mục ai-extensions-codelab mà bạn đã tải xuống trước đó.
2. Chuyển đến thư mục ứng dụng web reviewly-start:

   cd reviewly-start
   

3. Làm cho Firebase CLI chạy các lệnh dựa trên một dự án Firebase cụ thể:

   firebase use YOUR_PROJECT_ID
   

Chạy và xem ứng dụng web Reviewly

Để chạy và xem ứng dụng web, hãy làm theo các bước sau:

1. Trong dòng lệnh, hãy cài đặt các phần phụ thuộc rồi chạy ứng dụng web:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. Trong trình duyệt, hãy chuyển đến URL xuất hiện trên dòng lệnh. Ví dụ: http://localhost:8080.

Trang sẽ tải được, nhưng bạn sẽ nhận thấy thiếu một số tính năng. Chúng ta sẽ thêm những đối tượng này trong các bước tiếp theo của lớp học lập trình.

7. Thêm chức năng vào Đánh giá ứng dụng

Trong bước cuối cùng của lớp học lập trình này, bạn đã chạy ứng dụng Reviewly trên thiết bị, nhưng ứng dụng này không có nhiều chức năng và chưa sử dụng tiện ích đã cài đặt. Trong bước này của lớp học lập trình, bạn sẽ thêm chức năng này và sử dụng ứng dụng web để kích hoạt tiện ích.

Triển khai quy tắc bảo mật

Ứng dụng mẫu của lớp học lập trình này chứa các bộ Quy tắc bảo mật cho Firestore và Cloud Storage cho Firebase. Sau khi bạn triển khai các Quy tắc bảo mật này cho dự án Firebase, dữ liệu trong cơ sở dữ liệu và bộ chứa của bạn sẽ được bảo vệ tốt hơn khỏi hành vi sử dụng sai.

Bạn có thể xem các quy tắc này trong tệp firestore.rules và storage.rules.

1. Để triển khai các Quy tắc bảo mật này, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:

   firebase deploy --only firestore:rules,storage
   

2. 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 chọn Có.

Cập nhật mã của ứng dụng để kích hoạt tiện ích

Trong ứng dụng Reviewly, một bài đánh giá mới được thêm vào Firestore sẽ kích hoạt tiện ích để tóm tắt bài đánh giá.

1. Trong trình soạn thảo mã, hãy mở tệp functions/add-mock-reviews.js.
2. Thay thế biến reviewWithPrompt bằng mã sau để nhắc mô hình ngôn ngữ xem xét ngắn hơn.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Sau biến reviewWithPrompt, hãy thay thế biến reviewDocument bằng mã sau. Mã này sẽ tạo một tài liệu ôn tập để có thể thêm vào Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Lưu tệp.
5. Trong tệp js/reviews.js, sau nhận xét Insert code below, to import your Firebase Callable Cloud Function, hãy nhập hàm có thể gọi Firebase HTTP bằng trình trợ giúp httpsCallable:

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Sau nhận xét Insert code below, to invoke your Firebase Callable Cloud Function, gọi hàm có thể gọi Firebase HTTP:

   await addMockReviews();
   

7. Lưu tệp.

Triển khai một hàm để thêm bài đánh giá mới

Ứng dụng web Reviewly sử dụng Hàm đám mây để thêm bài đánh giá. Tuy nhiên, Chức năng đám mây hiện chưa được triển khai.

Để triển khai hàm của bạn bằng Giao diện dòng lệnh (CLI) của Firebase, hãy làm theo các bước sau:

1. Trong dòng lệnh, khi vẫn ở trong thư mục reviewly-start, hãy nhấn Control+C để dừng máy chủ.
2. Triển khai hàm:

   firebase deploy --only functions
   

3. Nếu bạn gặp lỗi Permission denied while using the Eventarc Service Agent hoặc lỗi tương tự, hãy đợi một vài phút rồi thử lại lệnh.

Bạn vừa triển khai hàm tuỳ chỉnh đầu tiên của mình bằng Cloud Functions. Bảng điều khiển của Firebase cung cấp một trang tổng quan để bạn có thể xem tất cả các chức năng mà bạn triển khai cho dự án Firebase của mình.

Chạy và xem lại ứng dụng web Reviewly (hiện đã có chức năng)

Để chạy và xem ứng dụng web hiện đang hoạt động, hãy làm theo các bước sau:

1. Trong dòng lệnh, hãy chạy lại máy chủ:

   npm run dev
   

2. Trong trình duyệt, hãy chuyển đến URL xuất hiện trên dòng lệnh. Ví dụ: http://localhost:8080.
3. Trong ứng dụng, hãy nhấp vào Thêm một số bài đánh giá mô phỏng rồi đợi vài giây để một vài bài đánh giá dài xuất hiện.
   Ở chế độ nền, tiện ích Tác vụ ngôn ngữ với API PaLM phản ứng với tài liệu mới đại diện cho bài đánh giá mới. Câu lệnh mà bạn thêm trước đó yêu cầu bản tóm tắt ngắn hơn từ mô hình ngôn ngữ.
4. Để xem toàn bộ bài đánh giá và lời nhắc dùng cho bài đánh giá đó, hãy nhấp vào một trong các bài đánh giá, sau đó chọn Hiển thị lời nhắc PaLM.

8. Thiết lập "Chatbot với PaLM API" phần mở rộng cho phần mở rộng về ứng dụng chatbot

Cài đặt tiện ích Chatbot với PaLM API

1. Chuyển đến tiện ích Chatbot với PaLM API.
2. Nhấp vào Cài đặt trong bảng điều khiển của Firebase.
3. Chọn dự án Firebase của bạn.
4. Nhấp vào Tiếp theo > Tiếp theo > Tiếp theo cho đến khi bạn chuyển đến phần Định cấu hình tiện ích.
5. Trong hộp văn bản Đường dẫn thu thập, hãy nhập users/{uid}/discussion/{discussionId}/messages.
6. Trong trình đơn thả xuống Vị trí Cloud Functions, hãy chọn Iowa (us-central1) hoặc vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage.
7. Trong trình đơn thả xuống Mô hình ngôn ngữ, hãy chọn chat-bison.
8. Giữ nguyên tất cả giá trị khác theo mặc định.
9. Nhấp vào Cài đặt tiện ích rồi chờ cài đặt tiện ích.

Dùng thử tiện ích Chatbot với PaLM API

Mặc dù mục tiêu của lớp học lập trình này là tương tác với tiện ích Chatbot with PaLM API thông qua một ứng dụng web, nhưng bạn nên tìm hiểu cách hoạt động của tiện ích này bằng cách kích hoạt tiện ích thông qua bảng điều khiển của Firebase. Tiện ích này sẽ kích hoạt khi một tài liệu trên Cloud Firestore được tạo trong bộ sưu tập users/{uid}/discussion/{discussionId}/messages.

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore.
2. Nhấp vào Bắt đầu thu thập.
   1. Trong hộp văn bản Mã bộ sưu tập, hãy nhập users rồi nhấp vào Tiếp theo.
   2. Trong hộp văn bản ID tài liệu, hãy nhấp vào Tự động nhận dạng, sau đó nhấp vào Lưu.
3. Trong bộ sưu tập users, hãy nhấp vào Bắt đầu thu thập.
   
   1. Trong hộp văn bản Mã bộ sưu tập, hãy nhập discussion rồi nhấp vào Tiếp theo.
   2. Trong hộp văn bản ID tài liệu, hãy nhấp vào Tự động nhận dạng, sau đó nhấp vào Lưu.
4. Trong bộ sưu tập discussion, hãy nhấp vào Bắt đầu thu thập.
   
   1. Trong hộp văn bản Mã bộ sưu tập, hãy nhập messages rồi nhấp vào Tiếp theo.
   2. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
   3. Trong hộp văn bản Trường, hãy nhập prompt.
   4. Trong hộp văn bản Giá trị, hãy nhập Tell me 5 random fruits.
   5. Nhấp vào Lưu rồi đợi vài giây. Tập hợp messages hiện bao gồm một tài liệu có chứa phản hồi cho truy vấn của bạn.

5. Trong bộ sưu tập messages, hãy nhấp vào Thêm tài liệu.
   1. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
   2. Trong hộp văn bản Trường, hãy nhập prompt.
   3. Trong hộp văn bản Giá trị, hãy nhập And now, vegetables.
   4. Nhấp vào Lưu rồi đợi vài giây. Tập hợp messages hiện bao gồm một tài liệu có chứa phản hồi cho truy vấn của bạn.

9. Thiết lập ứng dụng Chatbot để dùng Firebase

Để chạy ứng dụng Chatbot, bạn cần thiết lập mã của ứng dụng và Giao diện dòng lệnh (CLI) của Firebase để tương tác với dự án Firebase.

Thêm cấu hình và dịch vụ Firebase vào mã của ứng dụng

Để sử dụng Firebase, cơ sở mã của ứng dụng cần có Firebase SDK cho các dịch vụ bạn muốn sử dụng và cấu hình Firebase giúp SDK biết nên sử dụng dự án Firebase nào.

Ứng dụng mẫu của lớp học lập trình này đã có tất cả mã nhập và khởi tạo cần thiết cho các SDK (xem chatbot-start/lib/firebase/firebase.js), vì vậy, bạn không cần thêm những mã này. Tuy nhiên, ứng dụng mẫu chỉ có các giá trị phần giữ chỗ cho cấu hình Firebase (xem chatbot-start/lib/firebase/firebase-config.js). Vì vậy, bạn cần đăng ký ứng dụng với dự án Firebase để nhận các giá trị cấu hình Firebase duy nhất cho ứng dụng của mình.

1. Trong bảng điều khiển của Firebase, trong dự án Firebase, hãy chuyển đến phần Tổng quan về dự án, sau đó nhấp vào Web (hoặc nhấp vào Thêm ứng dụng nếu bạn đã đăng ký ứng dụng với dự án).
2. Trong hộp văn bản Biệt hiệu ứng dụng, nhập biệt hiệu dễ nhớ của ứng dụng, chẳng hạn như My Chatbot app.
3. Không chọn hộp đánh dấu Đồng thời thiết lập tính năng Lưu trữ Firebase cho ứng dụng này. Bạn sẽ thực hiện các bước này sau trong lớp học lập trình này.
4. Nhấp vào Đăng ký ứng dụng.
5. Bảng điều khiển sẽ hiển thị một đoạn mã để thêm và khởi chạy SDK Firebase bằng một đối tượng cấu hình Firebase dành riêng cho ứng dụng. Sao chép tất cả các thuộc tính trong đối tượng cấu hình Firebase.
6. Trong trình soạn thảo mã, hãy mở tệp chatbot-start/lib/firebase/firebase-config.js.
7. Thay thế các giá trị phần giữ chỗ bằng những giá trị bạn vừa sao chép. Sẽ không có vấn đề gì nếu bạn có các thuộc tính và giá trị cho các dịch vụ Firebase mà bạn không sử dụng trong ứng dụng Chatbot.
8. Lưu tệp.
9. Quay lại bảng điều khiển của Firebase, hãy nhấp vào Tiếp tục đến bảng điều khiển.

Thiết lập thiết bị đầu cuối để chạy các lệnh CLI của Firebase dựa trên dự án Firebase của bạn

1. Trong dòng lệnh, hãy nhấn Control+C để ngăn máy chủ chạy ứng dụng web trước đó.
2. Trong dòng lệnh, hãy chuyển đến thư mục ứng dụng web chatbot-start:

   cd ../chatbot-start
   

3. Làm cho Firebase CLI chạy các lệnh dựa trên một dự án Firebase cụ thể:

   firebase use YOUR_PROJECT_ID
   

Thiết lập cơ sở mã của ứng dụng để sử dụng tính năng Lưu trữ Firebase nhận biết khung

Lớp học lập trình này sử dụng khung web có tính năng Lưu trữ (bản xem trước) thông qua ứng dụng web Chatbot.

1. Trong dòng lệnh, hãy bật các khung web bằng tính năng Lưu trữ Firebase:

   firebase experiments:enable webframeworks
   

2. Khởi chạy tính năng Lưu trữ Firebase:

   firebase init hosting
   

3. Khi thấy lời nhắc Detected an existing Next.js codebase in your current directory, should we use this?, hãy nhấn Y.
4. Khi được nhắc bằng In which region would you like to host server-side content, if applicable?, hãy chọn khu vực mặc định hoặc vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage, sau đó nhấn Enter (hoặc return trên macOS).
5. Khi được nhắc bằng Set up automatic builds and deploys with GitHub?, hãy nhấn N.

Chạy và xem ứng dụng web Chatbot

1. Trong dòng lệnh, hãy cài đặt các phần phụ thuộc rồi chạy ứng dụng web:

   npm install
   firebase emulators:start --only hosting
   

2. Trong trình duyệt, hãy chuyển đến URL Lưu trữ được lưu trữ cục bộ. Trong hầu hết các trường hợp, URL đó sẽ là http://localhost:5000/ hoặc tên tương tự.

Trang sẽ tải được, nhưng bạn sẽ nhận thấy thiếu một số tính năng. Chúng ta sẽ thêm những đối tượng này trong các bước tiếp theo của lớp học lập trình.

Khắc phục sự cố khi chạy ứng dụng web

Nếu thấy lỗi trên trang web bắt đầu như sau: Error: Firebase session cookie has incorrect..., thì bạn cần xoá tất cả cookie trong môi trường máy chủ cục bộ. Để thực hiện việc này, hãy làm theo hướng dẫn về xoá cookie | Tài liệu về Công cụ cho nhà phát triển..

10. Thêm chức năng vào ứng dụng chatbot

Trong bước cuối cùng của lớp học lập trình này, bạn đã chạy ứng dụng Chatbot trên thiết bị nhưng ứng dụng này không có nhiều chức năng và chưa sử dụng tiện ích đã cài đặt. Trong bước này của lớp học lập trình, bạn sẽ thêm chức năng này và sử dụng ứng dụng web để kích hoạt tiện ích.

Triển khai quy tắc bảo mật

Ứng dụng mẫu của lớp học lập trình này chứa các bộ Quy tắc bảo mật cho Firestore và Cloud Storage cho Firebase. Sau khi bạn triển khai các Quy tắc bảo mật này cho dự án Firebase, dữ liệu trong cơ sở dữ liệu và bộ chứa của bạn sẽ được bảo vệ tốt hơn khỏi hành vi sử dụng sai.

Bạn có thể xem các quy tắc này trong tệp firestore.rules và storage.rules.

1. Để triển khai các Quy tắc bảo mật này, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:

   firebase deploy --only firestore:rules,storage
   

2. 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 chọn Có.

Hãy cập nhật mã để thêm thông báo vào Cloud Firestore

Trong ứng dụng Chatbot, một tin nhắn mới của người dùng sẽ được thêm vào Firestore và kích hoạt tiện ích để tạo phản hồi.

1. Trong trình soạn thảo mã, hãy mở tệp lib/firebase/firestore.js.
2. Ở gần cuối tệp, hãy tìm hàm addNewMessage để xử lý việc thêm tin nhắn mới.
   Hàm này đã có các thuộc tính đối tượng sau:
   

   Thông số	Nội dung mô tả
   userId	Mã nhận dạng của người dùng đã đăng nhập
   discussionId	Mã thảo luận mà tin nhắn được thêm vào
   message	Nội dung văn bản tin nhắn
   db	Một thực thể của cơ sở dữ liệu Firestore

   Khi các biến này đã sẵn sàng, bạn có thể thêm tài liệu trên Cloud Firestore để thể hiện thông báo mới.
3. Trong phần nội dung của hàm addNewMessage sau nhận xét // Insert your code below ⬇️, hãy thêm mã sau:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Cập nhật mã để tạo truy vấn nhận thông báo

1. Vẫn trong tệp lib/firebase/firestore.js, hãy tìm hàm getMessagesQuery. Hàm này cần trả về một truy vấn trên Cloud Firestore giúp tìm các thông báo được lưu trữ trong đường dẫn thu thập users/{uid}/discussion/{discussionId}/messages.
2. Thay thế toàn bộ hàm getMessagesQuery bằng mã sau:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Cập nhật mã để xử lý tài liệu tin nhắn trên Cloud Firestore

1. Vẫn trong tệp lib/firebase/firestore.js, hãy tìm hàm handleMessageDoc. Hàm này nhận tài liệu trên Cloud Firestore đại diện cho một thông báo duy nhất.
   Hàm này cần định dạng và sắp xếp dữ liệu theo cách phù hợp với giao diện người dùng của ứng dụng Chatbot.
2. Thay thế toàn bộ hàm handleMessageDoc bằng mã sau:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Lưu tệp.

Chạy và xem lại ứng dụng web Chatbot (hiện đã có chức năng)

Để chạy và xem ứng dụng web hiện đang hoạt động, hãy làm theo các bước sau:

1. Trong trình duyệt, hãy quay lại thẻ bằng ứng dụng web Chatbot rồi tải lại trang.
2. Nhấp vào Sign in with Google (Đăng nhập bằng Tài khoản Google).
3. Nếu cần, hãy chọn Tài khoản Google của bạn.
4. Sau khi bạn đăng nhập, hãy tải lại trang.
5. Trong hộp văn bản Nhập tin nhắn của bạn, hãy nhập tin nhắn, chẳng hạn như Tell me about space.
6. Nhấp vào Gửi rồi đợi vài giây để ứng dụng web Chatbot phản hồi.

Một lợi ích khác của tiện ích Chatbot with PaLM API là nhật ký trò chuyện.

Để xem ví dụ về khả năng trò chuyện dựa trên bối cảnh lịch sử của Gemini, hãy làm theo các bước sau:

1. Trong hộp văn bản Nhập tin nhắn của bạn, hãy đặt một câu hỏi, chẳng hạn như What are five random fruits?.
2. Trong hộp văn bản Nhập tin nhắn của bạn, hãy đặt một câu hỏi nối tiếp liên quan đến câu hỏi trước, chẳng hạn như And what about vegetables?.

Ứng dụng web Chatbot sẽ phản hồi bằng kiến thức trong quá khứ. Mặc dù câu hỏi cuối cùng của bạn không chỉ định 5 loại rau ngẫu nhiên, nhưng tiện ích Chatbot with PaLM API hiểu được các câu hỏi tiếp theo.

11. Thiết lập tính năng "Chuyển đổi văn bản sang lời nói" phần mở rộng cho phần mở rộng về Ứng dụng Gợi ý video

Cài đặt tiện ích Chuyển đổi văn bản sang lời nói

1. Chuyển đến tiện ích Chuyển đổi văn bản sang lời nói.
2. Nhấp vào Cài đặt trong bảng điều khiển của Firebase.
3. Chọn dự án Firebase của bạn.
4. Nhấp vào Tiếp theo.
5. Trong phần Review API đã bật và đã tạo tài nguyên, hãy nhấp vào Bật bên cạnh mọi dịch vụ được đề xuất cho bạn:

6. Nhấp vào Tiếp theo,rồi chọn Cấp bên cạnh mọi quyền được đề xuất cho bạn.

7. Nhấp vào Tiếp theo.
8. Trong hộp văn bản Đường dẫn thu thập, hãy nhập bot.
9. Trong hộp văn bản Đường dẫn bộ nhớ, hãy nhập tts.
10. Giữ nguyên tất cả các giá trị khác làm lựa chọn mặc định.
11. Nhấp vào Cài đặt tiện ích rồi chờ cài đặt tiện ích.

Hãy dùng thử tiện ích Chuyển đổi văn bản sang lời nói

Mặc dù mục tiêu của lớp học lập trình này là tương tác với tiện ích Chuyển đổi văn bản sang lời nói thông qua một ứng dụng web, nhưng bạn nên nắm được cách hoạt động của tiện ích này khi kích hoạt tiện ích thông qua bảng điều khiển của Firebase. Tiện ích này sẽ kích hoạt khi một tài liệu trên Cloud Firestore được tạo trong bộ sưu tập bot.

Để xem cách tiện ích hoạt động bằng cách sử dụng bảng điều khiển của Firebase, hãy làm theo các bước sau:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore
2. Nhấp vào Bắt đầu thu thập.
3. Trong hộp văn bản Mã bộ sưu tập, hãy nhập bot.
4. Nhấp vào Tiếp theo.

5. Trong hộp văn bản ID tài liệu, nhấp vào Tự động nhận dạng.
6. Trong hộp văn bản Trường, hãy nhập text.
7. Trong hộp văn bản Giá trị, hãy nhập The quick brown fox jumps over the lazy dog.
8. Nhấp vào Lưu.

Để xem và nghe tệp MP3 bạn đã tạo, hãy làm theo các bước sau:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến mục Bộ nhớ.
2. Trong ngăn mà bạn có thể tải tệp lên, hãy ghi lại tên bộ chứa sau giá trị gs://. Đây là tên của bộ chứa mặc định cho dự án này. Bạn cần đến nó trong nhiều nhiệm vụ trong suốt lớp học lập trình này.

3. Trong Google Cloud Console, hãy chuyển đến Cloud Storage.
4. Chọn dự án.
   Nếu bạn không thấy dự án của mình trong danh sách dự án gần đây, hãy nhấp vào Select Project (Chọn dự án) để tìm dự án của bạn trong bộ chọn dự án.

5. Chọn Bộ chứa lưu trữ mặc định của bạn.
6. Chuyển đến thư mục tts/.
7. Nhấp vào tệp MP3.
8. Ở cuối tệp MP3, hãy nhấp vào và để ý thấy văn bản đã được chuyển đổi thành lời nói.

12. Thiết lập quy trình "Gắn nhãn video bằng AI video trên đám mây" phần mở rộng cho phần mở rộng về Ứng dụng Gợi ý video

Cài đặt tiện ích Gắn nhãn video bằng Cloud Video AI

1. Chuyển đến phần Gắn nhãn video bằng Cloud Video AI.
2. Nhấp vào Cài đặt trong bảng điều khiển của Firebase.
3. Chọn dự án Firebase của bạn.
4. Nhấp vào Tiếp theo > Tiếp theo > Tiếp theo, cho đến khi bạn chuyển đến phần Định cấu hình tiện ích.
5. Từ trình đơn thả xuống vị trí Cloud Functions, hãy chọn một vị trí được hỗ trợ (vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage hoặc vị trí gần nhất). Để biết các vị trí được hỗ trợ, hãy xem phần location_id trong AnnotateVideoRequest.
6. Trong trình đơn thả xuống Mô hình, hãy chọn Mới nhất.
7. Từ trình đơn thả xuống Máy ảnh tĩnh, hãy chọn Không.
8. Giữ nguyên tất cả giá trị khác theo mặc định.
9. Nhấp vào Cài đặt tiện ích rồi chờ cài đặt tiện ích.

Dùng thử tiện ích Gắn nhãn video bằng Cloud Video AI

Mặc dù mục tiêu của lớp học lập trình này là tương tác với phần mở rộng Gắn nhãn video bằng AI video trên đám mây thông qua một ứng dụng web, nhưng bạn nên tìm hiểu cách hoạt động của phần mở rộng này khi kích hoạt phần mở rộng thông qua bảng điều khiển của Firebase. Tiện ích này kích hoạt khi một tệp video được tải lên bộ chứa Storage.

Để xem cách tiện ích hoạt động bằng cách sử dụng bảng điều khiển của Firebase, hãy làm theo các bước sau:

1. Chuyển đến phần Bộ nhớ trong dự án Firebase của bạn > Tạo thư mục.
2. Trong hộp văn bản Folder name (Tên thư mục), hãy nhập video_annotation_input.

3. Nhấp vào Thêm thư mục.
4. Trong thư mục video_annotation_input, hãy nhấp vào Tải tệp lên.
5. Trong thư mục ai-extensions-codelab/video-hint-start/public/videos mà bạn đã sao chép hoặc tải xuống trước đó, hãy chọn tệp video đầu tiên.
6. Quay lại trình duyệt, chuyển đến Cloud Storage trong Google Cloud Console.
7. Chọn bộ chứa Bộ nhớ mặc định mà bạn đã lưu ý trước đó.
8. Nhấp vào thư mục video_annotation_output.
   Nếu bạn không thấy thư mục video_annotation_output, hãy đợi vài giây rồi làm mới trang vì có thể API Video Intelligence vẫn đang xử lý video.

9. Lưu ý rằng tệp JSON đang tồn tại có tên tương tự như tệp mà bạn đã tải lên trước đó.
10. Nhấp vào Download FILENAME.
11. Mở tệp JSON đã tải xuống trong trình soạn thảo mã của bạn. Tệp này chứa dữ liệu đầu ra thô từ Video Intelligence API, bao gồm các nhãn đã phát hiện của video mà bạn đã tải lên.

13. Thiết lập ứng dụng Gợi ý video để dùng Firebase

Để chạy ứng dụng Gợi ý video, bạn cần thiết lập mã của ứng dụng và Giao diện dòng lệnh (CLI) của Firebase để tương tác với dự án Firebase.

Thêm cấu hình và dịch vụ Firebase vào mã của ứng dụng

Để sử dụng Firebase, cơ sở mã của ứng dụng cần có Firebase SDK cho các dịch vụ bạn muốn sử dụng và cấu hình Firebase giúp SDK biết nên sử dụng dự án Firebase nào.

Ứng dụng mẫu của lớp học lập trình này đã có tất cả mã nhập và khởi tạo cần thiết cho các SDK (xem video-hint-start/lib/firebase/firebase.js), vì vậy, bạn không cần thêm những mã này. Tuy nhiên, ứng dụng mẫu chỉ có các giá trị phần giữ chỗ cho cấu hình Firebase (xem video-hint-start/lib/firebase/firebase-config.js). Vì vậy, bạn cần đăng ký ứng dụng với dự án Firebase để nhận các giá trị cấu hình Firebase duy nhất cho ứng dụng của mình.

1. Trong bảng điều khiển của Firebase, trong dự án Firebase, hãy chuyển đến phần Tổng quan về dự án, sau đó nhấp vào Web (hoặc nhấp vào Thêm ứng dụng nếu bạn đã đăng ký ứng dụng với dự án).
2. Trong hộp văn bản Biệt hiệu ứng dụng, nhập biệt hiệu dễ nhớ của ứng dụng, chẳng hạn như My Video Hint app.
3. Không chọn hộp đánh dấu Đồng thời thiết lập tính năng Lưu trữ Firebase cho ứng dụng này. Bạn sẽ thực hiện các bước này sau trong lớp học lập trình này.
4. Nhấp vào Đăng ký ứng dụng.
5. Bảng điều khiển sẽ hiển thị một đoạn mã để thêm và khởi chạy SDK Firebase bằng một đối tượng cấu hình Firebase dành riêng cho ứng dụng. Sao chép tất cả các thuộc tính trong đối tượng cấu hình Firebase.
6. Trong trình soạn thảo mã, hãy mở tệp video-hint-start/lib/firebase/firebase-config.js.
7. Thay thế các giá trị phần giữ chỗ bằng những giá trị bạn vừa sao chép. Bạn có thể chấp nhận các thuộc tính và giá trị cho các dịch vụ Firebase mà bạn không sử dụng trong ứng dụng Gợi ý video.
8. Lưu tệp.
9. Quay lại bảng điều khiển của Firebase, hãy nhấp vào Tiếp tục đến bảng điều khiển.

Thiết lập thiết bị đầu cuối để chạy các lệnh CLI của Firebase dựa trên dự án Firebase của bạn

1. Trong dòng lệnh, hãy nhấn Control+C để ngăn máy chủ chạy ứng dụng web trước đó.
2. Trong dòng lệnh, hãy chuyển đến thư mục ứng dụng web video-hint-start:

   cd ../video-hint-start
   

3. Làm cho Firebase CLI chạy các lệnh dựa trên một dự án Firebase cụ thể:

   firebase use YOUR_PROJECT_ID
   

Thiết lập cơ sở mã của ứng dụng để sử dụng tính năng Lưu trữ Firebase nhận biết khung

Lớp học lập trình này sử dụng khung web có tính năng Lưu trữ (bản xem trước) với ứng dụng web Gợi ý về video.

1. Trong dòng lệnh, hãy bật các khung web bằng tính năng Lưu trữ Firebase:

   firebase experiments:enable webframeworks
   

2. Khởi chạy tính năng Lưu trữ Firebase:

   firebase init hosting
   

3. Khi thấy lời nhắc Detected an existing Next.js codebase in your current directory, should we use this?, hãy nhấn Y.
4. Khi được nhắc bằng In which region would you like to host server-side content, if applicable?, hãy chọn khu vực mặc định hoặc vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage, sau đó nhấn Enter (hoặc return trên macOS).
5. Khi được nhắc bằng Set up automatic builds and deploys with GitHub?, hãy nhấn N.

Chạy và xem ứng dụng web Gợi ý video

1. Trong dòng lệnh, hãy cài đặt các phần phụ thuộc trong thư mục video-hint-start và functions, sau đó chạy ứng dụng:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. Trong trình duyệt, hãy chuyển đến URL Lưu trữ được lưu trữ cục bộ. Trong hầu hết các trường hợp, URL đó sẽ là http://localhost:5000/ hoặc tên tương tự.

Trang sẽ tải được, nhưng bạn sẽ nhận thấy thiếu một số tính năng. Chúng ta sẽ thêm những đối tượng này trong các bước tiếp theo của lớp học lập trình.

Khắc phục sự cố khi chạy ứng dụng web

Nếu bạn thấy một thông báo lỗi như Error: The query requires an index. You can create it here: https://console.firebase.google.com trong ngăn Bảng điều khiển của Công cụ cho nhà phát triển, hãy làm theo các bước sau:

1. Chuyển đến URL được cung cấp.

2. Nhấp vào Lưu và đợi trạng thái thay đổi từ Toà nhà thành Đã bật.

14. Thêm chức năng vào Ứng dụng Gợi ý video

Trong bước cuối cùng của lớp học lập trình này, bạn đã chạy ứng dụng Gợi ý về video trên thiết bị nhưng ứng dụng này không có nhiều chức năng và chưa sử dụng tiện ích đã cài đặt. Trong bước này của lớp học lập trình, bạn sẽ thêm chức năng này và sử dụng ứng dụng web để kích hoạt tiện ích.

Triển khai quy tắc bảo mật

Ứng dụng mẫu của lớp học lập trình này chứa các bộ Quy tắc bảo mật cho Firestore và Cloud Storage cho Firebase. Sau khi bạn triển khai các Quy tắc bảo mật này cho dự án Firebase, dữ liệu trong cơ sở dữ liệu và bộ chứa của bạn sẽ được bảo vệ tốt hơn khỏi hành vi sử dụng sai.

Bạn có thể xem các quy tắc này trong tệp firestore.rules và storage.rules.

1. Để triển khai các Quy tắc bảo mật này, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:

   firebase deploy --only firestore:rules,storage
   

2. 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 chọn Có.

Cập nhật mã để kết hợp các hàm

1. Trong trình soạn thảo mã, hãy mở rộng thư mục functions.
   Thư mục này chứa nhiều hàm kết hợp với nhau để tạo thành một quy trình mở rộng. Bảng sau đây liệt kê và mô tả từng hàm:

   Chức năng	Nội dung mô tả
   functions/01-handle-video-upload.js	Bước đầu tiên trong quy trình mở rộng. Trình quản lý thẻ của Google xử lý tệp video mà người dùng đã tải lên.
   functions/02-handle-video-labels.js	Bước thứ hai trong quy trình mở rộng. Công cụ này xử lý tệp nhãn video được tạo bằng phần mở rộng storage-label-videos.
   functions/03-handle-audio-file.js	Bước thứ ba trong quy trình mở rộng. Dịch vụ này xử lý tệp âm thanh được chép lời.

   Tuy nhiên, bạn vẫn cần thêm một tệp để nhóm các hàm này lại với nhau.
2. Trong tệp functions/index.js, hãy thêm mã sau:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Mã này sử dụng các mô-đun JavaScript để nhập và xuất các hàm từ tệp index.js sao cho tất cả các hàm đều có một vị trí tập trung.

Cập nhật mã để xử lý quá trình tải video lên

1. Trong trình soạn thảo mã, hãy mở tệp lib/firebase/storage.js.
2. Tìm hàm uploadVideo.
   Hàm này nhận các tham số userId, filePath và file. Dữ liệu này đủ để tải tệp lên Cloud Storage.
3. Trong phần nội dung của hàm uploadVideo, hãy thêm mã sau:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Triển khai các hàm

Để triển khai các hàm bằng Giao diện dòng lệnh (CLI) của Firebase, hãy làm theo các bước sau:

1. Trong dòng lệnh, khi vẫn ở trong thư mục video-hint-start, hãy nhấn Control+C để dừng quá trình hiện tại.
2. Triển khai các hàm:

   firebase deploy --only functions
   

   Nếu bạn được yêu cầu xoá bất kỳ Cloud Functions trước đây, hãy chọn No.
3. Nếu bạn thấy một thông báo tương tự như Permission denied while using the Eventarc Service Agent, hãy đợi một vài phút rồi thử lại lệnh.
4. Sau khi dùng lệnh xong, hãy chạy lại ứng dụng trên máy:

   firebase emulators:start --only hosting
   

Chạy và xem lại ứng dụng web Gợi ý về video (nay đã có chức năng)

Để chạy và xem ứng dụng web hiện đang hoạt động, hãy làm theo các bước sau:

1. Trong trình duyệt, hãy tìm thẻ mà bạn đã chuyển đến http://localhost:5000.
2. Nếu cần, hãy nhấp vào Sign in with Google (Đăng nhập bằng Google) rồi chọn Tài khoản Google của bạn.
3. Nhấp vào Tải video mẫu 1 lên rồi chờ vài phút để xem kết quả tóm tắt video.
4. Nếu bạn không thấy kết quả nào sau khi tải video lên, hãy xem phần Khắc phục lỗi bằng Hàm đám mây trong phần phụ lục của lớp học lập trình này.

15. Kết luận

Xin chúc mừng! Bạn đã đạt được nhiều thành tích trong lớp học lập trình này!

Cài đặt và định cấu hình tiện ích Firebase

Bạn đã sử dụng bảng điều khiển của Firebase để định cấu hình và cài đặt nhiều phần mở rộng về AI. Việc sử dụng tiện ích rất thuận tiện vì bạn không cần phải viết nhiều mã nguyên mẫu liên quan đến việc xác thực với các dịch vụ của Google Cloud, đọc và viết từ Firestore cũng như tương tác với các dịch vụ của Google Cloud. Ngoài ra, còn có nhiều sắc thái liên quan đến các tác vụ đó.

Làm việc với các tiện ích bằng bảng điều khiển của Firebase

Thay vì đi thẳng vào đoạn mã, bạn sẽ mất thời gian để tìm hiểu cách hoạt động của các tiện ích AI, dựa trên dữ liệu đầu vào mà bạn cung cấp thông qua bảng điều khiển cho Firestore hoặc Cloud Storage. Loại tương tác này có thể đặc biệt hữu ích nếu bạn cần gỡ lỗi dữ liệu đầu ra của tiện ích.

Xây dựng 3 ứng dụng web dựa trên AI sử dụng các tiện ích của Firebase

Đánh giá

Trong ứng dụng web Reviewly, bạn đã sử dụng tiện ích Language Tasks with PaLM API (Tác vụ ngôn ngữ với PaLM API) để tóm tắt các bài đánh giá dài mà người dùng đưa ra về sản phẩm áo phông. Bạn cũng đã yêu cầu mô hình ngôn ngữ cung cấp phản hồi JSON cho truy vấn của bạn, trong đó JSON cung cấp điểm xếp hạng theo sao và bài đánh giá tóm tắt bài đánh giá dạng dài ban đầu.

Bài tập không bắt buộc: Công ty sản xuất áo phông hài lòng với các bài đánh giá tóm tắt, nhưng họ đã yêu cầu cung cấp thêm bản tóm tắt về bản chất của lỗi đó. Bạn có thể điều chỉnh lời nhắc để trả về bản tóm tắt lỗi rồi đưa bản tóm tắt đó vào giao diện người dùng của ứng dụng web không?

Bot trò chuyện

Trong ứng dụng web Chatbot, bạn đã dùng tiện ích Chatbot với PaLM API để cung cấp cho người dùng một giao diện trò chuyện tương tác, trong đó có bối cảnh trước đây trong các cuộc trò chuyện – nơi mỗi tin nhắn được lưu trữ trong một tài liệu trên Firestore dành cho một người dùng cụ thể.

Bài tập không bắt buộc: Học viên hài lòng với bot trò chuyện, nhưng đội ngũ giáo viên muốn có một số điểm cải tiến. Học viên nên đặt những câu hỏi kích thích sự suy nghĩ sau khi trả lời xong. Ví dụ:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Gợi ý: Bạn có thể sử dụng tuỳ chọn ngữ cảnh có thể định cấu hình để làm việc này.

Gợi ý video

Trong ứng dụng web Gợi ý về video, bạn đã sử dụng phần mở rộng Chuyển đổi văn bản sang lời nói, Tác vụ ngôn ngữ với PaLM API và Gắn nhãn video bằng video trên đám mây để tạo một quy trình mở rộng dẫn đến nội dung mô tả bằng văn bản và âm thanh của video.

Bài tập không bắt buộc: Bộ chính phủ thấy nguyên mẫu rất thú vị và giờ đây, họ cũng muốn người dùng có thể nhấp vào một nhãn dạng văn bản để chuyển ngay đến thời điểm phát hiện thấy nhãn đó trong video.

16. Phụ lục: Khắc phục lỗi khi dùng Cloud Functions

Nếu ứng dụng web của bạn không hoạt động như mong đợi và bạn cho rằng có thể là do các chức năng, hãy làm theo các bước trên trang khắc phục sự cố này.

Cho phép truy cập công khai nhưng chưa được xác thực

Nếu bạn gặp bất kỳ lỗi nào liên quan đến quyền trong bảng điều khiển Bảng điều khiển của Công cụ của Chrome cho nhà phát triển, hãy làm theo các bước sau:

1. Đọc phần Tổng quan về việc xác thực | Trang Cloud Run
2. Nhấp vào đường liên kết để xem và hoàn tất tác vụ được yêu cầu nhằm Cho phép truy cập công khai khi chưa được xác thực vào hàm.

3. Quay lại ứng dụng Reviewly. Ví dụ: http://localhost:8080.
4. Nhấp vào Thêm một số bài đánh giá mô phỏng rồi đợi vài giây.
   • Nếu bài đánh giá xuất hiện: Bạn không cần tiếp tục thực hiện các bước khắc phục sự cố này và có thể chuyển thẳng đến phần Thiết lập ứng dụng web Chatbot trong lớp học lập trình này.
   • Nếu bài đánh giá không xuất hiện: Hãy tiếp tục với phần khắc phục sự cố này.

Xử lý lỗi không đủ quyền

1. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Hàm.
2. Di chuột qua hàm addMockReviews, sau đó nhấp vào > Xem nhật ký.

3. Di chuyển qua nhật ký cho đến khi bạn thấy một lỗi tương tự như một trong các lỗi sau:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. Trong Google Cloud Console, hãy chuyển đến trang Quyền quản lý danh tính và quyền truy cập (IAM) rồi chọn dự án của bạn.
5. Trong bảng này, hãy tìm cột Tên.
   Trong bảng IAM và Trang Quản trị, có một bảng người dùng và vai trò. Cột tên trong bảng mô tả mục đích của người dùng hoặc người dùng chính. Bạn có thể có một tài khoản chính có tên là Tài khoản dịch vụ điện toán mặc định.

Nếu bạn thấy Tài khoản dịch vụ mặc định của Compute Engine, hãy làm theo các bước sau:

1. Nhấp vào Chỉnh sửa đối tượng chính.

2. Tiếp tục với phần Thêm vai trò vào tài khoản dịch vụ mặc định của Compute Engine trong lớp học lập trình này.

Nếu bạn không thấy mục Tài khoản dịch vụ mặc định của Compute Engine, hãy làm theo các bước sau:

1. Nhấp vào Cấp quyền truy cập.
2. Trong hộp văn bản Chính mới, hãy nhập compute.
3. Trong trình đơn tự động đề xuất xuất hiện, hãy chọn Tài khoản dịch vụ tính toán mặc định.

Thêm vai trò vào tài khoản dịch vụ mặc định của Compute Engine

Trong phần Chỉ định vai trò trong tài khoản dịch vụ điện toán mặc định:

1. Mở rộng trình đơn Chọn vai trò.
2. Trong hộp văn bản Bộ lọc, nhập Cloud Datastore User.
3. Trong trình đơn tự động đề xuất xuất hiện, hãy chọn Người dùng Cloud Datastore.
4. Nhấp vào Thêm vai trò khác.
   1. Mở rộng trình đơn Chọn vai trò.
   2. Trong hộp văn bản Bộ lọc, nhập Cloud Storage for Firebase Admin.
   3. Trong trình đơn tự động đề xuất xuất hiện, hãy chọn Quản trị viên Cloud Storage cho Firebase.
5. Nhấp vào Thêm vai trò khác.
   1. Mở rộng trình đơn Chọn vai trò.
   2. Trong hộp văn bản Bộ lọc, nhập Cloud Storage for Firebase Service Agent.
   3. Trong trình đơn tự động đề xuất xuất hiện, hãy chọn Cloud Storage for Firebase Service Agent (Tác nhân dịch vụ của Cloud Storage cho Firebase).
6. Nhấp vào Lưu.