Uno strumento di dashboarding con API di uccelli
Zachary Samuels
24 mar 2022
1 min read
Conclusioni principali
Le API di Bird possono essere combinate con Python e Plotly Dash per costruire dashboard potenti e interattive senza necessitare dell'intera UI di Bird.
Il progetto dimostra come visualizzare metriche ed eventi utilizzando le Metrics API e Events API di Bird all'interno di un'app web personalizzata.
Plotly Dash fornisce un framework rapido e open-source per costruire elementi UI come menu a tendina, grafici e tabelle.
Gli sviluppatori possono estendere lo strumento con analisi di deliverability, filtraggio e paginazione per dashboard più ricchi.
I miglioramenti futuri includono caching, un'interfaccia utente migliorata e l'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 potenziate da Bird o portali rivolti ai clienti.
Q&A Highlights
Qual è l'obiettivo di questo progetto di dashboarding?
Dimostra come gli sviluppatori possano utilizzare le Bird API con Python e Plotly Dash per creare dashboard basati sui dati che visualizzano le metriche delle campagne e gli eventi recenti.
Perché usare Plotly Dash per Bird APIs?
Dash è open source, facile da personalizzare e ideale per creare interfacce utente interattive senza richiedere competenze di front-end.
Cosa mostra la dashboard?
Visualizza le metriche delle serie temporali dall'API Bird's Metrics e i dati degli eventi recenti dall'API Events, con opzioni per filtrare e selezionare metriche su intervalli di tempo personalizzati.
Come può essere ulteriormente espanso lo strumento?
Aggiungendo analisi della deliverability, filtri avanzati, memorizzazione nella cache 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 da Bird per estrarre i dati.
Come si inserisce questo progetto nell'ecosistema di Bird?
Illustra come gli open API di Bird possano essere utilizzati per creare dashboard personalizzati e strumenti di reporting per team o clienti senza accesso alla piattaforma completa.
Questo script tocca solo la superficie di ciò che è possibile fare utilizzando Python, Plotly Dash e le nostre API.
Bird Metrics API + Dashboarding con Python
Quasi un anno fa, Tom Mairs, direttore del successo dei clienti di Bird, ha scritto uno strumento di invio mail utilizzando Bird APIs. In questo post, riprendo da dove ha lasciato. Il suo strumento consente la trasmissione temporizzata dei lavori, ma cosa succede se vogliamo creare i nostri dashboard e log degli eventi?
Forse voglio creare un dashboard specifico per un gruppo commerciale o un dashboard per i clienti, ma non fornire agli utenti pieno accesso all'interfaccia di Bird. Questo script sfiora solo la superficie di ciò che è possibile utilizzando Python, Plotly Dash, e le nostre APIs. Quando si costruiscono dashboard che elaborano dati API ad alto volume, siate consapevoli che i componenti dell'infrastruttura come DNS possono diventare colli di bottiglia - abbiamo affrontato sfide di scalabilità DNS con AWS che hanno influenzato le nostre capacità di elaborazione dati. Per gli appassionati di flusso visivo, potete anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata da AI ai vostri pipeline di elaborazione dati.
Quando ho iniziato la mia ricerca online, volevo trovare la via della minore resistenza. Avrei potuto creare tutti i dashboard e le interfacce utente da solo in HTML e python, tuttavia, dopo alcune ricerche su Google, mi sono imbattuto in Plotly’s Dash, 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 estremamente semplice creare un'interfaccia utente. La domanda è diventata, quanto complessa volevo fare quest'app? Più tempo passavo, più caratteristiche volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un dashboard con metriche personalizzabili e un lasso di tempo selezionabile. Inizialmente, ho iniziato con un dashboard dove potevi scegliere solo una metrica dal menu a discesa. Poi, ricevendo feedback dai colleghi, ho raffinato il dashboard un po' per aggiungere la multi-selezione e titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un log degli eventi. Sono arrivato a un punto in cui ero soddisfatto di ciò che avevo come buon punto di partenza per chiunque desideri costruire i propri dashboard. Per gli sviluppatori che vogliono alimentare dati webhook in tempo reale nei loro dashboard, consultate la nostra guida su costruire consumatori di webhook con Azure Functions. Ovviamente, ho messo il progetto su Github per clonare o ramificare.
Bird Metrics API + Dashboarding con Python
Quasi un anno fa, Tom Mairs, direttore del successo dei clienti di Bird, ha scritto uno strumento di invio mail utilizzando Bird APIs. In questo post, riprendo da dove ha lasciato. Il suo strumento consente la trasmissione temporizzata dei lavori, ma cosa succede se vogliamo creare i nostri dashboard e log degli eventi?
Forse voglio creare un dashboard specifico per un gruppo commerciale o un dashboard per i clienti, ma non fornire agli utenti pieno accesso all'interfaccia di Bird. Questo script sfiora solo la superficie di ciò che è possibile utilizzando Python, Plotly Dash, e le nostre APIs. Quando si costruiscono dashboard che elaborano dati API ad alto volume, siate consapevoli che i componenti dell'infrastruttura come DNS possono diventare colli di bottiglia - abbiamo affrontato sfide di scalabilità DNS con AWS che hanno influenzato le nostre capacità di elaborazione dati. Per gli appassionati di flusso visivo, potete anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata da AI ai vostri pipeline di elaborazione dati.
Quando ho iniziato la mia ricerca online, volevo trovare la via della minore resistenza. Avrei potuto creare tutti i dashboard e le interfacce utente da solo in HTML e python, tuttavia, dopo alcune ricerche su Google, mi sono imbattuto in Plotly’s Dash, 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 estremamente semplice creare un'interfaccia utente. La domanda è diventata, quanto complessa volevo fare quest'app? Più tempo passavo, più caratteristiche volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un dashboard con metriche personalizzabili e un lasso di tempo selezionabile. Inizialmente, ho iniziato con un dashboard dove potevi scegliere solo una metrica dal menu a discesa. Poi, ricevendo feedback dai colleghi, ho raffinato il dashboard un po' per aggiungere la multi-selezione e titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un log degli eventi. Sono arrivato a un punto in cui ero soddisfatto di ciò che avevo come buon punto di partenza per chiunque desideri costruire i propri dashboard. Per gli sviluppatori che vogliono alimentare dati webhook in tempo reale nei loro dashboard, consultate la nostra guida su costruire consumatori di webhook con Azure Functions. Ovviamente, ho messo il progetto su Github per clonare o ramificare.
Bird Metrics API + Dashboarding con Python
Quasi un anno fa, Tom Mairs, direttore del successo dei clienti di Bird, ha scritto uno strumento di invio mail utilizzando Bird APIs. In questo post, riprendo da dove ha lasciato. Il suo strumento consente la trasmissione temporizzata dei lavori, ma cosa succede se vogliamo creare i nostri dashboard e log degli eventi?
Forse voglio creare un dashboard specifico per un gruppo commerciale o un dashboard per i clienti, ma non fornire agli utenti pieno accesso all'interfaccia di Bird. Questo script sfiora solo la superficie di ciò che è possibile utilizzando Python, Plotly Dash, e le nostre APIs. Quando si costruiscono dashboard che elaborano dati API ad alto volume, siate consapevoli che i componenti dell'infrastruttura come DNS possono diventare colli di bottiglia - abbiamo affrontato sfide di scalabilità DNS con AWS che hanno influenzato le nostre capacità di elaborazione dati. Per gli appassionati di flusso visivo, potete anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata da AI ai vostri pipeline di elaborazione dati.
Quando ho iniziato la mia ricerca online, volevo trovare la via della minore resistenza. Avrei potuto creare tutti i dashboard e le interfacce utente da solo in HTML e python, tuttavia, dopo alcune ricerche su Google, mi sono imbattuto in Plotly’s Dash, 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 estremamente semplice creare un'interfaccia utente. La domanda è diventata, quanto complessa volevo fare quest'app? Più tempo passavo, più caratteristiche volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un dashboard con metriche personalizzabili e un lasso di tempo selezionabile. Inizialmente, ho iniziato con un dashboard dove potevi scegliere solo una metrica dal menu a discesa. Poi, ricevendo feedback dai colleghi, ho raffinato il dashboard un po' per aggiungere la multi-selezione e titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un log degli eventi. Sono arrivato a un punto in cui ero soddisfatto di ciò che avevo come buon punto di partenza per chiunque desideri costruire i propri dashboard. Per gli sviluppatori che vogliono alimentare dati webhook in tempo reale nei loro dashboard, consultate la nostra guida su costruire consumatori di webhook con Azure Functions. Ovviamente, ho messo il progetto su Github per clonare o ramificare.
Iniziare
Per accedere a questa app, sarà necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
Python Library | Finalità |
|---|---|
requests | Comunicazione API con i servizi Bird |
dash | Rendering UI e dashboard |
pandas | Elaborazione dei dati e generazione di tabelle |
Quindi, inserisci la tua API key in App.py ed esegui l'app. Verrà eseguita su http://localhost:8050. Per ulteriori informazioni sul deployment su un server pubblico (come AWS), consulta le seguenti risorse:
Per accedere a questa app, sarà necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
Python Library | Finalità |
|---|---|
requests | Comunicazione API con i servizi Bird |
dash | Rendering UI e dashboard |
pandas | Elaborazione dei dati e generazione di tabelle |
Quindi, inserisci la tua API key in App.py ed esegui l'app. Verrà eseguita su http://localhost:8050. Per ulteriori informazioni sul deployment su un server pubblico (come AWS), consulta le seguenti risorse:
Per accedere a questa app, sarà necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
Python Library | Finalità |
|---|---|
requests | Comunicazione API con i servizi Bird |
dash | Rendering UI e dashboard |
pandas | Elaborazione dei dati e generazione di tabelle |
Quindi, inserisci la tua API key in App.py ed esegui l'app. Verrà eseguita su http://localhost:8050. Per ulteriori informazioni sul deployment su un server pubblico (come AWS), consulta le seguenti risorse:
Creazione della Dashboard Page
Prima di tutto, inizializza il frame dei dati 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")
Quindi, costruisci la prima tab. Questa è una combinazione di un app callback (per verificare quale tab viene utilizzata) insieme a una funzione condizionale per controllare quale tab è attualmente selezionata. Il codice seguente costruisce solo la dashboard vuota e gli elementi dell'interfaccia utente (arriveremo alla tab degli eventi più avanti). Gli elementi dcc sono i Dash Core Components e gli HTML Components permettono facilmente l'uso di 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 con Dash quanto sia semplice creare un'interfaccia utente dashboard con un dropdown a selezione multipla, e ricercabile. Per disabilitare selezione multipla o ricerca, i parametri per creare un dropdown possono essere facilmente modificati. Ho trovato che la parte più complessa di questo progetto fosse costruire effettivamente il frame dei dati dagli input, nonché far funzionare correttamente l'HTML + CSS nell'interfaccia utente.
L'API Time Series Metrics consente di estrarre 33 metriche individuali in base a un intervallo di data/ora. Puoi filtrare più profondamente per Domini, Campagne, Pool IP, Domini di Invio, Sotto-account, e specificare la Precisione dei dati delle serie temporali. Questi filtri aggiuntivi insieme all'analytics di deliverability potrebbero essere un miglioramento futuro per questo progetto (la gestione degli errori dovrebbe essere implementata per i clienti che non hanno accesso all'analytics di deliverability).
Utilizzando e chiamando l'API Metrics, costruisco una dashboard con i parametri selezionati dall'utente e il timeframe specificato. La dashboard inizializzata viene quindi aggiornata.
Vista Dashboard (Time Series Metrics API)
# 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
Quello che segue è un esempio di metriche multiple selezionate e un intervallo di tempo ampliato.
Nota: ci sono molti elementi integrati automaticamente nel grafico dash (hover, zoom, autoscale).
Prima di tutto, inizializza il frame dei dati 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")
Quindi, costruisci la prima tab. Questa è una combinazione di un app callback (per verificare quale tab viene utilizzata) insieme a una funzione condizionale per controllare quale tab è attualmente selezionata. Il codice seguente costruisce solo la dashboard vuota e gli elementi dell'interfaccia utente (arriveremo alla tab degli eventi più avanti). Gli elementi dcc sono i Dash Core Components e gli HTML Components permettono facilmente l'uso di 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 con Dash quanto sia semplice creare un'interfaccia utente dashboard con un dropdown a selezione multipla, e ricercabile. Per disabilitare selezione multipla o ricerca, i parametri per creare un dropdown possono essere facilmente modificati. Ho trovato che la parte più complessa di questo progetto fosse costruire effettivamente il frame dei dati dagli input, nonché far funzionare correttamente l'HTML + CSS nell'interfaccia utente.
L'API Time Series Metrics consente di estrarre 33 metriche individuali in base a un intervallo di data/ora. Puoi filtrare più profondamente per Domini, Campagne, Pool IP, Domini di Invio, Sotto-account, e specificare la Precisione dei dati delle serie temporali. Questi filtri aggiuntivi insieme all'analytics di deliverability potrebbero essere un miglioramento futuro per questo progetto (la gestione degli errori dovrebbe essere implementata per i clienti che non hanno accesso all'analytics di deliverability).
Utilizzando e chiamando l'API Metrics, costruisco una dashboard con i parametri selezionati dall'utente e il timeframe specificato. La dashboard inizializzata viene quindi aggiornata.
Vista Dashboard (Time Series Metrics API)
# 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
Quello che segue è un esempio di metriche multiple selezionate e un intervallo di tempo ampliato.
Nota: ci sono molti elementi integrati automaticamente nel grafico dash (hover, zoom, autoscale).
Prima di tutto, inizializza il frame dei dati 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")
Quindi, costruisci la prima tab. Questa è una combinazione di un app callback (per verificare quale tab viene utilizzata) insieme a una funzione condizionale per controllare quale tab è attualmente selezionata. Il codice seguente costruisce solo la dashboard vuota e gli elementi dell'interfaccia utente (arriveremo alla tab degli eventi più avanti). Gli elementi dcc sono i Dash Core Components e gli HTML Components permettono facilmente l'uso di 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 con Dash quanto sia semplice creare un'interfaccia utente dashboard con un dropdown a selezione multipla, e ricercabile. Per disabilitare selezione multipla o ricerca, i parametri per creare un dropdown possono essere facilmente modificati. Ho trovato che la parte più complessa di questo progetto fosse costruire effettivamente il frame dei dati dagli input, nonché far funzionare correttamente l'HTML + CSS nell'interfaccia utente.
L'API Time Series Metrics consente di estrarre 33 metriche individuali in base a un intervallo di data/ora. Puoi filtrare più profondamente per Domini, Campagne, Pool IP, Domini di Invio, Sotto-account, e specificare la Precisione dei dati delle serie temporali. Questi filtri aggiuntivi insieme all'analytics di deliverability potrebbero essere un miglioramento futuro per questo progetto (la gestione degli errori dovrebbe essere implementata per i clienti che non hanno accesso all'analytics di deliverability).
Utilizzando e chiamando l'API Metrics, costruisco una dashboard con i parametri selezionati dall'utente e il timeframe specificato. La dashboard inizializzata viene quindi aggiornata.
Vista Dashboard (Time Series Metrics API)
# 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
Quello che segue è un esempio di metriche multiple selezionate e un intervallo di tempo ampliato.
Nota: ci sono molti elementi integrati automaticamente nel grafico dash (hover, zoom, autoscale).
Creazione della pagina Event Details
La pagina dei dettagli dell'evento è stata un po' più difficile perché non sapevo il modo migliore per presentare tutte le metriche degli eventi in un modo facile da leggere. Ho considerato di aggiungere parametri di filtraggio a questa pagina, tuttavia, ho deciso che ciò avrebbe aggiunto un lasso di tempo significativo a questo progetto poiché la tabella dovrebbe quindi essere dinamica (insieme all'aggiunta dei parametri, callbacks, ecc.). Ho deciso di mostrare tutti gli eventi e di posizionare il timestamp per primo (poiché senza mettere il timestamp per primo, il grafico non era facile da leggere). Inizialmente, ho trovato che con solo l'HTML non elaborato, la tabella era incredibilmente difficile da leggere. Non c'erano bordi e nessuna differenza di colore tra intestazione e righe. Per rendere la tabella più facile da leggere, ho potuto utilizzare CSS all'interno di Dash.
Visualizzazione Dettagli Evento (Events API)
L'idea per i dettagli dell'evento è quasi la stessa del dashboard, tranne che questa volta chiamo l'Events API e importo tutti gli eventi. Nota che i dettagli dell'evento mostrano solo i 10 eventi più recenti (utilizzando il parametro max_rows e il filtraggio API). Questo può essere aumentato, tuttavia, ho deciso di mostrare i 10 eventi più recenti perché più eventi vengono mostrati, più tempo 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 degli eventi (pagina), prima chiamo il Events API e analizzo la risposta JSON in un data frame. Poi ordino e riordino il data frame per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il data frame.
# 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.
La pagina dei dettagli dell'evento è stata un po' più difficile perché non sapevo il modo migliore per presentare tutte le metriche degli eventi in un modo facile da leggere. Ho considerato di aggiungere parametri di filtraggio a questa pagina, tuttavia, ho deciso che ciò avrebbe aggiunto un lasso di tempo significativo a questo progetto poiché la tabella dovrebbe quindi essere dinamica (insieme all'aggiunta dei parametri, callbacks, ecc.). Ho deciso di mostrare tutti gli eventi e di posizionare il timestamp per primo (poiché senza mettere il timestamp per primo, il grafico non era facile da leggere). Inizialmente, ho trovato che con solo l'HTML non elaborato, la tabella era incredibilmente difficile da leggere. Non c'erano bordi e nessuna differenza di colore tra intestazione e righe. Per rendere la tabella più facile da leggere, ho potuto utilizzare CSS all'interno di Dash.
Visualizzazione Dettagli Evento (Events API)
L'idea per i dettagli dell'evento è quasi la stessa del dashboard, tranne che questa volta chiamo l'Events API e importo tutti gli eventi. Nota che i dettagli dell'evento mostrano solo i 10 eventi più recenti (utilizzando il parametro max_rows e il filtraggio API). Questo può essere aumentato, tuttavia, ho deciso di mostrare i 10 eventi più recenti perché più eventi vengono mostrati, più tempo 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 degli eventi (pagina), prima chiamo il Events API e analizzo la risposta JSON in un data frame. Poi ordino e riordino il data frame per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il data frame.
# 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.
La pagina dei dettagli dell'evento è stata un po' più difficile perché non sapevo il modo migliore per presentare tutte le metriche degli eventi in un modo facile da leggere. Ho considerato di aggiungere parametri di filtraggio a questa pagina, tuttavia, ho deciso che ciò avrebbe aggiunto un lasso di tempo significativo a questo progetto poiché la tabella dovrebbe quindi essere dinamica (insieme all'aggiunta dei parametri, callbacks, ecc.). Ho deciso di mostrare tutti gli eventi e di posizionare il timestamp per primo (poiché senza mettere il timestamp per primo, il grafico non era facile da leggere). Inizialmente, ho trovato che con solo l'HTML non elaborato, la tabella era incredibilmente difficile da leggere. Non c'erano bordi e nessuna differenza di colore tra intestazione e righe. Per rendere la tabella più facile da leggere, ho potuto utilizzare CSS all'interno di Dash.
Visualizzazione Dettagli Evento (Events API)
L'idea per i dettagli dell'evento è quasi la stessa del dashboard, tranne che questa volta chiamo l'Events API e importo tutti gli eventi. Nota che i dettagli dell'evento mostrano solo i 10 eventi più recenti (utilizzando il parametro max_rows e il filtraggio API). Questo può essere aumentato, tuttavia, ho deciso di mostrare i 10 eventi più recenti perché più eventi vengono mostrati, più tempo 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 degli eventi (pagina), prima chiamo il Events API e analizzo la risposta JSON in un data frame. Poi ordino e riordino il data frame per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il data frame.
# 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.
Passi successivi
Per chi cerca di creare il proprio dashboard o registro eventi, questo è un buon punto di partenza. Con la personalizzazione qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere fatti sono:
Aggiungere analisi di deliverability al dashboard
Aggiungere più filtri al dashboard
Possibili opzioni di caching così che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti UI
Aggiungere filtraggio e paginazione alla pagina dei dettagli degli eventi
Sarei interessato a sentire qualsiasi feedback o suggerimento per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
Per chi cerca di creare il proprio dashboard o registro eventi, questo è un buon punto di partenza. Con la personalizzazione qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere fatti sono:
Aggiungere analisi di deliverability al dashboard
Aggiungere più filtri al dashboard
Possibili opzioni di caching così che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti UI
Aggiungere filtraggio e paginazione alla pagina dei dettagli degli eventi
Sarei interessato a sentire qualsiasi feedback o suggerimento per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
Per chi cerca di creare il proprio dashboard o registro eventi, questo è un buon punto di partenza. Con la personalizzazione qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere fatti sono:
Aggiungere analisi di deliverability al dashboard
Aggiungere più filtri al dashboard
Possibili opzioni di caching così che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti UI
Aggiungere filtraggio e paginazione alla pagina dei dettagli degli eventi
Sarei interessato a sentire qualsiasi feedback o suggerimento per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
