Weather App Applying DRY Principal in Template of Django

Weather App using Django github

ByAsrafulporag

My Note: Django guide lines ❤️

Weather App Project

এ পর্বের মাধ্যমে যেকোনো এপস তৈরির প্রসেসটা শিখে ফেলব। এখানে আমরা উদাহরণস্বরুপ- weather app নিয়ে কাজ করব, অন্যান্য এপস তৈরির প্রসেসটাও অনেকটা এইরকম হয়।

Weather App Making:

দুইভাবে এই weather app তৈরি করব:

  1. স্কেচ এর মাধ্যমে (scrap করে)
  2. Api এর মাধ্যমে

build a weather app with python and django free download – স্কেচ এর মাধ্যমে (scrap করে) Weather App তৈরি 🌙

প্রথমত,

ধাপ 0: ওয়েদার অ্যাপস তৈরির ম্যান্ডেটরি ধাপ

Mac এর ক্ষেত্রে-

  weather appতৈরি করার জন্য সবার আগে কিন্তু কাজগুলো করা থাকতে হবে:

  • ১। virtual environment তৈরি করা: যে ফোল্ডারে virtual environment create করতে চান ওই ফোল্ডারে যান। উদাহরণস্বরূপ কমান্ডটি- cd Documents/Django || ওই ফোল্ডারে ভার্চুয়াল এনভারমেন্ট ক্রিয়েট করুন এই কমান্ডটি দিয়ে- virtualenv weatherenv1

  • ১.২। virtual environment টা activate করা: এখন, যে ভার্চুয়াল এনভারমেন্ট ক্রিয়েট করেছেন ওই ফোল্ডারে ডুকুন। কমান্ড দিবে– cd weatherenv1 || এবার ভার্চুয়াল এনভারমেন্ট একটিভ করার কমান্ড কোড দিন – source bin/activate (তাহলে বাম পাশে ১ম বন্ধনীতে active virtualenv নাম দেখতে পাবেন) ব্যাস, হয়ে গেল। ((ফোল্ডার ডিরেক্ট লোকেশনঃ cd Documents/Django/weatherenv1)))

  • ২। Django Project ইনস্টল ও তৈরি করা: এবার cd weatherenv1 ফোল্ডারে থাকা অবস্থায় Django install করার কমান্ডঃ  pip install django বা sudo pip install django || এবার Django তে প্রজেক্ট ক্রিয়েট করার কমান্ডঃ django-admin startproject weatherproject1
  • ২.২। Django Project টা activate করা:  , এখন, কাজের সুবিধার্থে এই প্রজেক্ট টপে থাকা প্রথম ফোল্ডারের নাম core থেকে চেঞ্জ করে src দেব, তখন ওই ফোল্ডারে ডুকতে কমান্ড দিব- cd src অর্থাৎ এভাবে করে src ফোল্ডারের ভেতরে যে ফোল্ডারে Manage.py আছে অর্থাৎ core আছে সে ফোল্ডারে ডুকুন। এখন প্রজেক্ট সার্ভার রান করার কমান্ডো দিন:  python manage.py runserver ব্যাস,এখন http://127.0.0.1:8000 এ ঢুকলেই দেখবে যে django সাকসেসফুলি রান হয়ে প্রজেক্ট স্টার্ট হবে.  (((ফোল্ডার ডিরেক্ট লোকেশনঃ cd Documents/Django/weatherenv1/src)))
  • ৩। App টা তৈরি করা: এরপর cd Documents/Django/weatherenv1/src এ থাকা অবস্থান দিয়ে python manage.py startapp weatherapp1 কমান্ড দিয়ে app run করতে পারবেন.

তবে এক্ষেত্রে, Mac ইউজারদের ক্ষেত্রে যেন আগ থেকে Mac এর মধ্যে নিচের এই ৩টি ইন্সটল করা যেন থাকেঃ ১। পাইথন- brew install python3 ২। পিপ – sudo easy install pip ৩। ভার্চুয়াল এনভারনমেন্ট – sudo pip install virtualenv || এগুলো আগ থেকে ইন্সটল করা আছে কিনা তা দেখার কমান্ড/উপায়ঃ python3 –version, pip3 –version

অথবা,

Windows এর ক্ষেত্রে- 

১। যেই ফোল্ডারে ভার্চুয়াল এনভায়রনমেন্ট ক্রিয়েট করতে চান সেখানে কমান্ড রান –

python -m venv weatherenv1

অথবা আগ থেকে এনভারমেন্ট ক্রিয়েট করা থাকলে, ওই লোকেশনে গেলেই হবে।

১.২। ভার্চুয়াল এনভায়রনমেন্ট এক্টিভ করা-

source env/Scripts/activate

২। Django Install + জ্যাংগোতে প্রজেক্ট ক্রিয়েট কর-

pip install django
django-admin startproject weatherproject1

অথবা আগ থেকে প্রজেক্ট ক্রিয়েট করা থাকলে, ওই লোকেশনে গেলেই হবে।

এরপর, কমান্ড python manage.py runserver দিয়ে প্রজেক্ট সার্ভার রান করা যাবে, ব্যাস,এখন http://127.0.0.1:8000 এ ঢুকলেই দেখবে যে django সাকসেসফুলি রান হয়ে প্রজেক্ট স্টার্ট হবে। 

৩। প্রথম weatherproject1 ফোল্ডারের নাম চেঞ্জ করে src করা ।

এপস ক্রিয়েট কর- এপস ক্রিয়েট করার জন্য প্রথমে প্রজেক্ট ফোল্ডারে প্রবেশ করুন । এখানে SRC ফোল্ডার। সেই ফোল্ডারে প্রবেশ করা ও এপস ক্রিয়েটের কোড

cd src
python manage.py startapp weatherapp1

 

Project ২ (v1) Template version : weatherapp2 টেমপ্লেট/স্কেচ তৈরি  

ওয়েদার এপস তৈরী করার জন্য আমাদের টেমপ্লেট বানাতে হবে । একটা ফাংশন ডেভেলপ করতে হবে । আর জ্যাংগোতে কিভাবে টেমপ্লেট দেখাইতে হয় সেটা জানতে হবে ।

ধাপ ০১: Preparation of a html template (স্কাচের মাধ্যমে)

প্রথমত, ধাপ  0 এর স্টেপ গুলো অনুসরণ করব. (

দ্বিতীয়ত, এরপর নিচের এই ধাপগুলো অনুসরণ করবে (ধাপ 1)-

weatherapp1 এর ভেতর templates নামে একটা ফোল্ডার ক্রিয়েট করে ওইখানে home.html ফাইলে টেমপ্লেট তৈরি করব। (এই টেমপ্লেটটি-ই পরবর্তীতে আমরা ইউজ করব।)
((( সহজভাবে template টি-টোয়েন্টি করার জন্য bootstrap 5.1 এর হেল্প নিতে পারেব যা গুগলে সার্চ করলে অসংখ্য টেমপ্লেট পেয়ে যাবেন। টেমপ্লেটে যা যা বানানোর দরকার হতে পারে(ব্যবহৃত রিসোর্স):- 

(html Template)আমাদের বানানো টেমপ্লেটটির কোড সবমিলিয়ে এরকম:- home.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Weather Apps Django</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-brightness-high-fill" viewBox="0 0 16 16">
            <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
          </svg></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Weather by API</a>
              </li>

            </ul>

          </div>
        </div>
      </nav>

      <!-- Main Content -->
      <div class="container mx-auto my-5">
          <div class="text-center">

          <h1 class="text-center text-uppercase mb-3">Find Weather by City</h1>
            <form action="" method="get">
                <input class="form-control mx-auto w-50" type="text" name="city" id="city" placeholder="Enter city Name ....">
                <input type="submit" class="btn btn-secondary btn-lg my-3" value="Submit">
            </form>
          </div>

          <table class="table w-50 mx-auto mt-5">
              <thead>
                  <tr>
                      <th colspan="2" class="text-center h3">Weather of Cox's Bazar</th>

                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <th scope="row">Area</th>
                      <td>Cox's Bazar</td>
                  </tr>
                  <tr>
                    <th scope="row">Day Time</th>
                    <td>Tuesday 11.06 pm</td>
                </tr>

                <tr>
                    <th scope="row">Weather </th>
                    <td>Clear </td>
                </tr>
                <tr>
                    <th scope="row">Temperature </th>
                    <td>28 °C </td>
                </tr>
              </tbody>
          </table>

      </div>






    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


  </body>
</html>

ধাপ ২: গুগল থেকে Weather ডাটা স্ক্রাপ করার ফাংশন

Function of Scraping Weather Data from Google: গুগল থেকে Weather ডাটা স্ক্রাপ করার জন্য html template টার মধ্যে আমরা যে ফাংশনটা ব্যবহার করব সেটা। 

weatherapp1 এর ভেতর prepare বা অন্য যেকোনো নামে একটা ফোল্ডার ক্রিয়েট করে ওইখানে  Weather ডাটা স্ক্রাপ করার এই ফাংশন ফাইল তৈরি করব-  google_scrap.py

import requests
from bs4 import BeautifulSoup as bs

def get_weather_data(city):
    city = city.replace(' ','+')
    url = f'https://www.google.com/search?q=weather+of+{city}'
    USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36"
    LANGUAGE = "en-US,en;q=0.9"
    session = requests.Session()
    session.headers['user-agent'] = USER_AGENT
    session.headers['accept-language'] = LANGUAGE
    response = session.get(url)
    soup = bs(response.text, 'html.parser')
    # Extract Data and Add to Dictionary
    results = {}
    results['region'] = soup.find('div', attrs={'id':'wob_loc'}).text
    results['daytime'] = soup.find('div', attrs={'id':'wob_dts'}).text
    results['weather'] = soup.find('span', attrs={'id':'wob_dc'}).text
    results['temp'] = soup.find('span', attrs={'id':'wob_tm'}).text
    # print(results)
    return results

# Check Functions
get_weather_data('New York')

 

((( এক্ষেত্রে, গুগল থেকে ওয়েদার ডাটা স্ক্রাপ করতে আপনার পিসির ওই environment এ যদি এ দুইটি লাইব্রেরি ইন্সটল না থাকে, তাহলে ইন্সটল করে নিতে পারেন নিম্নোক্ত কমান্ড প্রম্পটের মাধ্যমে – ( এজন্য pycharm এর সহায়তা নিতে পারেন, এতে ওই environment তে লাইব্রেরি দুটি খুব সহজে যুক্ত করে নিতে পারবেন)

pip install requests 

pip install bs4 )))

 পরবর্তী কাজের পর্যায়ক্রম ধাপ: user – django – url – view

ধাপ ৩: weatherproject1 এ Configure settings.py file : 

এখন weatherapp1>apps এ থাকা name = ‘weatherapp1’ এর ‘weatherapp1’ অংশটুকু weatherproject1>settings.py এর INSTALLED_APPS এই লিস্টে যুক্ত করে দেব। অর্থাৎ সহজভাবে বলতে গেলে প্রজেক্ট ফোল্ডার weatherproject1 এর settings.py ফাইল এডিটরে ৩৩ নং লাইন থেকে শুরু হওয়া Installed Apps লিস্টের শেষে এপস এর নাম যুক্ত করে দেবে।

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'weatherapp1', # এই লাইন নতুন ভাবে যুক্ত করা হয়েছে 
]

ধাপ ৪: weatherproject1 এ Configure urls.py file : 

এখন, প্রজেক্ট(weatherproject1) তে থাকা urls.py এর সাথে এপস(weatherapp1) এর একটি কানেকশন তৈরি করে নিব। [বিশেষ দ্রষ্টব্যঃ এপস(weatherapp1) এ urls.py ফাইল নতুনভাবে তৈরি করা হয়, যা নিয়ে একটু পরে বিস্তারিত বলতেছি]

weatherproject1 এর urls.py ফাইলের ২ নং লাইনে গিয়ে path এর পর কমা দিয়ে include ফাংশনকে ইম্পোর্ট করুন । আর. urlpattern লিস্টে নতুন করে path(”, include(‘weatherapp1.urls’)) যুক্ত করুন । এখানে weatherapp1 হচ্ছে এপস এর নাম আর urls হচ্ছে সেখানকার ফাংশনের নাম।

# weatherproject1/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('weatherapp1.urls'))
]

ধাপ ৫: weatherapp1 এ Configure urls.py file : 

এখন urls জেনারেট করব। এজন্য, এপস(weatherapp1) এর ভেতর urls.py নামে একটি ফাইল তৈরী করে নেব।

আর,  এপস(weatherapp1) এর ভেতর urls.py তে গিয়ে admin অংশের লেখাটুকু বাদ দিয়ে বাকি নিচের এই অংশটুকু লিখব-

  • এক্ষেত্রে, weatherapp1 ফোল্ডারে আগের weatherproject1 ফোল্ডারের কোড কপি করে নিন। সেখানে প্রথম লাইন from django.contrib import admin বাদ দিন । আর path পরে include বাদঃ দিয়ে দিন । একই ফোল্ডার থেকে views ফাইল ইম্পোর্ট করুন ।

  • urlpatterns লিস্টের প্রথম লাইন বাদ দিন path(‘admin/’, admin.site.urls), । আর এরপরের লাইনে যুক্ত করুন path(”, views.home_view , name =”home” ) । তাহলে মুল ফাইল হবে নিচের মত-

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.home_view, name = 'home' )
]
  • এখানে urls প্যাটার্ন লিস্টে views.home_view নির্দেশ করে views.py ফাইলে তৈরী করা home_view ফাংশনকে । আর এরপর নাম হচ্ছে home. যা আমরা পরবর্তীতে ব্যবহার করব বিভিন্ন সময় নির্দিষ্ট ইউ আর এলকে কল করার জন্য ।

ধাপ ৬:  weatherapp1 এ Configure views.py file :

weatherapp1 ফোল্ডারের views.py ফাইল যে কোন আইডিএলই তে খুলুন । এরপর সেখানে weatherapp1/urls.py ফাইলে দেওয়া নাম অনুসারে একটি ফাংশন ডেভেলপ করুন। আমরা এর আগে নাম দিয়েছিলাম home_view তাই হোম ভিউ নামে একটা ফাংশন তৈরী করা হয়েছে প্রথমে ।

ফাংশনটি-

# weatherapp1/views.py 

from django.shortcuts import render, HttpResponse

def home_view(request):
    return HttpResponse('<h1>First Django Project</h1>')

এবার সার্ভার রান করুন-

python manage.py runserver

আপনি হোম পেজে ( http://127.0.0.1:8000/ ) দেখতে পারবেন First Django Project লিখাটি h1 হিসাবে ।

কিন্তু এতে বড় কোন ফাইল লিখা অনেক ঝামেলা । এইজন্য আমরা টেমপ্লেট ইউজ করুব । টেমপ্লেট নামে একটি ফোল্ডার যুক্ত করুন আপনার src ডিরেক্টরিতে ।

তাহলে আপনার ফোল্ডার স্ট্রাকচার হবে

.
├── src                     # মুল ফোল্ডার 
├── weatherproject1         # প্রজেক্ট ফোল্ডার
├── weatherapp1             # এপ্লিকেশন ফোল্ডার
├── templates               # টেমপ্লেট ফোল্ডার

সেই টেমপ্লেট ফোল্ডারের মধ্যে যে কোন টেমপ্লেট রাখুন । এরপর weatherapp1>views.py ফাইলে নিচের কোড লিখুন ।

# weatherapp1/views.py 

from django.shortcuts import render, HttpResponse

# Create your views here.

def home_view(request):
    return render(request, 'home.html')

ব্রাউজারে http://127.0.0.1:8000/ ইউ আর এল প্রবেশ করলে দেখতে পারবেন Template Doesn’t Exists দেখাচ্ছে । এই সমস্যা সল্ভ করার জন্য weatherproject1/settings.py ফাইলে প্রবেশ করুন । এরপর templates লিস্ট ( ৫৮ নং লাইনে ) Dir এর ভিতরে লিখুন BASE_DIR / ‘templates’ । তাহলে কোড নিচের মত দেখাবে

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Mac এর ক্ষেত্রে Control+C চেপে বর্তমান সার্ভার অফ করে আবার সার্ভার রান করুন । কমান্ড-

python manage.py runserver

তাহলে আপনার দেখানো টেমপ্লেট দেখতে পারবেন ব্রাউজারে (http://127.0.0.1:8000/)।

Project ২ (v2) live version : weatherapp2 Live functional template make করতে যা যা করবে-

প্রথমত, ধাপ  0 এর স্টেপ গুলো অনুসরণ করব. (

তবে এক্ষেত্রে, cd Documents/Django/weatherenv1 তে গিয়ে django-admin startproject weatherproject2 দিয়ে প্রজেক্টে স্টার্ট করব। কাজের সুবিধার্থে টপ ফোল্ডার weatherproject2 এর নাম পরিবর্তন করে src2 করব। এরপর, cd src2 তে গিয়ে python manage.py startapp weatherapp2 দিয়ে অ্যাপ তৈরি করব। ফাইনালি, cd Documents/Django/weatherenv1/src2 ফোল্ডার লোকেশন থাকা অবস্থায়  python manage.py runserver কমান্ড দিয়ে সার্ভার রান করে দেখতে পারো। তাহলে, http://127.0.0.1:8000 এ ঢুকলেই দেখবে যে django প্রজেক্ট সাকসেসফুলি রান হয়েছে.  

দ্বিতীয়ত, এরপর নিচের এই ধাপগুলো অনুসরণ করবে (ধাপ 1)-

উপরোক্ত প্রজেক্ট 1 এর মত নিয়মে ধাপ 1 থেকে 6 পর্যন্ত সবগুলো নিয়মএর কাজগুলো করবে। যেমন-

ধাপ ১ এ weatherapp2 এর ভেতর templates নামে একটা ফোল্ডার ক্রিয়েট করে ওইখানে weatherapp ফোল্ডারের ভেতর home.html ফাইলে টেমপ্লেট তৈরি করব।

ধাপ ২ এ  scrap code

ধাপ ৩ এ weatherproject2>settings.py এর INSTALLED_APPS এই লিস্টে এ –

'weatherapp2', # এই লাইন নতুন ভাবে যুক্ত করা হয়েছে

ধাপ ৪ এ weatherproject1 >urls.py ফাইলের ২ নং লাইনে গিয়ে path এর পর কমা দিয়ে include ফাংশনকে ইম্পোর্ট করুন । আর. urlpattern লিস্টে নতুন করে path(”, include(‘weatherapp2.urls’)) যুক্ত করুন । এখানে weatherapp2 হচ্ছে এপস এর নাম আর urls হচ্ছে সেখানকার ফাংশনের নাম।

# weatherproject2/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('weatherapp2.urls'))
]

ধাপ ৫ এ weatherapp2 এর Configure urls.py file এ লাইন বাদ ও যুক্ত করে ফাইনালি নিচের মত করব-

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.home_view, name = 'home' )
]

ধাপ ৬ এ weatherproject2>settings.py ফাইল এর templates লিস্ট ( ৫৮ নং লাইনে ) Dir এর ভিতরে লিখুন BASE_DIR / ‘templates’ । তাহলে কোড নিচের মত দেখাবে- 

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

এরপর, weatherapp2>views.py file এ নিচের কোড লিখুন – 

# weatherapp2/views.py 

from django.shortcuts import render, HttpResponse

# Create your views here.

def home_view(request):
    return render(request, 'weatherapp/home.html')

ফাইনালি, সার্ভার রান করুন । কমান্ড-

python manage.py runserver

তাহলে, ব্রাউজারে http://127.0.0.1:8000/ এ প্রবেশ করলে আপনার বানানো টেমপ্লেটটি দেখতে পারবেন।

এরপর যা করবে- 

# weatherapp2>views.py এর সাথে home.html এর কানেকশন করা- 

এখন google_scrap.py কোড ফাংশনটা import করে নেব। অর্থাৎ তা weatherapp2>views.py তে from django.shortcuts import render, HttpResponse এর নিচে পেস্ট করে বসাব। 

এক্ষেত্রে , এনভারনমেন্টের মধ্যে নিচের দুইতই মডিউল ইন্সটল করে নিতে ভুইল না। –

pip install bs4

pip install requests

#  home.html এর ৪২ নং লাইনে action”” লেখাটুকু এটা লাগবে না যদি সিঙ্গেল পেজ হয়ে থাকে। তাই এটা বাদ দিতে হবে। তবে মাল্টি পেজে এটা রাখতে হয়।

এরপর, weatherapp2>views.py তে  get_weather_data(‘New York’) লেখাটুকু বাদ দিয়ে def home_view(request): এর নিচে অর্থাৎ ২৮ নং লাইনের পর থেকে শেষ পর্যন্ত যা লিখব-

# Create your views here.

def home_view(request):
    if request.method == 'GET' and 'city' in request.GET:
        city = request.GET.get('city')
        results = get_weather_data(city)
        context = {'results':results}
    else:
        context = {}

    return render(request, 'weatherapp/home.html', context)

 

# এবার template টা শো করাতে হবে। এজন্য – 

django টেমপ্লেট এর নিয়ম অনুসরণ করতে হবে। এটা নিয়ে বিস্তারিত পরে কথা হবে।
এজন্য home.html এর 47 নং লাইনের পর অর্থাৎ <table কোড এর আগে লিখব-

{% if results %}

এবং, </table> কোড এর পরও লিখব-

{% endif %}

# এরপর <table></table> এর th ও td এর ভেতর আরও কিছু কোড চেঞ্জ করে নিতে হবে: যেমন- 

Weather of এর পর-

Weather of {{ results.region }}

day time এর নিচে-

{{ results.daytime }}

Weather এর নিচে-

{{ results.weather }}

Temparature এর নিচে-

{{ results.temp }}

এখন হোম পেইজ লিংক আপ করতে –

home.html এর 16 নাম্বার ও ২৫ নাম্বার লাইনে href=”#” এর # এর যায়গায় {% url ‘home’ %} দিবে।  এটা মূলত weatherapp2>urls.py এর ভেতর  name টি-ই। 

# ফাইনালি, http://127.0.0.1:8000 তে গিয়ে city এর নাম ইনপুট দিলে রেসাল্ট গুলো দেখাবে।

http://127.0.0.1:8000/?city=Kolkata

 

api এর মাধ্যমে (scrap করে) Weather App তৈরি 🌙

এই api আপস প্রজেক্ট দ্রুত শর্টকাট করতে আমাদের পূর্বের প্রজেক্ট ২ এর সহায়তা নিব। তাই, ওয়েদার অ্যাপস 2 এর কোডগুলো কপি করে নেবো, এই প্রজেক্টে ইউজ করব.

এক্ষেত্রে প্রথমে, cd Documents/Django/weatherenv1 তে srcapi1 নামে একটি ফোল্ডার তৈরি করব।

এরপর, project 2(v2) থেকে src2 ফোল্ডার এর সবগুলো কপি করে এখানের cd Documents/Django/weatherenv1/srcapi1 তে রাখবো।

python manage.py migrate

 এরপর, cd Documents/Django/weatherenv1/srcapi1weatherapp2 এর urls.py তে-

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.home_view, name = 'home' ),
    path('api/', views.api_view, name='api'),
]

এরপর, cd Documents/Django/weatherenv1/srcapi1weatherapp2 এর views.py এর কোডগুলর একদম শেষে যুক্ত করবো-

def api_view(request):
    return render(request, 'weatherapp/api.html' )

এরপর, weatherapp2>templates>weatherapp এর মধ্যে api.html ফাইল তৈরি করে নেবো. – 

api.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Weather Apps Django</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-brightness-high-fill" viewBox="0 0 16 16">
            <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
          </svg></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Weather by API</a>
              </li>

            </ul>

          </div>
        </div>
      </nav>

      <!-- Main Content -->
      <div class="container mx-auto my-5">
          <div class="text-center">

          <h1 class="text-center text-uppercase mb-3">Find Weather by City</h1>
            <form action="" method="get">
                <input class="form-control mx-auto w-50" type="text" name="city" id="city" placeholder="Enter city Name ....">
                <input type="submit" class="btn btn-secondary btn-lg my-3" value="Submit">
            </form>
          </div>

          <table class="table w-50 mx-auto mt-5">
              <thead>
                  <tr>
                      <th colspan="2" class="text-center h3">Weather of Cox's Bazar</th>

                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <th scope="row">Area</th>
                      <td>Cox's Bazar (124.14, 6461.121)</td>
                  </tr>

                <tr>
                    <th scope="row">Temperature </th>
                    <td>28 °C </td>
                </tr>
                <tr>
                    <th scope="row">humidity </th>
                    <td>60 % </td>
                </tr>
              </tbody>
          </table>

      </div>






    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


  </body>
</html>

 এখন, cd Documents/Django/weatherenv1/srcapi1 ফোল্ডার লোকেশন থাকা অবস্থায়  python manage.py runserver কমান্ড দিয়ে সার্ভার রান করে দেখতে পারো। তাহলে, http://127.0.0.1:8000 ও http://127.0.0.1:8000/api এ ঢুকলেই দেখবে যে django প্রজেক্ট সাকসেসফুলি রান হয়েছে.  

দ্বিতীয়ত এখন, এপিআই এর দারা আমাদের ডেভলপ করা ফাংশনটি ইউজ করব-

এজন্য, নিচের এই ধাপগুলো অনুসরণ করবে –

https://openweathermap.org/ সাইনআপ করো, মেনু অপশন থেকে my api key সহজেই পেয়ে যাবে. https://openweathermap.org/current#name তে গিয়ে আমাদের গাইড গুলো ফলো করতে হবে.

asrafulporagAa101010

8c9ec1251ef6026d3eabd241c7a1fa00

api-requests.py

এখন, weatherapp2>templates>weatherapp ফোল্ডার এর মধ্যে api.html ফাইল তৈরি করে নেবো. –

এরপর, cd Documents/Django/weatherenv1/srcapi1weatherapp2 এর views.py এর কোড গুলো যুক্ত করবো-

#import requests # এটা আগ থেকে আছে, তা লাগবে
import json # এটা একদম উপরে উপযুক্ত করব

# Create your views here লেখার উপরে নিচের কোডগুলো যুক্ত করব 
def weather_api(city):
    api_key = '1187ffc7690886f66d0589689f2a01f0'
    url = f'https://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}&units=metric'
    response = requests.get(url)
    data = json.loads(response.text)
    results = {}
    results['lon'] = data['coord']['lon']
    results['lat'] = data['coord']['lat']
    results['name'] =data['name']
    results['temp'] =data['main']['temp']
    results['humidity'] =data['main']['humidity']
    return results

#print(weather_api('London'))

এখন, weatherapp2>templates>weatherapp এর api.html ফাইল এর 42 নং লাইনের মধ্যে কিছু চেঞ্জ আনতে হবে। চেঞ্জ কৃত কোড-

<form method="POST">

এরপর ওই লাইনের নিচে csrf token টি যুক্ত করব, যা নিম্নরূপ-

{% csrf_token %}

এরপর, cd Documents/Django/weatherenv1/srcapi1weatherapp2 এর views.py এর নিম্নোক্ত কোডগুলর কিছু পরিবর্তন আনব-

আগের রূপ-

def api_view(request):
    return render(request, 'weatherapp/api.html' )

পরিবর্তিত কোড রূপ-

def api_view(request):
    if request.method == "POST" and 'city' in request.POST:
        city = request.POST.get('city')
        results = weather_api(city)
        context = {'result':results}
    else:
        context = {}
    return render(request, 'weatherapp/api.html', context )

এখন, weatherapp2>templates>weatherapp এর api.html ফাইল এর 48 নং লাইন এর মধ্যে <table class এর উপরে ওই ডাটাটি বসাবো-

{% if results %}

এবং, </table> কোড এর পরও লিখব-

{% endif %}

 

<table class এর কয়েক লাইন পরের নিচের লাইনটির পরিবর্তন করব।ঃ

পূর্বের রূপ- (thead এর মধ্যে)

<th colspan="2" class="text-center h3">Weather of Cox's Bazar</th>

পরিবর্তিত রূপ-

<th colspan="2" class="text-center h3">Weather of {{ results.name}}</th>

 

পূর্বের রূপ- (AREA এর পরে লাইনে)

<td>Cox's Bazar (124.14, 6461.121)</td>

পরিবর্তিত রূপ-

<td>{{ results.lon}} {{ results.name }}, {{ results.lat}}</td>

এরপরে দুটি পরিবর্তিত রূপ-

<td>{{ results.temp}} °C </td>
<td>{{ results.humidity}} % </td>

((((

এখন হোম পেইজ লিংক আপ করতে –

home.html এর 16 নাম্বার ও ২৫ নাম্বার লাইনে href=”#” এর # এর যায়গায় {% url ‘home’ %} দিবে। আর 28 মূল্যায়নে এটা দিবি- ।  এটা মূলত weatherapp2>urls.py এর ভেতর  name টি-ই। 

# ফাইনালি, 127.0.0.1:8000/api ও http://127.0.0.1:8000 তে গিয়ে city এর নাম ইনপুট দিলে রেসাল্ট গুলো দেখাবে।

http://127.0.0.1:8000/?city=Kolkata

http://127.0.0.1:8000/?city=Kolkata

)))))

learn more: Weather app using Python PDF

Similar Posts

অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং

OOP Full Note: অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং A to Z বিস্তারিত (সব পর্ব)

ByAsrafulporag

Table of contents 1 OOP ব্যাসিক বকবক 2 OOP কোর নলেজ 2.0.1 object 2.0.2 Attribute…

OpenAi GPT3 Guide in Bangla gpt3 দিয়ে আর্টিকেল জেনারেট

OpenAi GPT3 Guide in Bangla (Command) : gpt3 দিয়ে আর্টিকেল জেনারেট করার প্রয়োজনীয় কমান্ড

ByAsrafulporag

Table of contents 1 OpenAi GPT3 ফ্রিতে ব্যবহার করার নিয়ম 1.1 OpenAi GPT3 Command example: 1.2…

Leave a Reply

Your email address will not be published. Required fields are marked *