Memvisualisasikan Hacker News API Dengan HCL Dan SQL – Di episode terakhir kami melihat dasbor Steampipe yang menggabungkan hasil pencarian di berbagai API. Dasbor metasearch itu sepenuhnya didefinisikan dalam kode yang memadukan dua bahasa: SQL untuk mengkueri API, dan HCL (HashiCorp Configuration Language) untuk mengalirkan hasil ke tabel dasbor.
Memvisualisasikan Hacker News API Dengan HCL Dan SQL

pgsql – Pendekatan dasbor sebagai kode ini bersandar pada filosofi infrastruktur sebagai kode. Kami percaya bahwa dasbor adalah jenis infrastruktur lain yang harus ditentukan dalam perangkat lunak, dikelola dalam repositori yang dikontrol versi, dan digunakan dari repo.
Dalam episode ini kita akan melihat dasbor yang mengeksplorasi item yang diposting ke Hacker News. Ini menggambarkan beberapa cara di mana Steampipe dapat berpartisipasi dalam alur kerja yang ditentukan perangkat lunak. Visualisasi mencakup lebih dari 15.000 cerita sejak 21 Juni. Itu jauh lebih banyak sejarah daripada yang dapat Anda nikmati dengan mudah dari Hacker News API dalam satu tegukan. Lalu dari mana data historisnya? Ada di repo!
Sejarah
Setiap jam, GitHub Action memeriksa repo, menjalankan Steampipe, menanyakan item baru, mengekspornya ke file CSV, mengkomit file itu, dan mendorong ke asal. Jadi ketika Anda mengkloning atau memperbarui repo Anda mendapatkan data baru. Dengan Steampipe dan plugin CSV terpasang, inilah cara Anda melihat dasbor.
cd ~/steampipe-samples/all/hackernews
./update.sh
steampipe dashboard
Dan kemudian kunjungi https://localhost:9194. Ulangi ./update.sh kapan saja untuk menarik dan memasukkan data terkini. GitHub Action, dijadwalkan untuk berjalan setiap jam, melakukan hal berikut.
- Cek reponya
- Instal Steampipe di pelari GitHub
- Instal plugin Berita Peretas
- Kueri cerita terbaru dan kirim hasilnya ke file CSV
- Komit file CSV baru dan dorong perubahan
Saya terlambat ke pesta GitHub Actions tetapi saya ada di sana sekarang. Ini adalah cara yang bagus untuk mengumpulkan snapshot kecil dengan tahan lama!
Baca Juga : Mengenal Fitur Baru dari Postgresql 14
Bagi mereka yang menjaga skor, ada tiga contoh Steampipe dalam alur kerja ini:
- mengambil snapshot dalam GitHub Action menggunakan plugin Hacker News.
- membuat tabel di database Steampipe lokal Anda, menggunakan plugin CSV.
- meluncurkan server dasbor lokal yang terhubung dengan browser Anda.
HCL + SQL
Panel Sumber menawarkan daftar pilihan domain, dan menemukan cerita yang URL-nya cocok dengan domain yang dipilih. Berikut adalah kueri SQL yang membaca semua URL dan mengekstrak domainnya. Bagian tersulit adalah ekspresi reguler, tetapi itu berlaku untuk regex di semua bahasa. SQL itu sendiri sederhana dan mudah dimengerti.
with domains as (
select distinct
substring(url from ‘http[s]*://([^/$]+)’) as domain
from
hn_items_all
)
select
domain as label,
domain as value
from
domains
order by
domain
HCL yang membuat daftar pilihan juga sederhana dan mudah dimengerti.
input “domain” {
width = 3
sql = <<EOQ
— as above
EOQ
}
Itulah polanya di mana-mana: SQL untuk mendapatkan data, pembungkus HCL tipis untuk mengalirkan hasil ke dalam widget. Kedua jenis kode ini, yang bersama-sama mendefinisikan dasbor, lahir dalam repo, berkembang di sana, dan disebarkan dari sana. Dalam sistem low-or-no-code, semua informasi yang sama berada di penyimpanan data yang dikelola oleh aplikasi. Anda mungkin (saya pernah melakukannya) harus mengekspor info itu untuk merekam evolusi sistem dalam repo. Lebih baik selalu ada.
Inti dari sistem low-or-no-code, tentu saja, untuk membungkus kode dalam alat yang membuka kreativitas orang yang tidak membuat kode. Belum ada alat seperti itu untuk kombo HCL + SQL ini, tetapi mungkin ada. Sistem yang didefinisikan dalam kode secara inheren ramah terhadap alat yang membaca dan menulis kode itu. Repo Berita Peretas, misalnya, menyertakan contoh aneh yang menganimasikan bagan dengan mengedit file dasbor secara terprogram dan mengubah nilai HCL tertentu.
Meskipun saya tidak menggunakan parser untuk contoh itu, tentu saja ada parser HCL dan SQL yang merender kode sebagai data. Dalam episode sebelumnya kami menunjukkan bagaimana plugin Steampipe lain mengubah file Terraform menjadi tabel Steampipe, sehingga memungkinkan pemeriksa kepatuhan yang memvalidasi definisi Terraform. Saat Anda membuat dan mengembangkan dasbor, tidakkah Anda ingin memvalidasinya dengan cara yang sama? Arsitektur as-code menjamin bahwa itu mungkin. Yang mengatakan, pengkodean dasbor Steampipe dalam HCL + SQL murni mudah, menyenangkan, dan sangat produktif. Berikut adalah dua hal favorit saya yang membuatnya begitu.
Pengeditan langsung
Saat Anda mengedit kode dasbor di editor yang menyimpan otomatis, dasbor langsung bereaksi. Ini adalah semacam antarmuka manipulasi langsung: “suatu pendekatan ke antarmuka yang melibatkan representasi berkelanjutan dari objek yang menarik bersama dengan tindakan dan umpan balik yang cepat, dapat dibalik, dan inkremental.” (Wikipedia)
Bret Victor adalah juara besar dari pendekatan ini. Dalam segmen Inventing on Principle ini dia mengatasi masalah yang ditangani oleh manipulasi langsung. Saya punya kode ini, dan saya punya gambar ini di sini, dan saya harus menjaga pemetaan antara keduanya di kepala saya.
Semakin lama waktu yang dibutuhkan untuk melihat hasil perubahan kode, semakin sulit untuk mempertahankan pemetaan itu. Umpan balik langsung sangat berharga, dan terlalu sering tidak tersedia. Kami menerima begitu saja ketika mengkodekan web awal, tetapi sekarang sering kali ada langkah pembuatan yang menggagalkan manipulasi langsung. Saat mengkode dasbor Steampipe, Anda mendapatkan umpan balik langsung dari HCL dan SQL. Saya telah menulis banyak pertanyaan Postgres dalam beberapa tahun terakhir. Menuliskannya di lingkungan yang menyegarkan hasil kueri saat saya mengetik, atau menampilkan pesan kesalahan Postgres saat saya membuat kesalahan, telah transformatif.
Sensibilitas web
Pengkodean dasbor Steampipe mengingatkan saya pada web awal dengan cara lain juga. Tautan, misalnya, adalah warga kelas satu dasbor Steampipe, dan itu tidak selalu benar saat ini. Panel Kiriman menautkan nama pengguna ke dasbor lain yang menjelajahi semua kiriman dari pengguna yang dipilih. Semuanya berfungsi seperti yang diharapkan oleh pengembang web. Ada juga tombol Lihat Sumber. Ingat Lihat Sumber? Dulu penting di web. Saat ini biasanya hanya menampilkan noise garis yang diperkecil. Tetapi kombo HCL + SQL mengingatkan saya pada kombo HTML + JS awal dengan cara yang baik! Berikut intip sumber di balik salah satu panel dasbor.
Seiring dengan umpan balik langsung, observabilitas semacam ini membantu web awal lepas landas. Anda akan melihat sesuatu, bertanya-tanya bagaimana hal itu dilakukan, melihat sumbernya, mempelajarinya, dan menirunya. Pembangun web pemula tidak dapat lagi berpartisipasi dalam siklus baik semacam itu. Pembangun dasbor Steampipe pemula dapat melakukannya, dan itu menjadi pertanda baik bagi ekosistem yang berkembang.
Visualisasikan data dengan kecepatan berpikir
Karena Steampipe memperluas Postgres, Anda dapat menggunakan alat apa pun untuk membuat dasbor yang didukung oleh data Steampipe. Jika Anda mahir dengan Metabase, Tableau, atau alat lain yang terhubung ke Postgres, kekuatan super API-to-database-table Steampipe akan mempercepat kemampuan Anda untuk memvisualisasikan data dari berbagai sumber di lingkungan tersebut. Tetapi jika Anda mencoba membuat dashboard dengan cara Steampipe, beri tahu saya bagaimana kelanjutannya. Dalam pengalaman saya sendiri, ini adalah cara tercepat dan paling menyenangkan untuk mengubah ide menjadi dasbor yang berguna.