Создайте кнопку для импорта кода в Firebase Studio

Добавьте на свой веб-сайт кнопку «Открыть в Firebase Studio », чтобы предоставить пользователям удобный способ импортировать код с вашего сайта непосредственно в рабочее пространство Firebase Studio , что позволит им продолжать работу в агентной облачной среде разработки.

Эта функция предназначена для:

• Площадки для разработки кода, где ваши пользователи могут перейти от простого редактора к полноценной среде разработки.

• Инструменты для создания прототипов приложений, где ваш сайт генерирует код и визуальный прототип, а затем пользователь выполняет итерации в Firebase Studio .

Используйте Open in Firebase Studio SDK

Кнопка «Открыть в Firebase Studio » реализована с помощью Open in Firebase Studio SDK — библиотеки JavaScript, которая генерирует соответствующие ссылки для создания и заполнения нового рабочего пространства. Она предоставляет несколько вариантов импорта кода.

Методы импорта

Вы можете настроить кнопку для импорта кода следующими способами:

• Из репозитория Git или шаблона : создайте ссылку на репозиторий Git или шаблон Firebase Studio . Это отлично подходит для готовых проектов или готовых шаблонов. Подробнее об этих вариантах использования см. в статье Создание ярлыка для готового рабочего пространства в Firebase Studio .

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

Добавьте кнопку «Открыть в Firebase Studio» на свой сайт

Open in Firebase Studio SDK : предоставляет все необходимое, включая вспомогательные функции для генерации изображений кнопок, создания глубоких ссылок и отправки содержимого файлов для создания рабочих пространств Firebase Studio .

Чтобы добавить кнопку «Открыть в Firebase Studio » на свой веб-сайт:

1. Установите пакет в каталог вашего проекта:

   npm install @firebase-studio/open-sdk
   

2. Чтобы импортировать библиотеку, добавьте в код следующее:

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

Подробные инструкции, примеры кода и полный справочник API см. в официальной документации SDK .

Понимание среды рабочего пространства

Когда пользователь создаёт рабочее пространство на вашем сайте, Firebase Studio настраивает для него среду разработки. Уровень автоматизации зависит от типа проекта.

Оптимизированная среда

Для проектов React, Angular и простых HTML Firebase Studio предоставляет оптимизированную, предварительно настроенную среду при условии, что вызывающий код правильно задаёт свойство baselineEnvironment в объекте settings . Это означает, что когда пользователь открывает ссылку в Firebase Studio , Firebase Studio создаёт рабочее пространство и автоматически:

• Устанавливает все необходимые зависимости.
• Настраивает и запускает правильный сервер разработки.
• Настраивает среду с помощью правильных инструментов и расширений.

Это открывает среду, в которой ваши пользователи могут увидеть предварительный просмотр вашего приложения в реальном времени и напрямую взаимодействовать с кодом.

Общая среда

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

• Установите среды выполнения языка и зависимости.
• Настройте файл dev.nix .

Для таких проектов Firebase Studio создает ненастраиваемую среду, предоставляя пользователю полный контроль над процессом настройки.

Пользовательский опыт

Для обоих типов рабочих пространств после того, как пользователь нажимает кнопку «Открыть в Firebase Studio », ему предлагается указать имя своего рабочего пространства и просмотреть список файлов для импорта.

Когда пользователь нажимает кнопку «Импорт» , открывается новое рабочее пространство Firebase Studio . Оно содержит файлы вашего проекта, предварительный просмотр приложения и файл README с дальнейшими инструкциями.

Разработка кнопки «Открыть в Firebase Studio »

Вы можете создать свою кнопку с помощью Open in Firebase Studio SDK или использовать следующий инструмент для генерации HTML для кнопки Firebase Studio :

Если вы используете SDK, вы можете включить дополнительные свойства конфигурации для кнопки:

• label : Устанавливает текстовую метку, отображаемую на кнопке.
  • Допустимые значения: open , try , export или continue .
• color : определяет цветовую схему кнопки.
  • Допустимые значения: dark , light , blue или bright .
• size : определяет высоту кнопки в пикселях.
  • Допустимые значения: 20 или 32 .
• imageFormat : определяет формат файла созданного изображения.
  • Допустимые значения: svg или png .

Например:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Следующие шаги

• Установите Open in Firebase Studio SDK
• Узнайте, как настроить рабочее пространство Firebase Studio