Preparando a IA para desenvolver aplicativos

1. Revisão do ambiente (Aula 01)

Antes de orientar a IA para o ToDoList, confirme que o básico da Aula 01 continua válido. Não é necessário reinstalar tudo — apenas revisar o terminal integrado da IDE e as ferramentas que você já configurou. O aplicativo ToDoList ainda não existe; o projeto React Native será criado somente na Aula 03.

• Terminal integrado da IDE aberto (Cursor ou VS Code)
• Pasta de trabalho do curso identificada (ex.: ProjetosMobile)
• node --version, npm --version e git --version respondem no PowerShell
• Chat da IA disponível na IDE

Passo 1 — Abrindo o terminal da IDE

Abra o terminal integrado do Cursor ou do VS Code — é nele que você digitará os comandos desta revisão, sem fechar a IDE.

• Menu: Terminal → New Terminal (Novo terminal).
• Atalho (quando disponível): Ctrl+Shift+` (tecla crase/accent grave, geralmente abaixo de Esc). Em alguns teclados ou versões, o atalho pode diferir — use o menu se nada abrir.

O terminal integrado usa o PowerShell (ou o shell configurado na IDE) e permanece na mesma janela do projeto que você abriu.

Passo 2 — Identificando o diretório atual

Antes de navegar, descubra em qual pasta o terminal está. No Windows, com PowerShell:

Get-Location

O comando mostra o diretório de trabalho atual — a pasta “onde você está” no terminal. Quando você abre uma pasta como projeto na IDE (por exemplo ProjetosMobile), o terminal integrado costuma iniciar já nesse caminho, mas isso pode variar; por isso vale conferir.

PS C:\ProjetosMobile> Get-Location

Path
----
C:\ProjetosMobile

PS C:\ProjetosMobile>

Passo 3 — Navegando até a pasta de trabalho

Compare a saída de Get-Location com a pasta que você criou na Aula 01 (ex.: ProjetosMobile dentro do seu perfil). Se o caminho já for o correto, não é necessário executar cd.

Se o terminal abriu em outro lugar, vá até a pasta do curso (ajuste o caminho se você escolheu outro local). Exemplo:

cd "$HOME\ProjetosMobile"

Depois, execute Get-Location novamente para confirmar. Esta pasta guardará os projetos do curso; não crie aqui o app ToDoList nesta aula e não é obrigatório criar pastas novas — apenas usar a que você já preparou.

Passo 4 — Verificando as ferramentas

Com o terminal aberto, verifique se Node.js, npm e Git respondem. Copie e execute um comando por vez (ou os três em sequência):

node --version
npm --version
git --version

Cada comando deve exibir um número de versão. Essas verificações costumam funcionar em qualquer pasta, desde que as ferramentas estejam instaladas e no PATH do Windows — estar em ProjetosMobile prepara você para a Aula 03, mas não é requisito técnico para estes três comandos.

Passo 5 — Interpretando o resultado

Esperado (exemplos ilustrativos — as versões mudam com o tempo):

• node --version → linha como v22.x.x ou outra versão LTS.
• npm --version → linha como 10.x.x.
• git --version → linha como git version 2.x.x.

Se aparecer uma versão, a ferramenta está acessível no terminal. Se o PowerShell disser que o comando não é reconhecido, volte à Aula 01 (instalação e PATH) antes de continuar — não reinstale nem altere configurações avançadas sem entender o passo indicado naquela aula.

Como verificar: anote o que está OK e o que falhou. Só avance para o tópico 2 quando Node, npm e Git responderem ou quando você tiver um plano claro para corrigir com base na Aula 01.

Ferramentas globais e dependências do projeto

Ferramentas disponíveis no sistema. Node.js, npm e Git são programas instalados no computador. O Windows expõe esses comandos no terminal quando o instalador configurou o PATH corretamente — por isso node --version funciona na pasta do curso ou em outra.

Dependências locais. São bibliotecas instaladas para um projeto específico, listadas no package.json e guardadas na pasta node_modules daquele projeto. O ToDoList terá dependências locais a partir da Aula 03, quando o projeto Expo existir. Nesta etapa, não instale pacotes globais “no lugar” das dependências que o curso instalará no projeto.

2. Papel da IA no desenvolvimento

A IA na IDE é um assistente: explica conceitos, sugere passos, propõe trechos de código e ajuda a interpretar erros. Você continua sendo quem executa comandos no terminal, revisa alterações, testa no emulador ou celular e decide o que entra no projeto.

Contexto do projeto. A IA enxerga melhor quando você abre a pasta correta na IDE (ex.: ProjetosMobile), menciona arquivos com @ quando disponível, anexa capturas relevantes e, depois, usa Project Rules (tópico 4). Sem contexto, as respostas ficam genéricas.

Três formas de usar o chat neste curso:

• Planejamento — pedir roteiro, checklist ou análise sem alterar arquivos (modo pergunta / Ask ou equivalente).
• Perguntas — tirar dúvidas sobre conceitos, comandos ou mensagens de erro; você executa no terminal.
• Execução assistida — modo agente (Agent ou similar) que propõe edits; só aceite depois de ler o diff e entender o plano.

Modelos e seletores de modo variam conforme a versão do Cursor ou do Copilot — você já explorou isso na Aula 01, seção do chat. Para aprender, prefira planejamento e perguntas; use execução assistida em passos pequenos.

• Limites: modelos podem errar, inventar APIs ou APIs desatualizadas; por isso validamos com documentação (Context7) e testes.
• Revisão: trate toda sugestão como rascunho — leia, teste e corrija antes de considerar “pronto”.
• Segurança: não cole senhas, tokens ou chaves de API no chat; use placeholders nos exemplos.

3. Arquitetura de referência (introdução)

Quando criamos um aplicativo, não basta só fazer telas bonitas ou escrever código que “funciona”. Também precisamos organizar o projeto para que ele seja mais fácil de entender, testar, corrigir e evoluir.

É isso que chamamos de arquitetura.

Pense na arquitetura como a forma de organizar as responsabilidades do aplicativo:

• a parte que mostra a interface;
• a parte que decide as regras do negócio;
• e a parte que guarda e recupera os dados.

No curso ToDoList, usaremos uma combinação simples de três ideias:

• Clean Architecture
• MVVM
• Composition Root

Você não precisa dominar isso agora. Nesta aula, a meta é apenas entender o papel de cada parte. Na Aula 03, quando criarmos o projeto Expo, vamos começar a aplicar isso na prática.

Clean Architecture — separar responsabilidades

A Clean Architecture nos ajuda a dividir o aplicativo em camadas, para que cada uma tenha uma função clara.

Ideia central: a interface não deve saber de tudo. Ela não precisa decidir regras de negócio e não deveria acessar diretamente o armazenamento.

Em vez disso, cada parte cuida do seu papel.

No ToDoList, podemos pensar assim:

• Apresentação (UI): mostra a tela, botões, listas e mensagens.
• Regras do negócio (Domain / Use Cases): decide o que significa criar uma tarefa, concluir uma tarefa, filtrar tarefas, validar um título e ordenar por prioridade.
• Dados (Data / Infraestrutura): guarda e recupera informações, por exemplo com AsyncStorage.

Vantagem: se amanhã você quiser trocar o local onde os dados são salvos, a ideia é mexer o mínimo possível na interface.

MVVM — organizar a camada de apresentação

MVVM significa:

• Model
• View
• ViewModel

No nosso contexto, ele ajuda a organizar a parte da tela.

View
É a interface visual. No React Native, é a tela com componentes como View, Text, TextInput, TouchableOpacity e FlatList.

A View mostra os dados e envia eventos, como:

• clicou no botão salvar;
• digitou o nome da tarefa;
• tocou em concluir.

ViewModel
É a parte que prepara os dados para a tela e reage às ações do usuário.

Ele não desenha a interface, mas ajuda a View respondendo perguntas como:

• quais tarefas devem aparecer?
• a tarefa pode ser concluída?
• esta lista está carregando?
• houve erro?

Também é o ViewModel que conversa com os casos de uso.

Model
Aqui podemos entender como os dados usados pela tela, como tarefa, prioridade, filtros e estado da lista. Em React Native, esse “Model” costuma aparecer como entidades, objetos de domínio e estado exposto ao ViewModel.

Ideia prática do MVVM: a tela fica mais limpa porque não mistura layout com regra de decisão.

Como Clean Architecture e MVVM trabalham juntos

Esses dois conceitos não competem. Na verdade, eles se complementam.

• MVVM ajuda a organizar a camada de apresentação.
• Clean Architecture ajuda a organizar o aplicativo como um todo.

Em resumo:

1. A View mostra a tela.
2. O ViewModel recebe ações da tela.
3. O ViewModel chama um Caso de Uso.
4. O Caso de Uso aplica a regra do negócio.
5. O Repositório salva ou busca os dados.
6. A resposta volta para o ViewModel.
7. O ViewModel atualiza a View.

Composition Root — onde montamos as dependências

O Composition Root é o lugar onde organizamos quem depende de quem. É como um ponto central de montagem.

Por exemplo:

• a tela depende de um ViewModel;
• o ViewModel depende de um Caso de Uso;
• o Caso de Uso depende de um Repositório;
• o Repositório depende do AsyncStorage.

Em vez de criar tudo espalhado pelo app, tentamos montar essas ligações em um lugar mais previsível.

Por que isso ajuda? Porque evita:

• código confuso,
• dependências circulares,
• imports bagunçados,
• acoplamento desnecessário.

Exemplo prático com o ToDoList

Imagine que o usuário toque no botão “Concluir tarefa”.

O fluxo pode ser assim:

1. A View detecta o clique.
2. A View chama o ViewModel.
3. O ViewModel aciona o caso de uso ConcluirTarefa.
4. O caso de uso valida a ação e pede ajuda ao Repositório.
5. O repositório atualiza os dados no AsyncStorage.
6. O resultado volta para o ViewModel.
7. O ViewModel atualiza o estado da tela.
8. A View mostra a tarefa como concluída.

Resumo rápido

• View → mostra a tela
• ViewModel → prepara e controla o estado da tela
• Use Case → aplica a regra do negócio
• Repository → conversa com a fonte de dados
• Storage → guarda os dados

4. Cursor Rules vs prompts avulsos

ProjetosMobile/
  cursor-rules-todolist/
    .cursor/
      rules/

New-Item -ItemType Directory -Path ".\cursor-rules-todolist\.cursor\rules" -Force

Get-ChildItem -Force ".\cursor-rules-todolist\.cursor"

$rules = ".\cursor-rules-todolist\.cursor\rules"
New-Item -ItemType File -Path "$rules\01-diretrizes-gerais.mdc" -Force
New-Item -ItemType File -Path "$rules\02-arquitetura.mdc" -Force

---
description: Diretrizes gerais do curso ToDoList — Academia PHR Software
alwaysApply: true
---

# Diretrizes gerais

- Stack: React Native, Expo, TypeScript. Iniciante supervisionado.
- A IA sugere; o aluno executa comandos no terminal e revisa cada diff.
- Não instalar pacotes nem alterar arquivos sem explicar o plano antes.
- Preferir mudanças pequenas e testáveis; uma feature por vez.
- Não incluir segredos (API keys, senhas) em código ou commits.
- Comentários só quando a regra de negócio não for óbvia.
- Responder em português do Brasil, nomes de código em inglês.
- Em dúvida sobre API ou versão, consultar documentação via Context7 MCP.

---
description: MVVM, Clean Architecture, Composition Root e separação de camadas — ToDoList Academia PHR
alwaysApply: false
---

# Arquitetura

- Camadas: presentation (screens, components, viewmodels), domain (entities, use cases), data (repositories, storage).
- ViewModels expõem estado imutável ou hooks claros; telas não acessam AsyncStorage diretamente.
- Casos de uso orquestram regras; repositórios implementam interfaces definidas no domain.
- Composition Root: wiring de dependências em um módulo único (ex.: app/di ou app/composition).
- Evitar arquivos com mais de ~200 linhas — extrair subcomponentes ou use cases.
- Testes e persistência serão introduzidos nos módulos correspondentes do curso.

5. MCP (Model Context Protocol) e Context7

MCP significa Model Context Protocol — um padrão para conectar aplicações de IA a ferramentas e fontes externas (documentação, repositórios, arquivos, navegador, etc.).

Analogia

A IA é como um assistente que sabe conversar e raciocinar. O MCP permite que esse assistente utilize ferramentas específicas — consultar documentação, acessar repositórios ou executar testes — conforme as permissões que você autorizar. Instalar um MCP não significa acesso irrestrito ao seu computador ou às suas contas.

No curso ToDoList, quando precisarmos consultar a documentação atual do Expo, poderemos pedir à IA que utilize o Context7, em vez de depender apenas do conhecimento que o modelo já possui (que pode estar desatualizado).

Modelo, cliente, servidor e ferramentas

• IA / modelo: gera texto e raciocina sobre o pedido.
• Cliente MCP (Cursor): interface onde você conversa; orquestra quando chamar um servidor MCP.
• Servidor MCP: programa ou serviço que expõe capacidades (ex.: Context7).
• Ferramentas: ações concretas que o servidor oferece (ex.: buscar docs de uma biblioteca).

O acesso depende da configuração (global ou por projeto), do servidor escolhido e das permissões que o Cursor solicitar. Revise sempre o que está sendo habilitado.

Como o Cursor utiliza um MCP

Aluno faz uma pergunta

↓

Cursor / Agente de IA

↓

Servidor MCP

↓

Ferramenta ou fonte de informação

↓

Resultado retorna ao Cursor

↓

Cursor apresenta uma resposta ao aluno

1. Context7 — instalação prática nesta aula

   Context7

   Documentação atualizada de bibliotecas (Expo, React Native, etc.).

2. Conhecer agora; instalar futuramente

   GitHub MCP

   Repositórios, issues e pull requests.

3. Conhecer agora; instalar futuramente

   Filesystem MCP

   Acesso controlado a arquivos e diretórios (cuidado com escopo).

4. Conhecer agora; instalar futuramente

   Playwright MCP

   Automação de navegador e testes web.

Instalando o Context7 no Cursor

Priorize o fluxo visual na interface atual do Cursor (ex.: versão 3.27.x). Os rótulos exatos podem mudar — confira na sua instalação.

1. Abra o Cursor.
2. Na barra lateral, selecione Customize.
3. Abra a aba ou filtro MCPs (pode aparecer como chip “MCPs” junto a Plugins, Skills, Rules, etc.).
4. Use o campo de pesquisa (ex.: “Search Plugins, Skills, MCPs…”) e digite Context7.
5. Identifique a integração oficial (origem Upstash / context7 — confira descrição e publisher).
6. Leia descrição, origem e permissões antes de instalar.
7. Selecione a opção de instalação ou habilitação oferecida (ou use Browse Marketplace, se for o caminho disponível na sua versão).
8. Conclua etapas de autorização, se o Cursor solicitar.
9. Verifique se o servidor Context7 aparece como habilitado (status conectado ou equivalente).
10. Confira quais ferramentas o servidor expõe (nomes podem variar).

Se Context7 não aparecer na pesquisa, use a configuração manual na seção abaixo ou siga o guia oficial: Context7 — cliente Cursor.

Toque ou clique na imagem para ampliar.

Configuração manual — alternativa

Use quando a instalação pela interface não estiver disponível ou para aprender como o Cursor armazena servidores MCP.

• Global (usuário): %USERPROFILE%\.cursor\mcp.json no Windows.
• Por projeto: .cursor/mcp.json na raiz do repositório aberto (útil a partir da Aula 03).
• Remoto: URL https://mcp.context7.com/mcp — o Cursor conecta ao serviço na nuvem; autenticação conforme modalidade (chave de API pode aumentar limites).
• Local: comando npx executa @upstash/context7-mcp na sua máquina — exige Node compatível.

Node.js (servidor local): a documentação atual do pacote Context7 exige Node.js >= 20.18.1 para o MCP local via npx. Confira com node --version (Aula 01). Se estiver abaixo disso, atualize o Node antes do modo local ou prefira o servidor remoto.

Chave de API: nem todo modo exige chave; uso anônimo ou sem chave pode ter limites menores. Não é obrigatória em todos os cenários — consulte context7.com e a documentação vigente. Nunca commite chaves reais nem cole credenciais em prompts.

Documentação: Cursor — MCP, Context7 no GitHub.

Após editar mcp.json, reinicie o Cursor.

Exemplo — servidor local (sem chave no arquivo)

Pode funcionar com limites; para produção de estudo, avalie adicionar --api-key conforme a doc.

mcp.json — Context7 local (alternativa) Copiar prompt

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Exemplo — servidor local com API key (placeholder)

mcp.json — Context7 local + API key Copiar prompt

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest", "--api-key", "SUA_API_KEY_AQUI"]
    }
  }
}

Exemplo — servidor remoto

mcp.json — Context7 remoto Copiar prompt

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "Authorization": "Bearer SUA_API_KEY_AQUI"
      }
    }
  }
}

O nome do header pode variar conforme a documentação Context7/Cursor — use o exemplo do guia oficial se diferir.

Teste prático do Context7

Ver na lista de MCPs não basta: faça uma pergunta que exija consulta à documentação e confira se o Cursor invocou uma ferramenta Context7 (indicador de tool call, log ou painel de MCP, conforme sua versão).

Prompt — teste Context7 + Expo Copiar prompt

Consulte a documentação atual do Expo utilizando o Context7. Explique qual é a finalidade do Expo em um projeto React Native e apresente a fonte consultada. Não crie arquivos nem execute comandos. Apenas apresente o resultado.

Confira:

• Se o Cursor utilizou a ferramenta Context7 (não só respondeu “de memória”).
• Se houve resposta com referências ou trechos ligados à documentação.
• Se apareceu pedido de permissão ou aprovação de ferramenta.
• Se ocorreu erro de autenticação, conexão ou versão do Node (modo local).

Compare pontualmente com docs.expo.dev.

Segurança e boas práticas

• Instale MCPs somente de fontes confiáveis.
• Examine permissões solicitadas (arquivos, rede, contas).
• Não compartilhe chaves de API no chat nem versione mcp.json com segredos.
• Não habilite ferramentas sem necessidade para o ToDoList.
• Revise ações que modificam arquivos ou serviços externos — o Cursor pode pedir aprovação.
• MCP não garante respostas corretas; você continua validando conteúdo e fontes.

Exercício — Seu primeiro MCP

• Entendi o que é MCP
• Conheci as quatro integrações propostas
• Localizei a seção MCPs no Cursor (Customize)
• Configurei o Context7 (interface ou manual)
• Verifiquei o estado da conexão
• Fiz uma consulta à documentação do Expo
• Conferi se a ferramenta Context7 foi utilizada
• Entendi os cuidados com permissões e credenciais

6. Prompts estruturados

Use esta estrutura simples em português (rótulos podem variar, mas a lógica permanece):

1. Objetivo — o que você quer obter nesta mensagem.
2. Contexto — curso, stack, fase do ToDoList, arquivos ou capturas relevantes.
3. Restrições — o que não pode acontecer (sem código, sem novas libs, etc.).
4. Resultado esperado — formato da resposta (checklist, passos, bullets).
5. Validação — como você saberá que a resposta serve antes da Aula 03.

Compare um pedido vago com um pedido estruturado:

Prompt — planejamento ToDoList (sem código)

Objetivo: listar funcionalidades do MVP do ToDoList (cadastro, listagem, concluir, excluir, prioridade simples) em ordem de implementação sugerida.

Contexto: curso Academia PHR Software — app didático ToDoList, React Native + Expo + TypeScript, arquitetura MVVM introdutória (Aula 02).

Restrições: não escrever código nem comandos nesta resposta; não assumir backend; linguagem simples para iniciante.

Resultado esperado: checklist numerado de 8 a 12 itens; cada item com critério de “pronto” testável no celular ou emulador.

Validação: ao final, liste três perguntas que eu devo responder antes de iniciar a Aula 03.

Prompt — revisão de proposta da IA

Você propôs o plano abaixo para o ToDoList:
[cole aqui o resumo da IA]

Atue como revisor crítico para iniciante:
1) O que está ambíguo?
2) O que depende de versão Expo/React Native que devemos confirmar no Context7?
3) Qual o menor próximo passo que eu posso executar sozinho?

Não altere arquivos. Resposta em português, bullets curtos.

7. Capturas de tela (Windows)

Capturas ajudam a IA a entender layout, erros visuais e configurações — desde que você proteja dados sensíveis.

• Atalho: Windows + Shift + S — recorte da área desejada; imagem vai para a área de transferência (cole no chat quando a IDE permitir anexo).
• Ferramenta de Captura: menu Iniciar → “Captura de tela” / Snipping Tool — útil para anotações e atraso temporizado.

Como verificar: faça uma captura do painel MCP ou do chat vazio e confira se nenhum dado confidencial aparece.

8. Terminal e logs

Saídas de terminal costumam trazer níveis implícitos:

• info — progresso normal (instalação, bundler iniciado).
• warning — algo suspeito, mas o processo pode continuar.
• error — falha; o comando ou app parou ou não completou a ação.

Copie a saída com botão direito no terminal ou seleção + Enter (PowerShell). No Cursor, também é comum selecionar o texto no painel Terminal e usar copiar do menu de contexto.

Ordem recomendada: primeiro peça diagnóstico (o que o log significa, causas prováveis); só depois peça correção ou comandos — assim você entende antes de aplicar mudanças.

Objetivo: explicar o que a saída abaixo significa e sugerir causas prováveis — sem executar comandos por mim.

Contexto: Aula 02 Academia PHR, app ToDoList ainda não criado, Windows + PowerShell.

Comando executado:
[cole o comando]

Saída completa do terminal:
[cole o log]

Restrições: não alterar arquivos; não pedir senhas nem tokens; resposta em português, bullets curtos.

Resultado esperado: (1) classificar info/warn/error; (2) hipóteses ordenadas; (3) próximo passo que EU devo testar manualmente.

Objetivo: sugerir correção pontual com base no diagnóstico anterior.

Contexto: [resuma o que você entendeu do erro]

Restrições: um passo de cada vez; comandos que EU executo no PowerShell; sem instalar ferramentas extras sem explicar por quê.

Validação: como confirmar que funcionou antes de seguir.

PS C:\Users\Aluno\ProjetosMobile> npx -y @upstash/context7-mcp --help
npm warn Unknown env config "devdir". This will stop working in the next major version of npm.
Error: Cannot find module '@upstash/context7-mcp'
    at Function._resolveFilename (node:internal/modules/cjs/loader:1383:15)
npm ERR! code ELSPROBLEMS

O exemplo acima é didático — serve para praticar leitura de Error e npm warn. No caso real, você checaria rede, versão do Node e configuração do MCP.

9. Fechamento e checklist para a Aula 03

Com o ambiente revisado e a IA “alinhada” por rules, MCP e prompts, você está pronto para a próxima etapa: criar o projeto React Native com Expo (ToDoList).

• Ambiente da Aula 01 verificado (Node, npm, Git, pasta de trabalho)
• Entendi papel da IA vs minha supervisão
• Li a visão introdutória de MVVM / Clean Architecture
• Salvei ou copiei os exemplos 01-diretrizes-gerais.mdc e 02-arquitetura.mdc
• Context7 MCP configurado e testado (ou anotei o bloqueio para resolver antes da Aula 03)
• Pratiquei pelo menos um prompt estruturado sobre o ToDoList (sem gerar código)
• Sei capturar tela no Windows sem vazar dados sensíveis
• Sei montar prompt de erro com comando + log + contexto

10. Referências

• Cursor — Rules
• Cursor — MCP
• Model Context Protocol
• Context7 MCP (Upstash)
• Documentação Expo
• Aula 01 — Preparando o ambiente