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.