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

Este guia mostra como usar o App Prototyping agent para desenvolver e publicar rapidamente um app full-stack com a ajuda do Gemini no Firebase. Você vai usar um comando em linguagem natural para gerar um app Next.js que identifica itens de comida de uma imagem ou da câmera no navegador e fornece uma receita que contém os ingredientes identificados. Em seguida, você vai refinar e melhorar o app, publicando-o no Firebase App Hosting.

Outras tecnologias que você vai usar ao seguir este guia incluem:

Etapa 1: gerar o app

Faça login na sua Conta do Google e abra o Firebase Studio.
No campo Prototipar um app com IA, insira uma descrição do app que você quer criar. Para essa solução, em que você está criando um app de receitas baseado em imagens, use um comando como o seguinte para criar um protótipo de um app que usa a câmera e a 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: você também pode fazer upload de uma imagem para acompanhar o comando. Por exemplo, você pode fazer o upload de uma imagem que contenha o esquema de cores que você quer que o app use e pedir para Firebase Studio usá-lo. As imagens precisam ter menos de 3 MiB.
Clique em Prototipar com IA.

O Gemini gera um modelo de app com base no seu comando, retornando um nome de app proposto, recursos necessários e diretrizes de estilo.
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 modelo diretamente. Faça as mudanças e clique em Salvar.
- No campo Descreva... no painel de chat, adicione perguntas e contexto para esclarecer o problema. Você também pode fazer upload de outras imagens.
Clique em Prototipar este app. Gemini começa a codificar seu app. Como a descrição do app descreveu recursos que exigem IA generativa, Gemini solicita uma chave Gemini API.
Adicione sua própria chave Gemini API ou clique em Gerar automaticamente para gerar uma chave Gemini API.

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

Etapa 2: testar, refinar, depurar e iterar

Depois que o app inicial é gerado, você pode testar, refinar, depurar e iterar.

Analise e interaja com o app:depois que a geração de código for concluída, uma visualização do app vai aparecer. Você pode interagir com a visualização diretamente para testá-la.
Iterar no app:continue usando a interface de chat para pedir a Gemini para adicionar recursos e refinar o app. Ou clique em Switch to Code para abrir a visualização Code, em que é possível editar o código diretamente no espaço de trabalho Firebase Studio.
Teste o app:no painel de visualização do app, faça upload de uma imagem que mostre diferentes alimentos para testar a capacidade do app de identificar os ingredientes e fornecer uma receita. Como alternativa, use a visualização Code para compartilhar seu app publicamente e temporariamente usando Firebase Studio previews públicas.
Depurar o app:abra Code clicando em Switch to Code para abrir a visualização Code, em que é possível usar os recursos de depuração e geração de relatórios integrados do Firebase Studio para inspecionar, depurar e auditar o app. Volte para a App Prototyping agent a qualquer momento.

Dica: na visualização Code, é possível usar Gemini nos modos de chat interativo e inline. O chat interativo pode diagnosticar problemas, fornecer soluções e executar ferramentas para ajudar a corrigir o app mais rapidamente. Para ativar o chat interativo, clique em spark no menu do espaço de trabalho na parte de baixo. Para ativar a assistência inline, clique em spark na parte de cima do menu do espaço de trabalho. Saiba mais em Assistência da IA no Firebase Studio.
Iteração:se o app não funcionar como esperado, refine a solicitação, use o painel de chat para pedir a Gemini para refinar o app ou edite o código diretamente Code.

(Opcional) Etapa 3: publicar o app com App Hosting

Depois de testar o app e ficar satisfeito com ele, você pode publicá-lo na Web com Firebase App Hosting.

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 o app no Firebase App Hosting:

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

Importante: se você não gerar automaticamente uma chave 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 de cima da página.
Na etapa Projeto do Firebase, anote o nome do projeto do Firebase que foi criado para você e clique em Próxima.
Na etapa Vincular conta do Cloud Billing, escolha uma das seguintes opções:
- Selecione a conta 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 vai abrir o console do Google Cloud, onde você pode criar uma nova conta Cloud Billing de autoatendimento. Depois de criar a conta, volte para Firebase Studio e selecione a conta na lista Vincular Cloud Billing.
Clique em Próxima. Firebase Studio vincula a conta de faturamento ao projeto associado ao seu espaço de trabalho, criado quando você gerou automaticamente uma chave Gemini API ou quando clicou em Publicar. Em seguida, App Hosting configura um ambiente totalmente gerenciado para o app em Google Cloud.

Importante: a vinculação de uma conta de faturamento faz com que o projeto passe 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.
Clique em Criar o primeiro lançamento. Firebase Studio inicia o lançamento do App Hosting. Esse processo pode levar até 10 minutos para ser concluído. 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.
Quando o lançamento for concluído, a Visão geral do app vai aparecer com um URL e insights de app com base na observabilidade do App Hosting. Para usar um domínio personalizado (como example.com ou app.example.com) em vez do domínio gerado pelo Firebase, adicione um domínio personalizado no console Firebase.

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

(Opcional) Etapa 4: monitorar o app

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

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

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

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

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

Se você tiver implantado versões sucessivas do app para App Hosting, será possível reverter para uma das versões anteriores. Você também pode removê-la.

Para reverter um site publicado:
1. Abra App Hosting no console do Firebase.
2. Localize o back-end do app, clique em View e em Rollouts.
3. Ao lado da implantação para a qual você quer reverter, clique em Mais , escolha Reverter para este build e confirme.
Saiba mais em Gerenciar lançamentos e lançamentos.
Para remover o domínio App Hosting da Web:
1. No console do Firebase, abra App Hosting e clique em Visualizar na seção do app Firebase Studio.
2. Na seção Informações do back-end, clique em Gerenciar. A página Domains é carregada.
3. Ao lado do seu domínio, clique em Mais , escolha Desativar domínio e confirme.
Isso remove seu domínio da Web. Para remover completamente o back-end App Hosting, siga as instruções em Excluir um back-end.

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

É possível monitorar as etapas, entradas e saídas do recurso Genkit ativando a telemetria no código do 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 a performance e a eficiência de custos 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 Firebase.

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

Para configurar o monitoramento no código:

Se você ainda não estiver na visualização Code, clique em Mudar para o código para abrir.
Verifique package.json para verificar a versão do Genkit instalada.
Abra o terminal (Ctrl-Shift-C ou Cmd-Shift-C no macOS).
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 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
```
No Explorer, expanda src > ai > flows. Um ou mais arquivos TypeScript que contêm seus fluxos Genkit aparecem na pasta flows.
Clique em um dos fluxos para abri-lo.

Dica: observe a seção prompt do arquivo. É possível editá-la manualmente para refinar as respostas de Gemini.
Na parte de baixo da seção de importações do arquivo, adicione o seguinte 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 as 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 App Hosting.

Para configurar as permissões:

Abra o console do IAM Google Cloud, 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)
Republique o app no App Hosting.
Quando a publicação for concluída, carregue o app e comece a usá-lo. Após cinco minutos, o app vai começar a registrar dados de telemetria.

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

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

Para monitorar os recursos de IA implementados com Genkit:

Após cinco minutos, abra Genkit no console Firebase e revise as solicitações e respostas de Genkit.

O Genkit compila as seguintes métricas de estabilidade:
- Solicitações totais:é o número total de solicitações recebidas pelo fluxo.
- Taxa de sucesso:a porcentagem de solicitações que foram processadas.
- 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:
- Solicite volume 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 Genkit em Genkit.

Próximas etapas

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