استخدام أطر العمل في برمجة تطبيقات الويب: فلاسك نموذجا

Tue, 03 May 2022 08:09:00 +0000

سنغطي في هذا المقال من سلسلة تعلم البرمجة ما يلي:

أساسيات أطر عمل الويب.
استخدام إطار Flask في مثال Hello World.
بناء برنامج دليل جهات الاتصال في تطبيق ويب.

أطر عمل الويب Web Frameworks

تُعد البرامج التي تعتمد على الواجهة CGI التي تحدثنا عنها في المقال السابق وسيلةً فعالةً لبناء مواقع ويب تفاعلية، إلا أن لها عدة مشاكل لا يمكن تجاهلها، لعل أخطرها بدء الخادم عمليةً جديدةً في كل طلب، مما يسبب بطءً واستهلاكًا للموارد، لذا لا يمكن استخدامها في التطبيقات ذات العمليات الكثيرة المتزامنة، والمشكلة الثانية وجود الشيفرة وتعليمات HTML والبيانات في ملف واحد، مما يصعّب عملية الصيانة ويعرّضها للأخطاء، فقد يتسبب تعديل بسيط في HTML بأخطاء تركيبية في شيفرة بايثون، وقد جُربت عدة أساليب مختلفة للتعامل مع هذه المشاكل، إلا أن الأسلوب الذي استمر والذي سننظر فيه هو إطار عمل الويب web framework، وأشهر هذه الأطر:

صفحات خوادم مايكروسوفت النشطة Active Server Pages: واختصارًا ASP، يعمل هذا الإطار جنبًا إلى جنب مع خادم ويب مايكروسوفت IIS وبيئة "‎.NET" الخاصة بها، وهذا يعني إمكانية استخدام أي لغة مبنية على "‎".NET -بما في ذلك نسخة بايثون الخاصة بها- في إطار ASP.
صفحات خوادم جافا Java Server Pages: واختصارًا JSP، هي إطار عمل جافا الخاص بتطوير الويب، و هي تقنية لتوليد تطبيقات الخوادم المصغرة Servlets، التي هي عمليات خفيفة تشبه برامج CGI، لكنها أسهل في التعامل معها.
إطار عمل Ruby on Rails: يشبه إطار العمل ريلز rails الخاص بلغة روبي إطار عمل Flask الخاص ببايثون، والذي سندرسه قريبًا.
إطار عمل جانغو Django: يُعد جانغو أكثر أطر عمل بايثون شهرةً، خاصةً في بناء المواقع الكبيرة، وله شروحات كثيرة في كتب وتوثيقات إلكترونية، وهو غني بوحدات الإضافات plug-in modules المتاحة لتوسيعه، إلا أنه صعب التعلم موازنةً بإطار Flask.
إطار العمل Flask: وهو ما سندرسه في هذا المقال، إذ يوفر جميع العناصر الأساسية الموجودة في أطر العمل، وهو سهل التعلم نسبيًا، ويمكن استخدامه ببساطة دون كثير من التعقيد الذي يشتت الانتباه عن الأفكار الرئيسية.

تتمثل الفكرة الأساسية في جميع أطر عمل الويب في أنها تقلل الحمل على الخادم، باستخدام تقنيات البرمجة المتزامنة، والتي سندرسها في المقال التالي، كما تمقال المنطق logic عن شيفرة العرض presentation code، لتسهيل صيانة الموقع، حيث تسعى أحدث المعايير الصادرة عن w3c في كل من HTML5 و CSS3 إلى تحقيق هذا المقال، إذ يجب أن تُستخدم HTML حصرًا في هيكلة بناء المستند، بينما تُستخدم التنسيقات المورَّثة CSS للمظهر، من خطوط وألوان ومواضع وتحكم في رؤية العناصر أو إخفائها وغير ذلك، وبهذا تصبح برمجة الويب عملًا منظمًا يمكن صيانته، من خلال الجمع بين تلك الممارسات في كل من CSS وHTML مع أطر عمل الويب، وذلك من خلال تقنيتين رئيسيتين:

توجيه نقطة النهاية endpoint routing للروابط، والتي يشار إليها أحيانًا بالربط mapping، حيث يوجَّه الجزء الأخير من الرابط من ملف إلى دالة أو تابع في إطار العمل.
توفر قوالب المستندات طريقةً لإنشاء ملفات HTML ساكنة، فيها محددات للمواضع place-markers لإدراج البيانات فيها، ويمكن لدوال إطار عمل الويب أن تجهز البيانات ثم تمررها إلى محرك القالب، الذي يجلب القالب المناسب، ويدرج البيانات في محددات مواضعها لتوليد خرج HTML النهائي الذي يُعاد إلى متصفح المستخدم.

سنرى استخدام كلا التقنيتين في Flask، ولأطر عمل الويب غالبًا نفس المفاهيم، رغم اختلاف تفاصيل بنائها اللغوي syntax، واصطلاحات الاستدعاء المتبعة.

تثبيت Flask

لا يوجد إطار عمل Flask في مكتبة بايثون القياسية، لذا يجب تثبيته إما باستخدام أداة pip التي تأتي مع بايثون، أو استخدام حزمة تنفيذية خاصة، وهو ما يُنصح به مستخدمو لينكس، خاصةً عندما يُثبت على النظام أكثر من إصدار بايثون.

عند استخدام pip نفتح طرفية النظام (وقد نضطر إلى تشغيل أمر pip بصلاحيات مدير النظام، خاصةً عند تثبيت بايثون لجميع المستخدمين على الحاسوب) ونكتب فيها ما يلي:

$ pip install flask

يمكن التحقق منها بتشغيل بايثون، واستيراد Flask بالأمر import flask، فإذا لم نحصل على أخطاء نكون قد نجحنا.

استخدام Flask في مثال Hello World

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

صفحة ويب بسيطة

لن نحتاج هنا إلى إنشاء ملف HTML كما فعلنا في حالة CGI في المقال السابق، بل سنعيد شيفرة HTML من دالة Flask، كما يلي:

import flask

helloapp = flask.Flask(__name__)

@helloapp.route("/")
def index():
   return """
</span><span class="pln">Hello</span><span class="tag">

Hello from Flask!
"""

if __name__ == "__main__":
    helloapp.run()

يجب أن نشير هنا إلى بضعة أمور، حيث يُسند أول سطر بعد import flask نسخةً من كائن تطبيق Flask إلى متغير helloapp، وهو اسم عشوائي رغم أنه نفس اسم تطبيقنا، ثم نمرر المتغير الخاص __name__، الذي رأيناه في فصول سابقة، إلى التطبيق الذي يستخدمه ليعرّف الموقع الرئيسي (الجذر) لموقع الويب.

أما الأمر التالي فهو الدالة التي تعالج طلب http GET، والتي تسمى index اصطلاحًا لتوافق تسمية ملف index.htm، غير أن المثير للاهتمام هنا هو المزخرِف ‎@helloapp.route("/")‎ الذي يسبقها، والذي يخبر إطار Flask أن أي طلب إلى جذر الموقع / يجب توجيهه إلى التابع التالي المسمى index في حالتنا هذه، ويمكن توجيه عدة نقاط نهاية end points إلى نفس التابع بتكديس المزخرفات decorators فوق بعضها البعض، وقد ذكرنا من قبل أن توجيه نقاط النهاية هو إحدى التقنيات المستخدمة في أطر عمل الويب، وهذه هي طريقة إطار عمل Flask لتوجيهها.

تشغيل خادم ويب Flask

نبدأ تشغيل شيفرة Flask التي صارت جاهزةً الآن بالطريقة المعتادة، باستدعاء ما يلي من المجلد الذي يحوي التطبيق:

$ python hello.py

ينبغي أن نرى رسالةً تخبرنا أن الخادم يعمل وينتظر الطلبات:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

نستطيع الآن العودة إلى المتصفح لندخل العنوان الموجود في الرسالة:

http://127.0.0.1:5000/

ستظهر رسالة "Welcome from Flask"، وبهذا نكون قد بنينا أول تطبيق ويب بإطار عمل Flask.

مقدمة في القوالب

تتعامل شيفرة إطار Flask التي رأيناها حتى الآن مع مشاكل توسع التطبيقات، وزيادة حجمها، وبعض الفوضى التي تسببها برمجة CGI، إلا أنها لا تستطيع مقال الشيفرة عن HTML، فلا زلنا نكتب سلاسل HTML داخل شيفرة البرنامج، ولمعالجة تلك المشكلة نستخدم قوالب Flask.

والقوالب في إطار Flask ما هي إلا ملفات HTML ساكنة فيها محددات markers أو مواضع خاصة لاستقبال البيانات من التطبيق، وهي تشبه سلاسل التنسيق format strings التي في بايثون، فمثلًا نريد قالبًا يستطيع استقبال رسالة الترحيب في سلسلة، ثم يدرجها في قالب، سيكون هذا القالب كما يلي:


</span><span class="pln">Hello from Flask</span><span class="tag">

   {{message}}

إذا نظرنا إلى {{message}} فسنجد المواضع التي ذكرناها، فتلك الأقواس المزدوجة هي مواضع استقبال البيانات، والمتغير message هو اسم المتغير الذي سيدخله محرك القالب إلى HTML.

نحفظ المثال السابق في ملف باسم hello.htm داخل مجلد باسم templates في مجلد المشروع، واسم القالب مهم هنا لأنه المكان الذي يتوقع إطار Flask أن يجد فيه ملفات القوالب، يتبقى الآن بعض التعديلات على شيفرة بايثون الخاصة بنا لربطها بمحرك القوالب، وسنغير الشيفرة السابقة لتكون كما يلي:

from flask import Flask, render_template

helloapp = Flask(__name__)

@helloapp.route("/")
def index():
   return render_template("hello.htm", message="Hello again from Flask")

if __name__ == "__main__":
    helloapp.run()

الاختلاف الأول في تعليمة import، حيث غيرنا النمط لنستطيع استيراد الأسماء التي نحتاجها مباشرةً.

نلاحظ الآن اختفاء شيفرة HTML من ملف بايثون الخاص بنا، ونمرر الرسالة مثل سلسلة عادية إلى الدالة render_template مع اسم القالب، ونترك الباقي لإطار Flask، لكننا نريد أن نضمن مطابقة الوسائط المسماة في استدعاء هذه الدالة للأسماء التي في مواضع القالب، ثم نعرف كيف نقرأ البيانات الواردة من طلبات http لنستطيع تكرار نسخة CGI التي نفذناها من تطبيق "hello user".

استخدام Flask في مثال Hello User

نريد الآن تعديل التطبيق ليعمل مع استمارة HTML التي استخدمناها من قبل، فنبدأ بتحويل HTML إلى قالب نرسله عند تحديد المستخدم لنقطة نهاية "hello"، ولا نحتاج إلى إضافة أية محددات خاصة إلى HTML لأننا لا ندرج أي بيانات، لكن يجب تغيير الخاصية method للاستمارة إلى "POST"، وكذلك الخاصية action لتعكس منفذ إطار Flask -الذي هو 5000- ونقطة النهاية المطلوبة للرابط، والتي هي sayhello، ثم نحفظ ذلك في مجلد templates باسم helloform.htm ليستطيع إطار Flask العثور عليه، وسيبدو بعد تلك التعديلات كما يلي:



  
    </span><span class="pln">Hello user page</span><span class="tag">
  
  
    Hello, welcome to our website!8000
     name="hello" 
          method="POST" 
          action="http://localhost:5000/sayhello">
      Please tell us your name:
       type="text" id="username" name="username" 
             size="30" required autofocus/>
       type="submit" value="Submit" />

كتابة شيفرة Flask

نحتاج الآن لإضافة تابعين جديدين إلى تطبيقنا، يعرض الأول منهما قالب helloform.htm، بينما يرد الثاني على طلب إرسال الاستمارة، ونلاحظ أن الدالة الثانية ستستخدم قالب hello.htm الأصلي، ولم نضف شيئًا سوى كتابة سلسلة رسالة جديدة:

from flask import Flask, render_template, request

helloapp = Flask(__name__)

@helloapp.route("/")
def index():
   return render_template("hello.htm", message="Hello again from Flask")

@helloapp.route("/hello")
def hello():
   return render_template("helloform.htm")

@helloapp.route("/sayhello", methods=['POST'])
def sayhello():
   name=request.form['username']
   return render_template("hello.htm", message="Hello %s" % name)

if __name__ == "__main__":
    helloapp.run()

لاحظ أننا اضطررنا إلى إضافة request إلى قائمة العناصر المستورَدة لأننا نستخدمه للوصول إلى بيانات طلب http، كما عدلنا مزخرف معالج sayhello ليشير إلى أنه يستطيع معالجة طلبات النوع POST -وقد كان الافتراضي طلبات GET- حيث نستخرج بيانات username داخل الدالة من الاستمارة، وندخلها في السلسلة التي نعيدها إلى قالب hello.htm. أما معالج hello فهو أبسط من ذلك، إذ يرسل قالب helloform.htm إلى المستخدم.

إذا شغّلنا الشيفرة الآن فسيعمل الخادم، وإذا كتبنا العنوان التالي:

http://localhost:5000/hello

فسنرى نفس الاستمارة التي كانت لدينا في مثال CGI من قبل (لاحظ أن كلمة localhost هي اسم بديل لـ 127.0.0.1، ويمكن تذكرها بسهولة أكثر)، فإذا ملأنا الاستمارة وضغطنا زر Submit؛ فستظهر لنا رسالة ترحيبية.

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

دليل جهات الاتصال

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

إعداد المشروع

لمشاريع إطار Flask عادةً بنية محددة، فهي تأخذ صورة هرمية مجلد، حيث يكون اسم المشروع في الأعلى ، متبوعًا بمجلد static للملفات الساكنة مثل الصور وملفات CSS، ومجلد templates للقوالب، وحزمة بايثون اسمها في الغالب هو اسم المشروع، والتي هي مجلد يحوي ملفًا اسمه ‎__init__.py يتحكم في ما تصدره الحزمة، كما تحتوي عادةً على ملف setup.py يُستخدم لتثبيت الحزمة إذا كانت موزَّعةً من فهرس حزم بايثون Python Package Index أو PyPI اختصارًا، وتسهل هذه الهرمية توزيع التطبيق باستخدام أدوات بايثون القياسية مثل pip.

لكننا لن نوزع التطبيق في حالة دليل جهات الاتصال، لذا سنكتفي بترتيب بسيط مبني على المجلدات القياسية الثلاثة، إضافةً إلى مجلد رابع لملف قاعدة البيانات:

addressbook
    static
    templates
    db

سننسخ ملف قاعدة البيانات من المقال السابق إلى مجلد db هنا.

إنشاء قالب HTML

سيكون لدينا صفحة ويب واحدة تتكون من استمارة بسيطة لإدخال البيانات، فيها ثلاثة أزرار هي Create وFind وList all، حيث سيستخدم زر Create البيانات التي في الاستمارة لإضافة مدخل جديد إلى قاعدة البيانات، ويعرض زر Find قائمةً بجميع العناوين المطابقة للبيانات التي في الاستمارة، بينما يعرض زر List all القائمة الكاملة للعناوين.

سنستخدم مزيةً جديدةً لمحرك القوالب، وهي القدرة على تكرار صفوف HTML وفقًا لمجموعة بيانات الدخل، وسيُدمج هذا مع عنصر HTML جديد هو وسم الجدول

وعائلته التي سنستخدمها لعرض قائمة العناوين.

وسيبدو القالب كما يلي:



  
    </span><span class="pln">Flask Address Book</span><span class="tag">
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1">
 
    
    
  
 
  
    
    Address Book Website
    
     class="content">
       name="hello" 
            method="POST" 
            action="http://localhost:5000/display">
      Address
            First name:
               type="text" id="First" name="First"
                required autofocus/>
            
            Second Name:
                type="text" id="Last" name="Last"
                      required />
            
             />
            House Number:
                    type="text" id="House" name="House" />
            
            Street:
                    type="text" id="Street" name="Street"
                          required />
            
             />
            District:
                    type="text" id="District" name="District" />
            
            Town:
                type="text" id="Town" name="Town"
                      required />
            
             />
            Postcode:
                type="text" id="Postcode" name="Postcode"
                      required />
            
            Phone:
                type="text" id="Phone" name="Phone" />
            
      
       class="buttons">
            class="button" type="submit" value="List All"  />
            class="button" type="submit" name="Filter" value="Filter" />
            class="button" type="submit" name="Add" value="Add" />
            class="button" type="reset" value="Clear" />
      
      
       />
       class="data">
          id="addresses">

{% for row in book %} {% endfor %}

First	Second	House#	Street	District	Town	Postcode	Phone
{{row.First}}	{{row.Last}}	{{row.House}}	{{row.Street}}	{{row.District}}	{{row.Town}}	{{row.PostCode}}	{{row.Phone}}

يوجد عدد كبير من العناصر الجديدة هنا، بما في ذلك قسم

البرمجة: Flask