Criar um botão para importar código para o Firebase Studio

Adicione um botão "Abrir no Firebase Studio" ao seu site para oferecer uma maneira fácil de importar código do seu site diretamente para um espaço de trabalho do Firebase Studio, permitindo que os usuários continuem trabalhando em um ambiente de desenvolvimento baseado na nuvem e com agentes.

Esse recurso foi criado para:

  • Playgrounds de código, em que os usuários podem passar de um editor básico para um ambiente de desenvolvimento completo.

  • Ferramentas de prototipagem de apps, em que seu site gera o código e o protótipo visual, e o usuário itera nele no Firebase Studio.

Usar o SDK Open in Firebase Studio

O botão "Abrir no Firebase Studio" é alimentado pelo SDK Abrir no Firebase Studio, uma biblioteca JavaScript que gera os links adequados para criar e preencher um novo espaço de trabalho. Ele oferece várias opções de como o código é importado.

Métodos de importação

É possível configurar o botão para importar código usando os seguintes métodos:

  • De um repositório ou modelo do Git: vincule a um repositório do Git ou a um modelo do Firebase Studio. Isso é ótimo para projetos completos ou modelos predefinidos. Para mais informações sobre esses casos de uso, consulte Criar um atalho para um espaço de trabalho predefinido em Firebase Studio.

  • De um conjunto de arquivos de projeto: crie dinamicamente um espaço de trabalho com um conjunto de arquivos e snippets de código diretamente do seu aplicativo da Web. Essa é a opção mais poderosa para playgrounds de código e prototipadores de apps, já que exporta o trabalho atual do usuário, mesmo que não esteja salvo em outro lugar.

Adicionar o botão "Abrir no Firebase Studio" ao seu site

O SDK "Abrir no Firebase Studio": fornece tudo o que você precisa, incluindo funções auxiliares para gerar imagens de botões, criar links diretos e enviar conteúdo de arquivos para criar espaços de trabalho do Firebase Studio.

Para adicionar o botão "Abrir no Firebase Studio" ao seu site:

  1. Instale o pacote no diretório do projeto:

    npm install @firebase-studio/open-sdk

  2. Adicione o seguinte ao seu código para importar a biblioteca:

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

Para instruções detalhadas, exemplos de código e a referência completa da API, consulte a documentação oficial do SDK.

Noções básicas sobre ambientes de espaço de trabalho

Quando um usuário cria um espaço de trabalho no seu site, o Firebase Studio configura o ambiente de desenvolvimento para ele. O nível de automação depende do tipo de projeto.

Ambiente otimizado

Para projetos simples de React, Angular e HTML, o Firebase Studio fornece um ambiente otimizado e pré-configurado, desde que o caller defina corretamente a propriedade baselineEnvironment no objeto settings. Isso significa que, quando um usuário abre o link no Firebase Studio, o Firebase Studio cria o espaço de trabalho e automaticamente:

  • Instala todas as dependências necessárias.
  • Configura e inicia o servidor de desenvolvimento correto.
  • Configura o ambiente com as ferramentas e extensões corretas.

Isso abre um ambiente em que os usuários podem ver uma prévia dinâmica do aplicativo e interagir diretamente com o código.

Ambiente genérico

Para todos os outros tipos de projetos, o Firebase Studio usa um importador genérico. Ele envia os arquivos para o espaço de trabalho, mas o usuário precisa fazer a configuração inicial manualmente. Talvez seja necessário:

  • Instale ambientes de execução de linguagem e dependências.
  • Configure o arquivo dev.nix.

Para esses projetos, o Firebase Studio cria um ambiente não personalizado, dando ao usuário controle total sobre o processo de configuração.

Experiência do usuário

Para os dois tipos de espaços de trabalho, depois que um usuário clica no botão "Abrir no Firebase Studio", ele precisa dar um nome ao espaço de trabalho e revisar a lista de arquivos a serem importados.

Abrir a caixa de diálogo "Importar espaço de trabalho" do Firebase Studio

Quando o usuário clica em Importar, um novo espaço de trabalho Firebase Studio é aberto. Ele contém os arquivos do projeto, uma prévia do app e um arquivo README com as próximas etapas.

Criar um botão "Abrir no Firebase Studio"

Você pode criar o botão usando o SDK Abrir no Firebase Studio ou usar a ferramenta a seguir para gerar o HTML de um botão do Firebase Studio:

Se você usar o SDK, poderá incluir propriedades de configuração opcionais para o botão:

  • label: define o rótulo de texto mostrado no botão.
    • Valores permitidos: open, try, export ou continue.
  • color: define o esquema de cores do botão.
    • Valores permitidos: dark, light, blue ou bright.
  • size: especifica a altura do botão em pixels.
    • Valores permitidos: 20 ou 32.
  • imageFormat: determina o formato do arquivo da imagem gerada.
    • Valores permitidos: svg ou png.

Exemplo:

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

Exemplo de um botão "Exportar para o Firebase Studio"

Próximas etapas