Uma Ferramenta de Dashboard com APIs de Pássaros

Zachary Samuels

24 de mar. de 2022

Email

1 min read

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.

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.

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 app, você precisará garantir que está executando o python 3.10 ou superior e instalar as seguintes bibliotecas:

Biblioteca Python

Propósito

requests

Comunicação da API com os serviços do Bird

dash

Renderização da interface e do dashboard

pandas

Processamento de dados e geração de tabelas

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

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

Biblioteca Python

Propósito

requests

Comunicação da API com os serviços do Bird

dash

Renderização da interface e do dashboard

pandas

Processamento de dados e geração de tabelas

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

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

Biblioteca Python

Propósito

requests

Comunicação da API com os serviços do Bird

dash

Renderização da interface e do dashboard

pandas

Processamento de dados e geração de tabelas

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

Criando a Página do Painel

Primeiro, inicialize o quadro de dados 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. Isso é uma combinação de um callback de aplicativo (para verificar qual aba está sendo utilizada); junto 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 (abordaremos a aba de eventos mais tarde). Os elementos dcc são os Componentes Básicos do Dash e os Componentes HTML permitem facilmente o uso de HTML 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)

Note com o dash como é simples criar uma interface de painel com um dropdown de seleção múltipla e pesquisável. Para desabilitar a seleção múltipla ou pesquisa, os parâmetros para criar um dropdown podem ser facilmente modificados. Eu descobri que a parte mais complexa deste projeto foi construir o quadro de dados real a partir das entradas, assim como fazer o HTML + CSS funcionar corretamente na interface do usuário.

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

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

Visualização do Painel (API de Métricas de Séries Temporais)

# 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 várias métricas selecionadas e um intervalo de tempo expandido.


Sparkpost analytics dashboard

Nota: há muitos itens integrados automaticamente no gráfico de dash (passar o mouse, zoom, escalonamento automático).

Primeiro, inicialize o quadro de dados 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. Isso é uma combinação de um callback de aplicativo (para verificar qual aba está sendo utilizada); junto 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 (abordaremos a aba de eventos mais tarde). Os elementos dcc são os Componentes Básicos do Dash e os Componentes HTML permitem facilmente o uso de HTML 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)

Note com o dash como é simples criar uma interface de painel com um dropdown de seleção múltipla e pesquisável. Para desabilitar a seleção múltipla ou pesquisa, os parâmetros para criar um dropdown podem ser facilmente modificados. Eu descobri que a parte mais complexa deste projeto foi construir o quadro de dados real a partir das entradas, assim como fazer o HTML + CSS funcionar corretamente na interface do usuário.

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

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

Visualização do Painel (API de Métricas de Séries Temporais)

# 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 várias métricas selecionadas e um intervalo de tempo expandido.


Sparkpost analytics dashboard

Nota: há muitos itens integrados automaticamente no gráfico de dash (passar o mouse, zoom, escalonamento automático).

Primeiro, inicialize o quadro de dados 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. Isso é uma combinação de um callback de aplicativo (para verificar qual aba está sendo utilizada); junto 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 (abordaremos a aba de eventos mais tarde). Os elementos dcc são os Componentes Básicos do Dash e os Componentes HTML permitem facilmente o uso de HTML 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)

Note com o dash como é simples criar uma interface de painel com um dropdown de seleção múltipla e pesquisável. Para desabilitar a seleção múltipla ou pesquisa, os parâmetros para criar um dropdown podem ser facilmente modificados. Eu descobri que a parte mais complexa deste projeto foi construir o quadro de dados real a partir das entradas, assim como fazer o HTML + CSS funcionar corretamente na interface do usuário.

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

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

Visualização do Painel (API de Métricas de Séries Temporais)

# 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 várias métricas selecionadas e um intervalo de tempo expandido.


Sparkpost analytics dashboard

Nota: há muitos itens integrados automaticamente no gráfico de dash (passar o mouse, zoom, escalonamento automático).

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 forma de apresentar todas as métricas dos eventos de uma maneira fácil de ler. Eu considerei adicionar parâmetros de filtragem a esta página, no entanto, decidi que isso adicionaria 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.). Eu optei por mostrar todos os eventos e colocar o carimbo de data/hora primeiro (pois, sem colocar o carimbo de data/hora primeiro, o gráfico não era fácil de ler). Inicialmente, descobri que, com apenas o HTML bruto, a tabela era incrivelmente difícil de olhar. Não havia bordas e nenhuma diferença de cor entre cabeçalho e linhas. Para tornar a tabela mais fácil de ler, consegui usar CSS dentro do Dash.

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

A ideia para os detalhes do evento é quase a mesma que o painel, exceto que desta vez, eu 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 a filtragem da API). Isso pode ser aumentado, no entanto, eu optei por mostrar os 10 eventos mais recentes porque quanto mais eventos são mostrados, mais tempo leva a chamada da API. Uma melhoria significativa que poderia ser feita seria a capacidade de paginar e incluir uma Next Page / Previous Page na interface do usuário.

Para construir a aba (página) de eventos, primeiro, eu chamo a API de Eventos e analiso a resposta JSON em um dataframe. Em seguida, eu classificado e reorganizo o dataframe para colocar o carimbo de data/hora como a primeira coluna. Finalmente, eu construo a tabela HTML iterando pelo 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))
        ])
    ])
])

Que parece assim 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 forma de apresentar todas as métricas dos eventos de uma maneira fácil de ler. Eu considerei adicionar parâmetros de filtragem a esta página, no entanto, decidi que isso adicionaria 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.). Eu optei por mostrar todos os eventos e colocar o carimbo de data/hora primeiro (pois, sem colocar o carimbo de data/hora primeiro, o gráfico não era fácil de ler). Inicialmente, descobri que, com apenas o HTML bruto, a tabela era incrivelmente difícil de olhar. Não havia bordas e nenhuma diferença de cor entre cabeçalho e linhas. Para tornar a tabela mais fácil de ler, consegui usar CSS dentro do Dash.

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

A ideia para os detalhes do evento é quase a mesma que o painel, exceto que desta vez, eu 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 a filtragem da API). Isso pode ser aumentado, no entanto, eu optei por mostrar os 10 eventos mais recentes porque quanto mais eventos são mostrados, mais tempo leva a chamada da API. Uma melhoria significativa que poderia ser feita seria a capacidade de paginar e incluir uma Next Page / Previous Page na interface do usuário.

Para construir a aba (página) de eventos, primeiro, eu chamo a API de Eventos e analiso a resposta JSON em um dataframe. Em seguida, eu classificado e reorganizo o dataframe para colocar o carimbo de data/hora como a primeira coluna. Finalmente, eu construo a tabela HTML iterando pelo 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))
        ])
    ])
])

Que parece assim 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 forma de apresentar todas as métricas dos eventos de uma maneira fácil de ler. Eu considerei adicionar parâmetros de filtragem a esta página, no entanto, decidi que isso adicionaria 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.). Eu optei por mostrar todos os eventos e colocar o carimbo de data/hora primeiro (pois, sem colocar o carimbo de data/hora primeiro, o gráfico não era fácil de ler). Inicialmente, descobri que, com apenas o HTML bruto, a tabela era incrivelmente difícil de olhar. Não havia bordas e nenhuma diferença de cor entre cabeçalho e linhas. Para tornar a tabela mais fácil de ler, consegui usar CSS dentro do Dash.

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

A ideia para os detalhes do evento é quase a mesma que o painel, exceto que desta vez, eu 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 a filtragem da API). Isso pode ser aumentado, no entanto, eu optei por mostrar os 10 eventos mais recentes porque quanto mais eventos são mostrados, mais tempo leva a chamada da API. Uma melhoria significativa que poderia ser feita seria a capacidade de paginar e incluir uma Next Page / Previous Page na interface do usuário.

Para construir a aba (página) de eventos, primeiro, eu chamo a API de Eventos e analiso a resposta JSON em um dataframe. Em seguida, eu classificado e reorganizo o dataframe para colocar o carimbo de data/hora como a primeira coluna. Finalmente, eu construo a tabela HTML iterando pelo 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))
        ])
    ])
])

Que parece assim na interface do usuário.

Sparkpost event details

Próximos Passos

Para alguém que procura 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

Para alguém que procura 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

Para alguém que procura 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

Leia mais desta categoria

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.

© 2025 Pássaro

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.

© 2025 Pássaro