Alat Dasbor dengan API Burung
Zachary Samuels
24 Mar 2022
1 min read

Intisari Utama
Bird APIs dapat dikombinasikan dengan Python dan Plotly Dash untuk membangun dashboard yang interaktif dan kuat tanpa memerlukan Bird UI sepenuhnya.
Proyek ini menunjukkan cara untuk memvisualisasikan metrik dan acara menggunakan Bird’s Metrics API dan Events API 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 analisis kemampuan pengiriman, penyaringan, dan paginasi untuk dashboard yang lebih kaya.
Peningkatan di masa depan termasuk caching, UI yang lebih baik, dan integrasi dengan produk Bird lainnya atau API pihak ketiga.
Basis kode (tersedia di GitHub) menawarkan titik awal yang kuat bagi siapa saja yang ingin membangun dashboard atau portal yang didukung Bird untuk pelanggan.
Sorotan Q&A
Apa tujuan dari proyek dashboarding ini?
Ini menunjukkan bagaimana pengembang dapat menggunakan Bird APIs dengan Python dan Plotly Dash untuk membuat dasbor berbasis data yang memvisualisasikan metrik kampanye dan acara terbaru.
Mengapa menggunakan Plotly Dash untuk Bird APIs?
Dash adalah open source, mudah untuk dikustomisasi, dan ideal untuk membuat UI interaktif tanpa memerlukan keahlian front-end.
Apa yang ditampilkan oleh dashboard?
Ini memvisualisasikan metrik deret waktu dari Bird's Metrics API dan data peristiwa terbaru dari Events API, dengan opsi untuk menyaring dan memilih metrik dalam rentang waktu khusus.
Bagaimana alat ini dapat diperluas lebih lanjut?
Dengan menambahkan analitik pengiriman, filter lanjutan, penyimpanan data dalam cache, dan paginasi untuk kumpulan data besar guna meningkatkan kinerja dan kegunaan.
Keterampilan atau alat apa yang dibutuhkan 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 kustom dan alat pelaporan untuk tim atau klien tanpa akses ke platform penuh.
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 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 dan menginstal perpustakaan berikut:
requests
dash
pandas
Kemudian, masukkan kunci API Anda ke dalam App.py dan jalankan app. Ini akan berjalan di http://localhost:8050. Untuk informasi lebih lanjut tentang menerapkan ini ke server yang menghadap 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 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.
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




