פיתוח באמצעות Google Maps Platform ו-AI

1. מבוא

סקירה כללית

איפה מתחילים לבנות באמצעות AI היום? הכול מתחיל בניצוץ: רעיון שכדאי ליצור לו אב טיפוס. מצב הבנייה ב-Google AI Studio מאפשר להפוך את הרעיון למציאות באמצעות "תכנות בשיטת Vibe coding". בעזרת מודלים של Gemini, אתם יכולים לעצב, לבדוק ולפרוס אפליקציות אינטרנט full-stack באמצעות יצירת קוד בשיחה.

ב-Codelab הזה תיצרו את Block Explorer, משחק אינטראקטיבי של מיפוי גיאוגרפי שמשלב נתוני מיפוי מהעולם האמיתי עם 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 ישירות מממשק המשתמש של Google AI Studio.

מה תלמדו

  • איך משתמשים במצב Build ב-Google AI Studio כדי ליצור אב-טיפוס במהירות לשירות Full-Stack באמצעות שפה טבעית.
  • איך משתמשים בממשקי API של Google Maps Platform כדי לפתח אפליקציות עם נתונים גיאו-מרחביים.
  • איך מעגנים פרומפטים של LLM באמצעות הקשר גיאו-מרחבי מהעולם האמיתי כדי ליצור חידונים דינמיים ותובנות מקומיות.
  • איך פורסים את האפליקציה שלכם ב-AI Studio כקונטיינר ללא שרת ב-Cloud Run.

הנה תצוגה מקדימה של דף המדיניות:

דוגמה לאפליקציה המוגמרת

2. הגדרת הפרויקט

לפני שמפעילים את AI Studio, צריך לבדוק את סטטוס החשבון, את הדרישות המוקדמות ואת הגישה ל-API.

פרטי חשבון Google ומידע על השכבה

  1. אם עדיין אין לכם חשבון Google, צרו חשבון Google.
    • טיפ: אם אפשר, כדאי להשתמש בחשבון Google אישי למעבדה הזו. יכול להיות שבחשבונות קבוצתיים, ארגוניים או בית ספריים יש מדיניות שמשביתה תכונות ניסיוניות או שילובים עם Cloud.
  2. בודקים את פרטי החיוב של הפריסות:
    • רמת ההתחלה של Google Cloud: מאפשרת לפרסם עד שתי אפליקציות full-stack באזור נבחר ללא עלות, בלי להגדיר חשבון חיוב מלא ב-Google Cloud.
    • פריסה רגילה: מתחברת לפרויקט בענן קיים בתשלום ב-Google Cloud ומרחיבה את מגבלות האחסון, משאבי ה-CPU וממשקי ה-API.

Google Maps Platform Demo Key

כדי לייעל את תהליך יצירת אב הטיפוס, Google AI Studio משתלב באופן מובנה עם Google Maps Platform. כך אפשר לבדוק ולפתח באמצעות ממשקי ה-API העיקריים של Google Maps Platform (כמו Maps JavaScript API,‏ Geocoding API,‏ Places API ו-Routes API) ישירות בפרויקט שלכם. ‫AI Studio ייצור באופן אוטומטי Google Maps Platform Demo Key בשבילכם.

היתרונות העיקריים של מפתח ההדגמה:

  • אין צורך בכרטיס אשראי או בהגדרת חיוב: אתם יכולים ליצור אב טיפוס ולהעריך אותו באופן מיידי בלי להגדיר חשבון לחיוב ב-Google Cloud.
  • מכסה נדיבה ליצירת אב טיפוס: כוללת עד 100 בקשות בחינם ליום לכל API לצורך בדיקה ואיטרציה.
  • שילוב מובנה וחלק: אתם לא צריכים לעבור לפורטלים חיצוניים או להעתיק ולהדביק פרטי כניסה. ‫Google AI Studio מזהה באופן אוטומטי מתי האפליקציה שלכם צריכה להשתלב עם Google Maps Platform, ומגדיר את הדברים בשבילכם.

3. יצירת מעטפת האפליקציה במצב הבנייה של AI Studio

בתור התחלה, ניצור את מעטפת האפליקציה באמצעות Google AI Studio.

  1. עוברים אל החלונית Apps (אפליקציות) ב-Google AI Studio ולוחצים על New App (אפליקציה חדשה) או בוחרים בכרטיסייה Build (יצירה).
  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. לוחצים על Build (יצירה) כדי להתחיל בתהליך יצירת האפליקציה.

‫AI Studio יתחיל ליצור את קוד האפליקציה. אם מתבקשים לבחור עיצוב, בוחרים את הסגנון המועדף.

הפעלת Google Maps Platform והקצאת Maps Demo Key

פלטפורמת Google Maps מספקת את Geocoding API, שממיר שאילתות של כתובות שניתנות לקריאה על ידי בני אדם (כמו 'שיבויה' או 'בואנוס איירס') לקואורדינטות גאוגרפיות (קו רוחב וקו אורך) כדי למרכז מפות ולהציג סמנים.

כששולחים פרומפט עם כוונה גיאוספציאלית (למשל בקשה למפות Google, לאיתור חנויות או לחיפוש מקומי), AI Studio מזהה באופן אוטומטי את הדרישה הגיאוספציאלית ועוזר לספק את המפתח:

  1. מסך הפעלה בהקשר: כרטיס מוטבע עם הכותרת "הגדרת Google Maps Platform" מופיע בתור לשיחה.
  2. אישור התנאים והפעלת התכונה:
    • קוראים את התנאים וההגבלות של פרויקט ההדגמה של מפות (ואם מתבקשים, גם את התנאים וההגבלות הנוספים של תוכנית למתחילים) ומאשרים אותם.
    • לוחצים על הפעלת מפות Google.
  3. הקצאה אוטומטית של מפתחות והחדרה של סודות: AI Studio מקצה באופן אוטומטי מפתח הדגמה של Google Maps Platform בתשתית של פרויקט באירוח Google ‏ (GHP) ומחדיר אותו ישירות לסודות של הפרויקט בשם GOOGLE_MAPS_PLATFORM_KEY.
  4. תצוגה מקדימה מיידית של Live View: ארגז החול של תצוגת האפליקציה מתרענן באופן מיידי עם מפת Google אינטראקטיבית, פעילה לחלוטין.

הפעלת השילוב עם 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. שולחים לסוכן את הפרומפט ליצירת הבוחן:
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 ולייחוסים, וכך משפרת באופן משמעותי את הדיוק העובדתי של שאלות הטריוויה.

7. פריסה ב-Cloud Run

אחרי שהאב-טיפוס שלכם יהיה פונקציונלי לחלוטין, תוכלו לפרוס אותו כקונטיינר ציבורי ללא שרת ב-Cloud Run ישירות מ-AI Studio.

  1. בפינה השמאלית העליונה של Google AI Studio, לוחצים על הלחצן פרסום כדי להפעיל את אשף הפריסה.המיקום של לחצן הפרסום ב-Google AI Studio
  2. לוחצים על Get Started (תחילת העבודה) כדי להגדיר את הפרויקט ב-Google Cloud.
    • מוודאים שהתפריט הנפתח של פרויקט Google Cloud תואם לפרויקט הפריסה הרצוי.
    • ‫AI Studio ייצור באופן אוטומטי מזהה שירות ייחודי למופע Cloud Run.
  3. לוחצים על פרסום האפליקציה.
  4. הקונטיינר ייבנה, יירשם ויפרוס את השירות ברקע. בדרך כלל התהליך הזה מסתיים תוך 2-4 דקות.
  5. כשהפריסה מסתיימת, מעתיקים את כתובת ה-URL של האפליקציה שנוצרה ועוברים לקישור של האפליקציה הפעילה בכרטיסיית דפדפן.

8. עיון בשיטות המומלצות לאבטחה ולייצור

כשמעבירים את האפליקציה הזו מאב טיפוס לסביבת ייצור, חשוב לזכור את עקרונות האבטחה הבאים:

1. הגבלות על מפתח Google Maps API

לעולם אל תשאירו מפתחות API של מפות Google בסביבת ייצור ללא הגבלות. ב-מסוף 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) שיפעל כשרת proxy. הקריאות שלכם לחלק הקדמי (frontend) מגיעות לחלק האחורי (backend) (/api/get-fun-facts), והחלק האחורי מתקשר עם Google AI Studio בצורה בטוחה באמצעות משתנה סביבתי (GEMINI_API_KEY).

9. פינוי משאבים

כדי להימנע מחיובים בלתי צפויים או כדי לפנות משאבים ב-Workspace:

  1. ב-Google AI Studio, עוברים אל דף האפליקציות.
  2. מחפשים את האפליקציה ברשת או ברשימה.
  3. כדי למחוק את מצב האפליקציה ולבטל את פרסום השירות מ-Cloud Run, לוחצים על סמל האשפה.
  4. אם פרסתם באמצעות פרויקט רגיל ואתם רוצים להשבית את כל המשאבים באופן סופי, אתם יכולים לעבור אל הגדרות הפרויקט במסוף Google Cloud ולמחוק את הפרויקט הבסיסי.

10. סיכום

מעולה! תכננתם, פיתחתם והטמעתם אפליקציית אינטרנט גיאו-מרחבית מבוססת-AI מ-Google AI Studio. השתמשתם בהצלחה בממשקי API של Google Maps Platform כדי לבנות משחק אינטראקטיבי שמבוסס על נתונים מהעולם האמיתי.

כדי לקבל את התג Completed Builder Journey, לוחצים על הקישור הזה.

כדי להמשיך במסע, כדאי לעבור אל goo.gle/builders ולנסות את ה-Lab הבא.

מידע נוסף