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

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

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

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

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

Используйте SDK «Открыть в Firebase Studio

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

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

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

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

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

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

SDK Open in Firebase Studio предоставляет все необходимое, включая вспомогательные функции для генерации изображений кнопок, создания прямых ссылок и отправки содержимого файлов для создания рабочих областей 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 диалоговое окно «Импорт рабочей области»

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

Создайте кнопку «Открыть в Firebase Studio ».

Вы можете создать свою кнопку, используя SDK «Открыть в Firebase Studio , или воспользоваться следующим инструментом для генерации 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'
});

Пример кнопки «Экспорт в Firebase Studio»

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