Создайте свое первое веб-приложение с поддержкой базы данных с помощью Google AI Studio и Cloud SQL.

1. Прежде чем начать

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

В этом практическом занятии вы решите эту повседневную проблему, создав Running Club — удобное веб-приложение, где местные бегуны смогут просматривать любимые маршруты, планировать встречи на выходные, подтверждать участие одним щелчком мыши и общаться с другими бегунами.

Зачем этому приложению нужна база данных?

Для работы приложения для сообщества необходима надежная память — так называемая база данных . Когда бегун добавляет новый живописный маршрут, подтверждает участие в субботней утренней пробежке или оставляет комментарий с вопросом о парковке, эта информация не должна исчезнуть, когда он закрывает телефон или выключает компьютер. База данных надежно хранит и упорядочивает все маршруты, списки участников и сообщения членов клуба, чтобы каждый член клуба видел актуальную информацию при каждом открытии приложения.

Вы будете создавать это приложение, используя режим сборки Google AI Studio . Вам не нужно писать сложный код или самостоятельно настраивать техническую инфраструктуру — вы просто описываете то, что хотите, простым языком. Google AI Studio генерирует приложение, подключает реальную базу данных Cloud SQL for PostgreSQL для хранения ваших данных и публикует приложение в режиме реального времени на Cloud Run , чтобы ваше сообщество могло начать использовать его сразу же.

Что вы построите

Вы разработаете и запустите Running Club — веб-приложение для сообщества, которое включает в себя:

• Вход через Google : Быстрый и безопасный вход с использованием существующей учетной записи Google.
• Профили бегунов : Профили участников, демонстрирующие их предпочтения в беге и целевой темп.
• Библиотека маршрутов : подборка популярных маршрутов по окрестностям с указанием расстояния, сложности подъемов и мест встречи.
• Расписание предстоящих забегов : доска объявлений для организации предстоящих групповых забегов и привязки их к маршрутам.
• Простая система подтверждения участия : кнопка, позволяющая участникам одним щелчком мыши сказать «Я иду» и увидеть, кто еще придет.
• Обсуждение забегов : На каждой записи забега есть поле для комментариев, где можно согласовать детали, задать вопросы и поделиться новостями.

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

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

Что вам понадобится

• Современный веб-браузер, например, Google Chrome.
• Для входа в Google AI Studio потребуется стандартная учетная запись Google.

Условия участия и ограничения Cloud SQL Starter Edition

Основные преимущества начального уровня : Вы можете бесплатно создавать и развертывать до двух полнофункциональных приложений с помощью Cloud SQL без необходимости настройки платежного аккаунта.

Google AI Studio предлагает стартовый уровень Google Cloud Starter Tier , который помогает разработчикам экспериментировать с генеративными приложениями и управляемыми базами данных:

• Критерии отбора :
  • Доступно пользователям стандартной учетной записи Google.
  • К числу неподходящих учетных записей относятся пользователи с существующими или ранее использовавшимися платными учетными записями Google Cloud, а также учетные записи, связанные с Google Workspace, Google Workspace for Education или Google for Nonprofits.
  • Если ваша учетная запись не подходит для уровня Starter , вы все равно можете выполнить это задание, выбрав существующий проект Google Cloud с включенной оплатой. Узнайте, как подтвердить включение оплаты в проекте .
• Технические характеристики ресурсов :
  • Создает экземпляр Cloud SQL for PostgreSQL Developer Edition, работающий под управлением PostgreSQL 18.
  • Включает 0,5 виртуальных процессоров, 2 ГБ оперативной памяти и 1 ГБ хранилища. Этого должно быть достаточно для обработки сотен ежедневных посещений в течение нескольких месяцев или дольше, в зависимости от активности.
  • Поддерживается масштабирование до нуля , автоматическая приостановка вычислений при отсутствии активных подключений к базе данных для экономии квоты.
• Квота :
  • Включает бесплатную ежемесячную квоту в 50 вычислительных единиц и 10 ГБ хранилища.

2. Откройте Google AI Studio и создайте новое приложение.

Для начала откройте Google AI Studio в своем браузере. Это ваше рабочее пространство для создания и тестирования приложений, где вы можете просто описать, что вам нужно.

Шаг 1: Войдите в Google AI Studio

1. Откройте веб-браузер (например, Google Chrome) и перейдите по адресу aistudio.google.com .
2. Нажмите «Начать» и войдите в систему, используя свою стандартную учетную запись Google (например, учетную запись Gmail).

3. Если при первом посещении вам будет предложено ознакомиться с условиями предоставления услуг, просмотрите их и примите, чтобы продолжить.

Шаг 2: Запустите новое приложение

1. В нижней центральной панели нажмите «Начать создание» (или нажмите «+Новое приложение» на правой панели).

3. Начните с простого запроса и аутентификации Firebase.

Для начала вам не понадобятся сложные архитектурные схемы. Вы можете запустить свое первое приложение, настроить вход через Google и подключиться к базе данных всего одним предложением.

Введите начальный запрос

В окне запроса в режиме сборки AI Studio введите следующий запрос и нажмите Enter :

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Эта ссылка автоматически заполнит поле для ввода данных.

Разберитесь в особенностях своего рабочего пространства.

После отправки запроса Google AI Studio откроет полное рабочее пространство приложения. Обратите внимание на три основные области на экране:

• Чат/окно вопросов (внизу) : Здесь вы можете продолжить общение с ИИ на простом языке, чтобы добавить функции, скорректировать дизайн или задать вопросы.
• Область «Файлы и код» (слева) : Здесь отображаются файлы, которые ИИ создает в фоновом режиме. Вам не нужно писать или редактировать код самостоятельно, но эта панель позволяет наблюдать за тем, как ИИ создает компоненты вашего приложения.
• Окно предварительного просмотра в реальном времени (справа) : здесь отображается работающее приложение в режиме реального времени. Вы можете нажимать кнопки, вводить текст в текстовые поля и тестировать приложение непосредственно в этом окне сразу после его создания.
• Редактор кода (справа) : Здесь отображается фактический код, сгенерированный ИИ. При желании вы можете его редактировать, но это не обязательно.
• Развертывание и совместное использование (вверху справа) : Здесь вы можете развернуть свое приложение в интернете и поделиться им с другими.

Что делает Google AI Studio автоматически

Пока ИИ обрабатывает ваш запрос, вы можете наблюдать за тем, как он шаг за шагом создает ваше приложение:

1. Настраивает вход через Google : ИИ автоматически интегрирует вход через Google, чтобы ваши бегуны могли безопасно входить в систему с помощью своих учетных записей Google — нет необходимости управлять паролями пользователей или настройками безопасности.
2. Подключение к реальной базе данных : ИИ настраивает управляемую базу данных Cloud SQL для хранения данных вашего сообщества. При появлении запроса нажмите, чтобы включить базу данных для вашего проекта.

3. Организует ваши таблицы данных ( schema.ts ) : Представьте себе схему базы данных как набор упорядоченных электронных таблиц. Искусственный интеллект автоматически создает структуру хранения для вашего приложения:
   • Таблица users : хранит профили участников, имена, аватары и темп бега.
   • Таблица runs : хранит запланированные события с указанием названия, расстояния, целевого темпа, местоположения и даты.
   • Таблица comments : хранит сообщения и вопросы, оставленные бегунами под каждым забегом.
   Все эти изменения вносятся автоматически в область кода, и вы можете увидеть, как организованы эти категории, если переключитесь с вкладки «Предварительный просмотр» на вкладку «Код» . Но вам не нужно писать код самостоятельно, все делается автоматически. (Примечание: Вам никогда не нужно писать или редактировать этот код вручную — искусственный интеллект обновляет его за вас всякий раз, когда вы запрашиваете новые функции!)
4. Создает визуальный интерфейс : ИИ создает веб-страницы, которые вы видите на экране, включая заголовок, список предстоящих забегов, форму создания события и раздел комментариев.

Проверьте подлинность и выполните проводку.

После завершения генерации протестируйте новое приложение в панели предварительного просмотра :

1. В окне предварительного просмотра нажмите «Вход для участников» (или нажмите кнопку « Опубликовать предстоящий забег », которая запустит аутентификацию).
2. Аутентифицируйтесь с помощью своей учетной записи Google, используя диалоговое окно аутентификации Firebase.
3. После входа в систему ваше имя профиля Google и аватар отображаются в панели навигации, а ваши предпочтения по темпу автоматически регулируются.
4. В форме «Информация о предстоящем забеге» введите заголовок (например, Morning 5K Shakeout »).
5. Выберите дату и время, а также укажите место встречи (например, Central Park West Entrance ).
6. Нажмите «Опубликовать/Запустить» .
7. Убедитесь, что новая пробежка немедленно отображается в ленте предстоящих пробежек, с указанием вашего подтвержденного имени профиля и значка темпа в качестве организатора.
8. Оставьте короткое сообщение в разделе обсуждений забега (например, Bringing extra water bottles! ») и убедитесь, что оно появилось в ветке комментариев.

4. Создайте библиотеку маршрутов.

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

Попросите ИИ добавить библиотеку маршрутов.

В поле ввода сообщения чата введите следующий запрос и нажмите Enter :

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Как искусственный интеллект связывает маршруты с забегами в фоновом режиме

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

(Повторюсь, вам не нужно трогать этот код — искусственный интеллект сам обновит структуру базы данных!)

Протестируйте свою новую библиотеку маршрутов в режиме предварительного просмотра.

После того, как ИИ завершит обновление вашего приложения, опробуйте новую функцию построения маршрута в окне предварительного просмотра в реальном времени:

1. В навигации приложения нажмите вкладку «Библиотека маршрутов» . Если такой вкладки нет, проверьте нижнюю часть предварительного просмотра — там может быть предложено нажать кнопку «Сохранить» , чтобы обновить предварительный просмотр. Или, если это не поможет, попробуйте пообщаться с ИИ в окне чата и спросить, где находится ваша библиотека маршрутов.
2. Нажмите «Сохранить новый маршрут» (или «Добавить маршрут» ) и заполните примерные поля:
   • Название маршрута : Riverfront Trail Loop
   • Расстояние : 8.5 km
   • Уровень сложности : Moderate
   • Место начала : Waterfront Pier 4
3. Нажмите «Сохранить в библиотеку» .
4. Теперь запланируйте поездку по этому маршруту, нажав кнопку «Запланировать поездку» прямо на вашей новой маршрутной карте.
5. Обратите внимание, как информация о расстоянии, сложности и местоположении заполняется автоматически!
6. Нажмите кнопку «Опубликовать запуск» и убедитесь, что ваш новый групповой запуск отображается в главной ленте.

5. Внедрить систему подтверждения участия и приглашений для членов организации.

Приложения для сообществ процветают благодаря участию! Вы можете позволить бегунам видеть, кто собирается участвовать в предстоящем забеге, зарегистрироваться одним щелчком мыши и поделиться ссылкой-приглашением с друзьями.

Попросите ИИ добавить подтверждения участия и приглашения.

В поле ввода сообщения чата введите следующий запрос и нажмите Enter :

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

Как искусственный интеллект отслеживает участников за кулисами

Чтобы отслеживать, какие участники забега придут на каждый забег, ИИ автоматически создает в вашей базе данных таблицу rsvps ). Представьте это как цифровой регистрационный лист, который связывает имя участника с конкретным событием.

(Вам не нужно писать или редактировать этот код — искусственный интеллект автоматически управляет этой регистрационной формой в вашей базе данных!)

Протестируйте подтверждения участия и приглашения в режиме предварительного просмотра.

После того, как ИИ завершит обновление вашего приложения, протестируйте новые функции подтверждения участия в мероприятии в окне предварительного просмотра:

1. В окне предварительного просмотра найдите предстоящий забег в своей ленте новостей.
2. Нажмите кнопку «Присоединиться к забегу» (или «Подтвердить участие »).
3. Убедитесь, что ваше имя и аватар отображаются в разделе «Участники забега» , а счетчик участников увеличивается на 1.
4. Нажмите «Скопировать ссылку-приглашение» и убедитесь, что создана ссылка для общего доступа.

6. Сохранение тестовых данных и масштабируемость Cloud SQL до нуля.

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

На этом этапе вы проверите, что ваши данные надежно сохранены в базе данных Cloud SQL, и узнаете, как Google Cloud экономит энергию и средства, когда ваше приложение работает в фоновом режиме.

Проверьте обновление вашего приложения.

1. Нажмите кнопку «Обновить» в окне предварительного просмотра AI Studio (или обновите вкладку браузера).

2. Посмотрите на свое приложение в режиме предварительного просмотра: обратите внимание, что все, что вы создали — ваш профиль пользователя, сохраненные маршруты, запланированные пробежки, подтверждения участия и комментарии — осталось на том же месте, где вы его оставили!
3. Ваше приложение не просто временно сохраняло информацию на экране; оно надежно хранило ее в вашей базе данных Cloud SQL.

Как Cloud SQL экономит энергию и средства («Масштабирование до нуля»)

Что произойдет, если посреди ночи никто не будет пользоваться приложением вашего бегового клуба?

• Автоматический переход в спящий режим («Масштабирование до нуля») : Когда никто не посещает приложение и не регистрируется на пробежки, база данных автоматически приостанавливается для экономии ресурсов.
• Мгновенное включение : как только участник забега открывает приложение или переходит по ссылке-приглашению, база данных мгновенно активируется, и вся сохраненная информация будет готова к использованию.
• Нулевые затраты в режиме ожидания : поскольку приложение переходит в спящий режим, когда неактивно, оно не расходует вычислительные ресурсы, когда не работает.

Почему важна настоящая база данных : благодаря тому, что ИИ организует вашу информацию в связанные таблицы, ваше приложение остается аккуратным. Например, если запуск отменяется и удаляется, все комментарии, прикрепленные к этому запуску, автоматически удаляются, поэтому никаких непонятных оставшихся сообщений не остается.

7. Опубликовать и развернуть в Cloud Run

Теперь, когда ваше приложение для бегового клуба создано и протестировано в режиме предварительного просмотра, пришло время поделиться им со своим сообществом! Вам не нужно покупать веб-хостинг или настраивать серверы — вы можете запустить свое приложение в интернете одним щелчком мыши.

Опубликуйте свое приложение в интернете.

1. В правом верхнем углу Google AI Studio нажмите кнопку «Опубликовать» .
2. Появляется сводное окно, подтверждающее данные:
   • Хостинг : Размещено и развернуто на платформе Google Cloud Run.
   • Подключенные сервисы : вход через Google и ваша база данных Cloud SQL.
3. Нажмите «Опубликовать» , чтобы запустить приложение.

Откройте и поделитесь своим работающим приложением.

1. После завершения публикации Google AI Studio предоставит вам действующий веб-адрес вместе с QR-кодом.
2. Нажмите на ссылку, чтобы открыть работающее веб-приложение в новой вкладке браузера, или отсканируйте QR-код камерой телефона.
3. Попробуйте на своем телефоне : войдите в систему на телефоне, подтвердите участие в одном из запланированных ранее забегов на компьютере и наблюдайте за обновлением количества участников в режиме реального времени — благодаря вашей общей базе данных Cloud SQL!

8. (Бонус) Проверьте свои ресурсы в консоли Google Cloud.

Дополнительное исследование : Этот шаг совершенно необязателен! Ваше приложение уже запущено и работает. Если вы хотите узнать больше о Google Cloud и увидеть, что создал ИИ «под капотом», следуйте инструкциям, чтобы изучить свою работающую инфраструктуру.

Когда Google AI Studio создает и развертывает ваше приложение, оно не запирает его в закрытом «черном ящике» — оно создает для вас реальные, готовые к использованию сервисы Google Cloud. Представьте себе консоль Google Cloud как центр управления, где вы можете просматривать работающее приложение и базу данных.

Шаг 1: Откройте консоль Google Cloud.

1. Откройте консоль Google Cloud в новой вкладке браузера.
2. В верхней части экрана щелкните раскрывающееся меню «Проект» и выберите проект, созданный для вашего приложения AI Studio (его название обычно начинается с continual-run- ).

Шаг 2: Узнайте, где работает ваше веб-приложение (Cloud Run).

1. В верхней строке поиска введите Cloud Run и выберите его из результатов.
2. Нажмите на название вашего приложения (например, running-club ).
3. Здесь вы можете ознакомиться с движком, на котором размещен ваш веб-сайт:
   • Метрики : Полезные графики, показывающие, сколько людей посещают ваш веб-сайт.
   • Журналы активности : запись действий в реальном времени, показывающая, что происходит, когда посетители взаимодействуют с вашим приложением.

Шаг 3: Посмотрите, как работает ваша база данных (Cloud SQL)

1. В верхней строке поиска введите Cloud SQL и выберите его из результатов.
2. Щелкните по своему экземпляру базы данных PostgreSQL.
3. Здесь вы можете увидеть актуальную информацию о вашей базе данных, подтверждающую, что она активна и готова к хранению данных вашего бегового клуба.

9. Очистка ресурсов

Если вы создали это приложение в качестве тренировочного проекта, вы можете легко его удалить. Если же вы планируете продолжать использовать приложение «Беговой клуб» со своим сообществом, вы можете оставить его запущенным!

1. В Google AI Studio нажмите «Мои приложения» на левой боковой панели.
2. Найдите приложение «Беговой клуб» .
3. Нажмите «Удалить приложение» (или значок корзины). Это отключит вашу работающую веб-страницу и удалит тестовую базу данных за один шаг.

10. Поздравляем!

Вы создали, настроили и опубликовали свое первое веб-приложение с поддержкой базы данных, используя Google AI Studio и Cloud SQL!

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

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

Чего вы достигли

• Разработал приложение с использованием простого языка : создал полноценное приложение для бегового клуба с простыми подсказками.
• Включен вход через Google : настройте автоматический безопасный вход с помощью учетных записей Google.
• Подключена реальная база данных : маршруты, запланированные рейсы, подтверждения участия и обсуждения надежно хранятся в Cloud SQL.
• Добавлены функции диалогового взаимодействия : создана библиотека маршрутов и система отслеживания подтверждений участия, позволяющая взаимодействовать с ИИ в режиме реального времени.
• Опубликовано в интернете : разверните свое приложение в интернете одним щелчком мыши и протестируйте его на разных устройствах.
• Заглянули под капот : изучили, как Google Cloud размещает ваше работающее веб-приложение и базу данных.

Что дальше?

Вы можете продолжить общение с ИИ в Google AI Studio, чтобы расширить функционал своего приложения:

• Интерактивные карты : Предложите ИИ добавить предварительный просмотр карт и маршруты GPS.
• Подбор партнеров для бега : Предложите искусственному интеллекту партнеров для бега со схожими целями по темпу.
• Прогноз погоды : Предложите ИИ отобразить прогноз погоды на выходные дни на карточках предстоящих забегов.
• Обмен фотографиями : Предложите ИИ разрешить бегунам делиться фотографиями после групповой пробежки.

Дополнительная информация

• Документация Google AI Studio
• Развертывание приложений из Google AI Studio
• Обзор Cloud SQL для PostgreSQL
• Программирование с использованием ИИ и Cloud SQL
• Документация Cloud Run