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? Tất cả bắt đầu bằng một tia lửa: một ý tưởng đáng để tạo mẫu. Chế độ tạo của Google AI Studio biến ý tưởng đó thành hiện thực thông qua "lập trình theo cảm hứng". Bằng cách tận dụng các mô hình Gemini, bạn có thể thiết kế, kiểm thử và triển khai các ứng dụng web toàn ngăn xếp hoàn toàn thông qua tính năng tạo mã dựa trên cuộc trò chuyện.
Trong lớp học lập trình này, bạn sẽ tạo Block Explorer, một trò chơi không gian địa lý tương tác kết hợp dữ liệu lập bản đồ thực tế với AI tạo sinh. Bạn sẽ sử dụng AI Studio để tạo ứng dụng và tích hợp ứng dụng đó với Google Maps Platform và Gemini API. Sau đó, bạn sẽ tìm hiểu cách triển khai ứng dụng đã hoàn tất ngay trên Cloud Run để người khác có thể dùng thử.
Bạn sẽ thực hiện
- Sử dụng Google AI Studio để tạo nguyên mẫu cho một ứng dụng web tương tác về bản đồ không gian địa lý và câu đố.
- Bật và tự động cung cấp Maps Demo Key của Google Maps Platform ngay trong không gian làm việc của AI Studio.
- Triển khai tính năng mã hoá địa lý địa chỉ động, khám phá địa điểm và các câu đố vui do AI tạo bằng cách sử dụng câu lệnh ngôn ngữ tự nhiên.
- Nâng cao độ chính xác của bài kiểm tra kiến thức chung bằng cách tích hợp Maps Grounding Lite.
- Kiểm thử và lặp lại ứ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ế độ tạo 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 sử dụng Google Maps Platform API để tạo ứng dụng bằng dữ liệu không gian địa lý.
- Cách xác thực câu lệnh LLM bằng ngữ cảnh không gian địa lý trong thế giới thực để tạo các câu đố linh hoạt và thông tin chi tiết tại địa phương.
- 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.
Dưới đây là bản xem trước của pp:
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, các điều kiện tiên quyết và quyền truy cập API của bạn.
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 vô hiệu hoá tính năng thử nghiệm hoặc tính năng 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 của Google Cloud có tính phí hiện có và mở rộng hạn mức lưu trữ, tài nguyên CPU và API.
Khoá Demo Google Maps Platform
Để đơn giản hoá quy trình tạo nguyên mẫu, Google AI Studio tích hợp sẵn với Google Maps Platform. Điều này giúp bạn dễ dàng kiểm thử và xây dựng bằng các API cốt lõi của Nền tảng Google Maps (chẳng hạn như Maps JavaScript API, Geocoding API, Places API và Routes API) ngay trong dự án của mình. AI Studio sẽ tự động tạo Google Maps Platform Demo Key cho bạn.
Các lợi ích chính của Khoá dùng thử:
- Không cần thiết lập thông tin thanh toán hoặc thẻ tín dụng: Bạn có thể tạo mẫu và đánh giá ngay mà không cần định cấu hình tài khoản thanh toán trên Google Cloud.
- Hạn mức tạo mẫu lớn: Bao gồm tối đa 100 yêu cầu miễn phí mỗi ngày cho mỗi API để kiểm thử và lặp lại.
- Tích hợp liền mạch: Bạn không cần chuyển đến các cổng bên ngoài hoặc sao chép và dán thông tin đăng nhập. Google AI Studio tự động phát hiện thời điểm ứng dụng của bạn cần tích hợp với Google Maps Platform và định cấu hình mọi thứ cho bạn.
3. Tạo Application Shell ở Chế độ tạo của AI Studio
Bạn sẽ bắt đầu bằng cách tạo giao diện ứng dụng bằng Google AI Studio.
- 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 (hoặc chọn thẻ Tạo).
- Trong ô nhập dữ liệu câu lệnh, hãy nhập nội dung mô tả ban đầu cho ứng dụng không gian địa lý của bạn. Bạn cũng có thể nhấp vào chip khám phá Google Maps Platform trong phần đề xuất câu lệnh:
Build a highly polished, responsive, split-screen application. This application should be called "Block Explorer". It is meant to be a geospatial exploration app. It will use Google Maps Platform.
Key Features & Functionality:
- Split-Screen Layout: On desktop, a 1/3-width left-side editorial control panel and a 2/3-width right-side full-height map.
- Include a search bar where users can type a location such as a city or neighborhood. Submitting should issue a Geocoding request to the Google Geocoding V4 API REST endpoint (https://geocode.googleapis.com/v4/geocode/address/). Then pan the map to the geocoded location.
- Interactive Google Map: Render the Map inside an interactive container allowing users to pan, drag, and zoom freely. Place customized markers representing the currently selected/geocoded location.
- Also include five buttons for presets the users can click on: Buenos Aires, Shibuya, Copacabana, Cologne, and Lima. Clicking on this should geocode the location and pan the map there.
- Make sure to also include a mechanism to clearly show error messages when they occur so users can easily troubleshoot.
- Nhấp vào Tạo để bắt đầu quy trình tạo ứng dụng.
AI Studio sẽ bắt đầu tạo mã xử lý ứng dụng. Nếu được nhắc chọn một giao diện thiết kế, hãy chọn kiểu bất kỳ mà bạn muốn.
Bật Google Maps Platform và cung cấp khoá dùng thử
Google Maps Platform cung cấp Geocoding API. API này chuyển đổi các truy vấn địa chỉ mà con người có thể đọc được (chẳng hạn như "Shibuya" hoặc "Buenos Aires") thành toạ độ địa lý (vĩ độ và kinh độ) để căn giữa bản đồ và hiển thị điểm đánh dấu.
Khi bạn gửi một câu lệnh có ý định liên quan đến không gian địa lý (chẳng hạn như yêu cầu Google Maps, một công cụ định vị cửa hàng hoặc khám phá địa phương), AI Studio sẽ tự động phát hiện yêu cầu về không gian địa lý và hỗ trợ cung cấp khoá:
- Màn hình kích hoạt trong bối cảnh: Một thẻ nội tuyến có tiêu đề "Thiết lập Nền tảng Google Maps" xuất hiện trong lượt trò chuyện.
- Chấp nhận điều khoản và bật:
- Xem kỹ và chấp nhận Điều khoản dịch vụ của Dự án trình diễn Maps (và Điều khoản dịch vụ bổ sung của Gói Starter nếu được nhắc).
- Nhấp vào Bật Google Maps.
- Cung cấp khoá tự động và chèn bí mật: AI Studio tự động cung cấp Khoá dùng thử Google Maps Platform trên cơ sở hạ tầng Dự án do Google lưu trữ (GHP) và chèn khoá đó trực tiếp vào các bí mật của dự án dưới tên
GOOGLE_MAPS_PLATFORM_KEY. - Bản xem trước trực tiếp tức thì: Hộp cát xem trước ứng dụng sẽ làm mới ngay lập tức bằng một Bản đồ Google trực tiếp, tương tác và có đầy đủ chức năng.
Kiểm thử ứng dụng trong hộp cát xem trước bằng cách nhập một vị trí mới hoặc chọn một trong các nút vị trí đặt sẵn!
4. Thêm thông tin chi tiết về địa phương bằng Gemini API
Tiếp theo, bạn sẽ tích hợp Gemini API để tạo thông tin chi tiết phong phú, phù hợp với từng địa phương về các địa điểm khi người dùng khám phá bản đồ.
- Gửi câu lệnh sau cho trợ lý AI trong cửa sổ trò chuyện:
Now, let's bring in the AI using the Gemini API.
1. Once geocoding successfully identifies the City and State (e.g., "Miami, Florida"), trigger a call to the Gemini API (using the gemini-3.8-flash model).
2. Use the following prompt template for the AI:
"You are a local tour guide for [City, State]. Give me exactly 3 short, highly engaging, and unusual or surprising fun facts about this place. Keep each fact under 2 sentences. Format the response as a clean HTML unordered list (<ul>) so I can inject it directly."
3. Display these fun facts in a beautiful "Local Insights" banner on the bottom portion of the map screen. Add a subtle loading spinner while the AI is thinking.
4. Make sure to make this handling robust. If an API request fails, display a user-friendly error notification in the UI.
- Xác minh trong ngăn xem trước rằng việc chọn hoặc tìm kiếm một vị trí sẽ hiển thị thông tin thú vị được tạo động bởi Gemini.
Bạn sẽ thấy AI Studio cập nhật ứng dụng, dẫn đến việc phần "Thông tin chi tiết tại địa phương" được thêm vào cuối màn hình.
5. Tạo bài đố vui do AI tạo
Giờ đây, khi ứng dụng của bạn truy xuất toạ độ vị trí và thông tin chi tiết theo ngôn ngữ địa phương, hãy kết hợp các chức năng này để tạo các câu đố tương tác dựa trên điểm đến đã chọn.
- Gửi câu lệnh tạo bài kiểm tra cho trợ lý:
Now let's build the actual game! We will have Gemini generate a 3-question quiz based on the real places we just got information about.
After the local insights are generated, show the user a button to "Test their local knowledge". Once clicked, offer them 3 options to choose from:
- Local cuisine
- Art and culture
- Local history
Once selected, generate a 3-question quiz based on the category and the place. The quiz should be multiple choice. Once the user submits the quiz show them their score and the correct answer.
- Chơi thử bài kiểm tra đã tạo trong cửa sổ xem trước để kiểm tra tính năng quản lý trạng thái, lựa chọn câu trả lời và hiển thị điểm số.
6. Tích hợp Maps Grounding Lite
Theo mặc định, Gemini tạo ra các thông tin thực tế và câu đố dựa trên kiến thức từ dữ liệu huấn luyện của mình. Để cải thiện độ chính xác và tận dụng dữ liệu không gian theo thời gian thực, hãy tích hợp Maps Grounding Lite. Dịch vụ này kết nối Gemini với dữ liệu trực tiếp từ Google Maps Platform.
- Gửi câu lệnh sau trong AI Studio:
Add a toggle to make the quiz more difficult. Call this "Hyperlocal mode". When enabled, use the Google Maps Grounding Lite service with the Gemini API to fetch more local data, making the quiz more difficult.
Add information for the user so they know that Hyperlocal Mode is more difficult and how it works.
- Kiểm thử nút bật/tắt Chế độ siêu cục bộ trong cửa sổ xem trước để xác minh việc tạo câu đố có căn cứ.
LLM có thể tạo ra thông tin sai lệch về giờ hoạt động cụ thể, thời gian khai trương gần đây hoặc Mã địa điểm chính xác. Maps Grounding Lite cung cấp thông tin cơ sở cho các câu trả lời bằng các thực thể và thông tin ghi nhận thực tế về Địa điểm trên Google Maps, giúp cải thiện đáng kể độ chính xác về thông tin thực tế cho các câu hỏi đố vui.
7. Triển khai lên Cloud Run
Sau khi nguyên mẫu của bạn hoạt động đầy đủ, hãy triển khai nguyên mẫu đó dưới dạng một vùng chứa công khai không máy chủ trên Cloud Run ngay từ AI Studio.
- Ở 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 triển khai mà bạn dự định.
- 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.
- Nhấp vào Xuất bản ứng dụng.
- Quy trình tạo vùng chứa, đăng ký và triển khai dịch vụ sẽ thực thi ở 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 ứng dụng đang hoạt động trong một thẻ trình duyệt!
8. Xem xét các phương pháp hay nhất về bảo mật và sản xuất
Khi chuyển đổi ứng dụng này từ một nguyên mẫu sang môi trường thực tế, hãy lưu ý những trụ cột bảo mật sau:
1. Các quy tắc hạn chế đối với khoá API Google Maps
Tuyệt đối không để khoá API Google Maps chính thức ở trạng thái không hạn chế. Trong Google Cloud Console:
- Hạn chế API: Hạn chế khoá để khoá chỉ có thể gọi các API cụ thể (Maps JavaScript API, Geocoding API, Places API).
- Hạn chế ứng dụng: Hạn chế khoá bằng cách sử dụng HTTP Referrer (ví dụ:
https://yourgame.com/*) để ngăn việc sử dụng trái phép trên các trang web bên thứ ba.
2. Bảo mật khoá Gemini API
Bạn không bao giờ được để lộ khoá API Gemini trong JavaScript phía máy khách.
- Kiến trúc sản xuất: Xây dựng một dịch vụ phụ trợ gọn nhẹ (ví dụ: Cloud Run hoặc Cloud Functions) để hoạt động như một proxy. Giao diện người dùng của bạn gọi phần phụ trợ (
/api/get-fun-facts) và phần phụ trợ giao tiếp an toàn với Google AI Studio bằng một biến môi trường (GEMINI_API_KEY).
9. Dọn dẹp tài nguyên
Để 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.
10. 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 không gian địa lý dựa trên AI từ Google AI Studio. Bạn đã sử dụng thành công các API của Nền tảng Google Maps để xây dựng một trò chơi tương tác dựa trên dữ liệu thực tế.
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.