Creating a Real-Time Weather App — Part 2

Published in

Dev Diaries

3 min readJul 24, 2020

This article showcases an upgraded version of my previous article — Creating a Real-Time Weather App in Flask Using Python requests and geocoder.

Forgot to mention my English name is Tiffany :D

You may also try it out here (current use geolocation is hard-coded because the IP module used here only capture router IP, not actual GPS location):

https://weather-at-where-you-at.herokuapp.com/

Goal

This is a simple application for people like me who wants to have more concise weather information depending on where I am right now:)

App Features

Your current IP location with the nearest weather station’s data reading
A map showing where I am and where the nearest weather station is to my current location
A trend graph showing the percentage of precipitation within the next 6 hours up to the following 2 days
A trend graph with two lines showing temperature and perceived temperature of the next 3 hours up to the following 2 days

Updated Features

Update the look of the app
Roundup the numbers of humidity and temperature from API
Add a map to mark current locations and nearest weather station using folium
Show the latest rainfall forecast, temperature, and perceived temperature trend from Taiwan CWB API using chartJS

Demo

Current IP location with the nearest weather station’s data reading (My English Name is Tiffany!)

showing where I am and where the nearest weather station is to my current location

percentage of precipitation within the next 6 hours up to the following 2 days

two lines showing temperature and perceived temperature of the next 3 hours up to the following 2 days

Technical Elements

Flask (Python)
Folium
Chart.js
Connect to third-party API

So, let’s get started

Programming process

File structures:

flask
├── main.py
├── find_nearest.py
├── pop6h_forecast.py
├── T_AT_forecast.py
└── templates
    ├── weather.html
    └── map.html

First, create a main entry point with Flask. Each route contains one specific function — from showing the entire layout from weather.html, calculating and retrieve required data from find_nearest.py, pop6h_forecast.py, T_AT_forecast.py to create a map and render as map.html:

In my layout weather.html, each tag within <body></body>will dynamically grab variables from output variables from flask:

Second, fill in JSON data from pop6h_forecast.py and T_AT_forecast.py into chartJS:

For the map, I specified iframe to tell flask use below route “/map” to render map.html and insert it here in weather.html:

<iframe class=”map”, src=”/map” width=”100%” height=”500"></iframe>

That’s it. Thanks for reading!

Have a wonderful day :)