Desafio Toro Desenvolvedor Mobile

A descrição original do desafio está disponível aqui

CodeMagic CI - Resultado do último Build

Problema

Crie um app mobile que exiba em tempo real, de forma organizada e agradável, preços de ações recebidas através de uma conexão websocket. É preciso exibir pelo menos as 5 ações mais valorizadas e as 5 menos valorizadas em cards contendo o símbolo da ação, o preço atual e um gráfico que ilustre a evolução do preço. As cotações devem ser recebidas a partir do nosso simulador de cotações que pode ser acessado usando docker com o seguinte comando: docker run -p 8080:8080 toroinvestimentos/quotesmock. O fluxo de cotações está no endpoint /quotes.

Abordagem da solução

• Utilizando Flutter + BloC
• iOS e Android
• Testes Unitários com 100% de cobertura
• Testes de Widgets/UI não realizado
• Validação se está conectado ao WebSocket assim que abre o App
• App dividido em 3 TabBars:
  1. Todas as ações disponíveis, com a visualização das seguintes informações:
     • CÓDIGO
     • VALOR ATUAL
     • VARIAÇÃO DE VALOR R$
     • VARIAÇÃO DE PORCENTAGEM %
     • TEMPO RELATIVO DESDE A ÚLTIMA ATUALIZAÇÃO
  2. AS 5 MAIORES ALTAS
  3. AS 5 MAIORES BAIXAS

Esses dois últimos com informações da ação e um gráfico simples com todas as variações.

• Foi feito vários testes (ficou comentado no código) com outros gráficos mais completos, porém nenhum ficou tão bom quanto esse, além do que, por se tratar de dados com tempo somente da conexão do WebSocket, o gráfico ficaria incompleto se colocasse do dia inteiro.
• Utilização de uma barra no topo flutuante (SliverAppBar) para dar mais espaço à navegação.
• Padronização das cores temas da Toro Investimentos
  • Preparado para personalização do tema, com as demais cores
• Utilizando o CodeMagic para CI (conta free, com variação no tempo de build)
• Utilização de uma splashscreen simples com flare

Para executar o projeto

Requisitos:

• Ter a versão mínima do Flutter: Channel stable, v1.9.1+hotfix.6
• Executar o comando flutter pub get para atualizar todas dependências
• Para executar os testes unitários, executar o comando flutter test
• Para executar o aplicativo, executar o comando flutter run
• Testes realizados com um Android 8.1.0 e iPhone SE e 11 Pro Max na versão 13

Dependências utilizadas

• cupertino_icons: ^0.1.2

  • Default

• intl: ^0.15.8

  • Para formatação da moeda R$
  • Também requisito do chart

• web_socket_channel: ^1.1.0

  • Conexão através de Web Socket

• rxdart: ^0.21.0

  • Recomendado para utilizar juntamente com o BloC

• bloc_pattern: ^1.5.2

  • Padrão BloC Pattern

• flutter_launcher_icons: ^0.7.4

  • Atualização do icone de forma fácil para Android e iPhone ao mesmo tempo

• flutter_sparkline: ^0.1.0

  • Pacote de gráfico que melhor se encaixou nesse projeto

• flare_splash_screen: ^3.0.0

  • Pacote para fazer splash screen facilmente com flare

Considerações

• O websocket é apenas de simulação e oferece dados bem aleatórios, as vezes não fazem muito sentido.
• As informações da maiores altas e baixas, deveriam estar disponíveis em outro endpoint no servidor, para que conseguisse buscar um histórico do dia inteiro ou de outros períodos.
• Os commits iniciais foram integrados através do git stash, pois muitos commits foram efetuados apenas para migrar de computador (Windows <-> Mac)

Screenshots

Relatório da cobertura de testes

iPhone

Android