أداة لوحات المعلومات مع واجهات برمجة التطبيقات للطيور
زاكاري سامويلز
24/03/2022
البريد الإلكتروني
1 min read

النقاط الرئيسية
يمكن دمج واجهات برمجة تطبيقات الطيور مع بايثون و Plotly Dash لبناء لوحات معلومات قوية وتفاعلية دون الحاجة إلى واجهة المستخدم الكاملة لطيور.
يظهر المشروع كيفية تصوير المقاييس والأحداث باستخدام واجهة برمجة تطبيقات مقاييس الطيور وواجهة برمجة تطبيقات الأحداث داخل تطبيق ويب مخصص.
Plotly Dash يوفر إطار عمل سريع ومفتوح المصدر لبناء عناصر واجهة المستخدم مثل القوائم المنسدلة والمخططات والجداول.
يمكن للمطورين توسيع الأداة ب تحليلات القابلية للتسليم والتصفية والترقيم للحصول على لوحات معلومات أكثر ثراءً.
تشمل التحسينات المستقبلية التخزين المؤقت، وتحسين واجهة المستخدم، والتكامل مع منتجات الطيور الأخرى أو واجهات برمجة التطبيقات التابعة لأطراف ثالثة.
يوفر الكود (المتوفر على GitHub) نقطة انطلاق قوية لأي شخص يريد بناء لوحات معلومات مدعومة بطيور أو بوابات موجهة للعملاء.
أهم النقاط في الأسئلة والأجوبة
ما هو هدف مشروع إنشاء لوحات المعلومات هذا؟
يظهر كيف يمكن للمطورين استخدام واجهات برمجة التطبيقات الخاصة بـ Bird مع Python و Plotly Dash لإنشاء لوحات معلومات مدفوعة بالبيانات تعرض مقاييس الحملة والأحداث الأخيرة.
لماذا تستخدم Plotly Dash لواجهات برمجة تطبيقات الطيور؟
داش مفتوح المصدر، سهل التخصيص، ومثالي لإنشاء واجهات مستخدم تفاعلية دون الحاجة إلى خبرة في الواجهة الأمامية.
ماذا يعرض لوحة المعلومات؟
إنه يعرض مقاييس السلاسل الزمنية من واجهة برمجة تطبيقات Bird's Metrics وبيانات الأحداث الأخيرة من واجهة برمجة تطبيقات الأحداث، مع خيارات لتصفية وتحديد المقاييس على مدى زمني مخصص.
كيف يمكن توسيع الأداة أكثر؟
من خلال إضافة تحليلات التسليم، والفلاتر المتقدمة، وتخزين البيانات، والصفحات لمجموعات البيانات الكبيرة لتحسين الأداء وسهولة الاستخدام.
ما المهارات أو الأدوات المطلوبة لتشغيله؟
معرفة أساسية بـ Python وتثبيت المكتبات requests وdash وpandas. مطلوب مفتاح API من Bird لسحب البيانات.
كيف يتناسب هذا المشروع مع نظام طيور؟
يُظهر كيف يمكن استخدام واجهات برمجة التطبيقات المفتوحة من Bird لإنشاء لوحات معلومات مخصصة وأدوات تقارير للفرق أو العملاء الذين ليس لديهم وصول إلى النظام الأساسي الكامل.
هذا النص يتناول فقط لمحة عن ما هو ممكن باستخدام بايثون، بلوتلي داش، وواجهات برمجة التطبيقات الخاصة بنا.
API قياسات الطيور + لوحة التحكم باستخدام بايثون
قبل حوالي عام، كتب توم مارز، مدير نجاح العملاء في Bird، أداة للمراسلة تستخدم واجهات برمجة التطبيقات الخاصة بـ Bird. في هذه التدوينة، أستكمل ما بدأه. أداته تسمح بالإرسال المؤقت للوظائف، لكن ماذا لو أردنا إنشاء لوحات تحكم وسجلات أحداث خاصة بنا؟
ربما أريد إنشاء لوحة تحكم محددة لمجموعة أعمال أو لوحة تحكم موجهة للعملاء، دون منح المستخدمين وصولاً كاملاً إلى واجهة مستخدم Bird. هذه السكربت تلامس فقط سطح ما هو ممكن باستخدام بايثون، Plotly Dash، وواجهات برمجة التطبيقات الخاصة بنا. عند بناء لوحات تحكم تعالج بيانات واجهات برمجة التطبيقات ذات الحجم الكبير، كن على دراية بأن مكونات البنية التحتية مثل DNS يمكن أن تصبح اختناقات - لقد واجهنا تحديات توسيع DNS في AWS التي أثرت على قدرات معالجة البيانات لدينا. لعشاق التدفقات المرئية، يمكنك أيضاً استكشاف تكامل Flow Builder مع وظائف Google Cloud وواجهات برمجة التطبيقات الخاصة بالرؤية لإضافة أتمتة مدعومة بالذكاء الاصطناعي إلى خطوط معالجة البيانات الخاصة بك.
عندما بدأت بحثي عبر الإنترنت، كنت أرغب في العثور على أقل مسار مقاومة. كان بإمكاني إنشاء جميع لوحات التحكم وواجهة المستخدم بنفسي باستخدام HTML وpython، ومع ذلك، بعد بعض البحث في Google، وجدت Dash من Plotly، الذي يتكامل بسهولة مع بايثون. اخترت Dash لسببين: 1) إنه مفتوح المصدر، و2) بعد قراءة الوثائق بدا أنه سهل التخصيص لما كنت أحاول القيام به. Dash هو مكتبة مفتوحة المصدر مثالية لبناء ونشر تطبيقات البيانات مع واجهات مستخدم مخصصة. هذا جعل إنشاء واجهة مستخدم بسيطاً للغاية. ثم أصبح السؤال، كم هو معقد أريد أن أجعل هذا التطبيق؟ كلما قضيت المزيد من الوقت، كلما أردت إضافة المزيد من الميزات.
بالنسبة للمشروع الأولي، كنت أرغب في التأكد من أن لدي لوحة تحكم بمقاييس قابلة للتخصيص وإطار زمني قابل للاختيار. بدأت في البداية مع لوحة تحكم حيث يمكنك فقط اختيار مقياس واحد من القائمة المنسدلة. ثم، عندما حصلت على ملاحظات من زملاء العمل، قمت بتحسين لوحة التحكم قليلاً لإضافة الاختيار المتعدد وعناوين المحاور. كما قررت إضافة علامة تبويب إضافية لسجل الأحداث. وصلت إلى النقطة التي كنت راضياً فيها عما كان لدي كنقطة انطلاق جيدة لأي شخص يرغب في بناء لوحات تحكم خاصة بهم. بالنسبة للمطورين الذين يرغبون في تغذية بيانات الويب في الوقت الحقيقي إلى لوحات التحكم الخاصة بهم، تحقق من دليلنا حول بناء مستهلكي الويب باستخدام وظائف Azure. بالطبع، وضعت المشروع في Github لتقوم بعمل استنساخ أو فرع.
API قياسات الطيور + لوحة التحكم باستخدام بايثون
قبل حوالي عام، كتب توم مارز، مدير نجاح العملاء في Bird، أداة للمراسلة تستخدم واجهات برمجة التطبيقات الخاصة بـ Bird. في هذه التدوينة، أستكمل ما بدأه. أداته تسمح بالإرسال المؤقت للوظائف، لكن ماذا لو أردنا إنشاء لوحات تحكم وسجلات أحداث خاصة بنا؟
ربما أريد إنشاء لوحة تحكم محددة لمجموعة أعمال أو لوحة تحكم موجهة للعملاء، دون منح المستخدمين وصولاً كاملاً إلى واجهة مستخدم Bird. هذه السكربت تلامس فقط سطح ما هو ممكن باستخدام بايثون، Plotly Dash، وواجهات برمجة التطبيقات الخاصة بنا. عند بناء لوحات تحكم تعالج بيانات واجهات برمجة التطبيقات ذات الحجم الكبير، كن على دراية بأن مكونات البنية التحتية مثل DNS يمكن أن تصبح اختناقات - لقد واجهنا تحديات توسيع DNS في AWS التي أثرت على قدرات معالجة البيانات لدينا. لعشاق التدفقات المرئية، يمكنك أيضاً استكشاف تكامل Flow Builder مع وظائف Google Cloud وواجهات برمجة التطبيقات الخاصة بالرؤية لإضافة أتمتة مدعومة بالذكاء الاصطناعي إلى خطوط معالجة البيانات الخاصة بك.
عندما بدأت بحثي عبر الإنترنت، كنت أرغب في العثور على أقل مسار مقاومة. كان بإمكاني إنشاء جميع لوحات التحكم وواجهة المستخدم بنفسي باستخدام HTML وpython، ومع ذلك، بعد بعض البحث في Google، وجدت Dash من Plotly، الذي يتكامل بسهولة مع بايثون. اخترت Dash لسببين: 1) إنه مفتوح المصدر، و2) بعد قراءة الوثائق بدا أنه سهل التخصيص لما كنت أحاول القيام به. Dash هو مكتبة مفتوحة المصدر مثالية لبناء ونشر تطبيقات البيانات مع واجهات مستخدم مخصصة. هذا جعل إنشاء واجهة مستخدم بسيطاً للغاية. ثم أصبح السؤال، كم هو معقد أريد أن أجعل هذا التطبيق؟ كلما قضيت المزيد من الوقت، كلما أردت إضافة المزيد من الميزات.
بالنسبة للمشروع الأولي، كنت أرغب في التأكد من أن لدي لوحة تحكم بمقاييس قابلة للتخصيص وإطار زمني قابل للاختيار. بدأت في البداية مع لوحة تحكم حيث يمكنك فقط اختيار مقياس واحد من القائمة المنسدلة. ثم، عندما حصلت على ملاحظات من زملاء العمل، قمت بتحسين لوحة التحكم قليلاً لإضافة الاختيار المتعدد وعناوين المحاور. كما قررت إضافة علامة تبويب إضافية لسجل الأحداث. وصلت إلى النقطة التي كنت راضياً فيها عما كان لدي كنقطة انطلاق جيدة لأي شخص يرغب في بناء لوحات تحكم خاصة بهم. بالنسبة للمطورين الذين يرغبون في تغذية بيانات الويب في الوقت الحقيقي إلى لوحات التحكم الخاصة بهم، تحقق من دليلنا حول بناء مستهلكي الويب باستخدام وظائف Azure. بالطبع، وضعت المشروع في Github لتقوم بعمل استنساخ أو فرع.
API قياسات الطيور + لوحة التحكم باستخدام بايثون
قبل حوالي عام، كتب توم مارز، مدير نجاح العملاء في Bird، أداة للمراسلة تستخدم واجهات برمجة التطبيقات الخاصة بـ Bird. في هذه التدوينة، أستكمل ما بدأه. أداته تسمح بالإرسال المؤقت للوظائف، لكن ماذا لو أردنا إنشاء لوحات تحكم وسجلات أحداث خاصة بنا؟
ربما أريد إنشاء لوحة تحكم محددة لمجموعة أعمال أو لوحة تحكم موجهة للعملاء، دون منح المستخدمين وصولاً كاملاً إلى واجهة مستخدم Bird. هذه السكربت تلامس فقط سطح ما هو ممكن باستخدام بايثون، Plotly Dash، وواجهات برمجة التطبيقات الخاصة بنا. عند بناء لوحات تحكم تعالج بيانات واجهات برمجة التطبيقات ذات الحجم الكبير، كن على دراية بأن مكونات البنية التحتية مثل DNS يمكن أن تصبح اختناقات - لقد واجهنا تحديات توسيع DNS في AWS التي أثرت على قدرات معالجة البيانات لدينا. لعشاق التدفقات المرئية، يمكنك أيضاً استكشاف تكامل Flow Builder مع وظائف Google Cloud وواجهات برمجة التطبيقات الخاصة بالرؤية لإضافة أتمتة مدعومة بالذكاء الاصطناعي إلى خطوط معالجة البيانات الخاصة بك.
عندما بدأت بحثي عبر الإنترنت، كنت أرغب في العثور على أقل مسار مقاومة. كان بإمكاني إنشاء جميع لوحات التحكم وواجهة المستخدم بنفسي باستخدام HTML وpython، ومع ذلك، بعد بعض البحث في Google، وجدت Dash من Plotly، الذي يتكامل بسهولة مع بايثون. اخترت Dash لسببين: 1) إنه مفتوح المصدر، و2) بعد قراءة الوثائق بدا أنه سهل التخصيص لما كنت أحاول القيام به. Dash هو مكتبة مفتوحة المصدر مثالية لبناء ونشر تطبيقات البيانات مع واجهات مستخدم مخصصة. هذا جعل إنشاء واجهة مستخدم بسيطاً للغاية. ثم أصبح السؤال، كم هو معقد أريد أن أجعل هذا التطبيق؟ كلما قضيت المزيد من الوقت، كلما أردت إضافة المزيد من الميزات.
بالنسبة للمشروع الأولي، كنت أرغب في التأكد من أن لدي لوحة تحكم بمقاييس قابلة للتخصيص وإطار زمني قابل للاختيار. بدأت في البداية مع لوحة تحكم حيث يمكنك فقط اختيار مقياس واحد من القائمة المنسدلة. ثم، عندما حصلت على ملاحظات من زملاء العمل، قمت بتحسين لوحة التحكم قليلاً لإضافة الاختيار المتعدد وعناوين المحاور. كما قررت إضافة علامة تبويب إضافية لسجل الأحداث. وصلت إلى النقطة التي كنت راضياً فيها عما كان لدي كنقطة انطلاق جيدة لأي شخص يرغب في بناء لوحات تحكم خاصة بهم. بالنسبة للمطورين الذين يرغبون في تغذية بيانات الويب في الوقت الحقيقي إلى لوحات التحكم الخاصة بهم، تحقق من دليلنا حول بناء مستهلكي الويب باستخدام وظائف Azure. بالطبع، وضعت المشروع في Github لتقوم بعمل استنساخ أو فرع.
البدء
للوصول إلى هذا التطبيق، تحتاج إلى التأكد من أنك تعمل على Python 3.10 أو أعلى وتثبيت المكتبات التالية:
مكتبة Python | الغرض |
|---|---|
requests | الاتصال بواجهة برمجة التطبيقات مع خدمات Bird |
dash | واجهة المستخدم وعرض لوحة المعلومات |
pandas | معالجة البيانات وتوليد الجداول |
ثم، أدخل مفتاح API الخاص بك في App.py وقم بتشغيل التطبيق. سيعمل على http://localhost:8050. لمزيد من المعلومات حول نشر هذا على خادم موجه للجمهور (مثل AWS)، راجع الموارد التالية:
للوصول إلى هذا التطبيق، تحتاج إلى التأكد من أنك تعمل على Python 3.10 أو أعلى وتثبيت المكتبات التالية:
مكتبة Python | الغرض |
|---|---|
requests | الاتصال بواجهة برمجة التطبيقات مع خدمات Bird |
dash | واجهة المستخدم وعرض لوحة المعلومات |
pandas | معالجة البيانات وتوليد الجداول |
ثم، أدخل مفتاح API الخاص بك في App.py وقم بتشغيل التطبيق. سيعمل على http://localhost:8050. لمزيد من المعلومات حول نشر هذا على خادم موجه للجمهور (مثل AWS)، راجع الموارد التالية:
للوصول إلى هذا التطبيق، تحتاج إلى التأكد من أنك تعمل على Python 3.10 أو أعلى وتثبيت المكتبات التالية:
مكتبة Python | الغرض |
|---|---|
requests | الاتصال بواجهة برمجة التطبيقات مع خدمات Bird |
dash | واجهة المستخدم وعرض لوحة المعلومات |
pandas | معالجة البيانات وتوليد الجداول |
ثم، أدخل مفتاح API الخاص بك في App.py وقم بتشغيل التطبيق. سيعمل على http://localhost:8050. لمزيد من المعلومات حول نشر هذا على خادم موجه للجمهور (مثل AWS)، راجع الموارد التالية:
إنشاء صفحة لوحة التحكم
أولاً، قم بتهيئة إطار البيانات واللوحة. بدون تهيئة اللوحة، لن تظهر أي لوحة في واجهة المستخدم.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
ثم، قم ببناء علامة التبويب الأولى. هذه هي مزيج من رد نداء التطبيق (للتحقق من العلامة المستخدمة)؛ جنبًا إلى جنب مع دالة شرطية للتحقق من العلامة المحددة حاليًا. الشيفرة أدناه تبني فقط لوحة فارغة وعناصر واجهة المستخدم (سنصل إلى علامة تبويب الأحداث لاحقًا). عناصر dcc هي مكونات Dash الأساسية ومكونات HTML التي تسمح بسهولة باستخدام HTML في واجهة المستخدم.
html.H2("Analytics Dashboard"), # Multi-select dropdown dcc.Dropdown( [ "Count Accepted", "Count Admin Bounce", "Count Block Bounce", "Count Bounce", "Count Clicked", "Count Delayed", "Count Delayed First", "Count Delivered", "Count Delivered First", "Count Delivered Subsequent", "Count Generation Failed", "Count Generation Rejection", "Count Hard Bounce", "Count Inband Bounce", "Count Initial Rendered", "Count Injected", "Count Out of Band Bounce", "Count Policy Rejection", "Count Rejected", "Count Rendered", "Count Sent", "Count Soft Bounce", "Count Spam Complaint", "Count Targeted", "Count Undetermined Bounce", "Count Unique Clicked", "Count Unique Confirmed Opened", "Count Unique Initial Rendered", "Count Unique Rendered", "Count Unsubscribe", "Total Delivery Time First", "Total Delivery Time Subsequent", "Total Message Volume", ], id="y-axis", multi=True, searchable=True, placeholder="Select metrics(s)", ), # Date selector (max date allowed is set to today's date) dcc.DatePickerRange( id="date-picker-range", start_date=date(2022, 1, 1), end_date=date(2022, 2, 1), max_date_allowed=date( datetime.today().year, datetime.today().month, datetime.today().day, ), ), # Graph object dcc.Graph(id="Emails", figure=fig)
لاحظ مع داش كم هو بسيط إنشاء واجهة مستخدم للوحة تحكم باستخدام قائمة منسدلة متعددة الاختيارات وقابلة للبحث. لتعطيل المحدد المتعدد أو البحث، يمكن تعديل المعلمات لإنشاء قائمة منسدلة بسهولة. وجدت أن الجزء الأكثر تعقيدًا في هذا المشروع هو بناء إطار البيانات الفعلي من المدخلات، بالإضافة إلى جعل HTML + CSS يعمل بشكل صحيح في واجهة المستخدم.
يمكنك استخدام واجهة برمجة تطبيقات مقاييس السلاسل الزمنية لسحب 33 مقياسًا فرديًا استنادًا إلى نطاق التاريخ/الوقت. يمكنك تصفية أكبر حسب النطاقات، الحملات، حزم IP، النطاقات المرسلة، الحسابات الفرعية، وتحديد دقة بيانات السلسلة الزمنية. هذه الفلاتر الإضافية جنبًا إلى جنب مع تحليلات القابلية للتسليم يمكن أن تكون تحسينًا مستقبليًا لهذا المشروع (سيحتاج Catching الأخطاء إلى تنفيذ للعملاء الذين ليس لديهم وصول إلى تحليلات القابلية للتسليم).
باستخدام واستدعاء واجهة برمجة تطبيقات المقاييس، أقوم ببناء لوحة تحكم بالمعلمات المحددة من قبل المستخدم والإطار الزمني المحدد. ثم يتم تحديث لوحة التحكم المهيأة.
عرض لوحة التحكم (واجهة برمجة تطبيقات مقاييس السلاسل الزمنية)
# Build the API call utilizing the parameters provided params = { "from": start_date + "T00:00", "to": end_date + "T00:00", "delimiter": ",", "precision": "day", "metrics": joined_values } api_url = BASE_URL + "/metrics/deliverability/time-series" response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params) response_info = json.loads(response_API.text) new_df = pd.json_normalize(response_info, record_path=['results']) value_array = joined_values.split(",") # Build out a new dashboard utilizing the new metrics and dates from the updated API call fig = px.line( new_df, x=new_df['ts'], y=value_array, labels={"value": "Count", "variable": "Metric", "ts": "Date"} ) fig.update_xaxes(title_text="Time") fig.update_yaxes(title_text="Count") return fig
فيما يلي مثال على تحديد مقاييس متعددة وإطار زمني موسع.

ملحوظة: هناك العديد من العناصر المدمجة في رسم داش تلقائيًا (التداخل، التكبير، توسيع النطاق).
أولاً، قم بتهيئة إطار البيانات واللوحة. بدون تهيئة اللوحة، لن تظهر أي لوحة في واجهة المستخدم.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
ثم، قم ببناء علامة التبويب الأولى. هذه هي مزيج من رد نداء التطبيق (للتحقق من العلامة المستخدمة)؛ جنبًا إلى جنب مع دالة شرطية للتحقق من العلامة المحددة حاليًا. الشيفرة أدناه تبني فقط لوحة فارغة وعناصر واجهة المستخدم (سنصل إلى علامة تبويب الأحداث لاحقًا). عناصر dcc هي مكونات Dash الأساسية ومكونات HTML التي تسمح بسهولة باستخدام HTML في واجهة المستخدم.
html.H2("Analytics Dashboard"), # Multi-select dropdown dcc.Dropdown( [ "Count Accepted", "Count Admin Bounce", "Count Block Bounce", "Count Bounce", "Count Clicked", "Count Delayed", "Count Delayed First", "Count Delivered", "Count Delivered First", "Count Delivered Subsequent", "Count Generation Failed", "Count Generation Rejection", "Count Hard Bounce", "Count Inband Bounce", "Count Initial Rendered", "Count Injected", "Count Out of Band Bounce", "Count Policy Rejection", "Count Rejected", "Count Rendered", "Count Sent", "Count Soft Bounce", "Count Spam Complaint", "Count Targeted", "Count Undetermined Bounce", "Count Unique Clicked", "Count Unique Confirmed Opened", "Count Unique Initial Rendered", "Count Unique Rendered", "Count Unsubscribe", "Total Delivery Time First", "Total Delivery Time Subsequent", "Total Message Volume", ], id="y-axis", multi=True, searchable=True, placeholder="Select metrics(s)", ), # Date selector (max date allowed is set to today's date) dcc.DatePickerRange( id="date-picker-range", start_date=date(2022, 1, 1), end_date=date(2022, 2, 1), max_date_allowed=date( datetime.today().year, datetime.today().month, datetime.today().day, ), ), # Graph object dcc.Graph(id="Emails", figure=fig)
لاحظ مع داش كم هو بسيط إنشاء واجهة مستخدم للوحة تحكم باستخدام قائمة منسدلة متعددة الاختيارات وقابلة للبحث. لتعطيل المحدد المتعدد أو البحث، يمكن تعديل المعلمات لإنشاء قائمة منسدلة بسهولة. وجدت أن الجزء الأكثر تعقيدًا في هذا المشروع هو بناء إطار البيانات الفعلي من المدخلات، بالإضافة إلى جعل HTML + CSS يعمل بشكل صحيح في واجهة المستخدم.
يمكنك استخدام واجهة برمجة تطبيقات مقاييس السلاسل الزمنية لسحب 33 مقياسًا فرديًا استنادًا إلى نطاق التاريخ/الوقت. يمكنك تصفية أكبر حسب النطاقات، الحملات، حزم IP، النطاقات المرسلة، الحسابات الفرعية، وتحديد دقة بيانات السلسلة الزمنية. هذه الفلاتر الإضافية جنبًا إلى جنب مع تحليلات القابلية للتسليم يمكن أن تكون تحسينًا مستقبليًا لهذا المشروع (سيحتاج Catching الأخطاء إلى تنفيذ للعملاء الذين ليس لديهم وصول إلى تحليلات القابلية للتسليم).
باستخدام واستدعاء واجهة برمجة تطبيقات المقاييس، أقوم ببناء لوحة تحكم بالمعلمات المحددة من قبل المستخدم والإطار الزمني المحدد. ثم يتم تحديث لوحة التحكم المهيأة.
عرض لوحة التحكم (واجهة برمجة تطبيقات مقاييس السلاسل الزمنية)
# Build the API call utilizing the parameters provided params = { "from": start_date + "T00:00", "to": end_date + "T00:00", "delimiter": ",", "precision": "day", "metrics": joined_values } api_url = BASE_URL + "/metrics/deliverability/time-series" response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params) response_info = json.loads(response_API.text) new_df = pd.json_normalize(response_info, record_path=['results']) value_array = joined_values.split(",") # Build out a new dashboard utilizing the new metrics and dates from the updated API call fig = px.line( new_df, x=new_df['ts'], y=value_array, labels={"value": "Count", "variable": "Metric", "ts": "Date"} ) fig.update_xaxes(title_text="Time") fig.update_yaxes(title_text="Count") return fig
فيما يلي مثال على تحديد مقاييس متعددة وإطار زمني موسع.

ملحوظة: هناك العديد من العناصر المدمجة في رسم داش تلقائيًا (التداخل، التكبير، توسيع النطاق).
أولاً، قم بتهيئة إطار البيانات واللوحة. بدون تهيئة اللوحة، لن تظهر أي لوحة في واجهة المستخدم.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
ثم، قم ببناء علامة التبويب الأولى. هذه هي مزيج من رد نداء التطبيق (للتحقق من العلامة المستخدمة)؛ جنبًا إلى جنب مع دالة شرطية للتحقق من العلامة المحددة حاليًا. الشيفرة أدناه تبني فقط لوحة فارغة وعناصر واجهة المستخدم (سنصل إلى علامة تبويب الأحداث لاحقًا). عناصر dcc هي مكونات Dash الأساسية ومكونات HTML التي تسمح بسهولة باستخدام HTML في واجهة المستخدم.
html.H2("Analytics Dashboard"), # Multi-select dropdown dcc.Dropdown( [ "Count Accepted", "Count Admin Bounce", "Count Block Bounce", "Count Bounce", "Count Clicked", "Count Delayed", "Count Delayed First", "Count Delivered", "Count Delivered First", "Count Delivered Subsequent", "Count Generation Failed", "Count Generation Rejection", "Count Hard Bounce", "Count Inband Bounce", "Count Initial Rendered", "Count Injected", "Count Out of Band Bounce", "Count Policy Rejection", "Count Rejected", "Count Rendered", "Count Sent", "Count Soft Bounce", "Count Spam Complaint", "Count Targeted", "Count Undetermined Bounce", "Count Unique Clicked", "Count Unique Confirmed Opened", "Count Unique Initial Rendered", "Count Unique Rendered", "Count Unsubscribe", "Total Delivery Time First", "Total Delivery Time Subsequent", "Total Message Volume", ], id="y-axis", multi=True, searchable=True, placeholder="Select metrics(s)", ), # Date selector (max date allowed is set to today's date) dcc.DatePickerRange( id="date-picker-range", start_date=date(2022, 1, 1), end_date=date(2022, 2, 1), max_date_allowed=date( datetime.today().year, datetime.today().month, datetime.today().day, ), ), # Graph object dcc.Graph(id="Emails", figure=fig)
لاحظ مع داش كم هو بسيط إنشاء واجهة مستخدم للوحة تحكم باستخدام قائمة منسدلة متعددة الاختيارات وقابلة للبحث. لتعطيل المحدد المتعدد أو البحث، يمكن تعديل المعلمات لإنشاء قائمة منسدلة بسهولة. وجدت أن الجزء الأكثر تعقيدًا في هذا المشروع هو بناء إطار البيانات الفعلي من المدخلات، بالإضافة إلى جعل HTML + CSS يعمل بشكل صحيح في واجهة المستخدم.
يمكنك استخدام واجهة برمجة تطبيقات مقاييس السلاسل الزمنية لسحب 33 مقياسًا فرديًا استنادًا إلى نطاق التاريخ/الوقت. يمكنك تصفية أكبر حسب النطاقات، الحملات، حزم IP، النطاقات المرسلة، الحسابات الفرعية، وتحديد دقة بيانات السلسلة الزمنية. هذه الفلاتر الإضافية جنبًا إلى جنب مع تحليلات القابلية للتسليم يمكن أن تكون تحسينًا مستقبليًا لهذا المشروع (سيحتاج Catching الأخطاء إلى تنفيذ للعملاء الذين ليس لديهم وصول إلى تحليلات القابلية للتسليم).
باستخدام واستدعاء واجهة برمجة تطبيقات المقاييس، أقوم ببناء لوحة تحكم بالمعلمات المحددة من قبل المستخدم والإطار الزمني المحدد. ثم يتم تحديث لوحة التحكم المهيأة.
عرض لوحة التحكم (واجهة برمجة تطبيقات مقاييس السلاسل الزمنية)
# Build the API call utilizing the parameters provided params = { "from": start_date + "T00:00", "to": end_date + "T00:00", "delimiter": ",", "precision": "day", "metrics": joined_values } api_url = BASE_URL + "/metrics/deliverability/time-series" response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params) response_info = json.loads(response_API.text) new_df = pd.json_normalize(response_info, record_path=['results']) value_array = joined_values.split(",") # Build out a new dashboard utilizing the new metrics and dates from the updated API call fig = px.line( new_df, x=new_df['ts'], y=value_array, labels={"value": "Count", "variable": "Metric", "ts": "Date"} ) fig.update_xaxes(title_text="Time") fig.update_yaxes(title_text="Count") return fig
فيما يلي مثال على تحديد مقاييس متعددة وإطار زمني موسع.

ملحوظة: هناك العديد من العناصر المدمجة في رسم داش تلقائيًا (التداخل، التكبير، توسيع النطاق).
إنشاء صفحة تفاصيل الحدث
كانت صفحة تفاصيل الحدث أكثر صعوبة قليلاً لأنني لم أعرف أفضل طريقة لعرض جميع مقاييس الأحداث بطريقة سهلة القراءة. فكرت في إضافة معلمات تصفية لهذه الصفحة، ومع ذلك، قررت أن ذلك سيضيف وقتًا كبيرًا إلى هذا المشروع حيث سيتعين على الجدول أن يكون ديناميكيًا (بالإضافة إلى إضافة المعلمات، واستدعاءات الخلفية، وما إلى ذلك). استقريت على عرض جميع الأحداث ووضع الطابع الزمني أولاً (لأنه بدون وضع الطابع الزمني أولاً، لم يكن من السهل قراءة الجدول). في البداية، وجدت أنه مع HTML الخام فقط، كان الجدول صعبًا للغاية على العين. لم يكن هناك أي حدود ولا اختلافات في الألوان بين الرأس والصفوف. لجعل الجدول أسهل في القراءة، كنت قادراً على استخدام CSS داخل Dash.
عرض تفاصيل الحدث (API الأحداث)
الفكرة وراء تفاصيل الحدث هي تقريبًا نفس فكرة لوحة التحكم، باستثناء هذه المرة، أنادي API الأحداث وأحضر جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصنيف API). يمكن زيادتها، ومع ذلك، استقريت على عرض أحدث 10 أحداث لأن المزيد من الأحداث يجعل استدعاء API يستغرق وقتًا أطول. يمكن أن يكون أحد التحسينات الكبيرة هو القدرة على التصفح وإدراج صفحة التالية / الصفحة السابقة في واجهة الاستخدام.
لبناء علامة التبويب (الصفحة) الخاصة بالأحداث، أولاً، أنادي API الأحداث وأحلل استجابة JSON إلى إطار بيانات. ثم أقوم بفرز وإعادة ترتيب إطار البيانات لوضع الطابع الزمني كأول عمود. أخيرًا، أبني جدول HTML من خلال التكرار عبر إطار البيانات.
# Build out and call the events API params = { "events": "delivery,injection,bounce,delay,policy_rejection,out_of_band,open,click," "generation_failure,generation_rejection,spam_complaint,list_unsubscribe,link_unsubscribe", "delimiter": ",", "page": "1", "per_page": "10", } api_url = f"{BASE_URL}/events/message" response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params) response_info = response_API.json() new_df = pd.json_normalize(response_info, record_path=["results"]) max_rows = 10 # Max number of results to show in the events table # Sort columns and place timestamp as the first column in the table new_df = new_df.reindex(sorted(new_df.columns), axis=1) cols = ["timestamp"] new_df = new_df[cols + [c for c in new_df.columns if c not in cols]] # Show the new HTML with the events table (note: this table also references table.css) return html.Div([ html.H2("Event Details"), html.Table([ html.Thead( html.Tr([html.Th(col) for col in new_df.columns], className="table_css") ), html.Tbody([ html.Tr([ html.Td(new_df.iloc[i][col], className="table_css") for col in new_df.columns ]) for i in range(min(len(new_df), max_rows)) ]) ]) ])
التي تبدو هكذا في واجهة الاستخدام.

كانت صفحة تفاصيل الحدث أكثر صعوبة قليلاً لأنني لم أعرف أفضل طريقة لعرض جميع مقاييس الأحداث بطريقة سهلة القراءة. فكرت في إضافة معلمات تصفية لهذه الصفحة، ومع ذلك، قررت أن ذلك سيضيف وقتًا كبيرًا إلى هذا المشروع حيث سيتعين على الجدول أن يكون ديناميكيًا (بالإضافة إلى إضافة المعلمات، واستدعاءات الخلفية، وما إلى ذلك). استقريت على عرض جميع الأحداث ووضع الطابع الزمني أولاً (لأنه بدون وضع الطابع الزمني أولاً، لم يكن من السهل قراءة الجدول). في البداية، وجدت أنه مع HTML الخام فقط، كان الجدول صعبًا للغاية على العين. لم يكن هناك أي حدود ولا اختلافات في الألوان بين الرأس والصفوف. لجعل الجدول أسهل في القراءة، كنت قادراً على استخدام CSS داخل Dash.
عرض تفاصيل الحدث (API الأحداث)
الفكرة وراء تفاصيل الحدث هي تقريبًا نفس فكرة لوحة التحكم، باستثناء هذه المرة، أنادي API الأحداث وأحضر جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصنيف API). يمكن زيادتها، ومع ذلك، استقريت على عرض أحدث 10 أحداث لأن المزيد من الأحداث يجعل استدعاء API يستغرق وقتًا أطول. يمكن أن يكون أحد التحسينات الكبيرة هو القدرة على التصفح وإدراج صفحة التالية / الصفحة السابقة في واجهة الاستخدام.
لبناء علامة التبويب (الصفحة) الخاصة بالأحداث، أولاً، أنادي API الأحداث وأحلل استجابة JSON إلى إطار بيانات. ثم أقوم بفرز وإعادة ترتيب إطار البيانات لوضع الطابع الزمني كأول عمود. أخيرًا، أبني جدول HTML من خلال التكرار عبر إطار البيانات.
# Build out and call the events API params = { "events": "delivery,injection,bounce,delay,policy_rejection,out_of_band,open,click," "generation_failure,generation_rejection,spam_complaint,list_unsubscribe,link_unsubscribe", "delimiter": ",", "page": "1", "per_page": "10", } api_url = f"{BASE_URL}/events/message" response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params) response_info = response_API.json() new_df = pd.json_normalize(response_info, record_path=["results"]) max_rows = 10 # Max number of results to show in the events table # Sort columns and place timestamp as the first column in the table new_df = new_df.reindex(sorted(new_df.columns), axis=1) cols = ["timestamp"] new_df = new_df[cols + [c for c in new_df.columns if c not in cols]] # Show the new HTML with the events table (note: this table also references table.css) return html.Div([ html.H2("Event Details"), html.Table([ html.Thead( html.Tr([html.Th(col) for col in new_df.columns], className="table_css") ), html.Tbody([ html.Tr([ html.Td(new_df.iloc[i][col], className="table_css") for col in new_df.columns ]) for i in range(min(len(new_df), max_rows)) ]) ]) ])
التي تبدو هكذا في واجهة الاستخدام.

كانت صفحة تفاصيل الحدث أكثر صعوبة قليلاً لأنني لم أعرف أفضل طريقة لعرض جميع مقاييس الأحداث بطريقة سهلة القراءة. فكرت في إضافة معلمات تصفية لهذه الصفحة، ومع ذلك، قررت أن ذلك سيضيف وقتًا كبيرًا إلى هذا المشروع حيث سيتعين على الجدول أن يكون ديناميكيًا (بالإضافة إلى إضافة المعلمات، واستدعاءات الخلفية، وما إلى ذلك). استقريت على عرض جميع الأحداث ووضع الطابع الزمني أولاً (لأنه بدون وضع الطابع الزمني أولاً، لم يكن من السهل قراءة الجدول). في البداية، وجدت أنه مع HTML الخام فقط، كان الجدول صعبًا للغاية على العين. لم يكن هناك أي حدود ولا اختلافات في الألوان بين الرأس والصفوف. لجعل الجدول أسهل في القراءة، كنت قادراً على استخدام CSS داخل Dash.
عرض تفاصيل الحدث (API الأحداث)
الفكرة وراء تفاصيل الحدث هي تقريبًا نفس فكرة لوحة التحكم، باستثناء هذه المرة، أنادي API الأحداث وأحضر جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصنيف API). يمكن زيادتها، ومع ذلك، استقريت على عرض أحدث 10 أحداث لأن المزيد من الأحداث يجعل استدعاء API يستغرق وقتًا أطول. يمكن أن يكون أحد التحسينات الكبيرة هو القدرة على التصفح وإدراج صفحة التالية / الصفحة السابقة في واجهة الاستخدام.
لبناء علامة التبويب (الصفحة) الخاصة بالأحداث، أولاً، أنادي API الأحداث وأحلل استجابة JSON إلى إطار بيانات. ثم أقوم بفرز وإعادة ترتيب إطار البيانات لوضع الطابع الزمني كأول عمود. أخيرًا، أبني جدول HTML من خلال التكرار عبر إطار البيانات.
# Build out and call the events API params = { "events": "delivery,injection,bounce,delay,policy_rejection,out_of_band,open,click," "generation_failure,generation_rejection,spam_complaint,list_unsubscribe,link_unsubscribe", "delimiter": ",", "page": "1", "per_page": "10", } api_url = f"{BASE_URL}/events/message" response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params) response_info = response_API.json() new_df = pd.json_normalize(response_info, record_path=["results"]) max_rows = 10 # Max number of results to show in the events table # Sort columns and place timestamp as the first column in the table new_df = new_df.reindex(sorted(new_df.columns), axis=1) cols = ["timestamp"] new_df = new_df[cols + [c for c in new_df.columns if c not in cols]] # Show the new HTML with the events table (note: this table also references table.css) return html.Div([ html.H2("Event Details"), html.Table([ html.Thead( html.Tr([html.Th(col) for col in new_df.columns], className="table_css") ), html.Tbody([ html.Tr([ html.Td(new_df.iloc[i][col], className="table_css") for col in new_df.columns ]) for i in range(min(len(new_df), max_rows)) ]) ]) ])
التي تبدو هكذا في واجهة الاستخدام.

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



