1. Обзор
В этом практическом занятии вы попрактикуетесь в использовании агента прототипирования приложений в Firebase Studio для создания приложения, предназначенного для изучения нового языка программирования. Затем вы доработаете и улучшите приложение, при желании опубликовав его на Firebase App Hosting.
Что вы узнаете
- Рекомендации по настройке подсказок в Firebase Studio
- Дорабатывайте приложение, добавляя новые функции и исправляя ошибки.
- Опубликуйте приложение в Firebase App Hosting и поделитесь им с другими.
- Отслеживайте ключевые показатели через панель обзора приложения в разделе «Хостинг приложений».
Что вам понадобится
- Любой браузер на ваш выбор, например, Google Chrome.
- Учетная запись Google для создания и управления вашим проектом Firebase.
2. Создайте свое приложение с помощью агента прототипирования приложений.
Агент прототипирования приложений использует Gemini в Firebase для сборки вашего приложения. Даже при использовании идентичных подсказок ваш результат может выглядеть или работать не совсем так, как показано в этом практическом задании. Если вы застрянете, мы предоставили набор файлов, которые вы можете добавить в свою рабочую область, чтобы продолжить выполнение задания с нескольких контрольных точек.
- Войдите в свой аккаунт Google и откройте Firebase Studio .
- В поле «Создайте прототип приложения с ИИ» введите описание приложения, которое вы хотите разработать. В рамках этого практического задания вы создадите приложение, которое поможет вам выучить новый язык с помощью рассказов, карточек и ИИ-репетитора. Введите подсказку, например:
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future. - Нажмите «Создать прототип с помощью ИИ» .
- Ознакомьтесь с предложенным планом приложения. Нажмите.
Настройте параметры для редактирования чертежа:- Измените название приложения на Speak Easy .
- Измените цветовую схему на следующую:
Primary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
Возможность прикрепления изображения во время выполнения задания или создания плана. Размер изображений не должен превышать 3 МБ. - Нажмите « Сохранить ».
- После завершения внесения ваших изменений в проект, нажмите « Создать прототип этого приложения» .
- Поскольку это приложение включает элементы искусственного интеллекта, агент запросит у вас ключ Gemini. Добавьте свой собственный ключ API Gemini или нажмите «Автоматическая генерация» , чтобы сгенерировать ключ API Gemini. Если вы нажмете «Автоматическая генерация» , Firebase Studio создаст проект Firebase и сгенерирует для вас ключ API Gemini.
- Агент прототипирования приложений использует шаблон приложения (App Blueprint) для создания первой версии вашего приложения. После завершения предварительный просмотр вашего приложения появится рядом с интерфейсом чата Gemini. Уделите немного времени тестированию вашего приложения. Даже если оно выглядит не совсем так, как вы себе представляли, в следующем разделе описано, как добавить новые функции и улучшить дизайн.
3. (Необязательно) Получите код
Если у вас возникнут трудности или вы захотите более подробно разобраться в примере приложения, воспользуйтесь примерами файлов, которые предоставляются в нескольких контрольных точках по всему коду.
- Загрузите файлы из папки .
- В Firebase Studio нажмите
Переключитесь на раздел «Код» , чтобы открыть окно просмотра кода. - Перетащите загруженные файлы в панель Проводника Firebase Studio. Разрешите этим файлам заменить все существующие файлы.
- Нажмите «Переключиться на прототип» , чтобы продолжить выполнение практического задания, используя примерную версию приложения.
4. Тестируйте, дорабатывайте и отлаживайте функциональность вашего приложения.
При предварительном просмотре приложения вы можете заметить ошибки или неожиданные функции. В тестовой версии приложения мы внесем следующие изменения и исправления:
- В генераторе историй на основе ИИ пользователи должны иметь возможность, кликая по словарным словам, получать их определение на английском языке.
- Карточки должны отображаться на французском языке, а при нажатии переключаться на английский.
- Пользователь должен иметь возможность перейти на страницу настроек и переключиться на изучение японского языка вместо французского.
Цель 1: Добавить словарные слова в генератор историй на основе ИИ.
Дополнительно: Чтобы использовать примерную версию приложения, скачайте и перетащите эти файлы в панель проводника Firebase Studio в режиме просмотра кода.
- В интерфейсе чата опишите функцию, которую вы хотите добавить:
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked. - Протестируйте приложение в окне предварительного просмотра. Внешний вид приложения вы обновите позже, поэтому пока сосредоточьтесь только на его функциональности.
- Если ваше приложение работает не так, как вы ожидали, продолжайте запрашивать у агента прототипирования приложения внесение изменений. Например:
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance. - Нажмите Переключитесь в режим «Код» , чтобы открыть окно «Код», где вы сможете увидеть все файлы вашего приложения и напрямую изменять свой код. Если Gemini не может исправить ошибку, иногда проще отредактировать файл вручную. Когда будете готовы, переключитесь в режим «Прототип», чтобы продолжить использование агента прототипирования приложений.
Цель 2: Добавить переводы к карточкам для запоминания.
Дополнительно: Чтобы использовать примерную версию приложения, скачайте и перетащите эти файлы в панель проводника Firebase Studio в режиме просмотра кода.
Выполните те же действия, что и выше: опишите функцию через чат, протестируйте её в окне предварительного просмотра, а затем используйте дополнительные подсказки или режим просмотра кода, чтобы добавить переводы в карточки. Попробуйте использовать, например, такую подсказку:
The flash cards should appear in the target language to start, then switch to
English when clicked.
Иногда агент прототипирования приложения не распознает ошибку. Более эффективным может быть описание того, что вы видите и что нужно исправить, например:
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
Цель 3: Добавить новый язык
Дополнительно: Чтобы использовать примерную версию приложения, скачайте и перетащите эти файлы в панель проводника Firebase Studio в режиме просмотра кода.
Попробуйте использовать такой запрос:
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. Дорабатывайте дизайн своего приложения.
Дополнительно: Чтобы использовать примерную версию приложения, скачайте и перетащите эти файлы в панель проводника Firebase Studio в режиме просмотра кода.
Теперь, когда ваше приложение обладает всем необходимым функционалом, пришло время поработать над его стилем.
Изменить цветовую схему приложения
Вы можете указать конкретные цвета, которые хотите использовать, или позволить специалисту по прототипированию приложений взять инициативу в свои руки. В интерфейсе чата вы также можете нажать на кнопку. Функция прикрепления позволяет загрузить изображение с желаемыми цветами или стилем. Если вы предпочитаете использовать подсказку, попробуйте:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
Обновите текст, используемый в приложении.
Например, вместо "Чат-бот-репетитор с ИИ" вы можете захотеть, чтобы он просто говорил "Чат":
Change the text "AI Chatbot Tutor" to "Chat".
Измените пользовательский интерфейс приложения, чтобы сделать его более интуитивно понятным.
Например, вместо того, чтобы пользователю приходилось нажимать кнопку для отправки текста, вы можете разрешить ему нажимать Return на клавиатуре:
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
Добавить возможность выбора пользователем светлого и темного режимов.
Многим пользователям может быть удобнее выбирать между светлой и темной темой оформления приложения. Подумайте, где было бы логичнее разместить этот переключатель:
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
Советы по подсказкам и отладке
- Получите помощь с подсказками: если вам сложно объяснить агенту по прототипированию приложений, чего вы хотите, попробуйте попросить Gemini для Google помочь уточнить подсказку. Узнайте больше об эффективных подсказках .
- Протестируйте на других устройствах: в режиме прототипирования нажмите
Поделитесь ссылкой для предварительного просмотра , чтобы протестировать ваше приложение на других устройствах. - Используйте встроенные инструменты: в режиме просмотра кода используйте встроенные функции отладки и создания отчетов Firebase Studio для проверки, отладки и аудита вашего приложения.
- Начните с простого: работайте над одной функцией за раз. Рассмотрите возможность начать с базового набора функций в вашем прототипе, а затем расширяйте их по мере того, как они будут работать должным образом.
- Описание ошибок: Если что-то не работает, опишите текущее поведение агенту по прототипированию приложения, а затем желаемое поведение.
- При необходимости выполните откат: если агент прототипирования приложения неправильно понимает подсказку или создает сложную проблему, нажмите кнопку « Восстановить» , чтобы вернуться к более ранней версии приложения и попробовать снова с другой подсказкой.
6. (Необязательно) Опубликуйте свое приложение
Дополнительно: Чтобы использовать примерную версию приложения, скачайте и перетащите эти файлы в панель проводника Firebase Studio в режиме просмотра кода.
После того, как вы протестируете приложение и останетесь им довольны, вы можете опубликовать его в интернете с помощью Firebase App Hosting .
- Нажмите «Опубликовать» , чтобы создать новый проект Firebase и начать настройку хостинга приложений. Появится панель «Опубликуйте ваше приложение» .
- На этапе создания проекта Firebase запишите название созданного для вас проекта Firebase, затем нажмите «Далее» .
- На этапе настройки учетной записи Link Cloud Billing выберите один из следующих вариантов:
- Выберите учетную запись Cloud Billing, которую вы хотите связать со своим проектом Firebase.
- Если у вас нет учетной записи Cloud Billing или вы хотите создать новую, нажмите «Создать учетную запись Cloud Billing» . Откроется окно Google Cloud, где вы сможете создать новую учетную запись Cloud Billing для самостоятельного использования . После создания учетной записи вернитесь в Firebase Studio и выберите учетную запись из списка «Связать Cloud Billing».
- Нажмите «Далее» . Firebase Studio свяжет платежный аккаунт с проектом, связанным с вашей рабочей областью, созданной либо при автоматической генерации ключа API Gemini, либо при нажатии кнопки «Опубликовать» . Затем App Hosting настроит полностью управляемую среду для вашего приложения в Google Cloud.
- Нажмите «Создать первый этап развертывания ». Firebase Studio запустит развертывание App Hosting. Этот процесс может занять до десяти минут. Чтобы узнать больше о том, что происходит за кулисами, см. раздел «Процесс сборки App Hosting» .
- После завершения развертывания отобразится обзор приложения с URL-адресом и аналитикой приложения, основанной на мониторинге приложений через App Hosting. Чтобы использовать собственный домен (например, example.com или app.example.com) вместо домена, сгенерированного Firebase, вы можете добавить собственный домен в текст Firebase.
Для получения дополнительной информации о хостинге приложений см. раздел «Понимание хостинга приложений и принципов его работы» .
7. (Необязательно) Отслеживайте работу своего приложения.
Панель обзора приложения App Hosting предоставляет ключевые показатели и информацию о вашем приложении, позволяя отслеживать производительность вашего веб-приложения с помощью встроенных инструментов мониторинга App Hosting. После запуска сайта вы можете получить доступ к обзору, нажав кнопку «Опубликовать» . С этой панели вы можете:
- Нажмите «Создать развертывание» , чтобы выпустить новую версию вашего приложения.
- Поделитесь ссылкой на свое приложение или откройте его напрямую в разделе «Перейти к своему приложению» .
- Просмотрите сводку производительности вашего приложения за последние 7 дней, включая общее количество запросов и статус последнего развертывания. Нажмите « Просмотреть подробности» , чтобы получить доступ к еще большей информации в текстовом документе Firebase .
- Просмотрите график количества запросов, полученных вашим приложением за последние 24 часа, с разбивкой по кодам состояния HTTP.
Если вы закроете панель обзора приложения, вы сможете открыть ее снова в любое время, нажав кнопку «Опубликовать» .
Подробнее об управлении и мониторинге развертывания приложений в App Hosting можно узнать в разделе «Управление развертываниями и релизами» .
8. Заключение
Поздравляем! Вы успешно создали приложение с помощью Firebase Studio. В приложение можно добавить гораздо больше функций, таких как расширенный словарь, новые языки, аудио, анимацию или выбор уровня сложности. Продолжайте экспериментировать с приложением или создайте что-нибудь новое.