🧩 الدرس 1: مقدمة إلى Flask – إنشاء أول موقع تفاعلي

🚀 ما هو Flask؟

Flask هو إطار عمل (Framework) خفيف وسريع بلغة Python يُستخدم لتطوير تطبيقات الويب بسهولة.
يُعد من الإطارات البسيطة والمحبوبة لأنه:

• لا يفرض عليك بنية محددة للمشروع.
• سهل التعلم.
• يدعم الإضافات (Extensions) مثل التعامل مع قواعد البيانات، تسجيل الدخول، الجلسات، وغيرها.
• مناسب جدًا لبناء مواقع صغيرة ومتوسطة الحجم.

---

🧠 المتطلبات قبل البدء

قبل أن تبدأ، تأكد أنك:

1. ثبّت Python (الإصدار 3.8 أو أحدث).
2. ثبّت مكتبة Flask باستخدام الأمر التالي في الطرفية (Terminal):

pip install flask

---

🏗️ إنشاء أول مشروع Flask

أنشئ مجلد باسم flask_app وضع داخله ملفًا باسم app.py.

افتح الملف واكتب الكود التالي:

from flask import Flask

# إنشاء تطبيق Flask
app = Flask(__name__)

# إنشاء أول صفحة
@app.route('/')
def home():
    return '<h1>مرحبًا بك في موقع Flask الأول!</h1>'

# تشغيل التطبيق
if __name__ == '__main__':
    app.run(debug=True)

---

⚙️ تشغيل التطبيق

في الطرفية (داخل مجلد المشروع)، اكتب:

python app.py

ستظهر لك رسالة مثل:

Running on http://127.0.0.1:5000/

افتح هذا الرابط في متصفحك وسترى:

مرحبًا بك في موقع Flask الأول!

---

💡 ما الذي حدث هنا؟

• Flask(__name__) أنشأ تطبيق ويب.
• @app.route('/') يعني أن هذا هو المسار الرئيسي للموقع.
• return '<h1>...</h1>' يعرض النص على الصفحة.
• app.run(debug=True) يجعل Flask يعمل في وضع التطوير، أي يحدث إعادة تشغيل تلقائي عند تعديل الكود.

---

🧭 تمرين عملي

🧩 المطلوب:
أضف صفحة ثانية بعنوان /about تحتوي على رسالة:

"هذا الموقع تم إنشاؤه بواسطة Flask لتعلم تطوير الويب."

---

✅ الحل الكامل

افتح الملف app.py الذي أنشأناه سابقًا، وعدّل الكود ليصبح كالتالي:

from flask import Flask

# إنشاء تطبيق Flask
app = Flask(__name__)

# الصفحة الرئيسية
@app.route('/')
def home():
    return '<h1>مرحبًا بك في موقع Flask الأول!</h1>'

# صفحة "حول"
@app.route('/about')
def about():
    return '''
    <h2>حول الموقع</h2>
    <p>هذا الموقع تم إنشاؤه بواسطة <b>Flask</b> لتعلم تطوير الويب.</p>
    <p>المطور: تامر أحمد</p>
    '''

# تشغيل التطبيق
if __name__ == '__main__':
    app.run(debug=True)

---

🔍 شرح الكود

• أضفنا مسار جديد باستخدام:

  @app.route('/about')
  

  وهذا يعني أن هذه الصفحة تظهر عندما تكتب /about في المتصفح.

• استخدمنا النص بين ''' للسماح بكتابة HTML على أكثر من سطر.

---

🎯 النتيجة

عند تشغيل التطبيق بالأمر:

python app.py

ثم فتح الرابط:
👉 http://127.0.0.1:5000/about

ستظهر صفحة بعنوان حول الموقع تحتوي على المعلومات التالية:

هذا الموقع تم إنشاؤه بواسطة Flask لتعلم تطوير الويب.
المطور: تامر أحمد