Запустите свой сайт-портфолио с помощью ИИ.

1. Введение

Обзор

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

В этом практическом занятии вы создадите персональный веб-сайт-портфолио. Агент AI Studio напишет код для фронтенда. После того, как приложение будет доработано, вы развернете его прямо в Cloud Run одним щелчком мыши.

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

• Предложите Google AI Studio создать прототип веб-сайта-портфолио для личного пользования.
• Протестируйте приложение в интерактивной тестовой среде предварительного просмотра.
• Разверните приложение в Cloud Run непосредственно из пользовательского интерфейса Google AI Studio.

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

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

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

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

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

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

3. Создайте веб-сайт-портфолио в режиме сборки AI Studio.

Создайте оболочку приложения и поручите помощнику по программированию на основе ИИ построить макет интерфейса.

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

   Build a professional personal portfolio website. The site should
   have a modern, responsive design and sections for my biography,
   projects showcase, skills, and links to my professional profiles
   (e.g., GitHub, LinkedIn).
   

3. Нажмите «Создать» , чтобы начать процесс генерации приложения.

4. Тестирование и итерации.

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

1. Откройте панель предварительного просмотра в Google AI Studio.
2. В режиме предварительного просмотра поработайте с любыми кнопками навигации, ссылками или элементами интерфейса, чтобы проверить визуальное восприятие.
   • Примечание по исправлению ошибок : Во время генерации или тестирования вы можете иногда сталкиваться с проблемами во время выполнения или ошибками компиляции. В этом случае AI Studio отобразит кнопку «Исправить» в чате, позволяя вам попросить агента автоматически диагностировать и исправить проблему.
   
3. Если вы хотите изменить стиль или поведение, дайте указание оператору через окно чата. Например:
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Include a new section to showcase my recent presentations and talks."
4. Дождитесь обновления кода агентом и проверьте предварительный просмотр в браузере, чтобы увидеть обновления.

5. Развертывание в Cloud Run

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

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

6. (НЕОБЯЗАТЕЛЬНО) Добавьте собственный домен

По умолчанию Cloud Run размещает ваш сервис на поддомене run.app управляемом Google. Если вы хотите использовать личный домен (например, yourname.com или portfolio.yourname.com ), вы можете привязать свой сервис к собственному домену.

Шаг 1: Добавьте сопоставление доменов в Cloud Run.

1. Перейдите на страницу «Сопоставление доменов Cloud Run» в консоли Google Cloud.
2. Нажмите «Добавить сопоставление» .
3. Выберите из выпадающего списка службу Cloud Run, которую хотите сопоставить.
4. Введите собственное доменное имя (например, yourname.com или portfolio.yourname.com ).
5. Нажмите «Далее» или «Продолжить» . Cloud Run отобразит DNS-записи (например, записи A / AAAA или CNAME ), которые необходимо создать у вашего регистратора домена.

Шаг 2: Настройте своего DNS-регистратора.

1. Войдите в панель управления вашего регистратора доменов (например, Squarespace, GoDaddy или Namecheap).
2. Откройте страницу управления DNS или страницу настройки параметров DNS для вашего домена.
3. Создайте DNS-записи, соответствующие значениям, указанным в мастере сопоставления Cloud Run:
   • Для сопоставления доменов верхнего уровня (например, yourname.com ) добавьте указанные записи A и AAAA .
   • Для сопоставления поддоменов (например, portfolio.yourname.com ) добавьте указанную запись CNAME .
4. Сохраните изменения в конфигурации DNS.

Шаг 3: Дождитесь завершения процесса предоставления SSL-сертификата.

После того, как изменения DNS вступят в силу:

1. Google Cloud автоматически предоставит управляемый SSL/TLS-сертификат для вашего защищенного соединения.
2. Этот процесс обычно завершается примерно за 15 минут, но может занять до 24 часов в зависимости от распространения DNS-запросов.
3. После завершения процесса ваш пользовательский домен будет безопасно перенаправляться на ваш сайт-портфолио.

Примечание: сопоставление доменов Cloud Run находится в режиме предварительного просмотра и доступно только в определенных регионах. Если ваша служба Cloud Run находится в регионе, который не поддерживает сопоставление доменов, вы можете сопоставить свой домен, используя глобальный внешний балансировщик нагрузки приложений или хостинг Firebase .

7. Уборка

Чтобы избежать непредвиденных расходов или упорядочить ресурсы вашего рабочего пространства:

1. В Google AI Studio перейдите на страницу «Приложения» .
2. Найдите свою заявку в сетке или списке.
3. Нажмите на значок корзины, чтобы удалить состояние приложения и отменить публикацию сервиса в Cloud Run.
4. Если вы использовали стандартный проект для развертывания и хотите полностью отключить все ресурсы, перейдите в настройки проекта в консоли Google Cloud и удалите соответствующий проект.

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

Поздравляем! Вы разработали, создали и развернули веб-сайт-портфолио непосредственно из Google AI Studio.

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

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

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

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