Crea un botón para importar código a Firebase Studio

Agrega un botón “Abrir en Firebase Studio” a tu sitio web para brindar a los usuarios una forma sencilla de importar código de tu sitio directamente a un espacio de trabajo de Firebase Studio, lo que les permitirá seguir trabajando en un entorno de desarrollo basado en la nube y controlado por agentes.

Esta función está diseñada para lo siguiente:

  • Zonas de pruebas de código, en las que los usuarios pueden pasar de un editor básico a un entorno de desarrollo completo

  • Herramientas de prototipado de apps, en las que tu sitio genera el código y el prototipo visual, y el usuario luego itera sobre él en Firebase Studio.

Usa el SDK de Open in Firebase Studio

El botón "Abrir en Firebase Studio" funciona con el SDK de Abrir en Firebase Studio, una biblioteca de JavaScript que genera los vínculos adecuados para crear y completar un nuevo espacio de trabajo. Proporciona varias opciones para importar el código.

Métodos de importación

Puedes configurar el botón para importar código con los siguientes métodos:

  • Desde un repositorio o una plantilla de Git: Vínculo a un repositorio o una plantilla de Git Firebase Studio Esto es ideal para proyectos completos o plantillas predefinidas. Para obtener más información sobre estos casos de uso, consulta Crea un acceso directo a un espacio de trabajo predefinido en Firebase Studio.

  • Desde un conjunto de archivos de proyecto: Crea dinámicamente un espacio de trabajo a partir de un conjunto de archivos y fragmentos de código directamente desde tu aplicación web. Esta es la opción más potente para los espacios de trabajo de código y los prototipos de apps, ya que exporta el trabajo actual del usuario, incluso si no se guardó en otro lugar.

Agrega el botón "Abrir en Firebase Studio" a tu sitio

El SDK de Open in Firebase Studio: Proporciona todo lo que necesitas, incluidas funciones auxiliares para generar imágenes de botones, crear vínculos directos y enviar contenido de archivos para crear espacios de trabajo de Firebase Studio.

Para agregar el botón "Abrir en Firebase Studio" a tu sitio web, sigue estos pasos:

  1. Instala el paquete en el directorio de tu proyecto:

    npm install @firebase-studio/open-sdk

  2. Agrega lo siguiente a tu código para importar la biblioteca:

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

Para obtener instrucciones detalladas, ejemplos de código y la referencia completa de la API, consulta la documentación oficial del SDK.

Información sobre los entornos de espacio de trabajo

Cuando un usuario crea un espacio de trabajo desde tu sitio, Firebase Studio configura el entorno de desarrollo para él. El nivel de automatización depende del tipo de proyecto.

Entorno optimizado

En el caso de los proyectos de React, Angular y HTML simple, Firebase Studio proporciona un entorno optimizado y preconfigurado, siempre que el llamador establezca correctamente la propiedad baselineEnvironment dentro del objeto settings. Esto significa que, cuando un usuario abre el vínculo en Firebase Studio, Firebase Studio crea el espacio de trabajo y, automáticamente, realiza las siguientes acciones:

  • Instala todas las dependencias necesarias.
  • Configura e inicia el servidor de desarrollo correcto.
  • Configura el entorno con las herramientas y extensiones correctas.

Se abrirá un entorno en el que los usuarios podrán ver una vista previa en vivo de tu aplicación y, además, interactuar directamente con el código.

Entorno genérico

Para todos los demás tipos de proyectos, Firebase Studio usa un importador genérico. Sube los archivos al espacio de trabajo, pero el usuario debe realizar la configuración inicial de forma manual. Es posible que deban hacer lo siguiente:

  • Instala los tiempos de ejecución y las dependencias de los lenguajes.
  • Configura el archivo dev.nix.

En estos proyectos, Firebase Studio crea un entorno no personalizado, lo que le otorga al usuario control total sobre el proceso de configuración.

Experiencia del usuario

En ambos tipos de espacios de trabajo, después de que un usuario hace clic en el botón "Abrir en Firebase Studio", se le solicita que le asigne un nombre a su espacio de trabajo y que revise la lista de archivos para importar.

Abrir el diálogo Import Workspace en Firebase Studio

Cuando el usuario hace clic en Importar, se abre un nuevo espacio de trabajo de Firebase Studio. Contiene los archivos de tu proyecto, una vista previa de la app y un archivo README con los próximos pasos.

Diseña un botón "Abrir en Firebase Studio"

Puedes diseñar tu botón con el SDK de Abrir en Firebase Studio o usar la siguiente herramienta para generar el código HTML de un botón Firebase Studio:

Si usas el SDK, puedes incluir propiedades de configuración opcionales para el botón:

  • label: Establece la etiqueta de texto que se muestra en el botón.
    • Valores permitidos: open, try, export o continue.
  • color: Define el esquema de color del botón.
    • Valores permitidos: dark, light, blue o bright.
  • size: Especifica la altura del botón en píxeles.
    • Los valores permitidos son 20 o 32.
  • imageFormat: Determina el formato de archivo de la imagen generada.
    • Los valores permitidos son svg o png.

Por ejemplo:

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

Ejemplo de un botón Exportar a Firebase Studio

Próximos pasos