كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django ج3

لقد انتهينا من تصميم تطبيق الآلة الحاسبة. باستخدام HTML، كما قمنا بتعيين هيكل الآلة الحاسبة. و استخدامنا أيضا CSS لتجميل الآلة الحاسبة وتصميم التخطيط. وأخيرًا، استخدمنا JavaScript لجعل التطبيق يتفاعل مع الأزرار الأخرى وإجراء العمليات الحسابية الأساسية.

الجزء الاول: كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django
الجزء الثاني: كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django
الجزء الثالث: كيف قمت بإنشاء تطبيق الآلة الحاسبة باستخدام Django

إلى هنا انتهت مهمتنا ولكن هناك مشكلة. طوال مرحلة التطوير، استخدمنا محرر نصوص لكتابة الكود ولملاحظة ما كنا نفعله على المتصفح، وقمنا بنسخ المسار إلى الملف ولصقه في شريط العناوين. وبدون القيام بذلك، لا يمكننا رؤية تطبيق الآلة الحاسبة.

علاوة على ذلك، و حرصنا على إدراج لغة بايثون في بناء المشاريع، تمامًا كما ذكرنا في الجزء الأول من هذا البرنامج التعليمي للمشروع، سنستخدم Django، وهو إطار عمل Python، لاستضافة هذا التطبيق.

إعداد جانغو

لدينا الكثير لنفعله على الطرفية لإعداد Django. سنبدأ بإنشاء مجلد منفصل لهذا المشروع، وتفعيل بيئة افتراضية وتثبيت Django.

mkdir project && cd project
python3 -m venv .venv
source .venv/bin/activate
pip install django tzdata

بعد ذلك، سنقوم بإنشاء كل من مشروع و تطبيق Django.

django-admin startproject operation .
python3 manage.py startapp calculator

في هذه المرحلة، من المتوقع أن يكون لديك هذه الملفات في المجلد الخاص بك:

README.md  calculator  index.html  manage.py  operation  script.js  styles.css

بعد ذلك، سنقوم بإنشاء القوالب والمجلدات الثابتة. داخل المجلد الثابت، نقوم بإنشاء مجلدين إضافيين لـ JavaScript وCSS.

mkdir -p templates static/js static/css

إجراء تغييرات في ملف الإعدادات

ننتقل الآن إلى ملف settings.py لإبلاغ Django بما قمنا به. داخل الملف، ابدأ بإضافة التطبيق الذي تم إنشاؤه حديثًا في قسم INSTALLED_APPS.

INSTALLED_APPS = [
    …
    # custom app
    'calculator',
]

بعد ذلك، قم باستيراد وحدة نظام التشغيل os وانتقل إلى قسم “TEMPLATES” لإجراء التغيير التالي:

TEMPLATES = [
…
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
…
]

و لإخبار Django بمكان البحث عن الملفات الثابتة، انتقل إلى أسفل الملف و بالضبط تحت STATIC_URL مباشرةً، وقم أيضًا بإجراء هذا التغيير:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

بعد ذلك، في ملف URL على مستوى المشروع، قم بإجراء هذا التغيير:

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

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

أعد تسمية ملف CSS وانقل القالب والملفات الثابتة إلى مكانها الصحيح بإستخدام الطرفية.

mv styles.css base.css
mv index.html templates

mv base.css static/css/

mv script.js static/js/

و هذا هو الناتج المتوقع لمجلد المشروع الخاص بك:

README.md  calculator  manage.py  operation  static  templates

إجراء تغييرات على ملف العلامات

افتح ملف Index.html و قم بتحميل الملفات الثابتة في الأعلى:

{% load static %}

اضبط الرابط الذي يشير إلى ملف CSS ليكون هكذا:

    <link rel="stylesheet" href="{% static 'css/base.css' %}">

و سيكون وسم script لجافا سكريبت أيضًا على النحو التالي:

<script src="{% static 'js/script.js' %}”></script>

دالة العرض وعنوان URL على مستوى التطبيق

لعرض تطبيق الآلة الحاسبة على الخادم المحلي، يتعين علينا إنشاء دالة عرض وعرضها.

دالة العرض بسيطة للغاية:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

بالنسبة إلى عنوان URL على مستوى التطبيق، أنشئ ملف urls.py داخل مجلد التطبيق.

from django.urls import path
from .views import index


urlpatterns = [
    path('', index, name='home'),
]

هذا كل شئ. يمكننا الآن تشغيل الخادم المحلي.

python3 manage.py migrate
python3 manage.py runserver

إضافة صغيرة

دعونا نوسع تطبيق الآلة الحاسبة ليشمل ساعة رقمية حتى نتمكن أثناء قيامنا بإجراء العمليات الحسابية من مراقبة الوقت أيضًا. أضف هذا إلى ملف Index.html مباشرة بعد وسم <body> :

{% block top %} {% include 'clock.html' %} {% endblock top %}

أريد الالتزام بمبدأ فصل الاهتمام. ومن ثم سنقوم بإنشاء ملف منفصل للساعة وإدراجه في ملف Index.html. لاحظ الكلمة الأساسية للكتلة: top. يمكن أن تكون أي كلمة من اختيارك. أستخدمه للإشارة إلى أنني أريد أن تظهر الساعة أعلى الآلة الحاسبة.

كل شيء سيكون في ملف منفصل. لذا، بما أننا لا نزال في ملف Index.html، قم بتضمين الرابط إلى ملفات CSS وJavaScript.

<link rel="stylesheet" href="{% static 'css/clock.css' %}">
<script src="{% static 'js/clock.js' %}"></script>

الآن، قم بإنشاء ملف Clock.html داخل مجلد القوالب.

{% block top %}

<div id="MyClockDisplay" class="clock"></div>

{% endblock top %}

هذا هو كل ما نحتاجه. سيتم تنفيذ الباقي باستخدام JavaScript. لاحظ كيف نتأكد من ظهور هذا العلامات في ملف Index.html عن طريق تغليف الكود داخل عبارات block.

الملف التالي هو ملف CSS. سيتم إدخاله داخل مجلد CSS.

.clock {
  position: absolute;
  top: 10%;
  left: 45%;
  transform: translateX(-50%) translateY(-50%);
  color: #17d4fe;
  font-size: 60px;
  font-family: Times New Roman;
  letter-spacing: 7px;
}

لقد شرحنا بعضًا من هذه الأمور في سلسلة الجزء الأول من مقالة المشروع هذه. نستخدم فئة clock لتصميم عنصر HTML.

أستخدم الخصائص العلوية واليسرى (10% بعيدًا عن الحافة العلوية و45% بعيدًا عن الحافة اليسرى) للتأكد من وضع الساعة الرقمية أعلى الآلة الحاسبة. تتأكد خاصية التحويل أيضًا من توسيط العنصر أفقيًا وعموديًا.

التالي هو جافا سكريبت. سيؤدي هذا إلى عرض الساعة وجعلها علامة.

window.onload = function showTime(){
  let date = new Date(),
      h = date.getHours(),
      m = date.getMinutes(),
      s = date.getSeconds(),
      session = 'AM';

  if (h == 0){
    h = 12;
  }

  if (h > 12){
    h -=  12;
    session = 'PM';
  }

  h = (h < 10) ? '0' + h : h;
  m = (m < 10) ? '0' + m : m;
  s = (s < 10) ? '0' + s : s;

  let time = h + ':' + m + ':' + s + ' ' + session;

  document.getElementById('MyClockDisplay').innerHTML = time;

  setTimeout(showTime, 1000);
}

showTime();

يتأكد window.onload من تحميل الصفحة قبل تشغيل أي كود JavaScript. داخل دالة showTime()، نقوم بإنشاء كائن تاريخ واستخدام طرق الحصول عليه لتخصيص الثواني والدقائق والساعات بالتوقيت المحلي لمتغير.

إذا كانت الساعة تساوي 0 (أي منتصف الليل)، يتم ضبطها على 12 لتجنب استخدام نظام 24 ساعة. إذا كانت الساعة أكبر من 12 (أي في فترة ما بعد الظهر)، يتم طرح 12 منها ويتم ضبط قيمة الجلسة التي تم ضبطها في البداية على “AM” إلى “PM”.

تتحقق الدالة بعد ذلك مما إذا كانت الساعات والدقائق والثواني أقل من 10. وإذا كانت كذلك، تتم إضافة “0” قبلها للتأكد من أنها تحتوي دائمًا على رقمين. ثم يقوم بتنسيق الوقت وتخزينه في متغير الوقت.

باستخدام .innerHTML للعنصر، نعرض الوقت الحالي على الصفحة. وأخيرًا، تستدعي الدالة نفسها كل ثانية واحدة لتحديث الوقت.

إلى هنا نكون قد وصلنا إلى نهاية هذا الدرس حول إنشاء تطبيق آلة حاسبة. يركز المشروع على كيفية استخدام JavaScript للتفاعل مع DOM. وامتدادًا، أوضحنا كيفية إضافة ساعة رقمية ليتم عرضها على تطبيق الآلة الحاسبة.

مرتبط

اكتشاف المزيد من بايثون العربي

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

إعداد جانغو

إجراء تغييرات في ملف الإعدادات

إجراء تغييرات على ملف العلامات

دالة العرض وعنوان URL على مستوى التطبيق

إضافة صغيرة

شارك هذا الموضوع:

مرتبط

اكتشاف المزيد من بايثون العربي

اترك تعليقاً إلغاء الرد

اكتشاف المزيد من بايثون العربي