Introduction à MIT App Inventor 2

MIT App Inventor est un environnement de programmation graphique qui vous permet de créer très facilement des applications pour les appareils portables Android.

Les programmes sont construits en imbriquant des blocs (comme dans Scratch), ce qui permet aux programmeurs débutants de créer des applications fonctionnelles en peu de temps, sans qu'un long apprentissage préalable ne soit nécessaire.

Mon objectif à moyen terme est de vous enseigner comment on peut créer ses propres applications afin d'intégrer un smartphone à nos créations électroniques:  robot contrôlé par smartphone, éclairage domestique contrôlé par smartphone, etc.

Mais avant d'en arriver là, nous nous contenterons aujourd'hui de concevoir un programme très simple, qui constituera une première exploration de MIT App Inventor 2.  Dans quelques jours, je vous proposerai un deuxième article qui abordera la gestion de Bluetooth par MIT App Inventor.

Dans un premier temps, nous allons donc créer une application qui calcule le courant qui traverse une résistance, lorsqu'on lui fournit la tension et la valeur de la résistance (une simple application de la loi d'Ohm, donc).

Accéder au site App Inventor 2

Nous nous apprêtons à programmer une application pour appareils Android, mais c'est sur un ordinateur (Windows, Mac ou Linux) que nous allons générer cette application.

L'utilisation d'App Inventor ne nécessite l'installation d'aucun logiciel sur votre ordinateur:  vous accéder au site App Inventor 2 à partir d'un fureteur web.   C'est totalement gratuit, la seule restriction est d'être détenteur d'un compte Google (également gratuit).

Une fois dans App Inventor 2, c'est une bonne idée demander l'affichage en français (à moins que ce soit déjà le cas):  pour ce faire, vous utilisez un menu situé en haut à droite.

Création d'un projet

Nous cliquons sur le bouton "Commencer un nouveau projet...", situé en haut à gauche.

...et nous choisissons un nom pour ce projet (j'ai choisi "Calculateur_de_Courant").

La fenêtre devrait maintenant être divisée en 5 zones:  Palette, Interface, Composants, Média, Propriétés. C'est ici que nous allons construire notre application.

Installation de MIT AI2 Companion

Afin de tester votre application  sur votre appareil Android pendant que vous la programmez sur l'ordinateur, vous devez installer l'application MIT AI2 Companion sur votre appareil Android, à partir du Google Play Store.

Lorsque vous démarrez MIT AI2 Companion, on vous demande des informations afin de lier votre appareil Android au projet que vous venez tout juste de créer sur l'ordinateur.

Pour connaître le code de 6 caractères (ou afficher le code QR, si c'est ce que vous préférez), vous retournez à votre ordinateur, et vous choisissez "Compagnon AI" dans le menu "Connecte".

...ce qui affiche un dialogue comportant le code à recopier dans MIT AI2 Companion.

Une fois ce code recopié (ou le code QR scanné), MIT AI2 Companion votre application en temps réel, à mesure que vous la modifiez (pour l'instant, il s'agit d'une fenêtre vide).

Création de l'interface de notre application

Retour à l'ordinateur, dans MIT App Inventor.  La fenêtre principale de notre application est affichée dans la zone "Interface", située en plein milieu de notre écran.  Par défaut, cette fenêtre a été baptisée "Screen1", ce qui n'est pas très joli.

Pour changer le titre de la fenêtre, vous allez dans la zone "Propriétés", située complètement à droite. Vous remplacez le  titre initial par celui que vous voulez (j'ai choisi "Calculateur de Courant").

Le titre de la fenêtre devrait instantanément est mis à jour sur la simulation qui se trouve dans la zone "Interface", mais aussi dans le Compagnon qui se trouve sur votre appareil Android.

La palette, située à gauche, comporte une liste d'éléments pouvant être disposés dans la fenêtre de notre application:  boutons, zones de texte, etc. Pour ajouter un de ces éléments dans la fenêtre, il s'agit de le faire glisser de la zone "Palette" vers la zone "Interface" située en plein centre de la fenêtre.

Je commence par insérer un élément de type "Label"; il s'agit d'une zone de texte dont le contenu ne peut pas être modifié par l'utilisateur (mais qui peut, au besoin, être modifié par notre programme).

Par défaut, ce label contient le texte "Texte pour Label1".  Je veux plutôt qu'il contienne des instructions destinées à l'utilisateur de l'application.  Pour ce faire, je modifie l'attribut "Texte" dans la zone "Propriétés" (à droite):

J'ai écrit "Veuillez écrire la tension et la résistance, puis cliquez sur le bouton "Calculer"".

Le texte n'est pas visible au complet dans la zone "Interface" (qui n'est qu'une simulation grossière), mais il est correctement affiché quand on regarde sur l'appareil Android, dans MIT AI2 Companion.

J'ajoute maitenant un deuxième Label, et je remplace son contenu par "Tension (en volts):"

Ensuite, j'ajoute une zone de texte dans laquelle l'utilisateur écrira la valeur numérique de la tension. Contrairement aux labels, le contenu des zones de texte peuvent être modifiés par l'utilisateur.

Si vous regardez le résultat sur votre appareil Android, la zone de texte comporte un texte par défaut ("Nucance pour Zone_de_texte").

On peut effacer ce texte par défaut dans la zone "Propriétés":

J'ajoute ensuite un 3e label dont le contenu sera "Résistance (en ohms):", et une deuxième zone de texte qui permettra à l'utilisateur d'écrire la valeur de la résistance.

J'ajoute finalement un bouton que l'utilisateur cliquera pour demander le résultat du calcul (changez le texte du bouton par "Calculer"), et un 4e label, qui contiendra le résultat du calcul (vous pouvez effacer son texte par défaut et le laisser vide pour l'instant).

Par défaut, tous ces éléments sont alignés à gauche de la fenêtre.  Si vous cliquez dans le fond de la fenêtre, la zone "Propriétés" affichera à nouveau les propriétés de la fenêtre "Screen1".  Réglez l'alignement horizontal à "Center: 3".

Notre appareil android affiche maintenant une jolie fenêtre comportant tous les éléments nécessaires. Lorsque vous cliquez sur une zone de texte, c'est déjà possible d'y écrire un nombre. Mais si vous cliquez sur le bouton, évidemment, rien ne se passe.

Construction du programme

Depuis le début, nous étions en mode "Designer".  Nous allons maintenant passer en mode programmation.  en cliquant sur le bouton "Blocs", en haut à droite.

Observons le contenu de la partie gauche de la fenêtre (intitulée "Blocs"):  il y a d'abord une liste de catégories (Contrôle, Logique, Math, etc.), puis la liste des éléments que nous avons placés dans notre fenêtre (Label1, Label2, etc.).

Ha oui:  pendant que j'y pense:  pendant que nous étions en mode "Designer", nous aurions pu modifier chacun de ces noms attribués par défaut aux éléments que nous avons créés.  Par exemple, nous aurions pu remplacer le nom "Zone_de_texte1" par "Texte_Tension" ou remplacer "Label4" par "Label_Reponse".  Quand le programme est complexe, c'est plus facile de s'y retrouver si vous choisissez des noms plus appropriés.

Commençons par définir une variable, qui contiendra plus tard la valeur du courant.  Cliquez sur la catégorie "Variables".

Cliquez sur le bloc "initialise global nom à" et faite-le glisser dans la zone "Interface".

Remplacez "nom" par "courant".

Pour régler sa valeur initiale à zéro, cliquez sur la catégorie "Math", et faites glisser le bloc "0" pour l'imbriquer à la droite du bloc précédent.

Dans la zone interface, notre programme a maintenant cette allure:

(Petite remarque:  il n'était pas nécessaire que cette variable soit globale, puisqu'elle ne servira que lors d'un clic sur le bouton).

Nous allons maintenant établir ce qui se produira lors d'un clic sur le bouton.  Pour ce faire, cliquez sur "Bouton1", et choisissez la première option:  "quand Bouton1 Clic faire".

Que vous faites glisser dans la zone "Interface":

Que devons-nous faire lors d'un clic sur le bouton?  Tout d'abord, une mise à jour de la variable courant, dont la valeur est calculée à partir du contenu des zones de texte.

Donc retour à la catégorie "Variables", dans laquelle on choisit le bloc "mettre à":

Ce bloc doit être inséré à l'intérieur du bloc "quand bouton1 clic".  De plus, vous remplacez "nom" par "global courant", qui est le nom de notre variable.

Le calcul du courant en milliampères (unités de mesure plus pratiques que les ampères) est égal à 1000 * tension / résistance.

Les opérations mathématiques se trouvent, sans surprise, dans la catégorie mathématique. Commençons par la division:

...dans laquelle nous imbriquons une multiplication:

Pour la valeur numérique "1000" (qui permet de convertir les ampères en milliampères), on retourne dans la catégorie mathématique, on choisit encore une fois le bloc "0" situé complètement en haut, et on l'imbrique dans le premier espace libre de notre opération mathématique.  On modifie sa valeur pour 1000:

Le prochain élément de l'équation sera la tension, qui se trouve dans la "Zone_de_texte1".  Dans la liste des blocs, nous cliquons donc sur "Zone_de_texte1", qui nous donne accès aux blocs qui concernent cet élément.

Dans la liste, nous choisissons le bloc "Zone_de_texte1.Texte":  il s'agit du texte qui a été entré par l'utilisateur dans la zone de texte numéro 1.  On fait glisser ce bloc à l'intérieur de notre équation mathématique.

On fait la même chose avec la zone de texte numéro 2, qui contient la valeur de la résistance:

Mais on ne peut pas se contenter de calculer la valeur du courant, il faut aussi l'afficher dans notre label numéro 4.  Dans la liste des blocs, nous cliquons sur "Label4" et nous choisissons le bloc "mettre Label4.Texte à".

Notre programme a maintenant cette allure:

Le label numéro 4 contiendra la valeur numérique du courant, mais aussi les unités de mesures (pour que l'utilisateur sache que le résultat est affichée en milliampères).  Pour ce faire, nous utiliserons un bloc "joint" dans la catégorie texte:

Dans la zone "Interface", ce bloc "joint" doit être imbriqué dans le bloc "mettre Label4.Texte à".

Retour à la catégorie variable pour prendre un bloc "obtenir".

Ce bloc "obtenir" représente la valeur numérique stockée dans la variable "courant", à la condition de sélectionner "global courant" dans son menu déroulant:

Pour les unités de mesure, on retourne dans la catégorie "Texte", mais cette fois on choisi le premier bloc en haut de la liste (" "):

On imbrique ce bloc à la deuxième ligne du bloc "joint", et on écrit " mA" à l'intérieur:

Voilà,  nous avons maintenant un programme fonctionnel!  On peut retourner sur le programme MIT AI2 Companion, sur l'appareil Android, et faire l'essai du programme.

Quelques améliorations

Notre programme affiche le résultat avec un nombre de décimales inutilement grand.  De plus, il ne vérifie pas si les zones de texte contiennent des valeurs numériques avant d'utiliser leur contenu dans un calcul.

Le programme ci-dessous est un tout petit peu plus évolué:  avant d'effectuer les calculs, il vérifie si le contenu des deux zones de texte est bel et bien un nombre.  Si ce n'est pas le cas, il affiche un message d'erreur.  De plus, le calcul est inséré à l'intérieur d'un bloc "format décimal nombre" réglé à deux décimales, ce qui rendra le résultat affiché plus lisible.

Finalisation de l'application:  le fichier apk

Nous avons construit un code fonctionnel mais, mais il ne s'exécute qu'à l'intérieur de MIT AI2 Companion...n'y aurait-il pas moyen d'en faire une véritable application autonome?   

La réponse, heureusement, est "oui":   il s'agit d'en faire un fichier ".apk".  Pour ce faire, vous choisissez "App (enregistrer .apk sur mon ordinateur)" dans le menu "Construire".

Cette opération peut prendre quelques minutes, malgré la simplicité de notre programme.

Votre appareil android doit être réglé pour accepter les applis "de source inconnue".  Ce réglage se trouve dans "Paramètres", "Personnel", "Écran verr. et sécurité", "Sources inconnues".

Il ne reste plus qu'à transférer le fichier sur votre appareil android:  lorsque vous ouvrez le fichier, android vous propose d'installer l'appli.

Suite à l'installation, votre application est maintenant disponible dans le gestionnaire d'applications, à partir duquel vous pouvez créer un raccourci pour le bureau.

Fichier .aia

Au cas où vous éprouveriez quelques difficultés à reproduire certaines des étapes que j'ai décrites, vous pouvez toujours télécharger le fichier en format app inventor (.aia) complet, puis l'importer dans App Inventor.

Conclusion

Avouez qu'avec App Inventor,  créer une application pour android n'est pas très difficile...  

Nous n'avons rien utilisé de tel dans cette première exploration, mais vos programme ont accès à tous les capteurs de l'appareil (bluetooth, gps, accéléromètre, caméra, etc).  Vous pourriez facilement modifier le programme pour que votre appareil vous lise le résultat à voix haute lorsque vous le secouez, par exemple.

Vous devriez maintenant en savoir suffisamment pour pouvoir continuer par vous-mêmes l'exploration de MIT App Inventor 2, afin de créer vos propres applications.

Prochain article:  MIT App Inventor 2, Bluetooth et Arduino...

Yves Pelletier   (Twitter, Facebook)