Un exemple simple de développement d'application (calcul d'IMC) avec l'environnement App Inventor.

1. App Inventor
Calcul de l’IMC

2. App Inventor
• Aller sur le site d’App Inventor
– http://appinventor.mit.edu/explore/
• Appuyer sur le bouton « create apps »
– Identifiez-vous avec un compte Google
– Vous serez connecté à l’environnement de
développement.

3. App Inventor
• L’environnement contient deux espaces
– Designer et Blocs
– Designer: pour concevoir l’interface utilisateur
– Blocs: pour définir les traitements à réaliser à
partir des interactions (événements) réaliser par
l’utilisateur avec l’interface.

4. Interface
• Par défaut, App Inventor est en Anglais
– Vous pouvez modifier la langue:

5. Interface utilisateur
• Une zone texte pour récupérer le poids
• Une zone texte pour récupérer la taille
• Un bouton pour lancer le calcul
• Une label(étiquette) pour afficher le résultat

6. Application
• Variables (masse, taille et IMC): permettent de stocker des valeurs
• Evènements (Quand bouton1. Enfoncé): associent les interactions de l’utilisateur avec
l’interface avec les traitements (instructions) à réaliser correspondants.
• Instruction: obtenir masse / obtenir taille ^ 2 permettent d’indiquer quels
traitements à appliquer aux variables: on utilise la valeur stockées dans certaines
pour calculer de nouvelles valeurs qui sont stockées à leur tour dans d’autres variables.
• Ici on utilise masse et taille pour calculer une nouvelle valeur qui est stockée dans IMC

7. Application
• Quand le bouton Bouton1 est pressé
– Récupérer la valeur dans la zone texte masse et la
stocker dans la variable masse.
– Récupérer la valeur dans la zone texte taille et la
stocker dans la variable taille.
– Calculer l’IMC à partir des valeurs des variables
masse et taille et stocker le résultat dans la
variable IMC.
– Modifier le texte de l’étiquette Label1 pour lui
attribuer la valeur de la variable IMC

8. Test
• Deux options
– Sur votre smartphone par le Wifi
– Sur votre ordinateur par l’émulateur (programme
qui « simule » un smartphone sur votre
ordinateur).

9. Test
• Smartphone/wifi
– Installer l’app AI Companion sur votre smartphone
• https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3
– Depuis l’interface d’App Inventor sélectionner « Connecte »
• Puis « Compagnon AI » dans le menu qui apparaît.
• Une fenêtre contenant un QR-code s’affiche.
• Démarrer l’app AI Companion sur votre smartphone
– Sélectionner « scan QR code » et braquer la caméra de votre smartphone sur le QR-code
– Une fois récupérer le code, sélectionner « connect with code »
– Votre application va se charger sur le smartphone et vous pouvez la tester.

10. Test
• Emulateur
– Récupérer/installer l’émulateur sur votre
ordinateur:
• Depuis http://appinv.us/aisetup_mac pour Mac
• Depuis http://appinv.us/aisetup_windows pour Windows

11. Test
• Emulateur
– Précision pour Mac:
• Sur Mac, vous obtenez un fichier intitulé
Appinventor_Setup_v_2.3.dmg
• Quand vous l'ouvrez, vous obtenez une fenêtre
contenant un autre fichier intitulé
MITAppInventorSetup.pkg
• Un clic droit sur l'icône de ce fichier vous permet de
forcer son ouverture et de lancer l'installation de
l'émulateur.

12. Test
• Emulateur
– Précision pour Mac:
• Sur Mac, vous obtenez un fichier intitulé
Appinventor_Setup_v_2.3.dmg
• Quand vous l'ouvrez, vous obtenez une fenêtre
contenant un autre fichier intitulé
MITAppInventorSetup.pkg
• Un clic droit sur l'icône de ce fichier vous permet de
forcer son ouverture et de lancer l'installation de
l'émulateur.

13. Test
• Emulateur
– Précision pour Windows:
• Une fois installé, l ’émulateur démarre
automatiquement sur Mac quand vous vous connectez
à App Inventor.
• Il faut le démarrer en « lançant » l’émulateur avant.
– Double-cliquer sur l’icône de l’émulateur:

14. Test
• Emulateur
– Une fois l’émulateur installé
– Depuis l’interface d’App Inventor sélectionner « Connecte »
• Puis « Emulateur » dans le menu qui apparaît.
• L’émulateur démarre et un smartphone s’affiche sur
votre écran et lance votre application que vous pouvez
tester.

15. Exemple
• Galerie d’applications
– L’environnement App Inventor se veut participatif.
Chacun peut publier ses applications pour que
d’autres puissent les utiliser, les comprendre, ou
encore pour les modifier/améliorer.
– Vous pouvez récupérer un exemple plus complet
d’application de calcul d’IMC à partir de la galerie.

16. Exemple
• Galerie d’applications
– Faites une recherche avec « lmoccozet »
– Vous pouvez la récupérer dans vos projets, la tester et la modifier.
– Vous trouverez un second exemple d’application avec image et son.