Intro

Setelah membangun bravefrontier API (Unofficial), berikutnya saya membuat bravefrontier wiki (frontend).

Halaman yang ingin saya tampilkan antara lain halaman daftar omni unit dengan filter nama dan elemen dan halaman detail omni unit berisi profil omni unit, rekomendasi SP dan tombol share.

Website wiki: https://bfwiki.satyakresna.io

Repositori proyek: https://github.com/satyakresna/bfwiki

Halaman Daftar Omni Unit

Halaman daftar omni unit BFWiki

Halaman ini menampilkan 100 omni unit di awal beserta form pencarian nama dan elemen. Ketika pengguna menggulir layar ke bawah (scroll down) menuju omni unit terakhir (unit ke-100) maka aplikasi akan menampilkan 100 omni unit berikutnya.

Aktivitas ini akan terus berlanjut selama pengguna menggulir layar ke bawah menuju unit terakhir hingga tidak ada unit yang tersisa untuk ditampilkan.

Istilah ini disebut dengan inifinite scroll dan saya membuatnya menggunakan Intersection Observer Web API.

Untuk implementasinya silakan menuju file observeContent.js.

Halaman Detail Omni Unit

Halaman detail omni unit

Halaman ini hanya menampilkan profil dari omni unit, rekomendasi SP dan tombol share menggunakan Web Share API.

Web Share API yang saya gunakan adalah murni dari Web API yang disediakan oleh platform web. Hanya saja Web Share API hanya bisa digunakan untuk browser Chrome (Mobile) dan Safari (Desktop dan Mobile) berdasarkan dari caniuse.com.

Status Web Share API di caniuse.com

Perpindahan Antar Halaman

Website ini mengandalkan page.js sebagai pustaka mengatur navigasi aplikasi berbasis satu halaman. Salah satu fitur page.js yang yang menarik adalah cache data sehingga tidak perlu melakukan request ke API.

Misal, pengguna mengklik halaman daftar omni unit dan mengklik halaman detail omni unit (sembarang). Kemudian, pengguna menekan tombol back browser dan halaman daftar omni unit tampil menggunakan data yang sudah di cache oleh page.js.

Referensi: Working with state in page.js.

Tantangan yang saya alami di bagian perpindahan halaman adalah bagaimana cara mempertahankan posisi di infinite scroll saat pengguna kembali ke halaman daftar omni unit dan saat membuka detail omni unit, posisi scroll halaman selalu berada di paling atas.

Saya memanfaatkan window sebagai wadah untuk menyimpan object yang diperlukan untuk menyelesaikan tantangan di atas.

Kresna, state management… state management…

(Pura-pura ngga dengar)…

Ada 3 object yang ingin saya simpan di window antara lain:

  1. units menyimpan array omni units.
  2. previousPage menyimpan posisi terakhir scroll (sumbu Y) pada halaman infinite scroll.
  3. selectedUnitIndex menyimpan index omni unit yang dipilih oleh pengguna saat membuka halaman detail omni unit.

Untuk melihat keterkaitan ketiga object ini, silakan menuju ke file units.js dan unit.js.

Agar posisi scroll halaman selalu berada di paling atas saat membuka halaman detail omni unit, saya menggunakan perintah window.scrollTo(0, 0).

Prerender untuk Metatag

Metatag berperan penting untuk Search Engine Optimization (SEO). Metode prerender sering digunakan untuk aplikasi berbasis satu halaman.

Dengan memanfaatkan metode prerender, saya bisa membuat metatag dinamis untuk halaman detail omni unit.

Metatag yang digunakan adalah metatag opengraph. Metatag ini sering dipakai jika ingin membagikan sesuatu ke media sosial. Ada 4 properti yang saya gunakan antara lain:

  1. og:title sebagai nama omni unit.
  2. og:description sebagai deskripsi omni unit.
  3. og:image sebagai gambar dari omni unit.
  4. og:url sebagai canonical URL dari omni unit.

Jika ingin melihat kodenya, silakan menuju ke file unit.js di baris 32.

Untuk mengetes di mode pengembang, saya menggunakan prerender milik prerender.io.

Di mode produksi, Netlify menyediakan fitur prerender (beta) di menu Build & deploy halaman admin Netlify.

Halaman pengaturan prerendering di di Netlify

Dari forum komunitas Netlify tentang understanding and debugging prerendering, ada dua hal yang saya dapatkan:

  1. Netlify menyimpan cache konten prerender selama 24 - 48 jam.
  2. Memasang perintah window.prerenderReady di kode JavaScript untuk mengambil snapshot dari halaman yang sudah dirender sepenuhnya untuk layanan yang membutuhkan seperti di dokumentasi prerender.io.

Jika langkah 2 tidak dilakukan, maka Netlify akan mengambil snapshot setelah 10 detik terlepas dari kondisi halaman tersebut.

Untuk mengetes hasil prerender, saya menggunakan Twitter Card Validator dan Facebook Debugger untuk mengecek hasil dari metatag opengraph.

Hasil Twitter Card Validator untuk halaman omni unit Selena Hasil Facebook Debugger untuk halaman omni unit Selena