Flask
مقدمة عن Framework
Flask هو web framework مشهور في بايثون بيساعد المطورين في بناء تطبيقات الويب بسرعة وكفاءة. المعروف ببساطته ومرونته، بيخليه اختيار رائع سواء للمبتدئين أو المطورين المحترفين. Flask هو framework “مجهري” (micro-framework)، يعني بيقدم الخصائص الأساسية لتطوير الويب من غير ما يضيف تعقيدات أو قيود مش لازمة.
في المقالة دي ، هنتعرف على framework Flask بشكل مفصل، هنتكلم عن هيكل المجلدات بتاعه، وهنعمل مثال بسيط علشان نوضح إمكانياته.
إيه هو Flask؟
Flask هو framework خفيف بيخليك تبني تطبيقات ويب باستخدام بايثون. على عكس الframeworkا الكبيرة زي Django، Flask بيهتم بالبسيط والمرونة. مش بيشمل أدوات زي) ORM (Object Relational Mapping أو أدوات إدارة الفورمات، علشان تقدر تختار الأدوات اللي تناسب شغلك. Flask مثالي للتطبيقات الصغيرة والمتوسطة أو لبناء تطبيقات بسرعة.
Flask مبني على WSGI (Web Server Gateway Interface) ومحرك القوالب Jinja2. كمان فيه دعم مدمج للتوجيه، معالجة الطلبات، والردود.
ليه تختار Flask؟
⦁ البساطة: Flask بيحب البساطة، وبيخلي الأساسيات واضحة وسهلة.
⦁ المرونة: Flask بيسمحلك إنك تنظم مشروعك زي ما تحب. تقدر تضيف أو تشيل المكونات حسب احتياجات التطبيق.
⦁ التوثيق: Flask عنده توثيق ممتاز ومجتمع نشط، فلو واجهتك مشكلة هتلاقي مساعدة بسهولة.
⦁ قابلية التوسع: رغم إن Flask خفيف، إلا إنه يقدر يوسع مع التطبيقات الكبيرة باستخدام إضافات مختلفة.
هيكل مجلدات Flask
الهيكل المعتاد لمجلدات تطبيق Flask بيبقى كده:
my_flask_app/
├── app.py # ملف التطبيق الرئيسي
├── templates/ # المجلد الخاص بالقوالب HTML (قوالب Jinja2)
│ └── index.html # قالب HTML
├── static/ # المجلد الخاص بالملفات الثابتة (CSS، JavaScript، صور)
│ └── style.css # ملف CSS
├── venv/ # البيئة الافتراضية
├── requirements.txt # ملف بيحتوي على قائمة التبعيات
هنوضح كل جزء في الهيكل ده:
⦁ app.py: ده الملف اللي فيه بتبدأ تطبيق Flask بتاعك وبتحدد المسارات (routes) والمنطق بتاع التطبيق.
⦁ templates/: المجلد ده بيحتوي على قوالب HTML اللي هتستخدمها مع محرك القوالب Jinja2 .
⦁ static/: المجلد ده فيه الملفات الثابتة زي CSS و JavaScript والصور اللي مش هتتغير.
⦁ venv/: ده المجلد اللي فيه البيئة الافتراضية، واللي فيها التبعيات الخاصة بالتطبيق.
⦁ requirements.txt: ملف بيحط فيه كل الحزم (dependencies) اللي محتاجها علشان التطبيق يشتغل.
⦁ README.md: بيحتوي على معلومات عن المشروع، زي إزاي تبدأ وتتشغل التطبيق.
إعداد Flask
قبل ما نبدأ نكتب الكود، لازم نجهز مشروع Flask.
الخطوة 1: تثبيت Flask
أول حاجة لازم ننشئ بيئة افتراضية وندخل فيها Flask. افتح terminal واتباع الخطوات دي:
⦁ أنشئ مجلد جديد لمشروعك:

⦁ أنشئ بيئة افتراضية:

⦁ فعل البيئة الافتراضية:

⦁ ثبت Flask:
pip install flask
⦁ أنشئ ملف requirements.txt:

الخطوة 2: أنشئ ملف app.py
دلوقتي، هنعمل تطبيق Flask بسيط.
⦁ أنشئ ملف اسمه app.py في مجلد المشروع.
⦁ اكتب الكود ده:

هنشرح الكود:
⦁ إنشاء مثيل من Flask: إحنا بننشئ مثيل من فئة Flask (app = Flask(name)) واللي هيبقى تطبيق WSGI بتاعنا.
⦁ المسار (Route): بنحدد مسار باستخدام الـ @app.route()، المسار ‘/’ بيروح للـ home function اللي بتعرض قالب HTML.
⦁ render_template: دي دالة بنستخدمها علشان نعرض ملفات HTML اللي في مجلد الـ templates/.
⦁ app.run(debug=True): ده بيشغل السيرفر في وضع الـ debug اللي بيسهل عليك التطوير وبيساعدك في التصحيح.
الخطوة 3: أنشئ قالب HTML
في مجلد templates/، أنشئ ملف اسمه index.html.
هنا قالب HTML بسيط باستخدام الـ Jinja2:

⦁ Jinja2 Syntax: بنستخدم الـ Jinja2 علشان نعرض قيمة متغيرة زي {{ title }} اللي جاية من ملف الـ Python .
⦁ الملفات الثابتة: بنربط ملف الـ CSS باستخدام
⦁ ( url_for’static’, filename=’style.css’) علشان نشير للـ static directory.
الخطوة 4: أضف ملف CSS ثابت
في مجلد static/، أنشئ ملف اسمه style.css واضغط فيه الكود ده:

ده هيساعد في تنسيق الصفحة علشان تبقى بشكل أحسن.
الخطوة 5: شغل تطبيق Flask
دلوقتي، تقدر تشغل التطبيق. في terminal، اكتب:

Flask هتشغل سيرفر على http://127.0.0.1:5000/. افتح المتصفح وروح على الرابط ده، هتلاقي الرسالة دي ظهرت على صفحتك:

الخاتمة
في المقالة دي ، اتعلمنا أساسيات framework Flask وعرفنا ازاي نعمل تطبيق ويب بسيط. شرحنا هيكل المشروع في Flask، وازاي ننشئ مشروع جديد، ونعرض صفحات HTML باستخدام محرك القوالب Jinja2 .
Flask هو خيار ممتاز لبناء تطبيقات ويب خفيفة، APIs، أو لتجربة أفكار جديدة بسرعة. مع تطور التطبيق، تقدر تضيف مسارات أكتر، وتستخدم قواعد بيانات، وتعالج الفورمات، وتستخدم إضافات Flask زي Flask-SQLAlchemy و Flask-WTF و Flask-Login .