Weather App - is a weather forecast application that uses the user’s location to obtain weather data, as well as to show the location, date and time.
Atualizar
, a new query is made and the weather data updated.The layout is simple and clean. It uses light tones, the banner is dynamic and changed according to the user’s schedule. Below is a brief demonstration.
📦 src
┣ 📂 assets (arquivos estáticos, como fontes, imagens, ícones etc.)
┣ 📂 commons (quando não são componentes, e devem ser reutilizáveis)
┣ 📂 components (para componentes reutilizáveis)
┣ 📂 modules (módulos com lógica de negócio/duck files)
┣ 📂 services (integração com apis, separados por lógica de negócio acompanhando os modules)
┣ 📂 utils (utilitários como funções de formatação, checagem de conectividade, classe base de http etc.)
┣ 📂 screens
┃ ┗ 📂 NotAuthenticated
┃ ┃ ┣ 📂 Home
┃ ┃ ┃ ┣ 📜 index.tsx (arquivo principal, que contém a view)
┃ ┃ ┃ ┣ 📜 styles.ts (onde fica todo o style do componente)
┃ ┃ ┃ ┗ 📜 types.ts (todos os tipos pertencentes à esta tela)
┃ ┃ ┣ 📂 Error
┃ ┃ ┃ ┣ 📜 index.tsx
┃ ┃ ┃ ┗ 📜 styles.ts
┃ ┃ ┗ 📜 stack-navigator.tsx
┣ 📜 App.tsx (componente principal, onde ficam os providers)
┣ 📜 reducers.ts (onde ficam os reducers combinados)
┣ 📜 root-navigator.tsx (rotas raíz do projeto)
┗ 📜 store.ts (configuração da redux store)
Before you begin, you will need to have installed on your machine the following tools: Git , Node.js . In addition, you will need to have an API KEY
OPEN WEATHER API , for that, sign up on the OPEN WEATHER API website and get a API KEY
free one, it is enough to run the project. After obtaining yours API KEY
, create a file .env
at the root of the project and fill it out following the template of .env.template
what already exists at the root of the project, the Url’s are already filled in there, just put yours API KEY
and the desired timeout. The OPEN WEATHER API is sometimes slow, so a timeout of 9000ms or more is advisable. Your file .env
should look like this:
OPEN_WEATHER_URL=https://api.openweathermap.org/data/2.5
OPEN_WEATHER_ICON_URL=https://openweathermap.org/img/wn
OPEN_WEATHER_KEY=SUA_API_KEY
REQUEST_TIMEOUT=9000 //aqui é o timeout, não é necessário mudar esse valor como citado acima
## Clone this repository
$ git clone git@github.com: patrick-narciso / weather-app.git
## Access the project folder in the terminal / cmd
$ cd weather-app
## Install the dependencies
$ yarn install
Now just boot to a physical device, or an emulator. In the simplest form, just run:
$ yarn android
First, let’s install the project pods
$ npx pod-install
Now we can launch, with the command:
$ yarn ios
The following tools were used in the construction of the project:
See the package.json file
Author: patrick-narciso
Source Code: https://github.com/patrick-narciso/weather-app
#react #react-native #mobile-apps