Uno strumento di dashboarding con le API di Bird
Zachary Samuels
24 mar 2022
1 min read
Punti Chiave
Le API di Bird possono essere combinate con Python e Plotly Dash per costruire dashboard potenti e interattive senza bisogno dell'interfaccia utente completa di Bird.
Il progetto dimostra come visualizzare metriche ed eventi utilizzando l'API delle metriche di Bird e l'API degli eventi all'interno di un'app web personalizzata.
Plotly Dash fornisce un framework rapido e open-source per costruire elementi UI come menu a discesa, grafici e tabelle.
Gli sviluppatori possono estendere lo strumento con analisi di deliverability, filtri e paginazione per dashboard più ricche.
I futuri miglioramenti includono caching, interfaccia utente migliorata e integrazione con altri prodotti Bird o API di terze parti.
Il codice sorgente (disponibile su GitHub) offre un forte punto di partenza per chiunque voglia costruire dashboard alimentate da Bird o portali per i clienti.
Punti salienti del Q&A
Qual è l'obiettivo di questo progetto di dashboard?
Dimostra come gli sviluppatori possono utilizzare le API di Bird con Python e Plotly Dash per creare dashboard basate sui dati che visualizzano le metriche delle campagne e gli eventi recenti.
Perché utilizzare Plotly Dash per le API degli uccelli?
Dash è open source, facile da personalizzare e ideale per creare interfacce utente interattive senza richiedere competenze di front-end.
Cosa mostra il pannello di controllo?
Visualizza le metriche delle serie temporali dall'API di Metrics di Bird e i dati sugli eventi recenti dall'API degli eventi, con opzioni per filtrare e selezionare metriche su intervalli di tempo personalizzati.
Come può essere ulteriormente ampliato lo strumento?
Aggiungendo analisi di deliverabilità, filtri avanzati, caching dei dati e paginazione per grandi set di dati per migliorare le prestazioni e l'usabilità.
Quali competenze o strumenti sono necessari per gestirlo?
Conoscenze di base di Python e installazione di requests, dash e pandas. È necessaria una chiave API di Bird per estrarre i dati.
Come si inserisce questo progetto nell'ecosistema di Bird?
Illustra come le API aperte di Bird possono essere sfruttate per creare dashboard personalizzate e strumenti di reporting per team o clienti senza accesso all'intera piattaforma.
Questo script tocca solo la superficie di ciò che è possibile utilizzare Python, Plotly Dash e le nostre API.
API di Bird Metrics + Dashboarding con Python
Quasi un anno fa, Tom Mairs, direttore del successo clienti di Bird, ha scritto uno strumento di mailer utilizzando le API di Bird. In questo post, riprendo da dove aveva lasciato. Il suo strumento consente la trasmissione temporizzata di lavori, ma cosa succede se vogliamo creare i nostri dashboard e registri eventi?
Forse voglio creare un dashboard specifico per un gruppo aziendale o un dashboard rivolto ai clienti, ma non fornire agli utenti accesso completo all'interfaccia utente di Bird. Questo script tocca solo la superficie di ciò che è possibile utilizzare Python, Plotly Dash, e le nostre API. Quando si costruiscono dashboard che elaborano dati API ad alto volume, è importante essere consapevoli che componenti infrastrutturali come il DNS possono diventare colli di bottiglia - abbiamo sperimentato sfide di scalabilità DNS su AWS che hanno influenzato le nostre capacità di elaborazione dei dati. Per gli appassionati di flussi di lavoro visivi, puoi anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata dall'IA alle tue pipeline di elaborazione dei dati.
Quando ho iniziato la mia ricerca online, volevo trovare il percorso di minor resistenza. Avrei potuto creare tutti gli dashboard e l'UI da solo in HTML e python, tuttavia, dopo alcune ricerche su Google, ho trovato Dash di Plotly, che si integra facilmente con python. Ho scelto Dash per 2 motivi: 1) è open source, e 2) dopo aver letto la documentazione sembrava facilmente personalizzabile per ciò che stavo cercando di fare. Dash è una libreria open-source che è ideale per costruire e distribuire app di dati con interfacce utente personalizzate. Questo ha reso la creazione di un'interfaccia utente estremamente semplice. La domanda è quindi diventata, quanto complesso volevo rendere quest'app? Più tempo spendevo, più funzionalità volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un dashboard con metriche personalizzabili e un intervallo di tempo selezionabile. Inizialmente, ho iniziato con un dashboard in cui potevi scegliere solo una metrica dal menu a discesa. Poi, mentre ricevevo feedback dai colleghi, ho affinato un po' il dashboard per aggiungere la selezione multipla e i titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un registro eventi. Sono arrivato al punto in cui ero soddisfatto di avere un buon punto di partenza per chiunque desiderasse costruire i propri dashboard. Per gli sviluppatori che vogliono alimentare dati webhook in tempo reale nei loro dashboard, dai un'occhiata alla nostra guida su come costruire consumatori webhook con Azure Functions. Naturalmente, ho messo il progetto su Github per te da clonare o ramificare.
API di Bird Metrics + Dashboarding con Python
Quasi un anno fa, Tom Mairs, direttore del successo clienti di Bird, ha scritto uno strumento di mailer utilizzando le API di Bird. In questo post, riprendo da dove aveva lasciato. Il suo strumento consente la trasmissione temporizzata di lavori, ma cosa succede se vogliamo creare i nostri dashboard e registri eventi?
Forse voglio creare un dashboard specifico per un gruppo aziendale o un dashboard rivolto ai clienti, ma non fornire agli utenti accesso completo all'interfaccia utente di Bird. Questo script tocca solo la superficie di ciò che è possibile utilizzare Python, Plotly Dash, e le nostre API. Quando si costruiscono dashboard che elaborano dati API ad alto volume, è importante essere consapevoli che componenti infrastrutturali come il DNS possono diventare colli di bottiglia - abbiamo sperimentato sfide di scalabilità DNS su AWS che hanno influenzato le nostre capacità di elaborazione dei dati. Per gli appassionati di flussi di lavoro visivi, puoi anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata dall'IA alle tue pipeline di elaborazione dei dati.
Quando ho iniziato la mia ricerca online, volevo trovare il percorso di minor resistenza. Avrei potuto creare tutti gli dashboard e l'UI da solo in HTML e python, tuttavia, dopo alcune ricerche su Google, ho trovato Dash di Plotly, che si integra facilmente con python. Ho scelto Dash per 2 motivi: 1) è open source, e 2) dopo aver letto la documentazione sembrava facilmente personalizzabile per ciò che stavo cercando di fare. Dash è una libreria open-source che è ideale per costruire e distribuire app di dati con interfacce utente personalizzate. Questo ha reso la creazione di un'interfaccia utente estremamente semplice. La domanda è quindi diventata, quanto complesso volevo rendere quest'app? Più tempo spendevo, più funzionalità volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un dashboard con metriche personalizzabili e un intervallo di tempo selezionabile. Inizialmente, ho iniziato con un dashboard in cui potevi scegliere solo una metrica dal menu a discesa. Poi, mentre ricevevo feedback dai colleghi, ho affinato un po' il dashboard per aggiungere la selezione multipla e i titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un registro eventi. Sono arrivato al punto in cui ero soddisfatto di avere un buon punto di partenza per chiunque desiderasse costruire i propri dashboard. Per gli sviluppatori che vogliono alimentare dati webhook in tempo reale nei loro dashboard, dai un'occhiata alla nostra guida su come costruire consumatori webhook con Azure Functions. Naturalmente, ho messo il progetto su Github per te da clonare o ramificare.
API di Bird Metrics + Dashboarding con Python
Quasi un anno fa, Tom Mairs, direttore del successo clienti di Bird, ha scritto uno strumento di mailer utilizzando le API di Bird. In questo post, riprendo da dove aveva lasciato. Il suo strumento consente la trasmissione temporizzata di lavori, ma cosa succede se vogliamo creare i nostri dashboard e registri eventi?
Forse voglio creare un dashboard specifico per un gruppo aziendale o un dashboard rivolto ai clienti, ma non fornire agli utenti accesso completo all'interfaccia utente di Bird. Questo script tocca solo la superficie di ciò che è possibile utilizzare Python, Plotly Dash, e le nostre API. Quando si costruiscono dashboard che elaborano dati API ad alto volume, è importante essere consapevoli che componenti infrastrutturali come il DNS possono diventare colli di bottiglia - abbiamo sperimentato sfide di scalabilità DNS su AWS che hanno influenzato le nostre capacità di elaborazione dei dati. Per gli appassionati di flussi di lavoro visivi, puoi anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata dall'IA alle tue pipeline di elaborazione dei dati.
Quando ho iniziato la mia ricerca online, volevo trovare il percorso di minor resistenza. Avrei potuto creare tutti gli dashboard e l'UI da solo in HTML e python, tuttavia, dopo alcune ricerche su Google, ho trovato Dash di Plotly, che si integra facilmente con python. Ho scelto Dash per 2 motivi: 1) è open source, e 2) dopo aver letto la documentazione sembrava facilmente personalizzabile per ciò che stavo cercando di fare. Dash è una libreria open-source che è ideale per costruire e distribuire app di dati con interfacce utente personalizzate. Questo ha reso la creazione di un'interfaccia utente estremamente semplice. La domanda è quindi diventata, quanto complesso volevo rendere quest'app? Più tempo spendevo, più funzionalità volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un dashboard con metriche personalizzabili e un intervallo di tempo selezionabile. Inizialmente, ho iniziato con un dashboard in cui potevi scegliere solo una metrica dal menu a discesa. Poi, mentre ricevevo feedback dai colleghi, ho affinato un po' il dashboard per aggiungere la selezione multipla e i titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un registro eventi. Sono arrivato al punto in cui ero soddisfatto di avere un buon punto di partenza per chiunque desiderasse costruire i propri dashboard. Per gli sviluppatori che vogliono alimentare dati webhook in tempo reale nei loro dashboard, dai un'occhiata alla nostra guida su come costruire consumatori webhook con Azure Functions. Naturalmente, ho messo il progetto su Github per te da clonare o ramificare.
Iniziare
Per accedere a questa app, è necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
Library Python | Scopo |
|---|---|
requests | Comunicazione API con i servizi di Bird |
dash | Rendering dell'interfaccia utente e della dashboard |
pandas | Elaborazione dei dati e generazione di tabelle |
Quindi, inserisci la tua chiave API in App.py e avvia l'app. Sarà in esecuzione su http://localhost:8050. Per ulteriori informazioni su come distribuirlo su un server pubblico (come AWS), vedere le seguenti risorse:
Per accedere a questa app, è necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
Library Python | Scopo |
|---|---|
requests | Comunicazione API con i servizi di Bird |
dash | Rendering dell'interfaccia utente e della dashboard |
pandas | Elaborazione dei dati e generazione di tabelle |
Quindi, inserisci la tua chiave API in App.py e avvia l'app. Sarà in esecuzione su http://localhost:8050. Per ulteriori informazioni su come distribuirlo su un server pubblico (come AWS), vedere le seguenti risorse:
Per accedere a questa app, è necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
Library Python | Scopo |
|---|---|
requests | Comunicazione API con i servizi di Bird |
dash | Rendering dell'interfaccia utente e della dashboard |
pandas | Elaborazione dei dati e generazione di tabelle |
Quindi, inserisci la tua chiave API in App.py e avvia l'app. Sarà in esecuzione su http://localhost:8050. Per ulteriori informazioni su come distribuirlo su un server pubblico (come AWS), vedere le seguenti risorse:
Creazione della pagina del Dashboard
Per prima cosa, inizializzare il data frame e la dashboard. Senza inizializzare la dashboard, nessuna dashboard apparirà nell'interfaccia utente.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Successivamente, costruire il primo tab. Questa è una combinazione di un callback dell'app (per controllare quale tab è in uso); insieme a una funzione condizionale per verificare quale tab è attualmente selezionato. Il codice sottostante costruisce solo la dashboard vuota e gli elementi dell'interfaccia (arriveremo al tab degli eventi più tardi). Gli elementi dcc sono i Dash Core Components e i HTML Components consentono facilmente di utilizzare HTML nell'interfaccia utente.
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)
Nota quanto sia semplice creare un'interfaccia dashboard con un dropdown multi-selezionato e ricercabile. Per disabilitare la multi-selezione o la ricerca, i parametri per creare un dropdown possono essere facilmente modificati. Ho scoperto che la parte più complessa di questo progetto era costruire il data frame effettivo a partire dagli input, così come fare in modo che l'HTML + CSS funzionassero correttamente nell'interfaccia utente.
La API delle metriche della serie temporale consente di estrarre 33 metriche individuali in base a un intervallo di date/ore. È possibile filtrare ulteriormente per Domini, Campagne, Pool IP, Domini di Invio, Sottoconti e specificare la Precisione dei dati delle serie temporali. Questi filtri aggiuntivi insieme alle analisi di consegna potrebbero essere un futuro miglioramento per questo progetto (sarebbe necessario implementare la gestione degli errori per i clienti che non hanno accesso alle analisi di consegna).
Utilizzando e chiamando l' API delle metriche, costruisco una dashboard con i parametri selezionati dall'utente e il periodo di tempo specificato. La dashboard inizializzata viene quindi aggiornata.
Visualizzazione Dashboard (API delle Metriche della Serie Temporale)
# 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
Il seguente è un esempio di più metriche selezionate e un periodo di tempo espanso.
Nota: ci sono molti elementi integrati automaticamente nel grafico dash (passa il mouse, zoom, autoscale).
Per prima cosa, inizializzare il data frame e la dashboard. Senza inizializzare la dashboard, nessuna dashboard apparirà nell'interfaccia utente.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Successivamente, costruire il primo tab. Questa è una combinazione di un callback dell'app (per controllare quale tab è in uso); insieme a una funzione condizionale per verificare quale tab è attualmente selezionato. Il codice sottostante costruisce solo la dashboard vuota e gli elementi dell'interfaccia (arriveremo al tab degli eventi più tardi). Gli elementi dcc sono i Dash Core Components e i HTML Components consentono facilmente di utilizzare HTML nell'interfaccia utente.
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)
Nota quanto sia semplice creare un'interfaccia dashboard con un dropdown multi-selezionato e ricercabile. Per disabilitare la multi-selezione o la ricerca, i parametri per creare un dropdown possono essere facilmente modificati. Ho scoperto che la parte più complessa di questo progetto era costruire il data frame effettivo a partire dagli input, così come fare in modo che l'HTML + CSS funzionassero correttamente nell'interfaccia utente.
La API delle metriche della serie temporale consente di estrarre 33 metriche individuali in base a un intervallo di date/ore. È possibile filtrare ulteriormente per Domini, Campagne, Pool IP, Domini di Invio, Sottoconti e specificare la Precisione dei dati delle serie temporali. Questi filtri aggiuntivi insieme alle analisi di consegna potrebbero essere un futuro miglioramento per questo progetto (sarebbe necessario implementare la gestione degli errori per i clienti che non hanno accesso alle analisi di consegna).
Utilizzando e chiamando l' API delle metriche, costruisco una dashboard con i parametri selezionati dall'utente e il periodo di tempo specificato. La dashboard inizializzata viene quindi aggiornata.
Visualizzazione Dashboard (API delle Metriche della Serie Temporale)
# 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
Il seguente è un esempio di più metriche selezionate e un periodo di tempo espanso.
Nota: ci sono molti elementi integrati automaticamente nel grafico dash (passa il mouse, zoom, autoscale).
Per prima cosa, inizializzare il data frame e la dashboard. Senza inizializzare la dashboard, nessuna dashboard apparirà nell'interfaccia utente.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Successivamente, costruire il primo tab. Questa è una combinazione di un callback dell'app (per controllare quale tab è in uso); insieme a una funzione condizionale per verificare quale tab è attualmente selezionato. Il codice sottostante costruisce solo la dashboard vuota e gli elementi dell'interfaccia (arriveremo al tab degli eventi più tardi). Gli elementi dcc sono i Dash Core Components e i HTML Components consentono facilmente di utilizzare HTML nell'interfaccia utente.
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)
Nota quanto sia semplice creare un'interfaccia dashboard con un dropdown multi-selezionato e ricercabile. Per disabilitare la multi-selezione o la ricerca, i parametri per creare un dropdown possono essere facilmente modificati. Ho scoperto che la parte più complessa di questo progetto era costruire il data frame effettivo a partire dagli input, così come fare in modo che l'HTML + CSS funzionassero correttamente nell'interfaccia utente.
La API delle metriche della serie temporale consente di estrarre 33 metriche individuali in base a un intervallo di date/ore. È possibile filtrare ulteriormente per Domini, Campagne, Pool IP, Domini di Invio, Sottoconti e specificare la Precisione dei dati delle serie temporali. Questi filtri aggiuntivi insieme alle analisi di consegna potrebbero essere un futuro miglioramento per questo progetto (sarebbe necessario implementare la gestione degli errori per i clienti che non hanno accesso alle analisi di consegna).
Utilizzando e chiamando l' API delle metriche, costruisco una dashboard con i parametri selezionati dall'utente e il periodo di tempo specificato. La dashboard inizializzata viene quindi aggiornata.
Visualizzazione Dashboard (API delle Metriche della Serie Temporale)
# 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
Il seguente è un esempio di più metriche selezionate e un periodo di tempo espanso.
Nota: ci sono molti elementi integrati automaticamente nel grafico dash (passa il mouse, zoom, autoscale).
Creare la pagina dei dettagli dell'evento
I dettagli dell'evento sono stati un po' più difficili perché non sapevo qual era il modo migliore per presentare tutti i metriche degli eventi in modo facilmente leggibile. Ho considerato di aggiungere parametri di filtro a questa pagina, tuttavia, ho deciso che ciò avrebbe comportato un notevole aumento del tempo per questo progetto, poiché la tabella sarebbe quindi dovuta essere dinamica (insieme all'aggiunta dei parametri, callback, ecc.). Ho deciso di mostrare tutti gli eventi e di posizionare il timestamp per primo (dato che senza mettere il timestamp per primo, il grafico non era facile da leggere). Inizialmente, ho scoperto che con solo l'HTML grezzo, la tabella era incredibilmente difficile da sopportare. Non c'erano bordi e nessuna differenza di colore tra intestazione e righe. Per rendere la tabella più facile da leggere, sono riuscito a usare CSS all'interno di Dash.
Dettagli dell'Evento (API Eventi)
L'idea per i dettagli dell'evento è quasi la stessa del cruscotto, tranne per il fatto che questa volta chiamo l'API Eventi e porto tutti gli eventi. Nota che i dettagli dell'evento mostrano solo gli ultimi 10 eventi (utilizzando il parametro max_rows e il filtraggio dell'API). Questo può essere aumentato, tuttavia, ho deciso di mostrare gli ultimi 10 eventi perché più eventi vengono mostrati, più a lungo impiega la chiamata API. Un miglioramento significativo che potrebbe essere fatto sarebbe la possibilità di paginare e includere una Pagina Successiva / Pagina Precedente nell'interfaccia utente.
Per costruire la scheda (pagina) degli eventi, prima chiamo l'API Eventi e analizzo la risposta JSON in un dataframe. Poi ordino e riorganizzo il dataframe per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il dataframe.
# 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)) ]) ]) ])
Che appare così nell'interfaccia utente.
I dettagli dell'evento sono stati un po' più difficili perché non sapevo qual era il modo migliore per presentare tutti i metriche degli eventi in modo facilmente leggibile. Ho considerato di aggiungere parametri di filtro a questa pagina, tuttavia, ho deciso che ciò avrebbe comportato un notevole aumento del tempo per questo progetto, poiché la tabella sarebbe quindi dovuta essere dinamica (insieme all'aggiunta dei parametri, callback, ecc.). Ho deciso di mostrare tutti gli eventi e di posizionare il timestamp per primo (dato che senza mettere il timestamp per primo, il grafico non era facile da leggere). Inizialmente, ho scoperto che con solo l'HTML grezzo, la tabella era incredibilmente difficile da sopportare. Non c'erano bordi e nessuna differenza di colore tra intestazione e righe. Per rendere la tabella più facile da leggere, sono riuscito a usare CSS all'interno di Dash.
Dettagli dell'Evento (API Eventi)
L'idea per i dettagli dell'evento è quasi la stessa del cruscotto, tranne per il fatto che questa volta chiamo l'API Eventi e porto tutti gli eventi. Nota che i dettagli dell'evento mostrano solo gli ultimi 10 eventi (utilizzando il parametro max_rows e il filtraggio dell'API). Questo può essere aumentato, tuttavia, ho deciso di mostrare gli ultimi 10 eventi perché più eventi vengono mostrati, più a lungo impiega la chiamata API. Un miglioramento significativo che potrebbe essere fatto sarebbe la possibilità di paginare e includere una Pagina Successiva / Pagina Precedente nell'interfaccia utente.
Per costruire la scheda (pagina) degli eventi, prima chiamo l'API Eventi e analizzo la risposta JSON in un dataframe. Poi ordino e riorganizzo il dataframe per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il dataframe.
# 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)) ]) ]) ])
Che appare così nell'interfaccia utente.
I dettagli dell'evento sono stati un po' più difficili perché non sapevo qual era il modo migliore per presentare tutti i metriche degli eventi in modo facilmente leggibile. Ho considerato di aggiungere parametri di filtro a questa pagina, tuttavia, ho deciso che ciò avrebbe comportato un notevole aumento del tempo per questo progetto, poiché la tabella sarebbe quindi dovuta essere dinamica (insieme all'aggiunta dei parametri, callback, ecc.). Ho deciso di mostrare tutti gli eventi e di posizionare il timestamp per primo (dato che senza mettere il timestamp per primo, il grafico non era facile da leggere). Inizialmente, ho scoperto che con solo l'HTML grezzo, la tabella era incredibilmente difficile da sopportare. Non c'erano bordi e nessuna differenza di colore tra intestazione e righe. Per rendere la tabella più facile da leggere, sono riuscito a usare CSS all'interno di Dash.
Dettagli dell'Evento (API Eventi)
L'idea per i dettagli dell'evento è quasi la stessa del cruscotto, tranne per il fatto che questa volta chiamo l'API Eventi e porto tutti gli eventi. Nota che i dettagli dell'evento mostrano solo gli ultimi 10 eventi (utilizzando il parametro max_rows e il filtraggio dell'API). Questo può essere aumentato, tuttavia, ho deciso di mostrare gli ultimi 10 eventi perché più eventi vengono mostrati, più a lungo impiega la chiamata API. Un miglioramento significativo che potrebbe essere fatto sarebbe la possibilità di paginare e includere una Pagina Successiva / Pagina Precedente nell'interfaccia utente.
Per costruire la scheda (pagina) degli eventi, prima chiamo l'API Eventi e analizzo la risposta JSON in un dataframe. Poi ordino e riorganizzo il dataframe per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il dataframe.
# 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)) ]) ]) ])
Che appare così nell'interfaccia utente.
Prossimi passi
Per qualcuno che cerca di creare il proprio dashboard o registro eventi, questo è un buon inizio. Con la personalizzabilità qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere apportati sono:
Aggiungere analisi di deliverabilità al dashboard
Aggiungere più filtri al dashboard
Possibili opzioni di caching in modo che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti dell'interfaccia utente
Aggiungere filtri e paginazione alla pagina dei dettagli dell'evento
Sarei interessato a sentire eventuali feedback o suggerimenti per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
Per qualcuno che cerca di creare il proprio dashboard o registro eventi, questo è un buon inizio. Con la personalizzabilità qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere apportati sono:
Aggiungere analisi di deliverabilità al dashboard
Aggiungere più filtri al dashboard
Possibili opzioni di caching in modo che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti dell'interfaccia utente
Aggiungere filtri e paginazione alla pagina dei dettagli dell'evento
Sarei interessato a sentire eventuali feedback o suggerimenti per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
Per qualcuno che cerca di creare il proprio dashboard o registro eventi, questo è un buon inizio. Con la personalizzabilità qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere apportati sono:
Aggiungere analisi di deliverabilità al dashboard
Aggiungere più filtri al dashboard
Possibili opzioni di caching in modo che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti dell'interfaccia utente
Aggiungere filtri e paginazione alla pagina dei dettagli dell'evento
Sarei interessato a sentire eventuali feedback o suggerimenti per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
