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

1. 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

2. Para executar o projeto em IOS, execute o seguinte comando:

   •      ios/pod install

3. 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

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

Testes

1. 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