Reach

Grow

Manage

Automate

Masuk

Pesan demo

Reach

Grow

Manage

Automate

Masuk

Pesan demo

Alat Dasbor dengan API Burung

Zachary Samuels

24 Mar 2022

1 min read

Alat Dasbor dengan API Burung

Zachary Samuels

24 Mar 2022

1 min read

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

Introduksi

Memulai

Membuat Halaman Dashboard

Membuat Halaman Detil Event

Langkah Selanjutnya

Business in a box.

Temukan solusi kami.

Hampir setahun yang lalu, Tom Mairs, direktur customer success Bird, menulis alat pengirim email menggunakan Bird APIs. Dalam posting ini, saya melanjutkan dari titik di mana dia berhenti. Alatnya memungkinkan pengiriman pekerjaan secara terjadwal, tetapi bagaimana jika kita ingin membuat dasbor dan catatan acara kita sendiri?

Mungkin saya ingin membuat dasbor khusus untuk kelompok bisnis atau dasbor yang berhadapan dengan pelanggan, tetapi tidak memberikan pengguna akses penuh ke Bird UI. Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan memanfaatkan Python, Plotly Dash, dan our APIs. Saat membangun dasbor yang memproses data API dengan volume tinggi, sadarilah bahwa komponen infrastruktur seperti DNS dapat menjadi hambatan - kami mengalami AWS DNS scaling challenges yang mempengaruhi kemampuan pemrosesan data kami. Bagi penggemar alur kerja visual, Anda juga dapat mengeksplorasi mengintegrasikan Flow Builder dengan Google Cloud Functions dan Vision API untuk menambahkan otomatisasi yang didukung AI ke dalam saluran pemrosesan data Anda.

Saat saya mulai mencari online, saya ingin menemukan jalur dengan hambatan paling sedikit. Saya bisa saja membuat semua dasbor dan UI sendiri dalam HTML dan Python, namun, setelah beberapa pencarian di Google, saya menemukan Plotly’s Dash, yang dengan mudah terintegrasi dengan Python. Saya memilih Dash untuk 2 alasan: 1) itu open source, dan 2) setelah membaca dokumentasinya, tampaknya mudah disesuaikan dengan apa yang ingin saya lakukan. Dash adalah library open-source yang ideal untuk membangun dan menerapkan aplikasi data dengan antarmuka pengguna yang disesuaikan. Ini membuat pembuatan UI menjadi sangat sederhana. Pertanyaannya kemudian menjadi, seberapa rumit 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 jangka waktu yang dapat dipilih. Awalnya, saya mulai dengan dasbor di mana Anda hanya bisa memilih satu metrik dari dropdown. Kemudian, saat saya mendapat masukan dari rekan kerja, saya memperbaiki dasbor sedikit untuk menambahkan multi-pilih dan judul sumbu. Saya juga memutuskan untuk menambahkan tab tambahan untuk catatan acara. Saya mencapai titik di mana saya merasa puas dengan apa yang saya miliki sebagai titik awal yang baik bagi siapa pun yang ingin membangun dasbornya sendiri. Untuk pengembang yang ingin menyuapkan data webhook waktu nyata ke dalam dasbor mereka, periksa panduan kami tentang membangun konsumen webhook dengan Azure Functions. Tentu saja, saya menaruh proyek tersebut di Github untuk Anda kloning atau branch.

Memulai

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

requests
dash
pandas

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

Membuat Halaman Dashboard

Pertama, inisialisasikan 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); bersama dengan fungsi kondisional untuk memeriksa tab mana yang saat ini dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kita akan membahas tab acara di lain waktu). Elemen dcc adalah Dash Core Components dan HTML Components yang dengan mudah memungkinkan penggunaan HTML di 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 yang dapat di-filter, dapat dicari, dan multi-pilih. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun kerangka data yang sesungguhnya dari input, serta membuat HTML + CSS berfungsi dengan benar di UI.

Time Series Metrics API memungkinkan 33 metrik individu untuk ditarik berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, IP Pools, Domain Pengiriman, Subakun, dan memilih Ketepatan dari data deret waktu. Filter tambahan ini bersama dengan analitik deliverability dapat menjadi peningkatan di masa depan untuk proyek ini (penangkapan kesalahan perlu diimplementasikan untuk klien yang tidak memiliki akses ke analitik deliverability).

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

# 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 ini adalah contoh dari beberapa metrik yang dipilih dan rentang waktu yang diperluas.

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

Pertama, inisialisasikan 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")

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)

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

# 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 ini adalah contoh dari beberapa metrik yang dipilih dan rentang waktu yang diperluas.

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

Pertama, inisialisasikan 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")

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)

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

# 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 ini adalah contoh dari beberapa metrik yang dipilih dan rentang waktu yang diperluas.

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

Membuat Halaman Detil Event

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 penyaringan ke halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang signifikan untuk proyek ini karena tabel tersebut kemudian harus bersifat dinamis (bersama dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan cap waktu terlebih dahulu (karena tanpa menempatkan cap waktu terlebih dahulu, grafik tidak mudah dibaca). Awalnya, saya menemukan bahwa hanya dengan HTML mentah, tabel tersebut sangat sulit dibaca. Tidak ada batasan dan tidak ada perbedaan warna untuk header versus baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.

Gagasan untuk detail acara hampir sama dengan dashboard, kecuali kali ini, saya memanggil Events API dan mengambil semua acara. Perhatikan bahwa detail acara hanya menunjukkan 10 acara terbaru (menggunakan parameter max_rows dan pemfilteran API). Ini dapat ditingkatkan, namun, saya memutuskan untuk menunjukkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama waktu yang dibutuhkan untuk panggilan API. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk membagi halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya dalam UI.

Untuk membangun tab acara (halaman) pertama, saya memanggil Events API dan mengurai respons JSON menjadi kerangka data. Kemudian saya menyortir dan mengatur ulang kerangka data untuk menempatkan cap waktu sebagai kolom pertama. Akhirnya, saya membuat tabel HTML dengan mengulangi kerangka 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 dalam UI.

Langkah Selanjutnya

Bagi seseorang yang ingin membuat dasbor atau catatan acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi di sini, langit adalah batasnya.

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

Menambahkan analitik pengiriman ke dasbor
Menambahkan lebih banyak filter ke dasbor
Opsi caching yang memungkinkan agar API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan UI
Menambahkan filter dan paginasi ke halaman detail acara

Saya tertarik mendengar masukan atau saran untuk mengembangkan proyek ini.

~ Zach Samuels, Bird Senior Solutions Engineer

Berita lainnya

Baca lebih lanjut dari kategori ini

Membangun Alat Validasi Penerima Burung Asinkron Massal

Memulai dengan CppUTest

Menggunakan Produk Bird yang Digabungkan

Membangun Alat Validasi Penerima Burung Asinkron Massal

Memulai dengan CppUTest

Membangun Alat Validasi Penerima Burung Asinkron Massal

Memulai dengan CppUTest

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Reach

Voice API

Numbers API

SMS API

WhatsApp API

Grow

Marketing

Sales

Manage

Dukungan

Pembayaran

Pengeluaran

Automate

Workflows

Sumber Daya

Changelog

Basis pengetahuan

Pusat pengembang

Pusat dukungan

Pelanggan

Blog

Perusahaan

Tentang

Harga

Partners

Karier

Legal

Terms

Pengaturan privasi

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

x.com

Instagram

Hubungi Support

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Reach

Voice API

Numbers API

SMS API

WhatsApp API

Grow

Marketing

Sales

Manage

Dukungan

Pembayaran

Pengeluaran

Automate

Workflows

Sumber Daya

Changelog

Basis pengetahuan

Pusat pengembang

Pusat dukungan

Pelanggan

Blog

Perusahaan

Tentang

Harga

Partners

Karier

Legal

Terms

Pengaturan privasi

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

x.com

Instagram

Hubungi Support

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Reach

Grow

Manage

Automate

Sumber Daya

Changelog

Basis pengetahuan

Pusat pengembang

Pusat dukungan

Pelanggan

Blog

Perusahaan

Tentang

Harga

Partners

Karier

Legal

Terms

Pengaturan privasi

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Hubungi Support

Alat Dasbor dengan API Burung

Alat Dasbor dengan API Burung

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

Business in a box.

Temukan solusi kami.

Memulai

Membuat Halaman Dashboard

Membuat Halaman Detil Event

Langkah Selanjutnya

Berita lainnya

Baca lebih lanjut dari kategori ini

Membangun Alat Validasi Penerima Burung Asinkron Massal

Memulai dengan CppUTest

Menggunakan Produk Bird yang Digabungkan

Membangun Alat Validasi Penerima Burung Asinkron Massal

Memulai dengan CppUTest

Membangun Alat Validasi Penerima Burung Asinkron Massal

Memulai dengan CppUTest

Mari hubungkan Anda dengan pakar Bird.Lihat kekuatan penuh dari Bird dalam 30 menit.

Reach

Grow

Manage

Automate

Sumber Daya

Perusahaan

Newsletter

Mari hubungkan Anda dengan pakar Bird.Lihat kekuatan penuh dari Bird dalam 30 menit.

Reach

Grow

Manage

Automate

Sumber Daya

Perusahaan

Newsletter

Mari hubungkan Anda dengan pakar Bird.Lihat kekuatan penuh dari Bird dalam 30 menit.

Reach

Grow

Manage

Automate

Sumber Daya

Perusahaan

Newsletter

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.

Mari hubungkan Anda dengan pakar Bird.
Lihat kekuatan penuh dari Bird dalam 30 menit.