فصل بیستم on کتاب Python Crash Course

شکل‌دهی و استقرار

Mon, 01 Jan 0001 00:00:00 +0000

سایت Learning Log اکنون کاملاً کارآمد است امّا هیچ شکل و سیاقی ندارد و روی ماشین محلی شما اجرا می‌شود. در این فصل پروژه را به شکلی ساده امّا حرفه‌ای درمی‌آوریم و سپس آن را روی سرور در حال اجرا مستقر می‌کنیم تا هر کس در هر جای دنیا بتواند حساب کاربری بسازد و از آن استفاده کند.

برای شکل‌دهی به سایت از کتابخانه‌ی Bootstrap استفاده می‌کنیم که مجموعه‌ای از ابزارها برای سر و شکل دادن به برنامه‌های کاربردی تحت وب است تا آن‌ها در افزاره‌های مدرن حرفه‌ای به نظر برسند، از نمایشگرهای تخت بزرگ گرفته تا گوشی‌های هوشمند. برای چنین کاری از برنامه‌ی django-bootstrap4 کمک می‌گیریم تا علاوه بر هدف اصلی خود، در کار کردن با برنامه‌هایی که دیگر توسعه‌دهندگان جانگو ساخته‌اند تجربه کسب کنید.

شکل دادن به پروژه

Mon, 01 Jan 0001 00:00:00 +0000

ما عمداً تا الان به شکل و قیافه‌ی سایت توجّهی نکردیم تا ابتدا روی کارآمدی سایت تمرکز کرده باشیم. این راه خوبی برای توسعه دادن است زیرا یک برنامه تنها زمانی سودمند است که کار کند. البته به محض اطمینان از کارایی، ظاهر آن حیاتی می‌شود تا افراد به استفاده از آن تمایل داشته باشند.

در این بخش برنامه‌ی django-bootstrap4 را معرّفی می‌کنم و به شما نشان می‌دهم که چگونه می‌توان آن را در یک پروژه تجمیع کرد تا برای استقرار آماده شود.

تغییر دادن base.html

Mon, 01 Jan 0001 00:00:00 +0000

باید برای جای دادن قالب بوت‌استرپ در قالب base.html آن را تغییر داد. فایل base.html جدید را بخش به بخش معرّفی می‌کنم.

تعیین سربرگ‌های HTML

اوّلین تغییری که در base.html ایجاد می‌کنیم تعریف¹⁷⁴ سربرگ‌های HTML در این فایل است تا هر گاه صفحه‌ی Learning Log باز بود مرورگر در نوار عنوان خود نام سایت را نمایش دهد. علاوه بر این تعدادی از نیازمندی‌های مربوط به به‌کارگیری بوت‌استرپ در قالب‌های خود را نیز اضافه می‌کنیم. هر آن‌چه در base.html وجود دارد پاک کنید و کد زیر را جایگزین کنید:

تعریف کردن نوار پیمایش

Mon, 01 Jan 0001 00:00:00 +0000

کدی که نوار پیمایش را در بالای صفحه تعریف می‌کند کمی طولانی است زیرا این نوار باید در صفحه‌های کم‌عرض گوشی و نمایشگرهای رومیزی عریض به درستی کار کند. کار بر روی نوار پیمایش را در چند بخش ادامه می‌دهیم.

این اوّلین بخش نوار پیمایش است:

--snip--
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
  <a class="navbar-brand" href="{% url 'learning_logs:index'%}">
    Learning Log</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarCollapse" aria-controls="navbarCollapse"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span></button>

اوّلین عنصر، تگ گشایش <body> است (۱). بدنه‌ی یک فایل HTML دربردارنده‌ی محتویّا¹⁷⁵ تی است که کاربران بر روی صفحه خواهند دید. در ۲ یک عنصر <nav> وجود دارد که نشانگر بخش پیوندهای پیمایش صفحه است. سیاق هر چه که داخل این عنصر باشد مطابق قواعد شکل‌دهی بوت‌استرپ تعیین می‌شود که با انتخاب‌گرهای navbar، navbar-expand-md و دیگر موارد مشخّص شده‌اند. یک انتخاب‌گر تعیین می‌کند که مجموعه‌ای از قوانین شکل‌دهی به کدام عنصرها در صفحه اعمال شوند. انتخاب‌گرهای navbar-light و bg-light پس‌زمینه‌ی نوار پیمایش را به رنگ روشن درمی‌آورند. mb در mb-4 سرواژه‌ی margin-bottom (حاشیه‌ی پایین) است؛ این انتخاب‌گر وجود یک فاصله‌ی کوچک بین نوار پیمایش و دیگر اجزای صفحه را تضمین می‌کند. انتخاب‌گر border یک لبه‌ی نازک به پس‌زمینه‌ی روشن اضافه می‌کند تا آن را کمی از باقی قسمت‌های صفحه متمایز کند.

تعریف قسمت اصلی صفحه

Mon, 01 Jan 0001 00:00:00 +0000

هنوز موارد اندکی مانده تا به base.html اضافه کنیم. باید دو بلوک اضافه کنیم تا صفحه‌های جداگانه بتوانند از آن‌ها برای قرار دادن محتوای مخصوص به خود استفاده کنند.

باقی base.html قسمت اصلی صفحه را در برمی‌گیرد:

--snip--
</nav>
<main role="main" class="container">
    <div class="pb-2 mb-2 border-bottom">
{% block page_header %}{% endblock page_header %}
    </div>
    <div>
{% block content %}{% endblock content %}
    </div>
</main>
</body>
</html>

در ۱ یک تگ <main> باز می‌کنیم. عنصر بخش اصلی برای نمایش برجسته‌ترین بخش بدنه‌ی صفحه‌های شما استفاده می‌شود. اینجا از انتخاب‌گر container بوت‌استرپ بهره می‌گیریم که راهی ساده برای گروه‌بندی عنصرها در یک صفحه است. دو عنصر div در آن قرار می‌دهیم.

شکل‌دهی به صفحه‌ی خانه به کمک جامباترون

Mon, 01 Jan 0001 00:00:00 +0000

برای به‌روزرسانی صفحه‌ی خانه از یک عنصر بوت‌استرپ¹⁸¹ به نام جامباترون استفاده می‌کنیم. این عنصر جعبه‌ی بزرگی است که از دیگر بخش‌های صفحه متمایز بوده و می‌تواند هر چیزی را که بخواهید دربربگیرد. به طور معمول از این عنصر در صفحه‌های آغازین پروژه و برای بیان شرحی مختصر از آن استفاده می‌شود و می‌تواند بیننده را به انجام عملی در سایت دعوت کند.

این فایل index.html بازبینی‌شده است:

{% extends "learning_logs/base.html" %}

{% block page_header %}
<div class="jumbotron">
<h1 class="display-3">Track your learning.</h1>
<p class="lead">Make your own Learning Log, and keep a list of the
topics you're learning about. Whenever you learn something new
about a topic, make an entry summarizing what you've learned.</p>
<a class="btn btn-lg btn-primary" href="{% url 'users:register' %}"
role="button">Register &raquo;</a>
</div>
{% endblock page_header %}

در ۱ به جانگو می‌گوییم که آن‌چه در قسمت page_header قرار می‌گیرد تعریف کند. جامباترون در عمل یک عنصر div است که تعدادی دستور شیوه‌دهی به آن اعمال می‌شود (۲). انتخاب‌گر jumbotron این دستورهای شیوه‌دهی را از کتابخانه‌ی بوت‌استرپ بر این عنصر اعمال می‌کند.

آراستن صفحه‌ی ورود

Mon, 01 Jan 0001 00:00:00 +0000

ما ظاهر کلی صفحه‌ی ورود را بازنگری کردیم امّا هنوز به فرم ورود نپرداخته‌ایم. حال با تغییر دادن فایل login.html کاری می‌کنیم که این فرم مشابه بخش‌های صفحه به نظر بیاید:

{% extends "learning_logs/base.html" %}
{% load bootstrap4 %}

{% block page_header %}
  <h2>Log in to your account.</h2>
{% endblock page_header %}

{% block content %}
  <form method="post" action="{% url 'users:login' %}" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
  <button name="submit" class="btn btn-primary">Log in</button>
{% endbuttons %}
<input type="hidden" name="next"
   value="{% url 'learning_logs:index' %}" />
  </form>
{% endblock content %}

در ۱ تگ‌های قالبی bootstrap4 را وارد قالب خود می‌کنیم. در ۲ قسمت page_header را تعریف می‌کنیم که به کاربر توضیح می‌دهد این صفحه چه می‌کند. دقّت کنید که بخش {% if form.errors %} را از قالب حذف کرده‌ایم زیرا django-bootstrap4 به طور خودکار خطاهای فرم را مدیریّت می‌کند.

شکل دادن به صفحه‌ی موضوعات

Mon, 01 Jan 0001 00:00:00 +0000

حال باید مطمئن شویم که صفحه‌های مربوط به دیدن اطّلاعات هم به خوبی شکل گرفته‌اند، کار را از صفحه‌ی موضوعات شروع می‌کنیم:

{% extends "learning_logs/base.html" %}

{% block page_header %}
  <h1>Topics</h1>
{% endblock page_header %}

{% block content %}
  <ul>
{% for topic in topics %}
  <li><h3>
    <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
  </h3></li>
{% empty %}
  <li><h3>No topics have been added yet.</h3></li>
{% endfor %}
  </ul>
  <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic</a></h3>
{% endblock content %}

اینجا به تگ {% load bootstrap4 %} دیگری احتیاجی نداریم زیرا در این فایل از هیچ‌کدام از تگ‌های قالبی bootstrap4 استفاده نمی‌کنیم. عنوان Topics را به بخش page_header منتقل می‌کنیم و به جای استفاده از یک تگ ساده‌ی پاراگراف، به آن شکل عنوان می‌دهیم (۱). هر موضوع را به شکل یک عنصر <h3> درمی‌آوریم تا در صفحه کمی بزرگ‌تر به چشم بیاید (۲) و همین کار را برای پیوند افزودن موضوع جدید انجام می‌دهیم.

شکل دادن به مطالب در صفحه‌ی موضوع‌ها

Mon, 01 Jan 0001 00:00:00 +0000

صفحه‌ی موضوع‌ها بیشترین محتوا را در بین صفحه‌های سایت دارد پس کمی کار بیشتری می‌برد. از مولفه‌ی کارت بوت‌استرپ استفاده می‌کنیم تا هر موضوع متمایز به نظر بیاید. کارت یک div با مجموعه‌ای از شیوه‌های منعطف و ازپیش‌تعریف‌شده است که برای نمایش مطالب مرتبط با یک موضوع عالی هستند:

{% extends 'learning_logs/base.html' %}

{% block page_header %}
  <h3>{{ topic }}</h3>
{% endblock page_header %}

{% block content %}
  <p>
  	<a href="{% url 'learning_logs:new_entry' topic.id %}">Add new entry</a>
  </p>
  {% for entry in entries %}
<div class="card mb-3">
  	   <h4 class="card-header">
        {{ entry.date_added|date:'M d, Y H:i' }}
        <small><a href="{% url 'learning_logs:edit_entry' entry.id %}">
        edit entry</a></small>
   </h4>
   <div class="card-body">
      {{ entry.text|linebreaks }}
  	   </div>
 </div>
  {% empty %}
<p>There are no entries for this topic yet.</p>
  {% endfor %}
{% endblock content %}

ابتدا در ۱ موضوع را داخل بخش page_header قرار می‌دهیم. سپس فهرست نامرتّبی را که قبلاً در این قالب به کار برده‌ایم، حذف می‌کنیم. به جای آن هر مطلب را به یک عضو فهرست تبدیل می‌کنیم و یک عنصر div با انتخاب‌گر card در ۲ درست می‌کنیم. این کارت دو عنصر داخلی دارد: یکی که برچسب زمانی و پیوند ویرایش مطلب را نگه می‌دارد و دیگری بدنه‌ی مطلب را در برمی‌گیرد.

استقرار پروژه

Mon, 01 Jan 0001 00:00:00 +0000

اکنون که یک پروژه با قیافه‌ای حرفه‌ای داریم بیایید آن را روی یک سرور در حال کار مستقر کنیم تا هر شخص متّصل به اینترنت بتواند از آن استفاده کند. ما از Heroku استفاده می‌کنیم که یک بستر مبتنی بر وب است و به شما امکان می‌دهد که استقرار نرم‌افزارهای تحت وب خود را مدیریّت کنید. ما پروژه‌ی Learning Log را برپا کرده و روی هروکو اجرا می‌کنیم.

ساختن یک حساب کاربری هروکو

برای ساختن یک حساب کاربری به https://heroku.com/ بروید و روی یکی از پیوندهای ثبت نام کلیک کنید. ساختن حساب رایگان است، هروکو یک گزینه‌ی رایگان دارد که به شما اجازه می‌دهد پروژه‌های خود را پیش از استقرار کامل در یک محیط زنده آزمایش کنید.

ساختن فایل‌های پیکربندی

Mon, 01 Jan 0001 00:00:00 +0000

ساختن یک فایل requirements.txt

هروکو باید بداند که پروژه‌ی ما روی چه بسته‌هایی بنا شده است بنابراین از pip برای تولید فایلی شامل آن‌ها استفاده می‌کنیم. دوباره در یک محیط مجازی فعّال فرمان زیر را صادر کنید:

`1`	`(ll_env)learning_log$ pip freeze > requirements.txt`

دستور freeze از pip می‌خواهد که نام تمام بسته‌هایی که در حال حاضر در پروژه‌ی ما نصب شده در فایل requirements.txt بنویسد. این فایل را باز کنید تا نام و نسخه‌ی بسته‌های نصب‌شده در پروژه‌ی خود را ببینید:

استفاده از Git برای ردگیری فایل‌های پروژه

Mon, 01 Jan 0001 00:00:00 +0000

چنان‌که در فصل ۱۷ گفتیم گیت یک برنامه‌ی کنترل نسخه است که به شما ا¹⁸⁴ مکان می‌دهد هر بار که ویژگی جدیدی را با موفقیّت پیاده می‌کنید تصویری لحظه‌ای از کد بگیرید. اگر هر مشکلی پیش آمد می‌توانید به آخرین تصویری که کار می‌کرده برگردید؛ برای مثال اگر هنگام کار کردن روی ویژگی جدید به طور اتّفاقی ایرادی ایجاد کردید. به هر کدام از این تصویرها یک سپارش می‌گویند.

ارسال به هروکو و برپا کردن پایگاه داده

Mon, 01 Jan 0001 00:00:00 +0000

ارسال به هروکو

در نهایت می‌خواهیم پروژه را به هروکو بفرستیم. در یک محیط فعّال مجازی فرمان‌های زیر را وارد کنید:

(ll_env)learning_log$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Logging in... done
Logged in as eric@example.com

(ll_env)learning_log$ heroku create
Creating app... done,  secret-lowlands-82594
https://secret-lowlands-82594.herokuapp.com/ |
https://git.heroku.com/secret-lowlands-82594.git

(ll_env)learning_log$ git push heroku master
--snip--
remote: -----> Launching...
remote: Released v5
remote: https://secret-lowlands-82594.herokuapp.com/ deployed to Heroku
remote: Verifying deploy... done.
To https://git.heroku.com/secret-lowlands-82594.git
  * [new branch] master -> master

(ll_env)learning_log$

ابتدا فرمان heroku login را وارد می‌کنید که شما را به صفحه‌ای در مرورگرتان می‌برد تا در آنجا به حساب هروکوی خود وارد شوید (۱). سپس به هروکو می‌گویید که یک پروژه‌ی خالی درست کند (۲). هروکو نامی متشکّل از دو کلمه و یک عدد درست می‌کند؛ می‌توانید آن را بعداً عوض کنید. سپس دستور git push heroku master را وارد می‌کنیم (۳) که به گیت می‌گوید شاخه‌ی اصلی پروژه را در مخزنی که هروکو ساخته بفرست. هروکو با استفاده از این فایل‌ها پروژه را در سرورهای خود می‌سازد. در ۴ آدرسی قرار دارد که از آن برای دسترسی به پروژه‌ی در حال کار استفاده می‌کنیم و می‌توانیم آن را به همراه نام پروژه عوض کنیم.

بهبود استقرار هروکو

Mon, 01 Jan 0001 00:00:00 +0000

اکنون فرآیند استقرار را با ساختن یک ابرکاربر بهبود می‌بخشیم، درست همانند آن چه به صورت محلّی کردیم. همچنین پروژه را با تغییر تنظیم DEBUG به False امن‌تر می‌کنیم تا کاربران در پیام‌های خطا هیچ اطّلاعات اضافی‌تری که با آن‌ها در حمله به سرور کمک می‌کند، مشاهده نکنند.

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

شما قبلاً دیده‌اید که می‌توانیم دستورهای یک‌طرفه را به کمک فرمان heroku run اجرا کنیم. امّا علاوه بر این شما می‌توانید هنگامی که با دستور heroku run bash به سرور هروکو متّصل شده‌اید، دستورها را با باز کردن یک نشست ترمینال Bash اجرا کنید. بَش یک زبان است که در بسیاری از ترمینال‌های لینوکسی اجرا می‌شود. ما از نشست ترمینال بَش برای ساختن یک ابرکاربر استفاده می‌کنیم تا بتوانیم روی برنامه‌ی در حال کار به سایت مدیر دسترسی داشته باشیم:

امن کردن پروژه‌ی در حال کار

Mon, 01 Jan 0001 00:00:00 +0000

یک ایراد امنیّتی چشم‌گیر در نحوه‌ی استقرار فعلی پروژه‌ی ما این است: تنظیم DEBUG=True در settings.py که هنگام بروز خطا پیام‌های اشکال‌زدایی را نمایش می‌دهد. صفحه‌های خطای جانگو هنگام توسعه پروژه اطّلاعاتی حیاتی برای اشکال‌زدایی در اختیار شما قرار می‌دهند؛ با این حال اگر آن‌ها را در سرور در حال کار فعّال بگذاریم به مهاجمان اطّلاعاتی بیش از اندازه می‌دهند.

این که اطّلاعات اشکال‌زدایی روی سرور زنده نمایش دا¹⁸⁸ ده شوند یا نه با تنظیم یک متغیّر محیطی کنترل می‌شوند. متغیّرهای محیطی مقدارهایی هستند که در یک محیط خاص تنظیم می‌شوند. این یکی از راه‌های نگهداری اطّلاعات حسّاس روی سرور است: آن‌ها را از دیگر کدهای پروژه جدا می‌کنیم.

ساختن صفحه‌های خطای شخصی

Mon, 01 Jan 0001 00:00:00 +0000

در فصل ۱۹ پروژه را طوری پیکربندی کردیم که اگر کاربر صفحه‌ای را درخواست کرد که وجود نداشت یا نوشته‌ای را که متعلّق به او نبود درخواست کرد، یک خطای 404 برگرداند. شما احتمالاً تا الان به برخی خطاهای سرور 500 (خطاهای داخلی) برخورده‌اید. خطای 404 معمولاً به این معنی است که کد جانگو درست است امّا چیزی که درخواست می‌شود وجود ندارد؛ خطای 500 به طور معمول به این معنی است که در کدی که نوشته‌اید خطایی وجود دارد، مانند خطایی در یک تابع در views.py. هم‌اکنون جانگو همان صفحه‌ی خطای عمومی را در هر دو وضعیّت برمی‌گرداند. امّا می‌توانیم قالب صفحه‌های خطای 404 و 500 خودمان را بنویسیم که به ظاهر کلّی پروژه می‌خورد. این قالب‌ها باید در پوشه‌ی ریشه‌ی قالب‌ها قرار بگیرند.

استفاده از get_object_or_404()

Mon, 01 Jan 0001 00:00:00 +0000

تا اینجا اگر کاربر موضوع یا مطلبی را که وجود ندارد به صورت دستی درخواست کند به خطای سرور 500 برمی‌خورد. جانگو سعی می‌کند صفحه‌ای را که وجود ندارد بسازد امّا چون برای این کار اطّلاعات کافی ندارد خطای 500 ایجاد می‌شود. این وضعّیت به طور دقیق‌تر شبیه به خطای 404 است و می‌توانیم این رفتار را به کمک تابع میان‌بر get_object_or_404() جانگو پیاده‌سازی کنیم. این تابع تلاش می‌کند که شیء درخواستی را از پایگاه داده بگیرد، امّا اگر وجود نداشت یک استثنای 404 ایجاد می‌کند. این تابع را در views.py وارد می‌کنیم و آن را به جای get() می‌گذاریم:

توسعه‌های آینده و نکته‌های پایانی

Mon, 01 Jan 0001 00:00:00 +0000

شما ممکن است بخواهید پس از انتقال اوّلیّه‌ی پروژه به سرور آن را توسعه دهید یا پروژه‌های خود را برای استقرار توسعه دهید. فرآیندی تقریباً یکسان برای به‌روزرسانی پروژه‌ها وجود دارد.

ابتدا هر تغییری که مورد نیاز است در پروژه‌ی محلّی خود ایجاد می‌کنید. اگر این تغییرات به ایجاد فایل‌های جدید منجر می‌شود آن‌ها را با دستور git add . به مخزن گیت اضافه کنید. (مطمئن شوید که نقطه را در پایان دستور می‌آورید.) هر تغییری در انتقال پایگاه داده به این دستور نیاز دارد چون در هر انتقال یک فایل انتقال جدید ساخته می‌شود.

خلاصه

Mon, 01 Jan 0001 00:00:00 +0000

در این فصل آموختید که چگونه به کمک کتابخانه‌ی بوت‌استرپ و برنامه‌ی django-bootstrap4 پروژه‌های خود ظاهری ساده امّا حرفه‌ای بدهید. به کمک بوت‌استرپ شکل و شیوه‌ای که انتخاب می‌کنید تقریباً روی هر افزاره‌ای که مردم برای دیدن پروژه‌ی شما استفاده می‌کنند به یک شکل به نظر می‌آید.

شما درباره‌ی قالب‌های بوت‌استرپ آموختید و از قالب Navbar static برای ساختن یک شکل و ظاهر ساده برای Learning Log استفاده کردید. از جامباترون برای متمایز کردن پیام صفحه‌ی خانه استفاده کردید و آموختید که چگونه تمام صفحه‌ها را به یک صورت شکل دهید.