Créer un guide d'application interactif

Les équipes de support éprouvent souvent des difficultés lorsqu'elles utilisent des applications qu'elles n'ont jamais installées. Un manuel PDF est une mauvaise solution car personne ne les lit.

J'ai conçu un outil qui permet aux utilisateurs d'interagir avec de véritables captures d'écran d'applications directement dans un navigateur. On a l'impression d'utiliser le téléphone lui-même. Vous cliquez sur un bouton sur une capture d'écran, et l'écran suivant apparaît.

Comment ça marche

J'ai utilisé Firebase Storage pour les images et du vanilla JavaScript pour la logique. J'ai évité les bibliothèques externes pour garder l'outil léger.

Le secret réside dans l'utilisation de zones cliquables (hotspots) basées sur des pourcentages. Au lieu de pixels fixes, je définis des zones cliquables à l'aide de coordonnées allant de 0 à 100. Cela permet de maintenir l'alignement des boutons, même lorsque la taille de la fenêtre change.

Le système utilise une simple machine à états. Chaque écran possède :

  • Un ID d'image
  • Une liste de zones cliquables (hotspots)
  • Une destination cible

Les outils que j'ai créés

Mesurer les coordonnées à l'œil nu est lent. J'ai conçu un éditeur HTML autonome pour accélérer le processus.

  • Téléchargez une capture d'écran sur un canvas.
  • Faites glisser la souris pour dessiner un rectangle.
  • L'éditeur calcule automatiquement les coordonnées en pourcentage.
  • Liez la zone à un autre écran via un menu déroulant.
  • Exportez l'objet final directement dans votre code.

Pour aider les utilisateurs, j'ai ajouté une lueur bleue pulsante sur les zones cliquables. Cela montre précisément où ils peuvent appuyer.

Leçons techniques clés

  1. Sécurité Firebase : Ne construisez pas les URL de stockage manuellement. Utilisez la méthode getDownloadURL du SDK. Cela inclut le jeton d'authentification nécessaire. Sans cela, les images ne se chargeront pas sans même afficher d'erreur.

  2. Corrections de mise en page : Dans une mise en page en colonne flex (flex column), définissez une hauteur explicite sur le parent. Définissez un min-height à 0 sur les enfants. Cela évite l'effondrement de la mise en page et les problèmes de débordement (overflow).

  3. Mise à l'échelle : Utilisez la propriété CSS transform: scale. Cela permet à l'image et aux zones cliquables de se redimensionner ensemble. Cela maintient toutes les proportions, quelle que soit la taille de l'écran.

  4. Vitesse : Récupérer les URL une par une crée des latences. J'ai implémenté un cache en mémoire et une fonction de préchargement en arrière-plan. Toutes les images se chargent en parallèle à l'ouverture de la fenêtre modale. Cela rend la navigation instantanée.

Le résultat

  • 20 écrans avec une navigation complète.
  • 52 zones cliquables interactives.
  • Aucune barre de défilement grâce à la mise à l'échelle automatique.
  • Transitions instantanées grâce au préchargement.

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