Membina Panduan Aplikasi Interaktif

Pasukan sokongan sering menghadapi kesukaran dengan aplikasi yang tidak pernah mereka pasang.

PDF dengan tangkapan skrin adalah penyelesaian standard. Kebanyakan orang tidak membaca PDF. Saya mahu membina sesuatu yang lebih baik. Saya mahukan panduan yang terasa seperti aplikasi sebenar. Anda melihat skrin utama, klik butang, dan skrin seterusnya muncul.

Saya membina panduan interaktif menggunakan tangkapan skrin sebenar dan hotspots yang boleh diklik.

Cara Ia Berfungsi

Saya menggunakan Firebase Storage untuk imej dan vanilla JavaScript untuk logik. Tiada library luaran.

  • Setiap skrin adalah satu imej penuh.
  • Saya meletakkan segi empat tepat halimunan, yang dipanggil hotspots, di atas imej.
  • Hotspots ini menggunakan peratusan dan bukannya piksel. Ini memastikan ia kekal selari apabila saiz tetingkap berubah.
  • Sebuah state machine yang ringkas mengendalikan navigasi. Setiap skrin mempunyai ID, imej, dan senarai hotspots.

Editor

Mengukur koordinat secara manual adalah lambat. Saya membina editor HTML berdiri sendiri untuk mempercepatkan proses tersebut.

  • Muat naik tangkapan skrin.
  • Seret tetikus anda untuk melukis hotspot.
  • Pautkan hotspot ke skrin sasaran.
  • Eksport kod secara terus.

Pilihan Reka Bentuk

Bukan setiap skrin mempunyai navigasi penuh. Untuk mengelakkan kekeliruan, saya menambah kesan cahaya biru berkelip (pulsing blue glow) pada kawasan yang boleh diklik. Ini menunjukkan kepada pengguna dengan tepat di mana mereka boleh mengetik.

Pengajaran Teknikal Utama

  • Firebase Storage: Jangan bina URL secara manual. Gunakan kaedah SDK getDownloadURL. Ini termasuk token pengesahan yang diperlukan untuk melepasi peraturan keselamatan.
  • CSS Flexbox: Jika anda menggunakan flex: 1 dalam susun atur kolum, elemen induk mesti mempunyai ketinggian yang nyata. Tetapkan min-height: 0 pada elemen anak untuk mengelakkan limpahan.
  • Prestasi: Memanggil Firebase pada setiap klik menambah lengah. Saya melaksanakan cache dalam memori dan memuat pratinjau semua imej apabila modal dibuka. Ini menjadikan navigasi berlaku serta-merta.
  • Penskalaan: Gunakan sifat CSS transform: scale(). Ini memastikan imej dan hotspots kekal selari dengan sempurna tanpa mengira saiz skrin.

Hasilnya

  • 20 skrin dinavigasi seperti telefon sebenar.
  • 52 hotspots dengan petunjuk visual.
  • Pemuatan serta-merta melalui pra-pemuatan dan caching.
  • Reka bentuk responsif yang sesuai dengan sebarang saiz modal.

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