بناء لوحة تحكم ويب تفاعلية: دليل شامل باستخدام Django و MongoDB وجداول Pivot

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

عند إتمام هذا الدليل، ستكونون قد أتقنتم المهارات التالية:

• إنشاء تطبيق Django أساسي من الصفر.
• استضافة بيانات MongoDB عن بُعد باستخدام خدمة MongoDB Atlas السحابية.
• استيراد البيانات بصيغتي JSON و CSV إلى قاعدة بيانات MongoDB.
• دمج أداة قوية لإعداد التقارير ضمن تطبيق Django الخاص بكم.

لنبدأ رحلتنا التقنية! 🚀

المتطلبات الأساسية والأدوات المستخدمة

قبل الغوص في تفاصيل التنفيذ، من الضروري التأكد من توفر بعض المتطلبات الأساسية ومعرفة الأدوات التي سنستخدمها.

المتطلبات الأساسية

• معرفة أساسية بتطوير الويب.
• إتقان جيد للغة البرمجة Python.
• خبرة أولية مع قواعد البيانات من نوع NoSQL (مثل MongoDB).

الأدوات الرئيسية

• Django: إطار عمل ويب عالي المستوى ومفتوح المصدر مكتوب بلغة Python، يسهل بناء تطبيقات الويب المعقدة بسرعة.
• MongoDB Atlas: خدمة قواعد بيانات سحابية متكاملة ومُدارة بالكامل لتطبيقات الويب الحديثة. سنستخدمها لاستضافة قاعدة بيانات MongoDB الخاصة بنا.
• Flexmonster Pivot Table & Charts: مكون ويب مكتوب بلغة JavaScript متخصص في إعداد التقارير وتصور البيانات. سيتولى هذا المكون مهام عرض البيانات على جانب العميل.
• MongoDB Connector for Flexmonster: أداة تعمل على جانب الخادم لضمان اتصال سريع وفعال بين Flexmonster Pivot Table وقاعدة بيانات MongoDB.
• PyCharm Community Edition: بيئة تطوير متكاملة (IDE) مجانية وموصى بها لتطوير Python، حيث توفر ميزات قوية لإدارة المشاريع والبيئات الافتراضية.
• بيانات Kaggle: سنستخدم مجموعة بيانات تجريبية من Kaggle لإثراء تقاريرنا.

إنشاء مشروع Django

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

ابدأوا بفتح المجلد الذي ترغبون في إنشاء المشروع فيه. ثم، افتحوا سطر الأوامر (console) ونفذوا الأمر التالي لإنشاء مشروع Django جديد:

django-admin startproject django_reporting_project

بعد ذلك، انتقلوا إلى دليل المشروع الذي تم إنشاؤه للتو:

cd django_reporting_project

لنتأكد من أن كل شيء يعمل كما هو متوقع. قوموا بتشغيل خادم Django للتطوير:

python manage.py runserver

بشكل افتراضي، سيبدأ خادم التطوير بالعمل على المنفذ 8000. افتحوا المتصفح وتوجهوا إلى العنوان http://127.0.0.1:8000/. إذا رأيتم صاروخ Django الشهير، فأنتم على المسار الصحيح! 🎉

إنشاء تطبيق (App) داخل مشروع Django

الآن حان الوقت لإنشاء تطبيقنا الذي سيتضمن ميزات إعداد التقارير. إذا كنتم غير متأكدين من الفرق بين المشاريع والتطبيقات في Django، فإليكم مرجع سريع: المشروع هو الحاوية الكبرى التي تضم الإعدادات العامة، بينما التطبيقات هي وحدات وظيفية مستقلة يمكن إعادة استخدامها. لنسمِ تطبيقنا dashboard:

python manage.py startapp dashboard

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

الخطوة التالية هي تسجيل التطبيق الجديد على مستوى المشروع. افتحوا الملف django_reporting_project/settings.py وأضيفوا اسم التطبيق ('dashboard') إلى نهاية قائمة INSTALLED_APPS:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashboard',
]

رائع! الآن أصبح المشروع على دراية بوجود تطبيقكم، ونحن مستعدون للانتقال إلى تهيئة قاعدة البيانات.

إعداد قاعدة بيانات MongoDB باستخدام MongoDB Atlas

دعونا نضع التطبيق جانباً مؤقتاً حتى ننتهي من ترتيب قاعدة البيانات. أقترح أن نتدرب على إنشاء قاعدة بيانات MongoDB عن بُعد من خلال استضافتها على MongoDB Atlas، وهي خدمة قواعد بيانات سحابية مصممة خصيصاً للتطبيقات. بدلاً من ذلك، يمكنكم إعداد قاعدة بيانات محلية والعمل بها بأي طريقة تناسبكم (مثل MongoDB Compass أو mongo shell).

بعد تسجيل الدخول إلى حساب MongoDB الخاص بكم، قوموا بإنشاء مشروعنا الأول. لنسمِه ECommerceData:

بعد ذلك، يمكنكم إضافة أعضاء إلى المشروع وتحديد صلاحياتهم إذا لزم الأمر، وذلك بدعوتهم عبر البريد الإلكتروني.

الخطوة التالية هي إنشاء مجموعة (Cluster):

اختاروا الخطة المناسبة. بما أننا في مرحلة التعلم، فإن الخطة المجانية البسيطة ستكون كافية لاحتياجاتنا. حددوا مزود السحابة والمنطقة الجغرافية، مع ملاحظة أن المناطق الموصى بها تُستنتج بناءً على موقعكم وتُعلّم بنجوم.

أعطوا اسماً ذا معنى لمجموعتكم الجديدة. تذكروا أن هذا الاسم لا يمكن تغييره لاحقاً. لنسمِها ReportingData:

تحضير البيانات

بينما تنتظرون إنشاء مجموعتكم، دعونا نلقي نظرة فاحصة على البيانات التي سنعمل بها. لهذا الدليل، سنستخدم مجموعة بيانات Kaggle التي تحتوي على معاملات من بائع تجزئة في المملكة المتحدة. باستخدام هذه البيانات، سنحاول بناء تقرير ذي معنى يمكن أن يخدم تحليل البيانات الاستكشافي داخل مؤسسة حقيقية. بالإضافة إلى ذلك، سنستخدم بيانات JSON وهمية حول التسويق. سيساعدنا هذا على تحقيق هدف إنشاء أدوات إعداد تقارير مختلفة ضمن نفس التطبيق. يمكنكم بالطبع اختيار أي بيانات تفضلونها.

الاتصال بمجموعتكم (Cluster)

الآن بعد أن أصبحت مجموعتكم جاهزة، دعونا نتصل بها! قوموا بإضافة عنوان IP الحالي الخاص بكم إلى القائمة البيضاء (Whitelist) أو أضيفوا عنوان IP مختلفاً. ثم، أنشئوا مستخدم MongoDB. سيكون للمستخدم الأول صلاحيات atlasAdmin للمشروع الحالي، مما يعني امتلاكه لمجموعة واسعة من الأدوار والإجراءات. لأسباب أمنية، يوصى بإنشاء كلمة مرور قوية تلقائياً.

اختاروا طريقة الاتصال التي تناسبكم. لاختبار الاتصال، يمكننا استخدام سلسلة الاتصال لـ mongo shell أولاً. لاحقاً، سنستخدم أيضاً سلسلة اتصال للتطبيق.

اتصلوا بها عبر mongo shell. افتحوا سطر الأوامر ونفذوا ما يلي (تذكروا استبدال اسم المستخدم الخاص بكم):

mongo "mongodb+srv://reportingdata-n8b3j.mongodb.net/test" --username yourUserName

سيطلب منكم موجه الأوامر التفاعلي إدخال كلمة المرور للمصادقة.

التحقق من مقاييس المجموعة

لقد قطعنا شوطاً طويلاً! الآن عودوا إلى صفحة ملخص المجموعة وشاهدوا كيف أصبحت نابضة بالحياة! من الآن فصاعداً، يمكننا الحصول على رؤى حول عمليات الكتابة والقراءة في قاعدة بيانات MongoDB، وعدد الاتصالات النشطة، والحجم المنطقي لمجموعة النسخ المتماثلة لدينا – كل هذه المعلومات الإحصائية في متناول أيديكم. ولكن الأهم الآن هو أنه أصبح من الممكن إنشاء وإدارة قواعد البيانات والمجموعات (collections).

إنشاء قاعدة بيانات ومجموعات

قوموا بإنشاء أول قاعدة بيانات لكم ومجموعتين. لنسمِها ecommerce، و transactions، و marketing على التوالي. إليكم كيف تبدو مساحة عملنا الآن:

تبدو فارغة جداً، أليس كذلك؟

استيراد البيانات إلى MongoDB

دعونا نملأ المجموعات بالبيانات. سنبدأ ببيانات التجزئة التي تم تنزيلها مسبقاً من Kaggle. فكوا ضغط الأرشيف وانتقلوا إلى الدليل حيث توجد محتوياته. بعد ذلك، افتحوا موجه الأوامر هناك واستوردوا البيانات إلى مجموعة transactions ضمن قاعدة بيانات ecommerce باستخدام الأمر mongoimport وسلسلة الاتصال المحددة لـ mongo shell:

mongoimport --uri "mongodb+srv://username:password@reportingdata-n8b3j.mongodb.net/ecommerce?retryWrites=true&w=majority" --collection transactions --drop --type csv --headerline --file data.csv

❗ملاحظة هامة: يرجى تذكر استبدال الكلمتين المفتاحيتين username و password ببيانات الاعتماد الخاصة بكم.

تهانينا! لقد قمنا للتو بتنزيل 541909 مستنداً إلى مجموعتنا. ماذا بعد؟

قوموا بتحميل مجموعة البيانات التي تحتوي على مقاييس التسويق إلى مجموعة marketing. إليكم ملف JSON الذي يحتوي على البيانات النموذجية التي سنستخدمها. استوردوا مصفوفة JSON إلى المجموعة باستخدام الأمر التالي:

mongoimport --uri "mongodb+srv://username:password@reportingdata-n8b3j.mongodb.net/ecommerce?retryWrites=true&w=majority" --collection marketing --drop --jsonArray marketing_data.json

إذا لم تكن هذه البيانات كافية، يمكننا إنشاء المزيد من البيانات ديناميكياً باستخدام نماذج mongoengine / PyMongo. هذا ما سيتناوله دليلنا التالي في هذه السلسلة. ولكن في الوقت الحالي، سنتخطى هذا الجزء ونعمل بالبيانات المتوفرة لدينا.

الآن بعد أن أصبحت مجموعاتنا تحتوي على بيانات، يمكننا استكشاف عدد المستندات في كل مجموعة بالإضافة إلى هيكلها. للحصول على مزيد من الرؤى، أوصي باستخدام MongoDB Compass، وهي أداة الواجهة الرسومية الرسمية لـ MongoDB. باستخدامها، يمكنكم استكشاف هيكل كل مجموعة، والتحقق من توزيع أنواع الحقول، وبناء مسارات التجميع (aggregation pipelines)، وتشغيل الاستعلامات، وتقييم وتحسين أدائها. للبدء، قوموا بتنزيل التطبيق واستخدموا سلسلة الاتصال لـ Compass المقدمة من MongoDB Atlas.

تحديد أنماط عناوين URL (URL Patterns) للمشاهدات (Views)

دعونا نعود إلى Django. أنشئوا ملف urls.py داخل مجلد التطبيق (داخل dashboard). هنا سنقوم بتخزين مسارات URL لتطبيقنا. سيتم مطابقة أنماط URL هذه مع المشاهدات (views) المعرفة في الملف dashboard/views.py:

from django.urls import path
from . import views

urlpatterns = [
    path('report/retail', views.ecommerce_report_page, name='retail_report'),
    path('report/marketing', views.marketing_report_page, name='marketing_report'),
]

يجب تسجيل عناوين URL الخاصة بالتطبيق على مستوى المشروع. افتحوا الملف django-reporting-project/urls.py واستبدلوا المحتويات بالرمز التالي:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('dashboard.urls')),
]

إنشاء المشاهدات (Views)

المشاهدة (view) هي ببساطة دالة تقبل طلب ويب وتُرجع استجابة ويب. يمكن أن تكون الاستجابة من أي نوع. باستخدام الدالة render()، سنقوم بإرجاع قالب HTML وسياق (context) مدمجين في كائن HttpResponse واحد. لاحظ أن المشاهدات في Django يمكن أن تكون أيضاً قائمة على الفئات (class-based).

في الملف dashboard/views.py، دعونا ننشئ مشاهدتين بسيطتين لتقاريرنا:

from django.shortcuts import render

def ecommerce_report_page(request):
    return render(request, 'retail_report.html', {})

def marketing_report_page(request):
    return render(request, 'marketing_report.html', {})

إنشاء القوالب (Templates)

أولاً، أنشئوا مجلداً باسم templates داخل دليل تطبيقكم. هذا هو المكان الذي سيبحث فيه Django عن صفحات HTML الخاصة بكم. بعد ذلك، دعونا نصمم تخطيط تطبيقنا. أقترح إضافة شريط تنقل (navigation bar) سيتم عرضه في كل صفحة. لهذا، سننشئ قالباً أساسياً يسمى base.html، والذي ستمتد منه جميع الصفحات الأخرى وفقاً لمنطق العمل. بهذه الطريقة، سنستفيد من وراثة القوالب (template inheritance) – وهو جزء قوي من محرك قوالب Django. يمكنكم العثور على رمز HTML الكامل على GitHub.

كما لاحظتم، سنستخدم أنماط Bootstrap لتجميل صفحاتنا بمكونات واجهة مستخدم جاهزة للاستخدام. لاحظ أننا أضفنا في شريط التنقل رابطين يعيدان التوجيه إلى صفحات التقرير. يمكنكم القيام بذلك عن طريق تعيين خاصية href للرابط إلى اسم نمط URL، المحدد بواسطة الكلمة المفتاحية name في نمط URL. على سبيل المثال، بهذه الطريقة:

href="{% url 'marketing_report' %}"

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

في مجلد templates، أنشئوا ملف marketing_report.html. أضيفوا وسم extends للوراثة من القالب الأساسي:

{% extends "base.html" %}

أضيفوا وسم block لتحديد محتوى القالب الفرعي الخاص بنا:

{% block content %}
{% endblock %}

داخل الكتلة (block)، أضيفوا سكربتات Flexmonster والحاويات حيث ستوضع مكونات إعداد التقارير (أي جدول pivot والرسوم البيانية pivot charts):

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot"></div>
<div id="pivot_chart"></div>

أضيفوا وسوم <script> حيث سيتم تنفيذ رمز JavaScript. داخل هذه الوسوم، قوموا بإنشاء كائني Flexmonster باستخدام استدعاءات init API:

var pivot = new Flexmonster({
    container: "#pivot",
    componentFolder: "https://cdn.flexmonster.com/",
    height: 600,
    toolbar: true,
    report: {}
});

var pivot_charts = new Flexmonster({
    container: "#pivot_charts",
    componentFolder: "https://cdn.flexmonster.com/",
    height: 600,
    toolbar: true,
    report: {}
});

يمكنكم وضع العديد من مكونات Flexmonster كما تريدون. لاحقاً، سنملأ هذه المكونات بالبيانات ونقوم بتكوين تقارير مخصصة.

إعداد موصل MongoDB (MongoDB Connector)

لإنشاء اتصال فعال بين Flexmonster Pivot Table وقاعدة بيانات MongoDB، يمكننا استخدام MongoDB Connector المقدم من Flexmonster. هذه أداة تعمل على جانب الخادم تقوم بكل العمل الشاق نيابة عنا، وهي تحديداً:

• تتصل بقاعدة بيانات MongoDB.
• تحصل على هيكل المجموعة (collection’s structure).
• تستعلم عن البيانات في كل مرة يتم فيها تغيير هيكل التقرير.
• ترسل البيانات المجمعة مرة أخرى لعرضها في جدول pivot.

لتشغيلها، دعونا نستنسخ هذا المثال من GitHub، ثم انتقلوا إلى دليله، وقوموا بتثبيت حزم npm عن طريق تشغيل الأمر npm install.

في الملف src/server.ts، يمكنكم التحقق من المنفذ الذي سيعمل عليه الموصل. يمكنكم تغيير المنفذ الافتراضي. هنا، يمكنكم أيضاً تحديد الوحدة النمطية التي ستتعامل مع الطلبات الواردة إلى نقطة النهاية (endpoint) (في حالتنا، mongo.ts). بعد ذلك، حددوا بيانات اعتماد قاعدة البيانات في الملف src/controller/mongo.ts. هناك، أضيفوا سلسلة اتصال الموصل للتطبيق المقدمة من MongoDB Atlas وحددوا اسم قاعدة البيانات.

تحديد التقارير (Define Reports)

الآن نحن جاهزون لتحديد تكوين التقرير على جانب العميل. إليكم الحد الأدنى من التكوين الذي يجعل جدول pivot يعمل مع بيانات MongoDB عبر الموصل:

var pivot = new Flexmonster({
    container: "#pivot",
    componentFolder: "https://cdn.flexmonster.com/",
    height: 600,
    toolbar: true,
    report: {
        "dataSource": {
            "type": "api",
            "url": "http://localhost:9204/mongo", // عنوان URL حيث يعمل الموصل الخاص بنا
            "index": "marketing" // تحديد اسم المجموعة
        },
        "slice": {}
    }
});

حددوا slice – وهي مجموعة التسلسلات الهرمية التي ستُعرض على الشبكة (grid) أو على الرسم البياني. إليكم تكوين مثال لشبكة pivot:

"slice": {
    "rows": [
        { "uniqueName": "Country" }
    ],
    "columns": [
        { "uniqueName": "[Measures]" }
    ],
    "measures": [
        { "uniqueName": "Leads", "aggregation": "sum" },
        { "uniqueName": "Opportunities", "aggregation": "sum" }
    ]
}

تشغيل تطبيق التقارير الخاص بكم

الآن بعد أن قمنا بتهيئة جانب العميل، دعونا ننتقل إلى دليل موصل MongoDB ونقوم بتشغيل الخادم:

npm run build
npm run start

بعد ذلك، عودوا إلى مشروع PyCharm وقوموا بتشغيل خادم Django:

python manage.py runserver

افتحوا المتصفح وتوجهوا إلى العنوان http://127.0.0.1:8000/report/marketing. للتبديل إلى تقرير آخر، انقروا على اسم التقرير في شريط التنقل. حان الوقت لتقييم النتائج! هنا يمكنكم رؤية التقرير الخاص بقسم التسويق:

حاولوا التجريب مع التخطيط: قوموا بتقطيع البيانات وتجزئتها (Slice & dice) للحصول على منظوركم الفريد. غيروا دوال التلخيص (summary functions)، وقوموا بتصفية السجلات وفرزها. انتقلوا بين النماذج الكلاسيكية والمدمجة لمعرفة ما هو الأفضل لكم. استمتعوا بلوحة تحكم التحليلات في Python!

استمتعوا بلوحة تحكم التحليلات في Python

تهانينا! عمل ممتاز. لقد أحيينا بياناتنا. لديكم الآن تطبيق Django قوي مزود بوظائف إعداد التقارير وتصور البيانات. ما قد يجده المستخدمون النهائيون مريحاً للغاية هو إمكانية تكوين تقرير، وحفظه، واستئناف العمل من حيث توقفتم لاحقاً عن طريق تحميله في جدول pivot. التقارير هي ملفات JSON أنيقة يمكن تخزينها محلياً أو على الخادم. كما يمكن تصدير التقارير إلى ملفات PDF، HTML، Image، أو Excel.

لا تترددوا في تخصيص التطبيق وفقاً لمتطلبات عملكم! يمكنكم إضافة منطق أكثر تعقيداً، وتغيير مصدر البيانات (مثل MySQL، PostgreSQL، Oracle، Microsoft Analysis Services، Elasticsearch، وما إلى ذلك)، وتخصيص مظهر و/أو وظائف جدول pivot والرسوم البيانية pivot charts.

إعدادات إضافية لتجميل تقريركم (Mapping)

هذا قسم إضافي للعقول الفضولية! لتجميل تسميات التسلسلات الهرمية وتحديد أنواع الحقول، سنضيف mapping – وهو كائن خاص في تكوين مصدر البيانات للتقرير. يساعدنا mapping في تحديد كيفية عرض أسماء الحقول عن طريق تعيين التسميات (captions). بالإضافة إلى ذلك، من الممكن تحديد أنواع الحقول بشكل صريح (أرقام، سلاسل نصية، أنواع مختلفة من التواريخ). تعتمد كل قطعة من التكوين على منطق عملكم. بشكل عام، ينشئ mapping مستوى إضافياً من التجريد بين مصدر البيانات وتمثيله. إليكم مثال على كيفية تعريفه لمجموعة بيانات التجزئة:

"mapping": {
    "InvoiceNo": { "caption": "Invoice Number", "type": "string" },
    "StockCode": { "caption": "Stock Code", "type": "string" },
    "Description": { "type": "string" },
    "Quantity": { "type": "number" },
    "InvoiceDate": { "type": "string", "caption": "Invoice Date" },
    "UnitPrice": { "type": "number", "caption": "Unit Price" },
    "CustomerID": { "type": "string", "caption": "Customer ID" },
    "Country": { "type": "string" }
}

مصادر إضافية للقراءة

• الرمز البرمجي الكامل على GitHub ⭐
• دليل شامل للبدء مع MongoDB Atlas
• البدء مع Flexmonster Pivot Table & Charts
• مقدمة إلى Django
• مقدمة إلى MongoDB Connector
• واجهة برمجة تطبيقات MongoDB Connector
• كيفية تغيير سمات التقرير
• كيفية تعريب مكون Pivot Table
• إعدادات إضافية لتجميل تقريركم

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

لقد نجحنا في بناء لوحة تحكم ويب متكاملة وفعالة، تجمع بين قوة Django في تطوير الويب، ومرونة MongoDB Atlas في إدارة البيانات السحابية، والقدرات التحليلية المتقدمة لمكونات Flexmonster Pivot Table & Charts. هذا الدمج يتيح للمطورين إنشاء تطبيقات غنية بالميزات التحليلية وتصور البيانات التفاعلي، مما يوفر للمستخدمين النهائيين رؤى قيمة وقدرة على التفاعل مع بياناتهم بسهولة. يبرز هذا المشروع أهمية استخدام الأدوات المناسبة لتبسيط العمليات المعقدة وتقديم حلول قوية وقابلة للتخصيص تلبي متطلبات الأعمال المتغيرة.