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 aplicativo em Next.js que identifica itens de comida de uma imagem ou da câmera no navegador e gera uma receita que contém os ingredientes identificados.

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

Etapa 1: gerar seu aplicativo

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

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. Clique em Prototipar este app.

  7. 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ê.

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.

  • 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.

  • 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 mode, you can also use the following features:

    • Clique em Ícone de anotação 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 ícone 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 Ícone de link Compartilhar link de visualização para compartilhar o app de maneira pública e temporária usando Firebase Studio pré-lançamentos públicos.

  • Depure e itere diretamente no código: clique em Ícone de Mudar para o Code 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:

  • 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) e orienta você a vincular uma conta da Cloud Billing.

Para publicar o app:

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

  2. Na etapa Projeto do Firebase, o App Prototyping agent mostra o Firebase associado ao espaço de trabalho. Se não for criado um projeto durante a geração de chaves Gemini API, um novo projeto será criado para você. Clique em Próximo para continuar.

  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.

  5. Clique em Configurar serviços. O agente de prototipagem de apps começa a provisionar os serviços do Firebase.

  6. Clique em Publicar agora. Firebase Studio configura os serviços do Firebase. 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.

  7. 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 6: adicionar Firebase App Check ao app

Se você integrou os serviços do Firebase ou do Google Cloud ao seu app, o Firebase App Check ajuda a proteger os back-ends do app contra abusos, impedindo que clientes não autorizados acessem seus recursos do Firebase. Ele funciona com os Serviços do Google (incluindo o Firebase e o Google Cloud) e com seus próprios back-ends personalizados para manter seus recursos seguros.

Recomendamos adicionar App Check a qualquer app que você publicar publicamente para proteger seus recursos de back-end contra abuso.

Esta seção orienta você a configurar App Check no Firebase Studio usando o reCAPTCHA Enterprise para um app da Web criado pelo App Prototyping agent. No entanto, é possível configurar App Check em qualquer app que implemente serviços do Firebase e possa implementar provedores personalizados. Saiba mais no Firebase App Check.

O reCAPTCHA Enterprise oferece até 10.000 avaliações sem custos.

Etapa 1: configurar o reCAPTCHA Enterprise para seu app

  1. Abra a seção reCAPTCHA Enterprise do console do Google Cloud.

  2. Selecione o nome do seu Projeto do Firebase no seletor de projetos do console do Google Cloud.

  3. Se você precisar ativar a API reCAPTCHA Enterprise, faça isso.

  4. Clique em Começar e adicione um Nome de exibição para a chave do site do reCAPTCHA.

  5. Aceite a chave padrão Tipo de aplicativo da Web.

  6. Clique em Adicionar um domínio e selecione uma opção. Adicione o domínio App Hosting (por exemplo, studio--PROJECT_ID.REGION.hosted.app) e todos os domínios personalizados que você usa ou planeja usar com o app.

  7. Clique em Próxima etapa.

  8. Deixe a opção Você vai usar desafios? desmarcada.

  9. Clique em Criar chave.

  10. Copie e salve o ID da chave e prossiga para Configurar App Check.

Etapa 2: configurar o App Check

  1. Abra o console do Firebase e clique em Build > App Check no menu de navegação.

  2. Clique em Começar e em Registrar ao lado do app.

  3. Clique para expandir ReCAPTCHA e cole o ID da chave que você gerou para o reCAPTCHA Enterprise.

  4. Clique em Salvar.

Etapa 3: adicionar o App Check ao código

  1. Volte para o Firebase Studio e, na visualização Code, adicione a chave do site gerada ao arquivo .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Se você ainda não tiver a configuração do Firebase salva em .env, faça o seguinte:

    • No console do Firebase, abra Configurações do projeto e localize-o na seção que corresponde ao seu app.

    • Na visualização Code do terminal:

      1. Faça login no Firebase: firebase auth login
      2. Selecione o projeto: firebase use FIREBASE_PROJECT_ID
      3. Receba a configuração do Firebase: firebase apps:sdkconfig

  3. Adicione a configuração ao arquivo .env para que ele fique assim:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. Adicione o App Check ao código do app. Você pode pedir ao Gemini para adicionar App Check com o reCAPTCHA Enterprise ao seu app. Especifique "reCAPTCHA Enterprise" e confira novamente. Siga as etapas em Inicializar App Check.

  5. Republique seu site no App Hosting. Teste seus recursos do Firebase para gerar alguns dados.

  6. Para verificar se o App Check está recebendo solicitações no console Firebase, abra Build > App Check.

  7. Clique para inspecionar os serviços do Firebase. Depois de verificar se as solicitações estão chegando, clique em Aplicar para aplicar o App Check.

  8. Repita a verificação e a aplicação para o Firebase Authentication.

Se, depois de registrar seu aplicativo no App Check, você quiser executá-lo em um ambiente em que o App Check normalmente não seria classificado como válido, como localmente, durante o desenvolvimento ou em uma integração contínua (CI), crie um build de depuração do seu app que use o provedor de depuração do App Check em vez de um provedor de atestado real. Saiba mais em Usar o App Check com o provedor de depuração em apps da Web.

(Opcional) Etapa 7: monitorar seu app

O painel Visão geral do app no Firebase Studio fornece métricas e informações importantes sobre seu app, permitindo que você monitore o desempenho do seu app da Web usando as ferramentas de observação integradas do App Hosting. Depois que o site for lançado, acesse a visão geral clicando em Publicar. Neste painel, é possível:

  • Clique em Publicar para lançar uma nova versão do app.
  • 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 8: 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 9: 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.

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 Ícone de Mudar para o Code 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.

  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();

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