Morioh
Login
Fethawi Nasih

Fethawi Nasih

3 years ago

A Simple Weather App Made with React Native

About the project

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.

⚙️ Functionalities

  • Users have access to the mobile application, where they can:
  • View your current city, day of the week, date and time
  • View climate data for your location (latitude and longitude) such as temperature, atmospheric pressure, etc.
  • Upon pressing the button Atualizar, a new query is made and the weather data updated.

🎨 Layout

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.

HomeScreen HomeScreen

🚀 How to run the project

Structure

📦 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)

Prerequisites

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 KEYfree one, it is enough to run the project. After obtaining yours API KEY, create a file .envat the root of the project and fill it out following the template of .env.templatewhat already exists at the root of the project, the Url’s are already filled in there, just put yours API KEYand the desired timeout. The OPEN WEATHER API is sometimes slow, so a timeout of 9000ms or more is advisable. Your file .envshould 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
🎲 Running the application
## 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:

Android

$ yarn android

iOS

First, let’s install the project pods

$ npx pod-install

Now we can launch, with the command:

$ yarn ios

🛠 Technology

The following tools were used in the construction of the project:

Mobile ( React Native + TypeScript )

See the package.json file

Utilities

Download Details:

Author: patrick-narciso

Source Code: https://github.com/patrick-narciso/weather-app

#react #react-native #mobile-apps

A Simple Weather App Made with React Native
4.55 GEEK