|
1 | | -# React Native Template App |
| 1 | +# React Native Uber Clone App |
2 | 2 |
|
3 | | -Template projeto React-native [React Native](https://facebook.github.io/react-native/) |
| 3 | +The main idea of this project is to show how can React Native interact with Google Maps API and Geolocation API. |
4 | 4 |
|
5 | | -Arquitetura escolhida para separar UI de lógica de negócio. |
| 5 | +## React with Hooks |
6 | 6 |
|
7 | | -## Arquitetura |
| 7 | +- react 16.8.6 |
| 8 | +- react-native 0.60.3 |
8 | 9 |
|
9 | | -- **Presentational Components & Containers(Screens)** |
| 10 | +--- |
10 | 11 |
|
11 | | - Presentational components => parte react, componentes menores; |
12 | | - Containers => parte redux/saga (containers contém presentational components e conectam tudo ao redux/saga; |
13 | | - |
14 | | - [Post](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) do Dan Abramov sobre o assunto. |
| 12 | +## Third party libraries used to support this implementation |
15 | 13 |
|
16 | | -- **State/Store com Redux [Redux](https://redux.js.org/)**. |
| 14 | +- [react-native-geocoding](https://github.com/marlove/react-native-geocoding) |
| 15 | +- [react-native-maps](https://github.com/react-native-community/react-native-maps) |
| 16 | +- [react-native-maps-directions](https://github.com/bramus/react-native-maps-directions) |
| 17 | +- [react-native-google-places-autocomplete](https://github.com/FaridSafi/react-native-google-places-autocomplete) |
17 | 18 |
|
18 | | - Redux facilita o compartilhamento de estado entre todos os componentes da aplicação, evitando passar props entre diversos componentes. |
| 19 | +--- |
19 | 20 |
|
20 | | - Com Redux, o estado é compartilhado utilizando *stores* globais, e alterações de estado são previsíveis: *actions* são aplicadas por *reducers* ao estado/store. |
21 | | - |
22 | | -- **Chamadas Asyncronas são gerenciadas com [Redux Saga](https://redux-saga.js.org/)**. |
| 21 | +## License |
23 | 22 |
|
24 | | - Sagas são disparadas por Redux Actions e também podem alterar a Store redux, utilizando Javascript generator (`yield`). |
25 | | - |
26 | | - |
27 | | -## Links auxiliares |
28 | | - |
29 | | -- [Pastas](#Pastas) estrutura de pastas do projeto |
30 | | -- [Redux](https://redux.js.org/) gerenciar estado global da aplicação |
31 | | -- [Redux Persist](https://github.com/rt2zz/redux-persist) Persiste store na AsyncStorage |
32 | | -- [Redux Sagas](https://redux-saga.js.org) controlar fluxos asyncronos |
33 | | -- [React Navigation](https://reactnavigation.org/) |
34 | | - [`NavigationService`](App/Services/NavigationService.js) Usa navegaçao como um servico para tratar as rotas e adicionar splash screen |
35 | | -- [prettier](https://prettier.io/) & [eslint](https://eslint.org/) configurados pra react-native |
36 | | - |
37 | | -### OPCIONAL - Bibliotecas auxiliáres para facilitar a integracao com redux e axios - não obrigatórias |
38 | | -- [reduxsauce](https://github.com/infinitered/reduxsauce) (v0.7) to facilitate using Redux |
39 | | -- [apisauce](https://github.com/infinitered/apisauce) facilita usar o axios [axios](https://github.com/axios/axios) |
40 | | - |
41 | | - |
42 | | -## Pastas |
43 | | - |
44 | | -- [`App/Components`](App/Components): presentational components (telas) |
45 | | -- [`App/Config`](App/Config): configuracao global do app (variáveis, funções) |
46 | | -- [`App/Containers`](App/Containers): container components/ Screens - contém lógica redux |
47 | | -- [`App/Images`](App/Images): imagens da aplicacao |
48 | | -- [`App/Services`](App/Services): API |
49 | | -- [`App/Redux/Sagas`](App/Redux/Sagas): redux sagas |
50 | | -- [`App/Redux/Stores`](App/Redux/Stores): Config para criar store, aplicar middlewares, sagas, etc |
51 | | -- [`App/Redux/Actions`](App/Redux/Actions): actions e actions creators |
52 | | -- [`App/Redux/Reducers`](App/Redux/Reducers): reducers |
53 | | -- [`App/Redux/Helpers`](App/Redux/Helpers): helpers - auxiliam em funcoes get na store, padronizando chamadas |
54 | | -- [`App/Theme`](App/Theme): thema para o app |
55 | | - |
56 | | -## Requisitos |
57 | | - |
58 | | -- Node 8.+ |
59 | | -- Xcode 9.+ |
60 | | - |
61 | | -Também instalar as dependências requeridas para React Native. |
62 | | - |
63 | | -- [Android development](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies-3) |
64 | | -- [iOS development](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies) |
65 | | - |
66 | | -## Utilizando o projeto |
67 | | - |
68 | | -- clonar o repositório |
69 | | -- remova qualquer histórico do git: `rm -rf .git/` |
70 | | -- crie um novo projeto git: `git init` |
71 | | -- npm install |
72 | | -- renomear o projeto utilizando [reacnt-native-rename](https://www.npmjs.com/package/react-native-rename), conforme abaixo: |
73 | | -``` |
74 | | -$ npm install react-native-rename -g |
75 | | -$ git checkout -b rename-app |
76 | | -$ react-native-rename <novoNome> -b <com.agileteam.novoNome> |
77 | | -
|
78 | | -// Remove pastas android e ios antigas |
79 | | -$ rm -rf android/ ios/ |
80 | | -
|
81 | | -// Regerar pastas android e ios com novo nome do app |
82 | | -$ react-native upgrade |
83 | | -
|
84 | | -$ react-native link |
85 | | -``` |
86 | | - |
87 | | - |
88 | | - |
89 | | -## Rodando o projeto |
90 | | - |
91 | | -- `react-native run-android` (lembre-se de já ter o emulador ou um telefone android conectado) |
92 | | -- `react-native run-ios` (lembre-see de já ter o simulator ou um telefone iPhone conectado) |
93 | | - |
94 | | -### Build para distribuição Betas |
95 | | - |
96 | | -[Beta builds](docs/beta%20builds.md) |
| 23 | +This project is licensed under the MIT License. |
0 commit comments