by ahin subhra das
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 .
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>
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:
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 .
