
Dit script raakt slechts de oppervlakte van wat mogelijk is met behulp van Python, Plotly Dash en onze API's.
Bijna een jaar geleden schreef Tom Mairs, Director Customer Success van Bird, een mailer tool met behulp van Bird APIs. In dit bericht pak ik de draad op waar hij was gestopt. Zijn tool maakt tijdige verzending van taken mogelijk, maar wat als we onze eigen dashboards en gebeurtenislogboeken willen maken?
Misschien wil ik een specifiek dashboard maken voor een zakelijke groep of een klantgericht dashboard, maar niet volledige toegang geven tot de Bird UI. Dit script raakt slechts het oppervlak van wat mogelijk is met behulp van Python, Plotly Dash en onze APIs. Bij het bouwen van dashboards die hoge volumina API-gegevens verwerken, moet je je ervan bewust zijn dat infrastructuurcomponenten zoals DNS knelpunten kunnen worden - we hebben AWS DNS schaaluitdagingen ervaren die invloed hadden op onze dataverwerkingsmogelijkheden. Voor liefhebbers van visuele workflows kun je ook Flow Builder integreren met Google Cloud Functions en Vision API om AI-gestuurde automatisering toe te voegen aan je dataverwerkingspijplijnen.
Toen ik mijn zoektocht online begon, wilde ik de weg van de minste weerstand vinden. Ik had alle dashboards en UI zelf kunnen maken in HTML en python, maar na wat Googelen kwam ik Plotly's Dash tegen, dat gemakkelijk integreert met python. Ik koos voor Dash om 2 redenen: 1) het is open source, en 2) na het lezen van de documentatie leek het gemakkelijk aanpasbaar voor wat ik probeerde te doen. Dash is een open-sourcebibliotheek die ideaal is voor het bouwen en implementeren van data-apps met aangepaste gebruikersinterfaces. Dit maakte het creëren van een UI uiterst eenvoudig. De vraag was toen hoe complex ik deze app wilde maken. Hoe meer tijd ik besteedde, hoe meer functies ik wilde toevoegen.
Voor het initiële project wilde ik ervoor zorgen dat ik een dashboard had met aanpasbare statistieken en een selecteerbaar tijdsframe. Aanvankelijk begon ik met een dashboard waar je slechts één statistiek uit de dropdown kon kiezen. Vervolgens, na feedback van collega's, verfijnde ik het dashboard een beetje om multi-select en as-titels toe te voegen. Ik besloot ook een extra tabblad toe te voegen voor een gebeurtenislogboek. Ik kwam op het punt dat ik tevreden was met wat ik had als een goed startpunt voor iedereen die zijn eigen dashboards wilde opzetten. Voor ontwikkelaars die real-time webhook gegevens in hun dashboards willen voeren, bekijk onze gids over het bouwen van webhookconsumenten met Azure Functions. Uiteraard heb ik het project in Github gezet zodat je het kunt klonen of forken.
Aan de slag
Om toegang te krijgen tot deze app, moet je ervoor zorgen dat je python 3.10 of hoger draait en de volgende bibliotheken installeert:
requests
dash
pandas
Voer vervolgens je API-sleutel in App.py in en voer de app uit. Het zal draaien op http://localhost:8050. Voor meer informatie over het implementeren hiervan op een openbaar server (zoals AWS), zie de volgende bronnen:
De Dashboard Pagina Creëren
Het maken van de Event Details-pagina
De evenementen detailpagina was een beetje moeilijker omdat ik niet wist hoe ik alle meetwaarden van de evenementen op een gemakkelijk leesbare manier kon presenteren. Ik overwoog om filterparameters aan deze pagina toe te voegen, maar ik besloot dat dit veel tijd aan dit project zou toevoegen omdat de tabel dan dynamisch zou moeten zijn (samen met het toevoegen van de parameters, callbacks, enz.). Ik koos ervoor om alle evenementen te tonen en de tijdstempel eerst te plaatsen (aangezien zonder de tijdstempel eerst te plaatsen, de grafiek moeilijk leesbaar was). Aanvankelijk vond ik dat alleen met de ruwe HTML de tabel ongelooflijk moeilijk voor de ogen was. Er waren geen randen en geen kleurverschillen voor koptekst versus rijen. Om de tabel gemakkelijker leesbaar te maken, kon ik CSS gebruiken binnen Dash.
Het idee voor de evenementendetails is bijna hetzelfde als het dashboard, behalve dat ik deze keer de Events API aanroep en alle evenementen binnenhaal. Let op dat de evenementendetails alleen de 10 meest recente evenementen tonen (met behulp van de max_rows parameter en API filtering). Dit kan worden verhoogd, maar ik koos ervoor om de 10 meest recente evenementen te tonen omdat hoe meer evenementen worden getoond, hoe langer het API-verzoek duurt. Een significante verbetering die kan worden gemaakt, is de mogelijkheid om te pagineren en een Volgende Pagina / Vorige Pagina in de UI op te nemen.
Om het evenemententabblad (pagina) uit te bouwen, roep ik eerst de Events API aan en parse ik de JSON-reactie in een data frame. Vervolgens sorteer en herorder ik het data frame om de tijdstempel als eerste kolom te plaatsen. Ten slotte bouw ik de HTML-tabel door het data frame te itereren.
Wat er zo uitziet in de UI.

Volgende Stappen
Voor iemand die zijn eigen dashboard of eventlog wil maken, is dit een goed begin. Met de aanpasbaarheid hier is de lucht de limiet.
Zoals hierboven besproken, kunnen enkele toekomstige verbeteringen zijn:
Het toevoegen van verzendbaarheidsanalyses aan het dashboard
Het toevoegen van meer filters aan het dashboard
Mogelijke cache-opties zodat de API niet elke keer wordt aangeroepen om de pagina's weer te geven
UI-verbeteringen
Het toevoegen van filteren en paginering aan de event detailpagina
Ik zou geïnteresseerd zijn in het horen van feedback of suggesties om dit project uit te breiden.
~ Zach Samuels, Bird Senior Solutions Engineer