ساخت یک برنامه آب و هوا در Django

در این مقاله یک برنامه ساده Django خواهیم ساخت که آب و هوای فعلی را برای شهرهای مختلف نشان می دهد. برای به دست آوردن داده های فعلی هوا ، از Open Weather Map API استفاده خواهیم کرد.
با یک بانک اطلاعاتی کار خواهیم کرد و فرمی ایجاد می کنیم ، بنابراین مفاهیم مورد استفاده در اینجا برای پروژه های پیچیده تری قابل اجرا هستند.
کد موجود در این مقاله با Python 3 و Django 2.0 نوشته شده است ، بنابراین برای دنبال کردن این آموزش ، باید تا حدودی با هر دو آشنا باشید.
وقتی کار ما به پایان رسید، برنامه به این شکل خواهد بود.

تمام کد های این مقاله در GitHub قرار دارند.
نصب و راه اندازی
نصب Django مانند نصب هر کتابخانه دیگری در Python است: شما می توانید یک محیط مجازی را راه اندازی کنید و برای نصب Django ، pip را اجرا کنید ، یا می توانید کاری را که من انجام می دهم انجام دهید و یک دایرکتوری پروژه ایجاد کنید ، pipenv را اجرا کنید و سپس پوسته pipenv را فعال کنید. هر دو روش کار می شود ، اما برای این مقاله از pipenv استفاده می کنم.
⦁ $ pipenv install django
⦁
با این دستور آخرین نسخه Django برای شما نصب می شود. در زمان نوشتن این مقاله ، Django در نسخه 2.0.4 موجود است.
وقتی Django را نصب کردید ، اگر قبلاً دیرکتوری برای این پروژه ندارید ، یک دیرکتوری ایجاد و به داخل آن بروید. در آنجا ، می توانید دستور startproject را که Django به شما می دهد برای تولید پروژه اجرا کنید.
⦁ $ django-admin startproject the_weather
⦁
Django باید چندین فایل جدید را در دیرکتوری شما ایجاد کند.
بیایید سعی کنیم سرور مجازی توسعه را راه اندازی کنیم. برای انجام این کار ، به دیرکتوری جدید بروید و از manage.py برای اجرای دستور runserver در ترمینال خود استفاده کنید:
⦁ $ cd the_weather
⦁
⦁ $ python manage.py runserver

اگر به پایانه خود نگاه کنید ، باید URL برنامه خود را مشاهده کنید. به طور پیش فرض باید 127.0.0.1:8000 باشد.

مرورگر خود را باز کنید و به آن URL بروید.

اگر این را ببینید ، می فهمید که Django را به درستی تنظیم کرده اید. قطعاً باید آن را ببینید زیرا ما هنوز سعی نکرده ایم که کد را اصلاح کنیم.
داشبورد ادمین
در مرحله بعد می خواهیم نگاهی به داشبورد سرور مجازی که Django به ما نشان میدهد، بیاندازیم. برای انجام این کار ، ابتدا باید پایگاه داده خود را جابه جا کنیم ، به این معنی که Django جدولهای از پیش تعریف شده مورد نیاز برنامه های پیش فرض را ایجاد می کند. برای این کار ، دستور migrate را اجرا کنید. سرور مجازی را با استفاده از CTRL + C متوقف و سپس دستور زیر را اجرا کنید:
⦁ $ python manage.py migrate
⦁
با اجرای آن دستور ، Django یک پایگاه داده SQLite برای شما ایجاد کرده است ، بانک اطلاعاتی پیش فرض در تنظیمات ، و چندین جدول به آن پایگاه داده اضافه کرده است. می دانید اگر یک فایل جدید db.sqlite3 را در دیرکتوری پروژه خود مشاهده کنید ، این بانک اطلاعات ایجاد شده است.
یکی از جداولی که Django به ما میدهد جدول کاربر است ، که برای ذخیره هر کاربر در برنامه ما استفاده خواهد شد. برنامه ای که ما در حال ساختن آن هستیم نیازی به هیچ کاربری ندارد ، اما داشتن کاربر ادمین به ما امکان دسترسی به داشبورد ادمین را می دهد.
برای ایجاد یک کاربر ادمین ، دستور createsuperuser را اجرا می کنیم.
⦁ $ python manage.py createsuperuser
⦁
با دادن نام کاربری ، آدرس ایمیل و رمز ورود برای کاربر ادمین خود ، دستورالعمل ها را دنبال کنید. پس از انجام این کار ، باید دوباره سرور مجازی را راه اندازی کنید و به داشبورد سرور مجازی بروید.
⦁ $ python manage.py runserver
⦁
سپس به 127.0.0.1:8000/admin بروید.
دلیل اینکه می توانیم به این صفحه برویم این است که ادمین در urls.py ما تنظیم شده است (دلیل اینکه می توانیم صفحه تبریک را ببینیم این است که Django به شما این امکان را می دهد تا نشانی اینترنتی خود را اضافه کنید(.
اگر با نام کاربری و رمز عبوری که تازه ایجاد کرده اید وارد شوید ، باید داشبورد ادمین Django را ببینید.

گروه ها و کاربران نمایانگر دو مدل هستند که Django به ما دسترسی می دهد. مدل ها فقط تفسیر کدهای جدول از یک پایگاه داده هستند. حتی اگر Django جدولهای بیشتری ایجاد میکرد ، هیچ نیازی به دسترسی مستقیم به بقیه آنها نیست ، بنابراین هیچ مدلی ایجاد نشد.
اگر روی “user” کلیک کنید ، باید جزئیات بیشتری در مورد جدول کاربر مشاهده کنید ، و باید کاربر ایجاد شده را مشاهده کنید. ایده خوبی است که با کلیک روی پیوندهای مختلف در داشبورد ، جستجو کنید تا ببینید چه چیزی در آنجا وجود دارد. فقط مراقب باشید که کاربر خود را حذف نکنید ، در غیر اینصورت مجدداً باید createsuperuser را اجرا کنید.
بگذارید فعلاً داشبورد ادمین را رها کنیم و به سراغ کد برویم. باید برای برنامه هواشناسی خود برنامه ای را در داخل پروژه خود ایجاد کنیم.
ایجاد برنامه
در Django ، می توانید با استفاده از برنامه ها ، عملکرد خود را در پروژه جدا کنید. من فکر می کنم app یک اسم گیج کننده است زیرا ما معمولاً یک app را برای کل پروژه معرفی می کنیم ، اما در مورد Django ، app به عملکرد خاصی در پروژه شما اشاره دارد. به عنوان مثال ، اگر به فایل settings.py نگاه کنید ، لیست INSTALLED_APPS را مشاهده خواهید کرد.
اولین برنامه نصب شده ، django.contrib.admin همان چیزی است که ما اکنون استفاده کردیم. این برنامه همه عملکردهای ادمین را اداره می کند و و هیچ چیز دیگری را شامل نمیشود. برنامه دیگر در پروژه ما به طور پیش فرض مواردی مانند auth است که به ما امکان ورود به داشبورد ادمین ما را می دهد.
در مثال ما ، باید یک app جدید ایجاد کنیم تا همه امور مربوط به نشان دادن آب و هوا را کنترل کنیم. برای ایجاد آن برنامه ، سرور مجازی را با CTRL + C متوقف و دستور زیر را اجرا کنید:
⦁ $ python manage.py startapp weather
⦁
با اجرای startapp ، Django دیرکتوری جدید و فایل های بیشتری را به پروژه ما اضافه کرده است.
با جدیدترین فایل های تولید شده ، بیایید فایل جدیدی به نام urls.py را در دیرکتوری برنامه ایجاد کنیم.
urls.py
from django.urls import path

urlpatterns = [
]

این فایل مشابه urls.py در دیرکتوری the_weather ماست. تفاوت در این است که این فایل urls.py شامل کلیه آدرس های اینترنتی مربوط به خود برنامه است.
ما هنوز URL را مشخص نکرده ایم ، اما می توانیم پروژه را تنظیم کنیم تا برنامه خود را بشناسیم و هر URL خاص به برنامه خود و فایل urls.py برنامه را مسیریابی کنیم.
ابتدا به لیست INSTALLED_APPS بروید و این برنامه را به لیست اضافه کنید.
the_weather/the_weather/settings.py
…

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘weather’,
]

…

این به Django اجازه می دهد بداند که ما برای چه منظور می خواهیم از برنامه هواشناسی در پروژه خود استفاده کنیم. با انجام این کار ، Django می داند که کجا به دنبال جابه جایی و آدرس های اینترنتی باشد.
در مرحله بعدی ، باید urls.py اصلی را تغییر دهیم تا به فایل urls.py برنامه خود اشاره کنیم. برای انجام این کار ، یک خط تحت مسیر موجود برای داشبورد ادمین اضافه می کنیم. همچنین نیاز به وارد کردن include داریم تا بتوانیم به فایل urls.py برنامه خود اشاره کنیم.
the_weather/the_weather/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path(‘admin/’, admin.site.urls),
path(”, include(‘weather.urls’)),
]

رشته خالی بدان معنی است که ما از نقطه انتهایی برای نقطه ورود به برنامه خود استفاده نمی کنیم. درعوض به برنامه اجازه خواهیم داد تا از نقاط انتهایی خاصی استفاده کند. می توانستیم چیزی شبیه به مسیری قرار دهیم (‘weather/’, …) ، این بدان معنی است که باید 127.0.0.1:8000/weather/ را تایپ کنیم تا هر چیز مرتبط با برنامه آب و هوایی خود را دریافت کنیم. اما از آنجا که پروژه ما ساده است ، آن را اینجا انجام نمی دهیم.
اضافه کردن قالب و نما
در حال حاضر برای اولین کاری که می خواهیم انجام دهیم، باید الگوی خود را به پروژه اضافه کنیم.
یکی از قالب ها در Django تنها یک فایل HTML است که امکان دستور اضافی را می دهد تا این الگو را پویا کند. می توانیم کارهایی مانند اضافه کردن متغیرها ، عبارات if و حلقه ها را علاوه بر موارد دیگر انجام دهیم.
یک فایل HTML داریم ، اما برای شروع ما کافی خواهد بود.
می خواهیم یک دایرکتوری الگو ایجاد کنیم تا این فایل را در آن قرار دهیم.
⦁ cd weather
⦁
⦁ mkdir templates && cd templates
⦁
⦁ mkdir weather

همچنین دایرکتوری دیگری با نام یکسان با برنامه خود ایجاد کردیم. این کار را کردیم زیرا Django تمام دایرکتوری های قالب را از برنامه های مختلفی که در اختیار داریم ترکیب می کند. برای جلوگیری از کپی شدن نام فایل ها ، می توانیم از نام برنامه خود برای جلوگیری از تکرار استفاده کنیم.
در داخل دیرکتوری هواشناسی ، فایل جدیدی با نام index.html ایجاد کنید. این الگوی اصلی ما خواهد بود. در اینجا HTML ای که برای الگو استفاده خواهیم کرد ، آورده شده است:
the_weather/weather/templates/weather/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>What’s the weather like?</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css” />
</head>
<body>
<section class=”hero is-primary”>
<div class=”hero-body”>
<div class=”container”>
<h1 class=”title”>
What’s the weather like?
</h1>
</div>
</div>
</section>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-offset-4 is-4″>
<form method=”POST”>
<div class=”field has-addons”>
<div class=”control is-expanded”>
<input class=”input” type=”text” placeholder=”City Name”>
</div>
<div class=”control”>
<button class=”button is-info”>
Add City
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-offset-4 is-4″>
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image is-50×50″>
<img src=”http://openweathermap.org/img/w/10d.png” alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<span class=”title”>Las Vegas</span>
<br>
<span class=”subtitle”>29° F</span>
<br> thunderstorm with heavy rain
</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<footer class=”footer”>
</footer>
</body>
</html>

اکنون که الگوی خود را ایجاد کردیم ، بگذارید یک نما و URL ترکیبی ایجاد کنیم تا در واقع بتوانیم این را در برنامه خود مشاهده کنیم.
نماهای موجود در Django یا توابع یا کلاس ها هستند. در مورد ما از آنجا که یک نمای ساده ایجاد می کنیم ، یک تابع ایجاد خواهیم کرد. این تابع را به views.py خود اضافه کنید:
the_weather/weather/views.py
from django.shortcuts import render

def index(request):
return render(request, ‘weather/index.html’) #returns the index.html template

ما نمای خود را index نامگذاری می کنیم زیرا در فهرست برنامه ما ، که URL اصلی است قرار دارد. برای ارائه رندر قالب ، درخواست را باز می گردانیم ، که برای عملکرد رندر لازم است و نام فایل قالب که می خواهیم ارائه دهیم ، در این حالت weather / index.html است.
بیایید URL ای را اضافه کنیم که درخواست را به این نما ارسال کند. در urls.py برای برنامه ، لیست urlpatterns را به روز کنید.
the_weather/weather/urls.py
from django.urls import path
from . import views

urlpatterns = [
path(”, views.index), #the path for our index view
]

این کار به ما امکان می دهد تا نمایی را که تازه ایجاد کردیم ، ارجاع دهیم.
Django قرار است بدون نقطه نهایی با هر URL مطابقت داشته باشد و آن را به سمت تابعی که ایجاد کرده ایم هدایت کند.
به ریشه پروژه خود برگردید ، سرور مجازی را راه اندازی کنید و دوباره به 127.0.0.1:8000 بروید.
⦁ $ python manage.py runserver
⦁

آنچه اکنون می بینیم فقط نتیجه HTML است که در فایل index.html دارید. ورودی برای افزودن شهر و آب و هوای لاس وگاس را مشاهده خواهید کرد. با این حال ، این فرم کار نمی کند و آب و هوا فقط placeholder است ، اما نگران نباشید ، زیرا این موارد را برای این برنامه ایجاد خواهیم کرد.
استفاده از API آب و هوا
کاری که اکنون می خواهیم انجام دهیم ثبت نام در Open Weather Map API است. این کار به ما امکان می دهد آب و هوای واقعی را برای هر شهر که در برنامه خود اضافه می کنیم ، بدست آوریم.
به سایت مذکور بروید ، یک حساب کاربری ایجاد کنید و سپس به سمت کلیدهای API در داشبورد خود بروید. یک نام وارد کنید و یک کلید API جدید تولید کنید. این کلید به ما امکان می دهد تا از API برای به دست آوردن هوا استفاده کنیم.

نقطه پایانی که استفاده خواهیم کرد در زیر آمده است ، بنابراین می توانید با تغییر URL زیر با کلید API و حرکت به URL در مرورگر خود ، داده هایی را که باز می گردانید ، مشاهده می کنید. ممکن است چند دقیقه طول بکشد تا کلید API شما فعال شود ، بنابراین اگر در ابتدا کار نمی کند ، پس از چند دقیقه دوباره امتحان کنید.
http://api.openweathermap.org/data/2.5/weather?q=las%20vegas&units=imperial&appid=YOUR_APP_KEY
پس از این ، بیایید درخواستی اضافه کنیم تا داده ها را وارد برنامه خود کنیم.
ابتدا باید درخواست هایی را نصب کنیم تا بتوانیم از داخل برنامه خود با API تماس بگیریم.
⦁ $ pipenv install requests
⦁
بیایید نمای فهرست را به روز کنیم تا یک درخواست به URL خود بفرستیم.
the_weather/weather/views.py
from django.shortcuts import render
import requests

def index(request):
url = ‘http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY’
city = ‘Las Vegas’
city_weather = requests.get(url.format(city)).json() #request the API data and convert the JSON to Python data types

return render(request, ‘weather/index.html’) #returns the index.html template

با این سه خط ، URL را اضافه می کنیم که یک درخواست برای آنها ارسال میشود. هنگامی که به کاربران اجازه می دهیم شهرهای خود را اضافه کنند ، این قسمت را برای شهر تبدیل به placeholder خواهیم کرد.
در حال حاضر ما شهر را به عنوان لاس وگاس تنظیم خواهیم کرد ، اما بعداً از طریق پایگاه داده روی شهرها تنظیم می شود.
در آخر ، درخواست را با استفاده از شهر به آدرس اینترنتی ارسال می کنیم و نمایندگی JSON آن شهر را دریافت می کنیم. اگر آن را بر روی کنسول چاپ کنیم می توانیم همان داده هایی را که هنگام قرار دادن URL در نوار آدرس خود قرار داده ایم ، مشاهده کنیم.
اگر دوباره سرور مجازی خود را راه اندازی کنید و صفحه را مجدد لود کنید ، می بینید که داده ها روی کنسول شما چاپ می شوند.

نمایش داده ها در قالب
در مرحله بعد ، باید داده ها را به قالب منتقل کنیم تا بتواند برای کاربر نمایش داده شود.
بیایید یک فرهنگ لغت ایجاد کنیم تا تمام داده های مورد نیاز خود را نگه داریم. از داده های برگشت یافته به ما ، به دما ، توضیحات و نماد نیاز داریم.
the_weather/weather/views.py
def index(request):
…
weather = {
‘city’ : city,
‘temperature’ : city_weather[‘main’][‘temp’],
‘description’ : city_weather[‘weather’][0][‘description’],
‘icon’ : city_weather[‘weather’][0][‘icon’]
}

return render(request, ‘weather/index.html’) #returns the index.html template

اکنون که تمام اطلاعات مورد نظر خود را داریم ، می توانیم آن را به قالب منتقل کنیم. برای انتقال آن به الگو ، متغیری به نام زمینه ایجاد خواهیم کرد. که یک فرهنگ لغت است که به ما امکان می دهد مقادیر آن را در داخل قالب استفاده کنیم.
the_weather/weather/views.py
def index(request):
…
context = {‘weather’ : weather}
return render(request, ‘weather/index.html’, context) #returns the index.html te

و پس از آن در ارائه ، متن را به عنوان آرگومان سوم اضافه خواهیم کرد.
با افزودن داده های آب و هوا در داخل متن ، بیایید به سراغ قالب برویم تا داده ها را اضافه کنیم.
در داخل قالب ، تمام کاری که باید انجام دهیم این است که HTML را اصلاح کنیم تا از متغیرها به جای مقادیری که تایپ کرده ایم استفاده کنیم. متغیرها از برچسب {{}}، استفاده می کنند و هر چیزی را در فرهنگ لغت متن خود ارجاع می دهند.
توجه داشته باشید که Django کلیدهای فرهنگ لغت را تبدیل می کند ، بنابراین تنها با استفاده از نشانه گذاری نقطه ای می توانید به آنها دسترسی پیدا کنید. به عنوان مثال ، weather.city نام شهر را به ما می دهد. مانند پیتون از weather[‘city’] استفاده نمی کنیم.
div جعبه را پیدا کنید و آن را به روز کنید:
the_weather/weather/templates/weather/index.html
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image is-50×50″>
<img src=”http://openweathermap.org/img/w/{{ weather.icon }}.png” alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<span class=”title”>{{ weather.city }}</span>
<br>
<span class=”subtitle”>{{ weather.temperature }}° F</span>
<br> {{ weather.description }}
</p>
</div>
</div>
</article>
</div>

با جایگزین شدن همه متغیرها ، اکنون باید هوای فعلی را برای شهر خود ببینیم.

اکنون می توانیم هوای یک شهر را ببینیم ، اما مجبور شدیم شهر را کدگذاری کنیم. کاری که اکنون می خواهیم انجام دهیم این است که از بانک اطلاعاتی بیرون بکشیم و شهرهایی را که در پایگاه داده ما هستند نشان دهیم.
برای این کار ، یک جدول در بانک اطلاعاتی خود ایجاد خواهیم کرد تا شهرهایی را که می خواهیم آب و هوا را برای آنها بشناسیم ، در اختیار داشته باشیم. یک مدل برای این منظور ایجاد خواهیم کرد.
به برنامه model.py در برنامه هواشناسی خود بروید و موارد زیر را اضافه کنید:
the_weather/weather/models.py
from django.db import models

class City(models.Model):
name = models.CharField(max_length=25)

def _str_(self): #show the actual city name on the dashboard
return self.name

class Meta: #show the plural of city as cities instead of citys
verbose_name_plural = ‘cities’

این کد یک جدول در دیتابیس ما ایجاد می کند که ستونی به نام name خواهد داشت که نام شهر است. این شهر یک charfield خواهد بود ، که فقط یک رشته است.
برای به دست آوردن این تغییرات در بانک اطلاعاتی ، باید ememigrations را برای تولید کد جهت به روزرسانی بانک اطلاعاتی و جابه جایی برای اعمال آن تغییرات انجام دهیم. بیایید اکنون این کار را انجام دهیم:
⦁ $ python manage.py makemigrations
⦁
⦁ $ python manage.py migrate

باید آن را به جایی تبدیل کنیم که بتوانیم این مدل را در داشبورد ادمین خود مشاهده کنیم. برای انجام این کار ، باید آن را در فایل admin.py خود ثبت کنیم.
the_weather/weather/admin.py
from django.contrib import admin
from .models import City

admin.site.register(City)

شهر را به عنوان گزینه ای در داشبورد ادمین مشاهده خواهید کرد.

سپس می توانیم وارد داشبورد hnldk شویم و برخی از شهرها را اضافه کنیم. من با سه شروع می کنم: لندن ، توکیو و لاس وگاس.

با ورود به دیتابیس ، باید از دید خود این ورودی ها را جستجو کنیم. با وارد کردن مدل City شروع کنید و سپس جستجوی آن مدل برای همه آبجکت ها شروع کنید.
the_weather/weather/views.py
from django.shortcuts import render
import requests
from .models import City
Copy
the_weather/weather/views.py
…
def index(request):
url = ‘http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY’
cities = City.objects.all() #return all the cities in the database
…

از آنجا که ما لیست شهرها را داریم ، می خواهیم در آنها حلقه بزنیم و هوا را برای هر یک از آنها بدست آوریم و آن را به لیستی اضافه کنیم که در نهایت به قالب منتقل شود.
این فقط تنوع کارهایی است که در مورد اول انجام دادیم. تفاوت دیگر اینست که هر لغت نامه را به یک لیست حلقه و اضافه می کنیم. ما متغیر شهر اصلی را به نفع متغیر شهری در حلقه، حذف خواهیم کرد:
the_weather/weather/views.py
def index(request):
…
weather_data = []

for city in cities:

city_weather = requests.get(url.format(city)).json() #request the API data and convert the JSON to Python data types

weather = {
‘city’ : city,
‘temperature’ : city_weather[‘main’][‘temp’],
‘description’ : city_weather[‘weather’][0][‘description’],
‘icon’ : city_weather[‘weather’][0][‘icon’]
}

weather_data.append(weather) #add the data for the current city into our list

context = {‘weather_data’ : weather_data}
…

اکنون زمینه را برای وارد کردن این لیست به جای یک فرهنگ لغت واحد به روزرسانی می کنیم.
the_weather/weather/views.py
…
context = {‘weather_data’ : weather_data}
…

در مرحله بعد ، در داخل قالب ، باید این لیست را حلقه زده و HTML را برای هر شهر موجود در لیست تولید کنیم. برای این کار می توانیم یک حلقه for حول HTML قرار دهیم که یک جعبه واحد برای شهر ایجاد می کند.
the_weather/weather/index.html
<div class=”column is-offset-4 is-4″>
{% for weather in weather_data %}
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image is-50×50″>
<img src=”http://openweathermap.org/img/w/{{ weather.icon }}.png” alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<span class=”title”>{{ weather.city }}</span>
<br>
<span class=”subtitle”>{{ weather.temperature }}° F</span>
<br> {{ weather.description }}
</p>
</div>
</div>
</article>
</div>
{% endfor %}
</div>

اکنون می توانیم داده های مربوط به تمام شهرهایی که در بانک اطلاعات داریم را ببینیم.
ایجاد فرم
آخرین کاری که می خواهیم انجام دهیم این است که کاربر بتواند شهری را مستقیماً در قالب اضافه کند.
برای انجام این کار ، باید یک فرم ایجاد کنیم. می توانستیم فرم را بطور مستقیم ایجاد کنیم ، اما از آنجا که فرم ما دقیقاً همان فیلد مدل ما را خواهد داشت ، می توانیم از ModelForm استفاده کنیم.
یک فایل جدید به نام format.py ایجاد کنید.
the_weather/weather/forms.py
from django.forms import ModelForm, TextInput
from .models import City

class CityForm(ModelForm):
class Meta:
model = City
fields = [‘name’]
widgets = {
‘name’: TextInput(attrs={‘class’ : ‘input’, ‘placeholder’ : ‘City Name’}),
} #updates the input class to have the correct Bulma class and placeholder

برای مشاهده فرم ، باید آن را در نمای خود بسازیم و آن را به قالب منتقل کنیم.
برای انجام این کار ، بگذارید ویدیوی ایندکس را به روز کنیم تا فرم ایجاد شود. متغیر شهر قدیمی را همزمان جایگزین خواهیم کرد زیرا دیگر نیازی به آن نداریم. همچنین باید متن را به روز کنیم تا فرم به قالب منتقل شود.
the_weather/weather/views.py
def index(request):
…
form = CityForm()

weather_data = []
…
context = {‘weather_data’ : weather_data, ‘form’ : form}

اکنون بیایید در قالب ، بخش فرم را به روز کنیم تا از فرم در نمای خود و از csrf_token استفاده کنیم که برای درخواست های POST در Django ضروری است.
<form method=”POST”>
{% csrf_token %}
<div class=”field has-addons”>
<div class=”control is-expanded”>
{{ form.name }}
</div>
<div class=”control”>
<button class=”button is-info”>
Add City
</button>
</div>
</div>
</form>

با استفاده از فرم موجود در HTML ، باید داده های فرم را در صورت ورود به آن مدیریت کنیم. برای این کار ، یک بلوک if ایجاد می کنیم که درخواست POST را بررسی میکند. قبل از شروع گرفتن اطلاعات آب و هوا ، باید بررسی نوع درخواست را اضافه کنیم ، بنابراین بلافاصله داده های مربوط به شهری را که اضافه می کنیم ، دریافت می نماییم.
the_weather/weather/views.py
def index(request):
cities = City.objects.all() #return all the cities in the database

url = ‘http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY’

if request.method == ‘POST’: # only true if form is submitted
form = CityForm(request.POST) # add actual request data to form for processing
form.save() # will validate and save if validate

form = CityForm()
…

با ارسال request.POST می توانیم داده های فرم را تأیید کنیم.
اکنون باید بتوانید نام یک شهر را تایپ کنید ، روی add کلیک کنید ، و آن را ببینید. میامی را به عنوان شهر بعدی اضافه خواهم کرد.

وقتی از بلوک if خارج می شویم ، فرم بازآفرینی می شود تا در صورت انتخاب بتوانیم شهر دیگری اضافه کنیم. بقیه کد به همین روش رفتار خواهد کرد.
نتیجه
اکنون راهی برای پیگیری وضعیت هوا برای چندین شهر در برنامه خود داریم.
در این مقاله ، برای انجام این کار باید با بخش های مختلف Django کار کنیم: نماها ، مدل ها ، فرم ها و قالب ها. همچنین برای به دست آوردن داده های واقعی هوا ، مجبور شدیم از درخواست های کتابخانه پایتون استفاده کنیم. بنابراین حتی اگر برنامه ساده باشد ، بسیاری از مفاهیم مشترک در app ها را با پیچیدگی بیشتر استفاده خواهید کرد.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade