Alat Dashboarding dengan API Burung

Email

·

24 Mar 2022

Alat Dashboarding dengan API Burung

Poin Penting

    • API Burung dapat dikombinasikan dengan Python dan Plotly Dash untuk membangun dasbor interaktif yang kuat tanpa perlu menggunakan UI Burung yang lengkap.

    • Proyek ini menunjukkan cara memvisualisasikan metrik dan peristiwa menggunakan API Metrik dan API Peristiwa Burung dalam aplikasi web kustom.

    • Plotly Dash menyediakan kerangka kerja sumber terbuka yang cepat untuk membangun elemen UI seperti dropdown, grafik, dan tabel.

    • Pengembang dapat memperluas alat ini dengan analitik keterkiriman, penyaringan, dan paginasi untuk dasbor yang lebih kaya.

    • Peningkatan di masa depan mencakup penyimpanan sementara, UI yang lebih baik, dan integrasi dengan produk Burung lainnya atau API pihak ketiga.

    • Basis kode (tersedia di GitHub) menawarkan titik awal yang kuat bagi siapa saja yang ingin membangun dasbor bertenaga Burung atau portal yang menghadap pelanggan.

Sorotan Tanya jawab

  • Apa tujuan dari proyek dasbor ini?

    Ini menunjukkan bagaimana pengembang dapat menggunakan API Bird dengan Python dan Plotly Dash untuk membuat dasbor yang didorong data yang memvisualisasikan metrik kampanye dan peristiwa terkini.

  • Mengapa menggunakan Plotly Dash untuk Bird APIs?

    Dash adalah sumber terbuka, mudah untuk disesuaikan, dan ideal untuk membuat UI interaktif tanpa memerlukan keahlian front-end.

  • Apa yang ditampilkan dasbor?

    Ini memvisualisasikan metrik deret waktu dari Bird’s Metrics API dan data acara terbaru dari Events API, dengan opsi untuk memfilter dan memilih metrik di rentang waktu kustom.

  • Bagaimana alat ini dapat diperluas lebih lanjut?

    Dengan menambahkan analitik keteririman, filter canggih, penyimpanan data, dan paginasi untuk dataset besar untuk meningkatkan kinerja dan kegunaan.

  • Keterampilan atau alat apa yang diperlukan untuk menjalankannya?

    Pengetahuan dasar Python dan instalasi requests, dash, dan pandas. Kunci API dari Bird diperlukan untuk menarik data.

  • Bagaimana proyek ini cocok dengan ekosistem Bird?

    Ini menggambarkan bagaimana API terbuka Bird dapat dimanfaatkan untuk membuat dasbor khusus dan alat pelaporan untuk tim atau klien yang tidak memiliki akses ke platform penuh.

Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan menggunakan Python, Plotly Dash, dan API kami.

API Metrik Burung + Dashboarding dengan Python

Hampir setahun yang lalu, Tom Mairs, direktur kesuksesan pelanggan Bird, menulis alat pengirim email yang memanfaatkan API Bird. Dalam posting ini, saya melanjutkan dari tempat ia tinggalkan. Alatnya memungkinkan transmisi pekerjaan secara terjadwal, tetapi bagaimana jika kami ingin membuat dasbor dan log acara kami sendiri?

Mungkin saya ingin membuat dasbor khusus untuk grup bisnis atau dasbor yang ditujukan untuk pelanggan, tetapi tidak memberikan akses penuh kepada pengguna ke UI Bird. Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan Python, Plotly Dash, dan API kami. Ketika membangun dasbor yang memproses data API dengan volume tinggi, perlu diingat bahwa komponen infrastruktur seperti DNS dapat menjadi hambatan - kami telah mengalami tantangan penskalaan DNS AWS yang mempengaruhi kemampuan pemrosesan data kami. Untuk penggemar alur visual, Anda juga dapat mengeksplorasi mengintegrasikan Flow Builder dengan Google Cloud Functions dan Vision API untuk menambahkan otomatisasi yang didorong oleh AI ke dalam jalur pemrosesan data Anda.

Ketika saya memulai pencarian saya secara online, saya ingin menemukan jalan dengan rintangan paling sedikit. Saya bisa saja membuat semua dasbor dan UI sendiri dalam HTML dan Python, namun, setelah beberapa pencarian di Google, saya menemukan Dash Plotly, yang mudah terintegrasi dengan Python. Saya memilih Dash karena 2 alasan: 1) itu adalah sumber terbuka, dan 2) setelah membaca dokumentasi, tampaknya mudah disesuaikan untuk apa yang saya coba lakukan. Dash adalah pustaka sumber terbuka yang ideal untuk membangun dan menerapkan aplikasi data dengan antarmuka pengguna yang disesuaikan. Ini membuat pembuatan UI menjadi sangat sederhana. Pertanyaannya kemudian menjadi, seberapa kompleks saya ingin membuat aplikasi ini? Semakin banyak waktu yang saya habiskan, semakin banyak fitur yang ingin saya tambahkan.

Untuk proyek awal, saya ingin memastikan bahwa saya memiliki dasbor dengan metrik yang dapat disesuaikan dan rentang waktu yang bisa dipilih. Awalnya, saya mulai dengan dasbor di mana Anda hanya bisa memilih satu metrik dari dropdown. Kemudian, setelah mendapatkan umpan balik dari rekan-rekan, saya memperhalus dasbor sedikit untuk menambah multi-pilih dan judul sumbu. Saya juga memutuskan untuk menambahkan tab tambahan untuk log acara. Saya sampai pada titik di mana saya puas dengan apa yang saya miliki sebagai titik awal yang baik bagi siapa saja yang ingin membangun dasbor mereka sendiri. Untuk pengembang yang ingin memberi data webhook waktu nyata ke dalam dasbor mereka, lihat panduan kami tentang membangun konsumen webhook dengan Azure Functions. Tentu saja, saya menempatkan proyek ini di Github agar Anda dapat mengkloning atau membuat cabang.

Memulai

Untuk mengakses aplikasi ini, Anda perlu memastikan Anda menjalankan python 3.10 atau lebih tinggi dan menginstal pustaka berikut:

Pustaka Python

Tujuan

requests

Komunikasi API dengan layanan Bird

dash

Render UI dan dashboard

pandas

Pemrosesan data dan pembuatan tabel

Kemudian, masukkan kunci API Anda ke dalam App.py dan jalankan aplikasinya. Aplikasi ini akan berjalan di http://localhost:8050. Untuk informasi lebih lanjut tentang menerapkan ini ke server yang dapat diakses publik (seperti AWS), lihat sumber daya berikut:

Membuat Halaman Dasbor

Pertama, inisialisasi kerangka data dan dasbor. Tanpa menginisialisasi dasbor, tidak ada dasbor yang akan muncul di UI.

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

Kemudian, bangun tab pertama. Ini adalah kombinasi dari callback aplikasi (untuk memeriksa tab mana yang sedang digunakan); serta fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kita akan membahas tab acara nanti). Elemen dcc adalah Komponen Inti Dash dan Komponen HTML yang memungkinkan HTML digunakan dengan mudah di dalam UI.

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)

Perhatikan dengan dash betapa sederhananya membuat UI dasbor dengan dropdown multi-pilih yang dapat dicari. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian terumit dari proyek ini adalah membangun kerangka data aktual dari masukan, serta membuat HTML + CSS bekerja dengan benar di dalam UI.

API Metrik Deret Waktu memungkinkan menarik 33 metrik individu berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, IP Pool, Domain Pengiriman, Subakun, dan menentukan Presisi data deret waktu. Filter tambahan ini bersama dengan analitik daya kirim bisa menjadi peningkatan masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik daya kirim).

Dengan memanfaatkan dan memanggil API Metrik, saya membangun dasbor dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.

Tampilan Dasbor (API Metrik Deret Waktu)

# 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

Berikut adalah contoh dari beberapa metrik yang dipilih dan rentang waktu yang diperpanjang.


Sparkpost analytics dashboard

Catatan: ada banyak item yang dibangun ke dalam grafik dash secara otomatis (hover, zoom, autoscale).

Pertama, inisialisasi kerangka data dan dasbor. Tanpa menginisialisasi dasbor, tidak ada dasbor yang akan muncul di UI.

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

Kemudian, bangun tab pertama. Ini adalah kombinasi dari callback aplikasi (untuk memeriksa tab mana yang sedang digunakan); serta fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kita akan membahas tab acara nanti). Elemen dcc adalah Komponen Inti Dash dan Komponen HTML yang memungkinkan HTML digunakan dengan mudah di dalam UI.

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)

Perhatikan dengan dash betapa sederhananya membuat UI dasbor dengan dropdown multi-pilih yang dapat dicari. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian terumit dari proyek ini adalah membangun kerangka data aktual dari masukan, serta membuat HTML + CSS bekerja dengan benar di dalam UI.

API Metrik Deret Waktu memungkinkan menarik 33 metrik individu berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, IP Pool, Domain Pengiriman, Subakun, dan menentukan Presisi data deret waktu. Filter tambahan ini bersama dengan analitik daya kirim bisa menjadi peningkatan masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik daya kirim).

Dengan memanfaatkan dan memanggil API Metrik, saya membangun dasbor dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.

Tampilan Dasbor (API Metrik Deret Waktu)

# 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

Berikut adalah contoh dari beberapa metrik yang dipilih dan rentang waktu yang diperpanjang.


Sparkpost analytics dashboard

Catatan: ada banyak item yang dibangun ke dalam grafik dash secara otomatis (hover, zoom, autoscale).

Pertama, inisialisasi kerangka data dan dasbor. Tanpa menginisialisasi dasbor, tidak ada dasbor yang akan muncul di UI.

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

Kemudian, bangun tab pertama. Ini adalah kombinasi dari callback aplikasi (untuk memeriksa tab mana yang sedang digunakan); serta fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kita akan membahas tab acara nanti). Elemen dcc adalah Komponen Inti Dash dan Komponen HTML yang memungkinkan HTML digunakan dengan mudah di dalam UI.

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)

Perhatikan dengan dash betapa sederhananya membuat UI dasbor dengan dropdown multi-pilih yang dapat dicari. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian terumit dari proyek ini adalah membangun kerangka data aktual dari masukan, serta membuat HTML + CSS bekerja dengan benar di dalam UI.

API Metrik Deret Waktu memungkinkan menarik 33 metrik individu berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, IP Pool, Domain Pengiriman, Subakun, dan menentukan Presisi data deret waktu. Filter tambahan ini bersama dengan analitik daya kirim bisa menjadi peningkatan masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik daya kirim).

Dengan memanfaatkan dan memanggil API Metrik, saya membangun dasbor dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.

Tampilan Dasbor (API Metrik Deret Waktu)

# 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

Berikut adalah contoh dari beberapa metrik yang dipilih dan rentang waktu yang diperpanjang.


Sparkpost analytics dashboard

Catatan: ada banyak item yang dibangun ke dalam grafik dash secara otomatis (hover, zoom, autoscale).

Membuat Halaman Rincian Acara

Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dengan cara yang mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter filter ke halaman ini, namun saya memutuskan bahwa itu akan menambah waktu yang signifikan pada proyek ini karena tabel kemudian harus dinamis (bersamaan dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan stempel waktu pertama (karena tanpa menempatkan stempel waktu terlebih dahulu, grafik tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabel sangat sulit untuk dilihat. Tidak ada batas dan tidak ada perbedaan warna antara header dan baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.

Tampilan Detail Acara (API Acara)

Ide untuk detail acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil API Acara dan membawa semua acara. Perhatikan bahwa detail acara hanya menunjukkan 10 acara terbaru (menggunakan parameter max_rows dan penyaringan API). Ini dapat ditingkatkan, namun saya memutuskan untuk menampilkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama waktu panggilan API. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk menampilkan halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.

Untuk membangun tab acara (halaman), pertama-tama, saya memanggil API Acara dan mem-parsing respons JSON ke dalam bingkai data. Kemudian saya mengurutkan dan mengatur ulang bingkai data untuk menempatkan stempel waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengiterasi melalui bingkai data.

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

Yang terlihat seperti ini di UI.

Sparkpost event details

Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dengan cara yang mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter filter ke halaman ini, namun saya memutuskan bahwa itu akan menambah waktu yang signifikan pada proyek ini karena tabel kemudian harus dinamis (bersamaan dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan stempel waktu pertama (karena tanpa menempatkan stempel waktu terlebih dahulu, grafik tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabel sangat sulit untuk dilihat. Tidak ada batas dan tidak ada perbedaan warna antara header dan baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.

Tampilan Detail Acara (API Acara)

Ide untuk detail acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil API Acara dan membawa semua acara. Perhatikan bahwa detail acara hanya menunjukkan 10 acara terbaru (menggunakan parameter max_rows dan penyaringan API). Ini dapat ditingkatkan, namun saya memutuskan untuk menampilkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama waktu panggilan API. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk menampilkan halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.

Untuk membangun tab acara (halaman), pertama-tama, saya memanggil API Acara dan mem-parsing respons JSON ke dalam bingkai data. Kemudian saya mengurutkan dan mengatur ulang bingkai data untuk menempatkan stempel waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengiterasi melalui bingkai data.

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

Yang terlihat seperti ini di UI.

Sparkpost event details

Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dengan cara yang mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter filter ke halaman ini, namun saya memutuskan bahwa itu akan menambah waktu yang signifikan pada proyek ini karena tabel kemudian harus dinamis (bersamaan dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan stempel waktu pertama (karena tanpa menempatkan stempel waktu terlebih dahulu, grafik tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabel sangat sulit untuk dilihat. Tidak ada batas dan tidak ada perbedaan warna antara header dan baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.

Tampilan Detail Acara (API Acara)

Ide untuk detail acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil API Acara dan membawa semua acara. Perhatikan bahwa detail acara hanya menunjukkan 10 acara terbaru (menggunakan parameter max_rows dan penyaringan API). Ini dapat ditingkatkan, namun saya memutuskan untuk menampilkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama waktu panggilan API. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk menampilkan halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.

Untuk membangun tab acara (halaman), pertama-tama, saya memanggil API Acara dan mem-parsing respons JSON ke dalam bingkai data. Kemudian saya mengurutkan dan mengatur ulang bingkai data untuk menempatkan stempel waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengiterasi melalui bingkai data.

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

Yang terlihat seperti ini di UI.

Sparkpost event details

Langkah Selanjutnya

Bagi seseorang yang ingin membuat dasbor atau log acara sendiri, ini adalah awal yang baik. Dengan kemampuan penyesuaian di sini, langit adalah batasnya.

Seperti yang dibahas di atas, beberapa perbaikan di masa depan yang dapat dilakukan adalah:

  • Menambahkan analitik keteririman ke dasbor

  • Menambahkan lebih banyak filter ke dasbor

  • Opsi caching yang mungkin sehingga API tidak dipanggil setiap kali untuk menampilkan halaman

  • Perbaikan UI

  • Menambahkan penyaringan dan paginasi ke halaman detail acara

Saya tertarik untuk mendengar umpan balik atau saran untuk memperluas proyek ini.

~ Zach Samuels, Insinyur Solusi Senior Bird

Berita lainnya

Baca lebih lanjut dari kategori ini

Email

·

26 Mei 2022

Membangun Alat Validasi Penerima Burung Asinkron Massal

14 Mei 2017

Memulai dengan CppUTest

Platform & Infrastruktur

·

22 Mar 2022

Menggunakan Produk Bird yang Digabungkan

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

Platform AI-native lengkap yang dapat berkembang seiring dengan bisnis Anda.

Hubungi penjualan

Mulai gratis

© 2026 Burung

Hubungi Dukungan

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

Platform AI-native lengkap yang dapat berkembang seiring dengan bisnis Anda.

Hubungi penjualan

Mulai gratis

© 2026 Burung

Hubungi Dukungan

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

Platform AI-native lengkap yang dapat berkembang seiring dengan bisnis Anda.

Hubungi penjualan

Mulai gratis

© 2026 Burung

Hubungi Dukungan