Creating a Real-Time Weather App — Part 1

This time I’ll use Flask to create a weather app and will be using Open weather Data API of the Taiwan Government Central Weather Bureau 中央氣象局 with Python requests to get the data.

• What I’m going to make and Why

I’ve been thinking to make another quick simple web app about getting the latest, most nearby weather station data to know how’s the weather like in my current area. Most of the time we only know the large scale of weather conditions like the overall city, but what if I’m more curious about my area? Is there another way if I don’t want to spend money on embedding any devices at home or a certain place?

So here I’m going to use the government’s API, find the nearest weather station to my current location, both latitude, and longitude, get the data to read from it, and show it on a simple, neat-looking page on a browser as a web application.

• Skills:

1. Create a simple web application with flask.
2. Use python decorator to create route() which will tell Flask what URL should trigger our function.
3. Request data from external API with request module
4. Get current location’s latitude and longitude with geocoder module.
5. Find the nearest weather station by calculating the distance of each weather station and my current location.
6. Use render_template function to pass data to a designed HTML structure.
7. Display the result on a browser like this:

• Environment: VS code, Python 3.8

So, let’s get started.

• Programming process

Import required libraries:

First, import the Flask class and create an instance of this class. This instance is our WSGI application. The argument is the name of the application’s module or package:

Applications need some kind of configuration, so use the config attribute of the Flask object. When using flask run to start the development server, an interactive debugger will be shown for unhandled exceptions, and the server will be reloaded when code changes. Remember do not use debug mode in a production environment!

Now we get ‘app’ which is the Flask application object. Initialize ‘app’ with a Flask Application function to create the main entry point for the application:

I then use the route() decorator to tell Flask what URL should trigger our function. The function is given a name that is also used to generate URLs for that particular function and returns the message we want to display in the user’s browser. Here I will return the result of the ‘index’ function, which is my main construction block where I get specific data from government weather API:

Let’s take a look at what includes in the ‘index’ function.

The first part is to get external API data according to my specified arguments, and store the returned JSON format data in the ‘req’ variable:

The second part is to find the nearest weather station in latitude and longitude versus my current location. My current location is attained from ‘geocoder’, which also responds in latitude and longitude:

Once I get all distances between my current location and each weather station, I’d like to find the nearest weather station by using the distance formula with ‘math.sqrt’. Eventually, use the found nearest weather station’s index to get its data and insert data into my ‘weather.html’ with ‘render_template’ function as the return value of my overall ‘index’ function:

Once the main construction block is built, at the bottom, I will let flask know we’re going to implement this current ‘.py’. Its name is ‘__main__’:

Until now flask app part is done! When we hit the play button, we should be able to see the terminal as below and the web app is running on our browser by typing e.g. http://0.0.0.0:3333/:

We will see:

That’s it! Thanks for reading!

Have a wonderful day :)