Desenvolver, publicar e monitorar um web app 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 aplicativo de pilha completa com a ajuda do Gemini no Firebase. Você usará um comando em linguagem natural para gerar um app em Next.js que identifica itens de comida de uma imagem ou da câmera no navegador fornecida por um usuário conectado e gera uma receita que contém os ingredientes identificados. Os usuários podem armazenar a receita em um banco de dados pesquisável.

Em seguida, você refinará o app e fará melhorias nele, antes de publicá-lo no Firebase App Hosting.

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

Etapa 1: gerar seu aplicativo

Faça login na sua Conta do Google e abra o Firebase Studio.
No campo Prototipar um app com IA, insira o comando a seguir, que vai criar um app de receitas baseado em imagens que usa a câmera do navegador e a IA generativa.

Por exemplo, você pode inserir uma instrução como esta para criar um app de geração de receitas:
```
Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.
```
Dica: para ter melhores resultados, seja o mais específico possível no comando. Diga os recursos que você quer, os fluxos de trabalho do usuário e os requisitos de dados. Se quiser, clique em Melhorar comando para pedir ao Gemini que refine seu comando inicial. Lembre-se também de que os processos de desenvolvimento mais eficazes com IA são iterativos. Continue refinando e adicionando recursos de forma colaborativa com o Gemini. Saiba mais sobre como criar comandos eficazes.
Se quiser, faça upload de uma imagem ao 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.
Clique em Prototipar com IA.

O agente de prototipagem de apps gera um blueprint do aplicativo com base no seu comando, retornando um nome proposto para o app, os recursos necessários e as diretrizes de estilo.
Revise o blueprint. Se necessário, 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.
Clique em Prototipar este app.

Importante: o Gemini pode gerar respostas que parecem plausíveis, mas são factualmente incorretas. Por isso, ele pode responder com informações imprecisas que não representam as opiniões do Google. Valide toda a saída de Gemini antes de usá-lo e não use código gerado não testado na produção. Não insira informações de identificação pessoal (PII) ou dados do usuário no chat.
O agente de prototipagem de apps começa a programar o app.
- Como seu app usa IA, vamos pedir para você adicionar ou gerar uma chave da Gemini API. Se você clicar em "Gerar automaticamente", o App Prototyping agent provisionará um Projeto do Firebase e uma chave da Gemini API por você.
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 Firebase Studio espaço de trabalho 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.

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. Saiba mais em Visualizar seu aplicativo.
Adicione Cloud Firestore e Firebase Authentication: durante a fase de iteração, peça ao App Prototyping agent para adicionar autenticação de usuário e um banco de dados usando Cloud Firestore e Firebase Authentication. Por exemplo, dê aos usuários a capacidade de salvar e baixar receitas com um comando como este:
```
Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.
```
Dica: o agente de prototipagem de apps pode adicionar Cloud Firestore e Firebase Authentication ao app durante a fase de iteração, não no projeto inicial do app.
Corrija os erros à medida que eles ocorrem:na maioria dos casos, o App Prototyping agent pede que você corrija os erros que surgirem. Clique em Corrigir erro para permitir a tentativa de correção.

Se você receber erros que não podem ser corrigidos automaticamente, copie o erro e qualquer contexto relevante (por exemplo, "Você pode corrigir este erro no meu código de inicialização do Firebase?") na janela de chat e envie para Gemini.

Dica: o Gemini explica o raciocínio, mas você também pode pedir que ele explique o plano antes de executá-lo.
Teste e itere usando linguagem natural: teste o aplicativo por completo e trabalhe com o App Prototyping agent para iterar o código e o blueprint até ficar contente.

Enquanto estiver em Prototyper view, you can also use the following features:
- Clique em Anotar para desenhar diretamente na janela de visualização. Use as ferramentas de forma, imagem e texto disponíveis, junto com um comando de texto opcional, para descrever visualmente o que você quer que o App Prototyping agent mude.
- Clique em Selecionar para selecionar um elemento específico e inserir instruções para o App Prototyping agent. Isso permite segmentar rapidamente um ícone, um botão, um texto ou outro elemento específico. Ao clicar em uma imagem, você também tem a opção de pesquisar e selecionar uma foto de banco de imagens do Unsplash.
Outra opção é clicar em Compartilhar link de visualização para compartilhar o app de maneira pública e temporária usando Firebase Studio pré-lançamentos públicos.
Criar um projeto do Firebase: o agente de prototipagem de apps provisiona um projeto do Firebase em seu nome quando você:
- Gerar automaticamente uma chave da API Gemini
- Pedir para conectar seu app a um projeto do Firebase
- Peça ajuda para conectar seu app aos serviços do Firebase, como Cloud Firestore ou Firebase Authentication
- Clique no botão Publicar e configure Firebase App Hosting.
Para mudar o Projeto do Firebase conectado ao seu espaço de trabalho, peça ao App Prototyping agent o ID do projeto que você quer usar. Por exemplo, "Mude para o projeto do Firebase com ID <your-project-id>".
Teste o app e verifique as regras do banco de dados Cloud Firestore: no painel de prévia do app, faça upload de uma imagem que mostre diferentes alimentos para testar a capacidade do app de identificar os ingredientes e gerar e salvar receitas.

Faça login como usuários diferentes e gere receitas: verifique se os usuários autenticados podem ver as receitas privadas e se todos os usuários veem as receitas públicas.

Quando você pede ao App Prototyping agent para adicionar Cloud Firestore, ele escreve e implanta as regras do banco de dados Cloud Firestore para você. Revise as regras no console do Firebase.
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 inline no código ou usando a conversa interativa do Gemini (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.
  
  Observação: os apps criados com o App Prototyping agent padrão usam o Prototyper chat in Code view. To use Gemini interactive chat. Em Gemini, clique em + e selecione Novo chat. Para voltar a Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- Acesse o Firebase Local Emulator Suite para conferir os dados de banco de dados e autenticação. Para abrir o emulador no seu espaço de trabalho:
  1. Clique em Switch to Code e abra a extensão Firebase Studio (Ctrl+',Ctrl+' ou Cmd+',Cmd+' no macOS).
  2. Role até Portas de back-end e expanda.
  3. Na coluna Ações que corresponde à Porta 4000, clique em Abrir em uma nova janela.
Teste e avalie o desempenho do recurso de IA generativa: use a interface do desenvolvedor do Genkit para executar fluxos de IA, testar, depurar, interagir com diferentes modelos, refinar comandos e muito mais.

Para carregar seus fluxos do Genkit na interface do desenvolvedor do Genkit e começar a testar:
1. No terminal do seu espaço de trabalho Firebase Studio, execute o comando abaixo para extrair a chave Gemini API e iniciar o servidor do Genkit:
```
 npm run genkit:watch
```
2. Clique no link da interface do desenvolvedor do Genkit. A interface do desenvolvedor do Genkit é aberta em uma nova janela com seus fluxos, comandos, incorporáveis e uma seleção de modelos disponíveis.
Saiba mais sobre a interface do desenvolvedor do Genkit em Ferramentas para desenvolvedores do Genkit.

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

Depois de testar o app e ficar satisfeito com ele no espaço de trabalho, é possível publicá-lo na Web com o Firebase App Hosting.

Quando você configura o App Hosting, o Firebase Studio cria um Projeto do Firebase (se ele ainda não foi criado com a geração automática de uma chave da Gemini API ou outros serviços de back-end) e orienta você a vincular uma conta da Cloud Billing.

Para publicar o app:

Clique em Publicar para configurar seu Projeto do Firebase e publicar o app. O painel Publicar seu app vai aparecer.

Importante: se você não gerar automaticamente uma chave da Gemini API ou pedir para o App Prototyping agent criar um projeto do Firebase, o Firebase Studio vai 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.
Na etapa Projeto do Firebase, o App Prototyping agent mostra o Projeto do Firebase associado ao espaço de trabalho. Se um projeto do Firebase ainda não existir, o App Prototyping agent vai criar um novo para você. Clique em Próximo para continuar.
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.
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.

Importante: o Firebase App Hosting requer uma conta 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 do Gemini API e de outros serviços do Firebase e do Google Cloud é atualizado para o nível pago. Você vai receber cobranças pelo uso de serviços pagos que excederem a cota sem custos. Saiba mais em Entenda os custos do App Hosting, Preços do Firebase e Preços da API Gemini Developer.
Clique em Configurar serviços. O agente de prototipagem de apps começa a provisionar os serviços do Firebase.
Clique em Publicar agora. Firebase Studio configura os serviços do Firebase e inicia o lançamento do App Hosting. Isso pode levar vários 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 publicar agora, clique em Publicar depois.
Quando a etapa de publicação for concluída, a Visão geral do app vai aparecer com um URL e insights do app 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.

(Recomendado) Etapa 4: testar o app publicado

Quando a publicação for concluída e o app for implantado no Firebase, Cloud Firestore e Firebase Authentication estarão prontos para teste em produção.

Ver dados de Cloud Firestore e Firebase Authentication no console do Firebase

É possível conferir os dados em tempo real do app no console Firebase depois da publicação.

Para ver seu banco de dados Cloud Firestore ativo, abra o console do Firebase e escolha Build > Banco de dados do Firestore no menu de navegação.

Aqui, você pode inspecionar os dados armazenados, conferir e testar suas regras de segurança e criar índices. Saiba mais em Cloud Firestore.
Para conferir seus dados ativos do Firebase Authentication, abra o console do Firebase e escolha Build > Authentication no menu de navegação.

Nesta página, você pode inspecionar a configuração de autenticação e os usuários do app. Saiba mais em Firebase Authentication.

Testar regras do Cloud Firestore em produção

Depois de publicar o app, teste novamente as regras de segurança do Cloud Firestore no ambiente de produção. Isso ajuda a garantir que seus dados estejam acessíveis para usuários autorizados e protegidos contra acesso não autorizado.

Você pode testar suas regras usando todos os métodos a seguir:

Teste de aplicativos: interaja com o aplicativo implantado, realizando operações que acionam vários padrões de acesso a dados (leituras, gravações, exclusões) para diferentes funções ou estados de usuários. Esse teste no mundo real ajuda a confirmar se as regras estão sendo aplicadas corretamente na prática.
Laboratório de testes de regras: para verificações segmentadas, use o Laboratório de testes de regras no console Firebase. Com essa ferramenta, é possível simular solicitações (leituras, gravações, exclusões) no banco de dados Cloud Firestore usando suas regras de produção. É possível especificar o estado de autenticação do usuário, o caminho para os dados e o tipo de operação para verificar se as regras permitem ou negam o acesso conforme o esperado.

Observação: quando você implanta regras de segurança durante o processo de publicação ou com a CLI Firebase, as regras definidas no diretório do projeto substituem as regras existentes no console do Firebase. Então, se você optar por defini-las ou editá-las usando o console do Firebase atualize as regras definidas no diretório do projeto.
Teste de unidade: para um teste mais abrangente, você pode escrever testes de unidade para suas regras de segurança. O back-end de visualização Firebase Studio, com tecnologia Firebase Local Emulator Suite, permite executar esses testes localmente, simulando o comportamento das regras de produção. Essa é uma maneira robusta de verificar a lógica de regras complexas e confirmar a cobertura para vários cenários. Após a implantação, verifique se os testes de unidade usando o emulador funcionam como esperado e abrangem todos os cenários.