Budowanie interaktywnego przewodnika po aplikacji

Zespoły wsparcia często mają trudności z aplikacjami, których nigdy nie instalowały.

PDF ze zrzutami ekranu to standardowe rozwiązanie. Większość ludzi nie czyta plików PDF. Chciałem zbudować coś lepszego. Chciałem przewodnika, który sprawia wrażenie prawdziwej aplikacji. Widzisz ekran główny, klikasz przycisk i pojawia się kolejny ekran.

Zbudowałem interaktywny przewodnik, używając prawdziwych zrzutów ekranu i klikalnych hotspotów.

How It Works

Do przechowywania obrazów użyłem Firebase Storage, a do logiki czystego JavaScriptu. Bez zewnętrznych bibliotek.

  • Każdy ekran to jeden pełny obraz.
  • Na obrazie umieszczam niewidoczne prostokąty, zwane hotspotami.
  • Hotspoty te wykorzystują procenty zamiast pikseli. Dzięki temu pozostają wyrównane przy zmianie rozmiaru okna.
  • Prosta maszyna stanów obsługuje nawigację. Każdy ekran posiada identyfikator (ID), obraz oraz listę hotspotów.

The Editor

Ręczne mierzenie współrzędnych jest powolne. Zbudowałem samodzielny edytor HTML, aby przyspieszyć ten proces.

  • Prześlij zrzut ekranu.
  • Przeciągnij myszką, aby narysować hotspot.
  • Powiąż hotspot z docelowym ekranem.
  • Wyeksportuj kod bezpośrednio.

Design Choices

Nie każdy ekran posiada pełną nawigację. Aby uniknąć dezorientacji, dodałem pulsującą niebieską poświatę na klikalne obszary. Pokazuje to użytkownikom dokładnie, gdzie mogą dotknąć.

Key Technical Lessons

  • Firebase Storage: Nie buduj adresów URL ręcznie. Użyj metody SDK getDownloadURL. Zawiera ona token uwierzytelniający niezbędny do obejścia reguł bezpieczeństwa.
  • CSS Flexbox: Jeśli używasz flex: 1 w układzie kolumnowym, element nadrzędny musi mieć określoną wysokość. Ustaw min-height: 0 na elemencie potomnym, aby zapobiec przepełnieniu (overflow).
  • Performance: Wywoływanie Firebase przy każdym kliknięciu powoduje opóźnienia. Zaimplementowałem pamięć podręczną w pamięci RAM (in-memory cache) i załadowałem wszystkie obrazy z wyprzedzeniem w momencie otwarcia okna modalnego. Dzięki temu nawigacja jest natychmiastowa.
  • Scaling: Użyj właściwości CSS transform: scale(). Zapewnia to idealne wyrównanie obrazu i hotspotów, niezależnie od rozmiaru ekranu.

The Result

  • 20 ekranów nawigowanych jak w prawdziwym telefonie.
  • 52 hotspoty z wizualnymi wskazówkami.
  • Natychmiastowe ładowanie dzięki wstępnemu ładowaniu i buforowaniu.
  • Responsywny design dopasowany do każdego rozmiaru okna modalnego.

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