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
Editweather/urls.py to include the todo app views:
Pythonfromdjango.contribimportadminfromdjango.urlsimportpath,includeurlpatterns=[path('admin/',admin.site.urls),path('',include('main.urls')),]Step 6: Define URLs for main App
Createmain/urls.py and add:
Pythonfromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('',views.index),]Step 7: Create the View
Editmain/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
Createmain/templates/main/index.html with this content:
HTML<!DOCTYPE html><htmllang="en"dir="ltr"><head><metacharset="utf-8"/><title>weather</title><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/><!-- jQuery library --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- Latest compiled JavaScript --><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body><navclass="row"style="background: green; color: white;"><h1class="col-md-3 text-center">weather</h1></nav><br/><br/><centerclass="row"><formmethod="post"class="col-md-6 col-md-offset-3"> {% csrf_token %}<divclass="input-group"><inputtype="text"class="form-control"name="city"placeholder="Search"/><divclass="input-group-btn"><buttonclass="btn btn-default"type="submit"><iclass="glyphicon glyphicon-search"></i></button></div></div></form></center><divclass="row"> {% if country_code and coordinate and temp and pressure and humidity %}<divclass="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!
