Témoignage : un module caméra pour une balade touristique inoubliable

Témoignage : un module caméra pour une balade touristique inoubliable

5 février 2018|Mots-clés : , |
  • module-camera
madeleine piffaretti

Madeleine Piffaretti est freelance web. Après plusieurs années dans le développement d'applications big data, elle a choisi d'accompagner désormais les start-ups, PME, artisans et créateurs dans leurs projets web. Elle partage ci-dessous son expérience sur la réalisation du module photo sur mesure pour l'application de balade touristique de Tonnerre .

Ecrit par Madeleine Piffaretti.

Dans le cadre d’une application de balade touristique, il m’a été demandé d’utiliser et d’étendre les fonctionnalités du module caméra développé par l’équipe de PandaSuite.

Ce module, en accès libre sur Github (cliquez pour télécharger), permet de communiquer directement avec l'appareil photo du smartphone et rend ainsi possible la prise de photos directement depuis l'application.

github-module-camera

Pourquoi un module caméra dans l’application touristique ?

L’application de balade touristique propose à l’utilisateur de se balader dans la ville et grâce à une carte interactive, lui présente le patrimoine de la ville au travers de diaporamas photo et de textes explicatifs.

L’idée de la créatrice de l’application était de transformer l’outil de visite en un souvenir numérique et donc de permettre au détenteur de l’application de prendre ses propres photos (les lieux sous un autre angle, selfie,...) et de les intégrer dans les différents diaporamas de l’application. Le visiteur personnalise ainsi son application et garde un souvenir fort de son parcours dans la ville.

Prise en main du module caméra

Pour commencer et me faire la main avec le module (les actions, les évènements, les propriétés), j’ai simplement suivi le tutoriel mis à disposition par PandaSuite.

Dans l’application, il fallait permettre à l’utilisateur d’insérer jusqu’à 3 photos par lieu. Il y avait donc une première limitation dans le module fourni car l’image était toujours stockée dans la même variable :

Copy to Clipboard

Note: ci-dessus, affectation de l’image dans la variable nommé ‘my_awesome_image’. Donc si je prend une nouvelle photo, elle va écraser l’ancienne, prenant sa place dans la variable.

De plus dans la fonction permettant de vider le localStorage, seule la variable contenant l’image est supprimée mais dans le conteneur HTML, l’image était toujours affichée, même après un refresh.

Copy to Clipboard

Note : ci-dessus suppression de la variable dans le localStorage

Copy to Clipboard

Note : le ‘if’ teste que la variable image contient bien quelque chose mais rien n’est fait si la variable est vide. Donc même si elle a été supprimée grâce au ‘refreshStorage’, elle est toujours affiché dans le conteneur HTML.

Création d’un identifiant unique pour chaque photo du diaporama

Pour permettre à l’utilisateur d’insérer plusieurs photos dans son diaporama, il a fallu rajouter une propriété dans le fichier pandasuite.json :

Copy to Clipboard

Désormais, dans le studio Panda, on voit apparaître une nouvelle propriété et l’on peut donc nommé explicitement chaque photo personnelle du diaporama.

property-identifier-point-png

Dans le module, on récupère donc la valeur de cette propriété et on l’utilise comme clé pour stocker la photo associée à la bonne page du diaporama.

Copy to Clipboard

Affichage / Suppression de l’élément HTML contenant l’image

La dernière étape consiste à supprimer également l’image affichée dans le conteneur HTML.

Pour cela, 2 petites lignes de code m’ont suffit (notez qu’il y avait sûrement plein d’autre façon de faire).

Copy to Clipboard

Note : après le “nettoyage” du localStorage, on cache l’élément contenant l’image. On le re-affiche lors du rafraîchissement si la variable contenant l’image n’est pas vide.

Limitation du local storage

Heureuse d’être venu à bout de ces petites améliorations, je m’empresse alors de tester sur mon téléphone… Je n’aurais pas dû crier victoire si tôt! 🙁

À chaque fois que je tente de prendre une photo, ma popup d’erreur se lance…

Prenant le problème dans tous les sens, je n’y comprends rien. Étant dans l’incapacité à débuguer l’application sur mon téléphone, ça me semble bien compliqué de m’en sortir toute seule. J’appelle donc l’équipe PandaSuite à la rescousse !

Grâce au mode debug, activable dans le menu option de vos projets, ils peuvent accéder à votre application et vous aider à résoudre vos problèmes.

activation-debug-point-png

En quelques minutes, Benjamin a pu identifier le problème:

quota-error-debug-point-png

Et après une petite recherche google, j’ai vite compris ce qu’il se passait...

Les photos prises avec mon téléphone faisant facilement 3M, le localStorage était vite rempli avec à peine 2 ou 3 photos… En effet, sa taille est limitée (de 2M à 10M selon les navigateurs).

Un dernière amélioration a donc dû être faite. Lorsque l’appareil photo renvoie le fichier d’image à la fonction d’appel, il va falloir redimensionner cette image pour réduire considérablement son poids et être ainsi en mesure de stocker toutes les images prises par l’utilisateur.

Pour cela voici la fonction qu’il m’a fallu mettre en place :

Copy to Clipboard

Et le changement apporté à la function “handleFile” existante :

Copy to Clipboard

Responsive et éléments d’interaction

Pour finir, il a fallu jouer avec les conteneurs du studio Panda ainsi que les options pour le responsive.

studio-responsive-point-png

On ajoute à cela, une popup demandant la confirmation de la suppression de la photo dans le diaporama, histoire de ne pas les supprimer par inadvertance et nous voilà avec une chouette application de ballade touristique personnalisable !

module-camera-integration-point-png

À propos de l'auteur :

Aude
Aude - Happy Ambassador & Briseuse de Téléphone 📵 Je vous aide à transformer vos idées en contenu interactif engageant. PandaSuite vous rend les plus choses plus simples pour créer du contenu interactif sans aucune ligne de code (mobile/tablette/ordinateur).