
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 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 dei lavori, ma cosa succede se vogliamo creare i nostri cruscotti e log di eventi?
Potrei voler creare un cruscotto specifico per un gruppo aziendale o un cruscotto per i clienti, ma non fornire agli utenti l'accesso completo all'interfaccia utente di Bird. Questo script tocca solo la superficie di ciò che è possibile utilizzando Python, Plotly Dash e le nostre API. Quando si costruiscono cruscotti che elaborano dati API ad alto volume, è importante essere consapevoli che componenti di infrastruttura come il DNS possono diventare dei colli di bottiglia - abbiamo affrontato sfide di scalabilità del DNS di AWS che hanno influenzato le nostre capacità di elaborazione dei dati. Per gli appassionati di workflow visivi, potete anche esplorare l'integrazione di Flow Builder con Google Cloud Functions e Vision API per aggiungere automazione potenziata dall'IA ai vostri pipeline di elaborazione dati.
Quando ho iniziato la mia ricerca online, volevo trovare il percorso di minor resistenza. Avrei potuto creare tutti i cruscotti e l'interfaccia 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 ragioni: 1) è open source e 2) dopo aver letto la documentazione sembrava facilmente personalizzabile per ciò che cercavo di fare. Dash è una libreria open source ideale per creare e distribuire applicazioni dati con interfacce utente personalizzate. Questo ha reso la creazione di un'interfaccia utente estremamente semplice. La domanda è diventata poi, quanto complessa volevo rendere quest'app? Più tempo ho passato, più funzionalità volevo aggiungere.
Per il progetto iniziale, volevo assicurarmi di avere un cruscotto con metriche personalizzabili e un intervallo di tempo selezionabile. Inizialmente, ho cominciato con un cruscotto dove potevi scegliere solo una metrica dal menu a tendina. Poi, mentre ricevevo feedback dai colleghi, ho affinato un po' il cruscotto per aggiungere la selezione multipla e i titoli degli assi. Ho anche deciso di aggiungere una scheda aggiuntiva per un log degli eventi. Sono arrivato al punto in cui ero soddisfatto di ciò che avevo come buon punto di partenza per chiunque desideri sviluppare i propri cruscotti. Per gli sviluppatori che vogliono alimentare in tempo reale i dati webhook nei loro cruscotti, date un'occhiata alla nostra guida su come costruire consumatori webhook con Azure Functions. Ovviamente, ho messo il progetto su Github per far sì che possiate clonarlo o crearne una derivazione.
Iniziare
Per accedere a questa app, sarà necessario assicurarsi di eseguire python 3.10 o superiore e installare le seguenti librerie:
requests
dash
pandas
Quindi, inserisci la tua API key in App.py ed esegui l'app. Sarà disponibile su http://localhost:8050. Per ulteriori informazioni sul deployment di questa su un server accessibile al pubblico (come AWS), vedere 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 tutti i metri degli eventi in modo facile da leggere. Ho considerato di aggiungere parametri di filtro 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 tra intestazione e 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 del cruscotto, tranne che questa volta chiamo l'Events API e porto 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 capacità di paginare e includere una Pagina Successiva/Pagina Precedente nell'interfaccia utente.
Per costruire la scheda (pagina) degli eventi, prima chiamo l'Events API e analizzo la risposta JSON in un frame di dati. Poi ordino e riordino il frame di dati per mettere il timestamp come prima colonna. Infine, costruisco la tabella HTML iterando attraverso il frame di dati.
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