Building a weather app using Openweathermap and Flask | by Sagun Shrestha | Towards Data Science

In this article, we will learn the basics of using a web API. We will use Python and Flask to create a simple backend that calls Openweathermap API and render the result in a web page.
If you want to skip the article and access code, head over to the GitHub repo.
Goto https://home.openweathermap.org/users/sign_up and sign up for a free plan if you haven’t already. Then visit the API key section https://home.openweathermap.org/api_keys to get your key. You can use the default key or generate a new one as you wish. You may have to wait for a while to get your key verified.
I am using Python 3.6 for this project so make sure you have 3.6 or higher version installed. Beside that, we will only need Flask for web and requests for making API calls. Create a new file called requirements.txt and add the dependencies. Your file should look like this:
Flask==1.1.1requests==2.22.0
Now use the following command to install requirements:
pip install -r requirements.txt
Or if you just want to install Flask and requests
pip install Flask requests
You may need to use pip3 instead of pip and sudo for linux and mac if pip is occupied by Python 2.7.
Going through the documentation, the simplest way to make requests is using the city name. The url to make request will look like this
http://api.openweathermap.org/data/2.5/weather?q=city_name&APPID=your_api_key
You can copy paste the url and replace the city_name and your_api_key with appropriate value to see the result.
If you want to see a formatted JSON response, you can use a chrome extension called JSONView. Your response will look something like this in browser.
All the data shown are pretty much straightforward. The temperature is shown inside the main key. name and id both can be used to query the API.
Flask is a simple, lightweight web framework. It can be used to create minimal web applications and APIs. Create a file named weather_app.py and initialize our Flask application.
In the above snippet, we are importing Flask and creating an instance of it. @app.route() is used to create routes. Here we are creating one for the home page which basically renders “Welcome to weather app” inside h1 tag in the browser. We will add more routes later. Inside the if block, we are running the app with debug=True which tells Flask that the app is running in debug mode. The advantage of running in debug mode is that if we make changes in our app, Flask will automatically detect those changes and reload the server for us. Make sure you set this to False when moving into production.
Run the server by typing the following command in your terminal/cmd
python weather_app.py
If you have python 2 and 3 both installed (usually in linux and mac), you will have to use python3 instead of python
python3 weather_app.py
You will see something like this
* Debug mode: on* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)* Restarting with stat* Debugger is active!* Debugger PIN: 123-456-789
Visit http://127.0.0.1:5000/ and you will see “Welcome to weather app” in h1. To quit the server, press CTRL + C.
Now we want a way to enter a city name and get the current weather for that place. For that we will have to create another route, let’s call it /city which takes the city’s name as an argument and returns the temperature.
Now to test the API, visit the url
http://127.0.0.1:5000/city?q=kathmandu
You will see a response like this in your browser:
Current temperature of Kathmandu is 15.0 °C
Whatever we pass in our url as query will be stored in request.args as a dictionary. Here, q=kathmandu is the query string so the request.args will hold {“q": “kathmandu"}. Then we are using the get method to access the dictionary by keys. You can learn more about dictionaries in this tutorial. Same is the case while getting current temperature.
current_temperature = response.get('main', {}).get('temp')
You can change kathmandu with the city you want. The list of cities along with id can be downloaded from this link.
The final weather_app.py file should look like this.
At this point, we have created a simple application that gets the current temperature for a certain city. This article should give you an idea of how Flask works and how you can use an API with Python. You can access the code from my GitHub repo.
From here, you can extend the functionality and add more features to the app such as
adding a search buttonusing templates and a nice looking interfacedisplaying the list of cities and respective idsquerying by id along with namedisplay other data like max, min temperature, humidity, wind, etc
adding a search button
using templates and a nice looking interface
displaying the list of cities and respective ids
querying by id along with name
display other data like max, min temperature, humidity, wind, etc
Let me know if you have any problems while following this tutorial or need help adding more features.