Criando o projeto ToDoList

1. Conhecendo React Native e Expo

1.1 O que é React Native?

React Native é uma tecnologia que permite criar aplicativos para celular usando JavaScript ou TypeScript. Em vez de desenhar telas “de mentira”, o framework usa componentes nativos — os mesmos tipos de elementos que o Android e o iPhone entendem nativamente.

No ToDoList, isso se traduz em coisas concretas: uma tela de boas-vindas, botões para adicionar tarefas, uma lista para exibi-las e gestos ou toques para marcar como concluídas. Você não precisa decorar a API agora; basta saber que React Native é a base que renderiza o app no dispositivo.

Documentação oficial: React Native — Getting Started.

1.2 O que é Expo?

Expo é um framework e um conjunto de ferramentas que facilita criar, executar e evoluir apps React Native. Ele oferece, entre outros benefícios:

• Comando único para iniciar o projeto e o servidor de desenvolvimento.
• Template oficial para começar rápido, sem montar toda a configuração manualmente.
• Acesso organizado a recursos comuns (ícones, splash, builds) conforme você avança no curso.
• Compatibilidade com teste no celular via Expo Go, quando o tipo de projeto permitir.

Documentação oficial: docs.expo.dev.

1.3 Como trabalham juntos?

React Native fornece a base para interfaces móveis; Expo organiza o fluxo de trabalho e acelera o dia a dia. Juntos, eles levam ao app didático do curso:

1.4 Por que escolhemos essas tecnologias?

Existem outras formas de criar apps — por exemplo Kotlin ou Swift para um sistema cada, ou Flutter com outra linguagem. Para iniciantes que querem um app multiplataforma (Android e iOS a partir de uma base comum) com curva de entrada mais suave, React Native com Expo é uma combinação prática: você acompanha o código com a IA, executa cedo no dispositivo e evolui o mesmo projeto ao longo das aulas.

Não faremos aqui uma comparação técnica entre frameworks — o foco é aprender fazendo o ToDoList com o stack escolhido do curso.

1.5 Como a IA participa?

A IA no Cursor não substitui você: ela sugere comandos, explica a estrutura e propõe arquivos. Você abre a pasta correta, confirma o plano, executa ou autoriza passos importantes e valida no celular ou emulador.

Utilize as Project Rules preparadas na Aula 02 (copiadas para .cursor/rules na raiz do ToDoList) e o MCP Context7 para consultar documentação atualizada do Expo e do React Native antes de fixar versões ou comandos.

2. Criando o projeto ToDoList

Este tópico concentra a prática da Aula 03. Siga as etapas na ordem; use prompts copiáveis quando indicado.

2.1 Preparando a pasta do projeto

Na Aula 01, você criou a pasta de trabalho ProjetosMobile (no local que escolheu — não assumimos unidade C: nem caminho fixo).

Agora o projeto do app ficará dentro dela, com este formato:

ProjetosMobile/
└── ToDoList/

• No Cursor, abra a pasta ProjetosMobile que você criou (File → Open Folder).
• O agente deve criar o projeto ToDoList como subpasta — evite aninhar ToDoList/ToDoList por engano.
• Confira com Get-Location no terminal integrado se está na pasta correta antes de rodar comandos.

2.2 Orientando a IA para criar o ToDoList

Assim que a pasta ToDoList existir, copie para .cursor/rules/ na raiz dela os dois arquivos .mdc da Aula 02 (01-diretrizes-gerais.mdc e 02-arquitetura.mdc) — passo a passo na seção Rules. Abra o projeto no Cursor antes de enviar o prompt abaixo.

Verificando a versão do Node.js

Na Aula 01 você instalou o Node.js (e o npm). Antes de criar o ToDoList, confirme as versões no terminal integrado — o Expo exige compatibilidade com o Node instalado.

node --version
npm --version

O terminal exibirá linhas como v22.x.x (Node) e 10.x.x (npm) — use o resultado real da sua máquina; os números acima são apenas exemplos de formato.

Copie ou anote as duas versões e informe-as à IA no prompt abaixo (substitua os marcadores antes de enviar).

Copie o prompt no chat do Cursor (modo Agent ou equivalente). Ajuste caminhos se sua pasta tiver outro nome ou local.

Objetivo: criar o projeto didático ToDoList com React Native e Expo dentro da pasta ProjetosMobile que já tenho aberta no Cursor.

Contexto: Academia PHR Software — Aula 03. Ambiente Windows + PowerShell. Rules do curso em .cursor/rules (copiadas da Aula 02). MCP Context7 disponível.

Minhas versões (substitua pelos resultados reais de node --version e npm --version):
- Node.js: [SUA_VERSAO_NODE]
- npm: [SUA_VERSAO_NPM]

Instruções:
- Consulte a documentação ATUAL do Expo via Context7 e verifique se minhas versões de Node/npm são compatíveis com o template e comandos que você recomendar.
- NÃO atualize o Node.js, npm nem altere o ambiente do sistema automaticamente — se houver incompatibilidade, explique o problema e proponha opções; peça minha autorização antes de qualquer mudança.
- Respeite as Project Rules do projeto.
- Use o template oficial adequado a iniciantes (TypeScript é bem-vindo se for o padrão do template; não precisa de aula extra só sobre TS).
- Crie o app na pasta ProjetosMobile/ToDoList (não crie ToDoList/ToDoList).
- NÃO implemente ainda cadastro, listagem ou gerenciamento de tarefas — apenas o projeto inicial executável.
- Apresente um PLANO numerado (comandos, arquivos criados, verificações) ANTES de executar qualquer comando.
- Peça minha confirmação explícita antes de operações importantes (instalação, sobrescrita, git remoto).
- Ao concluir, informe o que foi criado e como devo verificar (estrutura, npx expo start, erros comuns).

Restrições: não commitar nem fazer push sem meu pedido nesta etapa; não incluir segredos; responder em português do Brasil.

Personalizando a tela inicial (boas-vindas)

Com o projeto Expo criado e validado (npx expo start sem erro bloqueante), peça à IA para ajustar apenas a tela inicial — sem cadastro, listagem ou gerenciamento de tarefas (isso fica para a Aula 04). Revise o diff antes de aceitar.

Objetivo: personalizar a tela inicial do ToDoList (Expo) para a Academia PHR Software — Aula 03.

Contexto: projeto didático ToDoList já criado nesta pasta; Windows + PowerShell; Project Rules em .cursor/rules.

A tela deve exibir, de forma legível e organizada (layout simples, identidade visual sóbria da Academia — cores claras, boa hierarquia tipográfica, espaçamento confortável), os textos abaixo (pode usar Text/View padrão do React Native; emoji permitido na primeira linha):

1. Olá, mundo! 👋
2. Bem-vindo ao ToDoList
3. Meu primeiro aplicativo desenvolvido com React Native, Expo e inteligência artificial.
4. Academia PHR Software
5. Aula 03 — Primeiro aplicativo

Instruções:
- Altere SOMENTE o necessário para a tela inicial de boas-vindas (tela/rota principal do template).
- NÃO implemente cadastro, listagem, edição, exclusão ou persistência de tarefas.
- NÃO adicione bibliotecas desnecessárias.
- Apresente um plano curto (arquivos a tocar) ANTES de editar; peça minha confirmação.
- Após as alterações, indique como validar com npx expo start (Web com tecla W ou --web).

Restrições: não commitar nem fazer push; responder em português do Brasil.

2.3 Conhecendo a estrutura criada

Após a criação, um projeto Expo típico inclui pastas e arquivos semelhantes a estes (nomes podem variar conforme o template):

ToDoList/
├── app/          (telas e rotas — Expo Router, se o template usar)
├── assets/       (imagens, ícones)
├── package.json  (dependências e scripts npm)
├── app.json      (configuração Expo)
└── ...

Você não precisa memorizar cada arquivo agora. Use a IA para um tour guiado do que foi gerado no seu disco:

Explique, em linguagem simples para iniciante, a estrutura REAL do projeto ToDoList que acabamos de criar nesta pasta.

Contexto: Aula 03 Academia PHR — primeiro contato com Expo.

Restrições: não escrever código novo; não alterar arquivos; máximo 10 bullets; para cada pasta/arquivo importante, diga “para que serve” em uma frase; mencione onde ficará a interface nas próximas aulas.

Resultado: lista numerada + sugestão de 3 pastas que devo abrir no explorador do Cursor para me familiarizar.

2.4 Executando o aplicativo pela primeira vez

npx expo start

npx expo start --web

2.5 Criando o repositório no GitHub

Git registra o histórico de alterações no seu computador. O GitHub guarda uma cópia remota desse histórico na nuvem — útil para backup, consulta a versões anteriores e compartilhamento.

Você criará um repositório chamado ToDoList (nome igual ao projeto local facilita o curso).

1. Acesse sua conta em github.com.
2. Clique em New repository (novo repositório).
3. Informe o nome ToDoList.
4. Escolha visibilidade — recomendamos Public para acompanhar o curso e compartilhar progresso (ajuste se sua escola ou empresa exigir privado).
5. Não marque README, .gitignore ou licença na criação — o projeto local já terá arquivos; isso evita conflito no primeiro push.
6. Crie o repositório e copie a URL HTTPS (ex.: https://github.com/seu-usuario/ToDoList.git).

2.6 Organizando o projeto e suas versões

Um app, evolução contínua. Durante todo o curso você mantém um único aplicativo ToDoList no seu computador e no seu GitHub. Cada aula adiciona ou refina funcionalidades sobre o mesmo projeto:

• Aula 03: criação inicial e primeiro commit.
• Aula 04: interface do app.
• Aula 05: gerenciamento de tarefas.
• Aulas seguintes: prioridades, persistência, testes, APK, etc.

Depois de validar cada aula prática, você registra um commit (marco no histórico).

Repositório do aluno — um projeto, atualizado ao longo do tempo:

ToDoList/
├── app/
├── assets/
├── package.json
└── ...

Repositório didático da Academia PHR Software (GitHub institucional, separado do seu ToDoList pessoal):

mobile-com-ia-todolist/   (GitHub phr-software)
├── aula-03/
├── aula-04/
├── aula-05/
└── ...

Cada pasta aula-XX publica uma versão estável de referência ao final daquela aula — para consulta e comparação. Essas cópias não substituem nem se misturam ao seu projeto local; você continua evoluindo um único app em ProjetosMobile/ToDoList.

2.7 Registrando a primeira versão

Com o app rodando e o repositório vazio criado no GitHub, use a IA para organizar o Git com segurança:

Objetivo: preparar o primeiro commit do ToDoList e conectar ao repositório GitHub remoto que criei (URL HTTPS que informarei abaixo).

Contexto: Aula 03 Academia PHR — projeto Expo inicial validado com npx expo start.

Passos que você deve seguir (adapte aos resultados reais dos comandos):
1. Examinar a situação atual do Git (git status, branch, remote se existir).
2. Confirmar que estou na pasta raiz ToDoList e que .gitignore existe; se faltar, sugira conteúdo padrão Expo sem incluir node_modules, .env, credenciais ou arquivos temporários.
3. Listar arquivos que SERIAM incluídos no commit — eu reviso antes de continuar.
4. Pedir minha autorização explícita antes de git add / git commit / git remote / git push.
5. Commit com mensagem exata: aula-03: projeto inicial com Expo
6. Conectar remote origin à URL HTTPS que eu colar (git remote add ou set-url conforme necessário).
7. Antes do push, mostrar o comando e pedir confirmação novamente.
8. Após push, orientar como verificar no GitHub se os arquivos apareceram.

Restrições: PROIBIDO git reset --hard, git clean, force push ou descartar alterações sem minha confirmação; não commitar segredos; explicar cada comando em uma linha em português.

Comandos ilustrativos (a IA deve ajustar à sua situação): git status, git add ., git commit -m "aula-03: projeto inicial com Expo", git remote add origin <URL>, git push -u origin main (ou master, conforme o branch local).

Checklist e próximos passos

Próxima etapa — Aula 04: construir a interface do ToDoList (layout, componentes e estilos iniciais) sobre o projeto que você acabou de criar. Mantenha o repositório atualizado com commits após cada marco validado.