Conce

et codvoir
er

Pens
ée lo
progr gique
amm et
ation
M. Zo
ua ri Laz
h ar
 d ucti on
Intro

App Inventor pour Android est une application développée par

Google. Elle est actuellement entretenue par le Massachusetts
Institute of Technology (MIT).

App Inventor permet de créer des applications Android à

travers une interface purement visuelle et de configurer les
actions de l'App par un système de blocs logiques.

2
 o d uct io n
Intr

Qu'est-ce qu'une application?

• Une application est un programme informatique, une liste

d'instructions indiquant à l'ordinateur quoi faire. Le mot App est

utilisé pour parler de programmes conçus pour les smartphones et

autres les appareils mobiles comme les tablettes.

• Le package d’installation d’une application pour smartphone ou

tablette sous Android possède une extension de fichier APK

3
(nom_fichier.apk).
 Installation d’application
smartphone

Téléchargement sur google play

Vous pouvez installer directement une application à partir du site web de
Google play. Il faut que l’application soit disponible sur Google play. Les
applications disponibles peuvent être libres de droit ou payantes.
Activité :
Télécharger l’application Galaxy Attack disponible sur Google play. Pour cela
lancer l’application Google play qui est déjà installée sur votre tablette ou
smartphone. Il suffit de taper dans le moteur de recherche le nom de
l’application et de cliquer sur installer. Une fois l’application installée, lancer
l’application et testez là.
4
 Installation d’application
smartphone

A partir d’un fichier APK

Une application pour smartphone ou tablette sous Android possède une extension de
fichier APK (nom_fichier.apk).
Activité :
Vous allez installer l’application Office Lens.apk qui se trouve dans
formations/Mit App Inventor 2..
1. Pour télécharger le fichier Apk qui se trouve sur votre ordinateur vers votre
tablette ou smartphone connectez votre smartphone ou tablette via un câble USB
à votre PC.

5
 Installation
d’application
smartphone

2. Vous devez alors voir votre smartphone qui apparait dans la liste des
périphériques de stockage. Faite un copier-coller dans le répertoire de votre
convenance dans votre smartphone. Naviguer dans l’arborescence de votre pour
coller votre fichier APK.
3. Il faut maintenant accéder au fichier APK collé dans votre smartphone.
4. Cliquer sur le fichier apk, l’installation démarre, il suffit de suivre les
instructions. Votre application s’installe et un icône est créer dans la liste des
applications.

6
 Création d’un compte
App Inventor 2
La programmation se réalise en ligne, à l’aide de le navigateur préféré. La seules
contraintes : avoir un compte Gmail pour pouvoir y accéder, et un accès à internet
évidemment. Les informations sont stockées sur des serveurs distants.
1. Taper dans la zone d’adresse URL http://ai2.appinventor.mit.edu/ Le système va vous
demander de vous connecter à un compte google.
2. Saisissez votre login et mot de passe personnel d’un compte Gmail.

7
 Création d’un compte
App Inventor 2
3. Cliquer sur continue

Vous êtes arrivés dans l’environnement d’App Inventor

2 8
 IDE d’App Inventor 2

Etapes de réalisation d’une application :

1. Démarrez un nouveau projet.

2. Cliquez sur Projects / Start new project.

9
 IDE d’App Inventor 2

2. Taper le nom de votre projet :

Vous obtenez l’écran de travail suivant :

10
 IDE d’App Inventor 2

Le concept d’App Inventor

11
 Application N° 1 :
Bounce Sprite

Développez ensemble une application mobile qui permet de faire rebondir un ballon si le
bord de l’écran est atteint.
1. Vous aurez besoin de ces composants dans la fenêtre de la création de l’interface
❖ Un cadre (Canvas)
❖ Balle (Lutin /Sprite)

2. Passez maintenant à la fenêtre de programmation graphique

3. Réaliser le code suivant :

12
 Application N° 1 :
Bounce Sprite

Qu'est-ce que ça veut dire?

L'événement Ball1. bord atteint détectera quand le lutin Ball1 frappe le bord du cadre.
Chaque bord d'un canevas contient une valeur numérique. Il suffit donc de renvoyer le même
bord de valeur dans l'appel de rebond
Ball1.Rebondir fait rebondir le ballon et se déplacer dans la direction opposée le mur
(Ball1.Heading est changé de 180º).

13
bord atteint
Application N° 1 :
Bounce Sprite

4. Enregistrer le projet

5. Tester l’application sur l’émulateur ou le smartphone

Afin de tester l’application vous pouvez choisir le test sur :
• L’émulateur : un écran s’affichera sur l’ordinateur
• Al Companion : dans ce cas, la connexion se fera directement sur le smartphone
• USB : la connexion se fera sur le smartphone via un câble USB.

14
 Application N° 1 :
Bounce Sprite

Sur le smartphone, l’application MIT AI2 Companion doit être installée à télécharger sur le play Store.
Sur le PC, l’application MIT Emulator in AI2 doit être installée
http://appinventor.mit.edu/explore/ai2/windows.html
En choisissant Al Companion : un Code de 6 caractères est généré ainsi qu’un QR Code. Il suffit de
saisir le code ou de scanner le QR Code pour que l’application soit visible sur le smartphone et vous
pouvez ensuite la tester :

15
 Application N° 1 :
Bounce Sprite
6. Modifier le programme et tester

16
 Application N° 1 :
Bounce Sprite
7. Avant d’installer définitivement l’application sur la tablette, nous allons
améliorer rapidement quelques propriétés : Icône de l’App, titre, …

8. Générer l’application et l’installer

Menu Construire - App (Donner le Code QR)

9. Depuis le compagnon ou depuis n’importe

quelle application de lecteur de QR Code,
lancez la lecture du QR code généré,
terminez en suivant les indications
d’installation …
17
 Application N° 2 :
Drag A Sprite
Déplacer le lutin singe d'un côté à l'autre en faisant glisser le doigt
Vous aurez besoin de ces composants dans votre conception :
✔ Un cadre (canvas)
✔ Trois images lutin (Singe1 - Singe2 – banane )

18
 Application N° 2 :
Drag A Sprite

Éditeur de blocs

• X début et Y début , où l'utilisateur a initialement touché le écran.

• X actuel et Y actuel, où l'utilisateur est actuellement.
• X précédent et Y précédent tiennent toutes les valeurs étaient en cours de
l'appel précédent à l'événement (le premier appel de cet événement, ils sont
identiques à X début et Y début)
19
 Application N° 3 :
Mouvement avec Boutons
Déplacez le lutin Rapheal en appuyant sur un bouton.
Vous aurez besoin de ces composants dans votre conception :
✔ Un arrangement vertical
✔ Un cadre (canvas)
✔ Une image lutin (Rapheal )
✔ Un arrangement horizontal
✔ Un arrangement tableau (3x3)
✔ Quatre boutons

20
 Application N° 3 :
Mouvement avec Boutons
Éditeur de blocs

21
 Application N° 4 :
Mouvement avec capteurs

Déplacez le lutin Coccinelle en inclinant votre téléphone

Vous aurez besoin de ces composants dans votre conception :
● Un cadre (canvas)
● Une image lutin (Coccinelle)
● une horloge
● Capteur d’orientation

22
 Application N° 4:
Mouvement avec capteurs
Editeur de blocs

Avec procédure

23
 Application N° 5 :
Reconnaissance vocale & Texte à parole

Piloter une lampe en prononçant les ordres "allumer" et "éteindre". Cette

application simule l'état de la lampe en interchangeant l'image correspondante.
Vous aurez besoin de ces composants dans votre conception :
● Un cadre (canvas)
● Deux images lutin (lampe - éteinte / allumée )
● Un arrangement vertical
● Deux arrangements horizontaux
● Reconnaissance vocale
● Texte à parole

24
 Application N° 5 :
Reconnaissance vocale & Texte à parole

Ed
it e
ur
d
eb
lo
cs
25
Merc
i!
M. Z o
uari L
azhar