AppInventor est une plateforme créée dans les Google Labs, et dont le développement a été poursuivi au M.I.T..

Le site www.appinventor.mit.edu met à disposition de tout utilisateur un environnement de programmation de type Scratch,
associé à une interface de programmation évènementielle, et donc à une liste d’objets avec lesquels il est possible
d’interagir essentiellement avec les constituants d’un smartphone Android et avec les outils nécessaires pour développer
une interface graphique.

Démarrer l’interface AppInventor 2

Pour utiliser AppInventor 2, il faut disposer d’un compte Google+. Nous allons utiliser notre compte
Google Apps du Lycée Stendhal.

Suivez cette démarche :

Allez sur la page : http://www.appinventor.mit.edu :

Cliquez sur le bouton « Create » :

Le site vous redirige vers une page de connexion de type Google+. Connectez-vous avec votre
compte du Lycée Stendhal (comme avec Moodle). Acceptez qu’« AppInventor 2 » accède à votre
compte Google. Et enfin, acceptez les « Terms of Service ».

Page 1/11
 A chaque entrée dans la Page de Projet de AppInventor, le site propose de remplir un
questionnaire :

Donc le plus simple et le plus honnête est de le faire, et dans le cadre de notre enseignement, c’est
important de soutenir ainsi la plateforme. Choisissez : « Take Survey Now ». Répondez aux
questions.
Après avoir terminé de répondre au questionnaire, vous arrivez sur la page :

Cliquez sur « Continue », nous verrons comment tester les programmes plus tard.

Vous arrivez sur cette page :

Démarrer un nouveau Avoir de l’aide de type thématique,

projet ! Aide classique sous forme de guides

Nous verrons le détail des menus ultérieurement.

Donc, cliquez sur « Start new project ». Dans la fenêtre popup, donner un nom : « Hello_World », et
cliquez « OK ».

Page 2/11
Vous arrivez dans l’écran de développement de votre projet : Mode :
Gestion des projets, Mode de Tester le « Designer » : gérer les
export du projet connexion « programme composants
pour en faire des pour le final ».
copies locales, etc. débogage. Langue de « Blocks » : associer du
l’interface code aux composants
…

Palette de composants Liste des Propriétés du

du mode « Designer ». composants de composant
Vous y trouvez de quoi votre projet. sélectionné, dont
dessiner une interface, y le texte affiché et
En bas se la taille…
placer des éléments, et trouve le
médias, interagir avec bouton pour
les capteurs du renommer
smartphone, et avec le chaque
monde extérieur. Interface graphique. composant !
Ici, il s’agit du
« Screen1 ». Vous
pouvez en définir
autant d’écrans que
vous voulez à l’aide de
« Add screen » plus Ajouter tous
types de
haut , et les nommer.
fichiers.

Nous verrons comment utiliser chaque partie au fil de ce tutoriel.

Nous allons dessiner une petite interface très simple qui sert juste à afficher une saisie utilisateur.

Page 3/11
 Une simple application - Interface

Réalisez l’interface suivante. Elle contient :

 Une boîte de texte (« TextBox ») nommée « Saisie » et affichant le texte d’aide (champ « Hint »)
« Saisissez votre nom ».
 Un bouton nommé « Validation » et affichant le texte « Valider »,
 Une étiquette (« Label ») nommée « Reponse » et affichant le texte de départ « Réponse »
 L’écran « Screen1 » de notre application ne peut être renommé, mais doit afficher le nom
« Accueil ».

Lorsque votre interface est conforme à ce qui précède, veuillez aller dans le menu « Projects ». La
section de sauvegarde du menu contient ceci :

 « Save project » permet de simplement enregistrer votre travail dans le projet courant.
 « Save project as … » permet d’enregistrer votre travail dans un nouveau projet.
 « Checkpoint » est très pratique, il permet de créer une copie de votre projet avec un nouveau
nom (de préférence une extension du nom de projet en cours), mais de continuer à travailler
Page 4/11
 dans le projet actuel. Ainsi, si à un moment vous voulez revenir à une étape du développement
de votre projet pour laquelle existe un checkpoint, alors vous allez dans la liste de vos projets
et ouvrez ce checkpoint ! Cela permet de donc procéder à des tests successifs de code et de
garder un « Checkpoint » avant chaque étape critique, pour revenir en arrière si nécessaire !

Donc, choisissez « Save project ».

Une simple application - Code

Maintenant, nous allons placer le code nécessaire à notre application.

Lorsqu’il y a une interface graphique, on procède à une programmation de type évènementielle : à
chaque évènement, généralement provoqué par la souris, on associe un programme à exécuter.

Dans l’interface de AppInventor 2, cliquez sur « Blocks » :

Vous arrivez dans l’écran de programmation de type « Scratch ». Dans ce dernier, vous pouvez
associer un programme à chaque évènement de l’interface (le « Screen1 » pour nous), par exemple
au clic sur le bouton « Valider ».
Vous pouvez aussi manipuler de manière générale l’ensemble des composants de votre
application, et développer tous les algorithmes qui lui sont nécessaires.

Blocs de programmation généraux

Blocs de programmation propres à

chaque composant de l’application

Configuration des composants

de l’application

Voir les avertissements et erreurs de votre application

Ajouter tous types de fichiers (comme dans l’écran « Designer »).

Commençons par quelque chose de très simple. Nous allons faire ceci :
Lorsque le bouton « Valider » est cliqué avec le bouton gauche de la souris, l’application affiche
dans l’étiquette « Reponse » le texte : « Bonjour » + le contenu de la case « Saisie ».
Page 5/11
Pour cela, il nous faut :
 Un bloc évènementiel qui détecte le clic gauche sur le bouton « Valider » :

 Un bloc permettant de modifier le contenu de l’étiquette « Reponse » :

 Un bloc permettant de joindre deux chaines de texte (ou plus) :

 Un bloc permettant de créer la chaîne de texte « Bonjour » (avec un espace à la fin) :

 Un bloc permettant de récupérer la chaîne texte saisie dans le composant « Saisie » :

Et assemblez le tout afin d’obtenir le programme suivant :

Eh bien, c’est très bien d’avoir réalisé ce programme, mais encore faut-il le tester !

Page 6/11
 Tester un programme

Pour tester le programme en direct durant son développement, il est possible d’utiliser :
 Solution 1 : Un dispositif Android sur lequel on a installé l’« AI Companion » :
 Solution 2 : Un émulateur de dispositif Android installé sur l’ordinateur où se fait le
développement,
 Solution 3 : Un dispositif Android connecté à l’aide d’un câble USB.
La page : http://appinventor.mit.edu/explore/ai2/setup donne les indications pour ces trois
solutions.

Le menu « Connect » permet de choisir parmi ces trois solutions.

Lorsque l’on veut changer de solution, il faut aller dans le menu « Connect » et choisir : « Reset
Connection ».

La solution idéale en classe serait d’utiliser l’émulateur Android fourni par le site appinventor.mit.edu.
Malheureusement, après plusieurs tests, il s’avère qu’il n’est pas possible d’utiliser simplement cet
outil sur le serveur du lycée, car une seule instance de cet émulateur peut fonctionner sur le serveur.
Par contre, chez vous, cette solution devrait fonctionner sans problème.

Mise en place de la solution 1 :

Nous utiliserons in émulateur Android : GenyMotion, installé localement sur les postes de 201 !
Vous pouvez aussi utiliser un dispositif Android réel (téléphone, tablet, …). Dans ce cas, la page
http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html détaille ce qu’il faut faire.
La première étape est d’installer depuis Play Store : le « MIT AI2 Companion »

Lorsque cela est fait. C’est très simple :

Dans l’interface de AppInventor 2 : allez dans le menu « Connect »,
et cliquez « AI Companion », cela devrait faire apparaitre une fenêtre
comme celle-là :

Lancez l’application « MIT AI2 Companion » sur votre smartphone,

et saisissez ou bien scannez le QR code obtenu, ou bien entrez le
code manuellement. Votre application devrait démarrer !

Dans la nôtre, vous allez retrouver l’interface « Screen1 » nommée « Accueil » conçue dans
AppInventor 2 !
Entrez <votre nom>, cliquez sur « Valider »… et l’étiquette devrait afficher « Bonjour <votre nom> » !
Bravo !

AVANTAGE de cette méthode de test : toute modification faite dans l’interface de AppInventor 2
(même non enregistrée) se reflète immédiatement sur votre téléphone !

Page 7/11
 EXERCICES pour aller plus loin :
Remarque sur l’utilisation de variables : vous pouvez initialiser une variable de trois manières :
 Globalement : elle est disponible dans tout le programme,
 Localement : elle n’est disponible que localement,
 Dans une fonctionne : elle est une entrée utilisée lors de l’appel de la fonction.

SAISIES - Projet à remettre : Hello_World_Q1

1. Après avoir stocké le texte saisi dans une variable, testez son contenu : s’il est égal à une personne
de votre choix, personnalisez le message, et colorez uniquement dans ce cas le texte en rouge !
Aides :
 Voici le programme initial (fini page 6) mais réalisé
avec une variable globale « texte » :

 Voici les nouveaux blocs qui

pourraient vous être utiles :
Note : pour dupliquer des blocs, cliquez avec le bouton de droite de la souris et choisissez
« Duplicate »

2. Dans « Designer », ajoutez un « Drawing and Animation » -> « Canvas » à la suite de l’étiquette.
Ensuite ajouter aussi une « Media » -> « Camera », elle va dans les « Non-visible components » !

Dans « Blocks », ajouter le programme nécessaire pour que lorsque l’on appui sur le bouton, en
plus du message, une photo soit prise (par l’utilisateur), et s’affiche dans le Canvas !
Aides :
Voici les blocs utiles :

Note : est obtenue en survolant

ANIMATION - Projet à remettre : Hello_World_Q2

Nous allons réaliser une animation très simple, consistant à faire rebondir dans toute la surface de
l’écran une puis deux balles !
Préparation de l’écran dans « Designer » :
 Créez dans AppInventor 2 un nouveau projet « Hello_World_Q2 »
 Titrez l’écran « Screen1 » avec « Rebonds »
 Placez-y un « Canvas », et dans ses propriétés, fixez ses dimensions de manière
à remplir l’écran :
 Enfin placez une balle « Ball » dans le « Canvas ».
Passons à la programmation !
3. Faire rebondir une balle :
Nous allons faire débuter le programme lorsque l’écran est touché par le doigt.
Voici les éléments à utiliser pour initialiser cela avec une balle rouge :

Page 8/11
 A vous d’initialiser chaque champ de la balle correctement.
Note : dans l’écran « Designer », dans la colonne de gauche, là où
se trouve le composant « Ball », vous pouvez cliquer sur le petit
point d’interrogation pour avoir des informations.

Après cela, il faut faire en sorte que la balle rebondisse (bounce en

anglais) lorsqu’elle touche un bord (edge en anglais) de l’écran.
Trouvez les deux blocs nécessaires dans le menu de blocs associés
à la balle. Puis configurez-les comme il se doit. Testez, cela doit fonctionner !

4. Faire rebondir deux balles très basiquement (les rebonds ne tiendront nt pas compte du point de
contact et de l’angle antre les balles) :
 Mettez maintenant dans le canevas deux balles.
 Initialisez les au touché de l’écran, et faites les rebondir
sur les bords.
 Ajoutez cette fonction trop simple :
Note : vous apprenez ici comment tester contre quoi la « Ball 2 » a tapé : la balle a tapé contre
« other », c’est l’information que la fonction nous fournit. Il faut donc tester si « other » est la « Ball
1 ».
Complétez le « then » ainsi : les angles de chaque balle doivent être inversés (en changeant leur signe).
Testez, cela doit fonctionner !
5. Faire en sorte que chaque balle suive le déplacement du doigt sur l’écran !
6. Programmer que la couleur de fond du canevas prenne une couleur aléatoire lorsque les balles
se touchent !
7. Lorsque les balles se touchent, programmer qu’elles échangent leurs couleurs (ATTENTION : le
programmer en supposant qu’au moment de la collision on ne connait pas à l’avance les
couleurs).
8. Programmer l’émission d’un son lorsque les balles se touchent, et d’un autre son lorsqu’elles
touchent le bord d’écran. Pour cela, il faut recherche deux fichiers .wav ou .mp3 de courte durée
et les intégrer à votre application. Ensuite il faut ajouter le composant Sound à l’application, et
l’utiliser dans les blocs !

Page 9/11
CAPTEUR - Projet à remettre : Hello_World_Q3
1. Nous allons faire une boussole !
Nous allons d’abord placer un titre « Boussole ! » en haut de l’interface.
Puis en dessous, placez une étiquette qui donnera l’angle obtenu de la boussole
Faire en sorte que le texte de l’étiquette soit mis à jour avec l’angle de la boussole tous les
500ms :
 utilisez « Sensors » -> « OrientationSensor » pour récupérer l’angle de la boussole.
 utilisez un « Sensors » -> « Clock », et configurer son « timer » pour ajuster les 500ms.
Lorsque votre programme fonctionne, regardez bien comment évolue l’angle !

2. Avec une animation :

Ensuite, il faut placer une aiguille de boussole au milieu :
Vous pouvez trouver des images en tapant par exemple « compass needle » dans Google,
choisissez alors un modèle, enregistrez l’image dans votre compte.
Ensuite placez un « ImageSprite » au milieu de l’écran, et importez dans ce sprite l’image de
votre compas (voir les propriétés du sprite à droite).
Affichez l’angle de la boussole de la manière suivante : Faites tourner le « ImageSprite » de
manière à que son aiguille indique toujours le Nord !
Enfin décorez : placez un cercle autour de la révolution de l’aiguille, et indiquez les quatre points
cardinaux !

Page 10/11
 Générer une application Android

Un moyen simple de tester un programme final est d’aller dans le menu « Build » et de choisir « App (
provide QR code for .apk ) ». Cela vous affiche un QR code qui pointe chez appinventor.mit.edu vers
l’URL du fichier de programme Android généré, qui est un fichier d’extension « .apk ».
Si l’on scanne ce QR code avec un dispositif Android, ce dernier propose de charger le fichier « .apk »,
ici « Hello_World.apk », puis de l’installer, en le sélectionnant dans la liste des téléchargements.

Mais pour pouvoir faire cela avec votre dispositif Android, il faut tout d’abord l’autoriser à installer des
logiciels depuis une source non contrôlée ! Cela se fait en allant dans « Paramètres » -> « Sécurité » et
d’y cocher « Sources inconnues ». Attention, cela ouvre aussi la porte à l’installation de virus, n’installez
pas n’importe quoi !

Donc en faisant « Build » -> « App ( provide QR code for .apk ) » dans AppInventor 2,
on obtient une fenêtre comme celle-ci :

Pour le lire, installez, depuis Play Store, un lecteur de QR code comme « BeeTagg QR Reader »,
En le scannant (vous pouvez alors choisir d’ouvrir l’adresse avec le
navigateur Android), en téléchargeant le fichier « Hello_World.apk », et
l’installant, puis l’exécutant, on obtient sur son dispositif Android
l’interface :

Elle fonctionne normalement conformément à l’application développée

dans AppInventor 2.

Cette démarche est normalement destinée au test de l’application

finale, ou bien encore, à sa diffusion sur Internet pour des tests.

Lorsque les tests sont probants, on pourra choisir : « Build » -> « App ( save .apk to my computer ) »
pour récupérer le fichier complet de l’application Android, qui ensuite peut être simplement diffusé,
ou mieux soumis à sa publication sur le Play Store de Google.

 Ressource : un émulateur Android multiplateforme : http://www.genymotion.com/

Page 11/11