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 :
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 :
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 :
Des améliorations sont possibles :
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
[1] choix commercial : Ainsi les utilisateurs allaient, du moins Jobs le pensait-il, se diriger vers l’Apple Store plutôt que vers Youtube, basé sur Flash, pour regarder leurs films
[2] ce refus de Flash pour les iPad étant connu du MIT, le choix de reprogrammer Scratch en Flash témoigne d’une volonté délibérée de l’équipe du MIT, de ne pas permettre l’utilisation de Scratch sur iPad, ce qui est assez peu compréhensible
[3] donc sans Flash, pour ceux qui ont suivi...
[4] avec le compagnon, il faut, une fois allumé l’appareil Android, démarrer le compagnon, puis dans app Inventor, cliquer sur "connecter" et là, sur "AI companion" ; ce qui fait apparaître un code de 6 lettres à entrer dans le smartphone et un QR code à scanner si on ne veut pas utiliser le clavier du smartphone. Ensuite, chaque intervention sur les blocs va se répercuter sur le smartphone mais une erreur de programmation provoquant une déconnexion, il peut être nécessaire de recommencer la manip (connecter sur le compagnon).
[5] par défaut la palette de gauche est ouverte sur "interface utilisateur" qui permet notamment d’ajouter du texte, des images, des boutons à cliquer et des "sliders" ou curseurs pour entrer des données numériques.