Tạo ứng dụng web dựa trên AI bằng Tiện ích Firebase cho API Gemini

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

Tiện ích Firebase cho phép bạn thêm chức năng được đóng gói sẵn vào ứng dụng của mình bằng mã tối thiểu – ngay cả chức năng dựa trên AI. Lớp học lập trình này hướng dẫn bạn cách tích hợp hai Tiện ích Firebase trong một ứng dụng web để bạn có thể tận dụng API Gemini nhằm tạo nội dung mô tả, tóm tắt hình ảnh và thậm chí là các đề xuất được cá nhân hoá dựa trên ngữ cảnh được cung cấp và thông tin đầu vào của người dùng cuối.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách tạo một ứng dụng web sử dụng AI để mang lại trải nghiệm hấp dẫn cho người dùng bằng Tiện ích Firebase.

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

  • Có kiến thức về Node.js, Next.js và TypeScript.

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

  • Cách sử dụng Tiện ích Firebase cho API Gemini để xử lý ngôn ngữ.
  • Cách sử dụng Cloud Functions cho Firebase để tạo ngữ cảnh tăng cường cho mô hình ngôn ngữ.
  • Cách sử dụng JavaScript để truy cập kết quả do Tiện ích Firebase 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à dòng lệnh
  • Tài khoản Google để tạo và quản lý dự án Firebase

2. Xem lại ứng dụng web, các dịch vụ Firebase và tiện ích

Trong phần này, bạn sẽ xem lại ứng dụng web mà bạn sẽ tạo bằng lớp học lập trình này, cũng như tìm hiểu về các dịch vụ Firebase và Tiện ích Firebase mà bạn sẽ sử dụng.

Ứng dụng web

Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng web có tên là Friendly Conf.

Ban tổ chức Friendly Conference đã quyết định sử dụng AI để mang đến trải nghiệm thú vị và phù hợp với từng người dùng cho những người tham dự. Ứng dụng hội nghị hoàn chỉnh cung cấp cho người tham dự một chatbot AI trò chuyện được hỗ trợ bởi mô hình AI tạo sinh đa phương thức (còn gọi là mô hình ngôn ngữ lớn hoặc LLM). Ứng dụng này có thể trả lời các câu hỏi về các chủ đề chung, phù hợp với lịch trình và chủ đề của hội nghị. Chatbot có ngữ cảnh trước đây và kiến thức về ngày/giờ hiện tại cũng như các chủ đề và lịch trình của Friendly Conf, vì vậy, câu trả lời của chatbot có thể tính đến tất cả ngữ cảnh này.

5364a56a230ff075.png

Dịch vụ Firebase

Trong lớp học lập trình này, bạn sẽ sử dụng nhiều dịch vụ và tính năng của Firebase, đồng thời hầu hết mã khởi động cho các dịch vụ và tính năng đó đều được cung cấp cho bạn. Bảng sau đây chứa các dịch vụ mà bạn sẽ sử dụng và lý do sử dụng các dịch vụ đó.

Dịch vụ

Lý do sử dụng

Xác thực Firebase

Bạn sử dụng chức năng đăng nhập bằng Google cho ứng dụng web.

Cloud Firestore

Bạn lưu trữ dữ liệu văn bản trong Cloud Firestore, sau đó Tiện ích Firebase sẽ xử lý dữ liệu đó.

Cloud Storage cho Firebase

Bạn đọc và ghi từ Cloud Storage để hiển thị thư viện hình ảnh trong ứng dụng web.

Quy tắc bảo mật của Firebase

Bạn triển khai Quy tắc bảo mật để bảo mật quyền truy cập vào các dịch vụ của Firebase.

Tiện ích Firebase

Bạn định cấu hình và cài đặt các Tiện ích Firebase liên quan đến AI, đồng thời hiển thị kết quả trong ứng dụng web.

Phần thưởng: Bộ công cụ mô phỏng trên thiết bị của Firebase

Bạn có thể tuỳ ý sử dụng Bộ công cụ mô phỏng cục bộ để chạy ứng dụng trên máy, thay vì kết nối với nhiều dịch vụ Firebase đang hoạt động trên đám mây.

Phần thưởng: Lưu trữ Firebase

Bạn có thể tuỳ ý sử dụng tính năng Lưu trữ Firebase để phân phát ứng dụng web (không có kho lưu trữ GitHub).

Phần thưởng: Lưu trữ ứng dụng Firebase

Bạn có thể tuỳ ý sử dụng tính năng Lưu trữ ứng dụng Firebase được tinh giản mới để phân phát ứng dụng web Next.js động (được kết nối với kho lưu trữ GitHub).

Tiện ích Firebase

Các tiện ích Firebase mà bạn sẽ sử dụng trong lớp học lập trình này bao gồm:

Tiện ích rất hữu ích vì chúng phản ứng với các sự kiện xảy ra trong dự án Firebase. Cả hai tiện ích được sử dụng trong lớp học lập trình này đều phản hồi khi bạn tạo tài liệu mới trong các bộ sưu tập được định cấu hình trước trong Cloud Firestore.

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

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

  1. Trong dòng lệnh, hãy xác minh rằng bạn đã cài đặt Node.js phiên bản 20.0.0 trở lên:
    node -v
    
  2. Nếu bạn chưa có Node.js phiên bản 20.0.0 trở lên, hãy tải phiên bản LTS mới nhất xuống và cài đặt.

Tải mã nguồn cho lớp học lập trình

Nếu bạn có tài khoản GitHub:

  1. Tạo một kho lưu trữ mới bằng mẫu của chúng tôi tại github.com/FirebaseExtended/codelab-gemini-api-extensions65ef006167d600ab.png
  2. Sao chép kho lưu trữ GitHub của lớp học lập trình mà bạn vừa tạo:
    git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
    

Nếu bạn chưa cài đặt git hoặc không muốn tạo kho lưu trữ mới:

Tải kho lưu trữ GitHub xuống dưới dạng tệp zip.

Xem xét cấu trúc thư mục

Thư mục gốc bao gồm một tệp README.md cung cấp hướng dẫn đơn giản để bắt đầu chạy ứng dụng web. Tuy nhiên, nếu mới học lập trình, bạn nên hoàn thành lớp học lập trình này (thay vì hướng dẫn nhanh) vì lớp học lập trình này chứa bộ hướng dẫn toàn diện nhất.

Nếu không chắc mình đã áp dụng mã đúng cách theo hướng dẫn trong suốt lớp học lập trình này hay chưa, bạn có thể tìm thấy mã giải pháp trong nhánh git end.

Cài đặt Giao diện dòng lệnh (CLI) của Firebase

  1. Xác minh rằng bạn đã cài đặt Firebase CLI và phiên bản là 13.6 trở lên:
    firebase --version
    
  2. Nếu bạn đã cài đặt Firebase CLI nhưng không phải phiên bản 13.6 trở lên, hãy cập nhật:
    npm update -g firebase-tools
    
  3. Nếu bạn chưa cài đặt Giao diện dòng lệnh (CLI) của Firebase, hãy cài đặt:
    npm install -g firebase-tools
    

Nếu bạn không thể cập nhật hoặc cài đặt Giao diện dòng lệnh (CLI) của Firebase do lỗi quyền, hãy xem tài liệu về 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 codelab-gemini-api-extensions rồi đăng nhập vào Firebase:
    cd codelab-gemini-api-extensions
    firebase login
    
    Nếu dòng lệnh cho biết bạn đã đăng nhập vào Firebase, bạn có thể chuyển đến phần Thiết lập dự án Firebase của lớp học lập trình này.
  2. Trong thiết bị đầu cuối, tuỳ thuộc vào việc bạn có muốn Firebase thu thập dữ liệu hay không, hãy nhập Y hoặc N. (bạn có thể sử dụng một trong hai tuỳ chọn này cho lớp học lập trình này)
  3. 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à đăng ký một Ứng dụng web Firebase trong dự án đó. Bạn cũng sẽ bật một số dịch vụ Firebase mà ứng dụng web mẫu sử dụng sau trong lớp học lập trình này.

Tất cả các bước trong phần này đều được thực hiện trong bảng điều khiển Firebase.

Tạo dự án Firebase

  1. Đăng nhập vào bảng điều khiển Firebase bằng Tài khoản Google.
  2. Nhấp vào Tạo dự án, sau đó nhập tên dự án (ví dụ: AI Extensions Codelab).
    Hãy ghi nhớ mã dự án được chỉ định tự động cho dự án Firebase của bạn (hoặc nhấp vào biểu tượng Chỉnh sửa để đặt mã dự án mà bạn muốn). Bạn sẽ cần mã này sau để xác định dự án Firebase trong Firebase CLI. Nếu quên mã nhận dạng, bạn có thể tìm thấy mã nhận dạng đó trong phần Cài đặt dự án.
  3. Nhấp vào Tiếp tục.
  4. Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, sau đó nhấp vào Tiếp tục.
  5. Đố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 Google Analytics.
  6. Nhấp vào Tạo dự án, đợi dự án được cấp phép, rồi nhấp vào Tiếp tục.

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

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

  • Tài khoản Cloud Billing cần 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 300 USD và tài khoản dùng thử miễn phí trên Cloud Billing hay không.
  • Nếu bạn tham gia lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có khoản tín dụng Google Cloud nào không.

Ngoài ra, xin lưu ý rằng khi bật tính năng thanh toán trên dự án Firebase, bạn sẽ bị tính phí cho các lệnh gọi mà tiện ích thực hiện đến Gemini API (bất kể bạn chọn nhà cung cấp nào, Google AI hay Vertex AI). Tìm hiểu thêm về mức giá của AI của GoogleVertex AI.

Để nâng cấp dự án lên gói Blaze, 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.
  2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết tài khoản Cloud Billing với dự án của bạn.
    Nếu cần tạo tài khoản Cloud Billing trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.

Thêm ứng dụng web vào dự án Firebase

  1. Chuyển đến màn hình Project Overview (Tổng quan về dự án) trong dự án Firebase, sau đó nhấp vào af10a034ec77938d.pngWeb.Nút Web ở đầu dự án Firebase
  2. Trong hộp văn bản Biệt hiệu ứng dụng, hãy nhập một biệt hiệu ứng dụng dễ nhớ, chẳng hạn như My AI Extensions
  3. Nhấp vào Register app (Đăng ký ứng dụng) > Next (Tiếp theo) > Next (Tiếp theo) > Continue to console (Tiếp tục đến bảng điều khiển).
    Bạn có thể bỏ qua tất cả các bước liên quan đến "lưu trữ" trong quy trình tạo Ứng dụng web vì bạn sẽ thiết lập dịch vụ lưu trữ (không bắt buộc) trong phần sau của lớp học lập trình này.

Ứng dụng web đã tạo trong dự án Firebase

Vậy thì tuyệt quá! Giờ đây, bạn đã đăng ký một ứng dụng web trong dự án Firebase mới.

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

  1. Chuyển đến mục Xác thực bằng ngăn điều hướng bên trái.
  2. Nhấp vào Bắt đầu.
  3. Trong cột Nhà cung cấp bổ sung, hãy nhấp vào Google > Bật.232b8f0336c25585.png
  4. Trong hộp văn bản Public-facing name for project (Tên công khai cho dự án), hãy nhập một tên hữu ích, chẳng hạn như My AI Extensions Codelab.
  5. Trong trình đơn Support email for project (Email hỗ trợ cho dự án), hãy chọn địa chỉ email của bạn.
  6. Nhấp vào Lưu.

37e54f32f8133be3.png

Thiết lập Cloud Firestore

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

Thiết lập Cloud Storage cho Firebase

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

Trong phần tiếp theo của lớp học lập trình này, bạn sẽ cài đặt và định cấu hình hai Tiện ích Firebase mà bạn sẽ sử dụng trong ứng dụng web trong suốt lớp học lập trình này.

5. Thiết lập tiện ích "Tạo chatbot bằng Gemini API"

Cài đặt tiện ích "Tạo chatbot bằng Gemini API"

  1. Chuyển đến tiện ích "Tạo chatbot bằng API Gemini".
  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, sau đó nhấp vào Tiếp theo.
  4. Trong phần Xem lại các 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, sau đó nhấp vào Tiếp theo.8e58e717da8182a2.png
  5. Đối với mọi quyền được đề xuất cho bạn, hãy chọn Cấp, rồi nhấp vào Tiếp theo.269e1c3c4123425c.png
  6. Định cấu hình tiện ích:
    1. Trong trình đơn Gemini API Provider (Nhà cung cấp Gemini API), hãy chọn xem bạn muốn sử dụng Gemini API của Google AI hay Vertex AI. Đối với nhà phát triển sử dụng Firebase, bạn nên sử dụng Vertex AI.
    2. Trong hộp văn bản Firestore Collection Path (Đường dẫn bộ sưu tập Firestore), hãy nhập: users/{uid}/messages.
      Trong các bước sau của lớp học lập trình này, việc thêm tài liệu vào bộ sưu tập này sẽ kích hoạt tiện ích gọi API Gemini.
    3. Trong trình đơn Vị trí của hàm trên đám mây, hãy chọn vị trí mà bạn muốn (chẳng hạn như Iowa (us-central1) hoặc vị trí mà bạn đã chỉ định trước đó cho cơ sở dữ liệu Firestore).
    4. Giữ nguyên tất cả các giá trị khác theo mặc định.
  7. Nhấp vào Cài đặt tiện ích rồi đợi tiện ích cài đặt xong.

Dùng thử tiện ích "Tạo chatbot bằng Gemini 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 "Tạo chatbot bằng Gemini API" thông qua một ứng dụng web, nhưng trước tiên, bạn nên tìm hiểu cách hoạt động của tiện ích này bằng cách thử trong bảng điều khiển Firebase.

Tiện ích này được kích hoạt bất cứ khi nào một tài liệu Firestore được tạo trong bộ sưu tập users/{uid}/discussion/{discussionId}/messages. Bạn có thể thực hiện việc này trong bảng điều khiển của Firebase.

  1. Trong bảng điều khiển Firebase, hãy chuyển đến Firestore, sau đó nhấp vào 63873f95ceaf00ac.pngBắt đầu thu thập trong cột đầu tiên.
  2. Trong hộp văn bản Mã thu thập, hãy nhập users, sau đó nhấp vào Tiếp theo.
  3. Trong hộp văn bản Mã tài liệu, hãy nhấp vào Tự động tạo mã, rồi nhấp vào Lưu.
  4. Trong bộ sưu tập users, hãy nhấp vào dec3188dd2d1aa02.pngBắt đầu thu thập.Bắt đầu một bộ sưu tập mới trong Firestore
  5. Trong hộp văn bản Mã bộ sưu tập, hãy nhập messages, sau đó nhấp vào Tiếp theo.
    1. Trong hộp văn bản Mã tài liệu, hãy nhấp vào Tự động nhận dạng.
    2. Trong hộp văn bản Field (Trường), hãy nhập prompt
    3. Trong hộp văn bản Value (Giá trị), hãy nhập Tell me 5 random fruits
  6. Nhấp vào Lưu rồi chờ vài giây.

Khi bạn thêm tài liệu này, tài liệu đó đã kích hoạt tiện ích gọi API Gemini. Tài liệu mà bạn vừa thêm vào bộ sưu tập messages hiện không chỉ bao gồm prompt mà còn bao gồm response của mô hình vào truy vấn của bạn.

Phản hồi của mô hình ngôn ngữ trong tài liệu Firestore

Kích hoạt lại tiện ích bằng cách thêm một tài liệu khác vào bộ sưu tập messages:

  1. Trong bộ sưu tập messages, hãy nhấp vào dec3188dd2d1aa02.png Thêm tài liệu.
  2. Trong hộp văn bản Mã tài liệu, hãy nhấp vào Tự động nhận dạng.
  3. Trong hộp văn bản Field (Trường), hãy nhập prompt
  4. Trong hộp văn bản Value (Giá trị), hãy nhập And now, vegetables
  5. Nhấp vào Lưu rồi chờ vài giây. Tài liệu bạn vừa thêm vào bộ sưu tập messages hiện đã thêm response vào truy vấn của bạn.

    Khi tạo câu trả lời này, mô hình Gemini cơ bản đã sử dụng kiến thức trong quá khứ từ truy vấn trước đó của bạn.

6. Thiết lập ứng dụng web

Để chạy ứng dụng web, bạn cần chạy các lệnh trong thiết bị đầu cuối và thêm mã trong trình soạn thảo mã.

Thiết lập Giao diện dòng lệnh (CLI) của Firebase để chạy trên dự án Firebase

Trong cửa sổ dòng lệnh, hãy yêu cầu CLI sử dụng dự án Firebase bằng cách chạy lệnh sau:

firebase use YOUR_PROJECT_ID

Triển khai Quy tắc bảo mật cho Firestore và Cloud Storage

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

  1. Để triển khai Quy tắc bảo mật, hãy chạy lệnh sau trong dòng lệnh:
    firebase deploy --only firestore:rules,storage
    
  2. Nếu được hỏi có cấp cho Bộ nhớ trên đám mây vai trò IAM để sử dụng các quy tắc trên nhiều dịch vụ hay không, hãy nhập Y hoặc N. (bạn có thể dùng một trong hai tuỳ chọn này cho lớp học lập trình này)

Kết nối ứng dụng web với dự án Firebase

Cơ sở mã của ứng dụng web cần biết dự án Firebase nào sẽ sử dụng cho cơ sở dữ liệu, bộ nhớ, v.v. Bạn có thể thực hiện việc này bằng cách thêm cấu hình Firebase vào cơ sở mã của ứng dụng.

  1. Lấy cấu hình Firebase:
    1. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Cài đặt dự án trong dự án Firebase.
    2. Di chuyển xuống phần Ứng dụng của bạn rồi chọn ứng dụng web đã đăng ký.
    3. Trong ngăn Thiết lập và cấu hình SDK, hãy sao chép toàn bộ mã initializeApp, bao gồm cả hằng số firebaseConfig.
  2. Thêm cấu hình Firebase vào cơ sở mã của ứng dụng web:
    1. Trong trình soạn thảo mã, hãy mở tệp src/app/lib/firebase/firebase.config.js.
    2. Chọn tất cả trong tệp rồi thay thế bằng mã bạn đã sao chép.
    3. Lưu tệp.

Xem trước ứng dụng web trong trình duyệt

  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
    npm run dev
    
  2. Trong trình duyệt, hãy chuyển đến URL lưu trữ được lưu trữ cục bộ để xem ứng dụng web. Ví dụ: trong hầu hết các trường hợp, URL là http://localhost:3000/ hoặc tương tự.

Sử dụng chatbot của ứng dụng web

  1. Trong trình duyệt, hãy quay lại thẻ có ứng dụng web Friendly Conf đang chạy cục bộ.
  2. Nhấp vào Đăng nhập bằng Google rồi chọn Tài khoản Google của bạn (nếu cần).
  3. Sau khi đăng nhập, bạn sẽ thấy một cửa sổ trò chuyện trống.
  4. Nhập lời chào (chẳng hạn như hi), rồi nhấp vào Gửi.
  5. Chờ vài giây để chatbot phản hồi.

Chatbot trong ứng dụng phản hồi bằng một câu trả lời chung chung.

1929b9f465053ae7.png

Chuyên biệt hoá chatbot cho ứng dụng

Bạn cần có mô hình Gemini cơ bản mà chatbot của ứng dụng web sử dụng để biết thông tin chi tiết về hội nghị khi mô hình này tạo câu trả lời cho người tham dự sử dụng ứng dụng. Có nhiều cách để kiểm soát và điều hướng các câu trả lời này. Trong phần phụ của lớp học lập trình này, chúng tôi sẽ hướng dẫn bạn một cách rất cơ bản bằng cách cung cấp "ngữ cảnh" trong câu lệnh ban đầu (thay vì chỉ nhập từ người dùng ứng dụng web).

  1. Trong ứng dụng web trên trình duyệt, hãy xoá cuộc trò chuyện bằng cách nhấp vào nút "x" màu đỏ (bên cạnh tin nhắn trong nhật ký trò chuyện).
  2. Trong trình soạn thảo mã, hãy mở tệp src/app/page.tsx.
  3. Di chuyển xuống và thay thế mã trên hoặc gần dòng 77 có nội dung prompt: userMsg bằng mã sau:
    prompt: preparePrompt(userMsg, messages),
  4. Lưu tệp.
  5. Quay lại ứng dụng web đang chạy trong trình duyệt.
  6. Một lần nữa, hãy nhập lời chào (chẳng hạn như hi), rồi nhấp vào Gửi.
  7. Chờ vài giây để chatbot phản hồi.

6fbe972296fcb4d8.png

Chatbot phản hồi bằng kiến thức dựa trên ngữ cảnh được cung cấp trong src/app/lib/context.md. Mặc dù bạn không nhập một yêu cầu cụ thể, nhưng mô hình Gemini cơ bản sẽ tạo một đề xuất được cá nhân hoá dựa trên ngữ cảnh này cũng như ngày/giờ hiện tại. Giờ đây, bạn có thể chỉ định các câu hỏi tiếp theo và tìm hiểu kỹ hơn.

Ngữ cảnh mở rộng này rất quan trọng đối với chatbot, nhưng bạn không nên hiển thị ngữ cảnh này cho người dùng ứng dụng web. Dưới đây là cách ẩn ngữ cảnh:

  1. Trong trình soạn thảo mã, hãy mở tệp src/app/page.tsx.
  2. Di chuyển xuống và thay thế mã trên hoặc gần dòng 56 có nội dung ...doc.data(), bằng mã sau:
    ...prepareMessage(doc.data()),
  3. Lưu tệp.
  4. Quay lại ứng dụng web đang chạy trong trình duyệt.
  5. Tải lại trang.

Bạn cũng có thể thử trò chuyện với chatbot bằng ngữ cảnh trước đây:

  1. Trong hộp văn bản Nhập tin nhắn, hãy đặt câu hỏi như: Any other interesting talks about AI?Trình trò chuyện tự động sẽ trả lời.
  2. Trong hộp văn bản Nhập tin nhắn, hãy đặt câu hỏi tiếp theo liên quan đến câu hỏi trước: Give me a few more details about the last one.

Chatbot phản hồi bằng kiến thức trong quá khứ. Vì nhật ký trò chuyện hiện là một phần của ngữ cảnh, nên chatbot hiểu được các câu hỏi tiếp theo.

Phần thưởng: Chạy ứng dụng web bằng Bộ công cụ mô phỏng cục bộ của Firebase

Bộ công cụ mô phỏng trên thiết bị của Firebase cho phép bạn kiểm thử cục bộ hầu hết các tính năng của ứng dụng web.

  1. Trong thiết bị đầu cuối, hãy đảm bảo rằng bạn đang ở thư mục gốc của ứng dụng web.
  2. Chạy lệnh sau để cài đặt rồi chạy Bộ công cụ mô phỏng trên thiết bị của Firebase:
    firebase init emulators
    firebase emulators:start
    

7. Thiết lập tiện ích "Multimodal Tasks with the Gemini API" (Nhiệm vụ đa phương thức bằng Gemini API)

Tiện ích "Multimodal Tasks with the Gemini API" (Nhiệm vụ đa phương thức bằng API Gemini) gọi API Gemini bằng các lời nhắc đa phương thức chứa lời nhắc văn bản cũng như URL tệp hoặc URL Google Cloud Storage được hỗ trợ (lưu ý rằng ngay cả API Gemini của Google AI cũng sử dụng URL Google Cloud Storage làm cơ sở hạ tầng URL tệp). Tiện ích này cũng hỗ trợ các biến tay lái để thay thế các giá trị trong tài liệu Cloud Firestore nhằm tuỳ chỉnh lời nhắc văn bản.

Trong ứng dụng, bất cứ khi nào tải hình ảnh lên một bộ chứa trên Cloud Storage, bạn đều có thể tạo một URL và thêm URL đó vào một tài liệu mới trên Cloud Firestore. Nhờ đó, tiện ích sẽ kích hoạt để tạo lời nhắc đa phương thức và gọi API Gemini. Trong mã nguồn của lớp học lập trình này, chúng tôi đã cung cấp mã để tải hình ảnh lên và ghi URL vào tài liệu Firestore.

Cài đặt tiện ích "Multimodal Tasks with the Gemini API" (Nhiệm vụ đa phương thức bằng Gemini API)

  1. Chuyển đến tiện ích "Multimodal Tasks with the Gemini API" (Tác vụ đa phương thức bằng Gemini 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 đến phần Định cấu hình tiện ích.
    1. Trong trình đơn Gemini API Provider (Nhà cung cấp Gemini API), hãy chọn xem bạn muốn sử dụng Gemini API của Google AI hay Vertex AI. Đối với nhà phát triển sử dụng Firebase, bạn nên sử dụng Vertex AI.
    2. Trong hộp văn bản Đường dẫn bộ sưu tập Firestore, hãy nhập: gallery
    3. Trong hộp văn bản Prompt (Lệnh), hãy nhập: Please describe the provided image; if there is no image, say "no image"
    4. Trong hộp văn bản Trường hình ảnh, hãy nhập: image
    5. Trong trình đơn Vị trí của hàm trên đám mây, hãy chọn vị trí mà bạn muốn (chẳng hạn như Iowa (us-central1) hoặc vị trí mà bạn đã chỉ định trước đó cho cơ sở dữ liệu Firestore).
    6. Giữ nguyên tất cả các giá trị khác theo mặc định.
  5. Nhấp vào Cài đặt tiện ích rồi đợi tiện ích cài đặt xong.

Dùng thử tiện ích "Nhiệm vụ đa phương thức bằng Gemini 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 "Multimodal Tasks with the Gemini API" (Nhiệm vụ đa phương thức bằng API Gemini) thông qua một ứng dụng web, nhưng trước tiên, bạn nên tìm hiểu cách hoạt động của tiện ích này bằng cách thử trong bảng điều khiển Firebase.

Tiện ích này được kích hoạt bất cứ khi nào một tài liệu Firestore được tạo trong bộ sưu tập users/{uid}/gallery. Bạn có thể thực hiện việc này trong bảng điều khiển của Firebase. Sau đó, tiện ích này sẽ lấy URL hình ảnh trên Cloud Storage trong tài liệu Cloud Firestore và truyền URL đó dưới dạng một phần của câu lệnh đa phương thức trong lệnh gọi đến API Gemini.

Trước tiên, hãy tải hình ảnh lên một bộ chứa Cloud Storage:

  1. Chuyển đến phần Bộ nhớ trong dự án Firebase.
  2. Nhấp vào 17eeb1712828b84f.pngTạo thư mục.
  3. Trong hộp văn bản Folder name (Tên thư mục), hãy nhập galleryba63b07a7a04f055.png
  4. Nhấp vào Thêm thư mục.
  5. Trong thư mục gallery, hãy nhấp vào Tải tệp lên.
  6. Chọn một tệp hình ảnh JPEG để tải lên.

Tiếp theo, hãy thêm URL của hình ảnh trên Cloud Storage vào một tài liệu Firestore (đây là điều kiện kích hoạt cho tiện ích):

  1. Chuyển đến Firestore trong dự án Firebase
  2. Nhấp vào 63873f95ceaf00ac.pngBắt đầu thu thập trong cột đầu tiên.
  3. Trong hộp văn bản Mã bộ sưu tập, hãy nhập: gallery, rồi nhấp vào Tiếp theo.
  4. Thêm tài liệu vào bộ sưu tập:
    1. Trong hộp văn bản Mã tài liệu, hãy nhấp vào Tự động nhận dạng.
    2. Trong hộp văn bản Field (Trường), hãy nhập: image. Trong hộp Value (Giá trị), hãy nhập URI Storage location (Vị trí lưu trữ) của hình ảnh bạn vừa tải lên.3af50c4266c2a735.png
  5. Nhấp vào Thêm trường.
  6. Trong hộp văn bản Field (Trường), hãy nhập: published. Trong hộp Type (Loại), hãy chọn boolean. Trong hộp Value (Giá trị), hãy chọn true.9cacd855ff370a9f.png
  7. Nhấp vào Lưu rồi chờ vài giây.

Tập hợp gallery hiện chứa một tài liệu có chứa nội dung phản hồi cho truy vấn của bạn.

  1. Trong trình duyệt, hãy quay lại thẻ có ứng dụng web Friendly Conf đang chạy cục bộ.
  2. Nhấp vào thẻ điều hướng Thư viện.
  3. Bạn sẽ thấy một thư viện gồm các hình ảnh đã tải lên và nội dung mô tả do AI tạo. Tệp này sẽ có hình ảnh mà bạn đã tải lên thư mục gallery trong bộ chứa Bộ nhớ.
  4. Nhấp vào nút "Tải lên" rồi chọn một hình ảnh JPEG khác.
  5. Đợi vài giây để hình ảnh xuất hiện trong thư viện. Sau vài phút, nội dung mô tả do AI tạo cho hình ảnh mới tải lên cũng sẽ xuất hiện.

Nếu bạn muốn tìm hiểu mã về cách triển khai tính năng này, hãy xem src/app/gallery/page.tsx trong cơ sở mã của ứng dụng web.

8. Phần thưởng: Triển khai ứng dụng

Firebase cung cấp một số cách để bạn có thể triển khai ứng dụng web. Đối với lớp học lập trình này, hãy chọn một trong các tuỳ chọn sau:

  • Cách 1: Lưu trữ trên Firebase – Sử dụng cách này nếu bạn quyết định không tạo kho lưu trữ GitHub của riêng mình (và chỉ lưu trữ mã nguồn trên máy).
  • Cách 2: Lưu trữ ứng dụng trên Firebase – Sử dụng cách này nếu bạn muốn tự động triển khai bất cứ khi nào đẩy các thay đổi vào kho lưu trữ GitHub của riêng mình. Dịch vụ Firebase mới này được xây dựng riêng để đáp ứng nhu cầu của các ứng dụng Next.js và Angular động.

Cách 1: Triển khai bằng tính năng Lưu trữ Firebase

Sử dụng tuỳ chọn này nếu bạn quyết định không tạo kho lưu trữ GitHub của riêng mình (và chỉ lưu trữ mã nguồn trên máy).

  1. Trong dòng lệnh, hãy khởi chạy Firebase Hosting bằng cách chạy các lệnh sau:
    firebase experiments:enable webframeworks
    firebase init hosting
    
  2. Đối với câu lệnh: Detected an existing Next.js codebase in your current directory, should we use this?, hãy nhấn Y.
  3. Đối với lời nhắc: In which region would you like to host server-side content, if applicable?, hãy chọn vị trí mặc định hoặc vị trí mà bạn đã sử dụng trước đó trong lớp học lập trình này. Sau đó, nhấn phím Enter (hoặc return trên macOS).
  4. Đối với câu lệnh: Set up automatic builds and deploys with GitHub?, hãy nhấn N.
  5. Triển khai ứng dụng web của bạn lên Hosting bằng cách chạy lệnh sau:
    firebase deploy --only hosting
    

Tất cả đã hoàn tất! Nếu bạn cập nhật ứng dụng và muốn triển khai phiên bản mới đó, chỉ cần chạy lại firebase deploy --only hosting và tính năng Lưu trữ Firebase sẽ tạo và triển khai lại ứng dụng của bạn.

Cách 2: Triển khai bằng tính năng Lưu trữ ứng dụng Firebase

Sử dụng tuỳ chọn này nếu bạn muốn triển khai tự động bất cứ khi nào đẩy thay đổi vào kho lưu trữ GitHub của riêng mình.

  1. Gửi các thay đổi của bạn lên GitHub.
  2. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Lưu trữ ứng dụng trong dự án Firebase.
  3. Nhấp vào Bắt đầu > Kết nối với GitHub.
  4. Chọn Tài khoản GitHubKho lưu trữ. Nhấp vào Tiếp theo.
  5. Trong phần Deployment setting (Cài đặt triển khai) > Root directory (Thư mục gốc), hãy nhập tên của thư mục chứa mã nguồn (nếu package.json không nằm trong thư mục gốc của kho lưu trữ).
  6. Đối với Nhánh phát trực tiếp, hãy chọn nhánh chính của kho lưu trữ GitHub. Nhấp vào Tiếp theo.
  7. Nhập mã nhận dạng cho phần phụ trợ (ví dụ: chatbot).
  8. Nhấp vào Hoàn tất và triển khai.

Quá trình triển khai mới sẽ mất vài phút để hoàn tất. Bạn có thể kiểm tra trạng thái triển khai trong phần Lưu trữ ứng dụng của bảng điều khiển Firebase.

Từ thời điểm này trở đi, mỗi khi bạn đẩy một thay đổi vào kho lưu trữ GitHub, tính năng Lưu trữ ứng dụng Firebase sẽ tự động tạo và triển khai ứng dụng của bạn.

9. Kết luận

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

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

Bạn đã sử dụng bảng điều khiển Firebase để định cấu hình và cài đặt nhiều Tiện ích Firebase sử dụng AI tạo sinh. Việc sử dụng Tiện ích Firebase rất thuận tiện vì bạn không cần tìm hiểu và viết nhiều mã nguyên mẫu để xử lý việc xác thực bằng các dịch vụ của Google Cloud hoặc logic của các Dịch vụ đám mây phụ trợ để nghe và tương tác với các dịch vụ và API của Firestore và Google Cloud.

Thử dùng tiện ích bằng bảng điều khiển Firebase

Thay vì bắt đầu ngay với mã, bạn đã dành thời gian tìm hiểu cách hoạt động của các tiện ích genAI này, dựa trên dữ liệu đầu vào mà bạn cung cấp thông qua Firestore hoặc Bộ nhớ trên đám mây. Điều này có thể đặc biệt hữu ích khi gỡ lỗi đầu ra của một tiện ích.

Xây dựng ứng dụng web dựa trên AI

Bạn đã tạo một ứng dụng web dựa trên AI sử dụng Tiện ích Firebase để chỉ truy cập vào một số chức năng của mô hình Gemini.

Trong ứng dụng web, bạn sử dụng tiện ích "Chatbot with Gemini API" (Chatbot có Gemini API) để cung cấp cho người dùng một giao diện trò chuyện tương tác, bao gồm ngữ cảnh trước đây và ngữ cảnh dành riêng cho ứng dụng trong các cuộc trò chuyện – trong đó mỗi tin nhắn được lưu trữ trong một tài liệu Firestore thuộc phạm vi của một người dùng cụ thể.

Ứng dụng web cũng sử dụng tiện ích "Multimodal Tasks with the Gemini API" (Nhiệm vụ đa phương thức bằng Gemini API) để tự động tạo nội dung mô tả hình ảnh cho hình ảnh đã tải lên.

Các bước tiếp theo