- Transforme o feedback dos usuários em um plano prático de testes e correção de bugs usando uma estrutura sistemática.
- Use a depuração assistida por IA e aplique o padrão “me ensine” para entender as correções
- Escreva testes simples para verificar se as correções funcionam e detectar possíveis problemas de regressão.
- Use as ferramentas de desenvolvimento do navegador para identificar e diagnosticar problemas
- Front-end: um aplicativo React com todas as telas, navegação e recursos de IA
- Backend seguro: chave API protegida com GitHub Secrets, não exposta no código
- estudantes o escopo do MVP, os wireframes e têm feedback dos testes dos usuários.
Nas lições anteriores, você usou o GitHub Codespaces e o Copilot para programar seu Kit de Ferramentas do Fundador. Você descreveu o que queria, o Copilot gerou o código e você iterou até que funcionasse. Você pode até ter usado o Copilot para ajudá-lo com alguma depuração assistida por IA. Essa abordagem ensinou os fundamentos. Em Fundamentos de Tecnologia, você explorou o uso do Google AI Studio Build Mode como uma abordagem alternativa.
O Kit de Ferramentas do Fundador ajudou você a aprender e armazenar sua pesquisa. Agora você está construindo seu MVP para usuários reais. Sua pesquisa continua, mas o código do kit de ferramentas fica para trás.
Construindo seu front-end
Em MVP e protótipos, você criou um protótipo que poderia ter diferentes níveis de fidelidade. Poderia ser um esboço em papel, notas adesivas ou wireframes básicos em ferramentas como Figma ou Miro. Você o testou com usuários reais e coletou feedback sobre seu fluxo principal e proposta de valor.
Agora você está pronto para transformá-lo em código funcional para poder testar se a experiência real cumpre essa promessa.
Como seu protótipo existe como uma representação visual, você precisa traduzir os elementos visuais em descrições que as ferramentas de IA possam entender (o que você já aprendeu).
Escolhendo uma ferramenta protótipo
Desde que o termoprogramaçãose tornou popular no ano passado (2025), novas plataformas surgiram em grande número. Essas ferramentas permitem que qualquer pessoa passe da descrição da ideia à aplicação implementada em poucos minutos.
Alcançou mais de US$ 100 milhões em receita recorrente anual em apenas oito meses, tornando-se a empresa de software mais rápida a atingir essa marca.
A receita da Replit também cresceu 10 vezes quando eles lançaram seu programação de IA (semelhante ao Copilot do GitHub).
é outro editor de código popular assistido por IA que você executa localmente no seu computador.
tem mais de 7 milhões de desenvolvedores usando-o para desenvolver aplicativos
Todas essas plataformas são especializadas em diferentes áreas e são boas opções. Continuaremos usando o Github codespaces e o Copilot pelos seguintes motivos:
- Você já sabe disso.
- É gratuito. Ao contrário do Lovable (US$ 20-100/mês) ou do Cursor (US$ 20/mês), o Codespaces é (quase) gratuito, com créditos generosos.
- Enviar alterações para o Github é muito fácil
- Você tem controle sobre o código e a arquitetura o app
Você certamente pode usar uma plataforma diferente. Se estiver acompanhando as atividades desta lição, talvez seja necessário adaptá-las à plataforma específica que estiver usando.
A abordagem iterativa comprogramação
Aoprogramação, você precisa resistir à tentação de descrever tudo de uma vez. Embora plataformas como o Google AI Studio tenham modelos poderosos disponíveis, como o Gemini 3 Pro, que pode raciocinar e dividir instruções longas em etapas estruturadas, há uma grande possibilidade de que a IA ainda decida seguir uma direção diferente. Além disso, se você pedir ao LLM para criar todo o seu aplicativo em uma única etapa, é provável que algo não funcione exatamente como você deseja. Pode ser difícil identificar onde está o problema quando você tem um aplicativo inteiro para depurar. Os programadores geralmente trabalham em aplicativos em partes – adicionam um recurso, testam-no e, em seguida, passam para o próximo recurso. Trabalhar com assistência de IA não deve ser diferente.
Recomendamos fazer isso passo a passo, como:
- Construa primeiro a estrutura da interface do usuário e faça tela por tela, depois passe para a navegação.
- Teste as telas e o fluxo antes de adicionar recursos mais avançados. Você consegue clicar no aplicativo? Se não, então depure.
- Adicione o recurso principal, que provavelmente será a integração com IA.
- Teste. O recurso funciona? Se não funcionar, depure.
- Repita, adicionando mais recursos, um de cada vez.
Essa abordagem detecta os problemas à medida que são adicionados e facilita a depuração. Se algo der errado, você saberá qual alteração causou o problema. Com prompts longos, é difícil rastrear onde ocorreu o bug.
Além de adicionar recursos e testá-los um por um, vamos enviar nossas alterações para o nosso repositório Github com frequência. Ele não apenas armazena as atualizações de forma segura, como também mostra o andamento do projeto. Isso pode ser útil para os membros da equipe e colaboradores, mas também para assistentes de IA.
O benefício do “contexto da IA”
Uma coisa que a maioria das pessoas esquece: quando você usa ferramentas de IA (como Gemini no AI Studio ou Copilot), a IA frequentemente “analisa” seu histórico Git para entender como o projeto evoluiu.
- Se você tiver três envios distintos, a IA poderá perceber: “Ah, mudamos do HTML básico para uma estrutura de componentes baseada em React no segundo commit”.
- Se você fizer uma alteração muito grande, a IA verá apenas uma parede de código e provavelmente sugerirá alterações que entram em conflito com sua intenção original.
Por esse motivo, vamos enviar nossas alterações para o Github à medida que concluirmos cada etapa ou parte do trabalho, em vez de construir o aplicativo inteiro e enviar as alterações posteriormente.
ATIVIDADE 1
Crie seu front-end no Github Codespaces
Tempo estimado: 30 minutos
Nesta atividade, você começará a transformar seu protótipo em um aplicativo funcional usando o Github Codespace e o Copilot.
1. Identifique suas características principais (IMPRESCINDÍVEIS)
- Abra seu documento MVP da lição MVP e Protótipos.
- Revise seus IMPRESCINDÍVEIS .
- Escolha UM Recurso a ser desenvolvido primeiro. Pergunte a si mesmo:
- Qual recurso representa o valor central?
- A quais recursos meus usuários responderam melhor?
2. Prepare suas imagens protótipo para upload
Encontre a tela em seu protótipo (daquela lição) que mostra esse recurso. Você irá enviar essa imagem para o AI Studio E descrever o que deseja. Essa combinação de mostrar e contar dá à IA a melhor chance de gerar o que você precisa.
- Prepare seus modelos (wireframes digitais ou imagens):
- Se o seu protótipo estiver em papel, tire uma foto nítida dessa tela.
- Se o seu protótipo for digital (Figma, Canva, etc.), exporte ou faça uma captura de tela dessa tela.
- Salve a imagem em algum lugar onde você possa encontrá-la facilmente.
- Prepare a descrição do seu recurso.
Embora a IA possa ver seu protótipo, é útil explicar primeiro o que você deseja. Observe seu protótipo e anote:- Qual é o fluxo do usuário?
- O que o usuário faz primeiro?
- O que acontece quando eles agem?
- O que NÃO é visível no seu protótipo, mas é importante?
- Esquema de cores ou preferências de marca
- Requisitos para dispositivos móveis
- Qualquer comportamento que ocorra “nos bastidores”
- Qual é o fluxo do usuário?
- Escreva algumas frases descrevendo esses dois pontos. Você usará tanto as simulações quanto essa descrição escrita nas próximas etapas.
Aqui está como fica nossa imagem simulada:
3. Analise os comentários dos usuários sobre os testes
Antes de construir, analise o feedback dos testes do seu protótipo. Isso deve informar o que você precisa atualizar em relação às suas simulações originais.
Seu protótipo codificado deve abordar os comentários críticos que você recebeu dos usuários. Ele não deve apenas reconstruir o que você mostrou a eles e que não funcionou.
4. Crie seu repositório no Github e abra o Codespace
- Faça login em github.com.
- Clique no Novo para criar um novo repositório.
- Dê um nome apropriado para o app.
- Defina a visibilidade como privada.
- Sem modelo.
- Adicionar Readme.
- Adicione .gitignore, escolha Node.
- Adicione a licença, escolha a licença MIT.
- Depois de criado, você pode adicionar uma descrição ao seu arquivo Readme, se desejar. Você também pode esperar e preenchê-lo mais tarde.
- Crie uma nova ramificação clicando em principal, selecione Exibir todas as ramificações e clique em Nova ramificação. Dê um nome apropriado .
- Clique no nome do branch para garantir que você está nesse branch e, em seguida, clique em Código e, em seguida, clique em Criar espaço de código em seu novo branch.
- Aguarde o carregamento do espaço de código.
5. Instrua o Copilot para começar a construir seu shell de interface do usuário
Em vez de pedir tudo de uma vez, comece APENAS com a estrutura visual.
- Para adicionar uma imagem do seu wireframe ou esboço da(s) sua(s) tela(s):
- Arraste a imagem para o gerenciador de arquivos no codespaces para que ela seja adicionada como um arquivo o projeto.
- Na área de bate-papo, clique no clipe de papel para anexar o contexto.
- Você deverá ver um botão Colar. Clique nele.
- Em seguida, você poderá selecionar os arquivos no seu gerenciador de arquivos. Clique na imagem que deseja anexar.
- Digite um prompt na mesma caixa de bate-papo e substitua pelos seus próprios valores MVP. Observe que o Copilot pode criar a interface do usuário apenas com a imagem, mas quanto mais detalhes você fornecer, melhor será o resultado.
Aqui está um modelo de prompt à esquerda, seguido por um exemplo utilizando nosso aplicativo TutorMatch.
Seu objetivo é me ajudar a criar um aplicativo web React compatível com dispositivos móveis aplicativo web [o app ], com base na imagem que anexei.
Por enquanto, crie APENAS a estrutura da interface do usuário, ou seja, apenas a estrutura visual, sem nenhuma funcionalidade ainda.
– [Descreva o cabeçalho/título]
– [Descreva os campos de entrada ou elementos do formulário]
– [Descreva o(s) botão(ões)]
– [Descreva onde os resultados aparecerão (espaço reservado por enquanto)]
Esquema de cores: [descreva: azuis profissionais, laranjas quentes, etc.]
Layout: [coluna única, duas colunas, etc.]
Por enquanto, quando o usuário clicar no botão, basta mostrar um texto provisório como “Os resultados aparecerão aqui”. Adicionaremos a funcionalidade real na próxima etapa.
NÃO ADICIONE NENHUMA FUNCIONALIDADE DE IA NESTE MOMENTO!
Adicionaremos a funcionalidade real na próxima etapa.
Seu objetivo é me ajudar a criar um aplicativo web React compatível com dispositivos móveis aplicativo web TutorMatch, com base na imagem que anexei.
Por enquanto, crie APENAS a estrutura da interface do usuário, ou seja, apenas a estrutura visual, sem nenhuma funcionalidade ainda.
– Um cabeçalho que diz “TutorMatch – Obtenha conselhos personalizados de um tutor”
– Uma área de texto onde estudantes descrever com qual matéria estão tendo dificuldades.
– Um botão com a mensagem “Obter recomendações”
– Uma seção de resultados abaixo do botão (espaço reservado por enquanto)
Esquema de cores: azuis e verdes suaves
Layout: coluna única, centralizada
Por enquanto, quando o usuário clicar no botão, basta mostrar um texto provisório dizendo “As recomendações da IA aparecerão aqui”.
NÃO ADICIONE NENHUMA FUNCIONALIDADE DE IA NESTE MOMENTO!
Adicionaremos a funcionalidade real na próxima etapa.
A IA vê tanto o seu protótipo visual quanto a sua descrição escrita, obtendo assim uma visão completa do que você deseja construir.
6. Teste e refine o código conforme necessário
Depois que o Copilot gerar o código, você poderá executá-lo. O Copilot deve solicitar isso, mas na janela do terminal no codespaces, você precisará digitar:
- npm install ( para instalar todas as dependências em package.json)
- npm run dev (para executar o aplicativo em uma janela do navegador)
Se algo não estiver certo, você pode descrever para a IA quaisquer alterações ou correções necessárias, tais como:
- Aumente o tamanho do texto do cabeçalho
- Altere a cor do botão para verde
- Adicione mais espaço entre esses campos
Entenda que cada mensagem instruirá o Copilot a refinar o código, e existe a possibilidade de que a IA altere outras coisas que você não especificou com precisão. Portanto, é importante ser sempre preciso. Esta é a parte da conversaprogramação.
No nosso caso, pedimos à IA para adicionar espaços reservados. Você pode ver que, após inserir “Álgebra”, ela adicionou nos resultados “Recomendações da IA” como um espaço reservado, porque foi isso que pedimos.
Você consegue pensar em maneiras de melhorar as instruções para solicitar ao LLM que faça as correções acima?
7. Preparar e enviar alterações para o repositório
Usando o controle de código-fonte Codespace ou git no terminal, prepare, confirme e envie suas alterações para o branch do seu repositório GitHub.
O controle de código-fonte automatiza as etapas para o seu Se você quiser digitar os comandos git por conta própria, aqui estão os comandos.
git status
git add .
git commit -m “O que eu alterei”
git push -u origin nome-do-seu-ramo
Isso armazenará seus arquivos iniciais com segurança no Github e também marcará isso como um primeiro commit. Isso é útil para ver as alterações incrementais feitas no projeto.
8. Adicione interatividade básica (ainda sem IA)
Quando sua interface de usuário estiver pronta, adicione o próximo bloco: interação básica do usuário SEM IA ou APIs ainda. Testar com dados provisórios confirma que seu fluxo de interação funciona antes de adicionar IA.
Se algo quebrar mais tarde, você saberá que é um problema de IA, não um problema de interface do usuário.
No chat, descreva a próxima camada
Por exemplo, se estiver criando um aplicativo de correspondência de tutoria com wireframes carregados:
Agora adicione interatividade básica:
Quando o usuário digita no campo de entrada e clica no botão:
- Limpar todos os resultados anteriores
- Mostrar uma mensagem de carregamento: “Analisando suas necessidades...”
- Após 1 segundo, mostre dados provisórios/simulados como:
– Procure um professor particular com sólidos conhecimentos sobre o assunto.
– Encontre alguém que utilize métodos de ensino visuais.
– Considere um tutor com experiência no seu estilo de aprendizagem
Isto serve apenas para testar o fluxo de interação.
NÃO ADICIONE NENHUMA CHAMADA DE API OU INTEGRAÇÃO DE IA REAL.
9. Salve seu progresso no Github
Quando estiver satisfeito com toda a interface do usuário e interação para essa primeira tela/recursos, organize, confirme e envie suas alterações para o seu branch do Github novamente.
Saindo do impasse:
- Se o Copilot não entender sua solicitação, seja mais específico sobre sua funcionalidade e layouts específicos, como:
- Se as cores estiverem erradas, especifique as cores exatas: “Use #4A90A4 para o cabeçalho”.
- Se a pré-visualização estiver em branco, tente atualizar ou iniciar uma nova sessão.
- Se você receber erros, descreva-os para a IA: “Estou vendo um erro. Por favor, explique o que está errado e corrija-o.”
Explicação do código React
Reserve um momento para examinar os arquivos gerados e a estrutura do código no Codespace. Analisamos brevemente os arquivos React ao aprender sobre pilhas de tecnologia. Vamos examinar mais de perto agora.
O Copilot deveria ter gerado código React, que usa uma estrutura baseada em componentes, na qual o app dividido em partes reutilizáveis.
Aqui está a chave: você não precisa entender cada linha do React para construir seu MVP.
Pense nisso como dirigir um carro — você não precisa entender o motor para chegar ao seu destino. Concentre-se em descrever O QUE você deseja para a IA e deixe que ela cuide dos detalhes de implementação do React. Quando precisar fazer alterações, use linguagem natural para dizer à IA o que ajustar (“aumente este botão”, “mude a cor para azul”) em vez de editar o código diretamente. Se você estiver curioso e quiser aprender React corretamente, ótimo — mas deixe isso para depois do lançamento do seu MVP e de validar sua ideia com usuários reais. Por enquanto, seu objetivo é construir algo testável rapidamente, não se tornar um especialista em React.
É provável que o Copilot tenha gerado uma estrutura básica de MVP. Para o nosso exemplo, ele gerou estes arquivos:
src/ – Pasta que contém os principais arquivos React
App.jsx– Componente principal do aplicativo (a maior parte da sua interface de usuário)
main.jsx – ponto de entrada do React . Você verá que o index.html carrega este script.
index.css – Estilos globais
index.html – A única página o app permanece o app
vite.config.js – arquivo de configuração do servidor build/dev
package.json – Pense nisso como uma lista de suprimentos. Ele lista todas o app bibliotecas o app para funcionar (como react, express ou lucide-react). Se esse arquivo estiver faltando, o aplicativo não saberá como iniciar.
.gitignore – Esta é a tela de privacidade. Ela informa ao GitHub quais arquivos devem ser “ignorados” (como o arquivo .env que contém suas chaves API). Isso é fundamental para a segurança.
node_modules/ – Esta pasta contém o código real de todas as bibliotecas listadas no seu package.json. Geralmente é muito grande, então você nunca deve enviá-la para o GitHub.
Atualmente, essa é uma estrutura simples e plana. À medida que você adiciona mais complexidade o app, é possível adicionar mais organização usando os recursos do React.
Aqui está um passo a passo da estrutura de arquivos e pastas de um aplicativo React completo.
componentes/ – Blocos de construção reutilizáveis da interface do usuário.
- Botões, cartões, guias, modais, etc.
- Cada arquivo geralmente representa uma ideia visual.
páginas/ ou visualizações/ – Telas ou seções do aplicativo. As páginas organizam os recursos do aplicativo; os componentes os constroem.
servidor/ ou api/ – Onde ficam as APIs externas, por onde o app com o mundo exterior.
- Chamadas da API Gemini
- Uploads do Supabase
- Inferência Hugging Face
utils/ Funções auxiliares.
- Formatação de texto
- Analisando respostas
- Lógica reutilizável
Forçaremos o Copilot a adicionar essas pastas com nossa solicitação, à medida que adicionamos mais complexidade ao nosso aplicativo.
ATIVIDADE 2
Adicionar todas as telas do aplicativo
Tempo estimado: 30 minutos
1. Adicione uma segunda tela, teste e repita
Se o app mais de uma tela, você pode repetir as etapas até ter criado todas as telas, concentrando-se apenas na interface do usuário por enquanto.
Comece com uma tela adicional e adicione esta informação importante ao seu prompt:
Adicione uma segunda tela, [Nome da tela].
Crie uma pasta “pages” e adicione um arquivo .jsx para cada tela separada.
Adicione também uma pasta de componentes para a interface do usuário compartilhada (barra de navegação, botões, cartões).
Esta é uma estrutura padrão para aplicativos React. As páginas contém o código de cada tela do aplicativo. A pasta componentes contém blocos reutilizáveis para componentes da interface do usuário.
Depois que o Copilot gerar o código, verifique se ele criou as pastas e adicionou os arquivos apropriados. Confira o código para ver se você consegue entender o que ele está fazendo.
Certifique-se de testar tanto a nova tela quanto a interação entre as duas telas.
2. Adicione as telas restantes, teste e repita
Siga os mesmos passos para adicionar as telas restantes. Peça ao Copilot para gerar primeiro a interface do usuário e, em seguida, adicione as funcionalidades básicas.
Verifique se o Copilot está adicionando um novo arquivo .jsx na sua pasta de páginas. Talvez seja necessário lembrá-lo. Lembre-o também de adicionar componentes reutilizáveis na pasta de componentes.
Teste cada nova tela à medida que a adiciona.
3. Adicionar navegação básica (ainda sem IA)
Quando sua interface do usuário estiver com boa aparência, você estará pronto para começar a adicionar interatividade que possa estar faltando, como navegação entre páginas, mensagens de sucesso e outros. Isso é especialmente importante se o app várias telas. É provável que o Copilot já tenha adicionado algumas das interações, pois ele tenta antecipar, portanto, certifique-se de verificar primeiro o que está faltando, o que pode ser melhorado e itere sobre isso.
4. Teste o aplicativo completamente
Você já testou cada alteração de forma incremental e iterou sobre ela, mas é sempre bom fazer outra verificação para garantir que todas as telas, botões e navegação funcionem.
Para testar o app , recomendamos que você o app utilize o app um usuário faria.
Aqui está uma lista de verificação de exemplo que pode ser aplicável a você:
- É necessário ter uma tela inicial e ela carrega corretamente?
- Você consegue inserir texto ou números corretamente?
- Posso submeter formulário vazio? Se sim, considere adicionar mensagens de erro.
- Você consegue navegar entre todas as telas?
5. Confirme suas alterações
Quando estiver satisfeito com a interface do usuário e as funcionalidades básicas, prepare, confirme e envie suas alterações para o branch do seu repositório.
Integração de IA
Agora você tem um aplicativo funcional com telas e navegação, mas ainda sem IA. No Founder’s Toolkit, você criou um Analisador de Feedback que enviou dados das partes interessadas para o Gemini e exibiu insights. Você também aprendeu a usar a IA preditiva. Agora, você aplicará essas mesmas habilidades ao seu próprio MVP.
Para ambos os casos, IA generativa e IA preditiva, o princípio permanece o mesmo: a IA é uma camada sobre a funcionalidade operacional. o app funcionar (navegar, exibir telas) antes da adição da IA. Isso facilita muito a depuração e, se algo parar de funcionar após a adição da IA, você saberá que o problema é a integração da IA.
Qual LLM?
Fora do AI Studio, a API Gemini não é mais gratuita sem o cadastro com um cartão de crédito. Se você tiver essa possibilidade, pode se cadastrar, mas configure alertas para atingir cotas, para não incorrer em custos de desenvolvimento.
Por isso, precisamos procurar alternativas.
Existem várias APIs LLM gratuitas disponíveis que funcionarão bem para o seu MVP. Vamos usar o Groq na atividade abaixo. Você pode se cadastrar no site deles sem cartão de crédito, e eles oferecem uma generosa quantidade de solicitações diárias.
Aqui estão outras APIs gratuitas que você pode explorar para o seu MVP.
Provedor
Inscrição
Melhor modelo
(em fevereiro de 2026)
Protocolo
Groq
E-mail (sem CC)
llama-3.3-70b-versátil
SDK OpenAI
GitHub
Usa conta GitHub
gpt-4o-mini
SDK do Azure/OpenAI
OpenRouter
E-mail (sem CC)
google/gemma-2-9b-it:grátis
SDK OpenAI
Cara de abraço
E-mail (sem CC)
DeepSeek-R1-Distill-Llama-8B
API de inferência Hugging Face
ATIVIDADE 3
Adicionar recurso de IA
Tempo estimado: 30 minutos
Nesta atividade, você adicionará funcionalidades de IA ao seu MVP usando o Groq. A maioria dos MVPs se beneficia de recursos de IA generativa, como geração de texto, análise, resumo ou respostas conversacionais.
Se o seu MVP requer classificação ou previsão (análise de sentimentos, categorização, etc.), o padrão de integração é o mesmo. Você precisa adicionar uma API.
1. Defina o comportamento da sua API
Antes de escrever qualquer comando, tenha clareza sobre o que sua API deve fazer. Na aula sobre o fluxo de trabalho do GitHub, você aprendeu que instruções vagas geram resultados vagos. O mesmo se aplica aqui.
Como muitos aplicativos de equipe incluem uma chamada à API de LLM, segue aqui um modelo para esclarecer um recurso de LLM. Se o app usando um modelo de IA diferente, você precisará fornecer parâmetros distintos. Atualize a lista a seguir com base no seu MVP. Isso ajudará você a preencher o prompt na etapa 4.
Minha matéria sobre o LLM:
- O que os usuários fornecem: [ que informações o usuário precisa fornecer]
- O que a IA deve fazer: [gerar, resumir, analisar, recomendar, conversar]
- O que os usuários veem: [ qual resultado]
- Estilo e tom do conteúdo: [ Amigável, educativo, curto, detalhado?]
- Temperatura:
- Baixa temperatura (0,1-0,3): respostas consistentes e previsíveis
- Alta temperatura (0,7-1,0): respostas mais variadas e criativas
- Comprimento da saída: lembre-se de que os tokens de saída custam dinheiro, portanto, manter as respostas curtas ajudará a reduzir os custos da API de IA.
- Exemplo de interação:
- O usuário insere: [exemplo de entrada]
- Respostas da IA: [exemplo de resultado]
Escrever um par concreto de entrada/saída obriga você a pensar exatamente no que seria “bom” para o app.
2. Cadastre-se no Groq e obtenha uma chave API
- Acesse groq.com e cadastre-se.
- Clique em Chaves API e, em seguida, em Criar chave API. Dê-lhe um nome apropriado e, em seguida, copie a chave API e guarde-a em local seguro.
3. Adicione uma chamada de API com a ajuda do Copilot
- Peça ao Copilot para adicionar a integração da API ou peça a outro LLM para gerar o código que você pode copiar e colar no seu espaço de código.
Aqui está um modelo que você pode usar e substituir por recursos/APIs para seu próprio aplicativo. Observe que precisamos de um servidor backend para chamadas de API.
À esquerda está o modelo que você pode usar e substituir por recursos/APIs para seu próprio aplicativo. Observe que exigimos um servidor backend para chamadas de API.
À direita, há um exemplo usando o modelo para nosso aplicativo TutorMatch.
No momento, quando o usuário faz X, o aplicativo exibe dados provisórios. Você deve substituí-los por uma chamada real da API de IA.
Quando o usuário clica no botão:
- Pegue o texto inserido pelo usuário
- Envie para [serviço de IA] com esta instrução: “xxx”
- Substitua os dados provisórios existentes e exiba a resposta da IA na área de resultados.
Mantenha a mensagem de carregamento enquanto aguarda a resposta da IA
Estilo e tom do conteúdo:
Estilo: [estilo de conteúdo profissional?]
Tom: [respeitoso, amigável?]
Comprimento [mantenha abaixo de 200 palavras]
Requisitos técnicos:
Backend:
– Servidor Node.js + Express
– Rota API POST /api/analyze que chama a API.
– Use a variável de ambiente do arquivo .env
Front-end:
– Deve chamar a rota do backend
– mostrar o resultado na interface do usuário
– lidar com carregamento/erros.
No momento, quando o usuário pressiona o botão, o aplicativo exibe dados provisórios. Você deve substituí-los por uma chamada real da API de IA.
Quando o usuário clica em “Obter recomendações”:
- Pegue o texto da descrição do assunto inserido
- Envie para o Groq com esta instrução: “Com base nas estudante deste estudante , recomende o TIPO de tutor que ele deve procurar. Forneça três características ou habilidades específicas que o tutor ideal deve ter. Concentre-se nas qualificações do tutor, não nos nomes reais dos tutores.” Responda de forma útil e encorajadora. As respostas devem ser três pontos, cada um com duas a três frases descrevendo as características do tutor a ser procurado.
- Exiba a resposta da IA na área de resultados (substitua as recomendações do espaço reservado).
Mantenha a mensagem “Analisando suas necessidades...” enquanto aguarda a resposta da IA.
Requisitos técnicos:
Backend:
– Servidor Node.js + Express
– Rota API POST /api/analyze que chama a API.
– Use process.env.API_KEY.
Front-end:
– Deve chamar a rota do backend
– mostrar o resultado na interface do usuário
– lidar com carregamento/erros
4. Adicione a chave API ao arquivo .env
O Copilot deve orientá-lo a adicionar sua chave de API ao arquivo arquivo .env , que ele também deve criar. Caso contrário, crie o arquivo .env você mesmo no Gerenciador de Arquivos, na pasta servidor ou api (dependendo de qual pasta o Copilot criou para o backend). Certifique-se de NÃO adicioná-lo à raiz .env , pois isso não é seguro (e seu backend não consegue acessá-la nesse local).
Adicione esta linha ao seu server/.env :
API_KEY=sua_chave_api
5. Teste com entradas reais de usuários
Assim que o Copilot concluir a programação, siga as instruções de instalação. Ele deve adicionar os requisitos de pacotes adequados ao package.json para você. Para testar:
- Na janela do terminal, digite:
npm executar dev
Isso inicia o app uma nova janela do navegador.
- Você também precisa executar o servidor backend. Na janela do terminal, clique no ícone + e abra uma segunda janela do terminal.
- Digite npm run dev na segunda janela do terminal para iniciar o servidor backend. Isso será executado em uma segunda janela do navegador.
- Vá para a janela do navegador que está executando o aplicativo.
- Digite uma consulta de usuário (como o que usuários reais digitariam).
- Clique no botão de ação.
- Confirme se a mensagem de carregamento aparece.
- Aguarde a resposta da IA.
- Determine se você recebe uma resposta. Verifique o que é retornado e se isso atende aos seus requisitos.
- Se você receber uma mensagem de erro, faça o diagnóstico com a ajuda do Copilot para identificar o erro e corrigi-lo. Aqui estão alguns erros comuns ao adicionar uma chamada à API do LLM:
- Chave API ausente/inválida – Nome da variável de ambiente incorreto ou chave não carregada
- Erros CORS – Chamando a API diretamente do front-end em vez do back-end
- Nome do modelo incorreto – Erro de digitação ou modelo não compatível com essa API
- Limite de taxa atingido – Muitas solicitações muito rápidas
- Solicitação malformada – Nomes ou estrutura de parâmetros incorretos
- Servidor não está funcionando – O front-end funciona, mas o back-end não foi iniciado
Lista de verificação rápida para depuração:
- Verifique se há mensagens de erro no console do terminal do servidor backend.
- Verifique a guia de rede nas ferramentas de desenvolvimento para front-end (aplicativo real) para ver a solicitação/resposta.
- Envolva a chamada da API em try-catch e registre o erro completo.
6. Confirme suas alterações
Quando estiver satisfeito com o funcionamento da chamada da API de IA (ou outra) e com o envio das respostas adequadas, prepare e confirme suas alterações no branch do seu repositório.
Configurando o prompt de IA
A maior parte da indústria de IA (OpenAI, Anthropic, Mistral, Groq) usa este formato para prompts:
messages: [{role, content}]
Ao separar o prompt padrão do conteúdo específico do usuário (no nosso caso, em qual assunto ele precisa de ajuda), você pode economizar no uso de tokens, o que acaba resultando em economia nos custos da API.
Definir uma função do sistema também faz com que sua IA responda de forma consistente todas as vezes, para que os usuários saibam o que esperar do o app. Sem isso, as respostas podem variar de forma imprevisível entre as sessões.
Compreendendo as instruções do sistema e os custos dos tokens:
Ao fazer uma chamada de API para o Groq, você pode enviar duas funções:
- Sistema – Define COMO a IA deve se comportar
- Usuário – A pergunta ou contribuição real
Ambos são enviados em TODAS as solicitações.
O Groq trata as instruções do sistema exatamente da mesma forma que os comandos do usuário— elas são cobradas como tokens de entrada.
- Solicitação do sistema: Cada palavra nas instruções do sistema é tokenizada e adicionada à conta de “entrada”.
- Solicitação do usuário: Adicionado ao total.
- Cálculo: Total de tokens de entrada = (tokens do sistema) + (tokens do usuário) + (tokens do histórico de bate-papo).
A Groq introduziu recentemente o Cache automático de prompts (no final de 2025/início de 2026).
Se várias solicitações começarem com o mesmo prompt do sistema, o Groq “armazena em cache” essa parte da mensagem.
- No nível pago, os tokens armazenados em cache costumam ser 50% mais baratos.
- No nível gratuito, os tokens armazenados em cache não contam para os seus limites de taxa da mesma forma. Isso significa que, se você usar um prompt de sistema longo e complexo, apenas a pergunta exclusiva do “usuário” “consumirá” sua cota gratuita limitada.
Protegendo suas chaves API
Até agora, você garantiu que suas chaves API estão seguras, armazenando-as no arquivo .env no o projeto. Esse .env é mantido localmente no seu computador e não faz parte do seu repositório Github. Isso é proposital e é uma boa medida de segurança.
No entanto, .env funciona no seu ambiente de desenvolvimento local, mas não funcionará quando você for implantá-lo. Ou se outros colegas de equipe estiverem trabalhando no projeto, em um branch separado. Eles não têm acesso à sua chave ou ao seu .env (a menos que você os compartilhe de outra forma).
O GitHub Secrets resolve esse problema de compartilhamento armazenando valores confidenciais separadamente do seu código. A chave é criptografada e só é carregada quando você executa o app Codespaces. Seu código pode usar a chave sem nunca contê-la. Qualquer pessoa que acessar seu repositório terá acesso à chave, embora nunca possa visualizá-la, pois ela está criptografada. Contanto que você mantenha seu repositório privado e apenas os membros da equipe tenham acesso, sua chave poderá ser usada pela sua equipe, mas não pelo mundo exterior (ainda)! Você aprenderá mais sobre onde armazenar suas chaves de API quando chegar à fase de implantação o app. Isso dependerá da sua plataforma de implantação.
Aqui estão algumas razões para usar o GitHub Secrets:
- As chaves nunca aparecem nos seus arquivos de código ou no histórico de commits.
- Os membros da equipe podem fazer a implantação sem ver os valores reais das chaves.
- Você pode alterar as chaves sem alterar o código.
- Necessário para implantações automatizadas (GitHub Actions, plataformas em nuvem)
Embora isso possa ser um exagero para o seu MVP, é bom colocá-lo em prática. Além disso, tornará seu desenvolvimento e depuração muito mais rápidos.
Como os segredos do GitHub funcionam no Codespaces:
Quando você abre um Codespace para este repositório, o GitHub carrega automaticamente seus segredos como variáveis de ambiente. Você não precisa de um .env . O segredo aparecerá no seu código do lado do servidor. No entanto, como você criou um .env , continue usando-o enquanto estiver desenvolvendo o app. O Codespace usará a chave secreta do Codespace, mas também procurará por .env se a chave secreta não existir. Dessa forma, se você decidir trabalhar o projeto (não no Codespaces), ele ainda funcionará.
Para o projeto, você utilizará duas camadas de segurança:
- Segredos do GitHub – Mantenha as chaves fora dos seus arquivos de código
- Restrições da API – Limite o que as chaves podem fazer e onde elas funcionam
Você configurará ambos, além de configurar o prompt do seu sistema de IA na Atividade 4.
ATIVIDADE 4
Configure o AI Prompt e proteja as chaves API
Tempo estimado: 30 minutos
Nesta atividade, primeiro configuraremos um prompt do sistema para garantir a consistência e economizar no uso de tokens. Em seguida, adicionaremos nossa chave ao GitHub Secrets.
1. Encontre e analise o prompt da API de IA
Para o nosso exemplo, definiremos uma função do sistema com conteúdo sobre como responder, seguida pela função do usuário, com a solicitação específica desse usuário em particular. Para o seu prompt de IA específico, será diferente.
O Groq armazenará o prompt do sistema em cache, exibindo-o nos prompts subsequentes, e não o contará no uso do seu token.
- Verifique o código em server.js (ou qualquer que seja o nome que o Copilot deu ao seu arquivo de servidor backend) para ver como ele está enviando o prompt. Aqui está o que ele enviou para o nosso exemplo:
No nosso caso, userInput está incorporado no meio de um único prompt. Qualquer coisa após o userInput é contado em todas as chamadas de API.
- Veja como o Copilot configurou seu prompt de IA.
2. Divida o prompt em funções do sistema e do usuário
- Peça ao Copilot para dividir o prompt em duas funções: sistema e usuário. Coloque a linguagem padrão sobre como responder na função do sistema e apenas o prompt do usuário na função do usuário. Aqui está um exemplo de prompt.
Por favor, separe o prompt padrão para a função do sistema e o desafio estudantecom a entrada do usuário para a função do usuário ao solicitar.
- Verifique o código gerado pelo Copilot. Ele deve ter dividido o prompt em duas funções, cada uma com seu próprio prompt. Seu prompt de usuário deve ser muito conciso, o que ajuda a manter baixos os custos da API.
Aqui está o código resultante que o Copilot gerou para nós.
const systemPrompt = `You are an expert tutor advisor. Based on what a student is struggling with, recommend what TYPE of tutor they should look for. Provide 3 specific characteristics or skills the ideal tutor should have. Focus on tutor qualifications, not actual tutor names. Provide the response in a professional yet friendly tone. Keep it under 100 words. Format the response as a numbered list of 3 characteristics.`;
const userPrompt = `Student's challenge: "${userInput}"`;
// Groq API call
const groqUrl = 'https://api.groq.com/openai/v1/chat/completions';
const model = 'llama-3.3-70b-versatile';
try {
const groqResponse = await fetch(groqUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.GROQ_API_KEY}`,
},
body: JSON.stringify({
model,
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: userPrompt },
],
max_tokens: 300,
}),
})
O systemPrompt e userPrompt são definidos separadamente no início. Nosso userPrompt será muito curto, contendo apenas “desafioestudante: ” seguido pelo que o usuário digitar no formulário.
3. Refinar com base nos resultados
Agora que você já lidou com o formato do prompt, verifique as respostas reais que o Groq lhe dá.
É muito provável que suas primeiras tentativas não produzam resultados perfeitos. Isso é normal e esperado. O desenvolvimento de aplicativos, especialmente se envolver IA, é iterativo.
Se as respostas não estiverem corretas, refine o prompt do sistema para o Groq. Você pode atualizá-lo para solicitar informações como:
- “Mantenha as respostas com menos de 100 palavras.”
- Certifique-se de que o tom seja amigável e encorajador.
- “Adicione uma chamada à ação no final de cada resposta.”
- Os pontos principais devem ser numerados.
Cada refinamento deve se basear no seu aplicativo existente. Você também pode adicionar uma configuração de temperatura para garantir que a resposta atenda às suas necessidades.
4. Testar casos extremos
Os usuários digitarão coisas inesperadas. Você precisa testar esses casos extremos agora para que, quando os usuários reais chegarem, o app lidar com eles sem travar ou parecer defeituoso. Isso cria confiança com seus primeiros usuários.
- Teste casos extremos para garantir que o app os problemas de maneira adequada:
- Entrada vazia – submeter digitar nada. O aplicativo consegue lidar com isso?
- Entrada muito longa – Digite muito texto. Ainda funciona?
- Entrada inesperada – Experimente um texto aleatório. O que acontece?
- Cliques rápidos – Clique no botão várias vezes rapidamente. Ele envia várias solicitações?
- Se você encontrar problemas, pode descrevê-los ao Copilot da seguinte forma:
- Quando o usuário enviar uma entrada vazia, mostre uma mensagem pedindo que ele insira algo.
- Quando a entrada for muito longa, corte-a em 500 caracteres antes de enviá-la para a IA.
- “Desative o botão enquanto aguarda uma resposta da IA e reative-o quando a resposta chegar. Isso evita que os usuários enviem várias solicitações acidentalmente.”
Esse padrão para desativar o botão pode ser importante: ele evita chamadas de API desnecessárias e mostra aos usuários que algo está acontecendo. Durante demonstrações, isso também evita momentos constrangedores em que várias respostas podem aparecer ao mesmo tempo.
5. Encontre a(s) chave(s) API no seu código
Agora que o prompt de IA e a chamada de API estão funcionando bem, vamos passar para a chave de API e protegê-la melhor.
É uma boa ideia poder ver e entender como o seu servidor backend está acessando sua chave API.
Procure por um código como:
const API_KEY = process.env.API_KEY;
Procure em server.js ou em qualquer outro arquivo ao qual o Copilot tenha adicionado seu código de back-end. No nosso caso, usamos GROQ_API_KEY como nossa variável de ambiente, que adicionamos ao .env e o servidor usa process.env.GROQ_API_KEY para extrair a chave de .env.
6. Adicione sua chave API Groq aos Segredos do GitHub
O GitHub Secrets mantém suas chaves fora do controle de versão e permite o app seja implantado sem expor credenciais. Isso evita que as chaves apareçam no seu histórico de commits, onde poderiam ser descobertas mesmo depois de excluídas.
- Acesse o GitHub -> Clique no seu perfil no canto superior direito da tela -> Configurações (ícone de engrenagem).
- Na barra lateral esquerda, clique em Codespaces.
- Clique em Novo Segredo.
- Em Nome, insira: GROQ_API_KEY (ou o nome apropriado para a API que você está usando)
- Copie e cole sua chave API GROQ (ou outra), seja do local onde você a armazenou com segurança no seu computador, seja do arquivo .env o projeto.
- Selecione seu repositório.
- Clique em Adicionar segredo.
7. Teste se a chave API ainda funciona
- Execute o app , lembrando-se de iniciar o servidor backend E o app npm run dev.
- Teste com uma chamada à API para garantir que ela funciona.
- Se você realmente quiser verificar se o segredo do GitHub está funcionando, você pode temporariamente remova a linha de .env, e execute o aplicativo novamente. É provável que ele não funcione. Talvez seja necessário reconstruir o contêiner do Codespace:
- No Codespace, pressione Ctrl+Shift+P ou Cmd+Shift+P para abrir a Paleta de Comandos.
- Digite “Codespaces: Rebuild Container” para encontrá-lo na lista.
- Escolha “Reconstrução completa”.
- Certifique-se de adicionar a chave de volta ao seu .env para seguir as melhores práticas durante o desenvolvimento.
8. Verifique se sua chave API está realmente protegida
Este é o passo mais importante, pois confirma que sua segurança realmente funciona.
- Execute o app e o servidor backend).
- Abra as Ferramentas do Desenvolvedorna janela em que o aplicativo está sendo executado (F12 ou clique com o botão direito do mouse → Inspecionar).
- Vá para a guia Rede.
- Limpe todas as solicitações existentes.
- Faça uma solicitação de IA no o app.
- Observe as solicitações que aparecem.
Você deve ver uma solicitação para algo como localhost:3001/api/generate. O corpo da solicitação deve conter seu prompt, NÃO sua chave de API. Se você vir sua chave de API em qualquer cabeçalho ou corpo de solicitação, algo está errado!
9. Teste final
Antes de confirmar as alterações na chamada da API e na chave da API, faça uma verificação final para testar se tudo funciona conforme o esperado.
- Verifique:
- Shell da interface do usuário: Sua interface do usuário é exibida corretamente?
- Fluxo de interação: os botões e entradas funcionam?
- Integração de IA: O seu recurso de IA funciona?
- Casos extremos: você testou entradas vazias, entradas longas, etc.?
- Se você encontrar problemas, resolva-os com a ajuda do Copilot e/ou outros LLMs.
10. Atualize a documentação README
Quando o aplicativo foi criado pela primeira vez no GitHub, você adicionou uma descrição simples para o README .
É uma boa prática atualizar o arquivo README . Isso é especialmente importante se você estiver usando IA para geração de código, pois a IA sempre consulta essa documentação antes de fazer alterações.
- Vá até a pasta raiz principal e encontre o arquivo README.md .
- Adicione mais detalhes ao arquivo, explicando quais recursos estão presentes no aplicativo, a integração com IA, etc.
11. Faça o commit e mescle suas alterações
- Quando tiver certeza de que o código funciona conforme o esperado, faça o stage e o commit no branch.
- Acesse o GitHub, crie uma solicitação de pull e mescle seu branch de volta ao branch principal.
Você fez um grande progresso em seu MVP, começando pela interface do usuário da primeira tela, adicionando funcionalidades, mais telas, mais funcionalidades e, por fim, sua chamada de API de IA.
Você pode ter mais coisas para adicionar ao o app, mas lembre-se de incluir apenas os recursos MVP. Certifique-se de que esses recursos funcionem sem erros e conforme o esperado. Você terá usuários reais usando o app, portanto, o que você publicar deve estar em boas condições de funcionamento.
Pode ser necessário adicionar chamadas de API adicionais ao o app, caso tenha algo como login de usuário ou armazenamento em nuvem no o app. Lembre-se de fazer isso passo a passo e testar à medida que adiciona cada nova parte.
Reflexão
Você dedicou bastante tempoprogramação criar o primeiro rascunho do seu MVP! Aqui estão algumas questões a serem consideradas:
Termos-chave
- Abordagem iterativa: Desenvolver software em pequenas partes (tela por tela), testando após cada parte, em vez de desenvolver tudo de uma vez. Detecta problemas antecipadamente e facilita a depuração.
- Construção tela por tela: adicionar uma tela de cada vez, testando a navegação antes de adicionar a próxima. Cada tela é um “pedaço” na abordagem iterativa.
- Solicitação do sistema: instruções que definem como um LLM responde — seu tom, formato, comprimento e restrições. Você praticou isso em Tech 2 com o Feedback Analyzer.
- Front-end: a parte do o app veem e com a qual interagem. É executada no navegador. Tudo o que você criou na Atividade 1 é front-end.
- Segredos do GitHub: armazenamento criptografado para chaves de API no GitHub. As chaves nunca aparecem no código ou no histórico de commits. Elas são carregadas automaticamente quando você abre o Codespaces.
- Estado de carregamento: Feedback visual (como “Procurando o tutor ideal para você...”) exibido enquanto se aguarda a resposta da IA. Essencial, pois as chamadas da IA levam vários segundos.
- Caso extremo: entradas incomuns (vazias, muito longas, fora do tema) que testam a capacidade o app situações inesperadas. Testar essas entradas evita falhas embaraçosas durante as demonstrações.
Recursos adicionais
- GitHub Codespaces: Ambientes de desenvolvimento em nuvem
- Documentação do GitHub Secrets: armazenamento seguro de chaves API
- Hugging Face Inference API: Acesso a modelos de ML para previsão
- Documentação da API Groq
- Documentação do Tailwind CSS: Referência de estilo para código gerado
- Documentação do React: Referência da estrutura para compreender o código gerado
- Git para iniciantes: Commit e Push para o GitHub
