Exploiter une TinyDB avec un affichage sous forme de liste avec AppInventor2

 Ce bref article va montrer simplement comment on peut exploiter facilement une TinyDB avec Appinventor2 et afficher les "TAG" (étiquettes) sous forme de liste cliquable.

Je vais partir pour cela sur une application dont le cahier des charges pourrait se résumer à cette fonction de contrainte (qui est du coup la fonction principale) :

"Stocker, dans une base de données persistante, différentes bobines d'impression 3d avec leur masse respective"

Voici par exemple une IHM simple pour l'écran d'accueil (rappel : les images 20.png et 30.png sont juste des blancs pour créer un espace plus propre) :

On oublie pas le bouton pour aller vers un autre écran...

Et les blocs correspondants sont :

Oui, d'accord, mais comment fait-on pour enregistrer des bobines dans la base de données ?😵

Il nous faut un nouvel écran pour éditer/ajouter les bobines (toujours aussi joli, je sais, j'ai un talent d'artiste !!!! 😂😂😂) :

Et les blocs correspondants sont :

Je vous laisse tester l'application en téléchargeant le fichier apk correspondant. Le fichier projet .aia est disponible sur demande... 

Le fichier .apk est disponible ici :

Pour toute question, un petit courriel ou un message sur Session...

Utilisation basique du notificateur sur AppInventor2

 Vous avez déjà eu des informations qui arrivaient sur votre écran de smartphone sous forme d'un rectangle avec un bouton "OK". Ceci est une notification. Il peut y en avoir des milliers de différentes (batterie, alertes, messages....)

Il est tout à fait possible sur AI2 de créer des notifications personnalisées avec l'outil NOTIFICATEUR.

Le notificateur est un élément "invisible" mais il existe bel et bien dans l'application.

Pour découvrir quelques possibilités, je propose cette interface :

Il s'agit de quatre boutons et de deux labels (eux-mêmes dans un alignement horizontal)

Remarque : les images sont en fait des fichiers png blancs de 20px de haut, ceux-ci permettent d'espacer les blocs pour aérer et donner plus de clarté (c'est toujours la même image, bien entendu !)

Les blocs :

En détail :

Action sur le premier bouton :

Action sur le deuxième bouton :

Si on clique sur "annuler" :

Action sur le troisième bouton :

Le bouton change de couleur de fond au choix et si on annule, il devient marron.

Action sur le dernier bouton :

Ceci met fin à cet article, un autre sera publié pour des fonctions avancées...

Utilisation basique de la TinyDB de AppInventor2

De nombreux utilisateurs de AppInventor 2 se retrouvent embarrassés lorsqu'il faut sauvegarder des informations saisies par l'utilisateur ou calculées par l'appareil.

En effet, parfois, pour certaines applications, il est nécessaire qu'une sauvegarde de données soit persistante, après la fermeture de l'application et/ou l'arrêt du téléphone. L'utilisateur ne doit pas toujours ressaisir des informations à chaque lancement par exemple.

Cet article va montrer comment conserver des données et comment les récupérer (sur le même appareil). un autre article sera consacré à une sauvegarde dans les nuages...

Rappel : ces deux articles expliquent déjà des notions sur l'outil qui va être utilisé :

https://sti2d-sin-isn.blogspot.com/2017/12/sauvegarder-des-donnees-entre-ecrans.html

https://sti2d-sin-isn.blogspot.com/2017/11/sauvegarder-des-donnees-entre-ecrans.html

1. Le constat :

Si on réalise cette application ci-dessous :

Si on saisit les informations demandées, la fermeture de l'application effacera les données, elles seront perdues !

😢

2. Une solution : TinyDB

Mise en œuvre (rappel)

Ceci va permettre de créer une base de donnée (petite, comme son nom l'indique) sur le smartphone.

Au niveau des blocs, il suffit de procéder ainsi (pour cet exemple, bien entendu) :

Lorsque l'utilisateur va cliquer sur le bouton, les données seront enregistrer sous deux étiquettes, "prenom" et "age" et ce de manière permanente.

Oui ! bon ! D'accord ! Et maintenant ?

3. Exploitation de cette application

    A titre d'exemple, on va reprendre l'application précédente et ajouter quelques éléments :

Fonctionnement :

Lancement de l'application après installation :

On lance une vérification :

La base de données est vide, donc comme demandé dans les blocs, on affiche "rien"

On saisit des informations :

Le prénom et l'année de naissance sont affichés après appui sur "Valider"

On vérifie à nouveau :

Pour le moment, ça fonctionne...

On quitte l'application et on la relance, puis on clique sur "Vérification"

Les données ont bien été conservées ! Cela fonctionne aussi après arrêt et redémarrage du téléphone.

Utiliser les Google Charts dans App Inventor

Le précédent article sur AI2 montre comment créer simplement une jauge en local.
Ici je vais présenter la version "élaborée" avec Google Charts (avec JavaScript (que je n'expliquerai pas ici))

Mode opératoire :

Avant tout, petite information :

Tout est dit !

Page Gallery de Google Charts :

En particulier, les jauges :

1) Cliquer sur

Le code source apparaît :

2) Copier le code et l'ouvrir dans NotePad++ par exemple :

Détail :

Avant de faire des modification, il est possible de tester en "live" les changements dans le code en cliquant ici :

On arrive sur cette page, on peut tout (ou presque) modifier :

Avant :

Après :

 

Je pense qu'il est préférable de tester en ligne puis de modifier le fichier dans NotePad++ quand on a atteint l'objectif... 

3) Créer un répertoire sur le dispositif où sera installé le fichier HTML incluant le Javascript :

Les noms des répertoires ont été créés pour mon smartphone, on peut donner les noms que l'on veut, à condition de bien reprendre le chemin après.

 Utiliser "Créer dossier" pour ..... créer un dossier....😊

On peut aussi utiliser AirDroid pour accéder directement au smartphone.....

4) Création de l'application :

Je vais faire varier la jauge en fonction d'un slide :

Attention, ne pas oublier le composant "FILE" qui va permettre de travailler sur un fichier interne.

Édition des blocs :

Détail :

 Attention, le chemin d'écriture de fichier est plus court que celui de la lecture, c'est pas moi qui le dit, c'est Android !

A partir de là, il suffit de récupérer le fichier APK par la méthode habituelle....

Un souci, une remarque ? un mail.....