Utilizando a API de 5 dias é possivel ver o tempo com 3h de diferença num total de 40 pontos no JSON
- Meu token: b5812747ac712899d1de32c68ba565fd
- Endpoint: http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=b5812747ac712899d1de32c68ba565fd
- Adicionei a linguagem brasileira com "&lang=pt_br" como indicado na documentação para ver "tempo nublado" ao invés de "cloudy"
- Adicionei a unidade celsius com "&units=metric" como indicado na documentação para ver "32" ao invés de "89.6"
- converti o unix para uma data mais "humana" com a função "new Date(list[0].dt * 1000)"
Como a API usa latitude ao inves do nome da cidade utilizei uma API da mesma organização que permite converter cidade pra lat/long
-
Endpoint: http://api.openweathermap.org/geo/1.0/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key}
-
Endpoint com token: https://api.openweathermap.org/geo/1.0/direct?q=porto%20alegre,RS,BR&limit=1&appid=b5812747ac712899d1de32c68ba565fd
- Script de instalação -> steps.txt
- Servidor Python FastAPI -> main.py
- Lógica do ReactJS -> src/app.js
- Template da pagina -> public/index.html
Obs: adicionei bootstrap como css para melhorar a aparência
Instalar requisitos
- "apt install postgresql python3 python3-pip"
- "pip3 install -r requirements.txt"
Rodar backend - dentro da pasta react
- "python3 -m uvicorn main:app --reload"
Rodar frontend - dentro da pasta react/linx
- "npm start"
-
React JS http://127.0.0.1:3000/
-
Fast API http://127.0.0.1:8000/{path}
-
Swagger http://127.0.0.1:8000/docs
Exemplo psql:
Id | Timestamp (insercao) | Consulta |
---|---|---|
1 | Thu 15 Set 20:34:04 |
"Gravatai RS BR" |
2 | Data Hora: Min: Seg |
"Cidade Estado País" |
Diagrama de fluxo da aplicação react
sequenceDiagram
ReactJs ->> Fast API: Consulta Tempo Proximos 5 dias
Fast API-->>OpenWealthOrg: GET "API GEO Latitude/Longitude"
OpenWealthOrg-->>Fast API: GET "{lat:500, long:-30}"
Fast API-->>OpenWealthOrg: GET "API Wealth next 5 days"
OpenWealthOrg-->>Fast API: GET "{timestamp:1663246805,max:23.5, min:12.3 }"
Fast API ->> ReactJs: Consulta Tempo Proximos 5 dias
Fast API ->> Postgresql: Insere consulta realizada
sequenceDiagram
ReactJs ->> Fast API: Consulta Historico de pesquisa
Fast API ->> Postgresql: Históreico de Consultas
Postgresql->>Fast API: {timestamp:1663246805, consulta:'Posto Alegre RS BR'}
Fast API ->> ReactJs: Consulta Tempo Proximos 5 dias