1. Visão geral
Neste codelab, você vai praticar o uso do agente de prototipagem de apps no Firebase Studio para criar um app projetado para ajudar você a aprender um novo idioma. Em seguida, você refinará o app e fará melhorias nele para publicá-lo no Firebase App Hosting, se quiser.
O que você vai aprender
- Práticas recomendadas para comandos no Firebase Studio
- Iterar um app para adicionar funcionalidades e corrigir bugs
- Publicar um app no Firebase App Hosting e compartilhar com outras pessoas
- Acompanhar as principais métricas no painel de visão geral do app do App Hosting
Pré-requisitos
- Um navegador da sua escolha, como o Google Chrome
- Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase
2. Gerar seu app usando o agente de prototipagem de apps
O agente de prototipagem de apps usa o Gemini no Firebase para criar seu app. Mesmo usando comandos idênticos, o resultado pode não parecer ou agir exatamente como o apresentado neste codelab. Se você tiver dificuldades, disponibilizamos um conjunto de arquivos que podem ser adicionados ao seu espaço de trabalho para retomar o laboratório em vários pontos de verificação ao longo deste codelab.
- 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. Neste codelab, você vai criar um app que ajuda a aprender um novo idioma com histórias, flashcards e um tutor de IA. Insira um comando, como:
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future. - Clique em Prototipar com IA.
- Revise o projeto de app sugerido. Clique em
Personalizar para editar o blueprint:- Mude o nome do app para Speak Easy.
- Mude o esquema de cores para:
Primary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
Anexo para fazer upload de uma imagem durante o processo de comando ou projeto. As imagens precisam ter menos de 3 MiB. - Clique em Salvar.
- Quando o blueprint terminar de incorporar suas atualizações, clique em Prototipar este app.
- Como esse app inclui elementos de IA, o agente pede uma chave do Gemini. Adicione sua própria chave da API Gemini ou clique em Gerar automaticamente para gerar uma chave da API Gemini. Se você clicar em Gerar automaticamente, o Firebase Studio vai criar um projeto do Firebase e gerar uma chave da API Gemini para você.
- O agente de prototipagem de apps usa o blueprint do app para criar uma primeira versão dele. Quando isso é feito, a prévia do app aparece ao lado de uma interface de chat do Gemini. Teste o app. Mesmo que ele não esteja exatamente como você imaginou, a próxima seção descreve como adicionar novas funcionalidades e refinar o design.
3. (Opcional) Receber o código
Se você tiver dificuldades ou quiser acompanhar mais de perto o app de exemplo, use os arquivos de exemplo fornecidos em vários pontos de verificação ao longo do codelab.
- Baixe os arquivos na pasta.
- No Firebase Studio, clique em
Mudar para código para abrir a visualização de código. - Arraste os arquivos baixados para o painel do Explorer no Firebase Studio. Permita que os arquivos substituam os atuais.
- Clique em Mudar para o Prototyper para continuar o codelab usando a versão de exemplo do app.
4. Testar, iterar e depurar a funcionalidade do app
Ao testar o app, você pode notar bugs ou funcionalidades inesperadas. Na versão de exemplo do app, vamos adicionar as seguintes mudanças e correções:
- No gerador de histórias com IA, os usuários precisam poder clicar em palavras de vocabulário para receber uma definição em inglês.
- Os cards vão aparecer em francês e mudar para inglês quando forem clicados.
- O usuário precisa conseguir acessar uma página de configurações e mudar para o aprendizado de japonês em vez de francês.
Objetivo 1: adicionar palavras de vocabulário ao gerador de histórias com IA
Opcional: para usar a versão de exemplo do app a partir deste ponto, faça o download e arraste estes arquivos para o painel "Explorer" do Firebase Studio na visualização de código.
- Na interface de chat, descreva o recurso que você quer adicionar:
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked. - Teste o app na janela de visualização. Você vai atualizar a aparência do app depois. Por enquanto, concentre-se apenas na funcionalidade.
- Se o app não funcionar como esperado, continue pedindo ao agente de prototipagem de apps para fazer ajustes. Exemplo:
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance. - Clique em Mudar para o Code para abrir a visualização de código, em que é possível conferir todos os arquivos do aplicativo e modificar o código diretamente. Se houver um bug que o Gemini não consegue resolver, às vezes é mais fácil editar um arquivo manualmente. Quando estiver tudo pronto, mude para o modo Prototyper para continuar usando o agente de prototipagem de apps.
Meta 2: adicionar traduções aos flashcards
Opcional: para usar a versão de exemplo do app a partir deste ponto, faça o download e arraste estes arquivos para o painel "Explorer" do Firebase Studio na visualização de código.
Siga o mesmo processo acima, usando a interface de chat para descrever o recurso, teste-o na janela de visualização e use mais comandos ou a visualização de código para adicionar traduções aos flashcards. Tente um comando como:
The flash cards should appear in the target language to start, then switch to
English when clicked.
Às vezes, o agente de prototipagem de apps não reconhece quando há um bug. Descrever o que você vê e o que precisa ser corrigido pode ser mais eficaz, por exemplo:
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
Objetivo 3: adicionar um novo idioma
Opcional: para usar a versão de exemplo do app a partir deste ponto, faça o download e arraste estes arquivos para o painel "Explorer" do Firebase Studio na visualização de código.
Tente um comando como:
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. Iterar no design do app
Opcional: para usar a versão de exemplo do app a partir deste ponto, faça o download e arraste estes arquivos para o painel "Explorer" do Firebase Studio na visualização de código.
Agora que o app tem todas as funcionalidades desejadas, é hora de trabalhar no estilo.
Mudar o esquema de cores do app
Você pode especificar as cores que quer usar ou deixar que o agente de prototipagem de apps tome a iniciativa. Na interface do chat, você também pode clicar na opção Anexo para fazer upload de uma imagem das cores ou do estilo que você quer usar. Se preferir usar um comando, tente:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
Atualizar o texto usado no app
Por exemplo, em vez de "Tutor de chatbot de IA", você pode querer que ele diga apenas "Chat":
Change the text "AI Chatbot Tutor" to "Chat".
Ajustar a interface do app para torná-la mais intuitiva
Por exemplo, em vez de o usuário precisar pressionar um botão para enviar texto, você pode permitir que ele pressione Return no teclado:
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
Adicionar a opção para o usuário escolher entre o modo claro e escuro
Muitos usuários preferem escolher entre um tema mais claro ou mais escuro para o app. Considere onde seria um lugar lógico para encontrar essa opção:
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
Dicas de comandos e depuração
- Receba ajuda com comandos:se você tiver dificuldade em explicar ao agente de prototipagem de apps o que quer, peça ajuda ao Gemini para Google para refinar o comando. Saiba mais sobre como criar comandos eficazes.
- Testar em outros dispositivos:no modo de protótipo, clique em
Compartilhar link de visualização para testar o app em outros dispositivos. - Use ferramentas integradas:na visualização de código, use os recursos integrados de depuração e geração de relatórios do Firebase Studio para inspecionar, depurar e auditar seu app.
- Comece com o básico:trabalhe em um recurso por vez. Comece com um conjunto básico de recursos no protótipo e expanda quando eles funcionarem como esperado.
- Descreva bugs:se algo não estiver funcionando, descreva o comportamento atual para o agente do App Prototyping, seguido pelo comportamento desejado.
- Reverta quando necessário:quando o agente de prototipagem de apps entender mal um comando ou apresentar um problema difícil de resolver, clique no botão Restaurar para reverter para uma versão anterior do app e tente de novo com um comando diferente.
6. (Opcional) Publicar o app
Opcional: para usar a versão de exemplo do app a partir deste ponto, faça o download e arraste estes arquivos para o painel "Explorer" do Firebase Studio na visualização de código.
Depois de testar o app e ficar satisfeito com ele, é possível publicá-lo na Web com o Firebase App Hosting.
- Clique em Publicar para criar um projeto do Firebase e começar a configuração do App Hosting. O painel Publicar seu app é exibido.
- 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 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 abre o texto do Google Cloud, em que é possível criar uma conta de autoatendimento do Cloud Billing. Depois de criar a conta, volte para o Firebase Studio e selecione a conta na lista "Vincular faturamento do Cloud".
- 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 de API do Gemini ou quando clicou em Publicar. Em seguida, a hospedagem de aplicativos configura um ambiente totalmente gerenciado para seu app no Google Cloud.
- 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.
- Quando o lançamento for concluído, 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 texto do Firebase.
Para mais informações sobre o App Hosting, consulte Entenda o App Hosting e como ele funciona.
7. (Opcional) Monitorar seu app
O painel Visão geral do app do App Hosting fornece métricas e informações importantes sobre seu app, permitindo que você monitore 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, você pode:
- 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.
- Analise um resumo da performance do seu app 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 texto do Firebase.
- Veja 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 do App Hosting em Gerenciar lançamentos e versões.
8. Conclusão
Parabéns! Você criou um app com o Firebase Studio. Você pode adicionar muito mais ao app, como um dicionário expandido, mais idiomas, áudio, animações ou uma seleção de dificuldade. Continue usando o app ou crie algo novo.