نبدأ إذن المشروع الأول: تطبيق الملاحظات (Notes App) باستخدام Flask + HTML + CSS + Bootstrap،
وسيكون هذا المشروع تطبيقي بالكامل خطوة بخطوة، مثل سلسلة تعليمية مصغّرة.
🧠 مقدمة المشروع: تطبيق الملاحظات (Flask Notes App)
🎯 الهدف:
إنشاء تطبيق ويب بسيط يتيح للمستخدمين:
- إضافة ملاحظات جديدة.
- عرض جميع الملاحظات.
- حذف أو تعديل الملاحظات.
- واجهة أنيقة باستخدام Bootstrap.
- قاعدة بيانات لتخزين الملاحظات (SQLite).
🧩 الأدوات المستخدمة:
- Flask — لإنشاء التطبيق.
- SQLite — لتخزين الملاحظات.
- Bootstrap 5 — لتصميم واجهة أنيقة ومتجاوبة.
- Jinja2 — لربط البيانات في صفحات HTML.
🪜 الدرس الأول: إنشاء المشروع وتهيئة الهيكل العام
📁 1. أنشئ مجلد المشروع:
افتح مجلدك المخصص للمشاريع ثم أنشئ مجلد باسم:
flask_notes_app
داخله أنشئ الملفات والمجلدات التالية:
flask_notes_app/
│
├── app.py
├── notes.db
│
├── templates/
│ ├── base.html
│ ├── index.html
│ ├── add_note.html
│
└── static/
└── style.css
⚙️ 2. إعداد Flask وتشغيل أول صفحة
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
🧱 3. إنشاء الصفحة الرئيسية (index.html)
templates/index.html
{% extends 'base.html' %}
{% block content %}
<div class="container mt-5">
<h2 class="text-center text-primary">مرحبًا بك في تطبيق الملاحظات</h2>
<p class="text-center">ابدأ بإضافة ملاحظاتك اليومية الآن!</p>
<div class="text-center mt-4">
<a href="/add" class="btn btn-success">إضافة ملاحظة جديدة</a>
</div>
</div>
{% endblock %}
🧩 4. قالب التصميم العام (base.html)
templates/base.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق الملاحظات</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">الملاحظات</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="/">الرئيسية</a></li>
<li class="nav-item"><a class="nav-link" href="/add">إضافة ملاحظة</a></li>
</ul>
</div>
</div>
</nav>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
🎨 5. ملف CSS بسيط
static/style.css
body {
background-color: #f8f9fa;
font-family: 'Cairo', sans-serif;
}
h2 {
font-weight: bold;
}
.btn {
border-radius: 20px;
}
🚀 تشغيل التطبيق:
افتح الطرفية (Terminal) داخل المجلد وشغل الأمر:
python app.py
ثم افتح المتصفح على:
http://127.0.0.1:5000
سترى الصفحة الرئيسية لتطبيق الملاحظات 🎉
🧠 تمرين الدرس الأول:
أضف في القائمة العلوية (navbar) رابط جديد بعنوان “حول التطبيق” يقود إلى صفحة
/aboutتحتوي على وصف بسيط لتطبيق الملاحظات.
حل تمرين الدرس الأول من مشروع Flask Notes App (تطبيق الملاحظات)، حيث نضيف صفحة “حول التطبيق” (About) إلى الموقع.
سنعدّل 3 ملفات فقط:
app.py, templates/base.html, وملف HTML جديد باسم about.html.
✅ حل تمرين الدرس الأول
⚙️ أولاً: تحديث ملف app.py
نضيف مسار جديد (route) لصفحة “حول التطبيق”:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)
🧩 ثانيًا: تعديل القائمة العلوية في ملف templates/base.html
نضيف رابط “حول التطبيق” داخل قائمة الروابط:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">الملاحظات</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="/">الرئيسية</a></li>
<li class="nav-item"><a class="nav-link" href="/add">إضافة ملاحظة</a></li>
<li class="nav-item"><a class="nav-link" href="/about">حول التطبيق</a></li>
</ul>
</div>
</div>
</nav>
🧱 ثالثًا: إنشاء صفحة “حول التطبيق”
templates/about.html
{% extends 'base.html' %}
{% block content %}
<div class="container mt-5">
<h2 class="text-primary text-center">حول تطبيق الملاحظات</h2>
<p class="mt-4 fs-5 text-center">
هذا التطبيق تم تطويره باستخدام <strong>Flask</strong> لتسجيل وحفظ الملاحظات اليومية بسهولة وسرعة.
</p>
<p class="text-center">
يمكنك إضافة الملاحظات، تعديلها، أو حذفها متى شئت.
الهدف من هذا المشروع هو تعليم بناء تطبيقات ويب تفاعلية بخطوات عملية وواضحة.
</p>
<div class="text-center mt-4">
<a href="/" class="btn btn-outline-primary">العودة إلى الصفحة الرئيسية</a>
</div>
</div>
{% endblock %}
🌟 النتيجة بعد التطبيق:
عند تشغيل الموقع والضغط على “حول التطبيق” من شريط القائمة،
ستظهر صفحة جميلة تحتوي على وصف لتطبيق الملاحظات وزر للعودة للرئيسية.
