Membangun Panduan Aplikasi Interaktif

Tim dukungan sering kali kesulitan dengan aplikasi yang belum pernah mereka instal.

PDF berisi tangkapan layar adalah solusi standar. Kebanyakan orang tidak membaca PDF. Saya ingin membangun sesuatu yang lebih baik. Saya ingin panduan yang terasa seperti aplikasi aslinya. Anda melihat layar beranda, mengeklik sebuah tombol, dan layar berikutnya muncul.

Saya membangun panduan interaktif menggunakan tangkapan layar asli dan hotspot yang dapat diklik.

Cara Kerjanya

Saya menggunakan Firebase Storage untuk gambar dan vanilla JavaScript untuk logikanya. Tanpa pustaka eksternal.

  • Setiap layar adalah satu gambar penuh.
  • Saya menempatkan persegi panjang tak kasat mata, yang disebut hotspot, di atas gambar.
  • Hotspot ini menggunakan persentase, bukan piksel. Hal ini menjaganya tetap sejajar saat ukuran jendela berubah.
  • Sebuah state machine sederhana menangani navigasi. Setiap layar memiliki ID, gambar, dan daftar hotspot.

Editor

Mengukur koordinat secara manual itu lambat. Saya membangun editor HTML mandiri untuk mempercepat prosesnya.

  • Unggah tangkapan layar.
  • Seret mouse Anda untuk menggambar hotspot.
  • Hubungkan hotspot ke layar target.
  • Ekspor kode secara langsung.

Pilihan Desain

Tidak setiap layar memiliki navigasi lengkap. Untuk mencegah kebingungan, saya menambahkan efek cahaya biru berdenyut (pulsing blue glow) pada area yang dapat diklik. Ini menunjukkan kepada pengguna dengan tepat di mana mereka dapat mengetuk.

Pelajaran Teknis Utama

  • Firebase Storage: Jangan membangun URL secara manual. Gunakan metode SDK getDownloadURL. Ini sudah termasuk token autentikasi yang diperlukan untuk melewati aturan keamanan.
  • CSS Flexbox: Jika Anda menggunakan flex: 1 dalam tata letak kolom, induknya (parent) harus memiliki tinggi yang eksplisit. Atur min-height: 0 pada anak (child) untuk mencegah overflow.
  • Performa: Memanggil Firebase pada setiap klik menambah jeda (lag). Saya menerapkan in-memory cache dan memuat semua gambar sebelumnya (preload) saat modal dibuka. Ini membuat navigasi menjadi instan.
  • Skalabilitas: Gunakan properti CSS transform: scale(). Ini memastikan gambar dan hotspot tetap sejajar dengan sempurna terlepas dari ukuran layar.

Hasilnya

  • 20 layar dinavigasi seperti ponsel asli.
  • 52 hotspot dengan petunjuk visual.
  • Pemuatan instan melalui preloading dan caching.
  • Desain responsif yang sesuai dengan ukuran modal apa pun.

Sumber: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e