สร้างด้วย Google Maps Platform และ AI

1. บทนำ

ภาพรวม

การสร้างด้วย AI เริ่มต้นจากจุดใดในปัจจุบัน โดยเริ่มต้นจากประกายความคิด ซึ่งเป็นไอเดียที่คุ้มค่าต่อการสร้างต้นแบบ โหมดสร้างของ Google AI Studio จะเปลี่ยนแรงบันดาลใจนั้นให้เป็นจริงผ่าน "Vibe Coding" การใช้ประโยชน์จากโมเดล Gemini ช่วยให้คุณออกแบบ ทดสอบ และใช้งานเว็บแอปพลิเคชันแบบ Full Stack ได้ทั้งหมดผ่านการสร้างโค้ดแบบสนทนา

ใน Codelab นี้ คุณจะได้สร้าง Block Explorer ซึ่งเป็นเกมเชิงพื้นที่แบบอินเทอร์แอกทีฟที่ผสานรวมข้อมูลการทำแผนที่ในโลกแห่งความเป็นจริงเข้ากับ Generative AI คุณจะใช้ AI Studio เพื่อสร้างแอปพลิเคชันและผสานรวมกับ Google Maps Platform และ Gemini API จากนั้นคุณจะได้เรียนรู้วิธีติดตั้งใช้งานแอปพลิเคชันที่เสร็จสมบูรณ์แล้วใน Cloud Run โดยตรง เพื่อให้ผู้อื่นได้ลองใช้

สิ่งที่คุณต้องทำ

  • ใช้ Google AI Studio เพื่อสร้างต้นแบบเว็บแอปพลิเคชันแบบอินเทอร์แอกทีฟสำหรับการทำแผนที่เชิงพื้นที่และเกมตอบคำถาม
  • เปิดใช้และจัดสรร Google Maps Platform Demo Key โดยอัตโนมัติภายในพื้นที่ทำงาน AI Studio โดยตรง
  • ใช้การแปลงรหัสพิกัดภูมิศาสตร์ของที่อยู่แบบไดนามิก การค้นพบสถานที่ และแบบทดสอบความรู้รอบตัวที่ AI สร้างขึ้นโดยใช้พรอมต์ที่เป็นภาษาธรรมชาติ
  • เพิ่มความแม่นยำของแบบทดสอบความรู้รอบตัวด้วยการผสานรวม Maps Grounding Lite
  • ทดสอบและทำซ้ำแอปพลิเคชันในแซนด์บ็อกซ์ตัวอย่างแบบอินเทอร์แอกทีฟ
  • ติดตั้งใช้งานแอปพลิเคชันไปยัง Cloud Run โดยตรงจาก UI ของ Google AI Studio

สิ่งที่คุณจะได้เรียนรู้

  • วิธีใช้โหมดสร้างของ Google AI Studio เพื่อสร้างต้นแบบบริการแบบ Full Stack อย่างรวดเร็วโดยใช้ภาษาง่ายๆ
  • วิธีใช้ Google Maps Platform API เพื่อสร้างแอปพลิเคชันด้วยข้อมูลเชิงพื้นที่
  • วิธีกำหนดบริบทเชิงพื้นที่ในโลกแห่งความเป็นจริงให้กับพรอมต์ LLM เพื่อสร้างแบบทดสอบแบบไดนามิกและข้อมูลเชิงลึกในพื้นที่
  • วิธีติดตั้งใช้งานแอปพลิเคชัน AI Studio เป็นคอนเทนเนอร์แบบ Serverless ใน Cloud Run

นี่คือตัวอย่างของ pp

ตัวอย่างแอปพลิเคชันที่เสร็จสมบูรณ์

2. สร้างโปรเจ็กต์

ก่อนเปิดตัว AI Studio ให้ตรวจสอบสถานะบัญชี ข้อกำหนดเบื้องต้น และสิทธิ์เข้าถึง API

ข้อมูลบัญชี Google และระดับ

  1. หากยังไม่มีบัญชี Google ให้สร้างบัญชี Google
    • เคล็ดลับ: ใช้บัญชี Google ส่วนตัวสำหรับ Lab นี้หากเป็นไปได้ บัญชีกลุ่ม บัญชีบริษัท หรือบัญชีโรงเรียนอาจบังคับใช้นโยบายที่ปิดใช้ฟีเจอร์ทดลองหรือการผสานรวมระบบคลาวด์
  2. ตรวจสอบรายละเอียดการเรียกเก็บเงินสำหรับการติดตั้งใช้งาน
    • ระดับเริ่มต้นของ Google Cloud: อนุญาตให้เผยแพร่แอปพลิเคชันแบบฟูลสแต็กได้สูงสุด 2 รายการในภูมิภาคที่เลือกโดยไม่มีค่าใช้จ่าย โดยไม่ต้องสร้างบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud แบบเต็ม
    • การติดตั้งใช้งานมาตรฐาน: เชื่อมต่อกับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google แบบชำระเงินที่มีอยู่และขยายขีดจำกัดพื้นที่เก็บข้อมูล ทรัพยากร CPU และ API

คีย์สาธิตของ Google Maps Platform

Google AI Studio ผสานรวมกับ Google Maps Platform โดยตรงเพื่อเพิ่มประสิทธิภาพการสร้างต้นแบบ ซึ่งเป็นวิธีที่ราบรื่นในการทดสอบและสร้างด้วย Google Maps Platform API หลัก (เช่น Maps JavaScript API, Geocoding API, Places API และ Routes API) โดยตรงในโปรเจ็กต์ AI Studio จะสร้างคีย์สาธิตของ Google Maps Platform ให้คุณโดยอัตโนมัติ

สิทธิประโยชน์หลักของคีย์เดโม

  • ไม่ต้องใช้บัตรเครดิตหรือตั้งค่าการเรียกเก็บเงิน: คุณสามารถสร้างต้นแบบและประเมินได้ทันทีโดยไม่ต้องกำหนดค่าบัญชีสำหรับการเรียกเก็บเงินใน Google Cloud
  • โควต้าการสร้างต้นแบบที่เพียงพอ: มีคำขอฟรีสูงสุด 100 รายการต่อวันต่อ API สำหรับการทดสอบและการทำซ้ำ
  • การผสานรวมในตัวที่ราบรื่น: คุณไม่จำเป็นต้องไปที่พอร์ทัลภายนอกหรือคัดลอกและวางข้อมูลเข้าสู่ระบบ Google AI Studio จะตรวจหาโดยอัตโนมัติเมื่อแอปพลิเคชันของคุณต้องผสานรวมกับ Google Maps Platform และกำหนดค่าให้คุณ

3. สร้าง Application Shell ในโหมดบิลด์ของ AI Studio

คุณจะเริ่มต้นด้วยการสร้างโครงสร้างแอปพลิเคชันโดยใช้ Google AI Studio

  1. ไปที่แผงแอป Google AI Studio แล้วคลิกแอปใหม่ (หรือเลือกแท็บสร้าง)
  2. ในกล่องรับข้อมูลพรอมต์ ให้ป้อนคำอธิบายเริ่มต้นสำหรับแอปพลิเคชันเชิงพื้นที่ นอกจากนี้ คุณยังคลิกชิปการค้นพบ Google Maps Platform ในส่วนคำแนะนำพรอมต์ได้ด้วย
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.
  1. คลิกสร้างเพื่อเริ่มกระบวนการสร้างแอปพลิเคชัน

AI Studio จะเริ่มสร้างโค้ดของแอปพลิเคชัน หากได้รับข้อความแจ้งให้เลือกธีมการออกแบบ ให้เลือกสไตล์ที่ต้องการ

เปิดใช้ Google Maps Platform และจัดสรร Demo Key

Google Maps Platform มี Geocoding API ซึ่งจะแปลงคำค้นหาที่อยู่ซึ่งมนุษย์อ่านได้ (เช่น "ชิบูย่า" หรือ "บัวโนสไอเรส") เป็นพิกัดทางภูมิศาสตร์ (ละติจูดและลองจิจูด) เพื่อจัดกึ่งกลางแผนที่และแสดงเครื่องหมาย

เมื่อคุณส่งพรอมต์ที่มีเจตนาทางภูมิสารสนเทศ (เช่น การขอ Google Maps, เครื่องมือระบุตำแหน่งร้านค้า หรือการสำรวจในพื้นที่) AI Studio จะตรวจหาข้อกำหนดด้านภูมิสารสนเทศโดยอัตโนมัติและช่วยในการจัดสรรคีย์ที่สำคัญ

  1. ม่านเปิดใช้งานในบริบท: การ์ดในบรรทัดที่มีชื่อว่า "ตั้งค่า Google Maps Platform" จะปรากฏขึ้นในรอบการสนทนา
  2. ยอมรับข้อกำหนดและเปิดใช้:
    • อ่านและยอมรับข้อกำหนดในการให้บริการของโปรเจ็กต์เดโม Maps (และข้อกำหนดในการให้บริการเพิ่มเติมของ Starter Tier หากได้รับแจ้ง)
    • คลิกเปิดใช้ Google Maps
  3. การจัดสรรคีย์และการแทรกข้อมูลลับโดยอัตโนมัติ: AI Studio จะจัดสรรคีย์สาธิตของ Google Maps Platform โดยอัตโนมัติในโครงสร้างพื้นฐานของโปรเจ็กต์ที่โฮสต์โดย Google (GHP) และแทรกลงในข้อมูลลับของโปรเจ็กต์โดยตรงภายใต้ชื่อ GOOGLE_MAPS_PLATFORM_KEY
  4. การแสดงตัวอย่างแบบเรียลไทม์ทันที: แซนด์บ็อกซ์แสดงตัวอย่างแอปพลิเคชันจะรีเฟรชทันทีด้วย Google Maps แบบอินเทอร์แอกทีฟที่ใช้งานได้เต็มรูปแบบและเป็นแบบเรียลไทม์

การเปิดใช้การผสานรวม Google Maps Platform

ทดสอบแอปพลิเคชันในแซนด์บ็อกซ์เวอร์ชันแสดงตัวอย่างโดยป้อนสถานที่ตั้งใหม่หรือเลือกปุ่มสถานที่ตั้งที่กำหนดไว้ล่วงหน้า

4. เพิ่มข้อมูลเชิงลึกในพื้นที่ด้วย Gemini API

จากนั้นคุณจะผสานรวม Gemini API เพื่อสร้างข้อมูลเชิงลึกที่สมบูรณ์และแปลเป็นภาษาท้องถิ่นเกี่ยวกับสถานที่ต่างๆ ขณะที่ผู้ใช้สำรวจแผนที่

  1. ส่งพรอมต์ต่อไปนี้ไปยังผู้ช่วย AI ในหน้าต่างแชท
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.
  1. ตรวจสอบในแผงแสดงตัวอย่างว่าการเลือกหรือค้นหาสถานที่จะแสดงข้อเท็จจริงที่น่าสนใจแบบไดนามิกซึ่ง Gemini สร้างขึ้น

คุณจะเห็น AI Studio อัปเดตแอปพลิเคชัน ซึ่งจะทำให้ระบบเพิ่มส่วน "ข้อมูลเชิงลึกในพื้นที่" ที่ด้านล่างของหน้าจอ

เพิ่มส่วนข้อมูลเชิงลึกในพื้นที่ที่ด้านล่างของแผนที่

5. สร้างแบบทดสอบความรู้รอบตัวที่ AI สร้างขึ้น

ตอนนี้แอปพลิเคชันของคุณดึงพิกัดตำแหน่งและข้อมูลเชิงลึกที่แปลเป็นภาษาท้องถิ่นได้แล้ว ให้รวมความสามารถเหล่านี้เพื่อสร้างแบบทดสอบความรู้แบบอินเทอร์แอกทีฟตามจุดหมายที่เลือก

  1. ส่งพรอมต์การสร้างแบบทดสอบไปยัง Agent โดยทำดังนี้
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.
  1. เล่นแบบทดสอบที่สร้างขึ้นในหน้าต่างแสดงตัวอย่างเพื่อทดสอบการจัดการสถานะ การเลือกคำตอบ และการแสดงคะแนน

6. ผสานรวม Maps Grounding Lite

โดยค่าเริ่มต้น Gemini จะสร้างข้อเท็จจริงและแบบทดสอบโดยใช้ความรู้จากข้อมูลฝึกฝน ผสานรวม Maps Grounding Lite เพื่อปรับปรุงความแม่นยำและใช้ประโยชน์จากข้อมูลเชิงพื้นที่แบบเรียลไทม์ บริการนี้เชื่อมต่อ Gemini กับข้อมูลสดจาก Google Maps Platform โดยตรง

  1. ส่งพรอมต์ต่อไปนี้ใน 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.
  1. ทดสอบปุ่มเปิด/ปิดโหมดไฮเปอร์โลคัลในหน้าต่างแสดงตัวอย่างเพื่อยืนยันการสร้างแบบทดสอบที่อิงตามข้อมูล

LLM อาจสร้างข้อมูลเวลาทำการที่เฉพาะเจาะจง การเปิดตัวล่าสุด หรือรหัสสถานที่ที่แน่นอนขึ้นมาเอง Maps Grounding Lite จะอ้างอิงคำตอบจากเอนทิตีสถานที่จริงของ Google Maps และการระบุแหล่งที่มา ซึ่งจะช่วยปรับปรุงความถูกต้องของข้อเท็จจริงสำหรับคำถามความรู้ทั่วไปได้อย่างมาก

7. ทำให้ใช้งานได้กับ Cloud Run

เมื่อต้นแบบทำงานได้อย่างเต็มรูปแบบแล้ว ให้ติดตั้งใช้งานเป็นคอนเทนเนอร์แบบ Serverless สาธารณะใน Cloud Run โดยตรงจาก AI Studio

  1. ที่มุมขวาบนของ Google AI Studio ให้คลิกปุ่มเผยแพร่เพื่อเริ่มวิซาร์ดการติดตั้งใช้งานตำแหน่งปุ่มเผยแพร่ของ Google AI Studio
  2. คลิกเริ่มต้นใช้งานเพื่อกำหนดค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google
    • ตรวจสอบว่าเมนูแบบเลื่อนลงของโปรเจ็กต์ Google Cloud เป้าหมายตรงกับโปรเจ็กต์การติดตั้งใช้งานที่คุณต้องการ
    • AI Studio จะสร้างตัวระบุบริการที่ไม่ซ้ำกันสำหรับอินสแตนซ์ Cloud Run โดยอัตโนมัติ
  3. คลิกเผยแพร่แอป
  4. การสร้างคอนเทนเนอร์ การลงทะเบียน และการติดตั้งใช้งานบริการจะดำเนินการในเบื้องหลัง โดยปกติแล้วกระบวนการนี้จะใช้เวลา 2-4 นาที
  5. เมื่อการติดตั้งใช้งานเสร็จสิ้น ให้คัดลอก URL ของแอปที่สร้างขึ้น แล้วไปที่ลิงก์แอปพลิเคชันที่ใช้งานจริงในแท็บเบราว์เซอร์

8. ตรวจสอบแนวทางปฏิบัติแนะนำด้านความปลอดภัยและการผลิต

เมื่อเปลี่ยนแอปนี้จากสภาพแวดล้อมต้นแบบไปเป็นสภาพแวดล้อมฮาร์ดแวร์และซอฟต์แวร์ โปรดคำนึงถึงเสาหลักด้านความปลอดภัยต่อไปนี้

1. ข้อจำกัดของคีย์ API ของ Google Maps

อย่าปล่อยให้คีย์ Google Maps API ที่ใช้งานจริงไม่มีการจำกัด ใน คอนโซล Google Cloud ให้ทำดังนี้

  • ข้อจำกัดของ API: จำกัดคีย์เพื่อให้เรียกใช้ได้เฉพาะ API ที่เฉพาะเจาะจง (Maps JavaScript API, Geocoding API, Places API)
  • ข้อจำกัดของแอปพลิเคชัน: จำกัดคีย์โดยใช้ผู้อ้างอิง HTTP (เช่น https://yourgame.com/*) เพื่อป้องกันการใช้งานที่ไม่ได้รับอนุญาตในเว็บไซต์ของบุคคลที่สาม

2. การรักษาความปลอดภัยของคีย์ Gemini API

ห้ามเปิดเผยคีย์ Gemini API ใน JavaScript ฝั่งไคลเอ็นต์

  • สถาปัตยกรรมที่ใช้งานจริง: สร้างบริการแบ็กเอนด์ที่มีน้ำหนักเบา (เช่น Cloud Run หรือ Cloud Functions) เพื่อทำหน้าที่เป็นพร็อกซี ส่วนหน้าเรียกใช้ส่วนหลัง (/api/get-fun-facts) และส่วนหลังสื่อสารกับ Google AI Studio อย่างปลอดภัยโดยใช้ตัวแปรสภาพแวดล้อม (GEMINI_API_KEY)

9. ล้างข้อมูลทรัพยากร

หากต้องการหลีกเลี่ยงค่าใช้จ่ายในการเรียกเก็บเงินที่ไม่คาดคิดหรือล้างข้อมูลทรัพยากรในพื้นที่ทำงาน ให้ทำดังนี้

  1. ไปที่หน้าแอปใน Google AI Studio
  2. ค้นหาแอปพลิเคชันของคุณในตารางกริดหรือรายการ
  3. คลิกไอคอนถังขยะเพื่อลบสถานะแอปและยกเลิกการเผยแพร่บริการจาก Cloud Run
  4. หากคุณติดตั้งใช้งานโดยใช้โปรเจ็กต์ Standard และต้องการปิดทรัพยากรทั้งหมดโดยสมบูรณ์ ให้ไปที่การตั้งค่าโปรเจ็กต์ในคอนโซล Google Cloud แล้วลบโปรเจ็กต์พื้นฐาน

10. บทสรุป

ยินดีด้วย คุณได้ออกแบบ พัฒนา และติดตั้งใช้งานเว็บแอปพลิเคชันเชิงพื้นที่ที่ทำงานด้วยระบบ AI จาก Google AI Studio คุณใช้ Google Maps Platform API เพื่อสร้างเกมแบบอินเทอร์แอกทีฟที่ขับเคลื่อนด้วยข้อมูลในโลกแห่งความเป็นจริงได้สำเร็จแล้ว

ไปที่ลิงก์นี้เพื่อรับป้ายเส้นทางของครีเอเตอร์ที่เสร็จสมบูรณ์

หากต้องการเดินทางต่อ โปรดไปที่ goo.gle/builders เพื่อเข้าสู่แล็บถัดไป

ดูข้อมูลเพิ่มเติม