Создавайте контент с помощью платформы Google Maps и искусственного интеллекта.

1. Введение

Обзор

С чего сегодня начинается разработка с использованием ИИ? С искры: идеи, достойной прототипирования. Режим сборки Google AI Studio превращает эту искру в реальность с помощью «виртуального кодирования». Используя модели Gemini, вы можете проектировать, тестировать и развертывать полнофункциональные веб-приложения исключительно посредством генерации диалогового кода.

В этом практическом занятии вы создадите Block Explorer — интерактивную геопространственную игру, которая сочетает в себе данные реальных карт с генеративным искусственным интеллектом. Вы будете использовать AI Studio для генерации приложения и его интеграции с платформой Google Maps и API Gemini . Затем вы узнаете, как развернуть готовое приложение непосредственно в Cloud Run , сделав его доступным для тестирования другими пользователями.

Что вы будете делать

• Используйте Google AI Studio для создания прототипа интерактивного веб-приложения, сочетающего геопространственное картографирование и викторину.
• Включите и автоматически активируйте демонстрационный ключ платформы Google Maps непосредственно в рабочей области AI Studio.
• Внедрить динамическое геокодирование адресов, поиск мест и викторины, генерируемые искусственным интеллектом, с использованием подсказок на естественном языке.
• Повысьте точность викторин, интегрировав Maps Grounding Lite .
• Тестируйте и дорабатывайте приложение в интерактивной тестовой среде.
• Разверните приложение в Cloud Run непосредственно из пользовательского интерфейса Google AI Studio.

Что вы узнаете

• Как использовать режим сборки Google AI Studio для быстрого создания прототипа полнофункционального сервиса с помощью обработки естественного языка.
• Как использовать API платформы Google Maps для создания приложений с геопространственными данными.
• Как связать вопросы для магистерских программ с реальным геопространственным контекстом для создания динамических викторин и получения информации о местных условиях.
• Как развернуть приложение AI Studio в виде бессерверного контейнера на платформе Cloud Run.

Вот предварительный просмотр страницы:

2. Настройте свой проект.

Перед запуском AI Studio проверьте статус своей учетной записи, необходимые условия и доступ к API.

Информация об учетной записи Google и уровне доступа

1. Если у вас еще нет учетной записи Google, создайте ее .
   • Совет : По возможности используйте для этой лабораторной работы личную учетную запись Google. Групповые, корпоративные или школьные учетные записи могут устанавливать правила, отключающие экспериментальные функции или интеграцию с облачными сервисами.
2. Проверьте платежные данные для развертывания:
   • Стартовый уровень Google Cloud : позволяет бесплатно опубликовать до двух полнофункциональных приложений в выбранном регионе без необходимости создания полноценного платежного аккаунта Google Cloud.
   • Стандартное развертывание : Подключается к существующему платному проекту Google Cloud и расширяет лимиты хранилища, ресурсы ЦП и API.

Демо-ключ платформы Google Maps

Для упрощения прототипирования Google AI Studio интегрирован с платформой Google Maps . Это обеспечивает простой способ тестирования и разработки с использованием основных API платформы Google Maps (таких как Maps JavaScript API, Geocoding API, Places API и Routes API) непосредственно в вашем проекте. AI Studio автоматически сгенерирует для вас демонстрационный ключ Google Maps Platform .

Основные преимущества демонстрационного ключа:

• Не требуется кредитная карта или настройка платежной системы : вы можете сразу же создавать прототипы и проводить их оценку без настройки платежного аккаунта Google Cloud.
• Щедрая квота на прототипирование : включает до 100 бесплатных запросов в день на каждый API для тестирования и итераций.
• Бесшовная встроенная интеграция : вам не нужно переходить на внешние порталы или копировать и вставлять учетные данные. Google AI Studio автоматически определяет, когда вашему приложению требуется интеграция с платформой Google Maps, и настраивает все необходимые параметры.

3. Создайте оболочку приложения в режиме сборки AI Studio.

Начнём с создания оболочки приложения с помощью Google AI Studio.

1. Перейдите в панель приложений Google AI Studio и нажмите «Создать приложение» (или выберите вкладку «Сборка» ).
2. В поле ввода введите первоначальное описание вашего геопространственного приложения. Вы также можете щелкнуть значок обнаружения платформы Google Maps в списке подсказок:

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. Нажмите «Создать» , чтобы начать процесс генерации приложения.

AI Studio начнет генерацию кода приложения. Если вам будет предложено выбрать тему оформления, выберите любой понравившийся вам стиль.

Включить платформу Google Maps и предоставить демо-ключ.

Платформа Google Maps предоставляет API геокодирования , который преобразует удобочитаемые адресные запросы (например, «Сибуя» или «Буэнос-Айрес») в географические координаты (широту и долготу) для центрирования карт и отображения маркеров.

Когда вы отправляете запрос с геопространственными данными (например, запрос на Google Maps, поиск магазинов или изучение местности), AI Studio автоматически определяет геопространственные требования и помогает с настройкой ключевых параметров:

1. Вводная карточка в контексте диалога : в ходе беседы появляется встроенная карточка с заголовком «Настройка платформы Google Maps» .
2. Примите условия и включите :
   • Ознакомьтесь и примите Условия предоставления услуг демонстрационного проекта карт (а также Дополнительные условия предоставления услуг для стартового уровня, если потребуется).
   • Нажмите «Включить Google Карты» .
3. Автоматическое предоставление ключей и внедрение секретов : AI Studio автоматически предоставляет демонстрационный ключ Google Maps Platform в инфраструктуре Google Hosted Project (GHP) и внедряет его непосредственно в секреты вашего проекта под именем GOOGLE_MAPS_PLATFORM_KEY .
4. Мгновенный предварительный просмотр в реальном времени : в тестовой среде приложения мгновенно обновляется интерактивная карта Google в режиме реального времени, обладающая всеми необходимыми функциями.

Вы также можете активировать Google Maps Platform через Настройки (значок шестеренки) > вкладка Интеграции > Google Maps Platform , или указать собственный ключ API в разделе Настройки > Секреты , если у вас уже есть активный проект Google Cloud. В качестве альтернативы, агент может запросить у вас ключ API непосредственно в окне чата.

Протестируйте приложение в тестовой среде, указав новое местоположение или выбрав одну из кнопок с предустановленными местоположениями!

4. Добавьте локальные аналитические данные с помощью API Gemini.

Далее вы интегрируете API Gemini для получения подробной локализованной информации о местах по мере того, как пользователи изучают карту.

1. Отправьте следующую подсказку ИИ-помощнику в окне чата:

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. Убедитесь в окне предварительного просмотра, что при выборе или поиске местоположения отображаются динамические интересные факты, сгенерированные Gemini.

Вы должны увидеть, как AI Studio обновит приложение, в результате чего в нижней части экрана появится раздел «Локальная аналитика».

5. Создайте викторину, сгенерированную искусственным интеллектом.

Теперь, когда ваше приложение получает координаты местоположения и локализованную информацию, объедините эти возможности для создания интерактивных викторин на основе выбранного места назначения.

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.

2. Пройдите сгенерированный тест в окне предварительного просмотра, чтобы проверить управление состоянием, выбор ответов и отображение результатов.

6. Интегрируйте Maps Grounding Lite

По умолчанию Gemini генерирует факты и викторины, используя знания из своих обучающих данных. Для повышения точности и использования пространственных данных в реальном времени интегрируйте Maps Grounding Lite . Этот сервис напрямую подключает Gemini к данным в реальном времени с платформы Google Maps.

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.

2. Проверьте работу переключателя гиперлокального режима в окне предварительного просмотра, чтобы убедиться в корректности генерации викторины.

Пользователи LLM могут галлюцинировать, угадывая конкретные часы работы, недавние открытия или точные идентификаторы мест. Maps Grounding Lite сопоставляет ответы с реальными объектами и атрибутами мест Google Maps, значительно повышая точность ответов на вопросы викторины.

7. Развертывание в облаке.

После того как ваш прототип будет полностью функционален, разверните его в качестве общедоступного бессерверного контейнера на Cloud Run непосредственно из AI Studio.

1. В правом верхнем углу Google AI Studio нажмите кнопку «Опубликовать» , чтобы запустить мастер развертывания.
2. Нажмите «Начать» , чтобы настроить свой проект в Google Cloud.
   • Убедитесь, что выпадающий список «Целевой проект Google Cloud» соответствует вашему предполагаемому проекту развертывания.
   • AI Studio автоматически сгенерирует уникальный идентификатор сервиса для экземпляра Cloud Run.
3. Нажмите «Опубликовать приложение» .
4. Сборка контейнера, регистрация и развертывание сервиса будут выполняться в фоновом режиме. Этот процесс обычно занимает 2–4 минуты.
5. После завершения развертывания скопируйте сгенерированный URL-адрес приложения и откройте ссылку на работающее приложение в вкладке браузера!

8. Проанализируйте передовые методы обеспечения безопасности и внедрения в производство.

При переходе от прототипа к производственной среде этого приложения следует помнить о следующих основных принципах безопасности:

1. Ограничения по ключу API Google Maps

Никогда не оставляйте рабочие ключи API Google Maps без ограничений. В консоли Google Cloud :

• Ограничения API: Ограничьте использование ключа таким образом, чтобы он мог вызывать только определенные API (API карт на JavaScript, API геокодирования, API мест).
• Ограничения приложения: Ограничьте использование ключа с помощью HTTP-рефереров (например, https://yourgame.com/* ), чтобы предотвратить несанкционированное использование на сторонних сайтах.

2. Защита ключа API Gemini

Ключ API Gemini ни в коем случае нельзя раскрывать в 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. Если вы использовали стандартный проект для развертывания и хотите полностью отключить все ресурсы, перейдите в настройки проекта в консоли Google Cloud и удалите соответствующий проект.

10. Заключение

Поздравляем! Вы разработали и развернули веб-приложение для работы с геопространственными данными на основе искусственного интеллекта, созданное в Google AI Studio. Вы успешно использовали API платформы Google Maps для создания интерактивной игры, работающей на основе реальных данных.

Перейдите по этой ссылке , чтобы получить значок « Завершенный строительный проект» !

Чтобы продолжить своё путешествие, перейдите по ссылке goo.gle/builders для прохождения следующего лабораторного занятия.

Узнать больше

• Документация платформы Google Maps
• Документация Cloud Run
• Создавайте приложения в Google AI Studio.