Ir para o conteúdo

Mobile - Stack Esperada

Stack Atual

Core

  • Expo ~54.0.25 - Framework para React Native
  • React Native 0.81.5 - Framework mobile
  • React 19.1.0 - Biblioteca UI
  • TypeScript ~5.9.2 - Tipagem estática
  • @react-navigation/native 6.1.9 - Navegação base
  • @react-navigation/native-stack 6.9.17 - Stack navigator
  • @react-navigation/bottom-tabs 6.5.11 - Tab navigator

Estado e Dados

  • @tanstack/react-query 5.12.0 - Gerenciamento de estado de servidor
  • axios 1.6.2 - Cliente HTTP

Formulários

  • react-hook-form 7.48.2 - Gerenciamento de formulários
  • zod 3.22.4 - Validação de schemas
  • @hookform/resolvers 3.3.2 - Integração React Hook Form + Zod

Armazenamento

  • expo-secure-store ~15.0.7 - Armazenamento seguro (tokens)

Utilitários

  • expo-constants ~18.0.10 - Constantes do Expo
  • expo-linking ~8.0.9 - Deep linking
  • expo-status-bar ~3.0.8 - Barra de status

Organização das Pastas

billings-ease-mobile/
├── src/
│   ├── components/          # Componentes reutilizáveis
│   ├── contexts/            # Context API
│   │   └── AuthContext.tsx
│   ├── navigation/          # Configuração de navegação
│   │   ├── AppNavigator.tsx
│   │   ├── MainTabs.tsx
│   │   └── types.ts
│   ├── pages/              # Telas do aplicativo
│   │   ├── auth/
│   │   ├── cycles/
│   │   ├── dashboard/
│   │   └── ...
│   ├── services/           # Serviços
│   │   └── api.ts          # Cliente Axios
│   └── types/              # Definições TypeScript
│       └── index.ts
├── App.tsx                 # Componente raiz
├── app.json                # Configuração do Expo
└── package.json

Responsabilidades do Mobile

✅ O que o Mobile Faz

  1. Interface Mobile-First
  2. Telas otimizadas para mobile
  3. Gestos e interações touch

  4. Navegação nativa

  5. Registro Diário

  6. Interface rápida para registro de observações
  7. Seleção de símbolos, sensações, aparências

  8. Validação de formato (não regras de negócio)

  9. Visualização de Dados

  10. Dashboard com status de fertilidade
  11. Gráficos e visualizações de ciclos

  12. Histórico de observações

  13. Sincronização

  14. Push de dados locais para servidor
  15. Pull de atualizações do servidor

  16. Resolução de conflitos (futuro)

  17. Armazenamento Local

  18. Cache de dados para uso offline
  19. Armazenamento seguro de tokens

❌ O que o Mobile NÃO Faz

  1. Regras de Negócio
  2. ❌ Não calcula status de fertilidade
  3. ❌ Não valida regras do Método Billings
  4. ❌ Não determina símbolos permitidos

  5. Tudo via API do backend

  6. Acesso Direto a Dados

  7. ❌ Não acessa banco de dados
  8. ❌ Tudo via API REST

Restrições Técnicas

Expo

Limitações: - Não pode usar módulos nativos não suportados pelo Expo - Algumas funcionalidades requerem EAS Build (custom native code)

Vantagens: - Desenvolvimento rápido - Over-the-air updates - Build simplificado

React Native

Considerações: - Performance diferente do web - Listas grandes precisam de otimização (FlatList) - Imagens precisam de cache

Armazenamento

Expo Secure Store: - Limitado a pequenos dados (tokens, credenciais) - Não é adequado para grandes volumes de dados

Para dados maiores: - Considerar AsyncStorage (dados não sensíveis) - Considerar SQLite (dados estruturados, futuro)

Configuração

Variáveis de Ambiente

Arquivo: .env (não versionado)

Variáveis: - EXPO_PUBLIC_API_URL - URL completa do backend

Uso: 

const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL || 'http://localhost:8080/api'

Execução

Desenvolvimento: 

yarn start
# ou
expo start

Android: 

yarn android

iOS: 

yarn ios

Web: 

yarn web

Estrutura

AppNavigator (Stack)
├── AuthStack (não autenticado)
│   ├── Login
│   ├── Register
│   └── ForgotPassword
└── MainTabs (autenticado)
    ├── Dashboard
    ├── Cycles
    ├── DailyRegister
    └── Profile

Tipos de Navegação

Stack Navigator: - Navegação hierárquica - Header automático - Gestos nativos

Tab Navigator: - Navegação por abas - Ícones e labels - Estado persistente

Referências