بناء تطبيق ويب بسيط
أنشئوا أول تطبيق ويب لكم باستخدام Flask
بناء تطبيق ويب بسيط درس مجاني في Python For Kids على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Python For Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Python For Kids 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 For Kids، انتقل إلى CoddyKit PRO. تتضمن دورة Python For Kids 4 دروس في المجموع.
ماذا ستتعلم في «بناء تطبيق ويب بسيط»؟
أنشئوا أول تطبيق ويب لكم باستخدام Flask تتمرن على Python For Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Python For Kids؟
لا تُشترط خبرة سابقة. Python For Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «بناء تطبيق ويب بسيط»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Python For Kids هذا؟
نعم. كل درس في Python For Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات أطر الويب
- مقدمة إلى Flask
- بناء تطبيق ويب بسيط
- ربط Python بقواعد البيانات