Présentation Une première application très simple

App Inventor
S I N
TP
Durée 3h
Débuter avec App Inventor
Objectifs
Découvrir l'environnement graphique de conception d'applications Android "App Inventor".
Concevoir des applications simples mettant en œuvre des composants et des techniques de base.
Documents
Matériel
Débuter avec App Inventor (document ressource).pdf
 Tablette graphique (ou smartphone) pour le test final (pouvant également être effectué avec
l'émulateur dans certains cas)
 Ordinateur avec Java et App Inventor à jour
Présentation
App Inventor est une application en ligne qui permet, avec un minimum de connaissances de la
programmation, de développer des applications simples pour les appareils dotés du système
d'exploitation Android.
Avant toutes choses, il est nécessaire de prendre connaissance du document de référence "Débuter
avec App Inventor (document ressource)" qui pose les bases indispensables.
Une première application très simple
Pour commencer simplement, vous allez concevoir une application très simple : un bouton qui, lors d'un
clic (en fait un "effleurement" car l'écran est tactile sans nécessiter aucune pression) affichera un texte
dans une zone réservée à cet effet. C'est inutile, mais ça permet de commencer sans difficulté…
Créer le projet et définir le design de l'application
Q1.
Ouvrez l'environnement graphique web en vous rendant à l'adresse :
http://www.appinventor.mit.edu
Cliquez sur le bouton Invent (Create Mobile Apps) et entrez les paramètres du compte Google
associé à cet usage. Dans "My Projects", créez un nouveau projet nommé "Test".
Vous devez commencer par concevoir l'interface graphique de l'application (son apparence sur l'écran
de l'appareil cible).
Q2.
Dans la liste "Components" (à droite), cliquez sur "Screen1" (non renommable) et choisissez la
couleur du fond d'écran (BackgroundColor), ou une image (BackgroudImage) et le titre de
l'écran (Title). Vous pouvez également choisir une icône pour votre application. Elle remplacera
l'icône par défaut (votre icône n'est associée au programme que lorsqu'il est effectivement
installé sur l'appareil).
Document ressource
Page 1/5
04/11/2012
App Inventor
S I N
TP
Durée 3h
Q3.
A partir de la rubrique "Palette  Basic" sur la gauche de l'écran, placer un bouton en le faisant
glisser vers l'écran simulant l'appareil. Dans la liste "Components" (à droite), modifier
éventuellement le nom du bouton (au moyen de la commande "Rename").
Q4.
Editer les propriétés du composant en choisissant :
– la couleur du bouton (BackgroundColor),
– le texte affiché sur le bouton ainsi que le style et la couleur de ce texte (Text, FontTypeface,
FontBold, FontItalic, FontSize, TextColor),
– la largeur (Width) et la hauteur (Height) du bouton, selon les critères suivants :
L'option "Automatic" fixe la taille du bouton par défaut,
L'option "Fill parent" élargit la taille du bouton à la taille de l'écran,
L'option "pixels" permet de spécifier une taille fixe en pixels (le
résultat dépend de la résolution de l'écran de l'appareil cible).
Q5.
Pour afficher le texte qui sera associé au clic du bouton, il est nécessaire d'ajouter un
composant basique nommé "Label", dont vous pouvez fixer les propriétés (comme pour le
bouton). C'est une simple zone d'affichage, non cliquable (donc non modifiable par
l'utilisateur).
Rendre l'application fonctionnelle
Une interface graphique, c'est bien, mais seule, ça ne sert pas à grand-chose. Vous allez donc
maintenant concevoir le programme qui va avec. Graphique ou pas, sa complexité ne va dépendre que
des fonctionnalités que vous y incorporez. Souvenez-vous bien, dans App Inventor, votre application se
construit en associant des actions à des événements. Les notions de temporalité ou de priorité des
événements entre eux sont ici sans objet…
Q6.
Lancez l'éditeur de blocs. Dans la rubrique "My Blocks" (associée
aux composants que vous avez incorporé dans l'environnement
graphique), choisissez l'événement "Click" associé à un
effleurement de courte durée du bouton.
Comme indiqué dans le bloc, quand (when) le bouton est effleuré, l'action que vous y
accrocherez sera exécutée (do).
Remarque :
Il existe d'autres événements associés
supérieure à 2 secondes (LongClick) ou
pointeur passant au-dessus du bouton
(LostFocus). Ces deux dernières actions
donc généralement inutilisées.
au bouton, comme l'effleurement de durée
en utilisant un trackball (mini souris) avec un
(GotFocus) ou restant en dehors du bouton
ne sont pas associées à l'écran tactile et sont
Ajoutez l'action produite par l'effleurement du bouton. Cette action devant produire l'affichage d'un
texte, elle est associée au composant "Label1" (nom par défaut, sauf si vous l'avez modifié).
Document ressource
Page 2/5
04/11/2012
App Inventor
S I N
TP
Durée 3h
Q7.
Dans la rubrique "My Blocks  Label1" se trouvent les méthodes disponibles pour le
composant. Il est ainsi possible de définir (action "set") le texte affiché (Text), son style
(TextColor, FontSize, Height, Width) et la couleur du fond (BackGroundColor).
Emboîtez la méthode "Text" sur l'événement d'effleurement du
bouton et dans la rubrique "Built-In  Text", choisissez le bloc
"Text" et emboîtez-le à l'extrémité nommée "to" de la méthode
précédente. Ecrivez le texte à afficher (dans la zone entourée).
Remarque :
Pour gagner du temps, l'éditeur de blocs possède une fonction d'accès rapide aux
contenus de la rubrique "Built-In" (fonctions de base). En cliquant sur une zone vide de la
fenêtre d'édition, le contenu de la rubrique s'affiche sous la forme d'une barre
horizontale de boutons. Il n'y a plus qu'à choisir dans les listes déroulantes associées.
Tester le résultat
L'application est terminée (elle était volontairement très simple pour se familiariser avec
l'environnement). Il ne reste plus qu'à la tester…
Q8.
Testez votre application sur l'émulateur et vérifiez son fonctionnement (ne pas oublier de
déverrouiller l'affichage de l'émulateur pour voir le résultat).
Testez aussi l'application sur un téléphone ou une tablette Android (préalablement installée sur
l'ordinateur et configurée selon les indications données dans le document ressource).
Utiliser les ressources graphiques de l'appareil
Fort des connaissances acquises dans la première partie du TP, vous allez maintenant développer une
application permettant d'utiliser deux ressources matérielles graphiques majeures :
– l'appareil photo numérique (APN) pouvant aussi être utilisé comme une caméra,
– l'écran tactile.
Cette application doit permettre de prendre une photo et l'utiliser comme fond d'écran (un bouton est
donc prévu à cet effet) et dessiner sur cette photo en glissant le doigt sur l'écran.
Créer le projet et définir le design de l'application
Q9.
Créez un nouveau projet nommé "Dessine_Photo" et définissez l'environnement graphique de
l'application.
L'appareil photo est le composant nommé "Camera" se trouvant dans la palette "Media" (ce
composant étant caché, il apparait dans la zone "Non-visible components" située en dessous
de l'écran).
Placez également un bouton nommé "Prend une photo" (c'est le texte affiché sur le bouton) et
renommez le composant en "PrendPhoto".
Document ressource
Page 3/5
04/11/2012
TP
App Inventor
S I N
Durée 3h
Afin de pouvoir dessiner sur l'écran, il faut ajouter un nouveau composant appelé "Canvas" (se
trouvant dans la palette basique) qui correspond à une zone tactile de l'écran de l'appareil.
Définissez sa taille en choisissant l'option "Fill parent…" pour sa largeur (toute la largeur de
l'écran) et environ 300 pixels pour sa hauteur (dépendant de l'appareil cible).
Rendre l'application fonctionnelle (édition de blocs)
Q10.
Dans l'éditeur de blocs, à l'évènement clic long du bouton, associez la procédure de prise de
vue (TakePicture) de l'appareil photo.
La photo prise par l'appareil doit être appliquée en fond d'écran. Cependant, il ne faut pas confondre
l'écran, repéré "Screen" dans l'interface web, qui peut être plus allongé que la zone visible de l'appareil
et la une zone tactile visible nommée "Canvas".
La prise de vue correspond au lancement d'une application faisant partie intégrante de l'appareil
Android. Une fois que la photo est prise, il suffit de préciser l'action qui suit.
Q11.
Ajoutez l'évènement lié à l'utilisation de la photo prise par l'APN.
Attention, pour permettre de dessiner par-dessus la photo, il faut utiliser la méthode
Canvas1.BackGroundImage (au lieu de Screen1.BackGroundImage qui placerait la photo
tout en bas de notre écran).
Q12.
Ajoutez l'évènement "Canvas.Dragged" associé au glissement du doigt
sur la partie tactile de l'écran. La position du doigt est repérée par des
coordonnées cartésiennes (X, Y), par rapport à une origine située dans le
coin supérieur gauche de la zone tactile.
Y
X
Augmentez l'épaisseur du tracé à 5 (pixels).
7 arguments (variables
d'entrée de la fonction)
Position de départ (correspondant au premier
toucher de l'écran, avant le glissement)
Position précédant immédiatement
la position courante
Position courante (actuelle)
Un "sprite" est une petite image superposée
au fond d'écran et qui peut se déplacer (seule
sur une trajectoire ou en la faisant glisser).
Remarque :
Tous les arguments des fonctions de l'application se trouvent dans la rubrique
"My Blocks  My Definitions" de l'éditeur de blocs.
Document ressource
Page 4/5
04/11/2012
App Inventor
S I N
TP
Durée 3h
Q13.
A l'évènement glissement du doigt, attachez la méthode de tracé de ligne du composant
"Canvas1" en lui associant les arguments "position immédiatement précédente" (x1, y1) et
"position courante" (x2, y2) de la zone tactile.
Tester le résultat
Q14.
Testez votre application sur un appareil Android (pour pouvoir prendre une photo) et vérifiez
son fonctionnement. Le cas échéant, corrigez les éventuels dysfonctionnements constatés et
montrez le résultat de cette application au professeur.
Et pour les plus rapides…
L'application précédente est intéressante car elle utilise des composants fondamentaux de l'appareil.
On peut cependant l'améliorer en la dotant de fonctionnalités supplémentaires :
– un bouton "Efface" pour effacer complètement les tracés superposés à la photo,
– trois boutons colorés pour choisir parmi trois couleurs de la palette disponible.
Lorsqu'on ajoute des composants dans l'environnement graphique, ils se positionnent par défaut selon
une suite verticale sur l'écran de l'application.
Pour disposer des composants sur une ligne horizontale, il est nécessaire d'utiliser le composant
"HorizontalArrangement" (dans la palette "Bacic  Screen Arrangement"). Il est également possible
de réaliser un arrangement vertical ou en tableau des composants…
Q15.
Ajoutez les 4 nouveaux boutons pour former 2 arrangements horizontaux (un arrangement
pour les boutons de couleur et un autre pour les boutons prise de vue et effacement).
Choisissez les couleurs à votre goût et paramétrez les boutons en conséquence.
Q16.
Adaptez le programme pour qu'il agisse au clic court des boutons de couleur et au clic long du
bouton d'effacement.
Q17.
Ajoutez une fonction de dessin d'un point de la couleur choisie lors d'un effleurement de
l'écran sans déplacement du doigt (évènement "Canvas1.Touched"). Choisissez la taille du
point, toujours indiquée en pixels.
Q18.
Testez votre application sur l'appareil. Une fois terminée, montrez le résultat de cette
application au professeur.
Document ressource
Page 5/5
04/11/2012