Narzędzie do tworzenia pulpitów z interfejsami API ptaków
Zachary Samuels
24 mar 2022
1 min read
Najważniejsze informacje
Interfejsy API ptaków można połączyć z Pythonem i Plotly Dash, aby zbudować potężne, interaktywne pulpity nawigacyjne bez potrzeby korzystania z pełnego interfejsu użytkownika Bird.
Projekt pokazuje, jak wizualizować metryki i wydarzenia za pomocą interfejsu API metryk i interfejsu API zdarzeń Bird w niestandardowej aplikacji internetowej.
Plotly Dash zapewnia szybkie, otwarte źródło do budowania elementów interfejsu użytkownika, takich jak rozwijane listy, wykresy i tabele.
Deweloperzy mogą rozszerzać narzędzie o analizę dostarczalności, filtrowanie i paginację, aby uzyskać bogatsze pulpity nawigacyjne.
Przyszłe ulepszenia obejmują buforowanie, ulepszony interfejs użytkownika oraz integrację z innymi produktami Bird lub interfejsami API stron trzecich.
Baza kodu (dostępna na GitHub) stanowi mocny punkt wyjścia dla każdego, kto chce zbudować pulpity nawigacyjne oparte na Bird lub portale dla klientów.
Podsumowanie pytań i odpowiedzi
Jaki jest cel tego projektu dashboardowego?
Pokazuje, jak deweloperzy mogą korzystać z Bird APIs w Pythonie i Plotly Dash, aby tworzyć oparte na danych pulpitowe, które wizualizują metryki kampanii i ostatnie wydarzenia.
Dlaczego używać Plotly Dash do interfejsów API ptaków?
Dash jest open source, łatwy do dostosowania i idealny do tworzenia interaktywnych interfejsów użytkownika bez potrzeby posiadania wiedzy w zakresie front-endu.
Co wyświetla panel kontrolny?
Wizualizuje metryki czasowe z API Metryki Bird oraz dane o recentnych zdarzeniach z API Zdarzeń, z opcjami filtrowania i wybierania metryk w niestandardowych zakresach czasowych.
Jak można jeszcze bardziej rozszerzyć to narzędzie?
Poprzez dodanie analityki dostarczalności, zaawansowanych filtrów, cachowania danych oraz paginacji dla dużych zbiorów danych w celu poprawy wydajności i użyteczności.
Jakie umiejętności lub narzędzia są potrzebne do jej uruchomienia?
Podstawowa wiedza o Pythonie i instalacja bibliotek requests, dash oraz pandas. Klucz API z Bird jest wymagany, aby pobrać dane.
Jak ten projekt wpisuje się w ekosystem Birds?
Ilustruje, w jaki sposób otwarte interfejsy API Bird mogą być wykorzystywane do tworzenia niestandardowych pulpitów nawigacyjnych i narzędzi raportowych dla zespołów lub klientów, którzy nie mają dostępu do pełnej platformy.
Ten skrypt jedynie dotyka powierzchni tego, co jest możliwe dzięki wykorzystaniu Pythona, Plotly Dash i naszych interfejsów API.
API i pulpit nawigacyjny Bird Metrics z Pythonem
Prawie rok temu Tom Mairs, dyrektor ds. sukcesu klienta w firmie Bird, napisał narzędzie do przesyłania wiadomości wykorzystujące API Bird. W tym poście kontynuuję to, co on zaczął. Jego narzędzie umożliwia zdalne przesyłanie zadań w określonych odstępach czasu, ale co jeśli chcemy stworzyć nasze własne pulpity nawigacyjne i dzienniki zdarzeń?
Może chcę stworzyć konkretny pulpit nawigacyjny dla grupy biznesowej lub pulpit przyjazny dla klienta, ale nie chcę dawać użytkownikom pełnego dostępu do interfejsu UI Bird. Ten skrypt tylko dotyka powierzchni możliwości wykorzystania Pythona, Plotly Dash i naszych API. Tworząc pulpity, które przetwarzają dane API o dużym wolumenie, należy być świadomym, że komponenty infrastruktury, takie jak DNS, mogą stać się wąskimi gardłami - doświadczyliśmy wyzwań związanych ze skalowaniem DNS AWS, które wpłynęły na nasze możliwości przetwarzania danych. Dla entuzjastów wizualnych przepływów pracy, można również zbadać integrację Flow Buildera z Google Cloud Functions i Vision API, aby dodać automatyzację wspieraną przez AI do swoich przepływów przetwarzania danych.
Kiedy rozpocząłem moje poszukiwania w sieci, chciałem znaleźć drogę o jak najmniejszym oporze. Mógłbym stworzyć wszystkie pulpity i UI samodzielnie w HTML i Pythonie, jednak po kilku wyszukiwaniach w Google natknąłem się na Dash Plotly, który łatwo integruje się z Pythonem. Wybrałem Dash z dwóch powodów: 1) jest open source, a 2) po przeczytaniu dokumentacji wydawało się łatwo dostosowywać do tego, co próbowałem zrobić. Dash to biblioteka open-source, która jest idealna do budowania i wdrażania aplikacji danych z dostosowanymi interfejsami użytkownika. Dzięki temu stworzenie UI stało się niezwykle proste. Pytanie brzmiało więc, jak skomplikowaną chciałem uczynić tę aplikację? Im więcej czasu spędzałem, tym więcej funkcji chciałem dodać.
Dla wstępnego projektu chciałem upewnić się, że mam pulpit nawigacyjny z konfigurowalnymi metrykami i wybieranym zakresem czasowym. Na początku zacząłem od pulpitu, na którym można było wybrać tylko jedną metrykę z rozwijanej listy. Następnie, gdy otrzymałem opinie od kolegów, nieco dopracowałem pulpit, aby dodać możliwość wielokrotnego wyboru i tytuły osi. Postanowiłem także dodać dodatkową zakładkę na dziennik zdarzeń. Doszedłem do momentu, w którym byłem zadowolony z tego, co miałem jako dobry punkt wyjścia dla każdego, kto chciałby zbudować własne pulpity. Dla programistów, którzy chcą wprowadzać dane webhooków w czasie rzeczywistym do swoich pulpitów, zapoznaj się z naszym przewodnikiem po budowaniu konsumentów webhooków z Azure Functions. Oczywiście umieściłem projekt na Githubie, abyś mógł go sklonować lub utworzyć gałąź.
API i pulpit nawigacyjny Bird Metrics z Pythonem
Prawie rok temu Tom Mairs, dyrektor ds. sukcesu klienta w firmie Bird, napisał narzędzie do przesyłania wiadomości wykorzystujące API Bird. W tym poście kontynuuję to, co on zaczął. Jego narzędzie umożliwia zdalne przesyłanie zadań w określonych odstępach czasu, ale co jeśli chcemy stworzyć nasze własne pulpity nawigacyjne i dzienniki zdarzeń?
Może chcę stworzyć konkretny pulpit nawigacyjny dla grupy biznesowej lub pulpit przyjazny dla klienta, ale nie chcę dawać użytkownikom pełnego dostępu do interfejsu UI Bird. Ten skrypt tylko dotyka powierzchni możliwości wykorzystania Pythona, Plotly Dash i naszych API. Tworząc pulpity, które przetwarzają dane API o dużym wolumenie, należy być świadomym, że komponenty infrastruktury, takie jak DNS, mogą stać się wąskimi gardłami - doświadczyliśmy wyzwań związanych ze skalowaniem DNS AWS, które wpłynęły na nasze możliwości przetwarzania danych. Dla entuzjastów wizualnych przepływów pracy, można również zbadać integrację Flow Buildera z Google Cloud Functions i Vision API, aby dodać automatyzację wspieraną przez AI do swoich przepływów przetwarzania danych.
Kiedy rozpocząłem moje poszukiwania w sieci, chciałem znaleźć drogę o jak najmniejszym oporze. Mógłbym stworzyć wszystkie pulpity i UI samodzielnie w HTML i Pythonie, jednak po kilku wyszukiwaniach w Google natknąłem się na Dash Plotly, który łatwo integruje się z Pythonem. Wybrałem Dash z dwóch powodów: 1) jest open source, a 2) po przeczytaniu dokumentacji wydawało się łatwo dostosowywać do tego, co próbowałem zrobić. Dash to biblioteka open-source, która jest idealna do budowania i wdrażania aplikacji danych z dostosowanymi interfejsami użytkownika. Dzięki temu stworzenie UI stało się niezwykle proste. Pytanie brzmiało więc, jak skomplikowaną chciałem uczynić tę aplikację? Im więcej czasu spędzałem, tym więcej funkcji chciałem dodać.
Dla wstępnego projektu chciałem upewnić się, że mam pulpit nawigacyjny z konfigurowalnymi metrykami i wybieranym zakresem czasowym. Na początku zacząłem od pulpitu, na którym można było wybrać tylko jedną metrykę z rozwijanej listy. Następnie, gdy otrzymałem opinie od kolegów, nieco dopracowałem pulpit, aby dodać możliwość wielokrotnego wyboru i tytuły osi. Postanowiłem także dodać dodatkową zakładkę na dziennik zdarzeń. Doszedłem do momentu, w którym byłem zadowolony z tego, co miałem jako dobry punkt wyjścia dla każdego, kto chciałby zbudować własne pulpity. Dla programistów, którzy chcą wprowadzać dane webhooków w czasie rzeczywistym do swoich pulpitów, zapoznaj się z naszym przewodnikiem po budowaniu konsumentów webhooków z Azure Functions. Oczywiście umieściłem projekt na Githubie, abyś mógł go sklonować lub utworzyć gałąź.
API i pulpit nawigacyjny Bird Metrics z Pythonem
Prawie rok temu Tom Mairs, dyrektor ds. sukcesu klienta w firmie Bird, napisał narzędzie do przesyłania wiadomości wykorzystujące API Bird. W tym poście kontynuuję to, co on zaczął. Jego narzędzie umożliwia zdalne przesyłanie zadań w określonych odstępach czasu, ale co jeśli chcemy stworzyć nasze własne pulpity nawigacyjne i dzienniki zdarzeń?
Może chcę stworzyć konkretny pulpit nawigacyjny dla grupy biznesowej lub pulpit przyjazny dla klienta, ale nie chcę dawać użytkownikom pełnego dostępu do interfejsu UI Bird. Ten skrypt tylko dotyka powierzchni możliwości wykorzystania Pythona, Plotly Dash i naszych API. Tworząc pulpity, które przetwarzają dane API o dużym wolumenie, należy być świadomym, że komponenty infrastruktury, takie jak DNS, mogą stać się wąskimi gardłami - doświadczyliśmy wyzwań związanych ze skalowaniem DNS AWS, które wpłynęły na nasze możliwości przetwarzania danych. Dla entuzjastów wizualnych przepływów pracy, można również zbadać integrację Flow Buildera z Google Cloud Functions i Vision API, aby dodać automatyzację wspieraną przez AI do swoich przepływów przetwarzania danych.
Kiedy rozpocząłem moje poszukiwania w sieci, chciałem znaleźć drogę o jak najmniejszym oporze. Mógłbym stworzyć wszystkie pulpity i UI samodzielnie w HTML i Pythonie, jednak po kilku wyszukiwaniach w Google natknąłem się na Dash Plotly, który łatwo integruje się z Pythonem. Wybrałem Dash z dwóch powodów: 1) jest open source, a 2) po przeczytaniu dokumentacji wydawało się łatwo dostosowywać do tego, co próbowałem zrobić. Dash to biblioteka open-source, która jest idealna do budowania i wdrażania aplikacji danych z dostosowanymi interfejsami użytkownika. Dzięki temu stworzenie UI stało się niezwykle proste. Pytanie brzmiało więc, jak skomplikowaną chciałem uczynić tę aplikację? Im więcej czasu spędzałem, tym więcej funkcji chciałem dodać.
Dla wstępnego projektu chciałem upewnić się, że mam pulpit nawigacyjny z konfigurowalnymi metrykami i wybieranym zakresem czasowym. Na początku zacząłem od pulpitu, na którym można było wybrać tylko jedną metrykę z rozwijanej listy. Następnie, gdy otrzymałem opinie od kolegów, nieco dopracowałem pulpit, aby dodać możliwość wielokrotnego wyboru i tytuły osi. Postanowiłem także dodać dodatkową zakładkę na dziennik zdarzeń. Doszedłem do momentu, w którym byłem zadowolony z tego, co miałem jako dobry punkt wyjścia dla każdego, kto chciałby zbudować własne pulpity. Dla programistów, którzy chcą wprowadzać dane webhooków w czasie rzeczywistym do swoich pulpitów, zapoznaj się z naszym przewodnikiem po budowaniu konsumentów webhooków z Azure Functions. Oczywiście umieściłem projekt na Githubie, abyś mógł go sklonować lub utworzyć gałąź.
Pierwsze kroki
Aby uzyskać dostęp do tej aplikacji, musisz upewnić się, że masz zainstalowanego Pythona w wersji 3.10 lub wyższej oraz zainstalować następujące biblioteki:
Biblioteka Pythona | Cel |
|---|---|
requests | Komunikacja API z usługami Bird |
dash | Renderowanie UI i dashboardu |
pandas | Przetwarzanie danych i generowanie tabel |
Następnie wprowadź swój klucz API do App.py i uruchom aplikację. Będzie ona działać na http://localhost:8050. Aby uzyskać więcej informacji na temat wdrażania tego na serwerze dostępnym publicznie (takim jak AWS), zapoznaj się z następującymi zasobami:
Aby uzyskać dostęp do tej aplikacji, musisz upewnić się, że masz zainstalowanego Pythona w wersji 3.10 lub wyższej oraz zainstalować następujące biblioteki:
Biblioteka Pythona | Cel |
|---|---|
requests | Komunikacja API z usługami Bird |
dash | Renderowanie UI i dashboardu |
pandas | Przetwarzanie danych i generowanie tabel |
Następnie wprowadź swój klucz API do App.py i uruchom aplikację. Będzie ona działać na http://localhost:8050. Aby uzyskać więcej informacji na temat wdrażania tego na serwerze dostępnym publicznie (takim jak AWS), zapoznaj się z następującymi zasobami:
Aby uzyskać dostęp do tej aplikacji, musisz upewnić się, że masz zainstalowanego Pythona w wersji 3.10 lub wyższej oraz zainstalować następujące biblioteki:
Biblioteka Pythona | Cel |
|---|---|
requests | Komunikacja API z usługami Bird |
dash | Renderowanie UI i dashboardu |
pandas | Przetwarzanie danych i generowanie tabel |
Następnie wprowadź swój klucz API do App.py i uruchom aplikację. Będzie ona działać na http://localhost:8050. Aby uzyskać więcej informacji na temat wdrażania tego na serwerze dostępnym publicznie (takim jak AWS), zapoznaj się z następującymi zasobami:
Tworzenie strony pulpitu nawigacyjnego
Najpierw zainicjalizuj ramkę danych i pulpit nawigacyjny. Bez zainicjowania pulpitu, żaden pulpit nie pojawi się w interfejsie użytkownika.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Następnie zbuduj pierwszą zakładkę. Jest to połączenie wywołania aplikacji (aby sprawdzić, która zakładka jest używana); wraz z warunkową funkcją w celu sprawdzenia, która zakładka jest aktualnie wybrana. Poniższy kod buduje tylko pusty pulpit i elementy interfejsu użytkownika (do zakładki wydarzeń wrócimy później). Elementy dcc to Komponenty Core Dash i Komponenty HTML, które łatwo pozwalają na użycie HTML w interfejsie użytkownika.
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)
Zauważ, jak proste jest tworzenie interfejsu pulpitu z wielokrotnym wyborem i wyszukiwalnym rozwijanym menu. Aby wyłączyć wielokrotny wybór lub wyszukiwanie, parametry do stworzenia rozwijanego menu mogą być łatwo modyfikowane. Uważam, że najbardziej skomplikowaną częścią tego projektu było zbudowanie faktycznej ramki danych z danych wejściowych oraz uzyskanie poprawnej pracy HTML + CSS w interfejsie użytkownika.
API metryk czasowych pozwala na pobranie 33 indywidualnych metryk na podstawie zakresu daty/czasu. Możesz bardziej zgłębić filtrując według domen, kampanii, pul, adresów IP, domen wysyłkowych, subkonto oraz określić precyzję danych szeregów czasowych. Te dodatkowe filtry razem z analizami dostarczalności mogłyby być przyszłym usprawnieniem tego projektu (należy wdrożyć przechwytywanie błędów dla klientów, którzy nie mają dostępu do analiz dostarczalności).
Wykorzystując i wywołując API metryk, buduję pulpit z wybranymi przez użytkownika parametrami i określonym przedziałem czasowym. Zainicjowany pulpit jest następnie aktualizowany.
Widok pulpitu (API metryk czasowych)
# 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
Poniżej znajduje się przykład wybranych wielu metryk i rozszerzonego przedziału czasowego.
Uwaga: w grafie dash automatycznie wbudowanych jest wiele elementów (najazd, powiększenie, autoskalowanie).
Najpierw zainicjalizuj ramkę danych i pulpit nawigacyjny. Bez zainicjowania pulpitu, żaden pulpit nie pojawi się w interfejsie użytkownika.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Następnie zbuduj pierwszą zakładkę. Jest to połączenie wywołania aplikacji (aby sprawdzić, która zakładka jest używana); wraz z warunkową funkcją w celu sprawdzenia, która zakładka jest aktualnie wybrana. Poniższy kod buduje tylko pusty pulpit i elementy interfejsu użytkownika (do zakładki wydarzeń wrócimy później). Elementy dcc to Komponenty Core Dash i Komponenty HTML, które łatwo pozwalają na użycie HTML w interfejsie użytkownika.
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)
Zauważ, jak proste jest tworzenie interfejsu pulpitu z wielokrotnym wyborem i wyszukiwalnym rozwijanym menu. Aby wyłączyć wielokrotny wybór lub wyszukiwanie, parametry do stworzenia rozwijanego menu mogą być łatwo modyfikowane. Uważam, że najbardziej skomplikowaną częścią tego projektu było zbudowanie faktycznej ramki danych z danych wejściowych oraz uzyskanie poprawnej pracy HTML + CSS w interfejsie użytkownika.
API metryk czasowych pozwala na pobranie 33 indywidualnych metryk na podstawie zakresu daty/czasu. Możesz bardziej zgłębić filtrując według domen, kampanii, pul, adresów IP, domen wysyłkowych, subkonto oraz określić precyzję danych szeregów czasowych. Te dodatkowe filtry razem z analizami dostarczalności mogłyby być przyszłym usprawnieniem tego projektu (należy wdrożyć przechwytywanie błędów dla klientów, którzy nie mają dostępu do analiz dostarczalności).
Wykorzystując i wywołując API metryk, buduję pulpit z wybranymi przez użytkownika parametrami i określonym przedziałem czasowym. Zainicjowany pulpit jest następnie aktualizowany.
Widok pulpitu (API metryk czasowych)
# 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
Poniżej znajduje się przykład wybranych wielu metryk i rozszerzonego przedziału czasowego.
Uwaga: w grafie dash automatycznie wbudowanych jest wiele elementów (najazd, powiększenie, autoskalowanie).
Najpierw zainicjalizuj ramkę danych i pulpit nawigacyjny. Bez zainicjowania pulpitu, żaden pulpit nie pojawi się w interfejsie użytkownika.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Następnie zbuduj pierwszą zakładkę. Jest to połączenie wywołania aplikacji (aby sprawdzić, która zakładka jest używana); wraz z warunkową funkcją w celu sprawdzenia, która zakładka jest aktualnie wybrana. Poniższy kod buduje tylko pusty pulpit i elementy interfejsu użytkownika (do zakładki wydarzeń wrócimy później). Elementy dcc to Komponenty Core Dash i Komponenty HTML, które łatwo pozwalają na użycie HTML w interfejsie użytkownika.
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)
Zauważ, jak proste jest tworzenie interfejsu pulpitu z wielokrotnym wyborem i wyszukiwalnym rozwijanym menu. Aby wyłączyć wielokrotny wybór lub wyszukiwanie, parametry do stworzenia rozwijanego menu mogą być łatwo modyfikowane. Uważam, że najbardziej skomplikowaną częścią tego projektu było zbudowanie faktycznej ramki danych z danych wejściowych oraz uzyskanie poprawnej pracy HTML + CSS w interfejsie użytkownika.
API metryk czasowych pozwala na pobranie 33 indywidualnych metryk na podstawie zakresu daty/czasu. Możesz bardziej zgłębić filtrując według domen, kampanii, pul, adresów IP, domen wysyłkowych, subkonto oraz określić precyzję danych szeregów czasowych. Te dodatkowe filtry razem z analizami dostarczalności mogłyby być przyszłym usprawnieniem tego projektu (należy wdrożyć przechwytywanie błędów dla klientów, którzy nie mają dostępu do analiz dostarczalności).
Wykorzystując i wywołując API metryk, buduję pulpit z wybranymi przez użytkownika parametrami i określonym przedziałem czasowym. Zainicjowany pulpit jest następnie aktualizowany.
Widok pulpitu (API metryk czasowych)
# 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
Poniżej znajduje się przykład wybranych wielu metryk i rozszerzonego przedziału czasowego.
Uwaga: w grafie dash automatycznie wbudowanych jest wiele elementów (najazd, powiększenie, autoskalowanie).
Tworzenie strony szczegółów wydarzenia
Strona szczegółów wydarzenia była nieco trudniejsza, ponieważ nie wiedziałem, jak najlepiej zaprezentować wszystkie metryki wydarzeń w czytelny sposób. Rozważałem dodanie parametrów filtrujących do tej strony, jednak zdecydowałem, że dodałoby to znaczną ilość czasu do tego projektu, ponieważ tabela musiałaby być wtedy dynamiczna (razem z dodawaniem parametrów, wywołań itp.). Zdecydowałem się na pokazanie wszystkich wydarzeń i umieszczenie znacznika czasowego na pierwszym miejscu (ponieważ bez umieszczenia znacznika czasowego na początku, wykres nie był łatwy do odczytania). Początkowo uznałem, że przy samej surowej HTML tabela była niesamowicie trudna do zniesienia. Nie było żadnych granic i różnic kolorystycznych między nagłówkami a wierszami. Aby ułatwić odczyt tabeli, mogłem użyć CSS w Dash.
Widok szczegółów wydarzenia (Events API)
Pomysł na szczegóły wydarzenia jest prawie taki sam jak w przypadku pulpitu, z tym że tym razem wywołuję Events API i wprowadzam wszystkie wydarzenia. Zauważ, że szczegóły wydarzeń pokazują tylko 10 najnowszych wydarzeń (wykorzystując parametr max_rows i filtrowanie API). Można to zwiększyć, jednak zdecydowałem się pokazać 10 najnowszych wydarzeń, ponieważ im więcej wydarzeń zostało pokazanych, tym dłużej trwa wywołanie API. Jedną znaczącą poprawą, którą można by wprowadzić, byłaby możliwość stronicowania i dodania przycisku Następna strona / Poprzednia strona w interfejsie użytkownika.
Aby zbudować kartę wydarzeń (stronę), najpierw wywołuję Events API i analizuję odpowiedź JSON na ramkę danych. Następnie sortuję i reorganizuję ramkę danych, aby umieścić znacznik czasowy jako pierwszą kolumnę. Na koniec buduję tabelę HTML, iterując przez ramkę danych.
# 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)) ]) ]) ])
Wygląda to tak w interfejsie użytkownika.
Strona szczegółów wydarzenia była nieco trudniejsza, ponieważ nie wiedziałem, jak najlepiej zaprezentować wszystkie metryki wydarzeń w czytelny sposób. Rozważałem dodanie parametrów filtrujących do tej strony, jednak zdecydowałem, że dodałoby to znaczną ilość czasu do tego projektu, ponieważ tabela musiałaby być wtedy dynamiczna (razem z dodawaniem parametrów, wywołań itp.). Zdecydowałem się na pokazanie wszystkich wydarzeń i umieszczenie znacznika czasowego na pierwszym miejscu (ponieważ bez umieszczenia znacznika czasowego na początku, wykres nie był łatwy do odczytania). Początkowo uznałem, że przy samej surowej HTML tabela była niesamowicie trudna do zniesienia. Nie było żadnych granic i różnic kolorystycznych między nagłówkami a wierszami. Aby ułatwić odczyt tabeli, mogłem użyć CSS w Dash.
Widok szczegółów wydarzenia (Events API)
Pomysł na szczegóły wydarzenia jest prawie taki sam jak w przypadku pulpitu, z tym że tym razem wywołuję Events API i wprowadzam wszystkie wydarzenia. Zauważ, że szczegóły wydarzeń pokazują tylko 10 najnowszych wydarzeń (wykorzystując parametr max_rows i filtrowanie API). Można to zwiększyć, jednak zdecydowałem się pokazać 10 najnowszych wydarzeń, ponieważ im więcej wydarzeń zostało pokazanych, tym dłużej trwa wywołanie API. Jedną znaczącą poprawą, którą można by wprowadzić, byłaby możliwość stronicowania i dodania przycisku Następna strona / Poprzednia strona w interfejsie użytkownika.
Aby zbudować kartę wydarzeń (stronę), najpierw wywołuję Events API i analizuję odpowiedź JSON na ramkę danych. Następnie sortuję i reorganizuję ramkę danych, aby umieścić znacznik czasowy jako pierwszą kolumnę. Na koniec buduję tabelę HTML, iterując przez ramkę danych.
# 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)) ]) ]) ])
Wygląda to tak w interfejsie użytkownika.
Strona szczegółów wydarzenia była nieco trudniejsza, ponieważ nie wiedziałem, jak najlepiej zaprezentować wszystkie metryki wydarzeń w czytelny sposób. Rozważałem dodanie parametrów filtrujących do tej strony, jednak zdecydowałem, że dodałoby to znaczną ilość czasu do tego projektu, ponieważ tabela musiałaby być wtedy dynamiczna (razem z dodawaniem parametrów, wywołań itp.). Zdecydowałem się na pokazanie wszystkich wydarzeń i umieszczenie znacznika czasowego na pierwszym miejscu (ponieważ bez umieszczenia znacznika czasowego na początku, wykres nie był łatwy do odczytania). Początkowo uznałem, że przy samej surowej HTML tabela była niesamowicie trudna do zniesienia. Nie było żadnych granic i różnic kolorystycznych między nagłówkami a wierszami. Aby ułatwić odczyt tabeli, mogłem użyć CSS w Dash.
Widok szczegółów wydarzenia (Events API)
Pomysł na szczegóły wydarzenia jest prawie taki sam jak w przypadku pulpitu, z tym że tym razem wywołuję Events API i wprowadzam wszystkie wydarzenia. Zauważ, że szczegóły wydarzeń pokazują tylko 10 najnowszych wydarzeń (wykorzystując parametr max_rows i filtrowanie API). Można to zwiększyć, jednak zdecydowałem się pokazać 10 najnowszych wydarzeń, ponieważ im więcej wydarzeń zostało pokazanych, tym dłużej trwa wywołanie API. Jedną znaczącą poprawą, którą można by wprowadzić, byłaby możliwość stronicowania i dodania przycisku Następna strona / Poprzednia strona w interfejsie użytkownika.
Aby zbudować kartę wydarzeń (stronę), najpierw wywołuję Events API i analizuję odpowiedź JSON na ramkę danych. Następnie sortuję i reorganizuję ramkę danych, aby umieścić znacznik czasowy jako pierwszą kolumnę. Na koniec buduję tabelę HTML, iterując przez ramkę danych.
# 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)) ]) ]) ])
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 możliwościom dostosowania, niebo jest limit.
Jak omówiono powyżej, niektóre przyszłe usprawnienia, 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 pamięci podręcznej, aby API nie było wywoływane za każdym razem w celu wyświetlenia stron
Usprawnienia UI
Dodanie filtracji i paginacji na stronie szczegółów zdarzeń
Byłbym zainteresowany usłyszeniem wszelkich opinii lub sugestii dotyczących rozszerzenia tego projektu.
~ Zach Samuels, Starszy Inżynier Rozwiązań w Bird
Dla kogoś, kto chce stworzyć własny pulpit nawigacyjny lub dziennik zdarzeń, to dobry początek. Dzięki możliwościom dostosowania, niebo jest limit.
Jak omówiono powyżej, niektóre przyszłe usprawnienia, 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 pamięci podręcznej, aby API nie było wywoływane za każdym razem w celu wyświetlenia stron
Usprawnienia UI
Dodanie filtracji i paginacji na stronie szczegółów zdarzeń
Byłbym zainteresowany usłyszeniem wszelkich opinii lub sugestii dotyczących rozszerzenia tego projektu.
~ Zach Samuels, Starszy Inżynier Rozwiązań w Bird
Dla kogoś, kto chce stworzyć własny pulpit nawigacyjny lub dziennik zdarzeń, to dobry początek. Dzięki możliwościom dostosowania, niebo jest limit.
Jak omówiono powyżej, niektóre przyszłe usprawnienia, 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 pamięci podręcznej, aby API nie było wywoływane za każdym razem w celu wyświetlenia stron
Usprawnienia UI
Dodanie filtracji i paginacji na stronie szczegółów zdarzeń
Byłbym zainteresowany usłyszeniem wszelkich opinii lub sugestii dotyczących rozszerzenia tego projektu.
~ Zach Samuels, Starszy Inżynier Rozwiązań w Bird
