🧭 ExploradorDEV

App mobile gamificado para explorar APIs nativas do Expo SDK 54

📑 Índice

Sobre · Funcionalidades · Stack · Fluxo · Estrutura · Rodando localmente · Rodando no celular · Permissões · Correções aplicadas · Autores

Sobre

ExploradorDEV é um aplicativo mobile em formato de mapa de fases, criado com React Native e Expo SDK 54, onde cada desafio demonstra uma API nativa do ecossistema Expo.

O projeto foi desenvolvido em dupla durante o módulo de React Native do curso Jovem Tech, como uma vitrine prática para câmera, acelerômetro, notificações locais e feedback háptico. A proposta é transformar recursos técnicos em pequenas missões interativas, facilitando estudo, demonstração e testes em dispositivo físico.

⬆ voltar ao topo

Funcionalidades

📸 Fase 1 Solicita permissão de câmera, abre preview ao vivo, captura uma foto e exibe a imagem salva no cache do app.

🧭 Fase 2 Usa o acelerômetro para mover o explorador horizontalmente conforme a inclinação do celular.

📩 Fase 3 Agenda uma notificação local e conclui a missão quando o jogador toca na mensagem recebida.

📳 Fase 4 Permite testar padrões de vibração e reproduzir uma sequência secreta de feedback háptico.

⬆ voltar ao topo

Stack

Tecnologia	Papel no projeto
Expo SDK 54	Base de execução e integração com APIs nativas
React Native 0.81.5	Interface mobile e componentes nativos
React 19.1.0	Composição das telas e estados
React Navigation	Navegação entre o mapa e as fases
expo-camera	Permissão, preview e captura de imagem
expo-sensors	Leitura do acelerômetro
expo-notifications	Canal Android, permissão e notificação local
expo-haptics	Vibrações e feedback tátil

⬆ voltar ao topo

Fluxo

flowchart LR
    A["🏠 Mapa de fases"] --> B["📸 Fase 1: câmera"]
    A --> C["🧭 Fase 2: acelerômetro"]
    A --> D["📩 Fase 3: notificação"]
    A --> E["📳 Fase 4: haptics"]
    B --> F["✅ Evidência capturada"]
    C --> G["✅ Movimento testado"]
    D --> H["✅ Mensagem aberta"]
    E --> I["✅ Código desbloqueado"]

    classDef primary fill:#0F6E56,stroke:#0F6E56,stroke-width:1px,color:#F1F5F9
    classDef secondary fill:#173404,stroke:#173404,stroke-width:1px,color:#F1F5F9
    classDef neutral fill:#444441,stroke:#444441,stroke-width:1px,color:#F1F5F9

    class A primary
    class B,C,D,E secondary
    class F,G,H,I neutral

Loading

⬆ voltar ao topo

Estrutura

exploradordev/
├── assets/
│   ├── adaptive-icon.png
│   ├── bg_level2.png
│   ├── explorer.png
│   ├── favicon.png
│   ├── icone.png
│   ├── notificacao.caf
│   ├── notificacao.mp3
│   ├── notificacao.wav
│   └── splash-icon.png
├── src/
│   └── screens/
│       ├── Fase1CameraScreen.js
│       ├── Fase3NotificacaoScreen.js
│       ├── HomeScreen.js
│       ├── Level2ExpoSensors.js
│       └── Level4Haptics.js
├── App.js
├── app.json
├── index.js
├── package.json
└── README.md

• App.js configura a navegação principal com Native Stack.
• HomeScreen.js exibe o mapa com as quatro fases.
• Fase1CameraScreen.js controla permissão, preview e captura da câmera.
• Level2ExpoSensors.js escuta o acelerômetro e move o personagem.
• Fase3NotificacaoScreen.js prepara canal, permissão e agendamento local.
• Level4Haptics.js concentra os botões de vibração e o desafio da sequência.

⬆ voltar ao topo

Rodando localmente

git clone https://github.com/raelmz/exploradordev.git
cd exploradordev
npm install
npm start

Scripts disponíveis:

Script	Descrição
npm start	Inicia o Expo Dev Server com QR Code
npm run android	Abre no Android/emulador
npm run ios	Abre no iOS/simulador
npm run web	Abre a versão web com React Native Web

⬆ voltar ao topo

Rodando no celular

1. Instale o Expo Go no celular pela Play Store ou App Store.
2. No computador, rode:

npm start

3. Deixe o celular e o computador na mesma rede Wi-Fi.
4. Escaneie o QR Code exibido no terminal ou na página do Expo.
5. Teste preferencialmente em aparelho físico, porque câmera, acelerômetro, notificações e haptics dependem de hardware real.

Se o QR Code não conectar, inicie usando túnel:

npx expo start --tunnel

⬆ voltar ao topo

Permissões

Recurso	Onde aparece	Observação
Câmera	Fase 1	O app solicita permissão antes de abrir o preview
Acelerômetro	Fase 2	Funciona melhor em celular físico
Notificações	Fase 3	O app solicita permissão antes de agendar a mensagem
Haptics	Fase 4	A intensidade varia por aparelho e sistema operacional

⬆ voltar ao topo

Correções aplicadas

• Corrigida a codificação dos textos do projeto para UTF-8.
• Corrigido o app.json, que apontava o splash para um arquivo inexistente.
• Adicionadas dependências web compatíveis com Expo SDK 54: react-dom e react-native-web.
• Ajustada a Fase 3 para solicitar permissão antes de agendar notificações.
• Validado o projeto com expo-doctor: 18/18 checks passaram.

⬆ voltar ao topo

Autores

Desenvolvido por Israel Menezes e Allan Maxmo durante o módulo de React Native do curso Jovem Tech.