Vous êtes sur la page 1sur 26

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
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 3

extension de fichier APK (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)
✔ Deux images lutin (Singe – 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

25