
Dieses Skript kratzt nur an der Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist.
Vor fast einem Jahr entwickelte Tom Mairs, Birds Direktor für Kundenerfolg, ein Mailer-Tool unter Verwendung von Bird APIs. In diesem Beitrag setze ich fort, wo er aufgehört hat. Sein Tool ermöglicht die zeitgesteuerte Übermittlung von Jobs, aber was, wenn wir unsere eigenen Dashboards und Ereignisprotokolle erstellen möchten?
Vielleicht möchte ich ein spezifisches Dashboard für eine Unternehmensgruppe oder ein kundenorientiertes Dashboard erstellen, ohne den Benutzern vollen Zugriff auf die Bird UI zu geben. Dieses Skript berührt nur die Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist. Bei der Erstellung von Dashboards, die hochvolumige API-Daten verarbeiten, sollten Sie beachten, dass Infrastrukturelemente wie DNS Engpässe werden können – wir haben AWS DNS-Skalierungsprobleme erlebt, die unsere Datenverarbeitungskapazitäten beeinträchtigten. Für visuelle Workflow-Enthusiasten können Sie auch Flow Builder mit Google Cloud Functions und Vision API integrieren, um KI-gestützte Automatisierungen in Ihre Datenverarbeitungspipelines einzuführen.
Als ich mit meiner Suche online begann, wollte ich den Weg des geringsten Widerstands finden. Ich hätte alle Dashboards und UIs selbst in HTML und Python erstellen können, doch nach einiger Google-Suche stieß ich auf Plotly’s Dash, das sich leicht in Python integrieren lässt. Ich habe Dash aus zwei Gründen gewählt: 1) es ist Open Source und 2) nach dem Lesen der Dokumentation schien es leicht anpassbar für das, was ich erreichen wollte. Dash ist eine Open-Source-Bibliothek, die ideal ist zum Erstellen und Bereitstellen von Daten-Apps mit benutzerdefinierten Benutzeroberflächen. Dies machte die Erstellung einer UI extrem einfach. Die Frage war dann, wie komplex ich diese App gestalten wollte? Je mehr Zeit ich investierte, desto mehr Funktionen wollte ich hinzufügen.
Für das erste Projekt wollte ich sicherstellen, dass ich ein Dashboard mit anpassbaren Metriken und einem wählbaren Zeitrahmen hatte. Zunächst begann ich mit einem Dashboard, bei dem man nur eine Metrik aus dem Dropdown-Menü auswählen konnte. Als ich dann Feedback von Kollegen erhielt, verfeinerte ich das Dashboard ein wenig, um eine Mehrfachauswahl und Achsentitel hinzuzufügen. Ich entschied mich auch, einen zusätzlichen Tab für ein Ereignisprotokoll hinzuzufügen. Ich kam an den Punkt, an dem ich mit dem zufrieden war, was ich als guten Ausgangspunkt für jeden hielt, der seine eigenen Dashboards entwickeln möchte. Für Entwickler, die Echtzeit-Webhook-Daten in ihre Dashboards einspeisen möchten, schauen Sie sich unseren Leitfaden zum Erstellen von Webhook-Konsumenten mit Azure Functions an. Natürlich habe ich das Projekt in Github gestellt, damit Sie es klonen oder verzweigen können.
Erste Schritte
Um auf diese App zuzugreifen, müssen Sie sicherstellen, dass Sie Python 3.10 oder höher verwenden und die folgenden Bibliotheken installieren:
requests
dash
pandas
Geben Sie dann Ihren API-Schlüssel in App.py ein und führen Sie die App aus. Sie wird auf http://localhost:8050 laufen. Für weitere Informationen zur Bereitstellung auf einem öffentlich zugänglichen Server (wie z.B. AWS) siehe die folgenden Ressourcen:
Erstellen der Dashboard-Seite
Erstellung der Event Details Page
Die Veranstaltungsdetailseite war etwas schwieriger, da ich nicht wusste, wie ich alle Veranstaltungsmetriken am besten in einer leicht lesbaren Weise präsentieren sollte. Ich erwog, dieser Seite Filterparameter hinzuzufügen, entschied mich jedoch dagegen, da dies diesem Projekt erheblich mehr Zeit kosten würde, da dann die Tabelle dynamisch sein müsste (zusätzlich zu den Parametern, Rückrufen usw.). Ich entschied mich schließlich dafür, alle Ereignisse anzuzeigen und den Zeitstempel zuerst zu platzieren (da ohne den Zeitstempel zuerst zu setzen, die Tabelle nicht leicht zu lesen war). Zunächst stellte ich fest, dass die Tabelle mit nur dem rohen HTML unglaublich schwer zu lesen war. Es gab keine Rahmen und keine Farbunterschiede zwischen Kopfzeile und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.
Die Idee für die Veranstaltungsdetails ist fast die gleiche wie beim Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse einbringe. Beachten Sie, dass die Veranstaltungsdetails nur die 10 neuesten Ereignisse anzeigen (mithilfe des max_rows-Parameters und der API-Filterung). Dies kann erhöht werden, ich entschied mich jedoch, die 10 neuesten Ereignisse anzuzeigen, da je mehr Ereignisse angezeigt werden, desto länger dauert der API-Aufruf. Eine bedeutende Verbesserung könnte die Möglichkeit sein zu paginieren und im UI eine Nächste Seite / Vorherige Seite einzufügen.
Um die Veranstaltungstab (Seite) aufzubauen, rufe ich zunächst die Events API auf und parse die JSON-Antwort in einen Datenrahmen. Dann sortiere und ordne ich den Datenrahmen neu, um den Zeitstempel als erste Spalte zu platzieren. Schließlich baue ich die HTML-Tabelle auf, indem ich den Datenrahmen durchlaufe.
#Erstellen und Aufrufen der 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 = BASE_URL + "/events/message" 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']) max_rows=10 #Maximale Anzahl der in der Ereignistabelle angezeigten Ergebnisse #Platziere Zeitstempel als erste Spalte in der Tabelle 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]] #Zeige das neue HTML mit der Ereignistabelle an (beachten Sie, dass diese Tabelle auch table.css referenziert) 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)) ]) ]) ])
So sieht es in der Benutzeroberfläche aus.

Nächste Schritte
Für jemanden, der ein eigenes Dashboard oder ein Ereignisprotokoll erstellen möchte, ist dies ein guter Anfang. Mit den Anpassungsmöglichkeiten hier sind keine Grenzen gesetzt.
Wie oben besprochen, könnten einige zukünftige Verbesserungen sein:
Hinzugefügt von Zustellbarkeitsanalysen zum Dashboard
Weitere Filter dem Dashboard hinzufügen
Eventuelle Caching-Optionen, damit die API nicht jedes Mal aufgerufen wird, um die Seiten anzuzeigen
UI-Verbesserungen
Filtern und Paginieren der Ereignisseite hinzufügen
Ich wäre daran interessiert, Feedback zu hören oder Vorschläge zur Erweiterung dieses Projekts zu erhalten.
~ Zach Samuels, Bird Senior Solutions Engineer