Ra mắt trang web danh mục đầu tư 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. 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 bằ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ẽ tạo một trang web danh mục đầu tư cá nhân. Tác nhân AI Studio sẽ viết mã 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 trang web danh mục cá nhân.
  • 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ụ giao diện người dùng bằng ngôn ngữ tự nhiên.
  • 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.

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

  1. 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.
  2. 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 trang web danh mục đầu tư ở Chế độ tạo của AI Studio

Tạo lớp vỏ ứng dụng và nhắc trợ lý mã AI tạo bố cục giao diện người dùng.

  1. 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.
  2. Trong ô nhập câu lệnh trò chuyện, hãy nhập nội dung mô tả cho ứng dụng danh mục đầu tư của bạn: 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
  3. Nhấp vào Tạo để bắt đầu quy trình tạo ứng dụng.

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.

  1. Mở ngăn xem trước trong Google AI Studio.
  2. Tương tác với mọi nút điều hướng, đường liên kết hoặc bố cục trong hộp cát xem trước để xác minh trải nghiệm trực quan.
    • Lưu ý về cách 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 hoặc lỗi biên dịch. 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 đề.
    Vị trí nút Khắc phục của Google AI Studio
  3. 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?"
    • "Include a new section to showcase my recent presentations and talks."
  4. Đợ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.

  1. Ở 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.Vị trí của nút Xuất bản trên Google AI Studio
  2. 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.
  3. 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.
  4. Nhấp vào Xuất bản ứng dụng.
  5. 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.
  6. 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.
  7. Kiểm thử ứng dụng web đang hoạt động trong trình duyệt của bạn!

6. (KHÔNG BẮT BUỘC) Thêm miền tuỳ chỉnh

Theo mặc định, Cloud Run lưu trữ dịch vụ của bạn trên một miền phụ run.app do Google quản lý. Nếu muốn sử dụng một miền cá nhân (chẳng hạn như yourname.com hoặc portfolio.yourname.com), bạn có thể liên kết một miền tuỳ chỉnh với dịch vụ của mình.

Bước 1: Thêm một ánh xạ miền trong Cloud Run

  1. Chuyển đến trang Cloud Run Domain Mappings (Ánh xạ miền Cloud Run) trong Google Cloud Console.
  2. Nhấp vào Thêm mối liên kết.
  3. Chọn dịch vụ Cloud Run mà bạn muốn liên kết trong trình đơn thả xuống.
  4. Nhập tên miền tuỳ chỉnh của bạn (ví dụ: yourname.com hoặc portfolio.yourname.com).
  5. Nhấp vào Tiếp theo hoặc Tiếp tục. Cloud Run sẽ hiển thị các bản ghi DNS (chẳng hạn như bản ghi A/AAAA hoặc CNAME) mà bạn phải tạo bằng nhà đăng ký tên miền của mình.

Bước 2: Định cấu hình nhà đăng ký DNS

  1. Đăng nhập vào bảng quản trị của nhà đăng ký tên miền (ví dụ: Squarespace, GoDaddy hoặc Namecheap).
  2. Mở trang quản lý DNS hoặc trang cấu hình chế độ cài đặt DNS cho miền của bạn.
  3. Tạo bản ghi DNS khớp với các giá trị xuất hiện trong trình hướng dẫn liên kết Cloud Run:
    • Đối với các ánh xạ miền đỉnh (ví dụ: yourname.com), hãy thêm các bản ghi A và AAAA trong danh sách.
    • Đối với mối liên kết miền con (ví dụ: portfolio.yourname.com), hãy thêm bản ghi CNAME trong danh sách.
  4. Lưu các thay đổi về cấu hình DNS.

Bước 3: Chờ cấp chứng chỉ SSL

Sau khi các thay đổi về DNS có hiệu lực:

  1. Google Cloud sẽ tự động cung cấp một chứng chỉ SSL/TLS được quản lý cho kết nối an toàn của bạn.
  2. Quá trình này thường hoàn tất trong khoảng 15 phút nhưng cũng có thể mất đến 24 giờ, tuỳ thuộc vào quá trình truyền tin DNS.
  3. Sau khi hoàn tất, miền tuỳ chỉnh của bạn sẽ chuyển hướng an toàn đến trang web danh mục đầu tư của bạn.

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:

  1. Trong Google AI Studio, hãy chuyển đến trang Ứng dụng.
  2. Tìm ứng dụng của bạn trong lưới hoặc danh sách.
  3. 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.
  4. 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 trang web danh mục ngay trong Google AI Studio.

Tìm hiểu thêm

Hãy truy cập vào đường liên kết này để nhận huy hiệu Đã hoàn thành hành trình của nhà phát triển!

Để tiếp tục hành trình của mình, hãy truy cập vào goo.gle/builders để tham gia phòng thí nghiệm tiếp theo.