Membina Panduan Aplikasi Interaktif

Pasukan sokongan sering menghadapi kesukaran apabila menggunakan aplikasi yang tidak pernah mereka pasang. Manual PDF adalah penyelesaian yang lemah kerana tiada siapa yang membacanya.

Saya telah membina satu alat yang membolehkan pengguna berinteraksi dengan tangkapan skrin aplikasi sebenar di dalam pelayar. Ia terasa seperti menggunakan telefon sebenar. Anda klik butang pada tangkapan skrin, dan skrin seterusnya akan muncul.

Cara Ia Berfungsi

Saya menggunakan Firebase Storage untuk imej dan vanilla JavaScript untuk logiknya. Saya mengelakkan penggunaan pustaka luaran supaya ia kekal ringan.

Rahsianya adalah dengan menggunakan hotspot berasaskan peratusan. Berbanding piksel tetap, saya mentakrifkan kawasan boleh klik menggunakan koordinat dari 0 hingga 100. Ini memastikan butang kekal selari walaupun saiz tetingkap berubah.

Sistem ini menggunakan mesin keadaan (state machine) yang ringkas. Setiap skrin mempunyai:

  • ID imej
  • Senarai hotspot
  • Destinasi sasaran

Alat yang Saya Bina

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

  • Muat naik tangkapan skrin ke kanvas.
  • Seret tetikus anda untuk melukis segi empat tepat.
  • Editor tersebut mengira koordinat peratusan secara automatik.
  • Pautkan kawasan tersebut ke skrin lain melalui menu lungsur (dropdown).
  • Eksport objek akhir terus ke dalam kod anda.

Untuk membantu pengguna, saya menambah kesan cahaya biru berkelip pada kawasan boleh klik. Ini menunjukkan dengan tepat di mana mereka boleh mengetik.

Pengajaran Teknikal Utama

  1. Keselamatan Firebase: Jangan bina URL storan secara manual. Gunakan kaedah getDownloadURL daripada SDK. Ini termasuk token pengesahan yang diperlukan. Tanpanya, imej akan gagal dimuatkan tanpa menunjukkan sebarang ralat.

  2. Pembaikan Susun Atur: Dalam susun atur flex column, tetapkan ketinggian eksplisit pada elemen induk (parent). Tetapkan min-height kepada 0 pada elemen anak (children). Ini mengelakkan masalah keruntuhan susun atur dan limpahan (overflow).

  3. Penskalaan: Gunakan sifat transform scale CSS. Ini membolehkan imej dan hotspot diubah saiz bersama-sama. Ia memastikan semuanya kekal dalam nisbah yang betul tanpa mengira saiz skrin.

  4. Kelajuan: Mengambil URL satu demi satu akan menyebabkan lengah (lag). Saya melaksanakan cache dalam memori dan fungsi pra-muat (preload) latar belakang. Semua imej dimuatkan secara selari apabila modal dibuka. Ini menjadikan navigasi terasa pantas.

Hasilnya

  • 20 skrin dengan navigasi penuh.
  • 52 hotspot interaktif.
  • Sifar bar skrol terima kasih kepada penskalaan automatik.
  • Transisi pantas melalui pra-muat.

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