Budowanie interaktywnego przewodnika po aplikacji

Zespoły wsparcia często mają trudności, korzystając z aplikacji, których nigdy nie instalowały. Instrukcja w formacie PDF to słabe rozwiązanie, ponieważ nikt ich nie czyta.

Stworzyłem narzędzie, które pozwala użytkownikom wchodzić w interakcję z prawdziwymi zrzutami ekranu aplikacji bezpośrednio w przeglądarce. Daje to wrażenie korzystania z prawdziwego telefonu. Klikasz przycisk na zrzucie ekranu, a pojawia się kolejny ekran.

Jak to działa

Do przechowywania obrazów użyłem Firebase Storage, a do logiki – czystego JavaScriptu. Unikałem zewnętrznych bibliotek, aby zachować lekkość rozwiązania.

Sekretem jest użycie hotspotów opartych na procentach. Zamiast stałych pikseli, definiuję klikalne obszary za pomocą współrzędnych od 0 do 100. Dzięki temu przyciski pozostają wyrównane nawet przy zmianie rozmiaru okna.

System wykorzystuje prostą maszynę stanów. Każdy ekran posiada:

  • ID obrazu
  • listę hotspotów
  • cel docelowy

Narzędzia, które stworzyłem

Mierzenie współrzędnych „na oko” jest powolne. Stworzyłem samodzielny edytor HTML, aby przyspieszyć ten proces.

  • Prześlij zrzut ekranu na canvas.
  • Przeciągnij myszką, aby narysować prostokąt.
  • Edytor automatycznie oblicza współrzędne procentowe.
  • Połącz obszar z innym ekranem za pomocą listy rozwijanej.
  • Wyeksportuj gotowy obiekt bezpośrednio do swojego kodu.

Aby pomóc użytkownikom, dodałem pulsującą niebieską poświatę wokół klikalnych obszarów. Pokazuje ona dokładnie, gdzie można dotknąć.

Kluczowe lekcje techniczne

  1. Firebase Security: Nie buduj adresów URL do pamięci masowej ręcznie. Użyj metody getDownloadURL z SDK. Zawiera ona niezbędny token uwierzytelniający. Bez niego obrazy nie będą się ładować, nie wyświetlając przy tym żadnego błędu.

  2. Layout Fixes: W układzie flex column ustaw wyraźną wysokość elementu nadrzędnego. Ustaw min-height na 0 dla elementów podrzędnych. Zapobiega to zapadaniu się układu i problemom z przepełnieniem.

  3. Scaling: Użyj właściwości CSS transform: scale. Pozwala to na jednoczesną zmianę rozmiaru obrazu i hotspotów. Dzięki temu wszystko zachowuje proporcje, niezależnie od rozmiaru ekranu.

  4. Speed: Pobieranie adresów URL jeden po drugim powoduje opóźnienia. Zaimplementowałem pamięć podręczną in-memory oraz funkcję wstępnego ładowania w tle. Wszystkie obrazy ładują się równolegle w momencie otwarcia okna modalnego. Dzięki temu nawigacja wydaje się błyskawiczna.

Wynik

  • 20 ekranów z pełną nawigacją.
  • 52 interaktywne hotspoty.
  • Brak pasków przewijania dzięki automatycznemu skalowaniu.
  • Błyskawiczne przejścia dzięki wstępnemu ładowaniu.

Źródło: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e