Estruturando o projeto Expo - Criando Apps para Android e iOS
Fala mestre, beleza? No vídeo de hoje vamos falar sobre o projeto criado com Expo. A ideia é entender a estrutura do projeto, o que cada parte faz e como podemos trabalhar com ele nas próximas aulas. Esse vídeo não é sobre arquitetura de software em si, mas sim sobre como o projeto foi montado, quais arquivos estão presentes e qual o papel de cada um.
Sobre o Projeto
O projeto foi iniciado usando o Expo. Vamos começar explorando os arquivos principais.
package.json
É o arquivo de configuração principal do projeto. Nele temos:
- Nome e versão do projeto
- Arquivo de entrada
- Scripts de execução
- Dependências e devDependencies
- Informações de repositório, autores, etc.
Os scripts definidos aqui permitem comandos como npm start, npm run android ou npm run ios, que executam comandos específicos usando o Expo.
package-lock.json
Gerado automaticamente pelo NPM. Ele mantém o controle preciso das versões de todas as dependências (e suas dependências) para garantir consistência entre instalações.
tsconfig.json
Arquivo de configuração do TypeScript. Toda configuração de tipos, paths e opções relacionadas ao TypeScript são feitas aqui.
babel.config.js
Arquivo de configuração do Babel, compilador JavaScript. Ele converte nosso código para um formato que pode ser entendido por diferentes plataformas (Android, iOS, Web).
app.json
Arquivo com configurações específicas do Expo, como:
- Nome do app
- Slug (identificador)
- Versão e orientação
- Ícone
- Configuração da splash screen
- Configurações específicas por plataforma (iOS, Android, Web)
Essas opções estão bem documentadas na documentação oficial do Expo, com exemplos e descrições completas.
assets/
Pasta reservada para arquivos estáticos, como imagens, ícones, fontes, SVGs etc. Esses arquivos não são códigos e são usados em diferentes partes do app.
.vscode/ e .expo/
Pastas geradas automaticamente pelo VS Code e pelo próprio Expo. Não são modificadas manualmente e podem ser ignoradas.
.gitignore
Arquivo que lista tudo que deve ser ignorado pelo Git e não incluído no versionamento do projeto.
App.tsx
Arquivo principal de entrada da aplicação. É o ponto de partida quando o app é iniciado. Dentro dele, normalmente apontamos para a estrutura de navegação do app.
Estrutura da pasta src/
Dentro do diretório src/ fica toda a fonte da aplicação. É aqui que a estrutura começa a seguir padrões mais próximos de uma arquitetura:
- screens/: telas do app
- components/: componentes reutilizáveis
- hooks/: hooks personalizados
- styles/: estilos globais ou reutilizáveis
- utils/: funções utilitárias
- validations/: validações de formulário ou dados
- routes/: configuração das rotas e navegação
Essa estrutura pode variar de acordo com o time ou desenvolvedor. Não existe uma única forma certa, mas é importante seguir um padrão definido para manter a organização.
Considerações Finais
Esse vídeo foi uma introdução à estrutura básica do projeto criado com Expo. Em aulas futuras, serão abordados pontos mais aprofundados, como navegação, componentes, hooks e organização em camadas.
