Ten skrypt jedynie dotyka powierzchni tego, co jest możliwe przy użyciu Pythona, Plotly Dash i naszych interfejsów API.
Prawie rok temu, Tom Mairs, dyrektor ds. sukcesu klienta w Bird, napisał narzędzie do mailerów wykorzystujące Bird APIs. W tym poście kontynuuję tam, gdzie on skończył. Jego narzędzie pozwala na czasową transmisję zadań, ale co jeśli chcemy stworzyć własne pulpity i dzienniki zdarzeń?
Może chcę stworzyć konkretny pulpit dla grupy biznesowej lub pulpit skierowany do klienta, ale nie zapewniać użytkownikom pełnego dostępu do interfejsu Bird UI. Ten skrypt zaledwie dotyka powierzchni tego, co jest możliwe, wykorzystując Python, Plotly Dash oraz nasze API. Podczas budowania pulpitów, które przetwarzają dane z API o dużym wolumenie, pamiętaj, że elementy infrastruktury, takie jak DNS, mogą stać się wąskimi gardłami - doświadczyliśmy problemów skalowania DNS w AWS, które wpłynęły na nasze możliwości przetwarzania danych. Dla entuzjastów wizualnych przepływów pracy, możesz również zbadać integrację Flow Builder z Google Cloud Functions i Vision API w celu dodania automatyzacji zasilanej sztuczną inteligencją do swoich rurociągów przetwarzania danych.
Kiedy zacząłem swoje poszukiwania online, chciałem znaleźć drogę najmniejszego oporu. Mógłbym stworzyć wszystkie pulpity i UI sam w HTML i Pythonie, jednak po pewnym googlowaniu, natrafiłem na Plotly’s Dash, który łatwo integruje się z Pythonem. Wybrałem Dash z 2 powodów: 1) jest open source, i 2) po przeczytaniu dokumentacji wydawało się, że można go łatwo dostosować do tego, co chciałem zrobić. Dash to biblioteka open source, która jest idealna do budowy i wdrażania aplikacji danych z dostosowanym interfejsem użytkownika. To sprawiło, że tworzenie UI było niezwykle proste. Pytanie zatem brzmiało, jak bardzo złożoną chciałem zrobić tę aplikację? Im więcej czasu spędzałem, tym więcej funkcji chciałem dodać.
Dla początkowego projektu chciałem upewnić się, że mam pulpit z dostosowywanymi metrykami i wybieranym czasookresem. Początkowo zacząłem od pulpitu, na którym można było wybrać tylko jedną metrykę z listy rozwijanej. Potem, po otrzymaniu opinii od kolegów, udoskonaliłem pulpit nieco, aby dodać wybór wielokrotny i tytuły osi. Zdecydowałem się również dodać dodatkową kartę do dziennika zdarzeń. Doszedłem do punktu, w którym byłem zadowolony z tego, co miałem jako dobry punkt wyjścia dla każdego, kto chce stworzyć własne pulpit. Dla deweloperów, którzy chcą wprowadzać dane w czasie rzeczywistym do swoich pulpitów, sprawdź nasz przewodnik na temat budowania konsumentów webhook z Azure Functions. Oczywiście umieściłem projekt na Github do klonowania lub branchingu.
Pierwsze kroki
Aby uzyskać dostęp do tej app, musisz upewnić się, że masz zainstalowaną wersję python 3.10 lub wyższą oraz zainstalować następujące biblioteki:
requests
dash
pandas
Następnie wprowadź swój klucz API do App.py i uruchom aplikację. Uruchomi się na http://localhost:8050. Aby uzyskać dalsze informacje na temat wdrażania tego na serwerze dostępnym publicznie (takim jak AWS), zobacz następujące zasoby:
Tworzenie strony Dashboard
Tworzenie strony Event Details
Strona szczegółów wydarzenia była nieco trudniejsza, ponieważ nie wiedziałem, jak najlepiej przedstawić wszystkie metryki wydarzeń w sposób łatwy do odczytania. Rozważałem dodanie parametrów filtrowania do tej strony, jednak zdecydowałem, że to wydłużyłoby znacząco czas tego projektu, ponieważ tabela musiałaby być wtedy dynamiczna (wraz z dodaniem parametrów, wywołań zwrotnych, itp.). Ostatecznie zdecydowałem się pokazać wszystkie wydarzenia z umieszczeniem znacznika czasu na początku (ponieważ bez umieszczenia znacznika czasu na początku, wykres był trudny do odczytania). Początkowo odkryłem, że sam surowy HTML sprawiał, że tabela była niezmiernie trudna dla oczu. Nie było granic ani różnic kolorów między nagłówkiem a wierszami. Aby tabela była łatwiejsza do odczytania, udało mi się użyć CSS w Dash.
Pomysł na szczegóły wydarzenia jest prawie taki sam jak w dashboardzie, z tym wyjątkiem, że tym razem wywołuję Events API i wprowadzam wszystkie wydarzenia. Uwaga: szczegóły wydarzenia pokazują tylko 10 najnowszych wydarzeń (wykorzystując parametr max_rows i filtrowanie API). To można zwiększyć, jednak zdecydowałem się pokazać tylko 10 najnowszych wydarzeń, ponieważ im więcej jest pokazanych wydarzeń, tym dłużej trwa wywołanie API. Jednym z istotnych ulepszeń, które można by wprowadzić, byłaby możliwość paginacji i uwzględnienie Przyciski „Następna strona”/„Poprzednia strona” w interfejsie użytkownika.
Aby zbudować kartę wydarzeń (stronę), najpierw wywołuję Events API i parsuję odpowiedź JSON do ramki danych. Następnie sortuję i zmieniam kolejność ramki danych, aby umieścić znacznik czasu jako pierwszą kolumnę. Wreszcie buduję tabelę HTML, iterując przez ramkę danych.
# Zbuduj i wywołaj 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 = 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 # Maksymalna liczba wyników do pokazania w tabeli wydarzeń # Umieść znacznik czasu jako pierwszą kolumnę w tabeli 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]] # Pokaż nowy HTML z tabelą wydarzeń (uwaga, ta tabela także odnosi się do table.css) return html.Div([ html.H2("Szczegóły wydarzenia"), 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)) ]) ]) ])
Wygląda to tak w interfejsie użytkownika.
Następne Kroki
Dla kogoś, kto chce stworzyć własny pulpit nawigacyjny lub dziennik zdarzeń, to dobry początek. Dzięki personalizacji tutaj, niebo jest limitem.
Jak wspomniano powyżej, niektóre przyszłe ulepszenia, które można wprowadzić, to:
Dodanie analityki dostarczalności do pulpitu nawigacyjnego
Dodanie większej liczby filtrów do pulpitu nawigacyjnego
Możliwe opcje buforowania, aby API nie było wywoływane za każdym razem w celu wyświetlenia stron
Ulepszenia UI
Dodanie filtrowania i paginacji do strony szczegółów zdarzeń
Jestem zainteresowany usłyszeniem jakichkolwiek opinii lub sugestii dotyczących rozwoju tego projektu.
~ Zach Samuels, Bird Senior Solutions Engineer
