1. Обзор
В этой лабораторной работе вы попрактикуетесь в использовании агента App Prototyping в Firebase Studio для создания приложения, которое поможет вам изучить новый язык. Затем вы доработаете и улучшите приложение, при необходимости опубликовав его на Firebase App Hosting.
Чему вы научитесь
- Лучшие практики создания подсказок в Firebase Studio
- Дорабатывайте приложение, чтобы добавить функциональность и исправить ошибки.
- Опубликуйте приложение на Firebase App Hosting и поделитесь им с другими
- Отслеживайте ключевые показатели с помощью панели обзора приложения App Hosting.
Что вам понадобится
- Браузер по вашему выбору, например Google Chrome
- Учетная запись Google для создания и управления вашим проектом Firebase
2. Создайте свое приложение с помощью агента App Prototyping.
Агент прототипирования приложений использует 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. Добавьте свой собственный ключ Gemini API или нажмите кнопку «Автоматическая генерация» , чтобы сгенерировать ключ Gemini API. Если нажать кнопку «Автоматическая генерация» , Firebase Studio создаст проект Firebase и сгенерирует ключ Gemini API.
- Агент App Prototyping использует App Blueprint для создания первой версии вашего приложения. После завершения предварительный просмотр вашего приложения появится рядом с интерфейсом чата Gemini. Уделите немного времени тестированию своего приложения. Даже если оно выглядит не совсем так, как вы задумали, в следующем разделе описывается, как добавить новые функции и улучшить дизайн.
3. (Необязательно) Получите код
Если вы столкнулись с трудностями или хотите более подробно изучить пример приложения, используйте файлы примеров, представленные в нескольких контрольных точках по всему кодовой лаборатории.
- Загрузите файлы в папке .
- В Firebase Studio нажмите
Переключитесь в режим Код , чтобы открыть представление кода. - Перетащите загруженные файлы в панель проводника Firebase Studio. Разрешите файлам заменить любые существующие файлы.
- Нажмите «Переключиться на Prototyper» , чтобы продолжить выполнение кодовой лабораторной работы, используя пример версии приложения.
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. - Протестируйте приложение в окне предварительного просмотра. Внешний вид и функциональность приложения будут обновлены позже, поэтому пока сосредоточьтесь только на функциональности.
- Если ваше приложение работает не так, как ожидалось, продолжайте запрашивать у агента App Prototyping возможность внести изменения. Например:
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 не может исправить, иногда проще отредактировать файл вручную. Когда будете готовы, переключитесь в режим «Прототипировщик» , чтобы продолжить использование агента App Prototyping.
Цель 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 в представлении «Код».
Теперь, когда ваше приложение обладает всеми необходимыми функциями, пришло время поработать над стилем.
Изменить цветовую схему приложения
Вы можете указать конкретные цвета, которые хотите использовать, или довериться агенту App Prototyping. В интерфейсе чата вы также можете нажать кнопку Возможность прикрепить изображение, чтобы загрузить нужные вам цвета или стиль. Если вы предпочитаете использовать подсказку, попробуйте:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
Обновите текст, используемый в приложении.
Например, вместо «AI Chatbot Tutor» вы можете захотеть просто сказать «Chat»:
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, который был создан для вас, затем нажмите кнопку Далее .
- На этапе «Привязать учетную запись 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. Вы можете добавить в приложение гораздо больше функций, например, расширенный словарь, дополнительные языки, аудио, анимацию или выбрать уровень сложности. Продолжайте экспериментировать с приложением или создавайте что-то новое.