rentx-ignite: A TypeScript repository from lilianmartinsfritzen

RentX

🚀 CHAPTER III e IV - IGNITE Rocketseat

📝 Conceitos aprendidos durante a construção da aplicação

Consumo de API, métodos HTTP, lidar com requisições e respostas, criar animações, entender sobre boas práticas de User Experience e sobre o universo Offline First.

📱 MÓDULO I - Interfaces e Consumo de API

Criação de um thema global e componentes de estilo reutilizáveis.
Descobrindo as Heurísticas de Nielsen e UX.
Mais sobre navegação.
Utilizando a biblioteca JsonServer para simular a API, até que fique a API do aplicativo fique disponível para consumo.
Implementando componente calendário e a seleção de período para uso no agendamento, a partir da biblioteca React Native Calendars.

📱 MÓDULO II - Animações

Instalando a React Native Reanimated.
Transições.
Animando a tela de Splash.
As animações criadas por meio do Reanimated V2 ocorrem na UI (User Interface) por questões de performance, enquanto o código JavaScript como, por exemplo, a navegação, chamar outra tela, etc., acontecem em outra thread. Dessa forma, o aplicativo se perde ao ter que lidar com chamadas em threads diferentes, gerando falhas que podem encerrar o app inesperadamente. A solução para essa questão está no uso do Worklet interface, que nos dá acesso a partes de baixo nível do pipeline de renderização, logo após a inserção do worklet usamos runOnJS que chama um retorno de chamada de forma assíncrona, direcionando para a thread que deve ser executada após a animação.
Scroll animado.
Animação de menu flutuante inspirado no botão flutuante do Spotify, este menu conterá a lista de agendamento do usuário. A implementação irá utilizar os recursos da biblioteca Gesture Handler com o hook useAnimatedGestureHandler da Reanimated e recuperando o contexto da última posição em que o usuário o deixou. Finalizamos incluindo o withSpring, também da Reanimated, para gerar um efeito elástico ao retornar o menu para a posição inicial.
Instalamos a biblioteca LottieFiles que traz animações leves, performáticas e escaláveis, construídas com base em arquivos JSON. Com essa biblioteca incluímos um pequeno carro em movimento que servirá de loading para os momentos em que a aplicação terá que aguardar alguma resposta.

📱 MÓDULO III - Offline First

Escolha de recursos que ficarão disponíveis Offline e Banco de Dados 🍉 WatermelonDB.
Configuração do banco de dados para iOS.
Configuração do banco de dados para Android.
Estrutura e implementação da base de dados, persistindo dados.
MEMORY LEAK! Em um determinado momento da aplicação criamos uma função que assina uma promessa, e caso o componente fosse desmontado, a interface fosse renderizada, antes da promessa ser resolvida, o código iria tentar definir, atualizar um estado que “já passou”, quando ocorreu a renderização. Seguindo a própria orientação do React podemos resolver esse problema de performance, aplicando uma função de limpeza que venha permitir as atualizações dos estados somente enquanto o componente está montado e após a resolução da promessa garantir o cancelamento das subscrições, limpando, desmontando o componente para as próximas renderizações e efeitos. Esse é um assunto importante, pois seria uma das causas de vazamento de memória e comportamentos inadequados durante renderizações.
Verificando conexão, sincronizando usuário e carros.
Exibindo status da conexão do usuário e quais recursos precisam de internet para disponibilização.
Cache de imagem com a bilbioteca FastImage.

✔️ Requisitos

Para Android

Para IOS

Para simular os ambientes mobile você pode consultar as documentações abaixo:

📑 Emulador Android

📑 Emulador IOS

🏅 Utilizando o comando expo start você pederá selecionar o emulador desejado. Também é possível testar sua aplicação por meio do seu dispositivo físico, desde que estejam compartilhando a mesma rede. Para isso instale o Expo Go.

🛠 Tecnologias e Ferramentas

🕹 Execução

# Clonar repositório
git clone git@github.com:lilianmartinsfritzen/myskills-ignite.git

# Entrar na pasta abaixo
cd myskills-ignite

# Restaurar pacotes
npm install

# Para aproveitar o ecossistema Expo use o comando abaixo e selecione o emulador desejado
expo start

# O template Expo selecionado permite o uso dos comandos abaixo
# Será necessário ao lidar com o banco de dados WatermelonDB

# Executar o projeto Android
npx react-native run-android && npm start

# Executar o projeto IOS
cd ios
pod install
cd ..
npx react-native run-ios && npm start

🕹 RentX API

Para ter uma experiência completa sobre a aplicação, clone também a API que utilizamos para consumir as informações do usuário, carros e agendamento.

Link do repositório: rentx-api-ignite

# Clonar repositório
git clone git@github.com:lilianmartinsfritzen/rentx-api-ignite.git

# Entrar na pasta abaixo
cd rentx-api-ignite

# Restaurar pacotes
npm install

# Executar o projeto
npm start

📃 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

lilianmartinsfritzen/rentx-ignite