Tworzenie z użyciem Google Maps Platform i AI

1. Wprowadzenie

Przegląd

Od czego zacząć tworzenie z wykorzystaniem AI? Zaczyna się od iskry: pomysłu wartego stworzenia prototypu. Tryb tworzenia w Google AI Studio przekształca ten pomysł w rzeczywistość za pomocą „vibe coding”. Korzystając z modeli Gemini, możesz projektować, testować i wdrażać pełne aplikacje internetowe, generując kod w całości za pomocą rozmowy.

W tym ćwiczeniu utworzysz Block Explorer, interaktywną grę geoprzestrzenną, która łączy dane mapowe ze świata rzeczywistego z generatywną AI. Za pomocą AI Studio wygenerujesz aplikację i zintegrujesz ją z Google Maps Platform i Gemini API. Następnie dowiesz się, jak wdrożyć gotową aplikację bezpośrednio w Cloud Run, aby inni mogli ją wypróbować.

Jakie zadania wykonasz

• Użyj Google AI Studio, aby stworzyć prototyp interaktywnej aplikacji internetowej do mapowania geoprzestrzennego i quizów.
• Włącz i automatycznie udostępnij klucz demonstracyjny Google Maps Platform bezpośrednio w obszarze roboczym AI Studio.
• Wdrażaj dynamiczne geokodowanie adresów, odkrywanie miejsc i generowane przez AI quizy z ciekawostkami przy użyciu promptów w języku naturalnym.
• Zwiększ dokładność quizu z ciekawostkami, integrując Maps Grounding Lite.
• Testuj i ulepszaj aplikację w piaskownicy interaktywnego podglądu.
• wdrażać aplikację w Cloud Run bezpośrednio z interfejsu Google AI Studio;

Czego się nauczysz

• Jak używać trybu tworzenia w Google AI Studio, aby szybko prototypować pełną usługę przy użyciu języka naturalnego.
• Jak używać interfejsów API Google Maps Platform do tworzenia aplikacji z danymi geoprzestrzennymi.
• Jak wykorzystać prompt LLM z kontekstem geoprzestrzennym ze świata rzeczywistego do generowania dynamicznych quizów i lokalnych statystyk.
• Jak wdrożyć aplikację AI Studio jako bezserwerowy kontener w Cloud Run.

Oto podgląd pp:

2. Konfigurowanie projektu

Zanim uruchomisz AI Studio, sprawdź stan konta, wymagania wstępne i dostęp do interfejsu API.

Informacje o koncie Google i poziomie

1. Jeśli nie masz jeszcze konta Google, utwórz je.
   • Wskazówka: jeśli to możliwe, użyj w tym module osobistego konta Google. W przypadku kont grupowych, firmowych lub szkolnych mogą być wymuszane zasady, które wyłączają funkcje eksperymentalne lub integracje z chmurą.
2. Sprawdź szczegóły płatności za wdrożenia:
   • Poziom startowy Google Cloud: umożliwia publikowanie maksymalnie 2 aplikacji pełnostosowych w wybranym regionie bezpłatnie i bez zakładania pełnego konta rozliczeniowego Google Cloud.
   • Wdrożenie standardowe: łączy się z istniejącym płatnym projektem w chmurze Google Cloud i zwiększa limity miejsca na dane, zasoby procesora i interfejsy API.

Klucz demonstracyjny Google Maps Platform

Aby usprawnić tworzenie prototypów, Google AI Studio jest natywnie zintegrowane z Google Maps Platform. Umożliwia to bezproblemowe testowanie i tworzenie aplikacji z użyciem podstawowych interfejsów API Google Maps Platform (takich jak interfejs Maps JavaScript API, Geocoding API, Places API i Routes API) bezpośrednio w projekcie. AI Studio automatycznie wygeneruje dla Ciebie klucz demonstracyjny Google Maps Platform.

Najważniejsze korzyści klucza demonstracyjnego:

• Nie jest wymagana karta kredytowa ani konfiguracja płatności: możesz od razu prototypować i oceniać bez konfigurowania konta rozliczeniowego Google Cloud.
• Duży limit prototypowania: obejmuje do 100 bezpłatnych żądań dziennie na interfejs API do testowania i iteracji.
• Płynna integracja: nie musisz przechodzić do zewnętrznych portali ani kopiować i wklejać danych logowania. Google AI Studio automatycznie wykrywa, kiedy aplikacja wymaga integracji z Google Maps Platform, i konfiguruje odpowiednie ustawienia.

3. Tworzenie szkieletu aplikacji w trybie tworzenia AI Studio

Zaczniesz od utworzenia powłoki aplikacji w Google AI Studio.

1. Otwórz panel Aplikacje w Google AI Studio i kliknij Nowa aplikacja (lub wybierz kartę Tworzenie).
2. W oknie do wprowadzania danych prompta wpisz początkowy opis aplikacji geoprzestrzennej. Możesz też kliknąć Google Maps Platform w sugestiach promptów:

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. Kliknij Build (Skompiluj), aby rozpocząć proces generowania aplikacji.

AI Studio rozpocznie generowanie kodu aplikacji. Jeśli pojawi się prośba o wybranie motywu, wybierz dowolny styl.

Włączanie Google Maps Platform i udostępnianie klucza demonstracyjnego

Google Maps Platform udostępnia interfejs Geocoding API, który przekształca zapytania dotyczące adresów czytelne dla człowieka (np. „Shibuya” lub „Buenos Aires”) na współrzędne geograficzne (szerokość i długość geograficzną), aby wyśrodkować mapy i wyświetlać znaczniki.

Gdy wyślesz prompta z intencją geoprzestrzenną (np. z prośbą o otwarcie Map Google, wyszukanie lokalizatora sklepów lub lokalne eksplorowanie), AI Studio automatycznie wykryje wymagania geoprzestrzenne i pomoże w udostępnianiu kluczy:

1. In-Context Activation Curtain: w oknie rozmowy pojawia się karta wbudowana zatytułowana „Skonfiguruj Google Maps Platform”.
2. Zaakceptuj warunki i włącz:
   • Przeczytaj i zaakceptuj Warunki korzystania z projektu demonstracyjnego Mapy (a w razie potrzeby dodatkowe warunki korzystania z usługi na poziomie startowym).
   • Kliknij Włącz Mapy Google.
3. Automatyczne udostępnianie kluczy i wstrzykiwanie obiektów tajnych: AI Studio automatycznie udostępnia klucz demonstracyjny Google Maps Platform w infrastrukturze projektu hostowanego przez Google (GHP) i wstrzykuje go bezpośrednio do obiektów tajnych projektu pod nazwą GOOGLE_MAPS_PLATFORM_KEY.
4. Natychmiastowy podgląd na żywo: piaskownica podglądu aplikacji natychmiast odświeża się, wyświetlając w pełni funkcjonalną interaktywną mapę Google.

Możesz też aktywnie włączyć Google Maps Platform, klikając Ustawienia (ikona koła zębatego) > karta Integracje > Google Maps Platform. Jeśli masz już aktywny projekt w chmurze Google, możesz też podać własny klucz interfejsu API, klikając Ustawienia > Klucze. Pracownik obsługi klienta może też poprosić Cię o klucz interfejsu API bezpośrednio w oknie czatu.

Przetestuj aplikację w piaskownicy podglądu, wpisując nową lokalizację lub wybierając jeden z przycisków gotowych lokalizacji.

4. Dodawanie informacji lokalnych za pomocą interfejsu Gemini API

Następnie zintegrujesz interfejs Gemini API, aby generować bogate, zlokalizowane informacje o miejscach, gdy użytkownicy będą przeglądać mapę.

1. W oknie czatu wyślij do asystenta AI ten prompt:

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. Sprawdź w panelu podglądu, czy po wybraniu lub wyszukaniu lokalizacji wyświetlają się dynamiczne ciekawostki wygenerowane przez Gemini.

AI Studio zaktualizuje aplikację, a na dole ekranu pojawi się sekcja „Lokalne statystyki”.

5. Tworzenie quizu wygenerowanego przez AI

Teraz, gdy aplikacja pobiera współrzędne lokalizacji i zlokalizowane statystyki, połącz te funkcje, aby generować interaktywne quizy oparte na wybranym miejscu docelowym.

1. Wyślij prompta do generowania testu do agenta:

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. Odtwórz wygenerowany quiz w oknie podglądu, aby przetestować zarządzanie stanem, wybór odpowiedzi i renderowanie wyników.

6. Integracja usługi Maps Grounding Lite

Domyślnie Gemini generuje fakty i quizy na podstawie wiedzy z danych treningowych. Aby zwiększyć dokładność i korzystać z danych przestrzennych w czasie rzeczywistym, zintegruj Maps Grounding Lite. Ta usługa łączy Gemini z danymi na żywo bezpośrednio z platformy Google Maps Platform.

1. W AI Studio wyślij ten prompt:

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. Przetestuj przełącznik trybu hiperlokalnego w oknie podglądu, aby sprawdzić generowanie quizu opartego na danych.

Duże modele językowe mogą halucynować konkretne godziny otwarcia, niedawne otwarcia lub dokładne identyfikatory miejsc. Grounding Lite w Mapach wiąże odpowiedzi z rzeczywistymi obiektami i informacjami o pochodzeniu danych z Miejsc Google, co znacznie zwiększa dokładność odpowiedzi na pytania z zakresu ciekawostek.

7. Wdrożenie w Cloud Run

Gdy prototyp będzie w pełni funkcjonalny, wdróż go jako publiczny kontener bezserwerowy w Cloud Run bezpośrednio z AI Studio.

1. W prawym górnym rogu Google AI Studio kliknij przycisk Opublikuj, aby uruchomić kreator wdrażania.
2. Aby skonfigurować projekt Google Cloud, kliknij Rozpocznij.
   • Sprawdź, czy menu Projekt Google Cloud zawiera projekt, w którym chcesz wdrożyć usługę.
   • AI Studio automatycznie wygeneruje unikalny identyfikator usługi dla instancji Cloud Run.
3. Kliknij Opublikuj aplikację.
4. Kompilacja kontenera, rejestracja i wdrożenie usługi będą wykonywane w tle. Zwykle trwa to 2–4 minuty.
5. Po zakończeniu wdrażania skopiuj wygenerowany adres URL aplikacji i otwórz link do aplikacji w karcie przeglądarki.

8. Sprawdzone metody dotyczące bezpieczeństwa i środowiska produkcyjnego

Podczas przenoszenia tej aplikacji z prototypu do środowiska produkcyjnego pamiętaj o tych filarach bezpieczeństwa:

1. Ograniczenia klucza interfejsu API Map Google

Nigdy nie pozostawiaj kluczy interfejsu API Map Google w wersji produkcyjnej bez ograniczeń. W konsoli Google Cloud:

• Ograniczenia interfejsu API: ogranicz klucz, aby można było go używać tylko do wywoływania określonych interfejsów API (Maps JavaScript API, Geocoding API, Places API).
• Ograniczenia aplikacji: ogranicz klucz za pomocą odsyłających adresów HTTP (np. https://yourgame.com/*), aby zapobiec nieautoryzowanemu użyciu w witrynach innych firm.

2. Zabezpieczanie klucza interfejsu Gemini API

Klucz interfejsu Gemini API nigdy nie powinien być udostępniany w JavaScript po stronie klienta.

• Architektura produkcyjna: utwórz lekką usługę backendu (np. Cloud Run lub Cloud Functions), która będzie pełnić funkcję serwera proxy. Frontend wywołuje backend (/api/get-fun-facts), a backend bezpiecznie komunikuje się z Google AI Studio za pomocą zmiennej środowiskowej (GEMINI_API_KEY).

9. Zwalnianie miejsca

Aby uniknąć nieprzewidzianych opłat lub zwolnić miejsce w zasobach obszaru roboczego:

1. W Google AI Studio otwórz stronę Aplikacje.
2. Znajdź aplikację w siatce lub na liście.
3. Kliknij ikonę kosza, aby usunąć stan aplikacji i cofnąć publikację usługi w Cloud Run.
4. Jeśli wdrożono usługę za pomocą standardowego projektu i chcesz całkowicie wyłączyć wszystkie zasoby, otwórz ustawienia projektu w konsoli Google Cloud i usuń projekt bazowy.

10. Podsumowanie

Gratulacje! Zaprojektowano, utworzono i wdrożono aplikację internetową opartą na AI do obsługi danych geoprzestrzennych w Google AI Studio. Udało Ci się użyć interfejsów API Google Maps Platform do stworzenia interaktywnej gry opartej na danych z rzeczywistego świata.

Kliknij ten link, aby odebrać odznakę Ukończono ścieżkę dla twórców.

Aby kontynuować, przejdź do goo.gle/builders i wykonaj kolejne ćwiczenie.

Więcej informacji

• Dokumentacja Google Maps Platform
• Dokumentacja Cloud Run
• Tworzenie aplikacji w Google AI Studio