Skip to content

Aplicativo desenvolvido em React Native, que consume a localização atual do usuário e exiba na interface o endereço atual, os dados e botão para atualizar a localização do usuario e exibir os novos dados.

Notifications You must be signed in to change notification settings

carlosrobert0/weatherApp

Repository files navigation

WeatherApp

Tópicos

🔹 Descrição do projeto

🔹 Funcionalidades

🔹 Pré-requisitos

🔹 Como rodar a aplicação

Descrição do projeto

Aplicativo desenvolvido utilizando React Native, para exibir dados metereológicos a partir da localização do usuário.
Esse permite acesso a localização no device e são exibidas as informações do clima tempo em tempo real para consulta.
E opção de atualizar a localização refletindo os novos dados na tela de consulta.

Funcionalidades

✔️ Buscar dados de geolocalização (latitude, longite) a partir da permissão do usuário para consulta da localização.

✔️ Exibir dados meterológicos em tempo real a partir da localização do device do usuário.

✔️ Atualizar dados meterológicos em tempo real a partir da localização do device do usuário.

Pré-requisitos

É necessário ter o node instalado para a execução do aplicativo. Você pode instala-lo aqui: Node

É necessário ter o Android Studio instalado para a execução o aplicativo em um emulador ou dispositivo físico.
Você pode instala-lo aqui: Android Studio

  • PORÉM A INSTALAÇÃO DO ANDROID STUDIO DEVE SER FEITA APÓS AS INSTALAÇÕES DAS DEPENDÊNCIAS SEREM FEITAS NO WINDOWS E IOS -

Segue a documentação exata de como montar o setup para execução do App com Android Studio.
Para iOS: https://react-native.rocketseat.dev/ios/macos
Para Android: https://react-native.rocketseat.dev/android/windows

Integração com api de dados metereológicos OpenWeatherMap

Para o consumo dos dados climáticos é utilizada a api OpenWeatherMap
Após clicar nesse link clique, em Current Weather Data no botão subscribe, ali você irá criar uma conta e irá te retornar uma key,
essa key é necessário para fazer as consultas na api.

Essa key vai ser valor a ser passado em uma variavel ambiente chamada API_KEY no arquivo .env.example na raiz do projeto.
Após ter preenchido a variavel API_KEY com o valor de key encontrado em https://home.openweathermap.org/api_keys
Ex.: API_KEY=6281e15bb5bb2a68bc3c10042802e76a

Renomeia o arquivo .env.example para .env e rode o projeto.

Como rodar a aplicação ▶️

No terminal, clone o projeto:

git clone https://github.com/carlosrobert0/weatherApp

Acesse o projeto

cd weatherApp

Instale as dependencias do projeto

npm install

Rode o projeto para android

npm run android

Rode o projeto para ios doc

Telas da aplicação

Tela inicial de quando usuario entra no aplicativo e ainda nao permitiu acesso a localização empty

Tela de quando o usuario permitiu localização e o clima está chuvoso rain1 rain2

Tela de quando o usuario permitiu a localização e o clima está sem chuva clouds cloud

Licença

The MIT License (MIT)

Copyright ©️ 2023 - WeatherApp

About

Aplicativo desenvolvido em React Native, que consume a localização atual do usuário e exiba na interface o endereço atual, os dados e botão para atualizar a localização do usuario e exibir os novos dados.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published