Sunteți pe pagina 1din 9

GUIDE DE PRISE EN MAIN DE APP INVENTOR

GUIDE DE PRISE EN MAIN DE APP INVENTOR

Sommaire

1. Présentation . . . . . . . . . . Page 2

2. Un premier projet . . . . . . . . . Page 2


Mise au point d'une application sur tablette tactile permettant la gestion d'une touche
ainsi que d'une image.

Ce premier projet permet de se familiariser avec l'environnement proposé par App Inventor
(Site web de développement du projet et éditeur de blocs)

3. Un deuxième projet . . . . . . . . Page 6


Ce deuxième projet s'appuie sur le précédent et permet l'introduction d'un objet très
employé sous App Inventor (objet "Canvas")

4. Variables et emploi de différents contrôles . . . . . Page 7

Cette partie est consacrée à l'utilisation des variables (déclarations, types et calculs) ainsi
qu'aux différentes structures : boucles et alternatives.

5. Agencement graphique des objets . . . . . . Page 8


Cette partie montre des solutions permettant de structurer l'écran (Screen) lié à l'application
qui va être développée.

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 1


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.

L'IDE est formée de deux composantes logicielles :

 un site web permettant de créer un projet : Création de la page graphique de la future


application (dépôt des objets nécessaires à l'application sur une page de travail _ un peu
comme une Form en visual C#_). Ce site Web a besoin d'un compte google (gmail) pour
fonctionner.

 un programme résident sur l'ordinateur, qui permet la saisie du programme (association


des blocs liés aux objets précédemment définis dans l'espace web). Ce programme
permet également le téléchargement de l'application vers le média désiré (tablette,
téléphone...)

A l'origine le projet APP INVENTOR a été crée par le Google Labs... puis abandonné. Aujourd'hui
ce concept est repris par le MIT (Massachusets Institute of Technology
http://appinventor.mit.edu/)

A titre d'information...

Pour installer l'IDE APP INVENTOR sur votre ordinateur il est nécessaire de suivre les quelques
étapes mentionnées dans l'onglet LEARN du site.
 Test your system : Test du système de votre PC afin d'installer la plate
forme JAVA dans le cas où elle n'est pas présente.
 Install App Inventor Software : Téléchargement et installation du
fichier App Inventor Setup.exe . Ce programme, exécuté à l'aide de la
plate forme JAVA, permettra la saisie des blocs.
 De plus, il faudra que le pilote USB permettant la liaison tablette / ordinateur soit
également installé (téléchargeable depuis les sites web des constructeurs)

Nota
D'autres environnements de développements tels que Eclipse ou Processing (couplés avec le SDK
Androïd) permettent la création d'applications sur les plates-formes Androïd. Ces
environnements offrent d'ailleurs des possibilités de programmation que App Inventor n'autorise
pas... Cependant, le côté ergonomique de AppInventor en fait un excellent choix pour
développer rapidement de petites applications personnelles (interface IHM) sur tablettes ou sur
téléphones.

2. Un premier projet : "test1"

Rien de tel que la main à la pâte !

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 2


 Depuis le navigateur google chrome aller sur le site du MIT App Inventor :
http://appinventor.mit.edu/ puis cliquer sur .
 Saisir l'adresse email de votre compte google ainsi que le mot de passe (un compte google
par ordinateur sera donné par votre professeur).

Le message suivant peut apparaître dans le cas d'une première connexion :

Cliquer sur Mémoriser,


puis sur Autoriser

 Le site Web permettant la création du projet apparaît :

Cliquer sur New, puis


donner le nom test1 au
projet

L'onglet My Project
Cliquer sur Ok permet d'exporter ou
de charger les projets
crées au format .zip

Ici la fenêtre Ici la fenêtre des


d'exploration des propriétés. Il est
objets contenus dans le possible de modifier
"Screen". Un clic sur un les propriétés de
Ici la zone de travail. des objets, permet, en l'objet sélectionné
(Screen1). Cette zone utilisant la fenêtre de depuis la zone de
représente ce qui sera droite (Properties) de travail ou depuis la
affiché sur l'écran du modifier les propriétés fenêtre d'exploration.
mobile (tablette, de base l'objet.
téléphone...)

Ici la palette des


objets disponibles.
Un glisser déplacer
permet de les
positionner sur la
zone de travail
(Screen1).

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 3


Le premier projet de prise en main consiste en une application qui permet d'afficher une image
dès que le bouton "Appuyer ici" est effleuré.

Placer les objets suivants sur la zone de travail :


 Bouton (button)
 Image

Configurer les propriétés des objets du projet afin que :


 Le texte du bouton contienne "Appuyer ici"
 L'image soit au préalable cachée (propriété Hidden) et contienne le fichier
"image_android.png" " (située dans votre répertoire de travail)
 Le fond de l'écran (Screen1) n'ait pas de couleur d'arrière plan (background color =
"none") et contienne l'image "fondecrantest1.png" (située dans votre répertoire de
travail).

A présent, il faut lancer l'éditeur de blocs afin de mettre en oeuvre la programmation associée
aux différents objets :

 Cliquer sur
 Le message suivant apparaît ( en bas de la fenêtre de votre navigateur) :

Cliquer sur Enregistrer.

Puis sur Ouvrir (clic droit en étant positionné sur le nom du fichier téléchargé)

Lors d'une première installation,


l'application "App Inventor for
Androïd Blocks Editor" demande
des autorisations.

Activer

Exécuter

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 4


 L'éditeur de blocs est ouvert :

Ici la zone de travail ou les différents blocs vont être


disposés et agencés.

A noter :
Un clic gauche dans l'espace de travail permet d'accéder
directement aux raccourcis de la fenêtre de gauche
(bibliothèque de blocs)

Ici on trouve tous les blocs nécessaires à la programmation :

Built-in contient les "intégrés", c'est à dire les éléments de base :


définir une variable ou une méthode (procédure) _Definition_
Réaliser des opérations sur du texte _Text_
Réaliser des comparaisons sur des nombres ou des opérations mathématiques _Math_
Réaliser des tests ou des opérations logiques _Logic_
réaliser une boucle _Control_
Employer des paramètres de couleur _Color_

My blocks contient les objets définis dans le projet. Ici on retrouvera par exemple le bouton avec ses évènements
et propriétés associés.

Advanced contient des éléments supplémentaires (propriétés, méthodes) pour les objets déjà définis dans le
projet.

 Saisie du programme

Voici ce que l'on doit obtenir dans la zone de travail:


Evènement se déclenchant quand un clic
(appui) court est détecté sur le bouton.

On note les "ergots" qui


Propriété permettant de permettent l'imbrication des
faire apparaître (ou blocs les uns dans les autres.
Cela limite le risque d'erreur
disparaître) l'image.

 Test de l'application sur la tablette

o Connecter la tablette avec son cordon sur un des ports USB de l'ordinateur.
Attendez que celle-ci soit reconnue.

o Depuis l'onglet "Connect to device" en haut à


gauche choisir le numéro de tablette qui
convient. Si aucune tablette n'est détectée
alors que le pilote est bien installé et que la tablette a été reconnue, cliquer sur
Save afin de sauvegarder le travail en cours puis quitter l'éditeur de blocs.
Relancer ensuite l'éditeur de blocs depuis le site web de création de projet.

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 5


o Vérifier le fonctionnement de l'application.

3. Un deuxième projet

Ce deuxième projet exploite l'objet "Canvas". Cet objet peut contenir une image en arrière plan
et peut réagir à des évènements de type "dragged" (déplacement). Là ou cet objet devient très
intéressant, c'est qu'il possède des méthodes de dessin (ligne, cercle...).

Ce deuxième projet reprend l'exemple du premier (apparition d'une image) et permet le dessin
d'une courbe tracée au doigt sur l'image d'arrière plan du container.

 Quitter l'éditeur de blocs.


 Supprimer, dans le projet en cours, l'objet "Image".
 Placer un objet "Canvas" et sélectionner l'image "image_android.png" pour l'arrière plan.
Choisir également la propriété Visible = Hidden.
 Ouvrir l'éditeur de blocs
 Saisir le programme suivant :
Propriété permettant
d'activer une couleur de
dessin dans le canevas

Propriété permettant Déclaration de variables


de faire apparaître effectuée dans
(ou disparaître) l'évènement. prevX et
l'affichage du canevas) prevY indique la position
du doigt lors du "glissé".

Evènement se
déclenchant quand le
doigt "glisse" dans le La méthode "DrawCircle" a
canevas. besoin des valeurs contenues
dans prevX et prevY. On a
accès à ces blocs depuis
l'onglet "MyBlocks" 
"MyDefinitions"

Méthode DrawCircle.

 Tester le fonctionnement obtenu et changer notamment le paramètre lié au rayon du


cercle.
 Modifier le projet en plaçant cette fois ci l'image "fondecrantest1.png" dans le canevas.
 Vous pouvez également modifier les propriétés "width" et "height" du caneva.

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 6


4. Variables et emploi de différents contrôles

Cette partie n'a pas pour but de passer en revue toute les possibilités offertes, il y'en aurait
trop, mais plutôt de montrer l'emploi de blocs essentiels à la programmation.

 Les variables
Attention, dans AppInventor presque toutes les variables sont globales (sauf celles qui
sont passées en argument aux méthodes. Ca n'est pas fantastique... mais c'est comme ça,
alors tant pis !

o Déclaration de variables

Déclaration d'une variable


de type "texte" (string)

Déclaration d'une variable


de type "nombre" (double).

On peut s'attendre à ce que le programme ci-contre ne


fonctionne pas car la propriété "Text" de "Label1.Text"
attend raisonnablement du texte ... Et bien non ! Ca
fonctionne ! Les changements de type des variables se
font implicitement (plus simple qu'en visual C# mais bien
moins rigoureux...)

o Comment effectuer des calculs à l'aide des variables déclarées ?

Il suffit d'employer depuis "My Blocks"  "My Definitions" le bloc "Set global". A titre
d'exemple :
permet de réaliser
l'opération :

mavariable2 = 4 x
mavariable2

 Les boucles et structures de décisions


AppInventor offre beaucoup de possibilités de boucles. A titre d'exemple :

o la boucle for...
variable est la variable qui sert à
la boucle for. Que l'on peut
start est la valeur de départ de la traduire par :
variable
end est la valeur de fin
step est la valeur du pas
d'incrémentation

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 7


for(i=0;i<=50;i++)
{mavariable2=mavariable2+10;
Label1.Text=mavariable2;
}

o La boucle while (tant que...faire)

Tant que (while) la condition est


Que l'on peut
vraie la séquence contenue dans
"do" s'exécute.. traduire par :

while(mavariable2<10)
{
mavariable=mavariable+1;
Label1.Text=mavariable2;
}

o la structure if ...else

L'écriture de cette structure sous forme de


blocs est particulièrement explicite. La
traduction en C# est :

if (mavariable2<10)
{Label1.Text="valeur plus petite que 10";
} else
{Label1.Text="valeur supérieure ou égale à
10";
}

5. Agencement graphique des objets

Pour terminer ce guide il peut être intéressant d'énoncer les possibilités d'agencement
graphique offertes par AppInventor pour donner un peu d'esthétique à l'application. En effet
on découvre assez vite que les objets posés sur la feuille de travail du projet (Screen) ne se
superposent pas (ni se juxtaposent...). Si on désire les ordonner il faut alors créer des
arrangements d'écran à l'aide des objets contenus dans "Screen Arrangement".

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 8


HorizontalArrangement permet de créer
un container horizontal dans lequel d'autres
objets peuvent être placés.

TableArrangement permet de créer un


tableau container. Chaque case peut alors
contenir l'objet désiré.

VerticalArrangement permet de créer un


container vertical dans lequel d'autres
objets peuvent être placés.

Lycée Jean Moulin : Guide de prise en main de AppInventor. Laurent P. 9

S-ar putea să vă placă și