Builders-Challenge-React-Native: An HTML repository from murilokrugner

Challenge Builders React Native

Sobre o Projeto

Este projeto visa a criação de um aplicativo Android e Ios de previsão do tempo para o desafio técnico da Platform Builders.

Feito Com

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

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-navigation/compat - Extensão para React Navigation
@react-navigation/native-stack - Extensão para @react-navigation/stack
@react-navigation/stack - Roteamento e navegação para seus aplicativos React Native em Stack.
React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
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;
@react-native-community/async-storage - Sistema de armazenamento de dados para React Native;
@react-native-community/geolocation - API de geolocalização para React Native - Usada para obter permissões do usuário;
date-fns - Biblioteca de utilitários de data JavaScript moderna;
react-native-geocoding - Um módulo de geocodificação para React Native para transformar uma descrição de um local;
react-native-geolocation-service - API de geolocalização para React Native;
react-native-google-places-autocomplete - Componente de preenchimento automático personalizável do Google Places para aplicativos React-Native para iOS e Android;
react-native-linear-gradient - Elemento de estilos para React Native;
react-native-permissions - Uma API de permissões unificadas para React Native no iOS, Android e Windows;
react-native-safe-area-context - Dependências de React Navigation;
react-native-screens - Dependências de React Navigation;
styled-components - Use os melhores bits de ES6 e CSS para estilizar seus aplicativos sem estresse;
@react-native-community/netinfo - Permite obter informações sobre a conexão com a internet;
react-native-statusbar-alert - Um alerta;
immer - Crie a próxima árvore de estado imutável simplesmente modificando a árvore atual;
lottie - Lottie é uma biblioteca móvel para Android e iOS que analisa animações do Adobe After Effects exportadas como JSON com bodymovin e as renderiza nativamente em dispositivos móveis!
react-native-shimmer-placeholder - Loading for React Native
react-native-splash-screen - Uma API de tela inicial para react-native que pode ocultar e mostrar programaticamente a tela inicial. Funciona em iOS e Android.
react-native-statusbar-alert - Um alerta de barra de status
redux, redux-persist, redux-saga, react-redux - Um contêiner de estado previsível para aplicativos JS

Para obter informações do clima, o projeto utiliza a API Open Weather

Open Weather - Veja mais

Para a padronização do código, o projeto utilizar as extensões para Visual Studio Code, como:

eslint - Encontre e corrija problemas em seu código JavaScript
prettier - Um formatador de código opinativo
editorconfig - EditorConfig ajuda a manter estilos de codificação consistentes para vários desenvolvedores
eslint-config-airbnb - Guia de estilo JavaScript do Airbnb

Começando

Para conseguir rodar o projeto, clone o mesmo e siga os passos abaixo.

Pré-requisitos

Antes de seguirmos para as configurações do projeto, é 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 como exemplo:

Ambiente React Native (Android/iOS)

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

BuildersChallengeRn
├── .assets
├── .coverage
├── src/
│   ├── assets/
│   │   └── logo.png
│   │   └── plus.png
│   │   └── refresh.png
│   │   └── weather-icon.json
│   ├── components/
│   │   ├── Button/
│   │   │   └── button.spec.tsx
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── CityLocation/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── ConnectionInfo/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── DateNow/
│   │   │   └── date-now.spec.tsx
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── ForecastComponents/
│   │   │   ├── ButtonPlus/
│   │   │   │   └── button-plus.spec.tsx
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── ButtonReflesh/
│   │   │   │   └── button-reflesh.spec.tsx
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── ForecastCity/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── ForecastInformations/
│   │   │   │   └── forecast-informations.spec.tsx
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── PanelInformations/
│   │   │   │   └── panel-informations.spec.tsx
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   ├── HomeComponents/
│   │   │   ├── Header/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── WeatherForecast/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   ├── Line/
│   │   │   └── line.spec.tsx
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── LoadingComponents/
│   │   │   ├── LoadingCity/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── LoadingImage/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── LoadingPanel/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── LoadingSearchLocation/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── LoadingWeatherInformations/
│   │   │   │   └── index.tsx
│   │   │   │   └── styles.ts
│   │   ├── SearchPlaces/
│   │   │   └── index.tsx
│   ├── config/
│   │   └── ReactotronConfig.ts
│   ├── contexts/
│   │   └── ConnectionInfoContext.tsx
│   ├── functions/
│   │   └── asyncStorage/
│   │       └── index.ts
│   ├── pages/
│   │   ├── Home/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── NewLocation/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── Welcome/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   ├── permissions/
│   │   └── location.ts
│   ├── Router/
│   │   └── ApplicationPages/
│   │   │   └── index.tsx
│   ├── services/
│   │   └── api-open-weather.ts
│   │   └── apkKey-geocoder.ts
│   │   └── apkKey-google-places.ts
│   │   └── apkKey-open-weather.ts
│   ├── styles/
│   │   ├── background/
│   │   │   └── index.js
│   │   ├── colors/
│   │   │   └── index.js
│   │   ├── dimensions/
│   │   │   └── index.js
│   │   ├── fonts/
│   │   │   └── index.js
│   ├── App.js
│   ├── index.js
│   └── routes.js
├── .buckconfig
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierrc.js
├── .ruby-version
├── .watchmanconfig
├── app.json
├── babel.config.js
├── Gemfile
├── Gemfile.lock
├── index.js
├── jest.config.js
├── metro.config.js
├── package.json
├── react-native-config.js
└── README.md
└── ts.d.ts
└── tsconfig.json
└── yarn-error.log
└── yarn.lock

Instalação

Com o projeto clonado, abra o mesmo em seu Terminal, Powershell ou CMD e execute os seguites comandos:
- Se estiver utilizando Yarn execute:
  - ```
     yarn
```
- Se estiver utilizando NPM execute:
  - ```
     npm install
```
Para executar o projeto em IOS, execute o seguinte comando:
- ```
     ios/pod install
```

Depois de todas as dependências tiverem sido baixadas execute o projeto:

```
     yarn run android
```
```
     yarn run ios
```

Caso utilize NPM:

```
    npm run android
```
```
    npm run ios
```

Agora com o projeto em executação podemos ver o seu funcionamento, abaixo temos alguns exemplos:

Testes

Para o bom funcionamento da aplicação, realizamos os testes unitários. Nesse projeto podemos executar o seguinte comando para rodar os testes:
- ```
     yarn test
```
- ```
     npm test
```

Obtemos então os resultados:

Você pode acessar também o relatório completo dos testes em:

    BuildersChallengeRn
    ├── coverage/
    │   ├── Icov-report/
    │   │   └── index.html

murilokrugner/Builders-Challenge-React-Native