Si vous créez un jeu, vous avez probablement envie de garder en mémoire la progression d'un utilisateur et les étapes débloquées, même après la fermeture de l'application.

Cette mémorisation est possible grâce à la propriété localstorage. Insérée dans le studio dans un composant HTML, elle vous permet de stocker des données sans limite de durée de vie.

Pour vous simplifier la vie, nous avons préparé un module de stockage local prêt à l'emploi : cet exemple garde en mémoire l'état d'un bouton : "ON" ou "OFF". N'hésitez pas à le télécharger et à le personnaliser pour votre application.

Dans cet article, nous vous expliquons comment utiliser ce modèle et pour ceux qui voudraient le modifier pour un usage personnel, nous vous détaillons également sa construction.

 Télécharger le module local storage

Garder en mémoire l'état d'un bouton

Cet exemple s'applique pour un bouton avec deux statuts : "ON" ou "OFF". Grâce à ce module, il est possible de garder en mémoire l'état du bouton même après la fermeture de l'application.

La propriété localStorage permet de stocker des données sans limite de durée de vie. Elle est très utile et paramétrable pour correspondre à la situation de votre choix.

Dans le studio de création, insérez un composant HTML là où vous voulez, bien qu'il n'ait pas de représentation visible. Dans la fenêtre Propriétés du composant, sélectionnez le type HORS LIGNE, cliquez sur AJOUTER UNE SOURCE et uploadez le dossier .zip.

Nous construisons en parallèle le bouton dans un composant Multi-état comprenant bien deux états. Il est maintenant nécessaire de relier ces deux composants entre eux :

Du bouton au localStorage :

  • Au tap, le bouton change visuellement d'état et ce changement d'état est également envoyé au localStorage.

interactivites vers boutons ON et OFF

Du localStorage au bouton :

  • Au lancement de l'état, il est nécessaire d'interroger le localStorage pour connaître l'état stocké du bouton. C'est tout l'intérêt de l'action "Obtenir l'état interrupteur".

obtenir l'etat interrupteur

  • En fonction de l'état remonté par le localStorage, nous l'affichons visuellement dans le composant Multi-état.

interactivite du module

Sélectionnez le composant HTML et ouvrez la fenêtre Interactivités. Ce composant comprend deux déclencheurs par défaut : l'état "ON" et l'état "OFF" du bouton. Vous pouvez ainsi créer des actions spécifiques en fonction de l'état du bouton :-)

interactivite du composant

Tout est dit ! Il ne vous reste plus qu'à créer votre propre bouton à deux états et à utiliser le composant HTML pour suivre l'état. Fermez et ré-ouvrez votre application et constatez le résultat ! Magique ;-)

 

Personnaliser le localStorage (avancé)

Dans cette partie, nous détaillons pas-à-pas la construction du modèle de stockage en local pour vous permettre de l'adapter à toutes vos problématiques. Cette partie est réservée aux utilisateurs ayant des connaissances en HTML.

Ce dossier est simplement 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 permet de décrire les propriétés de notre choix.

Les propriétés

Pour être en mesure d'utiliser le localStorage dans plusieurs situations, nous définissons 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 directement dans la fenêtre Propriétés du composant.

fichier de description proprietes studio

 

Les déclencheurs

Dans notre cas, 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 dossier .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 : 0 sur 0

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

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !