Weather app using Django | Python

by ahin subhra das

weather app final interface

In this article , we will learn how to create a Weather app that uses Django as backend. We give our weather app name as weather highlights .

Firstly we need to create a new project in our Django , using command :

django-admin startproject Weather_highlights

after that we must create a app under Weather_highlights project , we give app name as Weatherapp .

: python manage.py startapp Weatherapp

After sucessfully creating our project and app we need to change directory using cd Weather_highlights , then we need to run migration for our project .

To getting weather details we need to access any open source api from web , for our project we access api from https://openweathermap.org/api . After sign in in this website we easily get weather details of any city .

https://openweathermap.org/api interface after signin

Now we go to our backend part for this project we need to create a index. html page as template or design page for searching and showing our weather details as per city .

weatherapp >templates>index.html

<!DOCTYPE html>

<html lang=”en” dir=”ltr”>

<head>

<meta charset=”utf-8">

<title>weather highlights</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>

<style>

body{

overflow: hidden;

}

#imageContainer{

width: 80px;

height: 80px;

}

#imageContainer img{

height: 100%;

width: 100%;

}

#desc{

display: flex;

align-items: center;

}

footer {

position:fixed;

height: 50px;

bottom: 0;

width: 100%;

background-color:skyblue;

color: black;

font-size: 20px;

text-align: center;

}

</style>

</head>

<body>

<nav class=”row” style=”background: skyblue; color: black;”>

<div align=”center” ><h1 class=”col-md-3 text-center”>Weather Highlights</h1>

</div>

</nav>

<br />

<br />

<center class=”row”>

<form action=”” 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=”Type your city name and search”>

<div class=”input-group-btn”>

<button class=”btn btn-default” type=”submit”>

<i class=”glyphicon glyphicon-search”></i>

</button>

</div>

<form>

</center>

<div class=”row” >

{% if city is not None %}

<div class=”col-md-6 col-md-offset-3">

<h1>{{city | capfirst}}</h1>

<div id = ‘desc’><h3>Description: {{data.weather_description | capfirst}}</h1>

<div id = ‘imageContainer’><img src = ‘http://openweathermap.org/img/w/{{data.weather_icon}}.png'></div>

</div>

<h3>Temperature: {{data.weather_temperature}}C</h3>

<h3>Pressure: {{data.weather_pressure}}</h3>

<h3>Humidity: {{data.weather_humidity}}</h3>

</div>

{% endif %}

</div>

</body>

<footer class=”fixed-bottom”> All copyright reserved by Ahin Subhra das @2021.</footer>

</html>

design part of our weather app

After working with design part we need to link our design part to our backend for that we write code in our view.py and urls.py :

Weather_highlights>weatherapp>views.py

from django.shortcuts import render

# import json to load json data to python dictionary

import urllib.request

# urllib.request to make a request to api

import json

# Create your views here.

def index(request):

if request.method == ‘POST’:

city = request.POST.get(‘city’)

#’’’ api key might be expired use your own api_keyplace api_key in place of appid =”your_api_key_here “ ‘’’

# source contain JSON data from API

# print(city)

api_url = urllib.request.urlopen(‘http://api.openweathermap.org/data/2.5/weather?q=' + city + ‘&units=metric&appid=19271528f8b9badf220b6280c99116e8’).read()

api_url2 = json.loads(api_url)

# converting JSON data to a dictionary

data = {

“country”: city,

“weather_description”: api_url2[‘weather’][0][‘description’],

“weather_temperature”: api_url2[‘main’][‘temp’],

“weather_pressure”: api_url2[‘main’][‘pressure’],

“weather_humidity”:api_url2[‘main’][‘humidity’],

“weather_icon”: api_url2[‘weather’][0][‘icon’],

}

# data for variable list_of_data

else:

city = None

data = {

“country”: None,

“weather_description”: None,

“weather_temperature”: None,

“weather_pressure”: None,

“weather_humidity”:None,

“weather_icon”: None,

}

#showing none

print(data[‘weather_icon’])

return render(request, ‘index.html’, {“city”: city, “data” :data})

Weather_highlights>weatherapp>urls.py

from django.urls import path

from . import views

urlpatterns = [

path(‘’, views.index)

]

Weather_highlights>urls.py

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path(‘admin/’, admin.site.urls),

path(‘’, include(‘WeatherApp.urls’))

]

Before we run our baackend we must remember to add our app name in our project settings.py:

In settings.py add app name as we did

Now we run our server using : python manage.py runserver

Put any city name in search bar of our project . For example we search kolkata as city name to check weather details of city of joy .

Hurrry we did it sucessfully

--

--