Open In App

Weather app using Django - Python

Last Updated : 17 May, 2025
Suggest changes
Share
Like Article
Like
Report

Our task is to create a Weather app using Django that lets users enter a city name and view current weather details like temperature, humidity, and pressure. We will build this by setting up a Django project, creating a view to fetch data from the OpenWeatherMap API, and designing a simple template to display the results. Step-by-step, we’ll implement the core functionality to build a working weather app.

Prerequisites:


Basic Setup

Create a virtual environment, and install the packages:

pip install Django

Step 1: Create a Django Project

Start a new Django project named weather:

django-admin startproject weather

Step 2: Navigate to the Project Directory

cd weather

Step 3: Create a Django App

Create an app called main:

python manage.py startapp main

The directory structure should look like this:

Step 4: Add the main App to Settings

Open weather/settings.py and add 'main' to the INSTALLED_APPS list:

Step 5: Configure URLs

Edit weather/urls.py to include the todo app views:

Python
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('main.urls')), ] 

Step 6: Define URLs for main App

Create main/urls.py and add:

Python
from django.urls import path from . import views urlpatterns = [ path('', views.index), ] 

Step 7: Create the View

Edit main/views.py to fetch and process weather data:Note: Obtain your API key from "OpenWeatherApp" Replace "your_api_key_here" in views.py with your actual API key.

Step 7: Create the Template

Create main/templates/main/index.html with this content:

HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <title>weather</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <nav class="row" style="background: green; color: white;"> <h1 class="col-md-3 text-center">weather</h1> </nav> <br /><br /> <center class="row"> <form method="post" class="col-md-6 col-md-offset-3"> {% csrf_token %} <div class="input-group"> <input type="text" class="form-control" name="city" placeholder="Search" /> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </center> <div class="row"> {% if country_code and coordinate and temp and pressure and humidity %} <div class="col-md-6 col-md-offset-3"> <h3>Country Code: {{ country_code }}</h3> <h5>Coordinate: {{ coordinate }}</h5> <h5>Temperature: {{ temp }}</h5> <h5>Pressure: {{ pressure }}</h5> <h5>Humidity: {{ humidity }}</h5> </div> {% endif %} </div> </body> </html> 

Step 9: Make Migrations (Optional)

Run migrations to keep your environment updated (even though this app has no models):


python manage.py makemigrations
python manage.py migrate

Step 10: Run the Server

Start the Django development server:

python manage.py runserver

Open your browser at "http://127.0.0.1:8000/", enter a city name, and check the weather!


Next Article

Similar Reads

Practice Tags :