
هذا النص يلامس السطح فقط لما هو ممكن باستخدام Python, Plotly Dash, وواجهات برمجة التطبيقات الخاصة بنا.
منذ ما يقرب من عام، كتب توم مايرس، مدير نجاح العملاء في Bird، أداة إرسال بريد باستخدام واجهات برمجة تطبيقات Bird. في هذه المقالة، أتابع من حيث انتهى. تتيح أداته إرسال الوظائف بوقت محدد، ولكن ماذا لو أردنا إنشاء لوحات تحكم وسجلات أحداث خاصة بنا؟
ربما أريد إنشاء لوحة تحكم محددة لمجموعة أعمال أو لوحة تحكم للعملاء، لكن دون توفير وصول كامل للمستخدمين إلى واجهة المستخدم الخاصة بـBird. هذا السكربت يلمس فقط القمة لما يمكن تحقيقه باستخدام Python، وPlotly Dash، وواجهات برمجة التطبيقات الخاصة بنا. عند بناء لوحات تحكم تعالج بيانات API عالية الحجم، يجب أن تكون على دراية بأن المكونات التحتية مثل DNS يمكن أن تصبح عنق زجاجة - لقد واجهنا تحديات توسيع نطاق DNS في AWS التي أثرت على قدرات معالجة بياناتنا. لمحبي سير العمل البصري، يمكنك أيضًا استكشاف دمج Flow Builder مع وظائف Google Cloud وVision API لإضافة أتمتة مدعومة بالذكاء الاصطناعي إلى خطوط معالجة البيانات الخاصة بك.
بينما بدأت بحثي عبر الإنترنت، أردت إيجاد المسار الأقل مقاومة. كان بإمكاني إنشاء جميع لوحات التحكم وواجهة المستخدم بنفسي باستخدام HTML وPython، ولكن بعد بعض البحث في Google، صادفت Plotly's Dash، الذي يندمج بسهولة مع Python. اخترت Dash لسببين: 1) هو مفتوح المصدر، و2) بعد قراءة الوثائق بدا أنه قابل للتخصيص بسهولة لما كنت أحاول القيام به. Dash هو مكتبة مفتوحة المصدر مثالية لبناء ونشر تطبيقات البيانات مع واجهات مستخدم مخصصة. جعل هذا إنشاء واجهة مستخدم أمرًا بسيطًا للغاية. ثم أصبح السؤال، كم كان التطبيق معقدًا؟ كلما قضيت المزيد من الوقت، كلما أردت إضافة المزيد من الميزات.
للمشروع الأولي، أردت التأكد من أن لدي لوحة معلومات مع مقاييس قابلة للتخصيص وإطار زمني قابل للاختيار. في البداية، بدأت مع لوحة معلومات حيث يمكنك اختيار مقياس واحد فقط من القائمة المنسدلة. ثم، عندما تلقيت ردود الفعل من الزملاء، قمت بتحسين لوحة التحكم قليلاً لإضافة تحديد متعدد وعناوين المحاور. قررت أيضًا إضافة علامة تبويب إضافية لسجل الأحداث. وصلت إلى النقطة التي كنت فيها راضيًا عما لدي كنقطة انطلاق جيدة لأي شخص يرغب في بناء لوحات التحكم الخاصة به. للمطورين الذين يرغبون في تغذية بيانات webhook في الوقت الحقيقي في لوحات تحكمهم، اطلع على دليلنا حول بناء مستهلكي webhook باستخدام وظائف Azure. بالطبع، وضعت المشروع في Github لتتمكن من نسخه أو إنشاء فرع خاص بك.
البدء
للوصول إلى هذا التطبيق، ستحتاج إلى التأكد من أنك تقوم بتشغيل بايثون 3.10 أو أعلى وتثبيت المكتبات التالية:
requests
dash
pandas
ثم، أدخل مفتاح API الخاص بك في App.py وقم بتشغيل التطبيق. سيعمل على http://localhost:8050. لمزيد من المعلومات حول نشر هذا على خادم مواجه للجمهور (مثل AWS)، انظر الموارد التالية:
إنشاء صفحة لوحة التحكم
إنشاء صفحة تفاصيل الحدث
كانت صفحة تفاصيل الحدث أكثر صعوبة قليلاً لأنني لم أكن أعرف أفضل طريقة لعرض جميع مقاييس الأحداث بطريقة سهلة القراءة. فكرت في إضافة معايير تصفية إلى هذه الصفحة، ومع ذلك، قررت أن ذلك سيضيف وقتًا كبيرًا إلى هذا المشروع لأن الجدول سيصبح ديناميكيًا (إلى جانب إضافة المعايير، ردود الفعل، إلخ). قررت عرض جميع الأحداث ووضع الطابع الزمني أولاً (حيث أنه بدون وضع الطابع الزمني أولاً، لم يكن الرسم البياني سهل القراءة). في البداية، وجدت أن الجدول بصيغة HTML الخام كان صعبًا للغاية على العيون. لم تكن هناك حدود ولا اختلافات في اللون بين الرأس والصفوف. لجعل الجدول أسهل في القراءة، تمكنت من استخدام CSS ضمن Dash.
الفكرة لتفاصيل الحدث مشابهة تقريبًا للوحة المعلومات، باستثناء أنني هذه المرة أدعو Events API وأجلب جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصفية API). يمكن زيادة هذا، ومع ذلك، قررت عرض أحدث 10 أحداث لأن كلما زادت الأحداث المعروضة، كلما طال زمن استجابة مكالمة API. يمكن تحقيق تحسين كبير بتمكين الترقيم وإضافة صفحة تالية / صفحة سابقة في واجهة المستخدم.
لبناء علامة تبويب الأحداث (الصفحة)، أولاً، أستدعي واجهة برمجة تطبيقات الأحداث وأقوم بتحليل استجابة JSON إلى إطار بيانات. ثم أفرز وأعيد ترتيب إطار البيانات لوضع الطابع الزمني كأول عمود. أخيرًا، أقوم ببناء جدول HTML من خلال التمرير عبر إطار البيانات.
والذي يظهر على النحو التالي في واجهة المستخدم.

الخطوات التالية
بالنسبة لشخص مهتم بإنشاء لوحة تحكم أو سجل أحداث خاص به، فهذا يُعتبر بداية جيدة. مع قابلية التخصيص هنا، السماء هي الحد.
كما نوقش أعلاه، بعض التحسينات المستقبلية التي يمكن القيام بها هي:
إضافة تحليلات التسليم إلى لوحة التحكم
إضافة المزيد من الفلاتر إلى لوحة التحكم
خيارات التخزين المؤقت الممكنة بحيث لا يتم استدعاء API في كل مرة لعرض الصفحات
تحسينات واجهة المستخدم
إضافة التصفية ورقم الصفحة إلى صفحة تفاصيل الأحداث
أود سماع أي تعليقات أو اقتراحات لتوسيع هذا المشروع.
~ زاك صامويلز، مهندس حلول أول في Bird