Setting up the Development Environment<\/h2>\n
Before we can start building our weather forecast application, we need to set up our development environment. Here’s what you’ll need to get started:<\/p>\n
- \n
- \n
Python: You will need to install Python on your computer<\/a>. You can download it from the official Python website<\/a>.<\/p>\n<\/li>\n
- \n
Flask: Once you have Python installed, you can install Flask using the Python Package Manager (pip). Install it by running the following command in your terminal or command prompt:
\npip install flask<\/code><\/code><\/p>\n\n
Note: It is recommended to work on a virtual environment before installing modules like Flask. Virtual Environments allow you to isolate dependencies from the rest of your system. You can read more on RealPython’s Guide to Virtual Environments<\/a>.<\/p>\n<\/blockquote>\n<\/li>\n
- \n
Text Editor or IDE: You will also need a text editor or IDE to write and run your Python code. There are many options available, such as Sublime Text, Visual Studio Code, or PyCharm. If you want to know more about some good options, you can take a look at my Guide to choosing the right Python IDE<\/a>.
\nFor this project, I recommend using VS Code<\/a>, but feel free to go for any other text editor if you prefer.<\/p>\n<\/li>\n- \n
API Key: To retrieve the weather data, we will be using an API. For this article, we will be using OpenWeatherMap API. You will need to sign up for a free API key to be able to use the API in your application.<\/p>\n<\/li>\n
- \n
Git: Git is a version control system that allows you to keep track of changes to your code. While it is not necessary for this project, it is a good idea to get into the habit of using version control from the beginning. You can download Git from the official website (https:\/\/git-scm.com\/downloads<\/a>).<\/p>\n<\/li>\n<\/ul>\n
Creating a new project and setting up the file structure<\/h3>\n
Once you got these tools ready, it’s time to start building our weather forecast application.<\/p>\n
First, create an empty folder with the name
Weather Forecast<\/code>. This will be the root folder of your project.
\nNext, create a file namedweather_app.py<\/code>. The file structure will look like this:<\/p>\n\ud83d\udce6 Weather Forecast\n\u2514\u2500\u2500 \ud83d\udcdc weather_app.py<\/code><\/pre>\nOpen the folder in your text editor. Then, copy and paste the following code in
weather_app.py<\/code>:<\/p>\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route("\/")\ndef home():\n return 'Hello, World!'\n\nif __name__ == "__main__";:\n app.run(debug=True)<\/code><\/pre>\nThe previous block of code is just a basic template for Flask applications. By running this script, you’ll be able to access the program by navigating to
localhost:5000<\/code> in your browser. The resulting page will display a "Hello, World!" message.<\/p>\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/hello_world_flask.png\")
<\/a><\/p>\nIn the following section, we will be retrieving data from the API and processing it with Python to display the local weather in your browser.<\/p>\n
Understanding the API used to Fetch Weather Data<\/h2>\n
For this project, we’ll be using the OpenWeatherMap API, which allows us to retrieve the weather forecast information we need for our app.
\nBut before we start coding, here’s a quick recap on APIs and why it’s a good idea to use them in this project.<\/p>\nOverview of APIs<\/h3>\n
APIs, or Application Programming Interfaces, are tools that allow software applications to communicate with each other. By calling an API, developers can retrieve and manipulate data from other applications without having to worry about the underlying technology that the data comes from.
\nSince modern web applications can be complex systems that work based on data coming from multiple sources, APIs are a crucial component of many modern web applications that save developers a lot of time when building said applications.<\/p>\nExplanation of the weather API used in this project<\/h3>\n
OpenWeatherMap is a service that provides weather information for cities around the world. They offer a free tier of access to their API, that we’ll be using to generate our weather forecast. This API provides a wide range of data, including current weather conditions, weather forecasts, historical weather data, and more.<\/p>\n
Registering for an API key<\/h3>\n
When working with APIs, especially paid ones, you might often find that you require an API Key to retrieve the information. This way, unathorized access and unintended use can be avoided by the developers of the API.<\/p>\n
OpenWeatherMap’s API is no exception, and you’ll need to sign up on their website for an API Key.
\nThe process is pretty straightforward: Go to the OpenWeatherMap API website<\/a> and sign up for an account. After you have confirmed your e-mail, you will receive a message with your API Key.
\nThe API Key activation is not always immediate, and might take up to two hours to be ready to use.<\/p>\nWith our API key in hand, we can now start building the backend of our weather forecast app using Flask.<\/p>\n
In the next section, we’ll learn how to set up our Flask application, define routes and views, and create a function to fetch weather data from the API.<\/p>\n
Creating the Backend with Flask<\/h2>\n
The next steps are building the backend of the application. The code we are going to write will retrieve the weather forecast information using the API key from the previous section, and will display it on a web page that you can access through your web browser.<\/p>\n
Setting up the Flask application<\/h3>\n
Open the file we created before,
weather_app.py<\/code>, and add your API key at the top of the code, like this:<\/p>\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\nAPI_KEY = "YOUR_API_KEY";<\/code><\/pre>\nDon’t forget to replace the API Key string with your own API key.
\nIn the previous code,API_KEY<\/code> is declared outside of any function. This means that it is a global variable, and can be accessed freely by any function declared in this file.<\/p>\nThe next step is to create a function to retrieve the weather information.
\nThe OpenWeatherMap API lets you do this by specifying a city name, or by passing the coordinates of the place you want. Although just calling for a city’s name might seem simplier, using coordinates you can get precise weather for the area and also avoid a situation where two cities in the same country share the same name, so that’s the method I’ll be using here.
\nThere are many ways to find the coordinates of a zip code, one of them is to go to Google Maps and right click on a location.
\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/coordinates.png\")
<\/a><\/p>\nNow it’s time to retrieve the current weather information, calling the OpenWeatherMap APi through the
get_weather_data<\/code> function:<\/p>\ndef get_weather_data(latitude, longitude):\n url = "https:\/\/api.openweathermap.org\/data\/2.5\/weather?"\n url = f"{url}lat={latitude}&lon={longitude}&appid={API_KEY}&units=metric"\n response = requests.get(url)\n return response.json()<\/code><\/pre>\nThis function receives two parameters,
latitude<\/code> andlongitude<\/code>, that are later passed to the API call.
\nTheurl<\/code> variable stores the access point to the API. Using f-strings, we replace the values forlatitude<\/code>,longitude<\/code>, andAPI_KEY<\/code> in the URL. I also defined&units=metric<\/code> to get the temperature in Celsius. You can change this value toimperial<\/code> to get the temperature in Fahrenheit.
\nTo fetch the data from the API, you need to make an HTTP request the API’s endpoint. We can do that by importing therequests<\/code> module and callingrequests.get()<\/code> with the URL as an argument, and storing the result inresponse<\/code>.
\nCallingresponse<\/code> after this would return a status code<Response [200]><\/code> if the request was successful, but that still won’t let us take a look at the weather data. To do that, we need to callresponse.json()<\/code>, which will return the weather forecast data in JSON format.
\nJSON stands for JavaScript Object Notation, and is a format that we can use to easily parse the data from the response.<\/p>\nDefining routes and views<\/h3>\n
In Flask, a route represents the URL that users can visit, while a view is the function executed when that route is visited.
\nFor example, in this app we only have one route defined ("\/"), and one view (home()<\/code>) that returns the string"Hello, world!"<\/code> and displays it to the user.<\/p>\nNow, it’s time to update the
home()<\/code> function to display the weather for the selected location.<\/p>\n@app.route("\/")\ndef home():\n latitude = 35.22592847208098\n longitude = -80.85293281605993\n weather_data = get_weather_data(latitude, longitude)\n temperature = weather_data['main']['temp']\n description = weather_data['weather'][0]['description']\n city = weather_data['name']\n\n return render_template('weather.html', temperature=temperature, description=description, city=city)<\/code><\/pre>\nThe previous code does:<\/p>\n
- \n
- Define the
latitude<\/code> andlongitude<\/code> of the place we want to check.<\/li>\n- Call
get_weather_data()<\/code> and pass the coordinates we just defined as parameters. The result of performing the HTTP request is stored inweather_data<\/code>, in JSON format.<\/li>\n- In Python, data formatted in JSON can be read as a dictionary, which let’s us easily access each part of the information we are looking for.
\nIf you take a look at the values returned byget_weather_data()<\/code>, you’ll see something like this:<\/p>\n...\n"main":{\n "temp":284.31,\n "feels_like":282.71,\n "temp_min":284.31,\n "temp_max":285.21,\n "pressure":1027,\n "sea_level":1027,\n "grnd_level":1002,\n "humidity":47,\n "temp_kf":-0.9\n },\n"weather":[\n {\n "id":802,\n "main":"Clouds",\n "description":"scattered clouds",\n "icon":"03d"\n }\n ],\n...<\/code><\/pre>\nThis is just a fragment of the data, but it shows the nested structure of the file, very similar to dictionaries. Since every part of the data contains key-value pairs, JSON files are often accessed as dictionaries in Python.<\/p>\n<\/li>\n
- Finally, the function
render_template()<\/code> is called. This function generates, or renders, the webpage that is going to be displayed to the user, based on an HTML template.render_template()<\/code> also accepts receiving values that can later be used in the HTML template.
\nIf you try to run the code as is at this point, you will get an error since theweather.html<\/code> template has not been created yet.
\nIn the next section, we’ll go over what Jinja templates are, and how you can use them to display information to users.<\/li>\n<\/ul>\nDisplaying the fetched data on a web page<\/h2>\n
Before knowing how to display the data on a web page, it’s important to know what Jinja templates are, and how we can use them with Flask.<\/p>\n
Setting up the template<\/h3>\n
Since the contents of a web application are usually dynamic, that is, they are often changing, regular static HTML pages would not be enough to display the weather data we retrieved from OpenWeatherMap to the user. Instead, Flask relies on Jinja templates to create webpages with dynamic values.<\/p>\n
Jinja templates are a type of HTML pages designed with Python in mind. While they are very similar to, they can receive parameters for dynamic content.
\nFor example, a static HTML page that displays the current weather might look like this:<\/p>\n<body>\n <h1>Weather Forecast - Charlotte<\/h1>\n <p>The temperature is 12\u00b0C.<\/p>\n <p>The current weather is cloudy.<\/p>\n<\/body><\/code><\/pre>\nBeing static content, the page won’t update unless you make changes manually to it. On the other side, a Jinja template might look like this:<\/p>\n
<body>\n <h1>Weather Forecast - {{ city }}<\/h1>\n <p>The temperature is {{ temperature }}\u00b0C.<\/p>\n <p>The current weather is {{ description }}.<\/p>\n<\/body><\/code><\/pre>\nWhere
city<\/code>,temperature<\/code>, anddescription<\/code> can be variables that can be replaced with values from our Python code when callingrender_template()<\/code> in our view.<\/p>\nUpdating the file structure<\/h3>\n
In Flask, the
templates<\/code> folder is where you store your Jinja templates. Without this folder, your program won’t be able to find any HTML files that you might use.
\nTherefore, the file structure will look like this now:<\/p>\n\ud83d\udce6Weather Forecast\n \u2523 \ud83d\udcc2templates\n \u2503 \u2517 \ud83d\udcdcweather.html\n \u2517 \ud83d\udcdcweather_app.py<\/code><\/pre>\nDisplaying the data on a webpage<\/h3>\n
Finally, to display the retrieved data from OpenWeatherMap on a webpage, you’ll need to define your template on
weather.html<\/code>.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <title>Weather Forecast<\/title>\n<\/head>\n<body>\n <h1>Weather Forecast - {{ city }}<\/h1>\n <p>The temperature is {{ temperature }}\u00b0C.<\/p>\n <p>The current weather is {{ description }}.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\nAfter saving that file on the
templates<\/code> folder, you can runweather.py<\/code> and go tolocalhost:5000<\/code> or127.0.0.1:5000<\/code> to see the result.
\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/weather_charlotte.png\")
<\/a><\/p>\nAnd that’s it. We have finished building a basic weather app using Flask and Python. However, there’s still a lot that we can add to it to make it more appealing or functional
\nKeep reading to find out how to further improve this application.<\/p>\nImproving the application<\/h2>\n
Doing small retouches to the app, we can add functionality like getting a 5-day forecast or improving the look of the application.
\nLet’s start by adding some color and icons.<\/p>\nAdding a CSS Stylesheet<\/h3>\n
We can apply styles to the a HTML page using CSS stylesheets, which are "static" files. Static files are files that don’t change while you application is running, like images, JavaScript files, and CSS files.
\nTo access static files using Flask, you need to store them in thestatic<\/code> folder, at the root of your application.
\nNow, the structure of your app will look like this after creatingstyle.css<\/code><\/p>\n\ud83d\udce6Weather Forecast\n\u2523 \ud83d\udcc2static\n\u2503 \u2517 \ud83d\udcdcstyle.css\n\u2523 \ud83d\udcc2templates\n\u2523 \u2517 \ud83d\udcdcweather.html\n\u2517 \ud83d\udcdcweather_1.py<\/code><\/pre>\nThe next step is to link the CSS stylesheet to the HTML template. To accomplish this, we’ll use the
url_for()<\/code> function to find the static folder, passing the name of the file as an argument.<\/p>\n<head>;\n <title>Weather Forecast<\/title>\n <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">\n<\/head><\/code><\/pre>\nAnd in
style.css<\/code> we can add a nice blue background with a gradient by passing two RGB colors tolinear-gradient<\/code> and setting it as a background image, like this:<\/p>\nbody{\n background-image: linear-gradient(to right,rgb(146, 192, 219), rgb(76, 146, 250));\n}<\/code><\/pre>\nAfter adding the background color, the page should look like this:
\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/weather_app_1.jpeg\")
<\/a><\/p>\nIn the next section, I’ll show you how to add an icon to display besides the temperature.<\/p>\n
Adding weather icons<\/h3>\n
Images and icons help improve the look of any application considerably and instantly make it look more friendly and approachable. Thanks to the
icon<\/code> key included with the data from OpenWeatherMap API, we can easily identify which icon we need to show to match the current weather.
\nYou can read more about OpenWeatherMap icons here<\/a>.<\/p>\nTo represent the different weather conditions, I downloaded the icons from this Github repository<\/a>. Since these are vector graphics in SVG format, we won’t have to worry about the resolution of the icons later when upscaling them.<\/p>\n
The process of adding icons to the application can be broken down into these steps:<\/p>\n
- \n
- Adding the icons to the
static<\/code> directory.<\/li>\n- Updating the Python code to dynamically select the right icon to display<\/li>\n
- Updating the Jinja template to receive and display the icon to the user<\/li>\n
- Update the design of the app using CSS<\/li>\n<\/ul>\n
Let’s start by creating a directory with the name
icons<\/code> in thestatic<\/code> directory of our application, so the structure of the application will now look like this:<\/p>\n\ud83d\udce6Weather Forecast\n\u2523 \ud83d\udcc2static\n\u2503 \u2523 \ud83d\udcc2icons\n\u2503 \u2503 \u2523 \ud83d\udcdcclear.svg\n\u2503 \u2503 \u2523 \ud83d\udcdc...\n\u2503 \u2503 \u2517 \ud83d\udcdctstorms.svg\n\u2503 \u2517 \ud83d\udcdcstyle.css\n\u2523 \ud83d\udcc2templates\n\u2523 \u2517 \ud83d\udcdcweather.html\n\u2517 \ud83d\udcdcweather_1.py<\/code><\/pre>\nNext, we’ve got to update our Python code.
\nSince the icon’s code is one of the values that we get from calling OpenWeatherMap’s API, I created a dictionary to map the icon codes to filenames in the icons directory:<\/p>\nicon_filenames = {'01d': 'clear',\n '01n': 'nt_clear',\n '02d': 'cloudy',\n '02n': 'cloudy',\n '03d': 'cloudy',\n '03n': 'cloudy',\n '04d': 'cloudy',\n '04n': 'cloudy',\n '09d': 'chancerain',\n '09n': 'chancerain',\n '10d': 'rain',\n '10n': 'rain',\n '11d': 'tstorms',\n '11n': 'tstorms',\n '13d': 'snow',\n '13n': 'snow',\n '50d': 'fog',\n '50n': 'fog', }\n\n@app.route('\/')\n...<\/code><\/pre>\nBy creating a dictionary like this, we can easily get the right filename that corresponds to each code.
\nFor example, the dictionary will return the filenament_clear<\/code> when we call it using the code01n<\/code> as our key:<\/p>\n>>> icon_filenames['01n']\n'nt_clear '<\/code><\/pre>\nIn order to display the selected icon, it is necessary to create a URL that points at the file, so that it can be displayed through the resulting HTML page and served to the user. To do that, we have to update the
home()<\/code> function.<\/p>\n@app.route('\/')\ndef home():\n latitude = 35.22592847208098\n longitude = -80.85293281605993\n weather_data = get_weather_data(latitude, longitude)\n temperature = weather_data['main']['temp']\n description = weather_data['weather'][0]['description']\n city = weather_data['name']\n icon = weather_data['weather'][0]['icon'] # Get icon filename from dictionary \n icon_url = url_for('static', filename=f'icons\/{icon_filenames[icon]}.svg') # Dynamically generate icon's URL\n\n return render_template('weather.html', temperature=temperature, description=description, city=city, icon_url=icon_url) # Pass icon's URL as a parameter<\/code><\/pre>\nNext, we are going to edit our HTML template to add an
<img\/><\/code> tag to feature the icon for the current weather. In this case, I grouped the<img\/><\/code> and<p><\/code> tags together inside a<div><\/code> to later apply styling on both elements using the CSS Stylesheet.<\/p>\n<h1>Weather Forecast - {{ city }}<\/h1>\n <div id="main-temp">\n <img src="{{ icon_url }}"\/>\n <p>The temperature is {{ temperature }}\u00b0C<\/p>\n <\/div>\n <p>The current weather is {{ description }}.<\/p><\/code><\/pre>\nFinally, we add this code at the end of
style.css<\/code>:<\/p>\n#main-temp{\n \/* Use flexbox to center the elements horizontally and vertically *\/\n display: flex;\n \/* Set the font size to 96 pixels *\/\n font-size: 96px;\n \/* Center the elements horizontally *\/\n justify-content: center;\n \/* Center the elements vertically *\/\n align-items: center\n}\n\nimg{\n \/* Set the width of the image to 2em (relative to the font size of the parent element) *\/\n width: 2em;\n}<\/code><\/pre>\nNow, the page will look like this:
\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/weather_forecast_1-1024x232.png\")
<\/a><\/p>\nTweaking the application<\/h3>\n
Before moving forward to add a 5-day forecast, there are some quick tweaks that can make our application look better.<\/p>\n
Starting with
weather.py<\/code>, we can round up the temperature value, and capitalize the description of the current weather like this:<\/p>\n@app.route("\/")\ndef home():\n ...\n\n return render_template('weather.html',\\ \n temperature=round(temperature), description=description.capitalize(), \\\n city=city, icon_url=icon_url)<\/code><\/pre>\nOn
weather.html<\/code>, we can remove some of the additional text and display only the most important values to the user. I also moved the weather description to the top:<\/p>\n...\n<body>\n <h1>{{ city }}<\/h1>\n <p id="description">{{ description }}<\/p> <!-- Add identifier to description for styling -->\n <div id="main-temp">\n <img src="{{ icon_url }}"\/>\n <p>{{ temperature }}\u00b0C<\/p>\n <\/div>\n<\/body>\n...<\/code><\/pre>\nMost changes are done in the CSS stylesheet, like switching all text to white, changing the font, and centering the headers and text:<\/p>\n
body{\n background-image: linear-gradient(to right,rgb(146, 192, 219), rgb(76, 146, 250));\n color:white; \/* Make all text white *\/\n font-family: sans-serif; \/* Change all fonts to sans-serif *\/\n}\n...\nh1, h2, h3, h4, h5, h6, #description{\n text-align: center; \/* Center headers and weather description *\/\n}<\/code><\/pre>\nNow the application will look like this:
\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/weather_forecast_2-1024x543.png\")
<\/a><\/p>\nIn the next section, I’ll show you how to add a 5-day weather forecast.<\/p>\n
Adding 5-day weather forecast<\/h3>\n
OpenWeatherMap also provides us with a different API endpoint to retrieve the 5-day weather forecast. The information retrieved includes max and minimum temperatures every three hours for the following 5-days and the current day.<\/p>\n
We can create a function very similar to
get_weather_data()<\/code> to retrieve the forecast information, calling the different API endpoint for this task:<\/p>\ndef get_forecast_data(latitude, longitude):\n url = f"http:\/\/api.openweathermap.org\/data\/2.5\/forecast?"\n url = f"{url}lat={latitude}&lon={longitude}&appid={API_KEY}&units=metric"\n response = requests.get(url)\n return response.json()<\/code><\/pre>\nWe are looking to display the weather in a table like this:<\/p>\n
- Call
- \n
![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/weather_forecast_3-1024x410.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/weather_forecast_5-1024x547.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/noerguerra.com\/wp-content\/uploads\/2023\/02\/pexels-caio-174540-1024x681.jpg\")
<\/a>