Want to code faster? OurPython Code Generator lets you create Python scripts with just a few clicks. Try it now!

In this article, we will take you through the process of building a weather update app usingDjango,Bootstrap, andOpenWeatherMap API. Before we dive deep, let us understand what a weather update app is.

A weather update app is an app that enables users to search for weather information for cities and returns the necessary weather information for those cities. If you want to build a weather update app using Django, then this article is for you; we will build the app from the ground up.

At the end of this article, we are going to build a fully-fledged application that looks like this:

Here is the table of contents:

• Creating the Virtual Environment
• Installing all the Necessary Dependencies
• Creating the Main Project and the App
• Registering the App in thesettings.py File
• Creating the App’s View
• Configuring the URLs of the App
• Creating the App’s Templates
• Rendering the Templates
• Getting the API Key for the OpenWeatherMap API
• Implementing the App’s Search Functionality
• Conclusion

Creating the Virtual Environment

Our first main task is to create a virtual environment for the project, this virtual environment will help us manage the project’s dependencies very easily:

$ python -m venv project

Since we will install all our dependencies in the virtual environment, let us activate it. On Windows:

$ .\project\Scripts\activate

Linux/macOS:

$ source project/bin/activate

Installing all the Necessary Dependencies

Now that the virtual environment is up and running, let us install all the required dependencies for the project:

$ pip install django requests

We will use Django for the backend functionality andrequests for sending requests to the OpenWeatherMap API.

We have successfully installed all the required packages. But something to note here, both Django andrequests packages come with some supporting packages.

Creating the Main Project and the App

Now that we are done with the installations, let's create the project:

$ django-admin startproject weatherapplication$ cd weatherapplication

After youcd intoweatherapplication project, create the application:

$ python manage.py startapp weatherupdates

The application is namedweatherupdates, feel free to name it whatever you want, but just make sure the name does not conflict with the project’s name.

After everything, make sure you have this folder structure:

manage.py is a Python script used for executing administrative commands e.g.startapp,runserver,makemigrations,migrate, etc.

Having installed Django, it is time we run it locally:

$ python manage.py runserver

By default, Django runs on port8000, and you can find it onhttp://127.0.0.1:8000/. You will get this output:

Congratulations on successfully installing Django!

Registering the App in thesettings.py File

Now it is time we let the project know about the application that has been created inside it. Inside theweatherapplication folder, there is asettings.py file:

This file is responsible for all the configurations of the project. Open it and scroll down to theINSTALLED_APPS list, make it look like this:

INSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    # this is the new created app    'weatherupdates',]

Creating the App’s View

Our task for this section is to create a view for the app, which will have a single view. Let us name itindex(). Inside theweatherupdates folder, there is aviews.py file:

This file will contain all the application's logic e.g., capturing data from the form, sending a request to the API, etc. 

Open it and add the following code:

from django.http import HttpResponsedef index(request):    return HttpResponse('The Index View')

TheHttpResponse will return a certain response to the user. In this case, it will return the text that has been passed to it.

Configuring the URLs of the App

Now that we have created the view, we need to register it. Create a file namedurls.py inside theweatherupdates folder, do not name it otherwise because this is Django’s way of doing things:

This file is used for registering the views. Open it and paste this code:

# here we are import path from in-built django-urlsfrom django.urls import path# here we are importing all the Views from the views.py filefrom . import viewsurlpatterns = [    path('', views.index, name='home'),]

Theurlpattherns is just a list of URL paths, and these paths are created by Django’spath() function. Thepath() function takes three arguments, the actual path, the view, and the view’s name.

Now that everything is set in theweatherupdates/urls.py file, let us register these URLs in the project’surls.py file. Do not be confused here; it must be noted that we have twourls.py files in our project but serving different purposes:

These two files are as follows:

• weatherapplication/urls.py – this is inside the project’s folder and is used for registering all the application URLs.
• weatherupdates/urls.py – this is simply for registering an app’s views and is inside an app’s folder.

Open theweatherapplication/urls.py, and edit it to look as follows:

from django.contrib import adminfrom django.urls import path, includeurlpatterns = [    # the default path for the admin site    path('admin/', admin.site.urls),    # this points django to the weatherupdates app urls    path('', include('weatherupdates.urls')),]

Theinclude() function points Django to the app’s URLs. In this case, it is pointing Django to theweatherupdates/urls.py.

So far, so good; we now need to test if the configurations work perfectly. Check if the server is still running, and then open the browser and refresh the Django success installation page; this is the output that you'll get:

Creating the App’s Templates

Let us create the templates for the app. The app will have three templates:

• base.html
• home.html
• 404.html

Inside theweatherupdates, create a folder namedtemplates, and inside thistemplates folder, create another folder namedweatherupdates, this is Django’s convention, and do not do it otherwise. Now inside this newly createdweatherupdates folder, create the three templates:

Open thebase.html and paste this code:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Weather Updates App</title>    <!-- getting bootstrap5 from CDN -->    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body>    {% block content %}            {% endblock %}</body></html>

This is an HTML boilerplate file with Bootstrap5 added to it, and the other templates will inherit from it. This will prevent us from having repeated code.

Let's also add code to the other templates. Openhome.html and make it look like this:

<!-- extends is for inheriting from the base.html -->{% extends 'weatherupdates/base.html' %}{% block content %}<div>    <div>        <div>            <h1>Weather Update App</h1>        </div>        <form action="." method="POST">          {% csrf_token %}          <div>            <input type="text" required name="city" placeholder="Search City.......">            <div>              <button type="submit">                Search              </button>            </div>          </div>        </form>        <hr>    </div></div>{% endblock %}

This file will display the form and the weather information. The form has a POST method and points to the current URL as theaction. Inside the form, we have acsrf_token, which secures the form from any malicious attacks during submission.

Again open the404.html template and paste this code:

<!-- extends is for inheriting from the base.html -->{% extends 'weatherupdates/base.html' %}{% block content %}<div>    <div>        <h1>Page Not Found</h1>        <p>Make sure you are connected to the internet or you are entering a valid city name</p>        <a href="{% url 'home' %}">Go Home</a>    </div></div>{% endblock %}

This template is for displaying aPage Not Found error; it has aGo Home button; this button will take the user back to the home.

Rendering the Templates

Now that the templates are all set, let us render them in the browser. To do this, we need to modify theviews.py file, and make it look as follows:

from django.shortcuts import renderdef index(request):    # the render function is for rendering templates    return render(request, 'weatherupdates/home.html')

With this modification, you will get this output in the browser:

Getting the API Key for the OpenWeatherMap API

To make requests to the OpenWeatherMap API, we need an API key. So to get this key, we need to sign up.

First of all, go tothe signup page, provide your credentials and create your account. This account can be verified via the email address you provided when creating this account, so sign in to your mailbox, and in the primary folder, you will find the confirmation email message. If you already have an account, you can just sign in, and you will be taken to the home page:

Click theAPI keys tab, and you will be taken to this page:

Here you can generate your API key or use the default key that OpenWeatherMap provides. 

Now we need to pick the URL that we will send requests to. Since we are more interested in finding the current weather of a particular city, we will use this URL:

https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric

OpenWeatherMap provides you with lots of URL options with different parameters, and you can explore themhere.

Implementing the App’s Search Functionality

It is now time we implement the search functionality of our app, open theviews.py file, on top, add the following:

import requestsimport jsonfrom datetime import datetime

And make theindex() view like this:

# the index() will handle all the app's logicdef index(request):    # if there are no errors the code inside try will execute    try:    # checking if the method is POST        if request.method == 'POST':            API_KEY = 'put your API key here'            # getting the city name from the form input               city_name = request.POST.get('city')            # the url for current weather, takes city_name and API_KEY               url = f'https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric'            # converting the request response to json               response = requests.get(url).json()            # getting the current time            current_time = datetime.now()            # formatting the time using directives, it will take this format Day, Month Date Year, Current Time             formatted_time = current_time.strftime("%A, %B %d %Y, %H:%M:%S %p")            # bundling the weather information in one dictionary            city_weather_update = {                'city': city_name,                'description': response['weather'][0]['description'],                'icon': response['weather'][0]['icon'],                'temperature': 'Temperature: ' + str(response['main']['temp']) + ' °C',                'country_code': response['sys']['country'],                'wind': 'Wind: ' + str(response['wind']['speed']) + 'km/h',                'humidity': 'Humidity: ' + str(response['main']['humidity']) + '%',                'time': formatted_time            }        # if the request method is GET empty the dictionary        else:            city_weather_update = {}        context = {'city_weather_update': city_weather_update}        return render(request, 'weatherupdates/home.html', context)    # if there is an error the 404 page will be rendered     # the except will catch all the errors     except:        return render(request, 'weatherupdates/404.html')

Replace theAPI_KEY variable with the real API key that you generated in your OpenWeatherMap dashboard.

In theindex() view where all the app’s logic is handled, the view checks if the form sent aPOST orGET request. If the request was POST, the city name is captured and passed to the URL together with the API key. A get request is sent to the URL, and its response is converted to JSON, now from this jsonified response, we are getting the necessary weather information like:

• description -response['weather'][0]['description']
• icon -response['weather'][0]['icon']
• temperature -response['main']['temp']
• country_code -response['sys']['country']
• wind -response['wind']['speed']
• humidity -response['main']['humidity']

We are using keys to access this weather information from the jsonified response. All this information will be dynamically rendered to thehome.html template with some additional information like city and time.

To dynamically render this in thehome.html template, add these lines of code just below the<hr> tag:

        <div>            <div>                <img src="http://openweathermap.org/img/w/{{ city_weather_update.icon }}.png" alt="">                <div>{{ city_weather_update.time }}</div>                <div><h5>{{ city_weather_update.city }} {{ city_weather_update.country_code }}</h5></div>                <div><h6>{{ city_weather_update.temperature }}</h6></div>                <div><h6>{{ city_weather_update.description | title }}</h6></div>                <div><h6>{{ city_weather_update.wind }}</h6></div>                <div><h6>{{ city_weather_update.humidity }}</h6></div>            </div>        </div>

The above code snippet is just a card for displaying the weather information; this information is coming from thecity_weather_update dictionary that is passed to the context.

Now let us test if the search functionality is working. Let's get the current weather update forParis. Enter the city name and click theSearch button; this is the output:

The code in theindex() view inside thetry block will only run when there are no errors while the code inside the except block will run when errors have been caught. Let us test if the app can catch the errors; we will once more enter an invalid city name, you can just enter some random characters, and for that, you will get this output:

Click the Go Home button, and you will be taken to the home page:

Congratulations on successfully creating a weather update app!

Conclusion 

We have created a weather update app using Django and OpenWeatherMap API. This app can fetch weather data from OpenWeatherMap and display it user-friendly to the user interface. We now hope you will use the knowledge you have acquired in your future Django projects.

You can always get the complete codehere.

Learn also:How to Build a CRUD Application using Django in Python.

Happy coding ♥

Just finished the article? Why not take your Python skills a notch higher with ourPython Code Assistant? Check it out!

Read Also

How to Build a CRUD Application using Django in Python

Learn how to build a CRUD Book store app using Django web framework and Bootstrap, with the ability to create, read, update, and delete books with ease.

How to Build an English Dictionary App with Django in Python

Learn how to build a simple dictionary application using Django web framework and PyDictionary library in Python.

How to Build a Complete CRUD App using Flask and Jinja2 in Python

Learn how to build the frontend of a CRUD application using Flask, Jinja2, Bootstrap and SQLAlchemy libraries in Python.

Comment panel

Join 50,000+ Python Programmers & Enthusiasts like you!

Subscribe

Tags

New Tutorials

Popular Tutorials