تعلّم مكدس FARM: بناء تطبيقات CRUD باستخدام FastAPI وReact وMongoDB

ما هو مكدس FARM ولماذا يلفت انتباه المطورين؟

يشير مكدس FARM إلى مجموعة تقنيات تتكوّن من FastAPI وReact وMongoDB. ويُعد هذا المزيج خيارًا عمليًا لبناء تطبيقات ويب حديثة بسرعة وكفاءة، خاصة عند الرغبة في تطوير واجهات برمجية سريعة، وربطها بواجهة استخدام تفاعلية، مع قاعدة بيانات مرنة وسهلة التوسع.

تتمثل الفكرة الأساسية في توزيع الأدوار بوضوح:

• FastAPI: لإدارة منطق الخادم وبناء واجهات API.
• React: لإنشاء الواجهة الأمامية الديناميكية.
• MongoDB: لتخزين البيانات بصيغة مرنة تعتمد على المستندات.

هذا المكدس يُنظر إليه أحيانًا على أنه بديل أبسط من بعض المكدسات الشائعة مثل MERN، خصوصًا لمن يفضّلون لغة Python في الخلفية بدلًا من Node.js.

ماذا ستتعلم من مشروع FARM Stack؟

الفكرة العملية في هذا المشروع هي بناء تطبيق CRUD بسيط، أي تطبيق يدعم العمليات الأربع الأساسية على البيانات:

1. الإنشاء Create
2. القراءة Read
3. التحديث Update
4. الحذف Delete

ومن خلال هذا النوع من المشاريع، ستفهم دورة انتقال البيانات كاملة:

• الواجهة الأمامية في React ترسل طلبات HTTP.
• الخادم المبني بـ FastAPI يستقبل الطلبات ويعالجها.
• قاعدة بيانات MongoDB تحفظ البيانات أو تعيدها عند الطلب.
• تعود الاستجابة إلى الواجهة لتحديث المحتوى المعروض للمستخدم.

لماذا يُعد FastAPI خيارًا ممتازًا في الواجهة الخلفية؟

FastAPI هو إطار ويب حديث وسريع في لغة Python، صُمم لبناء واجهات API بكفاءة عالية. من أهم أسباب انتشاره أنه يوفّر تجربة تطوير مرنة، مع أداء قوي، ودعم ممتاز للبرمجة غير المتزامنة.

أبرز مزايا FastAPI

• أداء مرتفع بفضل دعمه لـ ASGI.
• سهولة بناء واجهات REST API.
• توثيق تلقائي تفاعلي عبر Swagger UI.
• دعم قوي للأنواع Type Hints والتحقق من البيانات.
• تكامل ممتاز مع النمط غير المتزامن باستخدام async وawait.

ومن النقاط المهمة أن FastAPI يسهّل اختبار المسارات والطلبات مثل GET وPOST وPUT وDELETE مباشرة من صفحة التوثيق التفاعلي، وهو ما يسرّع التطوير ويقلّل الأخطاء.

ما المقصود بـ ASGI؟

ASGI هو اختصار لعبارة Asynchronous Server Gateway Interface، وهو معيار يربط بين التطبيق والخادم بطريقة تدعم التزامن والسرعة في معالجة الطلبات. هذه البنية تمنح FastAPI أفضلية واضحة عند بناء تطبيقات تحتاج إلى استجابة سريعة وعدد أكبر من الاتصالات المتزامنة.

دور React في بناء الواجهة الأمامية

React من أشهر مكتبات JavaScript لتطوير واجهات الاستخدام، وهي مناسبة جدًا لتطبيقات الصفحة الواحدة SPA. في مشروع FARM، تتولى React عرض المهام، إرسال البيانات إلى الخادم، واستقبال النتائج وتحديث الواجهة دون إعادة تحميل الصفحة بالكامل.

لماذا React مناسبة لهذا المشروع؟

• تعتمد على مكونات قابلة لإعادة الاستخدام.
• تتعامل بسهولة مع الحالة عبر useState.
• تجلب البيانات من الخادم عبر useEffect.
• تتكامل بسلاسة مع مكتبات مثل axios وbootstrap.

وبفضل هذا النموذج، يصبح تطوير واجهة إدارة مهام أو أي لوحة تحكم تفاعلية أسرع وأكثر تنظيمًا.

لماذا نستخدم MongoDB لتخزين البيانات؟

MongoDB نظام إدارة قواعد بيانات من نوع NoSQL، ويعتمد على المستندات بدل الجداول التقليدية الموجودة في قواعد البيانات العلائقية. هذا يجعل التعامل مع البيانات أكثر مرونة، خاصة في التطبيقات الحديثة التي تتغير بنيتها بمرور الوقت.

الفرق بين SQL وMongoDB

في MongoDB، يتكوّن كل سجل من مستند يحتوي على حقول مثل id وtitle وdescription. وهذا النموذج ملائم جدًا لتطبيقات المهام والقوائم والإدخالات السريعة.

فكرة المشروع التطبيقي: تطبيق مهام يدعم CRUD

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

• إضافة مهمة جديدة.
• عرض جميع المهام.
• جلب مهمة محددة.
• تعديل بيانات مهمة موجودة.
• حذف مهمة عند الانتهاء منها.

ورغم بساطة الفكرة، فإنها تغطي سلسلة متكاملة من المهارات التي يحتاجها مطور الويب في المشاريع الحقيقية.

المتطلبات الأساسية قبل بدء التنفيذ

قبل العمل على المشروع، ستحتاج إلى تجهيز بيئة التطوير التالية:

• تثبيت Python.
• تثبيت Node.js وnpm.
• إنشاء حساب في MongoDB Atlas إذا رغبت باستخدام قاعدة بيانات سحابية.
• أو تثبيت MongoDB Community Server للعمل محليًا.
• تثبيت MongoDB Compass لتصفّح البيانات بصريًا.
• تثبيت MongoDB Shell عند الحاجة للتعامل عبر سطر الأوامر.

ماذا يوفّر لك MongoDB Atlas؟

الخطة المجانية في MongoDB Atlas مناسبة للتجارب والتعلّم، إذ تمنحك عنقودًا مجانيًا Free Tier مع سعة تخزين محدودة، إضافة إلى أدوات إدارة واتصال سهلة نسبيًا.

بناء الواجهة الخلفية باستخدام FastAPI

تبدأ الرحلة عادة بإنشاء مجلد المشروع، ثم تخصيص مجلد مستقل للواجهة الخلفية. بعد ذلك تُثبت الاعتمادات الأساسية عبر ملف requirements.txt.

الاعتمادات الأساسية في الخلفية

• fastapi
• uvicorn
• motor

مكتبة motor تُستخدم هنا باعتبارها برنامج تشغيل غير متزامن للتعامل مع MongoDB داخل تطبيقات Python.

ملفات الخلفية الأساسية

عادة ستجد هيكلًا مبدئيًا شبيهًا بما يلي:

• main.py لإدارة المسارات والمنطق العام.
• database.py للتعامل مع قاعدة البيانات.
• model.py لتعريف نموذج البيانات.

إعداد CORS بين الواجهة الأمامية والخلفية

عند تشغيل React على منفذ مثل 3000 وتشغيل FastAPI على منفذ مثل 8000، تصبح لدينا بيئتان مختلفتان من حيث المصدر Origin. لذلك يجب تفعيل CORS للسماح للواجهة الأمامية بإرسال الطلبات إلى الخادم.

المقصود بالمصدر هو الجمع بين:

• البروتوكول مثل http أو https.
• اسم النطاق مثل localhost.
• رقم المنفذ مثل 3000 أو 8000.

مثال على إعداد أساسي في FastAPI

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
async def root():
    return {"message": "ping pong"}

هذا المثال يوضح أبسط نقطة انطلاق للتحقق من أن الخادم يعمل بنجاح.

تصميم واجهات API لعمليات المهام

بعد إعداد الخادم، تأتي خطوة تعريف المسارات اللازمة للتعامل مع المهام.

المسارات المطلوبة غالبًا

• GET /api/todo لجلب جميع المهام.
• GET /api/todo/{title} أو {id} لجلب مهمة محددة.
• POST /api/todo لإضافة مهمة جديدة.
• PUT /api/todo/{title} لتعديل مهمة.
• DELETE /api/todo/{title} لحذف مهمة.

هذا التنظيم يجعل الواجهة البرمجية واضحة، كما يساعد على اختبارها بسهولة عبر Swagger UI.

تعريف نموذج البيانات باستخدام Pydantic

لضمان أن البيانات المرسلة إلى الخادم منظمة وصحيحة، يُستخدم Pydantic عبر إنشاء نموذج يصف الحقول المطلوبة.

from pydantic import BaseModel

class Todo(BaseModel):
    title: str
    description: str

هذا النموذج يفرض وجود عنوان ووصف لكل مهمة، كما يسهّل توليد مخططات JSON Schema تلقائيًا داخل التوثيق.

ربط FastAPI بقاعدة MongoDB

بعد تعريف النموذج، يتم إعداد الاتصال بقاعدة البيانات. عند العمل محليًا، يستخدم كثير من المطورين العنوان الافتراضي:

mongodb://localhost:27017

بعد الاتصال، يمكنك إنشاء قاعدة بيانات مثل todo_list وإنشاء مجموعة باسم todo.

import motor.motor_asyncio

client = motor.motor_asyncio.AsyncIOMotorClient("mongodb://localhost:27017")
database = client.todo_list
collection = database.todo

وظائف قاعدة البيانات الأساسية

من الأفضل عزل منطق قاعدة البيانات في ملف مستقل. ومن أشهر الوظائف التي ستحتاج إليها:

• جلب مهمة واحدة عبر find_one().
• جلب جميع المهام عبر find().
• إضافة مهمة عبر insert_one().
• تحديث مهمة عبر update_one().
• حذف مهمة عبر delete_one().

هذه الوظائف تمثل قلب التطبيق الحقيقي، لأنها تربط الطلبات القادمة من الخادم بعمليات التخزين والاسترجاع داخل MongoDB.

إدارة الاستثناءات وتحسين موثوقية API

من الممارسات المهمة عند بناء أي واجهة برمجية استخدام HTTPException لتقديم رسائل مفهومة وأكواد حالة واضحة. على سبيل المثال:

• 404 عندما لا تكون المهمة موجودة.
• 400 عند وجود طلب غير صالح.

هذا الأمر لا يحسّن تجربة المطور فقط، بل يجعل الواجهة البرمجية أكثر احترافية وأسهل في الاستهلاك من أي تطبيق عميل.

اختبار الخلفية عبر Swagger UI

من أفضل مزايا FastAPI وجود واجهة توثيق تفاعلية مدمجة. فور تشغيل الخادم، يمكنك غالبًا زيارة مسار مثل /docs لاختبار جميع المسارات مباشرة.

عبر هذه الواجهة ستتمكن من:

• تنفيذ طلب POST لإضافة مهمة.
• تنفيذ طلب GET لاسترجاع جميع المهام.
• تجربة طلب DELETE لحذف مهمة.
• التأكد من أن البيانات وصلت فعليًا إلى MongoDB.

إنشاء الواجهة الأمامية باستخدام React

بعد التأكد من نجاح الخلفية، تبدأ مرحلة بناء الواجهة الأمامية. يمكن إنشاء المشروع عبر أداة Create React App ثم تثبيت المكتبات اللازمة مثل axios وbootstrap.

الحزم الأساسية في الواجهة الأمامية

• axios لإرسال الطلبات إلى الخادم.
• bootstrap لتنسيق الواجهة بسرعة.

npm install axios bootstrap

الفكرة العامة للواجهة

تطبيق المهام في React يتضمن عادة العناصر التالية:

• حقل إدخال للعنوان.
• حقل إدخال للوصف.
• زر لإضافة المهمة.
• قائمة لعرض جميع المهام.
• زر حذف لكل مهمة.

هذا التصميم البسيط كافٍ لتوضيح مبدأ التواصل بين الواجهة والـ API.

استخدام useState وuseEffect داخل React

يعتمد هذا النوع من المشاريع عادة على أداتين أساسيتين:

إدارة الحالة عبر useState

تُستخدم useState لتخزين البيانات الحالية داخل الواجهة، مثل:

• قائمة المهام.
• قيمة العنوان.
• قيمة الوصف.

جلب البيانات عند التحميل عبر useEffect

تُستخدم useEffect لتنفيذ طلبات أولية بعد تحميل المكوّن، مثل جلب جميع المهام من الخادم وعرضها مباشرة للمستخدم.

useEffect(() => {
  axios.get("http://localhost:8000/api/todo")
    .then((response) => {
      setTodoList(response.data)
    })
}, [])

هذا النمط شائع جدًا في تطبيقات React التي تعتمد على البيانات الخارجية.

إرسال المهام الجديدة إلى الخادم عبر axios

عند نقر المستخدم على زر الإضافة، يجب إرسال طلب POST يحتوي على البيانات المُدخلة.

const addTodoHandler = () => {
  axios.post("http://localhost:8000/api/todo", {
    title: title,
    description: description,
  }).then((response) => {
    console.log(response)
  })
}

بعد نجاح العملية، من الأفضل تحديث القائمة مباشرة أو إعادة جلب البيانات حتى يرى المستخدم النتيجة فورًا.

تنظيم المكونات في الواجهة الأمامية

من الأفضل عدم وضع كل المنطق داخل ملف واحد. لذلك يمكن تقسيم الواجهة إلى مكونات مستقلة، مثل:

• مكوّن Todo لعرض مهمة واحدة.
• مكوّن TodoListView لعرض قائمة المهام كاملة.

هذا التقسيم يجعل المشروع أكثر قابلية للصيانة والتوسع، خاصة إذا رغبت لاحقًا في إضافة ميزات مثل التعديل أو التصنيف أو البحث.

مثال منطقي على مكوّن عنصر المهمة

يمكن أن يعرض مكوّن المهمة عنوانها ووصفها، مع زر حذف يرسل طلب DELETE استنادًا إلى العنوان أو المعرّف.

كيف تتدفق البيانات داخل تطبيق FARM؟

لفهم الصورة الكاملة، إليك تسلسل العمل داخل التطبيق:

1. يكتب المستخدم عنوان المهمة ووصفها في واجهة React.
2. تُرسل الواجهة طلب HTTP إلى خادم FastAPI.
3. يستقبل الخادم الطلب ويتحقق من البيانات.
4. ينفّذ الخادم عملية الإدراج أو القراءة أو التعديل أو الحذف داخل MongoDB.
5. تعيد قاعدة البيانات النتيجة إلى الخادم.
6. يرسل الخادم الاستجابة إلى الواجهة الأمامية.
7. تحدّث React الواجهة دون إعادة تحميل الصفحة كاملة.

هذا التدفّق يُعد أساسًا لفهم معظم تطبيقات الويب الحديثة.

أفضل الممارسات عند تنفيذ مشروع مماثل

• استخدم أسماء مسارات واضحة ومتسقة.
• فضّل الاعتماد على id بدل العنوان عند التحديث والحذف في التطبيقات الكبيرة.
• تحقق من المدخلات قبل تخزينها.
• افصل منطق الواجهة عن منطق البيانات.
• احرص على رسائل خطأ واضحة ومفهومة.
• اختبر الواجهة الخلفية منفصلة قبل ربطها بالواجهة الأمامية.

نقاط تقنية تستحق الانتباه

الاعتماد على العنوان كمفتاح

في النموذج التعليمي قد يُستخدم الحقل title للوصول إلى المهمة أو حذفها، لكن في المشاريع العملية يُفضّل استخدام المعرّف _id أو معرف مخصص، لأن العنوان قد يتكرر أو يتغير.

أهمية التزامن في FastAPI

استخدام الدوال غير المتزامنة مع motor يمنح التطبيق قدرة أفضل على التعامل مع الطلبات المتعددة بكفاءة، وهو أمر مهم عندما يبدأ عدد المستخدمين أو العمليات في الازدياد.

تجربة التطوير السريعة

من المزايا الواضحة في هذا المكدس أنك تستطيع تطوير كل جزء بشكل مستقل، ثم وصله لاحقًا بسلاسة. كما أن وجود توثيق تلقائي في الخلفية ومكونات مرنة في الواجهة يختصر وقتًا طويلًا في التنفيذ.

متى يكون مكدس FARM مناسبًا لك؟

قد يكون هذا المكدس خيارًا ممتازًا في الحالات التالية:

• إذا كنت مرتاحًا مع Python وتريد بديلاً عن Node.js في الخلفية.
• إذا كنت بحاجة إلى واجهة أمامية حديثة باستخدام React.
• إذا كانت بياناتك مرنة وتناسب نموذج المستندات في MongoDB.
• إذا كنت تريد بناء نماذج أولية MVP بسرعة.
• إذا كنت تتعلم تطوير تطبيقات الويب المتكاملة لأول مرة.

الخلاصة التقنية

مكدس FARM يجمع بين سرعة التطوير، ووضوح الهيكلة، وسهولة بناء تطبيقات ويب متكاملة. اختيار FastAPI في الخلفية يمنحك أداءً ممتازًا وتجربة تطوير مريحة، بينما توفّر React واجهة مرنة وحديثة، وتكمل MongoDB الصورة بتخزين مرن مناسب لكثير من الاستخدامات. من الناحية التقنية، هذا المكدس مناسب جدًا للتعلّم وبناء مشاريع عملية صغيرة ومتوسطة، كما أنه يشكّل قاعدة قوية لفهم آلية العمل بين الواجهة الأمامية والخلفية وقاعدة البيانات ضمن تطبيق واحد مترابط.