01. Tantangan & Kebutuhan Inti
PhysicalStack melacak kuotasi beli/jual harian dari 57+ dealer logam mulia di 13 negara (AS, Inggris, Kanada, Australia, Jerman, Swiss, Singapura, UEA, Turki, India, Swedia, Norwegia, Denmark). Data discrape ke dalam beberapa tab Google Sheets—satu per produk (Silver Eagle, Gold Coin, 10oz Bar, dll.)—dengan 17 konfigurasi produk yang mencakup pasar global dan spesifik negara.
Publikasi membutuhkan grafik interaktif yang di-embed langsung di dalam halaman member Ghost CMS. Sebelumnya, screenshot grafik statis diunggah secara manual, membuatnya tidak terbaca di mobile dan langsung usang saat data diperbarui.
02. Peran Saya & Implementasi Dashboard
Tanggung jawab saya adalah merancang dashboard Plotly di sisi klien, menyusun pipeline data dari Sheets ke frontend, dan membangun kode injeksi embed Ghost CMS. Arsitektur JS modular (config.js, data.js, utils.js, app.js) di-host di Cloudflare Pages dan dimuat ke Ghost via blok injeksi HTML.
- Embed Ghost CMS dengan Guard MutationObserver: Menginjeksi wrapper
MutationObserverkustom yang mencegah mesin konten Ghost menulis ulang DOM dashboard—memastikan render Plotly bertahan dari lifecycle internal halaman Ghost. - Proxy Cloudflare Pages Functions: Membangun Cloudflare Worker (
_worker.js) yang mem-proxy permintaan API Google Sheets via/api/sheetsdan lookup kurs FX via/api/fx, menjaga API key tetap di sisi server. - Tab Produk Multi-Pasar: Mengonfigurasi 17 produk grafik melintasi perak, emas, dan pasar spesifik negara (Turki Gram Altın, India Gram Gold Bar) dengan navigasi tab, penugasan warna per-dealer, dan filter berbasis negara.
03. Pipeline Data Interaktif & Dashboard Tersemat
Berikut adalah demonstrasi interaktif alur data 2 tahap—dari scraping kuotasi multi-dealer mentah hingga dashboard perbandingan harga Plotly.js live yang tersemat di Ghost CMS:
01. Data Mentah Spreadsheet Scraping Multi-Dealer
Skrip backend scraping mengumpulkan data harga mentah harian dari 57+ dealer perak & emas global, menangani nilai null dan format dealer yang beragam:
| # | Scrape Date | Time (UTC) | Dealer | Country | Product Name | Spot Benchmark | Dealer Ask | Dealer Bid | Premium Spread |
|---|---|---|---|---|---|---|---|---|---|
| 1 | 2026-05-14 | 08:00:14 | JM Bullion | USA | 1 oz Silver Eagle | $31.50 | $34.80 | $31.60 | +10.5% |
| 2 | 2026-05-14 | 08:00:22 | APMEX | USA | 1 oz Silver Eagle | $31.50 | $35.10 | $31.80 | +11.4% |
| 3 | 2026-05-14 | 08:01:05 | BullionStar | Singapore | 1 oz Silver Eagle | $31.50 | $34.60 | $31.40 | +9.8% |
| 4 | 2026-05-14 | 08:01:40 | SD Bullion | USA | 1 oz Silver Eagle | $31.50 | $33.95 | null | +7.8% |
02. Dashboard Interaktif PhysicalStack (Live Web Embed)
Dashboard Plotly.js live yang di-embed langsung dari sistem produksi PhysicalStack dengan dukungan multi-currency, date-range filtering, spot overlay, dan mode fullscreen browser penuh:
04. Hasil & Deliverables Utama
Dashboard Plotly.js yang di-embed memungkinkan PhysicalStack menerbitkan grafik perbandingan dealer yang live dan interaktif langsung di dalam halaman member Ghost CMS. Seluruh grafik tersemat diperbarui secara otomatis setiap hari saat pembukaan spot AS via Cloudflare Pages Functions yang mem-proxy Google Sheets—sepenuhnya mengeliminasi proses manual unggah screenshot grafik.
Member mendapatkan akses ke fitur analitik lengkap mencakup *crosshair tooltips*, konversi mata uang FX live multi-currency (USD, GBP, AUD, CHF, EUR), *pinch-to-zoom*, filter dealer individual, serta overlay harga spot dengan kalkulasi spread premium di 57+ dealer melintasi 13 negara.