1

TP APP INVENTOR

1. Présentation

APP INVENTOR est un IDE (environnement de développement intégré) qui permet la

création d'applications destinées à des systèmes équipés de plates-formes Androïd.
Parmi ces systèmes, on trouve des téléphones (tactiles ou non) ainsi que des tablettes
(ACER, SAMSUNG ...).

Cet environnement de programmation permet une programmation graphique aisée, basée

sur l'assemblage de blocs (langage Scratch). Des connaissances en programmation orientée
objet sont toutefois nécessaires. Cependant, on pourra s'affranchir complètement de la
connaissance des noms des propriétés et méthodes liées aux objets. En effet des blocs de
propriétés, méthodes et évènements seront directement proposés dès la création d'un
objet.

Application N°1 Détecteur de choc

Objectif
Réaliser un détecteur de choc avec son Smartphone
Une nouvelle version d’APPINVENTOR est parue en ce début d'année.

Cliquer sur le lien suivant :

http://ai2.appinventor.mit.edu

Pour utiliser l’application, il faut utiliser un compte Gmail.

Pour ceux qui n’ont pas de compte Gmail , créer un compte.

tutoriel 1er application APP Inventor.htm

Un tuto est disponible en cliquant sur « »

1/ Créer un nouveau projet Nom : Choc.

TP APP-INVENTOR
 2

2/ Insérer une image (à vous de choisir laquelle).

3/ Insérer les composants à utiliser. Accéléromètre et son. Cliquer et déplacer vers le

téléphone.

Plus les fichiers sons et images.

4/ On va programmer les différents éléments :
Cliquer sur Blocks.

TP APP-INVENTOR
 3

Réaliser le programme suivant :

Commentaires
Lorsque l’évènement « Accélèration détectée » apparait (sur un des 3 axes)
Lancer le son 1
Afficher dans la zone « val_accel_X »
« Valeur accéléromètre : » + valeur numérique de l’accélération sur l’axe X »

Pour vérifier le bon fonctionnement de l’appli :

 Cliquer sur

 Relier votre téléphone au PC et copier le fichier choc.apk.

 Du téléphone en laissant explorateur ouvrir chock.apk , le système android installe
l’application.

TP APP-INVENTOR
 4

2. Deuxième application : ChocXYZ

Objectif
Réaliser un détecteur de choc avec son Smartphone et affichage des accélérations mesurées
sur les axes X, Y et Z.

TP APP-INVENTOR
 5

3. Application N°2 - PaintPot:

Note historique: PaintPot a été l'un des premiers programmes développés pour démontrer le potentiel des
ordinateurs personnels, aussi loin que les années 1970.
Qu'est-ce que vous construisez
Avec l'application PaintPot, vous pouvez:
 Trempez votre doigt dans un pot de peinture
virtuelle.
 Faites glisser votre doigt sur l'écran pour dessiner
une ligne.
 Poke l'écran pour faire des points.
 Utilisez le bouton en bas pour effacer l’écran.
 Inclure une image comme arrière-plan de dessin.
Ce tutoriel introduit les concepts suivants :
 La composante toile pour le dessin.

 Contrôle de l'écran avec des composants de l'Arrangement.

 Les gestionnaires d'événements qui prennent des

arguments.

 Variables

11

Titre de l'écran

Le nom que vous choisissez pour votre projet que vous travaillez dessus. Ce sera
également le nom de l'application si vous l'emballer pour le téléphone.
Mettre en place les composants
Vous pourrez utiliser ces éléments pour faire PaintPot:
 Trois boutons de sélection de peinture rouge, bleu ou vert, et un autre bouton pour effacer le dessin.
 Une toile, la surface de dessin. Cette toile a une image de fond. Vous pouvez également dessiner sur
une toile vierge. C'est juste une toile sans une image de fond.
 Il y a aussi un élément que vous ne voyez pas: vous utilisez un HorizontalArrangement pour rendre la
couleur des boutons jusqu'à trois lignes.
Cela fait cinq éléments dans l'ensemble. Nous allons les obtenir et compiler l'application.
Touches de couleur
 Faites glisser un composant Button sur la visionneuse et modifier l'attribut Text du bouton à "Rouge" et
de faire son rouge BackgroundColor.
 Cliquez sur Button1 dans la liste des composants dans le Viewer pour le sélectionner (il pourrait déjà
être en surbrillance) et utilisez le bouton Renommer ... de changer son nom de Button1 pour rouge.
 De la même façon, faire deux boutons supplémentaires pour le bleu et le vert, nommé ButtonBlue et
ButtonGreen, de les placer verticalement sous le bouton rouge.

TP APP-INVENTOR
 6

Voici comment cela devrait se regarder dans le concepteur, avec les noms des touches qui apparaissent dans la
liste des composantes du projet.

Mise à Disposition de l'écran

Vous devriez maintenant avoir trois boutons, l'un au-dessus de l'autre. La prochaine étape est de rendre les
aligner horizontalement. Vous faites cela en utilisant un composant HorizontalArrangement.
1. De la palette de l'écran Arrangement, faites glisser un composant HorizontalArrangement et le placer
sous les touches.
2. Déplacez les trois boutons dans HorizontalArrangement composant.

Vous devriez également voir vos trois boutons de ligne dans une ligne sur l'écran du téléphone, bien que les
choses pourraient ne pas être exactement comme sur le concepteur..
En général, vous utilisez l'écran Arrangement de créer simplement des présentations verticales ou horizontales.

TP APP-INVENTOR
 7

Toile et essuyez le bouton

Les deux derniers éléments sont la toile et le bouton effacer.
1. De la palette Drawing and animation glisser le composant canvas. Définissez sa largeur width et
hauteur Height à 300 pixels.
2. Ajouter une image de fond de la toile.
Vous pouvez utiliser n'importe quelle image que vous voulez, mais vous obtiendrez de meilleurs
résultats si la taille de l'image (en pixels) est proche de la taille à laquelle vous serez les afficher sur le
téléphone. En outre, les grandes images prennent beaucoup de temps à charger, et pourrait dépasser la
capacité mémoire des alloue téléphone pour les applications.

3. Dans la palette, faites glisser le bouton effacé, en le plaçant sous la toile. Changer son nom.
Vous avez terminé les étapes pour configurer l'apparence de votre application. Voici comment cela devrait se
regarder dans le concepteur. Ensuite, vous allez définir la manière dont les composants se comportent.

TP APP-INVENTOR
 8

Ajouter comportements des composants

Ouvrir l'éditeur de blocs. D'abord configurer les boutons qui changent la couleur de la peinture.

Ajouter les gestionnaires d'événements de bouton

Dans l'éditeur de blocs:
1. Passer à la colonne Mon blocs.
2. Cliquer sur le Button1 et faites glisser le bloc when button1.click do.
3. Cliquer sur DrawingCanvas et faites glisser set canvas1 paintcolor le placer dans la section When
ButtonRed.Click.
4. Passer à la colonne Built-In. Ouvrez le tiroir Couleurs et faites glisser le bloc pour la couleur rouge et le
mettre dans DrawingCanvas.PaintColor réglé.
5. Répétez les étapes 2-4 pour les boutons bleu et vert.
6. Le dernier bouton pour mettre en place le bouton Nettoyer.

Ajouter au toucher gestionnaires d'événements

Maintenant pour la prochaine étape: le dessin sur le canevas. Vous arranger les choses de telle sorte que lorsque
vous appuyez sur la Toile, vous obtenez un point à l'endroit où vous touchez. Si vous faites glisser votre doigt
lentement le long de la toile, il trace une ligne.
 Dans l'éditeur de blocs, cliquer le block canvas et faites glisser le bloc When canvas1 touched do
Sur le côté droit de la DrawingCanvas.DrawCircle , il y a trois sockets où vous devez spécifier des valeurs pour x
et y coordonnées où le cercle doit être dessiné, et r, qui est le rayon du cercle.
Voici comment le gestionnaire d'événement tactile devrait ressembler:

TP APP-INVENTOR
 9

Essayez ce programme sur le téléphone. Appuyez sur une touche de couleur. Maintenant toucher la toile, et votre
doigt doit laisser une place à chaque endroit que vous touchez. Appuyant sur le bouton Nettoyer devez effacer
votre dessin.
Ajouter des événements Drag
Enfin, ajouter le gestionnaire d'événement de glissement. Voici la différence entre un contact et un glisser:
 Une touche c’est quand vous placez votre doigt sur la toile et le soulever sans le déplacer.
 Une traînée est quand vous placez votre doigt sur la toile et déplacez votre doigt en le maintenant en
contact.
Un événement de glissement est livré avec 6 arguments. Il s'agit de trois paires de coordonnées x et y qui
montrent:
 La position de votre doigt là où la traînée commencé.
 La position actuelle de votre doigt.
 La position immédiatement précédente de votre doigt.
Maintenant, faites glisser tracer une ligne entre la position précédente et la position actuelle en créant un
gestionnaire de traînée:
1. Cliquer sur DrawingCanvas, faites glisser le bloc lorsque DrawingCanvas.Dragged à l'espace de
travail.
Voici le résultat:

Testez votre travail en l'essayant sur le téléphone: faites glisser votre doigt sur l'écran pour dessiner des lignes et
des courbes. Touchez l'écran pour faire des taches. Utilisez le bouton effacer pour effacer l'écran.
Améliorer l’application :
 en rajoutant des boutons pour plus de couleur.
 en changeant le fond d’écran…..


D’autres exemples sur :

http://appinventor.mit.edu/explore/ai2/tutorials

TP APP-INVENTOR