Membangun dengan Google Maps Platform dan AI

1. Pengantar

Ringkasan

Di mana titik awal membangun dengan AI saat ini? Semuanya dimulai dengan ide: ide yang layak dibuat prototipenya. Mode Build Google AI Studio mengubah ide tersebut menjadi kenyataan melalui "vibe coding". Dengan memanfaatkan model Gemini, Anda dapat mendesain, menguji, dan men-deploy aplikasi web full stack sepenuhnya melalui pembuatan kode percakapan.

Dalam codelab ini, Anda akan membuat Block Explorer, game geospasial interaktif yang menggabungkan data pemetaan dunia nyata dengan AI generatif. Anda akan menggunakan AI Studio untuk membuat aplikasi dan mengintegrasikannya dengan Google Maps Platform dan Gemini API. Kemudian, Anda akan mempelajari cara men-deploy aplikasi yang telah selesai langsung ke Cloud Run, sehingga aplikasi tersebut dapat dicoba oleh orang lain.

Yang akan Anda lakukan

• Gunakan Google AI Studio untuk membuat prototipe aplikasi web trivia dan pemetaan geospasial interaktif.
• Aktifkan dan sediakan Kunci Demo Google Maps Platform secara otomatis langsung dalam ruang kerja AI Studio.
• Terapkan geocoding alamat dinamis, penemuan tempat, dan kuis trivia yang dibuat AI menggunakan perintah bahasa alami.
• Tingkatkan akurasi kuis trivia dengan mengintegrasikan Maps Grounding Lite.
• Uji dan lakukan iterasi pada aplikasi di sandbox pratinjau interaktif.
• Deploy aplikasi ke Cloud Run langsung dari UI Google AI Studio.

Yang akan Anda pelajari

• Cara menggunakan mode Build Google AI Studio untuk membuat prototipe layanan full-stack dengan cepat menggunakan bahasa alami.
• Cara menggunakan API Google Maps Platform untuk membuat aplikasi dengan data geospasial.
• Cara mendasari perintah LLM dengan konteks geospasial dunia nyata untuk membuat kuis dinamis dan insight lokal.
• Cara men-deploy aplikasi AI Studio sebagai container serverless di Cloud Run.

Berikut pratinjau pp:

2. Menyiapkan project

Sebelum meluncurkan AI Studio, verifikasi status akun, prasyarat, dan akses API Anda.

Informasi Akun Google & Tingkat

1. Jika Anda belum memiliki Akun Google, buat Akun Google.
   • Tips: Gunakan Akun Google pribadi untuk lab ini jika memungkinkan. Akun grup, perusahaan, atau sekolah dapat menerapkan kebijakan yang menonaktifkan fitur eksperimental atau integrasi cloud.
2. Tinjau detail penagihan untuk deployment:
   • Tingkat Pemula Google Cloud: Memungkinkan penerbitan hingga dua aplikasi full-stack di wilayah tertentu tanpa biaya, tanpa membuat akun penagihan Google Cloud penuh.
   • Deployment Standar: Terhubung ke project Google Cloud berbayar yang sudah ada dan memperluas batas penyimpanan, resource CPU, dan API.

Kunci Demo Google Maps Platform

Untuk menyederhanakan pembuatan prototipe, Google AI Studio terintegrasi secara native dengan Google Maps Platform. Cara ini memberikan cara tanpa hambatan untuk menguji dan membangun dengan API inti Google Maps Platform (seperti Maps JavaScript API, Geocoding API, Places API, dan Routes API) langsung di project Anda. AI Studio akan otomatis membuat Kunci Demo Google Maps Platform untuk Anda.

Manfaat utama Kunci Demo:

• Tidak Perlu Kartu Kredit atau Penyiapan Penagihan: Anda dapat langsung membuat prototipe dan mengevaluasi tanpa mengonfigurasi akun penagihan Google Cloud.
• Kuota Pembuatan Prototipe yang Besar: Mencakup hingga 100 permintaan gratis per hari per API untuk pengujian dan iterasi.
• Integrasi Bawaan yang Lancar: Anda tidak perlu membuka portal eksternal atau menyalin lalu menempelkan kredensial. Google AI Studio otomatis mendeteksi kapan aplikasi Anda perlu diintegrasikan dengan Google Maps Platform dan mengonfigurasi semuanya untuk Anda.

3. Membuat Shell Aplikasi di Mode Build AI Studio

Anda akan memulai dengan membuat shell aplikasi menggunakan Google AI Studio.

1. Buka panel Aplikasi Google AI Studio, lalu klik Aplikasi Baru (atau pilih tab Build).
2. Di kotak input perintah, masukkan deskripsi awal untuk aplikasi geospasial Anda. Anda juga dapat mengklik chip penemuan Google Maps Platform di bagian saran perintah:

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.

3. Klik Build untuk memulai proses pembuatan aplikasi.

AI Studio akan mulai membuat kode aplikasi. Jika diminta untuk memilih tema desain, pilih gaya yang Anda sukai.

Mengaktifkan Google Maps Platform & Menyediakan Kunci Demo

Google Maps Platform menyediakan Geocoding API, yang mengonversi kueri alamat yang dapat dibaca manusia (seperti "Shibuya" atau "Buenos Aires") menjadi koordinat geografis (lintang dan bujur) untuk memusatkan peta dan menampilkan penanda.

Saat Anda mengirim perintah dengan maksud geospasial (seperti meminta Google Maps, pencari toko, atau eksplorasi lokal), AI Studio akan otomatis mendeteksi persyaratan geospasial dan membantu penyediaan kunci:

1. Tirai Aktivasi Dalam Konteks: Kartu inline berjudul "Siapkan Google Maps Platform" muncul dalam giliran percakapan.
2. Menyetujui Persyaratan & Mengaktifkan:
   • Tinjau dan setujui Persyaratan Layanan Project Demo Maps (dan Persyaratan Layanan Tambahan Tingkat Pemula jika diminta).
   • Klik Aktifkan Google Maps.
3. Penyediaan Kunci & Penyisipan Secret Otomatis: AI Studio secara otomatis menyediakan Kunci Demo Google Maps Platform di infrastruktur Project yang Dihosting Google (GHP) dan menyisipkannya langsung ke secret project Anda dengan nama GOOGLE_MAPS_PLATFORM_KEY.
4. Pratinjau Langsung Instan: Sandbox pratinjau aplikasi segera dimuat ulang dengan Peta Google interaktif yang live dan berfungsi penuh.

> Anda juga dapat mengaktifkan Google Maps Platform secara proaktif melalui Setelan (ikon roda gigi) > tab Integrasi > Google Maps Platform, atau memberikan kunci API Anda sendiri di bagian Setelan > Secret jika Anda sudah memiliki project Google Cloud yang aktif. Atau, agen dapat meminta kunci API langsung di jendela chat.

Uji aplikasi di sandbox pratinjau dengan memasukkan lokasi baru atau memilih salah satu tombol lokasi preset.

4. Menambahkan Insight Lokal dengan Gemini API

Selanjutnya, Anda akan mengintegrasikan Gemini API untuk membuat insight yang kaya dan dilokalkan tentang tempat saat pengguna menjelajahi peta.

1. Kirim perintah berikut ke asisten AI di jendela chat:

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.

2. Verifikasi di panel pratinjau bahwa memilih atau menelusuri lokasi akan menampilkan fakta menarik dinamis yang dihasilkan oleh Gemini.

Anda akan melihat AI Studio memperbarui aplikasi, sehingga bagian "Local Insights" ditambahkan ke bagian bawah layar.

5. Membuat Kuis Trivia Buatan AI

Setelah aplikasi Anda mengambil koordinat lokasi dan insight yang dilokalkan, gabungkan kemampuan ini untuk membuat kuis trivia interaktif berdasarkan tujuan yang dipilih.

1. Kirim perintah pembuatan kuis ke agen:

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.

2. Putar kuis yang dibuat di jendela pratinjau untuk menguji pengelolaan status, pemilihan jawaban, dan rendering skor.

6. Mengintegrasikan Maps Grounding Lite

Secara default, Gemini membuat fakta dan kuis menggunakan pengetahuan dari data pelatihannya. Untuk meningkatkan akurasi dan memanfaatkan data spasial real-time, integrasikan Maps Grounding Lite. Layanan ini menghubungkan Gemini dengan data live langsung dari Google Maps Platform.

1. Kirim perintah berikut di 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.

2. Uji tombol Mode hiperlokal di jendela pratinjau untuk memverifikasi pembuatan kuis yang memiliki rujukan.

LLM dapat berhalusinasi tentang jam buka bisnis tertentu, pembukaan baru, atau ID tempat yang tepat. Maps Grounding Lite mendasarkan respons pada entitas dan atribusi Tempat Google Maps yang sebenarnya, sehingga meningkatkan akurasi faktual untuk pertanyaan trivia secara signifikan.

7. Men-deploy ke Cloud Run

Setelah prototipe Anda berfungsi penuh, deploy sebagai container serverless publik di Cloud Run langsung dari AI Studio.

1. Di pojok kanan atas Google AI Studio, klik tombol Publish untuk memulai wizard deployment.
2. Klik Mulai untuk mengonfigurasi project Google Cloud Anda.
   • Pastikan drop-down Project Google Cloud target cocok dengan project deployment yang Anda inginkan.
   • AI Studio akan otomatis membuat ID layanan unik untuk instance Cloud Run.
3. Klik Publikasikan Aplikasi.
4. Build, pendaftaran, dan deployment layanan container akan dijalankan di latar belakang. Proses ini biasanya selesai dalam waktu 2–4 menit.
5. Setelah deployment selesai, salin URL Aplikasi yang dihasilkan dan buka link aplikasi aktif di tab browser.

8. Meninjau praktik terbaik keamanan dan produksi

Saat mentransisikan aplikasi ini dari prototipe ke lingkungan produksi, perhatikan pilar keamanan berikut:

1. Pembatasan Kunci Google Maps API

Jangan pernah membiarkan kunci Google Maps API produksi tidak dibatasi. Di Konsol Google Cloud:

• Pembatasan API: Batasi kunci agar hanya dapat memanggil API tertentu (Maps JavaScript API, Geocoding API, Places API).
• Pembatasan Aplikasi: Batasi kunci menggunakan Perujuk HTTP (misalnya, https://yourgame.com/*) untuk mencegah penggunaan tanpa izin di situs pihak ketiga.

2. Mengamankan Kunci Gemini API

Kunci Gemini API tidak boleh diekspos di JavaScript sisi klien.

• Arsitektur Produksi: Bangun layanan backend ringan (misalnya, Cloud Run atau Cloud Functions) untuk bertindak sebagai proxy. Frontend Anda memanggil backend Anda (/api/get-fun-facts), dan backend berkomunikasi dengan aman dengan Google AI Studio menggunakan variabel lingkungan (GEMINI_API_KEY).

9. Membersihkan resource

Untuk menghindari tagihan yang tidak terduga atau membersihkan resource ruang kerja Anda:

1. Di Google AI Studio, buka halaman Aplikasi.
2. Temukan aplikasi Anda dalam petak atau daftar.
3. Klik ikon sampah untuk menghapus status aplikasi dan membatalkan publikasi layanan dari Cloud Run.
4. Jika Anda men-deploy menggunakan project standar dan ingin menonaktifkan semua resource sepenuhnya, buka Setelan Project Konsol Google Cloud dan hapus project yang mendasarinya.

10. Kesimpulan

Selamat! Anda telah mendesain, mengembangkan, dan men-deploy aplikasi web geospasial berteknologi AI dari Google AI Studio. Anda telah berhasil menggunakan API Google Maps Platform untuk membuat game interaktif yang didukung oleh data dunia nyata.

Buka link ini untuk mengklaim badge Perjalanan Pembuat Selesai.

Untuk melanjutkan perjalanan Anda, buka goo.gle/builders untuk mengikuti lab berikutnya.

Pelajari Lebih Lanjut

• Dokumentasi Google Maps Platform
• Dokumen Cloud Run
• Membangun aplikasi di Google AI Studio