O desafio consiste em criar um aplicativo mobile, em React Native, com um mapa que fará a animação da imagem de um veículo baseada na direção do carro.
Tecnologias que escolhi para o desenvolvimento do app:
@gorhom/bottom-sheet: Para utilização do componente Bottom Sheet na tela do mapa;
Expo: Pela facilidade de configuração inicial do ambiente do projeto e melhorias de performance;
i18n-js: Para possibilidar a internacionalização do projeto (En, Pt-br, Es);
Typescript: Para fins de tipagem de dados e melhoria de código;
React Navigation: Para realizar a navegação entre telas;
React Native Maps: Para utilização do mapa (indicação da Softruck);
React Native Maps Directions: Para renderização do trajeto das rotas no mapa;
Styled Components: Para estilização. Optei por essa lib devido ao maior domínio que possuo em utilizá-la;
Clone o projeto e acesse a pasta
#
$ git clone https://github.com/frndsjoao/softruck-challenge.git && cd softruck-challengeAdicione uma Google Maps API Key
# Na raíz do projeto, inclua a sua Google Maps API Key no arquivo .env, conforme exemplo:
#
#EXPO_PUBLIC_GOOGLE_MAPS_API_KEY=123ASD456...Instale as dependências e execute o projeto
# Instale as dependências:
$ yarn
# Execute o projeto:
$ npx expo start
# O projeto pode ser acessado usando um emulador Android ou iOS.
#
# Também é possível acessar o projeto utilizando seu próprio celular.
# Para isso é necessário ter o app Expo Go instalado no dispositivo e estar na mesma rede Wifi.
1) Inicialização do repositório e configuração do Expo utilizando Typescript;
2) Inclusão do React Navigation, criação das rotas e configuração do tema pelo Styled Components. Nessa parte, as rotas foram planejadas em um papel mesmo, e o tema utilizado foi baseado no site da Softruck, utilizando os mesmos padrões de cores;
3) Desenvolvimento de telas e componentes: Como as rotas já haviam sido planejadas, foi possível desenvolver as telas baseado no que cada tela deveria possuir. Os componentes foram criados baseado na possibilidade de reutilização de código, evitando a repetição e facilitando a manutenção;
4) Após todas as telas terem sido desenvolvidas, iniciei o processo de integração com o React Native Maps e React Native Maps Directions. Nessa parte, foi necessário realizar um cálculo matemático para que o sprite do veículo ficasse alinhado com a direção via arquivo JSON. Se a direção fosse entre 0 e 45 graus, o veículo seria apontado para o norte, e assim por diante;
5) Inclusão do i18n para internacionalização dos textos apresentados no aplicativo;
1) A "API" retornar um array de veículos. A mesma pessoa pode cadastrar mais de um veículo para rastreamento (no caso de possuir uma frota, por exemplo). Dessa forma, as rotas seriam buscadas pela placa do veículo.