App Inventor a été créé par le MIT pour permettre, d’une part, de créer des applications Android depuis un smartphone Android, d’autre part, de créer une application sans bagage informatique excessif, donc le public visé est essentiellement les enfants. On peut alors se demander si cet outil ne servirait pas en cycle 4 voire en cycle 3.

Article placé sous licence CC-by-SA : http://creativecommons.org/licenses/by-sa/3.0/fr/legalcode

La notion de partage de projet est facile à mettre en œuvre avec Scratch 2.0, mais à condition que les élèves possèdent un compte mail depuis lequel ils doivent se créer un compte Scratch. On peut alors remixer les projets publiés par les élèves. App Inventor fonctionne de la même manière mais en version « Google » : C’est depuis un compte gmail qu’on se connecte sur le navigateur Chrome, sur l’application, et ensuite, on est invité à partager ses applications, ou à remixer celles d’autres enfants.

Dans cet article, on va voir comment un groupe de collégiens peut, avec App Inventor, créer un jeu de Pong et le tester sur le smartphone de l’un des collégiens.

Pour préparer le travail, il faut :

• Un ordinateur avec wifi (pour communiquer avec le smartphone) et en plus, une liaison Internet (app Inventor est une webApp) ;
• Le logiciel Chrome pour aller sur app Inventor ;
• que l’un des élèves du groupe aie un compte gmail (c’est à partir de ce compte qu’on se connecte sur app Inventor) ;
• que l’un des élèves du groupe (de préférence pas le même) dispose d’un smartphone Android pour les tests ;
• que le prof autorise cet élève à utiliser son smartphone en classe pour pouvoir tester l’application du groupe ;
• que ce smartphone ne soit pas en mode avion (c’est par la wifi qu’il communique avec l’ordinateur) ;
• enfin, qu’il y soit préalablement installé le « compagnon » d’app Inventor, une application gratuite fournie par le MIT et disponible sur Google Play Store.

En fait, la possibilité de voir immédiatement l’application en action avec le compagnon n’est pas nécessaire, on peut aussi tout programmer sur l’ordinateur et prier pour qu’il n’y ait pas de bogues. Auquel cas seuls le logiciel Chrome et le compte gmail sont nécessaires. [4]

Dans la suite de cet article, le mot « smartphone » sera utilisé pour désigner la machine Android de test de l’application (celle sur laquelle on va jouer à Pong). Ce peut être une tablette ou un téléphone...

Pour créer un Pong sur Android, il faut donc commencer par se connecter, à l’aide du logiciel Chrome, sur le site, depuis son compte gmail. Là, apparaît dans Chrome, l’espace de travail, dans lequel, évidemment, on va d’abord créer un projet :

Lors de la création du projet, on doit avant tout le nommer, ce sera « pong ». Ensuite, on a un écran essentiellement divisé en 4 :

• à gauche, ce sont les objets que l’on va placer dans l’application (le court de tennis, les raquettes et les balles) par glisser-déposer.
• ensuite, un rendu approximatif de l’application telle qu’elle est actuellement ;
• ensuite, le schéma fonctionnel de l’application, sous forme d’une arborescence (pour l’instant il y a juste l’écran « Screen1 », on verra ensuite que tout est placé dans cet écran, directement ou indirectement : La balle est sur le court, lui-même sur l’écran).
• enfin tout à droite on peut modifier l’élément actuellement sélectionné (l’écran pour l’instant).

Le titre « Screen1 » n’étant pas forcément satisfaisant, on va le remplacer par « pong » :

Les éléments qu’on va ajouter dans cette application sont dans la catégorie « dessin et animation » tout à gauche [5] :

Le cadre (« canvas ») est un rectangle muni de possibilités de dessin (point, segment, cercle). Il peut être déplacé mais sert surtout à abriter les autres éléments graphiques (on ne peut pas mettre un cadre dans un cadre par exemple). Ce sera donc le court de pong qui sera représenté par un cadre, et celui-ci remplira tout l’écran :

Pour obtenir ça, on a cliqué-glissé l’icône « cadre » de la gauche vers l’écran de smartphone virtuel, et modifié ses propriétés à droite.

Les raquettes et la balle seront des lutins, la balle étant un lutin particulier (pas d’image, forme circulaire, gestion améliorée des chocs avec les autres lutins). Pour créer la première raquette, on glisse vers l’écran de smartphone virtuel, de manière qu’elle aboutisse à l’intérieur du court de pong. Ensuite on la renomme « raquette1 » et on la redimensionne ; il est nécessaire de lui donner une image obtenue extérieurement (dans le cas présent, fabriquée avec Gimp) :

Pour la seconde raquette, on recommence mais l’image est déjà chargée sur le site app Inventor donc ça va plus vite. Ensuite, on glisse une « balle » sur le court et on la renomme « baballe », ce qui permet de lui donner une couleur blanche et un rayon de 5 pixels :

On peut maintenant se faire une idée de ce à quoi ressemblera le jeu sur smartphone (mais avec le compagnon, on le voit déjà sur le smartphone même) :

C’est maintenant qu’on va commencer à programmer. Pour ce faire, il y a un bouton en haut à droite, par défaut positionné sur « designer » (ce qui a permis de concevoir l’écran Android), et qu’on peut remplacer par « blocs ». Ce qui change l’aspect de l’espace de travail, le faisant ressembler plutôt à celui de Blockly. On y trouve des blocs pour traiter des maths, des listes, du texte etc, mais aussi gérer les variables, créer ses propres procédures, et accéder aux méthodes des objets qu’on a mis dans l’écran :

Pour l’écran et le court, il n’y a rien à programmer, ils ne sont pas réactifs. Pour la balle il y a l’animation (elle bouge toute seule) et les rebonds. Pour chaque raquette il y a juste le déplacement (« drag ») à gérer : Il est nécessaire d’imposer l’ordonnée Y de la raquette pour empêcher que le joueur puisse la mener n’importe où sur l’écran :

La balle doit rebondir sur le bord de l’écran quand elle l’atteint, sous peine de faire planter le smartphone :

Le smartphone étant par défaut en mode « portrait », le choc de la balle contre une raquette horizontale doit juste changer l’orientation de la balle, en son opposé :

Si on veut améliorer l’application, par exemple avec comptage des chocs ou des scores, on peut rajouter des variables globales (nombres, listes, texte) et les mettre à jour avec les outils mathématiques d’app Inventor, qui sont similaires à ceux de Blockly mais moins complets (on est plus dans la philosophie de Scratch avec les lutins et les évènements, que dans celle de Blockly avec son test de primalité). Mais ici, on va se contenter de cette application minimale et l’installer définitivement sur le smartphone des copains de classe ou des parents.

Pour installer une application, il faut construire un fichier apk que le smartphone sait installer. Cela se fait en cliquant sur « construire » dans le menu tout en haut, et là, choisir par exemple le téléchargement d’un fichier apk sur l’ordinateur :

Chrome place les fichiers téléchargés dans le dossier « Téléchargements », où l’on devrait rapidement retrouver un gros fichier apk (1,5 mégaoctet pour un pong, en fait il contient tout appInventor avec...). Pour transférer ce fichier sur le smartphone, on peut passer par un cloud, mais un câble usb fait l’affaire aussi : On le branche entre le smartphone et l’ordinateur, et après avoir accepté le transfert usb depuis le smartphone, il y apparaît un dossier des téléchargements du smartphone, dans l’ordinateur (dont le smartphone est provisoirement une extension) :

Il suffit, à ce stade, d’y copier-coller le fichier apk depuis l’ordinateur. La suite des opérations se fera dans le smartphone seul, sur lequel on peut donc désactiver l’usb. À ce moment-là, en naviguant parmi les applications du smartphone, on devrait trouver celle que l’on n’utilise jamais, qui permet de naviguer dans les dossiers (en bas à gauche ; ici Android kit-kat) :

L’application « ES explorateur » ressemble à Windows, et permet d’aller dans le fameux dossier de téléchargements, mais cette fois-ci côté Android. On devrait y trouver le fichier apk que l’on vient de fabriquer, et, après avoir au besoin accepté un vilain apk non signé (ouh le méchant !) l’installation va se faire. Un inconvénient d’app Inventor est que par défaut l’application pong va être autorisée à accéder au web alors que rien dans l’application ne demande cet accès. On vérifie que l’installation est faite en cherchant parmi les applications, à la lettre « p », s’il n’y a rien de nouveau :

Et en touchant le logo « pong », on lance une partie de Pong qui devrait normalement pouvoir se jouer à deux joueurs, chacun ne contrôlant que la raquette la plus proche de soi. Sauf que pour ça il faut que le multitouch soit reconnu par le smartphone ce qui est loin d’être généralisé.

Voici le fichier apk obtenu :

jeu de pong Android, largement perfectible

Des améliorations sont possibles :

• la version actuelle ne finit jamais ; il faudrait prévoir que lorsqu’un joueur a gagné l’application quitte, pour l’instant ce n’est pas le cas ;
• les points ne sont pas comptés ce qui enlève beaucoup d’intérêt au jeu ;
• on peut faire en sorte que la balle gagne de la vitesse à chaque choc contre une raquette (c’est fait dans la version téléchargeable ci-dessus) ;
• la fluidité laisse à désirer ; on peut réduire l’intervalle de la balle (éctuellement 100 millisecondes) mais la lourdeur d’app Inventor donne une limite à la fluidité ;
• passer à un autre outil de développement rend la programmation nettement plus difficile mais 1,5 mégaoctet pour un pong basique ce n’est pas raisonnable !

En résumé, cette activité, si elle est parfaitement adaptée au nouvel enseignement d’ICN en première, serait peut-être déraisonnable en cycle 4, même si elle est au programme et que le développement sous app Inventor ressemble énormément à celui sous Scratch 2.0 (d’ailleurs aussi développé au MIT).

L’impression que laisse cet outil, outre le fait qu’il semble plus adapté à la réalisation d’applications basiques (mais lourdes) qu’à des choses « sérieuses », est qu’avec ça, on fait le choix de Charybde (Google) pour échapper à Scylla (Scratch). Néanmoins, la possibilité pour des élèves de faire en classe une application pour leur propre smartphone est sans commune mesure avec la consultation sur l’ordinateur familial du studio Scratch de l’élève (lequel d’ailleurs, dans le groupe, est titulaire du compte Scratch ?). Et il ne faut pas oublier, à ce sujet, Snap ! Mais Ce dernier n’exporte pas, à l’heure actuelle, au format apk...

Pour en savoir plus, voici un exemple d’application en ICN