Desenvolver, publicar e monitorar um web app de pilha completa com o agente de prototipagem de apps

Pré-lançamento: o Firebase Studio está em pré-lançamento. Ou seja, o produto não está sujeito a SLAs nem a políticas de descontinuação e pode mudar de maneira incompatível com versões anteriores.

Este guia mostra como usar o App Prototyping agent para desenvolver e publicar rapidamente um aplicativo de pilha completa com a ajuda do Gemini no Firebase. Você usará um comando em linguagem natural para gerar um aplicativo em Next.js que identifica itens de comida de uma imagem ou da câmera no navegador e mostra uma receita que contém os ingredientes identificados. Em seguida, você refinará o aplicativo e fará melhorias nele para publicá-lo no Firebase App Hosting.

Importante: o agente de prototipagem de aplicativo permite criar aplicativos com o framework Next.js. Para usar a assistência de IA com outros frameworks no Firebase Studio, consulte Testar o Gemini no Firebase com o Firebase Studio.

Outras tecnologias que você usará ao longo deste guia incluem:

• um espaço de trabalho do Firebase Studio;
• um projeto do Firebase;
• Firebase App Hosting

Etapa 1: gerar seu aplicativo

1. Faça login na sua Conta do Google e abra o Firebase Studio.

2. No campo Prototipar um aplicativo com IA, insira uma descrição do aplicativo que você quer criar. Para essa solução, em que você criará um aplicativo de receitas baseado em imagens, use um comando como este a seguir para criar um protótipo de um aplicativo que usa a câmera e IA generativa:

   Build a web app that can identify food products from an uploaded picture or
   in-browser camera. The app should provide a recipe that contains the
   identified ingredients.
   

   Dica: também é possível fazer upload de uma imagem com seu comando. Por exemplo, faça upload de uma imagem que contém o esquema de cores que você quer que o aplicativo use e peça para o Firebase Studio usá-lo. As imagens precisam ter menos de 3 MiB.

3. Clique em Prototipar com IA.

   O Gemini gera um blueprint do aplicativo com base no seu comando, retornando um nome proposto para o aplicativo, os recursos necessários e as diretrizes de estilo.

4. Revise o blueprint e faça algumas mudanças. Por exemplo, é possível mudar o nome ou o esquema de cores proposto usando uma destas opções:

   • Clique em Personalizar e edite o blueprint diretamente. Faça as alterações e clique em Salvar.

   • No campo Descreva... no painel da conversa, adicione perguntas e contexto para esclarecer. Também é possível fazer upload de outras imagens.

5. Clique em Prototipar este aplicativo. O Gemini começa a programar o aplicativo. Como a descrição do aplicativo descreveu recursos que exigem IA generativa, o Gemini pede uma chave da Gemini API.

6. Adicione a própria chave da Gemini API ou clique em Gerar automaticamente para gerar uma chave da Gemini API.

   Importante: se você escolher Gerar automaticamente, o App Prototyping agent criará um projeto do Firebase em seu nome com um prefixo que corresponde ao nome do seu espaço de trabalho do Firebase Studio e criará uma nova chave da Gemini API no projeto. Ele também armazena a chave no espaço de trabalho do Firebase Studio em um arquivo .env. Para acessar seu novo projeto a qualquer momento, clique no nome dele na parte superior da página. Para acessar a chave do Gemini API e copiá-la ou excluí-la no futuro, use o console do Google Cloud.

Etapa 2: testar, refinar, depurar e iterar

Depois que o aplicativo inicial é gerado, é possível testar, refinar, depurar e iterar.

1. Analise e interaja com o aplicativo: depois que a geração do código for concluída, uma prévia do aplicativo será exibida. É possível interagir diretamente com a prévia para testá-la.

2. Itere no aplicativo usando linguagem natural: continue usando a interface da conversa para pedir que o Gemini adicione recursos e refine o aplicativo.

3. Teste o aplicativo: no painel da prévia do aplicativo, faça upload de uma imagem que mostra diferentes alimentos para testar a capacidade do aplicativo de identificar os ingredientes e mostrar uma receita. Outra possibilidade é usar a visualização do Code para compartilhar o aplicativo de maneira pública e temporária pelos pré-lançamentos públicos do Firebase Studio.

4. Depure e itere diretamente no código: clique em Mudar para o Code para abrir a visualização do Code, em que é possível conferir todos os arquivos do aplicativo e modificar o código diretamente. É possível voltar para o Prototyper mode at any time.

   Na visualização do Code, também é possível usar os seguintes recursos úteis:

   • Use os recursos integrados de depuração e geração de relatórios do Firebase Studio para inspecionar, depurar e auditar seu aplicativo.

   • Assistência de IA usando o Gemini no Firebase inline no código ou usando a conversa interativa (ambos disponíveis por padrão). A conversa interativa pode diagnosticar problemas, sugerir soluções e executar ferramentas para ajudar a corrigir o aplicativo mais rapidamente. Para acessar a conversa, clique em sparkGemini na parte inferior do espaço de trabalho.

(Opcional) Etapa 3: publicar seu aplicativo com o App Hosting

Depois de testar o aplicativo e ficar contente com ele, é possível publicá-lo na Web com o Firebase App Hosting.

O Firebase App Hosting requer uma conta do Cloud Billing. Quando você vincula uma conta de faturamento a um projeto do Firebase, ele é atualizado automaticamente para o plano de preços Blaze de pagamento por uso, e o uso da Gemini API é atualizado para o nível pago. Você receberá cobranças pelo uso de serviços pagos que exceder a cota sem custo financeiro. Saiba mais em Entenda os custos do App Hosting, Preços do Firebase e Preços da API Gemini Developer.

Quando você configura o App Hosting, o Firebase Studio cria um projeto do Firebase e orienta você a vincular uma conta do Cloud Billing.

Para publicar seu app no Firebase App Hosting:

1. Clique em Publicar para criar um novo projeto do Firebase e começar a configuração do App Hosting. O painel Publicar seu app é exibido.

   Importante: se você não gerar automaticamente uma chave da Gemini API, o Firebase Studio provisionará um projeto do Firebase em seu nome quando você clicar em Publicar. Para acessar o projeto do Firebase, clique no nome dele na parte superior da página.

2. Na etapa Projeto do Firebase, anote o nome do projeto do Firebase que foi criado para você e clique em Próxima.

3. Na etapa Vincular conta do Cloud Billing, escolha uma das seguintes opções:

   • Selecione a conta do Cloud Billing que você quer vincular ao seu projeto do Firebase.

   • Se você não tiver uma conta do Cloud Billing ou quiser criar uma, clique em Criar uma conta do Cloud Billing. Isso abrirá o console do Google Cloud, em que é possível criar uma nova conta do Cloud Billing de autoatendimento. Depois de criar a conta, volte para o Firebase Studio e selecione a conta na lista Vincular Cloud Billing.

4. Clique em Próxima. O Firebase Studio vincula a conta de faturamento ao projeto associado ao seu espaço de trabalho, criado quando você gerou automaticamente uma chave da Gemini API ou quando clicou em Publicar. Em seguida, o App Hosting configura um ambiente totalmente gerenciado para o aplicativo no Google Cloud.

   Importante: vincular uma conta de faturamento faz com que o projeto seja atualizado do plano de preços Spark sem custo financeiro para o plano de preços Blaze de pagamento por uso. Saiba mais em Preços do Firebase Studio.

5. Clique em Criar seu primeiro lançamento. O Firebase Studio inicia o lançamento do App Hosting. A conclusão desse processo pode levar até dez minutos. Para saber mais sobre o que acontece nos bastidores, consulte O processo de build do App Hosting.

   Dica: se você não quiser criar um lançamento agora, clique em Criar lançamento mais tarde.

6. Quando o lançamento for concluído, a Visão geral do aplicativo será exibida com um URL e insights do aplicativo com base na observabilidade do App Hosting. Para usar um domínio personalizado (como example.com ou app.example.com) no lugar do domínio gerado pelo Firebase, adicione um domínio personalizado no console do Firebase.

Para mais informações sobre o App Hosting, consulte Entenda o App Hosting e como ele funciona.

(Opcional) Etapa 4: monitorar seu aplicativo

O painel Visão geral do aplicativo do App Hosting mostra as principais métricas e informações sobre o aplicativo, permitindo monitorar o desempenho do app da Web usando as ferramentas de observabilidade integradas do App Hosting. Depois que o site for lançado, acesse a visão geral clicando em Publicar. Neste painel, é possível:

• Clicar em Criar lançamento para lançar uma nova versão do aplicativo.
• Compartilhar o link do aplicativo ou abri-lo diretamente em Acessar seu app.
• Analisar um resumo do desempenho do aplicativo nos últimos sete dias, incluindo o número total de solicitações e o status do lançamento mais recente. Clique em Ver detalhes para acessar ainda mais informações no console do Firebase.
• Veja um gráfico com o número de solicitações que seu aplicativo recebeu nas últimas 24 horas, dividido por código de status HTTP.

Se você fechar o painel de visão geral do aplicativo, poderá reabri-lo a qualquer momento clicando em Publicar.

Saiba mais sobre como gerenciar e monitorar lançamentos do App Hosting em Gerenciar lançamentos e versões.

(Opcional) Etapa 5: reverter sua implantação

Se você tiver implantado versões sucessivas do aplicativo no App Hosting, poderá reverter para uma das versões anteriores. Também é possível removê-la.

• Para reverter um site publicado:

  1. Abra o App Hosting no console do Firebase.

  2. Localize o back-end do aplicativo, clique em Ver e em Lançamentos.

  3. Ao lado da implantação para a qual você quer reverter, clique em Mais , selecione Reverter para este build e confirme.

  Saiba mais em Gerenciar lançamentos e versões.

• Para remover o domínio do App Hosting da Web:

  1. No console do Firebase, abra o App Hosting e clique em Ver na seção do aplicativo do Firebase Studio.

  2. Na seção Informações do back-end, clique em Gerenciar. A página Domínios é carregada.

  3. Ao lado do seu domínio, clique em Mais , selecione Desativar domínio e confirme.

  Isso remove seu domínio da Web. Para remover completamente o back-end do App Hosting, siga as instruções em Excluir um back-end.

(Opcional) Etapa 6: usar o monitoramento do Genkit para seus recursos implantados

É possível monitorar as etapas, entradas e saídas de recursos do Genkit ativando a telemetria no código do seu fluxo de IA. O recurso de telemetria do Genkit permite monitorar o desempenho e o uso dos fluxos de IA. Esses dados podem ajudar a identificar áreas para melhoria, resolver problemas, otimizar comandos e fluxos para melhorar o desempenho e a economia e acompanhar o uso dos fluxos ao longo do tempo.

Para configurar o monitoramento no Genkit, adicione a telemetria aos fluxos de IA do Genkit e confira os resultados no console do Firebase.

Importante: o monitoramento do Genkit depende dos dados de telemetria gravados no Google Cloud Logging, Metrics e Trace, que são serviços pagos. Acesse a página Preços do Google Cloud Observability para ver detalhes de preços e saber mais sobre os limites do nível sem custo financeiro.

Etapa 1: adicionar a telemetria ao código do fluxo do Genkit no Firebase Studio

Para configurar o monitoramento no seu código:

1. Se você ainda não estiver na visualização do Code, clique em Mudar para o Code para abri-lo.

2. Verifique o package.json para confirmar a versão do Genkit que está instalada.

3. Abra o terminal (Ctrl-Shift-C ou Cmd-Shift-C no macOS).

4. Clique no terminal e instale o plug-in do Firebase usando a versão que corresponde ao arquivo package.json. Por exemplo, se os pacotes do Genkit no package.json estiverem na versão 1.0.4, execute o comando abaixo para instalar o plug-in:

   npm i --save @genkit-ai/firebase@1.0.4

5. No Explorador, expanda src > ai > flows. Um ou mais arquivos TypeScript que contêm seus fluxos do Genkit aparecem na pasta flows.

6. Clique em um dos fluxos para abri-lo.

   Dica: observe a seção do prompt do arquivo. É possível editá-la manualmente para refinar as respostas do Gemini.

7. Na parte inferior da seção de importações do arquivo, faça as adições a seguir para importar e ativar o FirebaseTelemetry:

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

   Dica: para saber mais sobre as opções de telemetria avançada no Genkit, consulte Configuração avançada.

Etapa 2: configurar permissões

O Firebase Studio ativou as APIs necessárias para você ao configurar seu projeto do Firebase, mas você também precisa fornecer permissões à conta de serviço do App Hosting.

Para configurar as permissões:

1. Abra o console do Google Cloud IAM, selecione seu projeto e conceda os seguintes papéis à conta de serviço do App Hosting:

   • Gravador de métricas do Monitoring (roles/monitoring.metricWriter)
   • Agente do Cloud Trace (roles/cloudtrace.agent)
   • Gravador de registros (roles/logging.logWriter)

2. Republique seu app no App Hosting.

3. Quando a publicação for concluída, carregue o aplicativo e comece a usá-lo. Após cinco minutos, o aplicativo começará a registrar dados de telemetria.

Etapa 3: monitorar os recursos de IA generativa no console do Firebase

Quando a telemetria está configurada, o Genkit registra o número de solicitações, o sucesso e a latência de todos os fluxos. Para cada fluxo específico, o Genkit coleta métricas de estabilidade, mostra gráficos detalhados e registra os traces capturados.

Para monitorar os recursos de IA implementados com o Genkit:

1. Após cinco minutos, abra o Genkit no console do Firebase e analise os comandos e as respostas do Genkit.

   O Genkit compila as seguintes métricas de estabilidade:

   • Solicitações totais: é o número total de solicitações recebidas pelo seu fluxo.
   • Taxa de sucesso: a porcentagem de solicitações que foram processadas com êxito.
   • Latência do 95º percentil: a latência do 95º percentil do fluxo, que é o tempo necessário para processar 95% das solicitações.

   • Uso de tokens:

     • Tokens de entrada: o número de tokens enviados ao modelo no comando.
     • Tokens de saída: o número de tokens gerados pelo modelo na resposta.

   • Uso de imagens:

     • Imagens de entrada: o número de imagens enviadas ao modelo no comando.
     • Imagens de saída: o número de imagens geradas pelo modelo na resposta.

   Se você expandir as métricas de estabilidade, gráficos detalhados estarão disponíveis:

   • Volume de solicitações ao longo do tempo.
   • Taxa de sucesso ao longo do tempo.
   • Tokens de entrada e saída ao longo do tempo.
   • Latência (95º e 50º percentil) ao longo do tempo.

Saiba mais sobre o Genkit no Genkit.

Próximas etapas

• Saiba como desenvolver aplicativos em um espaço de trabalho do Firebase Studio.
• Saiba mais sobre a assistência de IA no Firebase Studio.