Conservez en mémoire la progression de votre utilisateur, même après la fermeture de votre application et offrez-lui une expérience optimisée au fur et à mesure de ses utilisations. 
 
Cette mémorisation est possible grâce à la propriété local storage. Insérée dans le studio au sein d'un composant Web, elle vous permet des informations sans limite de durée de vie. Ces informations peuvent être : la première ouverture de l'app, la réalisation d'un exercice, la lecture d'un article...  
 
Concrètement, la fonction local storage n'est pas visuelle... Elle est composée de 2 états "ON" et "OFF" et c'est à vous de définir les conditions d'attribution. Par exemple, à l'affichage du premier écran ou à l'ouverture de la pop-up de résultat. Vous choisissez ensuite le scénario en fonction de l'état : "ON" ou "OFF".
 

   Télécharger le module localstorage.zip

 

Cas pratique 

Objectif : Afficher une pop-up de bienvenue uniquement à la première connexion de l'utilisateur. 
  • Téléchargez le module localstorage.zip et insérez-le dans un composant Web au niveau de votre premier écran.

  • A l'ouverture de l'application, il est nécessaire de consulter le localstorage pour connaître son état. Par défaut, celui-ci est ON. Créez l'action : Affichage de l'état / Agir sur un composant [Web] / Obtenir l'état de l'interrupteur 

  • Paramétrez le scénario n°1 correspondant à la première utilisation de l'application. Je souhaite ouvrir automatiquement la pop up. Sélectionnez le composant [Web] / Interrupteur changé [ON] / Agir sur un composant [Pop-up] / Ouvrir la pop up 

  • Il est nécessaire d'envoyer l'information de cette première utilisation au localstorage et changer son état à OFFVous pouvez par exemple le lier à la fermeture de la pop up. Sélectionnez le composant [Pop up] / Fermeture de la pop up / Agir sur un composant [Web] / Changer l'état de l'interrupteur

  • Si vous souhaitez créer un autre parcours, vous pouvez ensuite paramétrer le scénario n°2 correspondant aux autres utilisations. Sélectionnez le composant [Web] / Interrupteur changé [OFF] et choisissez l'action de votre choix : aller à un écran etc....

 

Fonctionnalités avancées (développeur)

Dans cette partie, nous détaillons la construction du module localstorage pour s'adapter à toutes vos problématiques. Cette partie est réservée aux utilisateurs ayant des connaissances en HTML.

Ce module est composé d'un fichier index.html, de la connexion PandaBridge et du fichier de description, pandasuite.json.

Capture_d_e_cran_2018-03-28_a__11.54.28.png

 

a.Le fichier de description : pandasuite.json

Le fichier pandasuite.json décrit les propriétés de ce module.

Les propriétés

Pour utiliser le localStorage dans plusieurs situations, nous avons défini un identifiant pour chaque utilisateur. Elle est de type string, c'est-à-dire qu'il s'agit d'une chaîne de caractère personnalisable.

fichier de description proprietes

Elle se retrouve dans la fenêtre Propriétés du composant.

fichier de description proprietes studio

 

Les déclencheurs

Il est intéressant de lancer une action si le bouton est "ON" ou "OFF" : nous définissons les deux déclencheurs associés.

Capture_d_e_cran_2018-03-28_a__11.58.24.png

 

Les actions

Nous souhaitons également changer l'état du bouton en "ON" ou en "OFF". Il est nécessaire aussi de pouvoir appeler le lieu de stockage pour connaître l'état du bouton : c'est l'action getSwitchState.

Capture_d_e_cran_2018-03-28_a__11.59.14.png

 

 

b.Le fichier PandaBridge

Pour que le module .zip communique avec le studio, il est nécessaire d'inclure ce fichier qui permet d'accéder à la classe PandaBridge et ses différentes méthodes. Il n'y a aucune modification à apporter à ce fichier. 

 

c.Les méthodes de la classe PandaBridge

Maintenant que les propriétés ont été déclarées et que la communication a été établie, nous utilisons les méthodes de la classe PandaBridge pour envoyer et recevoir les différentes informations.

  • Insertion du script dans le header du code

Capture_d_e_cran_2018-03-28_a__12.01.14.png

  • Appel au localStorage, description des déclencheurs et des actions

La méthode init permet l'initialisation, c'est elle qui va permettre d'exécuter les fonctionnalités de PandaBridge.

La méthode onLoad est appelée quand le composant se charge visuellement. Elle permet de recevoir les propriétés et les marqueurs personnalisés du composant.

La fonction getSwitchstate s'appuie sur la fonction localStorage pour connaître l'état du bouton. En fonction de la

Avec la méthode listen, nous recevons les informations du studio pour changer l'état du bouton. L'état est donc changé directement au sein du localStorage, en fonction de l'action demandée. Avec la propriété getSwitchState, l'état est remonté du localStorage sans être changé.

Capture_d_e_cran_2018-03-28_a__12.02.11.png

 

L'insertion du dossier .zip

Une fois que vous avez paramétré les fichiers, zippez le tout.

Attention : votre fichier HTML principal doit être accessible dès la racine au moment de la compression. Ne regroupez pas ces fichiers dans un dossier au moment de la compression.

Vous pouvez désormais personnaliser le localstorage en fonction des actions souhaitées :-)

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 1

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !