Questo script tocca solo la superficie di ciò che è possibile fare utilizzando Python, Plotly Dash e le nostre API.
Quasi un anno fa, Tom Mairs, direttore del successo dei clienti di Bird, ha scritto uno strumento di mailing utilizzando le Bird APIs. In questo post, riprendo da dove ha lasciato. Il suo strumento consente la trasmissione programmata dei lavori, ma cosa succede se vogliamo creare i nostri dashboard e registri di eventi?
Forse voglio creare un dashboard specifico per un gruppo aziendale o un dashboard orientato ai clienti, ma non fornire agli utenti l'accesso completo alla UI di Bird. Questo script sfiora appena 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, è importante essere consapevoli che componenti di infrastruttura come DNS possono diventare colli di bottiglia - abbiamo sperimentato sfide di scalabilità DNS di AWS che hanno influenzato le nostre capacità di elaborazione dei dati. Per gli appassionati di workflow visivi, puoi anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata dall'AI 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 i dashboard e UI 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 ideale per costruire e distribuire app di dati con interfacce utente personalizzate. Questo ha reso estremamente semplice la creazione di una UI. La domanda è diventata quindi, quanto complesso volevo fare questa app? Più tempo passavo, 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 dove si poteva scegliere solo una metrica dal menu a tendina. Poi, quando ho ricevuto feedback dai colleghi, ho perfezionato il dashboard per aggiungere la selezione multipla e titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un registro degli eventi. Sono arrivato al 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, leggi la nostra guida su come costruire consumatori di webhook con Azure Functions. Ovviamente, ho inserito il progetto su Github per permetterti di clonare o ramificare.
Iniziare
Per accedere a questa app, è necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
requests
dash
pandas
Quindi, inserisci la tua chiave API in App.py ed esegui l'app. Verrà eseguito su http://localhost:8050. Per ulteriori informazioni su come distribuire questa su un server rivolto al pubblico (come AWS), consulta le seguenti risorse:
Creazione della Dashboard Page
Creazione della pagina Event Details
La pagina dei dettagli dell'evento era un po' più difficile perché non sapevo il modo migliore per presentare tutte le metriche degli eventi in modo facile da leggere. Ho considerato l'aggiunta di parametri di filtraggio a questa pagina, tuttavia, ho deciso che ciò avrebbe aggiunto un tempo significativo a questo progetto poiché la tabella avrebbe dovuto essere dinamica (insieme all'aggiunta dei parametri, callback, 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 scoperto che con solo l'HTML grezzo, la tabella era incredibilmente difficile da leggere. Non c'erano bordi e nessuna differenza di colore per l'intestazione rispetto alle righe. Per rendere la tabella più facile da leggere, sono stato in grado di utilizzare CSS all'interno di Dash.
L'idea per i dettagli dell'evento è quasi la stessa della dashboard, tranne che questa volta, chiamo il Events API e inserisco 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 sono 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 creare la scheda degli eventi (pagina), prima chiamo l'Events API e analizzo la risposta JSON in un data frame. Quindi ordino e riordino il data frame per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il data frame.
#Costruire e chiamare gli eventi 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 #Numero massimo di risultati visualizzati nella tabella eventi #Posizionare il timestamp come prima colonna nella tabella 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]] #Mostra il nuovo HTML con la tabella eventi (nota, questa tabella fa riferimento anche a table.css) return html.Div([ html.H2("Dettagli Evento"), 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 cruscotto o registro eventi, questo è un buon inizio. Con la personalizzazione qui, il cielo è il limite.
Come discusso sopra, alcuni miglioramenti futuri che potrebbero essere apportati sono:
Aggiunta di analisi di deliverabilità al cruscotto
Aggiunta di più filtri al cruscotto
Possibili opzioni di caching in modo che l'API non venga chiamata ogni volta per visualizzare le pagine
Miglioramenti UI
Aggiunta di filtri e paginazione alla pagina dei dettagli evento
Sarei interessato a ricevere qualsiasi feedback o suggerimenti per espandere questo progetto.
~ Zach Samuels, Bird Senior Solutions Engineer
