isaquem18/allintrapp

Esta branch se trata de um segunda versão, que fiz apenas para praticar alguns conceitos, porém realizada após o prazo máximo estipulado para teste, caso deseje ver a primeira versão, bastar alterar para branch "main"

Proposta de design em tablet

Tendo em vista que a forma de se segurar um tablet, pelo seu tamanho, se da pelas laterais, um menu lateral costuma ser mais confortável de navegar entre as páginas tendo em vista sua proximidade do polegar.

Comparativo com dados realtime da TRADINGVIEW

Visão Geral

Este projeto é uma demonstração de um aplicativo React Native desenvolvido usando Expo. O app inclui várias funcionalidades e animações, atendendo aos requisitos especificados para o teste de programação.

Funcionalidades

Navegação por Abas com Animações: Transições suaves e visualmente atraentes entre diferentes abas.
Tela de Splash com Animações: Tela de splash envolvente com animações para melhorar a experiência do usuário.
Gráfico em Tempo Real com WebSocket: Atualizações ao vivo em um gráfico usando WebSocket para comunicação de dados em tempo real.
Skeletons de Carregamento: Feedback visual para estados de carregamento usando carregadores de esqueleto.
Gerenciamento de Estado: Gerenciamento eficiente de estado para garantir desempenho ótimo e facilidade de manutenção.
Design Responsivo: Garantia de responsividade em diferentes tamanhos de tela e orientações.
Interface de Usuário: Design visualmente atraente e amigável.
Criatividade e Aparência: Ênfase na criatividade e estética em todo o aplicativo.
Testes: Configuração completa de testes unitários, de integração e de ponta a ponta (end-to-end).

Exemplo rodando teste E2E

Requisitos

Node.js (versão >= 12)
Expo CLI (npm install -g expo-cli)
Yarn ou npm (gerenciadores de pacotes)

Instalação

Clone o repositório:

gh repo clone isaquem18/allintrapp
cd allintrapp

Instale as dependências:
```
yarn 
```
Atualize os pods
```
npx pod-install ios
```
Inicie o servidor de desenvolvimento
```
npx expo run:ios
```

Estrutura do Projeto

Gerenciamento de Estado

O projeto usa uma combinação de React Context e React Query para gerenciamento de estado, garantindo eficiência e escalabilidade. Permitindo que dados menos sensíveis ao tempo sejam cacheados no dispositivos enquanto o restante mantém atualização constante.

Principais Implementações

1. Navegação por Abas com Animações

Implementado usando react-navigation e animações personalizadas para melhorar a experiência do usuário.

2. Tela de Splash com Animações

Utilizado lottie videos que converteu video gerado no Adobe After Effects em JSON e animações personalizadas para criar um ponto de entrada envolvente para o aplicativo.

3. Gráfico em Tempo Real com WebSocket

Integrado um gráfico de atualização ao vivo usando WebSocket para comunicação de dados em tempo real.

4. Skeletons de Carregamento

Usado react-content-loader para exibir telas de esqueleto enquanto os dados estão sendo carregados, melhorando a percepção de desempenho.

Testes

Os testes unitários, de integração e de ponta a ponta (end-to-end) foram configurados usando Jest e React Testing Library e detox-JS para garantir a correção dos componentes e da lógica.

Executando os Testes

Para executar os testes, use o seguinte comando:

    // para rodar os testes unitários
    yarn test:unit
    // para rodar os testes de integração
    yarn test:int
    // para rodar os testes e2e
    yarn test:e2e

Notas Finais

A aparência e o cumprimento do style-guide conforme imagens foram priorizadas ao longo do processo de desenvolvimento.
O aplicativo foi projetado para ser responsivo e proporcionar uma experiência contínua em diferentes dispositivos e orientações.
Animações e transições foram incorporadas para melhorar a experiência geral do usuário.
Toda a configuração necessária para testes unitários, de integração e de ponta a ponta foi realizada.

Para qualquer dúvida ou esclarecimento adicional, por favor, entre em contato comigo.

isaquem18 / allintrapp