Xây dựng các ứng dụng web được hỗ trợ bởi AI với Tiện ích mở rộng Firebase

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

Trong lớp học lập trình này, bạn tìm hiểu cách xây dựng các ứng dụng web hỗ trợ AI mang lại trải nghiệm hấp dẫn cho người dùng với Tiện ích mở rộng Firebase.

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

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

Bạn sẽ học được gì

• Cách sử dụng Tiện ích mở rộng liên quan đến AI để xử lý ngôn ngữ và video đầu vào.
• Cách sử dụng Chức năng đám mây cho Firebase để tạo đường dẫn giữa các Tiện ích mở rộng.
• Cách sử dụng JavaScript để truy cập đầu ra do Tiện ích mở rộng tạo ra.

Những gì bạn cần

• Trình duyệt bạn chọn, chẳng hạn như Google Chrome
• Môi trường phát triển với 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. Đánh giá 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ẽ xây dựng trong lớp học lập trình này và Firebase mà bạn sẽ sử dụng để xây dựng các ứng dụng đó.

Đánh giá ứng dụng

Một công ty sản xuất áo phông bị choáng ngợp bởi những đá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ề đánh giá tổng thể của nó. Ứng dụng web Đánh giá đã hoàn tất tóm tắt từng bài đánh giá, cung cấp xếp hạng theo sao cho từng bài đánh giá và sử dụng từng bài đánh giá để suy ra xếp hạng tổng thể cho sản phẩm. Người dùng cũng có thể mở rộng từng đánh giá tóm tắt để xem đánh giá ban đầu.

ứng dụng Chatbot

Đội ngũ giảng viên của một trường học bị choáng ngợp bởi những câu hỏi lặp đi lặp lại về các chủ đề chung chung, vì vậy họ muốn tự động hóa các câu trả lời. Ứng dụng Chatbot đã hoàn thiện cung cấp cho sinh viên một chatbot trò chuyện được hỗ trợ bởi 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. Chatbot có bối cảnh lịch sử nên phản hồi của nó có thể ảnh hưởng đến các câu hỏi trước đó mà học sinh đã hỏi trong cùng một cuộc trò chuyện.

Ứng dụng gợi ý video

Một cơ quan chính phủ muốn các video của mình cung cấp mô tả bằng âm thanh để cải thiện khả năng tiếp cận nhưng 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 Video Gợi ý đã hoàn thiện là một nguyên mẫu mà bộ sẽ xem xét để đánh giá tính hiệu quả của nó.

Đây là những tiện ích mở rộng được sử dụng trong ứng dụng Video Gợi ý :

• Gắn nhãn video bằng tiện ích mở rộng Cloud Video AI - trích xuất nhãn từ mỗi video được tải lên Bộ nhớ.
• Nhiệm vụ ngôn ngữ có tiện ích mở rộng API PaLM — tóm tắt các nhãn thành mô tả văn bản.
• Tiện ích mở rộng Chuyển đổi văn bản thành giọng nói - tạo phiên bản âm thanh cho mô tả của video.

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

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

1. Trong thiết bị đầu cuối của bạn, hãy 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 không có Node.js v20.0.0 trở lên, hãy tải xuống và cài đặt nó .

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

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 xuống kho GitHub dưới dạng tệp zip .

Xem lại cấu trúc thư mục

Trên máy cục bộ của bạn, tìm kho lưu trữ nhân bản và xem lại cấu trúc thư mục. Bảng sau chứa các thư mục và mô tả của chúng:

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

Nếu không chắc chắn liệu mình có áp dụng mã đúng như hướng dẫn trong lớp học lập trình này hay không, bạn có thể tìm mã giải pháp cho các ứng dụng tương ứng trong các 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 Firebase CLI nhưng chưa phải v12.5.4 trở lên, hãy cập nhật nó:

  npm update -g firebase-tools
  

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

  npm install -g firebase-tools
  

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

Đăng nhập vào căn cứ hỏa lực

1. Trong thiết bị đầu cuối của bạn, điều hướng đến thư mục ai-extensions-codelab và đăng nhập vào Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Nếu thiết bị đầu cuối của bạn cho biết bạn đã đăng nhập vào Firebase, hãy chuyển sang phần Thiết lập dự án Firebase của bạn trong lớp học lập trình này.
3. Tùy 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 của bạn, 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 của bạn

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

Tạo dự án Firebase

1. Trong bảng điều khiển Firebase , 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 , nhập AI Extensions Codelab (hoặc tên dự án 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 tùy 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 cung cấp rồi nhấp vào Tiếp tục .
6. Trong dự án Firebase của bạn, hãy đi tới Cài đặt dự án . Hãy lưu lại ID dự án của bạn vì bạn sẽ cần nó sau này. Mã định danh duy nhất này là cách dự án của bạn được xác định (ví dụ: trong Firebase CLI).

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

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

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

1. Trong bảng điều khiển Firebase, hãy điều hướng đến trang Tài khoản dịch vụ trong cài đặt Dự án của bạn.
2. Nhấp vào Tạo khóa riêng mới > Tạo khóa .
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 Tải xuống , đường dẫn đầy đủ có thể trông như thế này: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. Trong thiết bị đầu cuối của bạn, hãy đặt biến môi trường GOOGLE_APPLICATION_CREDENTIALS thành đường dẫn của khóa riêng đã tải xuống của bạn. Trong môi trường Unix, lệnh có thể trông như thế này:

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

5. Hãy mở thiết bị đầu cuối 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ủa bạn có thể bị mất nếu bạn bắt đầu một phiên thiết bị đầu cuối mới.
   Nếu bạn mở một phiên cuối 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 Chức năng đám mây và Tiện ích mở rộng Firebase, dự án Firebase của bạn cần phải nằm trong gói định giá Blaze , nghĩa là dự án đó được liên kết với tài khoản Thanh toán trên đám mây .

• Tài khoản Thanh toán trên nền tảng đám mây yêu cầu một phương thức thanh toá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 300 USD và tài khoản Thanh toán trên đám mây 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 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 Blaze, hãy làm theo các bước sau:

1. Trong bảng điều khiển Firebase, chọn nâng cấp gói của bạn .
2. Trong hộp thoại, hãy chọn gói Blaze, 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 tài khoản Thanh toán trên đám mây.
   Nếu cần tạo tài khoản Thanh toán trên đám mây, bạn có thể cần điều hướng quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất nâng cấp.

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

Trong phần này, bạn sẽ cung cấp và thiết lập một số dịch vụ Firebase được ứng dụng web sử dụng trong lớp học lập trình này. Xin lưu ý rằng không phải tất cả các dịch vụ này đều được sử dụng trong mỗi ứ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 thuận tiện cho việc làm việc thông qua lớp học lập trình này.

Thiết lập xác thực

Bạn sẽ sử dụ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 xây dựng một ứng dụng thực thì mỗi ứng dụng phải có dự án Firebase riêng .

1. Trong bảng điều khiển Firebase, điều hướng đến Xác thực .
2. Nhấp vào Bắt đầu .
3. Trong cột Nhà cung cấp bổ sung , nhấp vào Google > Bật .

4. Trong hộp văn bản Tên 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. Từ danh sách 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ẽ sử dụng Firestore với cả ba ứng dụng. Tuy nhiên, hãy nhớ rằng nếu bạn đang xây dựng một ứng dụng thực thì mỗi ứng dụng phải có dự án Firebase riêng .

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

Thiết lập bộ nhớ đám mây cho Firebase

Bạn sẽ sử dụng Cloud Storage với ứng dụng Gợi ý video và dùng thử tiện ích Chuyển văn bản thành giọng 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 Firebase, điều hướng đến Storage .
2. Nhấp vào Bắt đầu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo .
   Ở 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 hiển thị công khai ứng dụng mà không thêm Quy tắc bảo mật cho bộ chứa Bộ nhớ của bạn .
3. Vị trí nhóm của bạn phải được chọn sẵn (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 các 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 để giúp ba ứng dụng web khác nhau hoạt động.

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

Cài đặt Tác vụ ngôn ngữ với tiện ích mở rộng API PaLM

1. Điều hướng đến Nhiệm vụ ngôn ngữ với phần mở rộng API PaLM .
2. Nhấp vào Cài đặt trong bảng điều khiển Firebase .
3. Chọn dự án Firebase của bạn.
4. Trong phần Đánh giá API đã bật và tài nguyên đã tạo , hãy nhấp vào Bật bên cạnh bất kỳ dịch vụ nào đượ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 bộ sưu tập , nhập bot .
7. Trong hộp văn bản Lời nhắc , nhập .
8. Trong hộp văn bản Trường biến , nhập input .
9. Trong hộp văn bản trường Phản hồi , nhập text .
10. Từ trình đơn thả xuống vị trí của Chức năng đám mây , hãy chọn Iowa (us-central1) hoặc vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage.
11. Từ trình đơn thả xuống Mô hình ngôn ngữ , chọn text-bison-001 .
12. Để lại tất cả các giá trị khác làm mặc định.
13. Nhấp vào Cài đặt tiện ích mở rộng và đợi tiện ích mở rộng cài đặt.

Hãy thử Nhiệm vụ ngôn ngữ với tiện ích mở rộng API PaLM

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 Nhiệm vụ ngôn ngữ bằng tiện ích mở rộng API PaLM thông qua ứng dụng web, nhưng việc hiểu cách hoạt động của tiện ích mở rộng bằng cách kích hoạt tiện ích mở rộng bằng bảng điều khiển Firebase sẽ rất hữu ích. Tiện ích mở rộng kích hoạt khi tài liệu Cloud Firestore được thêm vào bộ sưu tập bot .

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

1. Trong bảng điều khiển Firebase, điều hướng đến Firestore .
2. Trong bộ sưu tập bot , 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 ID tự động .
4. Trong hộp văn bản Trường , nhập input .
5. Trong hộp văn bản Giá trị , nhập Nói Tell me about the moon .
6. Nhấp vào Lưu và đợi vài giây. Tài liệu của bạn trong bộ sưu tập bot hiện bao gồm câu trả lời cho truy vấn của bạn.

6. Thiết lập ứng dụng Review để sử dụng Firebase

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

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

Để sử dụng Firebase, cơ sở mã của ứng dụng của bạn cần có SDK Firebase cho các dịch vụ bạn muốn sử dụng và cấu hình Firebase cho các 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 đã bao gồm tất cả mã nhập và khởi tạo cần thiết cho 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ị 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 của mình 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 bạn.

1. Trong bảng điều khiển Firebase, trong dự án Firebase của bạn, hãy điều hướng đến Tổng quan về dự án rồi 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 ứng dụng dễ nhớ, chẳng hạn như My Reviewly app .
3. Không chọn hộp kiểm Đồng thời thiết lập Firebase Hosting 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.
4. Nhấn vào Đăng ký ứng dụng .
5. Bảng điều khiển hiển thị đoạn mã để thêm và khởi chạy SDK Firebase với đố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 chỉnh sửa mã của bạn, hãy mở tệp reviewly-start/js/firebase-config.js .
7. Thay thế các giá trị giữ chỗ bằng các giá trị bạn vừa sao chép. Sẽ không sao nếu bạn có các thuộc tính và giá trị cho dịch vụ Firebase mà bạn không sử dụng trong ứng dụng Đánh giá .
8. Lưu các tập tin.
9. Quay lại bảng điều khiển Firebase, nhấp vào Continue to console .

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

1. Trong thiết bị đầu cuối của bạn, hãy điều hướng đến thư mục ai-extensions-codelab mà bạn đã tải xuống trước đó.
2. Điều hướng đến thư mục ứng dụng web reviewly-start :

   cd reviewly-start
   

3. Tạo các lệnh chạy Firebase CLI đối với một dự án Firebase cụ thể:

   firebase use YOUR_PROJECT_ID
   

Chạy và xem ứng dụng web Đánh giá

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

1. Trong thiết bị đầu cuối của bạn, 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 của bạn, điều hướng đến URL hiển thị trong thiết bị đầu cuối của bạn. Ví dụ: http://localhost:8080 .

Trang sẽ tải nhưng bạn sẽ nhận thấy rằng có nhiều tính năng bị thiếu. Chúng ta sẽ thêm những thứ này vào các bước tiếp theo của lớp học lập trình này.

7. Thêm chức năng vào ứng dụng Review

Ở 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 cục 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 các 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 của mình, 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 việc sử dụng sai mục đích.

Bạn có thể xem các quy tắc này trong các 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 này 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?" , chọn Có .

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

Trong ứng dụng Review , 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 chỉnh sửa mã của bạn, hãy mở tệp functions/add-mock-reviews.js .
2. Thay thế biến reviewWithPrompt bằng đoạn mã sau, đoạn mã này sẽ nhắc mô hình ngôn ngữ thực hiện một bài đánh giá 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 để tạo tài liệu đánh giá để có thể thêm tài liệu đó vào Firestore.

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

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

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

6. Sau Insert code below, to invoke your Firebase Callable Cloud Function , hãy gọi hàm có thể gọi HTTP Firebase của bạn:

   await addMockReviews();
   

7. Lưu các tập tin.

Triển khai chức năng thêm đánh giá mới

Ứng dụng web Đánh giá sử dụng Chức năng đám mây để thêm đánh giá. Nhưng hiện tại, Chức năng đám mây chưa được triển khai.

Để triển khai chức năng của bạn với Firebase CLI, hãy làm theo các bước sau:

1. Trong thiết bị đầu cuối của bạn khi vẫn còn trong thư mục reviewly-start , nhấn Control+C để dừng máy chủ.
2. Triển khai chức năng của bạn:

   firebase deploy --only functions
   

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

Bạn vừa triển khai chức năng tùy chỉnh đầu tiên của mình với Cloud Functions. Bảng điều khiển Firebase cung cấp trang tổng quan nơi 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 Đánh giá (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 thiết bị đầu cuối của bạn, hãy chạy lại máy chủ:

   npm run dev
   

2. Trong trình duyệt của bạn, điều hướng đến URL hiển thị trong thiết bị đầu cuối của bạn. Ví dụ: http://localhost:8080 .
3. Trong ứng dụng, hãy nhấp vào Thêm một số đánh giá mô phỏng và đợi vài giây để một vài đánh giá dài xuất hiện.
   Ở chế độ nền, Nhiệm vụ ngôn ngữ có tiện ích mở rộng API PaLM phản ứng với tài liệu mới thể hiện đánh giá mới. Lời nhắc bạn đã thêm trước đó yêu cầu một 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 được sử dụng cho bài đánh giá, hãy nhấp vào một trong các bài đánh giá rồi chọn Hiển thị lời nhắc PaLM .

8. Thiết lập tiện ích mở rộng "Chatbot với API PaLM" cho ứng dụng Chatbot

Cài đặt Chatbot với tiện ích mở rộng API PaLM

1. Điều hướng đến Chatbot với tiện ích mở rộng API PaLM .
2. Nhấp vào Cài đặt trong bảng điều khiển 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 đến phần Định cấu hình tiện ích mở rộng .
5. Trong hộp văn bản Đường dẫn bộ sưu tập , nhập users/{uid}/discussion/{discussionId}/messages .
6. Từ trình đơn thả xuống vị trí của Chức năng đám mây , hãy chọn Iowa (us-central1) hoặc vị trí mà bạn đã chọn trước đó cho Firestore và Cloud Storage.
7. Từ trình đơn thả xuống Mô hình ngôn ngữ , chọn chat-bison .
8. Để lại tất cả các giá trị khác làm mặc định.
9. Nhấp vào Cài đặt tiện ích mở rộng và đợi tiện ích mở rộng cài đặt.

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

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 Chatbot bằng tiện ích mở rộng API PaLM thông qua ứng dụng web, nhưng việc hiểu cách hoạt động của tiện ích mở rộng bằng cách kích hoạt tiện ích mở rộng bằng bảng điều khiển Firebase sẽ rất hữu ích. Tiện ích mở rộng kích hoạt khi tài liệu Cloud Firestore được tạo trong bộ sưu tập users/{uid}/discussion/{discussionId}/messages .

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

5. Trong bộ sưu tập messages , bấm 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 ID tự động .
   2. Trong hộp văn bản Trường , nhập prompt .
   3. Trong hộp văn bản Giá trị , nhập And now, vegetables .
   4. Nhấp vào Lưu và đợi vài giây. Bộ sưu tập messages hiện bao gồm một tài liệu chứa câu trả lời cho truy vấn của bạn.

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

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

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

Để sử dụng Firebase, cơ sở mã của ứng dụng của bạn cần có SDK Firebase cho các dịch vụ bạn muốn sử dụng và cấu hình Firebase cho các 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 đã bao gồm tất cả mã nhập và khởi tạo cần thiết cho 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ị 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 của mình với dự án Firebase để nhận các giá trị cấu hình Firebase duy nhất cho ứng dụng.

1. Trong bảng điều khiển Firebase, trong dự án Firebase của bạn, hãy điều hướng đến Tổng quan về dự án rồi 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 ứng dụng dễ nhớ, chẳng hạn như My Chatbot app .
3. Không chọn hộp kiểm Đồng thời thiết lập Firebase Hosting 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.
4. Nhấn vào Đăng ký ứng dụng .
5. Bảng điều khiển hiển thị đoạn mã để thêm và khởi chạy SDK Firebase với đố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 chỉnh sửa mã của bạn, hãy mở tệp chatbot-start/lib/firebase/firebase-config.js .
7. Thay thế các giá trị giữ chỗ bằng các giá trị bạn vừa sao chép. Sẽ không sao nếu bạn có các thuộc tính và giá trị cho dịch vụ Firebase mà bạn không sử dụng trong ứng dụng Chatbot .
8. Lưu các tập tin.
9. Quay lại bảng điều khiển Firebase, nhấp vào Continue to console .

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

1. Trong thiết bị đầu cuối của bạn, nhấn Control+C để ngăn máy chủ chạy ứng dụng web trước đó.
2. Trong thiết bị đầu cuối của bạn, điều hướng đến thư mục ứng dụng web chatbot-start :

   cd ../chatbot-start
   

3. Tạo các lệnh chạy Firebase CLI đối với một dự án Firebase cụ thể:

   firebase use YOUR_PROJECT_ID
   

Thiết lập cơ sở mã của ứng dụng của bạn để sử dụng Dịch vụ lưu trữ Firebase nhận biết khung

Lớp học lập trình này sử dụng các framework web với Hosting (bản xem trước) với ứng dụng web Chatbot .

1. Trong thiết bị đầu cuối của bạn, hãy bật khung web với Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Khởi tạo Firebase Hosting:

   firebase init hosting
   

3. Khi được nhắc với Đã phát hiện cơ sở Next.js Detected an existing codebase in your current directory, should we use this? , nhấn Y.
4. Khi được nhắc In which region would you like to host server-side content, if applicable? , chọn vùng 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 Set up automatic builds and deploys with GitHub? , nhấn N .

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

1. Trong thiết bị đầu cuối của bạn, 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 của bạn, điều hướng đến URL lưu trữ được lưu trữ cục bộ. Trong hầu hết các trường hợp, đó là http://localhost:5000/ hoặc một cái gì đó tương tự.

Trang sẽ tải nhưng bạn sẽ nhận thấy rằng có nhiều tính năng bị thiếu. Chúng ta sẽ thêm những thứ này vào các bước tiếp theo của lớp học lập trình này.

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

Nếu bạn thấy lỗi trên trang web bắt đầu như sau: Error: Firebase session cookie has incorrect... , bạn cần xóa tất cả cookie trong môi trường localhost của mình. Để thực hiện việc này, hãy làm theo hướng dẫn xóa cookie | Tài liệu DevTools. .

10. Thêm chức năng cho ứng dụng Chatbot

Ở 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 máy 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 các 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 của mình, 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 việc sử dụng sai mục đích.

Bạn có thể xem các quy tắc này trong các 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 này 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?" , chọn Có .

Cập nhật mã để thêm tin nhắn vào Cloud Firestore

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

1. Trong trình chỉnh sửa mã của bạn, 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 đã có các thuộc tính đối tượng sau:
   

   Tham số	Sự miêu tả
   userId	ID của người dùng đã đăng nhập
   discussionId	ID 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 phiên bản cơ sở dữ liệu Firestore

   Với các biến này đã sẵn sàng, bạn có thể thêm tài liệu Cloud Firestore để thể hiện thông báo mới.
3. Trong phần nội dung của hàm addNewMessage sau // Insert your code below ⬇️ nhận xét, 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ã để xây dựng truy vấn nhận tin nhắn

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ề truy vấn Cloud Firestore để định vị các tin nhắn được lưu trữ trong đường dẫn bộ sưu tậ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 Cloud Firestore

1. Vẫn trong tệp lib/firebase/firestore.js , hãy tìm hàm handleMessageDoc , hàm này sẽ nhận tài liệu Cloud Firestore đại diện cho một thông báo duy nhất.
   Chức năng này cần định dạng và cấu trúc 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 các tập tin.

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 của bạn, quay lại tab có ứng dụng web Chatbot và tải lại trang.
2. Nhấp vào Đăng nhập bằng 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 một tin nhắn, chẳng hạn như Tell me about space .
6. Nhấp vào Gửi và đợi vài giây để ứng dụng web Chatbot phản hồi.

Một lợi ích khác của Chatbot với tiện ích mở rộng API PaLM là lịch sử hội thoại của nó.

Để xem ví dụ về khả năng trò chuyện với bối cảnh lịch sử, 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 tiếp theo có liên quan đến câu hỏi trước đó, chẳng hạn như And what about vegetables? .

Ứng dụng web Chatbot phản hồi bằng kiến ​​thức lịch sử. Mặc dù câu hỏi cuối cùng của bạn không chỉ định năm loại rau ngẫu nhiên, nhưng Chatbot với tiện ích mở rộng API PaLM vẫn hiểu được các câu hỏi tiếp theo.

11. Thiết lập tiện ích mở rộng "Chuyển đổi văn bản thành lời nói" cho ứng dụng Gợi ý video

Cài đặt văn bản chuyển đổi thành tiện ích mở rộng bài phát biểu

1. Điều hướng đến văn bản chuyển đổi sang mở rộng lời nói .
2. Nhấp vào Cài đặt trong bảng điều khiển Firebase .
3. Chọn dự án Firebase của bạn.
4. Bấm tiếp .
5. Trong phần Đánh giá API được bật và tài nguyên được tạo , bấm Bật bên cạnh bất kỳ dịch vụ nào được đề xuất cho bạn:

6. Nhấp vào Tiếp theo, sau đó chọn cấp Grant bên cạnh bất kỳ quyền nào được đề xuất cho bạn.

7. Bấm tiếp .
8. Trong hộp văn bản đường dẫn bộ sưu tập , nhập bot .
9. Trong hộp văn bản đường dẫn lưu trữ , nhập tts .
10. Để lại tất cả các giá trị khác là tùy chọn mặc định của chúng.
11. Nhấp vào Cài đặt tiện ích mở rộng và chờ phần mở rộng cài đặt.

Hãy thử chuyển đổi văn bản sang mở rộng bài phát biểu

Mặc dù mục tiêu của codelab này là tương tác với tiện ích chuyển đổi thành tiện ích mở rộng thông qua ứng dụng web, nhưng thật hữu ích khi hiểu cách mở rộng hoạt động bằng cách kích hoạt tiện ích mở rộng bằng bảng điều khiển Firebase. Phần mở rộng kích hoạt khi tài liệu Firestore đám mây được tạo trong bộ sưu tập bot .

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

1. Trong bảng điều khiển Firebase, điều hướng đến Firestore
2. Nhấp chuột Bắt đầu thu thập .
3. Trong hộp văn bản ID bộ sưu tập , nhập bot .
4. Bấm tiếp .

5. Trong hộp văn bản ID tài liệu , nhấp vào Auto-id .
6. Trong hộp văn bản trường , nhập text .
7. Trong hộp văn bản giá trị , nhập The quick brown fox jumps over the lazy dog .
8. Nhấp vào để lưu .

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

1. Trong bảng điều khiển Firebase, điều hướng đến lưu trữ .
2. Trong khung nơi bạn có thể tải lên các tệp, lưu ý tên xô của bạn sau giá trị gs:// . Đây là tên của thùng mặc định của bạn cho dự án này. Bạn cần nó trong các nhiệm vụ khác nhau trong suốt codelab này.

3. Trong bảng điều khiển Google Cloud, điều hướng đến lưu trữ đám mây .
4. Chọn dự án của bạn.
   Nếu bạn không thấy dự án của mình trong danh sách các dự án gần đây, bấm chọn Dự án để xác định vị trí dự án của bạn trong trình chọn dự án.

5. Chọn thùng lưu trữ mặc định của bạn.
6. Điều hướng đến tts/ thư mục.
7. Nhấp vào tệp MP3.
8. Ở cuối tệp MP3, nhấp vào và lưu ý rằng văn bản của bạn được chuyển đổi thành lời nói.

12. Thiết lập tiện ích mở rộng "Video với video đám mây AI" cho ứng dụng gợi ý video

Cài đặt các video nhãn với phần mở rộng AI video trên đám mây

1. Điều hướng đến các video nhãn với tiện ích mở rộng AI video trên đám mây .
2. Nhấp vào Cài đặt trong bảng điều khiển 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 đạt được phần mở rộng Cấu hình .
5. Từ việc thả xuống vị trí chức năng đám mây , chọn một vị trí được hỗ trợ (vị trí mà trước đây bạn đã chọn cho Firestore và Cloud Storage hoặc gần nhất với nó). Để biết các vị trí được hỗ trợ, hãy xem phần location_id trong AnnotateVideoRequest .
6. Từ việc thả xuống mô hình , chọn mới nhất .
7. Từ việc thả xuống camera đứng yên , chọn Không .
8. Để lại tất cả các giá trị khác là mặc định của chúng.
9. Nhấp vào Cài đặt tiện ích mở rộng và chờ phần mở rộng cài đặt.

Hãy thử các video nhãn với phần mở rộng AI Video Video

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

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

1. Điều hướng đến lưu trữ trong dự án Firebase của bạn > Tạo thư mục .
2. Trong hộp văn bản tên thư mục, nhập video_annotation_input .

3. Nhấp vào Thêm thư mục .
4. Trong thư mục video_annotation_input , nhấp vào Tải lên tệp .
5. Trong thư mục ai-extensions-codelab/video-hint-start/public/videos mà bạn đã nhân bản hoặc tải xuống trước đó, chọn tệp video đầu tiên.
6. Quay trở lại trình duyệt của bạn, trong bảng điều khiển Google Cloud, điều hướng đến lưu trữ đám mây .
7. Chọn thùng lưu trữ mặc định của bạn, 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 và làm mới trang vì API Video Intelligence vẫn có thể xử lý video.

9. Lưu ý một tệp JSON tồn tại theo một tên tương tự với tệp bạn đã tải lên trước đó.
10. Nhấp chuột Tải xuống tên tệp .
11. Mở tệp JSON đã tải xuống trong trình soạn thảo mã của bạn. Nó chứa đầu ra thô từ API Video Intelligence, bao gồm các nhãn được 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 để sử 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à Firebase CLI để tương tác với dự án Firebase của bạn.

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

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

Ứng dụng mẫu của Codelab này đã bao gồm tất cả các mã nhập và nhập cần thiết cho SDK (xem video-hint-start/lib/firebase/firebase.js ), vì vậy bạn không cần thêm chúng. Tuy nhiên, ứng dụng mẫu chỉ có các giá trị trình 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 của mình với dự án Firebase của mình để lấy các giá trị cấu hình Firebase duy nhất của mình cho ứng dụng của bạn.

1. Trong bảng điều khiển Firebase, trong dự án Firebase của bạn, điều hướng đến tổng quan của 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ý một ứng dụng với dự án).
2. Trong hộp văn bản có biệt danh ứng dụng , hãy nhập một biệt danh ứng dụng đáng nhớ, chẳng hạn như My Video Hint app .
3. Không chọn cũng thiết lập lưu trữ Firebase cho hộp kiểm Ứng dụng này . Bạn sẽ thực hiện các bước này sau trong codelab.
4. Nhấn vào Đăng ký ứng dụng .
5. Bảng điều khiển hiển thị đoạn mã để thêm và khởi tạo SDK FireBase với đố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 chỉnh sửa mã của bạn, hãy mở tệp video-hint-start/lib/firebase/firebase-config.js .
7. Thay thế các giá trị giữ chỗ bằng các giá trị bạn vừa sao chép. Không sao nếu bạn 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 các tập tin.
9. Quay trở lại bảng điều khiển Firebase, nhấp vào tiếp tục vào bảng điều khiển .

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

1. Trong thiết bị đầu cuối của bạn, nhấn Control+C để dừng máy chủ chạy ứng dụng web trước đó.
2. Trong thiết bị đầu cuối của bạn, điều hướng đến thư mục ứng dụng web video-hint-start :

   cd ../video-hint-start
   

3. Tạo các lệnh chạy Firebase CLI chống lại một dự án Firebase cụ thể:

   firebase use YOUR_PROJECT_ID
   

Thiết lập cơ sở mã của ứng dụng của bạn để sử dụng lưu trữ Firebase của Framework-Aware Firebase

Codelab này sử dụng Web Frameworks với Hosting (Preview) với ứng dụng Web gợi ý video .

1. Trong thiết bị đầu cuối của bạn, bật khung web với lưu trữ Firebase:

   firebase experiments:enable webframeworks
   

2. Khởi tạo Firebase Hosting:

   firebase init hosting
   

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

Chạy và xem ứng dụng Web gợi ý video

1. Trong thiết bị đầu cuối của bạn, cài đặt các phụ thuộc vào các 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 của bạn, điều hướng đến URL lưu trữ được lưu trữ cục bộ. Trong hầu hết các trường hợp, đó là http: // localhost: 5000/ hoặc một cái gì đó tương tự.

Trang nên tải, nhưng bạn sẽ nhận thấy rằng các tính năng khác nhau bị thiếu. Chúng tôi sẽ thêm những thứ này trong các bước tiếp theo của codelab này.

Khắc phục sự cố 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 điều khiển của devtools, hãy làm theo các bước sau:

1. Điều hướng đến URL được cung cấp.

2. Nhấp vào Lưu và chờ trạng thái thay đổi từ tòa nhà sang 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 codelab này, bạn đã chạy ứng dụng gợi ý video cục bộ, nhưng nó không có nhiều chức năng và chưa sử dụng tiện ích mở rộng được cài đặt. Trong bước này của codelab, 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 mở rộng.

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

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

Bạn có thể xem các quy tắc này trong các 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 này 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?" , chọn Có .

Cập nhật mã để kết hợp các chức năng

1. Trong trình chỉnh sửa mã của bạn, mở rộng thư mục functions .
   Thư mục này chứa một số chức năng, kết hợp để tạo thành một đường ống mở rộng. Bảng sau đây liệt kê và mô tả từng chức năng:

   Chức năng	Sự miêu tả
   functions/01-handle-video-upload.js	Bước đầu tiên trong đường ống mở rộng. Nó xử lý tệp video được tải lên của người dùng.
   functions/02-handle-video-labels.js	Bước thứ hai trong đường ống mở rộng. Nó xử lý tệp nhãn video, được tạo bởi tiện ích mở rộng quy tắc storage-label-videos .
   functions/03-handle-audio-file.js	Bước thứ ba trong đường ống mở rộng. Nó xử lý các tập tin âm thanh được sao chép.

   Tuy nhiên, bạn vẫn cần thêm một tệp nhóm các chức năng này lại với nhau.
2. Trong tệp functions/index.js , 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 chức năng từ tệp index.js để có một vị trí tập trung cho tất cả các chức năng.

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

1. Trong Trình chỉnh sửa mã của bạn, hãy mở tệp lib/firebase/storage.js .
2. Xác định vị trí chức năng uploadVideo .
   Hàm này nhận được các tham số userId , filePath và file . Dữ liệu này là đủ để tải lên một tệp lên lưu trữ đám mây.
3. Trong phần thân của hàm uploadVideo , 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 chức năng của bạn

Để triển khai các chức năng của bạn với Firebase CLI, hãy làm theo các bước sau:

1. Trong thiết bị đầu cuối của bạn trong khi vẫn còn trong thư mục video-hint-start , nhấn Control+C để dừng quy trình hiện tại.
2. Triển khai các chức năng của bạn:

   firebase deploy --only functions
   

   Nếu bạn được hỏi về việc xóa bất kỳ chức năng đám mây nào trước đó, chọn No .
3. Nếu bạn thấy một tin nhắn tương tự như Permission denied while using the Eventarc Service Agent , hãy đợi một vài phút và sau đó thử lại lệnh.
4. Sau khi lệnh kết thúc, hãy chạy ứng dụng lại cục bộ:

   firebase emulators:start --only hosting
   

Chạy và xem lại ứng dụng Web gợi ý video (bây giờ có chức năng)

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

1. Trong trình duyệt của bạn, hãy tìm tab nơi bạn điều hướng đến http: // localhost: 5000.
2. Nếu cần, nhấp vào Đăng nhập với Google và chọn tài khoản Google của bạn.
3. Nhấp vào Tải lên ví dụ Video số 1 và đợi một vài phút để xem kết quả tóm tắt video.
4. Nếu bạn không thấy bất kỳ kết quả nào sau khi bạn tải lên video, hãy xem các lỗi khắc phục sự cố với các chức năng đám mây trong Phụ lục của codelab này.

15. Kết luận

Chúc mừng! Bạn đã đạt được rất nhiều trong codelab này!

Đã cài đặt và cấu hình các tiện ích mở rộng Firebase

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

Đã làm việc với các tiện ích mở rộng bằng cách sử dụng bảng điều khiển Firebase

Thay vì nhảy thẳng vào mã, bạn đã dành thời gian để hiểu cách các tiện ích mở rộng AI hoạt động, dựa trên đầu vào mà bạn cung cấp thông qua bảng điều khiển cho Firestore hoặc lưu trữ đám mây. 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 đầu ra mở rộng.

Được xây dựng ba ứng dụng web do AI cung cấp sử dụng các tiện ích mở rộng Firebase

Đánh giá

Trong ứng dụng web đánh giá , bạn đã sử dụng các tác vụ ngôn ngữ với tiện ích mở rộng API Palm để tóm tắt các đánh giá dài mà người dùng còn lại cho 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, nơi JSON cung cấp xếp hạng sao và đánh giá tóm tắt về đánh giá dạng dài gốc.

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

Chatbot

Trong ứng dụng Web Chatbot , bạn đã sử dụng ChatBot với tiện ích mở rộng API Palm để cung cấp cho người dùng giao diện trò chuyện tương tác, bao gồm bối cảnh lịch sử trong các cuộc hội thoại - trong đó mỗi tin nhắn được lưu trữ trong tài liệu Firestore được đưa vào một người dùng cụ thể.

Tập thể dục tùy chọn : Các sinh viên đã hài lòng với chatbot, nhưng các nhân viên muốn có một vài cải tiến. Học sinh nên được đưa ra các câu hỏi kích thích tư duy sau khi câu trả lời của họ được cung cấp. 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 tùy chọn bối cảnh có thể định cấu hình để đạt được điều này.

Gợi ý video

Trong ứng dụng Web gợi ý video , bạn đã sử dụng văn bản chuyển đổi thành lời nói , các tác vụ ngôn ngữ với API Palm và các video nhãn với các phần mở rộng video trên đám mây để tạo thành một đường ống mở rộng dẫn đến mô tả văn bản và âm thanh của video.

Bài tập tùy chọn : Bộ Chính phủ đã tìm thấy nguyên mẫu thú vị và giờ họ cũng muốn người dùng có thể nhấp vào nhãn dựa trên văn bản để nhảy đến điểm trong video phát hiện nhãn.

16. PHỤ LỤC: Lỗi khắc phục sự cố với các chức năng đám mây

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

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

Nếu bạn nhận được bất kỳ lỗi liên quan đến quyền nào trong bảng điều khiển của Chrome Devtools, hãy làm theo các bước sau:

1. Đọc tổng quan xác thực | Trang chạy đám mây
2. Nhấp vào liên kết để xem và hoàn thành các tác vụ cần thiết để cho phép truy cập công khai không được xác thực vào chức năng.

3. Điều hướng trở lại ứng dụng đánh giá . Ví dụ: http: // localhost: 8080.
4. Nhấp vào Thêm một số đánh giá giả và đợi một vài giây.
   • Nếu các đánh giá xuất hiện: Bạn không cần phải tiếp tục với các bước khắc phục sự cố này và có thể nhảy thẳng để thiết lập phần ứng dụng web Chatbot trong codelab này ..
   • Nếu đánh giá không xuất hiện: Tiếp tục với phần khắc phục sự cố này.

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

1. Trong bảng điều khiển Firebase, điều hướng đến các chức năng .
2. Di chuột qua chức năng addMockReviews , sau đó nhấp vào > Xem nhật ký .

3. Cuộn qua các bản ghi

   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).
   

   đến khi

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

   tìm thấy một lỗi tương tự như một trong những điều sau đây:
4. Trong bảng điều khiển Google Cloud, điều hướng đến trang Quyền IAM , sau đó chọn dự án của bạn.
5. Trong bảng, tìm cột Tên .
   Trong trang IAM & quản trị , có một bảng người dùng và vai trò. Cột tên trong bảng mô tả những gì người dùng hoặc hiệu trưởng là gì. Bạn có thể có một hiệu trưởng với tên của tài khoản dịch vụ tính toán mặc định .

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

1. Nhấp chuột Chỉnh sửa hiệu trưởng .

2. Tiếp tục với các vai trò Thêm vào phần Tài khoản Dịch vụ Tính toán mặc định trong CodeLab này.

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

1. Nhấp vào truy cập cấp .
2. Trong hộp văn bản Hiệu trưởng mới , nhập compute .
3. Trong menu của AutoSuggestions xuất hiện, 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ụ tính toán mặc định

Trong phần Vai trò gán của tài khoản dịch vụ tính toán mặc định :

1. Mở rộng menu Chọn một vai trò .
2. Trong hộp văn bản bộ lọc , nhập Cloud Datastore User .
3. Trong menu tự động hóa xuất hiện, chọn người dùng DataStore Cloud .
4. Nhấp chuột Thêm một vai trò khác .
   1. Mở rộng menu Chọn một vai trò .
   2. Trong hộp văn bản bộ lọc , nhập Cloud Storage for Firebase Admin .
   3. Trong menu của các loại tự động xuất hiện, chọn lưu trữ đám mây cho quản trị viên Firebase .
5. Nhấp chuột Thêm một vai trò khác .
   1. Mở rộng menu Chọn một vai trò .
   2. Trong hộp văn bản bộ lọc , nhập Cloud Storage for Firebase Service Agent .
   3. Trong menu của các loại tự động xuất hiện, chọn lưu trữ đám mây cho tác nhân dịch vụ Firebase .
6. Nhấp vào để lưu .