MIT App Inventor: apprentissage par l’exemple

Depuis le début de l’implication du Cameroun dans la compétition internationale Technovation Challenge en 2015, j’ai eu à donner une dizaine de séminaires portant sur l’usage de MIT App Inventor.  Ceci va de la formation des coachs et mentors de cette compétition, aux universitaires, collégiens, etc ayant chacun un background informatique  (algorithmique, programmation) ou non. En effet, cette compétition a pour but de faire des jeunes filles des pionnières de technologies web. Encadrées par des coachs et mentors, elles apprennent à identifier des problèmes/besoins sociaux, les transformer en projet, construire un plan financier pour en assurer la rentabilité et réaliser des applications mobiles adressant lesdits problèmes/besoins. D’où la nécessité de la connaissance et/ou maîtrise d’outils de développement adéquats dont MIT App Inventor. C’est dans ce cadre que se sont principalement inscrits les ateliers de formation que j’ai eu à tenir.

Compte tenu des retours des participants qui éprouvent généralement des difficultés avec les documentations en langue anglaise,  il m’a semblé important de centraliser et mettre en ligne les supports utilisés lors desdits ateliers afin d’aider à l’apprentissage d’un maximum de personnes. Vos retours et critiques constructives m’aideront à améliorer la qualité de ces supports.

Objectif

L’objectif de ce tutoriel est de montrer de bout en bout comment concevoir une application mobile complète en manipulant le Designer et l’éditeur de Blocs de MIT App Inventor. Le cas d’exemple pris ici est celui d’une application  « DonnerMonAvis » qui permet de collecter les avis des participants vis-à-vis d’un atelier auquel ils ont participé. La vidéo uploadée à cette url présente en live tous les points abordés dans ce tutoriel. « DonnerMonAvis » a une architecture 3-tiers  composée d’une Interface ( créée par le Designer de MIT App Inventor), une partie Métier (créée par l’éditeur de Blocs  de MIT App Inventor) et une Base de données (gérée par l’outil FusionTablesControl qui prend en charge les  tables de type FusionTables implémentées par Google). La présentation accessible à cette adresse donne de plus amples détails à propos des objectifs de ce tutoriel.

clientServeur_3tiers.gif
Fig 1: Architecture 3-tiers

Objectifs spécifiques

Les objectifs spécifiques principaux de cet article sont entre autres:

  • Mieux manipuler le Designer de l’environnement graphique de MIT App Inventor grâce à la technique du  Glisser déposer. Ceci correspond au Niveau 1 de la figure 1. Nous manipulerons entre autres: FusionTablesControl, WebViewer, PhoneNumberPicker, Textbox, Label, Notifier, TableArrangement, Button.
  • Jouer (Coder) avec l’éditeur «Blocks» de MIT App Inventor pour implémenter le métier de l’application tout en ayant l’impression de faire une partie de Puzzle. Ceci correspond au Niveau 2 de la figure 1.
  • Se familiariser avec la gestion de base de données : cas de FusionTables. Ceci correspond au Niveau 3 de la figure 1. 

Construction de l’interface grâce au Designer

Chaque participant souhaitant donner son avis via l’application mobile “DonnerMonAvis” devra renseigner les éléments suivants: nom, âge, numéro de téléphone, choix de l’atelier/vidéo suivi et enfin l’avis proprement dit.

ecranPrincipal
Fig2- Écran principal conçu avec le Designer

L’écran principal de l’application “DonnerMonAvis” est construite sur la base des outils suivants regroupés en deux catégories: les éléments visibles et ceux invisibles:

  • Textbox :  pour saisir un texte qui peut être un long paragraphe ou un entier suivant les propriétés assignées.
    • L’âge étant un entier, il faut cocher la propriété  NumbersOnly qui permet de n’activer que le pavé numérique lors de la saisie, afin de contrôler que l’âge saisi soit effectivement un nombre entier. 1
    • L’avis pouvant être un texte très long, il est important d’activer la propriété MultiLine pour permettre à l’utilisateur de saisir un paragraphe. 1
  • PhoneNumberPicker : pour choisir un numéro de téléphone dans le répertoire du terminal mobile qui exécute l’application.  2
  • Spinner: pour proposer une liste d’options possibles parmi lesquelles l’utilisateur choisira une. 3
  • Button: pour valider le formulaire et déclencher une action métier. 4
  • Webviewer: pour pouvoir visualiser en temps « réel » l’état d’une base de données de type FusionTables dont on a l’URL. De manière générale, il permet d’afficher du contenu dont on a l’URL de location.

D’autres éléments certes invisibles du point de vue de l’utilisateur final, sont toutefois indispensables. A cet effet, il faut ajouter les éléments suivants:

  • TableArrangement: pour mieux disposer les éléments de l’interface et les ranger sous forme de matrice.
  • Notifier: pour pouvoir afficher des boîtes de dialogue à des fins d’alerte ou de débuggage
  • FusionTablesControl: pour stocker (insertion, modification, suppressiion) et récuperer les éléments d’une table de type FusionTables

Construction du métier grâce à l’éditeur Blocs

Dans cette section nous allons illustrer la construction des blocs qui gèrent les évènements  liés  aux éléments de l’écran principal:

  • PhoneNumberPicker: il est question ici de pouvoir afficher le numéro de téléphone correspondant au contact qui a été choisi dans le repertoire. En effet, par défaut, le numéro qui sera affiché à l’écran est 69000000 tel que configuré dans le designer (voire Fig2); ceci même si l’utilisateur à choisi un contact différent dans son répertoire.

phoneNumberPicker.gif

  • Button: il s’agit ici de montrer les actions effectuées une fois qu’on clique sur le bouton “Valider”. Premièrement les valeurs saisies par l’utilisateur sont récupérées et stockées (via la méthode set) dans des variables globales déclarées au préalable. Ces variables globales donnent l’avantage de pouvoir être accessibles à tout point du code.
    • une boîte de dialogue est affichée pour présenter le récapitulatif des informations saisies. C’est la méthode ShowMessageDialog de l’outil Notifier qui est appelée à cet effet.
    • les trois dernières actions permettent de créer la requête SQL  correspondant à la sauvegarde des informations dans la table FusionTables, puis de l’exécuter grâce à l’outil de gestion de tables FusionTablesControl (voire Section suivante).

bouton_bloc.jpg

Gestion de la base de données: FusionTablesControl

Le but de cette section est de recenser et de montrer comment configurer et utiliser les outils de gestion de base de données. FusionTablesControl a ici le rôle de gestionnaire de base de données.  Il permet d’exécuter les opérations d’insertion, modification, suppression et de recherche dans les tables de type FusionTables. En comparaison à l’outil TinyDB, qui permet de stocker les informations sur le terminal mobile utilisateur, FusionTablesControl permet à plusieurs terminaux mobiles d’écrire et lire dans une même table partagée. Pour l’utiliser, il faut avoir accès à une API google: FusionTables API mise à disposition dans la console de développeurs  Google.

Étape 1:  activation de l’API FusionTables

La vidéo récapitulative de ce tutoriel (accessible à cette adresse ) donne en détail, les étapes à suivre pour activer l’API Fusion Tables. Cette API, au même titre que toute API Google est  activée à l’adresse suivante https://console.developers.google.com/ . À cette adresse se trouve un tableau de bord pour la gestion des API liées au compte Google du concepteur de l’application.

fusionTableAPI

Étape 2: récupération de la clé de l’API

La clé récupérée (voire vidéo) est stockée dans la variable globale API_KEY et associée au gestionnaire de base de données FusionTablesControl lors de l’initialisation de l’écran principal. La première ligne du bloc suivant montre comment ceci est fait.

ecranInitialise_blocs.jpg
Fig5- Initialilsation de l’écran prinicpal

Étape 3: création effective de la table Fusiontables

  • Aller dans le Drive à l’adresse: https://drive.google.com/drive/
  • Créer un nouveau formulaire de type Google FusionTables. Cette option n’est visible que si l’API FusionTables API a préalablemnt été activée (étape 1)
  • Une nouvelle fenêtre est ouverte et propose différentes manières de créer une table. Chosir l’option Creer Empty table . La  table créée par défaut à quatre champs qui sont changés ainsi: Edit > Change Columns . Pour l’application DonnerMonAvis, notre table contient cinq champs (Nom, Age, Video, Avis, Telephone) tous de type Text sauf le champ Age qui est de type Number:
    • NB: il est crucial de retenir l’orthographe et la casse des noms des champs ajoutés à la table créée et les utiliser telquel dans l’éditeur blocs de MIT App Inventor. Faute de quoi, une erreur (Erreur 403) sera retournée.
  • En clickant sur le bouton Share (en haut à droite), partager la table en mode public pour permettre aux internautes d’y écrire. Copier l’adresse URL donnée dans la boîte de dialogue automatiquement ouverte;  la mettre dans une variable globale Table_URL
    • Le tutoriel suivant du site Puravidapps donne d’amples détails sur la méthodologie à suivre pour que les informations d’un utilisateur X puissent effectivement être sauvegardées dans la table de type  FusionTables.
  • La valeur stockée dans Table_URL est utilisée pour configurer le composant WebViewer. Comme dit en introduction, il permet dans notre cas de voir en temps réel les informations effectivement sauvegardées dans notre table. Les deux dernières lignes de Fig5 montre comment est configuré le WebViewer.

Étape 4: obtention de l’ Identifiant de la table créée

Chaque table de type FusionTables a un identifiant unique qui est utilisé pour la référencer pour toute opération qui la concerne. Ledit identifiant est obtenu ainsi en suivant File > About this Table, ensuite on copie la valeur qui suit le label ID. L’identifiant copié sera utilisé pour initialiser la variable TABLE_ID dans l’éditeur de blocs de MIT App Inventor.

ecranInitialise_blocs

Étape 5: création de la requête d’insertion

Les informations saisies par l’utilisateur sont sauvegardées via une requête respectant la syntaxe SQL. Toute chaîne de caractères doit être mise entre de simples quotes avant l’insertion dans la table. D’où l’intérêt de la fonction quotifier qui permet en outre d’épurer les apostrophes des chaines de caractères qui interviennent dans la requête d’insertion.

quotifier_bloc

Avant d’exécuter la requêtte, il est important de vérifier qu’elle  est correcte. Pour ce faire, il faut faire un click droit sur le bloc Join et sélectionner l’option Do It. Le bloc suivant correspond à celui de la construction de la requêttte d’insertion dans la table reférencée par l’identifiant contenu dans Table_ID.

insertion_blocs.jpg

Il est important de remarquer que seul le champ Age n’est pas mis entre quotes parce que c’est un entier. Ne jamais oublier de laisser un espace après les mots-clés INSERT INTO.

Étape 6:  exécution de la requête

Le gestionnaire de base de données est chargé d’exécuter la requête construite grâce à la procédure PrepareRequette. Lorsqu’on clique sur le bouton Valider, après avoir récupéré les informations saisies par l’utilisateur, on prépare la requête puis on la fait exécuter par FusionTablesControl grâce à la méthode SendQuery.

execution_blocs1

Étape 7: vérification du retour de l’exécution

Il est important de savoir si l’exécution de la requête s’est bien déroulée ou si des erreurs ont été rencontrées. Pour ce faire, il faut contrôler le contenu du résultat retourné par la fonction SendQuery. Lorsque l’insertion s’est bien déroulée, ledit résultat contient le numéro de la ligne (rowid) nouvellement insérée dans la table. Dans le cas contraire, il retourne le code de l’erreur correspondante. À cette adresse, se trouvent des explications sur les erreurs les plus fréquemment rencontrées lors de l’exécution d’opérations dans des tables de type FusionTables .

gotResult_blocs.jpg

Fin

Si vous voyez affichée une boîte de dialogue ayant pour message “Youppiiiiiii!”, alors Félicitations vous avez réussi. Pour pouvoir rafraîchir le WebViewer, afin de visualiser sur le terminal mobile l’état actuel de la table après l’insertion, on peut ajouter l’instruction suivante dans le bloc If then.

webViewerGohome

J’espère que vous avez apprécié les documents (tutoriel et vidéo). Pour toute question, remarque, suggestion ou critique, je vous invite à me suivre sur twitter @ariellekitio , à m’écrire à l’adresse arielle.kitio@gmail.com ou rendez-vous sur Youtube.

Documents et ressources

— Arielle Kitio

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *