Python Academy · درس

إنشاء تطبيق ويب بسيط

أنشئ أول تطبيق ويب لك باستخدام Flask

إنشاء تطبيق ويب بسيط درس مجاني في Python Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Python Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Python Academy 4 دروس في المجموع.

بناء تطبيق ويب بسيط

والآن بعد أن تعلّمتم أساسيات Flask، حان وقت بناء تطبيق ويب بسيط. سيتضمن هذا التطبيق مسارات متعددة وقوالب HTML وبعض التفاعلية.

في هذا الدرس، سننشئ تطبيق ويب أساسيًا خطوةً بخطوة.

الخطوة 1: إعداد المشروع

أنشئوا مجلدًا جديدًا لمشروعكم وهيّئوا بيئة افتراضية:

python -m venv venv

فعّلوا البيئة الافتراضية وثبّتوا Flask:

pip install flask

# Setting up the project
from flask import Flask

app = Flask(__name__)
print("Project setup complete")

الخطوة 2: إنشاء بنية التطبيق

أنشئوا المجلدات والملفات التالية:

app.py: ملف التطبيق الرئيسي.
templates/: مجلد قوالب HTML.
static/: مجلد للملفات الثابتة مثل CSS والصور.

الخطوة 3: تعريف المسارات

في app.py، عرّفوا مسارات للصفحة الرئيسية وصفحة نبذة عن التطبيق:

# Defining routes
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to My Web App</h1>'

@app.route('/about')
def about():
    return '<h1>About This App</h1>'

if __name__ == '__main__':
    app.run(debug=True)

الخطوة 4: إضافة القوالب

أنشئوا ملف HTML باسم home.html داخل مجلد templates/:

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Web App</h1>
    <a href="/about">About</a>
</body>
</html>

الخطوة 5: استخدام render_template

حدّثوا مساري home وabout لاستخدام القوالب:

# Using templates
from flask import render_template

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

الخطوة 6: إضافة الملفات الثابتة

أنشئوا ملف style.css داخل مجلد static/ واربطوه في home.html:

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

الخطوة 7: تشغيل التطبيق

شغّلوا تطبيق Flask:

python app.py

افتحوا متصفحكم وانتقلوا إلى http://127.0.0.1:5000/ لرؤية تطبيق الويب وهو يعمل.

الأخطاء الشائعة عند بناء تطبيقات الويب

إليكم بعض الأخطاء التي ينبغي تجنّبها:

عدم تنظيم بنية التطبيق، مثل عدم وجود مجلدي templates/ وstatic/.
كتابة عناوين URL بشكل ثابت بدلًا من استخدام url_for().
عدم اختبار التطبيق في وضع تصحيح الأخطاء.

ماذا تعلّمنا؟

في هذا الدرس، تعلّمتم:

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

أحسنتم! لننتقل إلى الموضوع التالي.

الأسئلة الشائعة

هل درس «إنشاء تطبيق ويب بسيط» مجاني؟

نعم — نص درس «إنشاء تطبيق ويب بسيط» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Python Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Python Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء تطبيق ويب بسيط»؟

أنشئ أول تطبيق ويب لك باستخدام Flask تتمرن على Python Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Python Academy؟

لا تُشترط خبرة سابقة. Python Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «إنشاء تطبيق ويب بسيط»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Python Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Python Academy