Mathématice, intégration des Tice dans l'enseignement des mathématiques  
Sommaire > N°53 - janvier 2017 > App Inventor, pour faire ses propres applications

App Inventor, pour faire ses propres applications Android
Moteur de recherche
Mis en ligne le 9 décembre 2016, par Alain Busser

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

Les enjeux

Le MIT (Massassuchets Institutes of Technology) est la pouponnière de la tortue Logo mais aussi le lieu où est développé, depuis sa création, le logiciel Scratch. Le principe de ce dernier est de permettre la programmation par blocs (concept dû à Mitch Resnick, qui a longtemps travaillé au MIT avant de le quitter pour Google). Au départ, Scratch était programmé en Smalltalk sur ordinateur, et était destiné à être utilisé avec la souris de l’ordinateur. Il s’agissait en gros de permettre à des enfants de programmer quasiment sans clavier.

Pendant ce temps, Steve Jobs, à l’occasion de la promotion des iPhone et iPad, fait le choix de faire fonctionner ces appareils sans la technologie Flash [1] [2]. Une startup s’est alors créée pour permettre une alternative libre aux iPhone et iPad : Android, système d’exploitation libre basé sur Linux et Java [3].

Mais cette startup, dans un monde de géants de l’informatique, avait peu de chance de survivre durablement, et fut rachetée par Google, ce qui aboutit en gros à un partage du marché des tablettes entre trois géants que sont Apple, Google et Microsoft (avec les tablettes surface, sous Windows 10). Un point positif de ce rachat d’Android par Google est que la firme insiste sur la présence d’un marché d’applications réalisée par les utilisateurs. Mais Android est programmé en Java qui est un langage peu accessible. Et surtout, pour programmer en Java, il faut un ordinateur qui n’est pas forcément de marque Google alors il devenait intéressant d’avoir un logiciel de création d’applications Android qui soit assez simple d’utilisation pour fonctionner sur tablette Android, et inciter des non spécialistes de Java à programmer.

Et justement, au MIT, ils avaient quelque chose d’intéressant dans cette optique : Scratch et ses blocs. C’est ainsi qu’est né App Inventor, comme sorte de clone de Scratch spécial pour Android. Mais comme rien n’est simple dans le monde de l’informatique, Google finit par laisser tomber le développement d’App Inventor (programmé à l’époque en Java) et abandonner le projet au MIT. Cependant, Google se concentre sur la technologie "OpenBlocks", version Java de Scratch, qui permettait de manipuler les blocs d’App Inventor, et surtout sur la version JavaScript, qui n’est autre que Blockly, maintes fois cité en ces colonnes.

Compliquée cette histoire ? Mais c’est pas fini : Le MIT développe maintenant une version en ligne d’App Inventor, basée sur une ancienne version de Blockly, et qui permet de programmer sans installer de logiciel. Cependant, Microsoft développe son propre outil permettant de programmer par blocs (mais c’est pour les smartphones Windows, pas pour Android). Quant à Scratch, après avoir été reprogrammé en Flash, il fusionne avec Blockly pour devenir Scratch Blocks (inspiré par Scratch Junior). Pendant ce temps, s’est développé Snap qui paraît-il, permet l’export du projet au format exe (de Microsoft). Microsoft, qui, d’ailleurs, est le principal financeur de Scratch.

Une histoire complexe comme celle-ci a besoin d’être résumée :

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 :

Zip - 1.5 Mo
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).

état de la situation actuelle

fonctionnalité App Inventor Scratch Blockly games
test du programme sur smartphone simple clic sur un bloc cliquer sur "lancer"
boucles "until" inexistant inexistant évitent d’avoir à utiliser "while"
boucles simples (répéter n fois) inexistant en exergue en exergue
augmenter x de 1 inexistant existant existant
personnalisation du look outil spécial ("composants") aspect des lutins inexistant
programmation évènementielle très poussé (gyroscope, réception d’un mail etc) simple ("contrôles") inexistant
algèbre on peut modifier le nombre de termes d’une somme blocs peu visibles quand ils sont imbriqués très simple avec menus déroulants
graphisme à base de "canvas" (segments et disques) graphisme tortue "movie" permet de dessiner des rectangles, segments et cercles
remix par la gallerie app Inventor du MIT par le compte Scratch perso par la gallerie

L’absence d’"until", de boucles simples et d’instructions à la Sofus ou à la tortue, laisse l’impression que la programmation dans App Inventor est moins simple qu’avec Scratch ou Blockly et laisse perplexe face à des affirmations selon lesquelles App Inventor permet de faire de la programmation Android à l’école primaire. Ceci dit, cette affirmation émane de Google et concerne des élèves anglais, qui n’ont donc pas, en plus, la barrière de la langue...

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


notes

[1choix 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

[2ce 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

[3donc sans Flash, pour ceux qui ont suivi...

[4avec 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).

[5par 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.

Réagir à cet article
Vous souhaitez compléter cet article pour un numéro futur, réagir à son contenu, demander des précisions à l'auteur ou au comité de rédaction...
À lire aussi ici
MathémaTICE est un projet
en collaboration avec
Suivre la vie du site Flux RSS 2.0  |  Espace de rédaction  |  Nous contacter  |  Site réalisé avec: SPIP  |  N° ISSN 2109-9197