Terminale STMG SIG Anne 2013-2014

DBUTER AVEC APP INVENTOR

App Inventor est un outil de dveloppement en ligne pour les tlphones et les tablettes sous Android. App Inventor
est un OS cr par Google, et concurrent de lIos dApple qui quipe liPad, iPodTouch et iPhone.

La plateforme de dveloppement est offerte tous les utilisateurs possdant un compte Gmail. Elle rappelle certains
langages de programmation simplifis des annes 80 et sinspire des travaux dune tudiante en thse au MIT,
Ricarose Roque. Le projet a t dirig par Hal Abelson, professeur au MIT qui a mis au point le portage du langage
LOGO sur Apple 2 au dbut des annes 80.

Android App Creator deviendra-t-il le logo des applications mobiles ?

La programmation est ralise sans taper une seule ligne de code, mais simplement en
associant et en paramtrant des briques logicielles toutes faites.

quoi ressemble un programme App Inventor ?

La programmation se ralise en ligne, laide de son navigateur prfr, et sous lenvironnement logiciel de son
choix (Mac, Linux ou Windows). Seules contraintes : avoir un compte Gmail pour pouvoir y accder, et un accs
internet videmment. Les informations sont stockes sur des serveurs distants.

Le concept dApp Inventor :

3 fentres sont proposes pendant le dveloppement :
- Une pour la cration de linterface homme machine : ce sera lallure de votre application ;
- Une pour la programmation par elle-mme : elle permettra, par lassemblage de blocs de crer le
comportement de lapplication ;
- Et une pour lmulateur qui permettra de tester lapplication. Lmulateur permet de remplacer un terminal
rel pour vrifier le bon fonctionnement du programme.
La connexion dun terminal rel sous Android permettra ensuite dy tlcharger le programme pour un test rel. Ce
terminal pourra aussi bien tre un tlphone quune tablette, le comportement du programme sera identique.

La fentre de la cration de linterface :

La fentre de programmation graphique : Lmulateur pour tester le programme :

Lapproche graphique ne remplace pas la rflexion et lanalyse pralable ncessaire tout projet de dveloppement.
La logique de programmation vnementielle reste galement un pralable avant la mise en uvre dApp Inventor.
Par contre, elle a le mrite de masquer toute la complexit impose par lapprentissage dun langage de
programmation objet (ici Java), savoir une syntaxe et des concepts parfois assez subtils. Cet apprentissage restera
obligatoire pour aller plus loin notamment dans le domaine dune spcialisation post-bac.

Quest-ce que la programmation objet ?

Attention : on ne fait pas de la programmation objet parce quon place des objets graphiques sur une interface. La
programmation objet : cest autre chose. Pour faire simple, cest crer et manipuler des entits informatiques
modlisatrices dun comportement qui appartiennent une classe et peuvent elles-mmes avoir des hritiers, qui
possdent des mthodes la programmation graphique ici nous met sur le chemin de la programmation objet mais
masque ces aspects pour ne laisser la place qu lapproche vnementielle du programme.

Quest ce que la programmation vnementielle ?

On peut la rsumer ainsi : je place un lment sur mon interface (un bouton par exemple) puis je dfinis son
comportement quand il est cliqu par lutilisateur (vnement). Il nest donc pas ncessaire de tester son tat en
permanence, cest lui qui ragit quand se produit lvnement prvu par le programmeur. Encore faut-il prvoir cet
vnement et surtout le traitement oprer quand il survient.
Dcouvrir APP INVENTOR

Pour se connecter, il faut un compte Gmail personnel (et tre connect ce compte).
Pour crer une application, allez sur le site : http://ai2.appinventor.mit.edu/

Nous obtenons lcran

suivant :

Prsentation des diffrents menus :

Le menu Project Le menu Connect Le menu Build Le menu Help

Permet de visualiser les Permet de visualiser le Permet de construire le QR code Permet deretrouver un
projets raliss (My rsultat du projetsoit sur de lapplication ou de certains nombres de
Projects), de raliser un lmulateur, soit sur le sauvegarder lapplication sur ressources, daides,
nouveau projet (New), smartphone ou la votre ordinateur. dexemples en
dimporter un projet, de tablette par anglais !
sauvegarder un projet lintermdiaire du Wifi,
soit par lintermdiaire
dun cble USB
Raliser un premier projet avec APP INVENTOR

Lorsque vous utilisez App Inventor,

vous arrivez sur une page prsentant
les projets App Inventor de votre
compte.
Pour crer une application cliquez sur le
bouton NewProject

Entrez le nom du nouveau projet :

1re tape du projet : Dessiner linterface

Nous allons crer une application simple qui permettra de dtecter un clic sur un bouton pour recopier le contenu
dun texte saisi au clavier.

Pour crer une application, la premire phase est la cration de son interface.
Pour cela, le site affiche un cran de tlphone dans lequel nous pouvons placer, en les faisant glisser, les lments
que nous voulons utiliser.
Il y a des lments graphiques comme des boutons, des labels et des lments non graphiques comme des
capteurs (ex. go localisation) ou des fonctions permettant deffectuer des actions : lecteur audio, appareil photo

Lcran se partage en 4 parties :

La palette contenant tous les lments qui
peuvent tre positionns sur lcran du Lcran du tlphone lui-mme :
tlphone :
 La liste des lments et des mdias utiliss
Les proprits des diffrents lments utiliss :
sur lcran :

Afin de raliser
linterface, prendre les
diffrents lments et les
faire glisser sur lcran du
tlphone :
Une TextBox qui
permet de saisir du
texte,
Un bouton,
Deux labels qui
permettront
dafficher du texte.
Il faut ensuite dfinir les proprits de chaque lment :

Cliquer sur llment Dfinir le fond de la zone Le rsultat apparat sur

Saisir le texte par dfaut :
TextBox1 : de texte : lcran :

Dfinir la couleur du
Cliquer sur le bouton : Saisir le texte par dfaut : Rsultat :
bouton :

Choisir la couleur du fond Rendre cette zone

Cliquer sur le label 1 : Rsultat :
du label : invisible :

Choisir la Saisir le texte qui

Cliquer sur le Rendre cette zone
couleur du fond saffichera dans cette Rsultat :
label 2 : invisible :
du label : zone :

Linterface est prte,

pensez enregistrer
votre travail !
2me tape du projet : Dcrire le comportement de lapplication

Une fois lallure de notre application cre, il est ncessaire de dcrire son comportement :

Pour cela, il faut cliquer sur Blocks en haut et droite de la page :

Nous obtenons lcran suivant :

Sur la gauche, nous avons un systme donglets. Nous y retrouvons

les diffrents composants que nous avons plac sur lcran ainsi que
des blocks utilitaires Built in
Dans longlet Screen1 , nous retrouvons les lments de
linterface :

Nous allons pouvons dcrire le comportement de chaque lment.

Voici lalgorithme rsumant ceci :

QUAND le Bouton1 est cliqu, faire en sorte que :

- La proprit Visible du Label2 soit VRAIE (donc afficher le label2)
- La proprit Visible du Label1 soit VRAIE (donc afficher le label1)
- Le label 1 affiche le texte de la TextBox (donc afficher le texte saisi)
FIN
Ralisation de lalgorithme laide des blocs :

Cliquer sur llment Button1 :

Des blocs apparaissent :

Choisir le premier bloc, il restera en position sur la partie

Viewer de votre cran.

Ce bloc correspond la partie de lalgorithme :

QUAND le Bouton1 est cliqu, faire en sorte que :

FIN

Cliquer ensuite sur le Label2 :

Choisir le bloc set Label2.Visible to

Positionner le block dans le bloc prcdent :

Le label2 deviendra Visible si le clic a eu

lieu (donc si VRAI) :
Cliquer sur le bloc True dans la liste
des blocs logiques (Logic Blocks)

Le bloc reste lcran : le positionner la

suite du bloc Set Label2.Visible to
Le Label2 deviendra Visible si le clic a eu
lieu.
Procder de la mme faon pour le
label1.
Puis emboter les blocs dans le bloc
When Button1.Click do :

Il est maintenant ncessaire de prciser

que dans le label1 il faut afficher le texte
saisi dans la TextBox :
Cliquer sur Label1 et choisir le bloc :
Set Label1.Text to ;
Positionner correctement le bloc :

Cliquer sur llment TextBox1 et choisir

le bloc TextBox1.Text
Positionner le bloc la suite du bloc
Set Label1.Text to :

Lalgorithme a t entirement ralis.

Sauvegarder votre programme.

3me tape du projet : Tester lapplication sur lmulateur ou le smartphone

Afin de tester lapplication vous pouvez choisir le test sur :

Lmulateur : un cran saffichera sur lordinateur,
Al Companion : dans ce cas, la connexion se fera
directement sur le smartphone en wifi,
USB : la connexion se fera sur le smartphone via un
cble USB.

Sur le smartphone, lapplication MIT AI2 Companion doit tre

installe tlcharger sur le playStore.
Sur le PC, lapplication MIT Emulator in AI2 doit tre installe
http://appinventor.mit.edu/explore/ai2/windows.html

En choisissant Al Companion : un Code de 6 caractres est

gnr ainsi quun QR Code.

Il suffit de saisir le code ou de scanner le QR Code pour que

lapplication soit visible sur le smartphone et vous pouvez
ensuite la tester :
Lapplication dmarre sur le Smartphone :

Sur lmulateur : un smartphone apparat lcran. Il faut le dverrouiller, puis lapplication se lance
automatiquement. Tester lapplication comme sur un tlphone normal.
Enregistrer votre premier projet sur votre ordinateur :

Dans longlet Build Choisir App (save to my computeer)

La compilation de votre application sexcute :

Vous obtenez un fichier APK qui sera sauvegarder dans votre

dossier tlchargement :

Application compil : monpremierprojet.apk est prt pour tre

install sur un smartphone Android.
Raliser un deuxime projet avec APP INVENTOR

Ralisation dune deuxime petite application qui va

permettre dafficher limage dun chat sur lcran du
smartphone.
Cette image sera en fait un bouton, lorsque lon cliquera sur
le bouton, nous entendrons un miaulement du chat.

Ralisation de linterface :

Sur lcran (Add sreen) ajouter un bouton et un label

(tiquette).

Dfinir les proprits du bouton :

Rechercher le fichier kitty.png
Choisir une image en dans vos dossiers et demander le
cliquant sur Upload fichier slectionn dans la
File proprit : Image
Dfinir la taille de
limage : choisir
comme largeur et Supprimer ensuite
hauteur : Fill Parent le texte qui reste
qui permet de sur limage.
sadapter la taille de
lcran.
Mettre en forme le texte :

Ajouter le miaulement du chat :

Dans mdia choisir Sound : Positionner le son sous lcran :

Rechercher le son :

Dcrire le comportement de lapplication :

Passer en mode blocks .

Indiquer que lorsque lon clique sur le bouton,
Le son est jou et que celui-ci dure 500 millisecondes.

Tester lapplication :

Tester lapplication sur le smartphone ou dans lmulateur :

Enregistrer lapplication :
Project / Save project as / KittySon.apk
Raliser un troisime projet avec APP INVENTOR : MaCalculette

Ralisation dune petite

calculatrice 4 oprations :

1re tape : raliser linterface Homme-Machine

Cette interface se compose :

- Dun premier tableau contenant 2 colonnes et
3 lignes.
- Chaque ligne contenant un libell et une
zone de saisie.
- Dun deuxime tableau contenant 1 ligne et 4
colonnes, chaque cellule du tableau contient
un bouton avec le signe de lopration.
- Un dernier bouton est ajout pour remettre
zro les valeurs de la calculatrice.

Cration dun premier tableau :

- Choisir la forme du tableau dans la palette
Layout / TableArrangement :

- Indiquer ensuite le nombre de lignes et de

colonnes dans les proprits :
Renommer les objets utiliss dans linterface :

Il est important de renommer les objets utiliss pour

llaboration de linterface, cela permettra ensuite de
mieux les reconnatre lorsque nous les utiliserons dans
la partie programmation vnementielle.

Pour renommer un objet :

- Cliquer sur lobjet renommer, exemple
Button1, puis cliquer sur Rename dans la
partie Components
- Lancien nom de llment saffiche, saisir le
nouveau nom puis cliquer sur OK

Prciser que les valeurs saisies doivent tre

obligatoirement des valeurs numriques :

Afin deffectuer les calculs, les valeurs saisies dans les

zones de texte (TextBox) doivent obligatoirement tre
des nombres.

Il faut le prciser dans les proprits (zone de saisie des

deux nombres et zone daffichage du rsultat).

Pour cela, cocher la case NumbersOnly

La liste des lments utiliss dans linterface :

2me tape : la programmation vnementielle de lapplication calculatrice

3 grandes parties dans cet algorithme :

Linitialisation de lcran : au dpart les libells (labels) saffichent mais les zones de texte sont vides
(TextBox).

Lorsque lon clique sur lun des signes dopration : le calcul doit tre effectu et affich dans la zone de texte
Rsultat.

Enfin lorsque lon clique sur le bouton Mise zro , les zones de saisies doivent tre effaces :

3me tape : Tester lapplication sur lmulateur ou le smartphone

(cf. photo de dpart)

Amlioration possible : Ajouter

des images dans les boutons (image
dun plus, dun moins, dun signe de
multiplication, dun signe de division,
et dun reset ) par exemple.