Alat Dashboarding dengan API Burung
Zachary Samuels
24 Mar 2022
1 min read
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.
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.
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 bahwa Anda menjalankan python 3.10 atau yang lebih baru dan menginstal pustaka berikut:
Pustaka Python | Tujuan |
|---|---|
requests | Komunikasi API dengan layanan Bird |
dash | Rendering UI dan dashboard |
pandas | Pemrosesan data dan generasi tabel |
Selanjutnya, 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 yang terhubung ke publik (seperti AWS), lihat sumber daya berikut:
Untuk mengakses aplikasi ini, Anda perlu memastikan bahwa Anda menjalankan python 3.10 atau yang lebih baru dan menginstal pustaka berikut:
Pustaka Python | Tujuan |
|---|---|
requests | Komunikasi API dengan layanan Bird |
dash | Rendering UI dan dashboard |
pandas | Pemrosesan data dan generasi tabel |
Selanjutnya, 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 yang terhubung ke publik (seperti AWS), lihat sumber daya berikut:
Untuk mengakses aplikasi ini, Anda perlu memastikan bahwa Anda menjalankan python 3.10 atau yang lebih baru dan menginstal pustaka berikut:
Pustaka Python | Tujuan |
|---|---|
requests | Komunikasi API dengan layanan Bird |
dash | Rendering UI dan dashboard |
pandas | Pemrosesan data dan generasi tabel |
Selanjutnya, 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 yang terhubung ke publik (seperti AWS), lihat sumber daya berikut:
Membuat Halaman Dasbor
Pertama, inisialisasi data frame dan dasbor. Tanpa inisialisasi 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 pemanggilan aplikasi (untuk memeriksa tab mana yang sedang digunakan); bersama dengan fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kami akan mendapatkan tab acara nanti). Elemen dcc adalah Komponen Inti Dash dan Komponen HTML yang dengan mudah memungkinkan HTML digunakan 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 mudahnya membuat UI dasbor dengan dropdown yang dapat dipilih banyak dan dapat dicari. Untuk menonaktifkan pemilihan banyak atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun data frame aktual dari input, serta membuat HTML + CSS berfungsi dengan benar di UI.
API Metrik Deret Waktu memungkinkan 33 metrik individu untuk ditarik berdasarkan rentang tanggal/waktu. Anda dapat menyaring lebih dalam berdasarkan Domain, Kampanye, Kolam IP, Domain Pengiriman, Subakun, dan menentukan Presisi data deret waktu. Filter tambahan ini bersama dengan analitik deliverability bisa menjadi perbaikan masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik deliverability).
dengan memanfaatkan dan memanggil API Metrik, saya membangun dasbor dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.
View 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 beberapa metrik yang dipilih dan rentang waktu yang diperluas.
Catatan: ada banyak item yang secara otomatis dibangun ke dalam grafik dash (hover, zoom, autoscale).
Pertama, inisialisasi data frame dan dasbor. Tanpa inisialisasi 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 pemanggilan aplikasi (untuk memeriksa tab mana yang sedang digunakan); bersama dengan fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kami akan mendapatkan tab acara nanti). Elemen dcc adalah Komponen Inti Dash dan Komponen HTML yang dengan mudah memungkinkan HTML digunakan 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 mudahnya membuat UI dasbor dengan dropdown yang dapat dipilih banyak dan dapat dicari. Untuk menonaktifkan pemilihan banyak atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun data frame aktual dari input, serta membuat HTML + CSS berfungsi dengan benar di UI.
API Metrik Deret Waktu memungkinkan 33 metrik individu untuk ditarik berdasarkan rentang tanggal/waktu. Anda dapat menyaring lebih dalam berdasarkan Domain, Kampanye, Kolam IP, Domain Pengiriman, Subakun, dan menentukan Presisi data deret waktu. Filter tambahan ini bersama dengan analitik deliverability bisa menjadi perbaikan masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik deliverability).
dengan memanfaatkan dan memanggil API Metrik, saya membangun dasbor dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.
View 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 beberapa metrik yang dipilih dan rentang waktu yang diperluas.
Catatan: ada banyak item yang secara otomatis dibangun ke dalam grafik dash (hover, zoom, autoscale).
Pertama, inisialisasi data frame dan dasbor. Tanpa inisialisasi 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 pemanggilan aplikasi (untuk memeriksa tab mana yang sedang digunakan); bersama dengan fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kami akan mendapatkan tab acara nanti). Elemen dcc adalah Komponen Inti Dash dan Komponen HTML yang dengan mudah memungkinkan HTML digunakan 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 mudahnya membuat UI dasbor dengan dropdown yang dapat dipilih banyak dan dapat dicari. Untuk menonaktifkan pemilihan banyak atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun data frame aktual dari input, serta membuat HTML + CSS berfungsi dengan benar di UI.
API Metrik Deret Waktu memungkinkan 33 metrik individu untuk ditarik berdasarkan rentang tanggal/waktu. Anda dapat menyaring lebih dalam berdasarkan Domain, Kampanye, Kolam IP, Domain Pengiriman, Subakun, dan menentukan Presisi data deret waktu. Filter tambahan ini bersama dengan analitik deliverability bisa menjadi perbaikan masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik deliverability).
dengan memanfaatkan dan memanggil API Metrik, saya membangun dasbor dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.
View 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 beberapa metrik yang dipilih dan rentang waktu yang diperluas.
Catatan: ada banyak item yang secara otomatis dibangun ke dalam grafik dash (hover, zoom, autoscale).
Membuat Halaman Detail Acara
Halaman rincian 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 di halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang cukup signifikan untuk proyek ini karena tabel tersebut kemudian harus dinamis (bersama dengan penambahan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan cap waktu di depan (karena tanpa meletakkan cap waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabelnya sangat sulit dilihat. Tidak ada batas dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.
Rincian Acara (API Acara)
Ide untuk rincian acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil API Acara dan membawa semua acara. Perhatikan bahwa rincian acara hanya menampilkan 10 acara terbaru (memanfaatkan 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 yang dibutuhkan untuk panggilan API. Satu perbaikan signifikan yang dapat dilakukan adalah kemampuan untuk melakukan pagination dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.
Untuk membangun tab (halaman) acara, pertama, saya memanggil API Acara dan mengurai respons JSON ke dalam bingkai data. Kemudian saya mengurutkan dan mengatur ulang bingkai data untuk menempatkan cap 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 tampak seperti ini di UI.
Halaman rincian 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 di halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang cukup signifikan untuk proyek ini karena tabel tersebut kemudian harus dinamis (bersama dengan penambahan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan cap waktu di depan (karena tanpa meletakkan cap waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabelnya sangat sulit dilihat. Tidak ada batas dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.
Rincian Acara (API Acara)
Ide untuk rincian acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil API Acara dan membawa semua acara. Perhatikan bahwa rincian acara hanya menampilkan 10 acara terbaru (memanfaatkan 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 yang dibutuhkan untuk panggilan API. Satu perbaikan signifikan yang dapat dilakukan adalah kemampuan untuk melakukan pagination dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.
Untuk membangun tab (halaman) acara, pertama, saya memanggil API Acara dan mengurai respons JSON ke dalam bingkai data. Kemudian saya mengurutkan dan mengatur ulang bingkai data untuk menempatkan cap 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 tampak seperti ini di UI.
Halaman rincian 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 di halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang cukup signifikan untuk proyek ini karena tabel tersebut kemudian harus dinamis (bersama dengan penambahan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan cap waktu di depan (karena tanpa meletakkan cap waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabelnya sangat sulit dilihat. Tidak ada batas dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.
Rincian Acara (API Acara)
Ide untuk rincian acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil API Acara dan membawa semua acara. Perhatikan bahwa rincian acara hanya menampilkan 10 acara terbaru (memanfaatkan 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 yang dibutuhkan untuk panggilan API. Satu perbaikan signifikan yang dapat dilakukan adalah kemampuan untuk melakukan pagination dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.
Untuk membangun tab (halaman) acara, pertama, saya memanggil API Acara dan mengurai respons JSON ke dalam bingkai data. Kemudian saya mengurutkan dan mengatur ulang bingkai data untuk menempatkan cap 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 tampak seperti ini di UI.
Langkah Selanjutnya
Untuk seseorang yang ingin membuat dasbor atau log acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi yang ada, langit adalah batasnya.
Seperti yang 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 mungkin sehingga API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan 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
Untuk seseorang yang ingin membuat dasbor atau log acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi yang ada, langit adalah batasnya.
Seperti yang 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 mungkin sehingga API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan 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
Untuk seseorang yang ingin membuat dasbor atau log acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi yang ada, langit adalah batasnya.
Seperti yang 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 mungkin sehingga API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan 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
