App Inventor

Calcul de l’IMC

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.

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.

Interface

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

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

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

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

Test

• Deux options– Sur votre smartphone par le Wifi– Sur votre ordinateur par l’émulateur (programme

qui « simule » un smartphone sur votre ordinateur).

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.

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

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.

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.

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:

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.

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.

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.