Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan menggunakan Python, Plotly Dash, dan API kami.
Hampir setahun yang lalu, Tom Mairs, direktur kesuksesan pelanggan Bird, menulis alat mailer menggunakan Bird APIs. Dalam posting ini, saya melanjutkan dari mana dia berhenti. Alatnya memungkinkan pengiriman pekerjaan secara terjadwal, tetapi bagaimana jika kita ingin membuat dasbor dan log acara kita sendiri?
Mungkin saya ingin membuat dasbor spesifik untuk grup bisnis atau dasbor yang berhadapan dengan pelanggan, tetapi tidak memberikan pengguna akses penuh ke antarmuka Bird. Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan menggunakan Python, Plotly Dash, dan APIs kami.
Ketika saya memulai pencarian online, saya ingin menemukan jalur yang paling sederhana. Saya bisa saja membuat semua dasbor dan antarmuka sendiri dalam HTML dan python, namun setelah melakukan beberapa pencarian di Google, saya menemukan Plotly’s Dash, yang dengan mudah terintegrasi dengan python. Saya memilih Dash karena 2 alasan: 1) bersifat open source, dan 2) setelah membaca dokumentasi, tampaknya sangat mudah disesuaikan untuk apa yang ingin saya lakukan. Dash adalah perpustakaan open-source yang ideal untuk membangun dan menerapkan aplikasi data dengan antarmuka pengguna yang disesuaikan. Hal ini membuat pembuatan antarmuka menjadi sangat mudah. 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 kerangka waktu yang dapat dipilih. Awalnya, saya memulai dengan dasbor di mana Anda hanya dapat memilih satu metrik dari dropdown. Kemudian, saat saya mendapatkan masukan dari rekan kerja, saya memperbaiki dasbor sedikit untuk menambahkan multi-pilih dan judul sumbu. Saya juga memutuskan untuk menambahkan tab tambahan untuk log acara. Saya mencapai titik di mana saya merasa puas dengan apa yang saya miliki sebagai titik awal yang baik untuk siapa pun yang ingin membangun dasbor mereka sendiri. Tentu saja, saya meletakkan proyek tersebut di Github untuk Anda kloning atau cabang.
Memulai
Untuk mengakses app ini, Anda perlu memastikan Anda menjalankan python 3.10 atau lebih dan menginstal perpustakaan berikut:
requests
dash
pandas
Kemudian, masukkan API key Anda ke dalam App.py dan jalankan app. Ini akan berjalan di http://localhost:8050. Untuk informasi lebih lanjut tentang penyebaran ini ke server publik (seperti AWS), lihat sumber daya berikut:
Membuat Halaman Dashboard
Membuat Halaman Detil Event
Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dengan mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter penyaringan ke halaman ini, namun, saya memutuskan bahwa itu akan menambah jumlah waktu yang signifikan untuk proyek ini karena tabel harus menjadi dinamis (bersama dengan menambahkan parameter, panggilan balik, dll.). Saya memilih untuk menampilkan semua acara dan menempatkan cap waktu terlebih dahulu (karena tanpa menempatkan cap waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa hanya dengan HTML mentah, tabel sangat sulit dibaca. Tidak ada batas dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya bisa menggunakan CSS dalam Dash.
Ide untuk detail acara hampir sama dengan dasbor, kecuali kali ini, saya memanggil Events API dan membawa semua acara. Perhatikan bahwa detail acara hanya menunjukkan 10 acara terbaru (memanfaatkan parameter max_rows dan penyaringan API). Ini dapat ditingkatkan, namun, saya memilih untuk menampilkan 10 acara terbaru karena semakin banyak acara ditampilkan, semakin lama waktu pemanggilan API. Salah satu peningkatan signifikan yang bisa dilakukan adalah kemampuan untuk mempaginasi dan menyertakan Halaman Berikutnya / Halaman Sebelumnya di UI.
Untuk membangun tab acara (halaman), pertama, saya memanggil Events API dan mengurai respons JSON menjadi bingkai data. Kemudian saya mengurutkan dan menyusun ulang bingkai data untuk menempatkan cap waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengiterasi melalui bingkai data.
#Membangun dan memanggil parameter 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 = BASE_URL + "/events/message" 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']) max_rows=10 #Jumlah maksimum hasil yang ditampilkan dalam tabel acara #Tempatkan cap waktu sebagai kolom pertama dalam tabel 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]] #Tampilkan HTML baru dengan tabel acara (catatan, tabel ini juga merujuk table.css) return html.Div([ html.H2("Detail Acara"), 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.
Langkah Selanjutnya
Untuk seseorang yang ingin membuat dashboard atau log acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi di sini, langit adalah batasnya.
Seperti yang dibahas di atas, beberapa perbaikan di masa depan yang dapat dilakukan adalah:
Menambahkan analitik deliverability ke dashboard
Menambahkan lebih banyak filter ke dashboard
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 mendengar masukan atau saran untuk mengembangkan proyek ini.
~ Zach Samuels, Bird Senior Solutions Engineer
