Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Ra mắt ứng dụng web quản lý việc cần làm bằng AI

1. Giới thiệu

Tổng quan

Ngày nay, việc xây dựng bằng AI bắt đầu từ đâu? Đối với hầu hết chúng ta, việc này bắt đầu bằng một truy vấn hoặc nguyên mẫu đơn giản. Google AI Studio cung cấp một Chế độ xây dựng mạnh mẽ (thường được gọi là "lập trình theo cảm hứng") cho phép bạn thiết kế, kiểm thử và xây dựng các ứng dụng web toàn ngăn xếp bằng cách sử dụng tính năng tạo mã dựa trên các mô hình Gemini.

Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng danh sách việc cần làm có tính cộng tác với cơ sở dữ liệu Firestore để lưu trữ liên tục và Xác thực Firebase để đăng nhập người dùng. Tác nhân AI Studio sẽ định cấu hình tất cả các dịch vụ phụ trợ và viết mã tương tác cơ sở dữ liệu và giao diện người dùng. Sau khi ứng dụng được hoàn thiện, bạn sẽ triển khai ứng dụng đó ngay vào Cloud Run chỉ bằng một lần nhấp.

Bạn sẽ thực hiện

Đưa ra câu lệnh cho Google AI Studio để tạo nguyên mẫu cho một ứng dụng web danh sách việc cần làm có tính cộng tác.
Định cấu hình và bật chế độ tích hợp Firebase để cung cấp cơ sở dữ liệu Firestore và thiết lập tính năng Đăng nhập bằng Google.
Kiểm thử ứng dụng trong hộp cát xem trước tương tác.
Triển khai ứng dụng lên Cloud Run ngay từ giao diện người dùng Google AI Studio.

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

Cách sử dụng Chế độ xây dựng của Google AI Studio để nhanh chóng tạo nguyên mẫu cho một dịch vụ full-stack bằng ngôn ngữ tự nhiên.
Cách Google AI Studio tự động định cấu hình các chế độ tích hợp Xác thực và Firestore của Firebase.
Cách triển khai ứng dụng AI Studio dưới dạng một vùng chứa không máy chủ trên Cloud Run.
Cách kiểm tra các bản ghi trong cơ sở dữ liệu và trạng thái bảo mật trong Bảng điều khiển của Firebase.

2. Thiết lập dự án

Trước khi ra mắt AI Studio, hãy xác minh trạng thái tài khoản và các điều kiện tiên quyết.

Thông tin về Tài khoản Google và cấp

Nếu bạn chưa có Tài khoản Google, hãy tạo một Tài khoản Google.
- Lưu ý: Nếu có thể, hãy sử dụng Tài khoản Google cá nhân cho bài thực hành này. Tài khoản nhóm, tài khoản công ty hoặc tài khoản trường học có thể thực thi các chính sách của Workspace để tắt các tính năng thử nghiệm hoặc tích hợp đám mây.
Xem thông tin thanh toán cho các hoạt động triển khai:
- Bậc khởi đầu của Google Cloud: Cho phép xuất bản tối đa 2 ứng dụng full-stack ở một khu vực được chọn mà không mất phí, mà không cần thiết lập tài khoản thanh toán đầy đủ trên Google Cloud.
- Triển khai tiêu chuẩn: Kết nối với một dự án trên đám mây Google có tính phí hiện có và mở rộng giới hạn lưu trữ, tài nguyên CPU và API.

3. Tạo ứng dụng việc cần làm ở Chế độ tạo của AI Studio

Hãy tạo lớp vỏ ứng dụng và nhắc trợ lý lập trình AI xây dựng các lớp bảo mật và tính liên tục.

Chuyển đến bảng điều khiển Ứng dụng Google AI Studio rồi nhấp vào Ứng dụng mới.

Trong ô nhập câu lệnh trò chuyện, hãy nhập nội dung mô tả cho ứng dụng việc cần làm của bạn:

Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.

Nhấp vào Tạo để bắt đầu quy trình tạo ứng dụng.

Khi nhận thấy cần có bộ nhớ cơ sở dữ liệu và tính năng đăng nhập an toàn cho người dùng, tác nhân AI Studio sẽ kích hoạt quy trình định cấu hình Firebase tự động.

Sau khoảng một phút, thẻ tích hợp Bật Firebase sẽ xuất hiện trong không gian làm việc.
Nhấp vào nút Bật Firebase để xác nhận và chấp nhận điều khoản dịch vụ.
Tác nhân sẽ thực hiện quá trình thiết lập ở chế độ nền. Tìm hiểu sâu:
- Một phiên bản cơ sở dữ liệu Firestore được cung cấp.
- Tính năng Xác thực Firebase được bật cùng với tính năng Đăng nhập bằng Google.
- Đã thiết lập cấu hình tài khoản dịch vụ (ví dụ: tạo src/lib/firebase.ts chứa thông tin xác thực API).
- Một firestore.rules chứa các ranh giới bảo mật mặc định (quy tắc cách ly người dùng) sẽ được thêm vào.

4. Kiểm thử và lặp lại

Trước khi ra mắt dịch vụ, hãy chạy quy trình kiểm tra xác thực trong bản xem trước tương tác.

Mở ngăn xem trước trong Google AI Studio.
Nhấp vào nút Đăng nhập để kích hoạt quy trình xác thực Đăng nhập bằng Google trong hộp cát.
- Lưu ý về việc khắc phục lỗi: Trong quá trình tạo hoặc kiểm thử, đôi khi bạn có thể gặp phải các vấn đề về thời gian chạy, lỗi biên dịch hoặc lỗi quyền Firestore do quy tắc bảo mật không khớp. Nếu điều này xảy ra, AI Studio sẽ hiển thị nút Khắc phục trong cuộc trò chuyện, cho phép bạn yêu cầu tác nhân tự động chẩn đoán và khắc phục vấn đề.
Sau khi đăng nhập, hãy thêm một số việc cần làm (ví dụ: "Xem tài liệu về Cloud Run", "Hoàn thành Lớp học lập trình").
Chuyển đổi một số việc cần làm thành đã hoàn thành và xoá một việc để đảm bảo các trình xử lý phía máy khách và trạng thái cơ sở dữ liệu cập nhật chính xác.
Nếu bạn muốn thay đổi kiểu hoặc hành vi, hãy hướng dẫn trợ lý ảo thông qua cửa sổ trò chuyện. Ví dụ:
- "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
- "Show a count of remaining incomplete tasks at the footer of the task list."
Đợi tác nhân cập nhật toàn bộ mã nguồn và kiểm tra trình duyệt xem trước để xem nội dung cập nhật.

5. Triển khai lên Cloud Run

Sau khi nguyên mẫu hoạt động đầy đủ, hãy triển khai nguyên mẫu đó dưới dạng một dịch vụ công khai trên Cloud Run.

Ở góc trên cùng bên phải của Google AI Studio, hãy nhấp vào nút Xuất bản để bắt đầu trình hướng dẫn triển khai.
Nhấp vào Bắt đầu để định cấu hình dự án trên Google Cloud.
- Xác minh rằng trình đơn thả xuống Dự án đích trên Google Cloud khớp với dự án mà bạn đã liên kết với không gian làm việc.
- AI Studio sẽ tự động tạo một mã nhận dạng dịch vụ duy nhất cho phiên bản Cloud Run.
Nếu đây là lần đầu tiên bạn triển khai và bạn đang sử dụng các thông số tiêu chuẩn của Google Cloud, thì bạn có thể được nhắc chỉ định loại tổ chức và cung cấp thông tin thanh toán.
Nhấp vào Xuất bản ứng dụng.
Các bước tạo vùng chứa, đăng ký vùng chứa và triển khai dịch vụ diễn ra ở chế độ nền. Quá trình này thường hoàn tất trong vòng 2 đến 4 phút.
Khi quá trình triển khai hoàn tất, hãy sao chép URL ứng dụng đã tạo và truy cập vào đường liên kết của ứng dụng đang hoạt động trong một thẻ trình duyệt.
Kiểm thử ứng dụng web đang hoạt động trong trình duyệt của bạn!

6. Kiểm tra trong Bảng điều khiển của Firebase

Hãy xem xét kỹ hơn để biết cách theo dõi giản đồ dữ liệu và người dùng.

Chuyển đến Bảng điều khiển của Firebase.
Chọn dự án của bạn (có nhãn AI Studio hoặc mã dự án được liên kết theo cách thủ công).
Trong ngăn điều hướng bên trái, hãy chọn Build > Firestore Database (Tạo > Cơ sở dữ liệu Firestore):
- Xem các bộ sưu tập và tài liệu trong cơ sở dữ liệu do ứng dụng của bạn tạo.
- Xác minh để đảm bảo mỗi tài liệu đều có một mã nhận dạng chủ sở hữu khớp với thông tin xác thực người dùng đang hoạt động.
Chọn thẻ Bảo mật trong bảng điều khiển Firestore để xem xét các chỉ thị bảo mật được tạo tự động, giới hạn quyền đọc và ghi đối với chủ sở hữu tài liệu đã xác minh.
Chuyển đến Bảo mật > Xác thực để xem danh sách thông tin đăng nhập đang hoạt động của người dùng được điền sẵn trong quá trình kiểm thử đăng nhập.

7. Dọn dẹp

Để tránh các khoản phí thanh toán không lường trước hoặc dọn dẹp tài nguyên trong không gian làm việc, hãy làm như sau:

Trong Google AI Studio, hãy chuyển đến trang Ứng dụng.
Tìm ứng dụng của bạn trong lưới hoặc danh sách.
Nhấp vào biểu tượng thùng rác để xoá trạng thái ứng dụng và huỷ xuất bản dịch vụ khỏi Cloud Run.
Nếu bạn triển khai bằng một dự án tiêu chuẩn và muốn tắt hoàn toàn tất cả tài nguyên, hãy chuyển đến phần Cài đặt dự án trên Bảng điều khiển của Google Cloud rồi xoá dự án cơ bản.

8. Kết luận

Xin chúc mừng! Bạn đã thiết kế, phát triển và triển khai một ứng dụng web cộng tác toàn ngăn xếp ngay trong Google AI Studio.

Để nhận huy hiệu hoàn thành một phòng thí nghiệm dành cho nhà phát triển và tìm một phòng thí nghiệm khác để tiếp tục hành trình của bạn, hãy truy cập goo.gle/builders.