Uma Ferramenta de Dashboard com APIs de Pássaros

Email

·

Uma Ferramenta de Dashboard com APIs de Pássaros

Principais Conclusões

    • APIs do Bird podem ser combinados com Python e Plotly Dash para construir painéis interativos poderosos sem precisar da interface completa do Bird.

    • O projeto demonstra como visualizar métricas e eventos usando a API de Métricas e a API de Eventos do Bird dentro de um aplicativo web personalizado.

    • Plotly Dash fornece um framework rápido e de código aberto para construção de elementos de UI como dropdowns, gráficos e tabelas.

    • Desenvolvedores podem estender a ferramenta com análises de entregabilidade, filtragem e paginação para painéis mais ricos.

    • Melhorias futuras incluem caching, melhoria da UI e integração com outros produtos do Bird ou APIs de terceiros.

    • A base de código (disponível no GitHub) oferece um forte ponto de partida para quem deseja construir painéis impulsionados pelo Bird ou portais voltados para o cliente.

Destaques de Perguntas e Respostas

  • Qual é o objetivo deste projeto de dashboard?

    Ele demonstra como os desenvolvedores podem usar as APIs do Bird com Python e Plotly Dash para criar painéis orientados a dados que visualizam métricas de campanhas e eventos recentes.

  • Por que usar o Plotly Dash para APIs de Aves?

    Dash é um software de código aberto, fácil de personalizar e ideal para criar interfaces interativas sem exigir conhecimento em front-end.

  • O que o painel exibe?

    Ele visualiza métricas de séries temporais da API de Métricas do Bird e dados de eventos recentes da API de Eventos, com opções para filtrar e selecionar métricas em intervalos de tempo personalizados.

  • Como a ferramenta pode ser expandida ainda mais?

    Adicionando análises de entregabilidade, filtros avançados, cache de dados e paginação para grandes conjuntos de dados para melhorar o desempenho e a usabilidade.

  • Quais habilidades ou ferramentas são necessárias para executá-lo?

    Conhecimento básico de Python e instalação de requests, dash e pandas. Uma chave de API da Bird é necessária para puxar dados.

  • Como este projeto se encaixa no ecossistema da Bird?

    Ele ilustra como as APIs abertas da Bird podem ser aproveitadas para criar painéis personalizados e ferramentas de relatório para equipes ou clientes sem acesso à plataforma completa.

Este script apenas toca na superfície do que é possível utilizando Python, Plotly Dash e nossas APIs.

API de Métricas de Pássaros + Painéis com Python

Quase um ano atrás, Tom Mairs, diretor de sucesso do cliente da Bird, escreveu uma ferramenta de mala direta utilizando as APIs da Bird. Neste post, eu dou continuidade ao que ele deixou. Sua ferramenta permite a transmissão programada de tarefas, mas e se quisermos criar nossos próprios painéis e registros de eventos?

Talvez eu queira criar um painel específico para um grupo de negócios ou um painel voltado para clientes, mas não fornecer acesso total aos usuários à UI da Bird. Este script apenas toca na superfície do que é possível usar Python, Plotly Dash e nossas APIs. Ao construir painéis que processam dados de API de alto volume, esteja ciente de que componentes de infraestrutura como DNS podem se tornar gargalos - nós experimentamos desafios de escalonamento do DNS da AWS que afetaram nossas capacidades de processamento de dados. Para entusiastas de fluxos de trabalho visuais, você também pode explorar a integração do Flow Builder com Google Cloud Functions e a API de Visão para adicionar automação alimentada por IA às suas pipelines de processamento de dados.

Ao começar minha busca online, eu queria encontrar o caminho de menor resistência. Eu poderia ter criado todos os painéis e UI eu mesmo em HTML e Python, no entanto, após algumas pesquisas no Google, encontrei o Dash da Plotly, que se integra facilmente ao Python. Eu escolhi o Dash por 2 razões: 1) é código aberto, e 2) depois de ler a documentação, parecia facilmente personalizável para o que eu estava tentando fazer. Dash é uma biblioteca de código aberto que é ideal para construir e implantar aplicativos de dados com interfaces de usuário personalizadas. Isso tornou a criação de uma UI extremamente simples. A pergunta então se tornou: quão complexa eu queria fazer esse aplicativo? Quanto mais tempo eu passava, mais recursos eu queria adicionar.

Para o projeto inicial, eu queria garantir que tivesse um painel com métricas personalizáveis e um intervalo de tempo selecionável. Inicialmente, comecei com um painel onde você podia escolher apenas uma métrica no menu suspenso. Então, à medida que recebi feedback dos colegas, refinei o painel um pouco para adicionar seleção múltipla e títulos de eixos. Também decidi adicionar uma aba adicional para um log de eventos. Cheguei ao ponto em que fiquei satisfeito com o que tinha como um bom ponto de partida para qualquer um que deseje construir seus próprios painéis. Para desenvolvedores que desejam alimentar dados de webhook em tempo real em seus painéis, confira nosso guia sobre construindo consumidores de webhook com Azure Functions. Claro, eu coloquei o projeto no Github para você clonar ou ramificar.

Começando

Para acessar este aplicativo, você precisará garantir que está executando o Python 3.10 ou superior e instalar as seguintes bibliotecas:

Biblioteca Python

Propósito

requests

Comunicação API com os serviços Bird

dash

Renderização da IU e do painel

pandas

Processamento de dados e geração de tabelas

Em seguida, insira sua chave de API em App.py e execute o aplicativo. Ele será executado em http://localhost:8050. Para mais informações sobre como implantar isso em um servidor voltado para o público (como AWS), consulte os seguintes recursos:

Criando a Página do Painel

Primeiro, inicialize o data frame e o painel. Sem inicializar o painel, nenhum painel aparecerá na interface do usuário.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

Em seguida, construa a primeira aba. Esta é uma combinação de um callback do aplicativo (para verificar qual aba está sendo utilizada); juntamente com uma função condicional para verificar qual aba está atualmente selecionada. O código abaixo constrói apenas o painel em branco e os elementos da interface do usuário (chegaremos à aba de eventos mais tarde). Os elementos dcc são os Componentes Básicos do Dash e os Componentes HTML permitem facilmente que o HTML seja utilizado na interface do usuário.

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)

Observe com o dash como é simples criar uma interface de usuário de painel com um dropdown de múltipla seleção e pesquisa. Para desabilitar a seleção múltipla ou pesquisa, os parâmetros para criar um dropdown podem ser facilmente modificados. Descobri que a parte mais complexa deste projeto foi construir o verdadeiro data frame a partir das entradas, assim como fazer o HTML + CSS funcionarem corretamente na interface do usuário.

A API de Métricas de Série Temporal permite que 33 métricas individuais sejam puxadas com base em um intervalo de data/hora. Você pode filtrar mais profundamente por Domínios, Campanhas, Pools de IP, Domínios de Envio, Subcontas e especificar a Precisão dos dados de série temporal. Esses filtros adicionais junto com a análise de entregabilidade poderiam ser uma melhoria futura para este projeto (seria necessário implementar captura de erros para clientes que não têm acesso à análise de entregabilidade).

Utilizando e chamando a API de Métricas, eu construo um painel com os parâmetros selecionados pelo usuário e o período especificado. O painel inicializado é então atualizado.

Visão do Painel (API de Métricas de Série Temporal)

# 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

O seguinte é um exemplo de múltiplas métricas selecionadas e um intervalo de tempo expandido.


Sparkpost analytics dashboard

Nota: existem muitos itens incorporados automaticamente ao gráfico do dash (hover, zoom, autoscale).

Primeiro, inicialize o data frame e o painel. Sem inicializar o painel, nenhum painel aparecerá na interface do usuário.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

Em seguida, construa a primeira aba. Esta é uma combinação de um callback do aplicativo (para verificar qual aba está sendo utilizada); juntamente com uma função condicional para verificar qual aba está atualmente selecionada. O código abaixo constrói apenas o painel em branco e os elementos da interface do usuário (chegaremos à aba de eventos mais tarde). Os elementos dcc são os Componentes Básicos do Dash e os Componentes HTML permitem facilmente que o HTML seja utilizado na interface do usuário.

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)

Observe com o dash como é simples criar uma interface de usuário de painel com um dropdown de múltipla seleção e pesquisa. Para desabilitar a seleção múltipla ou pesquisa, os parâmetros para criar um dropdown podem ser facilmente modificados. Descobri que a parte mais complexa deste projeto foi construir o verdadeiro data frame a partir das entradas, assim como fazer o HTML + CSS funcionarem corretamente na interface do usuário.

A API de Métricas de Série Temporal permite que 33 métricas individuais sejam puxadas com base em um intervalo de data/hora. Você pode filtrar mais profundamente por Domínios, Campanhas, Pools de IP, Domínios de Envio, Subcontas e especificar a Precisão dos dados de série temporal. Esses filtros adicionais junto com a análise de entregabilidade poderiam ser uma melhoria futura para este projeto (seria necessário implementar captura de erros para clientes que não têm acesso à análise de entregabilidade).

Utilizando e chamando a API de Métricas, eu construo um painel com os parâmetros selecionados pelo usuário e o período especificado. O painel inicializado é então atualizado.

Visão do Painel (API de Métricas de Série Temporal)

# 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

O seguinte é um exemplo de múltiplas métricas selecionadas e um intervalo de tempo expandido.


Sparkpost analytics dashboard

Nota: existem muitos itens incorporados automaticamente ao gráfico do dash (hover, zoom, autoscale).

Primeiro, inicialize o data frame e o painel. Sem inicializar o painel, nenhum painel aparecerá na interface do usuário.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

Em seguida, construa a primeira aba. Esta é uma combinação de um callback do aplicativo (para verificar qual aba está sendo utilizada); juntamente com uma função condicional para verificar qual aba está atualmente selecionada. O código abaixo constrói apenas o painel em branco e os elementos da interface do usuário (chegaremos à aba de eventos mais tarde). Os elementos dcc são os Componentes Básicos do Dash e os Componentes HTML permitem facilmente que o HTML seja utilizado na interface do usuário.

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)

Observe com o dash como é simples criar uma interface de usuário de painel com um dropdown de múltipla seleção e pesquisa. Para desabilitar a seleção múltipla ou pesquisa, os parâmetros para criar um dropdown podem ser facilmente modificados. Descobri que a parte mais complexa deste projeto foi construir o verdadeiro data frame a partir das entradas, assim como fazer o HTML + CSS funcionarem corretamente na interface do usuário.

A API de Métricas de Série Temporal permite que 33 métricas individuais sejam puxadas com base em um intervalo de data/hora. Você pode filtrar mais profundamente por Domínios, Campanhas, Pools de IP, Domínios de Envio, Subcontas e especificar a Precisão dos dados de série temporal. Esses filtros adicionais junto com a análise de entregabilidade poderiam ser uma melhoria futura para este projeto (seria necessário implementar captura de erros para clientes que não têm acesso à análise de entregabilidade).

Utilizando e chamando a API de Métricas, eu construo um painel com os parâmetros selecionados pelo usuário e o período especificado. O painel inicializado é então atualizado.

Visão do Painel (API de Métricas de Série Temporal)

# 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

O seguinte é um exemplo de múltiplas métricas selecionadas e um intervalo de tempo expandido.


Sparkpost analytics dashboard

Nota: existem muitos itens incorporados automaticamente ao gráfico do dash (hover, zoom, autoscale).

Criando a Página de Detalhes do Evento

A página de detalhes do evento foi um pouco mais difícil porque eu não sabia a melhor maneira de apresentar todas as métricas dos eventos de uma maneira fácil de ler. Considerei adicionar parâmetros de filtro a esta página, no entanto, decidi que isso acrescentaria uma quantidade significativa de tempo a este projeto, pois a tabela teria que ser dinâmica (junto com a adição dos parâmetros, callbacks, etc.). Decidi mostrar todos os eventos e colocar o timestamp primeiro (pois, sem colocar o timestamp primeiro, o gráfico não era fácil de ler). Inicialmente, descobri que, apenas com o HTML bruto, a tabela era incrivelmente difícil para os olhos. Não havia bordas e nenhuma diferença de cor entre cabeçalho e linhas. Para facilitar a leitura da tabela, consegui usar CSS dentro do Dash.

Visualização de Detalhes do Evento (API de Eventos)

A ideia para os detalhes do evento é quase a mesma que o painel, exceto que desta vez, chamo a API de Eventos e trago todos os eventos. Observe que os detalhes do evento mostram apenas os 10 eventos mais recentes (utilizando o parâmetro max_rows e filtragem da API). Isso pode ser aumentado, no entanto, decidi mostrar os 10 eventos mais recentes porque quanto mais eventos são exibidos, mais tempo leva a chamada da API. Uma melhoria significativa que poderia ser feita seria a capacidade de paginar e incluir uma Próxima Página / Página Anterior na interface do usuário.

Para construir a aba (página) de eventos, primeiro, chamo a API de Eventos e analiso a resposta JSON em um dataframe. Então, ordeno e reorganizo o dataframe para colocar o timestamp como a primeira coluna. Por fim, construo a tabela HTML iterando através do dataframe.

# 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))
        ])
    ])
])

O que se parece com isso na interface do usuário.

Sparkpost event details

A página de detalhes do evento foi um pouco mais difícil porque eu não sabia a melhor maneira de apresentar todas as métricas dos eventos de uma maneira fácil de ler. Considerei adicionar parâmetros de filtro a esta página, no entanto, decidi que isso acrescentaria uma quantidade significativa de tempo a este projeto, pois a tabela teria que ser dinâmica (junto com a adição dos parâmetros, callbacks, etc.). Decidi mostrar todos os eventos e colocar o timestamp primeiro (pois, sem colocar o timestamp primeiro, o gráfico não era fácil de ler). Inicialmente, descobri que, apenas com o HTML bruto, a tabela era incrivelmente difícil para os olhos. Não havia bordas e nenhuma diferença de cor entre cabeçalho e linhas. Para facilitar a leitura da tabela, consegui usar CSS dentro do Dash.

Visualização de Detalhes do Evento (API de Eventos)

A ideia para os detalhes do evento é quase a mesma que o painel, exceto que desta vez, chamo a API de Eventos e trago todos os eventos. Observe que os detalhes do evento mostram apenas os 10 eventos mais recentes (utilizando o parâmetro max_rows e filtragem da API). Isso pode ser aumentado, no entanto, decidi mostrar os 10 eventos mais recentes porque quanto mais eventos são exibidos, mais tempo leva a chamada da API. Uma melhoria significativa que poderia ser feita seria a capacidade de paginar e incluir uma Próxima Página / Página Anterior na interface do usuário.

Para construir a aba (página) de eventos, primeiro, chamo a API de Eventos e analiso a resposta JSON em um dataframe. Então, ordeno e reorganizo o dataframe para colocar o timestamp como a primeira coluna. Por fim, construo a tabela HTML iterando através do dataframe.

# 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))
        ])
    ])
])

O que se parece com isso na interface do usuário.

Sparkpost event details

A página de detalhes do evento foi um pouco mais difícil porque eu não sabia a melhor maneira de apresentar todas as métricas dos eventos de uma maneira fácil de ler. Considerei adicionar parâmetros de filtro a esta página, no entanto, decidi que isso acrescentaria uma quantidade significativa de tempo a este projeto, pois a tabela teria que ser dinâmica (junto com a adição dos parâmetros, callbacks, etc.). Decidi mostrar todos os eventos e colocar o timestamp primeiro (pois, sem colocar o timestamp primeiro, o gráfico não era fácil de ler). Inicialmente, descobri que, apenas com o HTML bruto, a tabela era incrivelmente difícil para os olhos. Não havia bordas e nenhuma diferença de cor entre cabeçalho e linhas. Para facilitar a leitura da tabela, consegui usar CSS dentro do Dash.

Visualização de Detalhes do Evento (API de Eventos)

A ideia para os detalhes do evento é quase a mesma que o painel, exceto que desta vez, chamo a API de Eventos e trago todos os eventos. Observe que os detalhes do evento mostram apenas os 10 eventos mais recentes (utilizando o parâmetro max_rows e filtragem da API). Isso pode ser aumentado, no entanto, decidi mostrar os 10 eventos mais recentes porque quanto mais eventos são exibidos, mais tempo leva a chamada da API. Uma melhoria significativa que poderia ser feita seria a capacidade de paginar e incluir uma Próxima Página / Página Anterior na interface do usuário.

Para construir a aba (página) de eventos, primeiro, chamo a API de Eventos e analiso a resposta JSON em um dataframe. Então, ordeno e reorganizo o dataframe para colocar o timestamp como a primeira coluna. Por fim, construo a tabela HTML iterando através do dataframe.

# 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))
        ])
    ])
])

O que se parece com isso na interface do usuário.

Sparkpost event details

Próximos Passos

Para quem está procurando criar seu próprio painel ou registro de eventos, este é um bom começo. Com a personalização aqui, o céu é o limite.

Como discutido acima, algumas melhorias futuras que poderiam ser feitas são:

  • Adicionar análises de entregabilidade ao painel

  • Adicionar mais filtros ao painel

  • Possíveis opções de cache para que a API não seja chamada toda vez para exibir as páginas

  • Melhorias na interface do usuário

  • Adicionar filtragem e paginação à página de detalhes do evento

Eu estaria interessado em ouvir qualquer feedback ou sugestões para expandir este projeto.

~ Zach Samuels, Engenheiro de Soluções Sênior da Bird

Outras notícias

Saiba mais sobre esta categoria

Email

·

Construindo uma Ferramenta de Validação de Recebedores de Pássaros em Lote Assíncronos

Introdução ao CppUTest

Plataforma e Infraestrutura

·

Usando os produtos da Bird combinados

A person is standing at a desk while typing on a laptop.

A plataforma completa nativa de IA que escalará com o seu negócio.

Contato de vendas

Comece gratuitamente

© 2026 Pássaro

Contacte o Suporte

A person is standing at a desk while typing on a laptop.

A plataforma completa nativa de IA que escalará com o seu negócio.

Contato de vendas

Comece gratuitamente

© 2026 Pássaro

Contacte o Suporte

A person is standing at a desk while typing on a laptop.

A plataforma completa nativa de IA que escalará com o seu negócio.

Contato de vendas

Comece gratuitamente

© 2026 Pássaro

Contacte o Suporte