Uber App Interface(React Native) - REFATORADO COM HOOKS

Sobre o Projeto

Este projeto foi desenvolvido através de um vídeo publicado pela Rocketseat, onde é feito a interface principal do Uber. De uma forma simples, a finalidade é disponibilizar o projeto para estudo e aprendizado.

O projeto foi totalmente refatorado com Hooks.

Feito Com

Abaixo segue o que foi utilizado na criação deste app:

• React Native - O React Native é um framework que permite o desenvolvimento de aplicações mobile usando Javascript e React;
• React Navigation - O React Navigation surgiu da necessidade comunidade do React Native de uma navegação de forma fácil de se usar, e escrita toda em Javascript;
• React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
• Styled-components - O Styled-component permite utilizar a sintaxe CSS real dentro de seus componentes (CSS-in-JS);
• React Navtive Vector Icons - Perfeito para botões, logos, barras de navegação, ícones. Fácil de utilizar em seu projeto;
• Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
• Prop Types - Verificação de tipo em tempo de execução para propriedades (props) React e objetos semelhantes;
• Reactotron - O Reactotron é um app Desktop para inspecionar projetos em React ou React Native. Está disponível para macOS, Linux e Windows;
  • reactotron-react-native - Plugin para configurar o Reactotron para se conectar ao projeto React Native;
• Babel - O Babel é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações Javascript;
  • babel-eslint - Este pacote é um wrapper do parser do Babel para o ESLint;
  • babel-plugin-root-import - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);
• Eslint - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;
  • eslint-config-airbnb - Este pacote fornece o .eslintrc do Airbnb como uma configuração compartilhada extensível;
  • eslint-plugin-import - Plugin do ESLint com regras para ajudar na validação de imports;
  • eslint-plugin-jsx-a11y - Verificador estático AST das regras do a11y em elementos JSX;
  • eslint-plugin-react - Regras de linting do ESLint específicas do React;
  • eslint-plugin-react-native - Regras de linting do ESLint específicas do React Native;
  • eslint-import-resolver-babel-plugin-root-import - Um resolver da lib babel-root-import para a lib eslint-plugin-import;
  • EditorConfig - O EditorConfig é um formatador de arquivos e coleções em forma de Plugin para Editores de código/texto com o objetivo de manter um padrão de código consistente entre diferentes editores, IDE's ou ambientes;
  • react-native-maps - O componente voltado para renderização de mapas;
  • react-native-google-places-autocomplete - Através do Google Places Api Keys o componente busca locais através de sua localização;
  • react-native-maps-directions - Utilizado para desenhar as rotas entre duas coordendas no mapa;
  • react-native-geocoding - O componente é utilizado para transformar a descrição de uma localização através das coordenadas geográficas ou vice-versa;

Começando

Para conseguir utilizar o app, é necessário apenas que você possua uma conta no (https://cloud.google.com). Assim, será possível criar um Key para utilizar os serviços.

Pré-requisitos

Antes de seguirmos para as configurações e uso do app, é ideal que você tenha o ambiente configurado para criar e testar aplicativos em React Native, para isso você pode seguir o guia do link abaixo:

Ambiente React Native (Android/iOS)

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

rocketseat-basic
├── src/
│   ├── config/
│   │   └── ReactotronConfig.js
│   ├── components/
│   │   │── Details
│   │   │   └── index.js
│   │   │   └── styles.js
│   │   │── Directions
│   │   │   └── index.js
│   │   │── Map
│   │   │   └── index.js
│   │   │   └── styles.js
│   │   └── Search
│   │       └── index.js
│   ├── pages/
│   │   └── Main/
│   │       └── index.js
│   ├── services/
│   │   └── api.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Instalação

1. Para instalar e utilizar esse app o processo é bem simples, basta clonar o repositório utilizando o comando:

git clone https://github.com/awmoreira/uber-interface-hooks

1. Depois do projeto clonado você deve executar a instalação dentro da pasta para dar continuidade:

yarn

ou

npm install

Com isso o projeto será instalado com todas as dependências do app devidamente instaladas e linkadas, tal como os arquivos de configuração que são copiados para o projeto.

Contribuição

Contribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada.

1. Faça um Fork do projeto
2. Crie uma Branch para sua Feature (git checkout -b feature/FeatureIncrivel)
3. Adicione suas mudanças (git add .)
4. Comite suas mudanças (git commit -m 'Adicionando uma Feature incrível!)
5. Faça o Push da Branch (git push origin feature/FeatureIncrivel)
6. Abra uma Pull Request

Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

Contato

Allan Winckler - Github - [email protected]