O projeto Rentx é um aplicativo mobile de a locação de veículos. Podemos listar os veículos disponíveis, agendar, e verificar os carros atualmente alugados pelo usuário. O projeto é desenvolvido com o framework com React-Native, e várias biliotecas como: React-Navigation para navegação em pilhas, JSON-Server como API para o back-end e toda teoria de como se chama as requisições de uma API RESTFULL, React Native Calendars para a seleção das datas, React-Native-Reanimated para animação dentre outras...
Sobre | Motivo | Design | Requisitos | Tecnologias | Baixar e Executar
O 3º projeto do bootcamp Ignite na trilha react-native, é o 2º projeto com o auxílio e configurações do Expo(Bare workflow), além disso é explicado mais sobre design(UI/UX), Requisições de API RestFull em conjunto co Axios e JSON-Server, Animações no React-Native, além de formatação de datas com o date-fns.
- Página Inicial:
- Carros alugados:
Esse projeto tem por objetivo por em praticar os conceitos básicos de React Native no desenvolvimento mobile no 3º capítulo do curso Ignite de React Native.
Assim, nesse projeto criamos:
- Listagem geral de veículos que podem ser alugados.
- Cadastro de agendamentos dos veículos com suas datas formatadas e o preço total a ser pago.
- Listagem dos carros alugados pelo usuário.
- Formatação de datas com o date-fns.
- Componentes criados com Style Components, Flatlist e suas tipagens, hooks, navegação em pilha, calendário com o React-Native Calendars
- Animação e criação de componentes animados como Carrossel manual, efeito fade em componentes, uso de Splash Screen com o React Native Reanimated, Loads personalizados com Lottie econceitos básicos de Heurísticas Nielsen e UX, além de design, API REST, animação dentre outras.
- Detalhes sobre o veículo:
- Agendamento/Cadastro:
- Node.js
- Yarn(ou NPM)
- React
- React-Native
- JSON-Server
- Android Studio
- Celular(Opcional)
- Expo(desktop)
- Expo Go(Mobile) opcional.
O projeto foi desenvolvido utilizando as seguintes tecnologias
- Android Studio
- Autenticação Expo
- Expo
- Javascript
- JSON-Server
- date-fns
- Lottie
- NodeJS
- React
- React-Native
- React Navigation
- React-Native-Calendars
- React-Native-Reanimated
- React-Native-Responsive-Fontsize
- Styled-Components
- Yarn
-
Clonar o projeto:
git clone https://github.com/Aszurar/Rentx.git
-
É necessário a instalação do yarn de acordo com seu sistema operacional, para isso veja como no site do Yarn
-
Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
yarn
-
É necessário a instalação do emulador Android Studios e das tecnologias requesitadas acima no:seedling: Requisitos
-
Também é necessário a instalação/configuração de outras tecnologias, para isso siga os passos indicados nessa página de acordo com seu sistema operacional: Executando uma Aplicação React-Native emulando Windows/Linux/MacOS ou direto no dispositivo mobile Android/IOS
-
É necessário a instalação do Expo
-
Execução - Abra a pasta do projeto com alguma IDE(Vscode) ou simplesmente abra o terminal na pasta do projeto e execute o comando abaixo:
expo start
-
Abra o emulador ou conecte o celular(É necessário a instalação do Expo Go) e execute:
a
-
Lembrando que, caso seja executado pelo emulador, o ideal é sempre deixa-lo aberto antes de aplicar os comandos acima.
-
Além disso, como temos o json-server, será necessário executá-lo para carregar os dados da aplicação, basta abrir um novo terminal e executar:
yarn api
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.