أداة لوحات المعلومات مع واجهات برمجة التطبيقات للطيور

البريد الإلكتروني

·

24‏/03‏/2022

أداة لوحات المعلومات مع واجهات برمجة التطبيقات للطيور

النقاط الرئيسية

    • يمكن دمج واجهات برمجة تطبيقات الطيور مع بايثون و 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 لتقوم بعمل استنساخ أو فرع.

البدء

للوصول إلى هذا التطبيق، ستحتاج إلى التأكد من أنك تستخدم بايثون 3.10 أو أحدث وتثبيت المكتبات التالية:

مكتبة بايثون

الغاية

requests

الاتصال بواجهة برمجة التطبيقات مع خدمات بيرد

dash

عرض واجهة المستخدم ولوحة المعلومات

pandas

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

ثم، أدخل مفتاح واجهة برمجة التطبيقات الخاص بك في App.py وقم بتشغيل التطبيق. سيعمل على http://localhost:8050. لمزيد من المعلومات حول نشر هذا على خادم موجه للجمهور (مثل AWS)، راجع الموارد التالية:

إنشاء صفحة لوحة القيادة

أولاً، قم بتهيئة إطار البيانات واللوحة. بدون تهيئة اللوحة، لن تظهر أي لوحة في واجهة المستخدم.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

ثم، قم بإنشاء علامة التبويب الأولى. هذا هو مزيج من استدعاء التطبيق (للتحقق من أي علامة تبويب يتم استخدامها)؛ مع دالة شرطية للتحقق من أي علامة تبويب محددة حاليًا. الكود أدناه يبني فقط لوحة البيانات الفارغة وعناصر واجهة المستخدم (وسنصل إلى علامة تبويب الأحداث لاحقًا). عناصر dcc هي مكونات لأساسية داش ومكونات 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، مجالات الإرسال، الحسابات الفرعية، وتحديد دقة بيانات السلاسل الزمنية. يمكن أن تكون هذه الفلاتر الإضافية جنبًا إلى جنب مع تحليلات القابلية للتسليم تحسينًا في المستقبل لهذا المشروع (سيحتاج التقاط الأخطاء إلى التنفيذ للعملاء الذين ليس لديهم حق الوصول إلى تحليلات القابلية للتسليم).

باستخدام واستدعاء واجهة برمجة التطبيقات للمقاييس، أبني لوحة بيانات مع معلمات المستخدم المختارة والإطار الزمني المحدد. يتم تحديث لوحة البيانات المُهيأة بعد ذلك.

عرض اللوحة (واجهة برمجة التطبيقات لمقاييس السلاسل الزمنية)

# 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

فيما يلي مثال لعدة مقاييس تم اختيارها وإطار زمنيا موسع.


Sparkpost analytics dashboard

ملاحظة: هناك العديد من العناصر المدمجة في رسم البيان تلقائيًا (تحويم، تكبير، تكييف تلقائي).

أولاً، قم بتهيئة إطار البيانات واللوحة. بدون تهيئة اللوحة، لن تظهر أي لوحة في واجهة المستخدم.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

ثم، قم بإنشاء علامة التبويب الأولى. هذا هو مزيج من استدعاء التطبيق (للتحقق من أي علامة تبويب يتم استخدامها)؛ مع دالة شرطية للتحقق من أي علامة تبويب محددة حاليًا. الكود أدناه يبني فقط لوحة البيانات الفارغة وعناصر واجهة المستخدم (وسنصل إلى علامة تبويب الأحداث لاحقًا). عناصر dcc هي مكونات لأساسية داش ومكونات 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، مجالات الإرسال، الحسابات الفرعية، وتحديد دقة بيانات السلاسل الزمنية. يمكن أن تكون هذه الفلاتر الإضافية جنبًا إلى جنب مع تحليلات القابلية للتسليم تحسينًا في المستقبل لهذا المشروع (سيحتاج التقاط الأخطاء إلى التنفيذ للعملاء الذين ليس لديهم حق الوصول إلى تحليلات القابلية للتسليم).

باستخدام واستدعاء واجهة برمجة التطبيقات للمقاييس، أبني لوحة بيانات مع معلمات المستخدم المختارة والإطار الزمني المحدد. يتم تحديث لوحة البيانات المُهيأة بعد ذلك.

عرض اللوحة (واجهة برمجة التطبيقات لمقاييس السلاسل الزمنية)

# 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

فيما يلي مثال لعدة مقاييس تم اختيارها وإطار زمنيا موسع.


Sparkpost analytics dashboard

ملاحظة: هناك العديد من العناصر المدمجة في رسم البيان تلقائيًا (تحويم، تكبير، تكييف تلقائي).

أولاً، قم بتهيئة إطار البيانات واللوحة. بدون تهيئة اللوحة، لن تظهر أي لوحة في واجهة المستخدم.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

ثم، قم بإنشاء علامة التبويب الأولى. هذا هو مزيج من استدعاء التطبيق (للتحقق من أي علامة تبويب يتم استخدامها)؛ مع دالة شرطية للتحقق من أي علامة تبويب محددة حاليًا. الكود أدناه يبني فقط لوحة البيانات الفارغة وعناصر واجهة المستخدم (وسنصل إلى علامة تبويب الأحداث لاحقًا). عناصر dcc هي مكونات لأساسية داش ومكونات 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، مجالات الإرسال، الحسابات الفرعية، وتحديد دقة بيانات السلاسل الزمنية. يمكن أن تكون هذه الفلاتر الإضافية جنبًا إلى جنب مع تحليلات القابلية للتسليم تحسينًا في المستقبل لهذا المشروع (سيحتاج التقاط الأخطاء إلى التنفيذ للعملاء الذين ليس لديهم حق الوصول إلى تحليلات القابلية للتسليم).

باستخدام واستدعاء واجهة برمجة التطبيقات للمقاييس، أبني لوحة بيانات مع معلمات المستخدم المختارة والإطار الزمني المحدد. يتم تحديث لوحة البيانات المُهيأة بعد ذلك.

عرض اللوحة (واجهة برمجة التطبيقات لمقاييس السلاسل الزمنية)

# 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

فيما يلي مثال لعدة مقاييس تم اختيارها وإطار زمنيا موسع.


Sparkpost analytics dashboard

ملاحظة: هناك العديد من العناصر المدمجة في رسم البيان تلقائيًا (تحويم، تكبير، تكييف تلقائي).

إنشاء صفحة تفاصيل الحدث

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

عرض تفاصيل الحدث (واجهة برمجة التطبيقات للأحداث)

فكرة تفاصيل الحدث مشابهة تقريبًا للوحة المعلومات، باستثناء أنني في هذه المرة، أستدعي واجهة برمجة تطبيقات الأحداث وأجلب جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصفية واجهة برمجة التطبيقات). يمكن زيادة هذا العدد، ومع ذلك، استقريت على عرض أحدث 10 أحداث لأنه كلما زاد عدد الأحداث المعروضة، زادت مدة استغراق استدعاء واجهة برمجة التطبيقات. واحدة من التحسينات الكبيرة التي يمكن إجراؤها هي القدرة على تقسيم الصفحات وتضمين صفحة تالية / صفحة سابقة في واجهة المستخدم.

لبناء علامة التبويب الخاصة بالأحداث (الصفحة)، أولاً، أستدعي واجهة برمجة التطبيقات للأحداث وأحلل استجابة 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))
        ])
    ])
])

والتي تبدو بهذه الصورة في واجهة المستخدم.

Sparkpost event details

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

عرض تفاصيل الحدث (واجهة برمجة التطبيقات للأحداث)

فكرة تفاصيل الحدث مشابهة تقريبًا للوحة المعلومات، باستثناء أنني في هذه المرة، أستدعي واجهة برمجة تطبيقات الأحداث وأجلب جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصفية واجهة برمجة التطبيقات). يمكن زيادة هذا العدد، ومع ذلك، استقريت على عرض أحدث 10 أحداث لأنه كلما زاد عدد الأحداث المعروضة، زادت مدة استغراق استدعاء واجهة برمجة التطبيقات. واحدة من التحسينات الكبيرة التي يمكن إجراؤها هي القدرة على تقسيم الصفحات وتضمين صفحة تالية / صفحة سابقة في واجهة المستخدم.

لبناء علامة التبويب الخاصة بالأحداث (الصفحة)، أولاً، أستدعي واجهة برمجة التطبيقات للأحداث وأحلل استجابة 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))
        ])
    ])
])

والتي تبدو بهذه الصورة في واجهة المستخدم.

Sparkpost event details

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

عرض تفاصيل الحدث (واجهة برمجة التطبيقات للأحداث)

فكرة تفاصيل الحدث مشابهة تقريبًا للوحة المعلومات، باستثناء أنني في هذه المرة، أستدعي واجهة برمجة تطبيقات الأحداث وأجلب جميع الأحداث. لاحظ أن تفاصيل الحدث تعرض فقط أحدث 10 أحداث (باستخدام معلمة max_rows وتصفية واجهة برمجة التطبيقات). يمكن زيادة هذا العدد، ومع ذلك، استقريت على عرض أحدث 10 أحداث لأنه كلما زاد عدد الأحداث المعروضة، زادت مدة استغراق استدعاء واجهة برمجة التطبيقات. واحدة من التحسينات الكبيرة التي يمكن إجراؤها هي القدرة على تقسيم الصفحات وتضمين صفحة تالية / صفحة سابقة في واجهة المستخدم.

لبناء علامة التبويب الخاصة بالأحداث (الصفحة)، أولاً، أستدعي واجهة برمجة التطبيقات للأحداث وأحلل استجابة 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))
        ])
    ])
])

والتي تبدو بهذه الصورة في واجهة المستخدم.

Sparkpost event details

الخطوات التالية

لشخص يتطلع إلى إنشاء لوح معلومات أو سجل أحداث خاص به، هذه بداية جيدة. مع مستويات التخصيص هنا، السماء هي الحد.

كما تم مناقشته أعلاه، بعض التحسينات المستقبلية التي يمكن إجراؤها هي:

  • إضافة تحليلات القابلية للتوصيل إلى لوحة المعلومات

  • إضافة المزيد من المرشحات إلى لوحة المعلومات

  • خيارات التخزين المؤقت المحتملة حتى لا يتم استدعاء واجهة برمجة التطبيقات في كل مرة لعرض الصفحات

  • تحسينات واجهة المستخدم

  • إضافة التصفية والترقيم إلى صفحة تفاصيل الحدث

سأكون مهتمًا بـ سماع أي تعليقات أو اقتراحات لتوسيع هذا المشروع.

~ زاك صامويلز، مهندس حلول أول في بيرد

أخبار أخرى

اقرأ المزيد من هذه الفئة

A person is standing at a desk while typing on a laptop.

المنصة الكاملة المدعومة بالذكاء الاصطناعي التي تتوسع مع أعمالك.

© ٢٠٢٦ بيرد

A person is standing at a desk while typing on a laptop.

المنصة الكاملة المدعومة بالذكاء الاصطناعي التي تتوسع مع أعمالك.

© ٢٠٢٦ بيرد

A person is standing at a desk while typing on a laptop.

المنصة الكاملة المدعومة بالذكاء الاصطناعي التي تتوسع مع أعمالك.

© ٢٠٢٦ بيرد