OBJETS CONNECTES ACTIVITE : Créer des Applications ANDROID avec l’APP INVENTOR du MIT SNT

INTRODUCTION

APP INVENTOR 2 pour Androïd est un IDE (environnement de développement intégré) qui permet la création d'applications destinées à des systèmes équipés de plateformes Androïd (Smartphones ou tablettes).Il est basé sur l’assemblage de blocs : on manipule des « briques » et on les agence pour former une application. La prise en main est rapide par des élèves.Il a été développé par Google : il vous faudra donc un compte gmail pour l’utiliser. Il est actuellement géré par le MIT (Massachusetts Institute of Technology) et reste gratuit. Il fonctionne en mode cloud : des temps de latence peuvent être assez longs.

Etape 1 : - Télécharger et installer l’application « MIT AI2 Companion » sur votre téléphone (ou votre

tablette) à partir de Google Play Store https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=fr

Etape 2 : - Connecter votre ordinateur et votre téléphone sur le même réseau Wifi ou activer le

partage de connexion entre votre téléphone et votre ordinateur

Remarque : On peut éventuellement télécharger un émulateur (AI Starter) si on ne veut pas utiliser un Smartphone ou une tablette : http://appinventor.mit.edu/explore/ai2/windows.html

Etape 3 : - Accéder au site http://ai2.appinventor.mit.edu

- Se connecter avec son adresse gmail- Il est possible de changer la langue de l’interface :

- Cliquer sur « Commencer nouveau projet » :

- Il faut toujours donner un nom (ex : Parle moi) puis OK :

1/15

Parle moi

On obtient la fenêtre suivante en mode « Designer » :

Palette des objets disponibles : On « glisse » l’objet sur la zone de travail (Screen1).

Screen1 (zone de travail) : Elle représente ce qui sera affiché sur l'écran du Smartphone

Fenêtre d'exploration : Un clic sur un des objets permet en utilisant la fenêtre des propriétés (à droite) de modifier les propriétés de l'objet.

Fenêtredes

propriétés

On obtient la fenêtre suivante en mode « Blocs » :

Zone des blocs : du même genre que Scratch

2/15

Zone qui apparaît Zone de travailaprès avoir choisiun bloc : on n’aplus qu’à « glisser »

son choixdans la

zone de travail

PARTIE A - DÉCOUVERTE ET PRISE EN MAIN D’APP INVENTOR 2

1. Créer une application qui fait parler le Smartphone quand on le secoue

1.1. Lui faire dire « Arrête de me secouer »Après avoir donné un nom au projet et s’être mis en mode « Designer » :- Dans la palette, on choisit « Interface utilisateur » et on fait glisser un « Label » dans le «

Screen1 ».- Dans la fenêtre d’exploration, cliquer sur Label1 :

o Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Label1 » par « Arrête de me secouer » dans Texte.

o Si on veut, on peut changer la taille de police : par exemple 40 et mettre en « Gras »- Dans la fenêtre d’exploration, cliquer sur Screen1 :

On peut aligner le texte au centre de l’écran. Pour cela on choisit « Centrer : 3 » dans Alignement horizontal et « Centre : 2 » dans Alignement vertical.

- Dans la palette :o Choisir « Capteurs » puis « Accéléromètre ». Le faire glisser dans le « Screen1 ». Il

apparaît en dessous de l’écran.o Choisir « Média » puis « Texte à parole ». Le faire glisser également dans le « Screen1 ».

On se met ensuite en mode « Bloc » :

- Cliquer sur Accéléromètre1 dans la zone des blocs et faire glisserdans la zone de travail.

- Cliquersur Texte_à_parole1 dans la zone des blocs et faire glisserdans la zone de travail.

- Cliquer sur Label1 dans la zone des blocs et faire glisser dans la zone de travail

- Imbriquer les 3 blocs de la façon suivante :

L’application est désormais terminée.

Pour voir ce que cela donne sur le Smartphone :

- On clique sur « Connecte » puis sur « Compagnon AI ». Une fenêtre apparaît avec un code et un QR code.

3/15

- Sur le Smartphone, on lance l’application « MIT AI2 Companion » et on entre soit le code à 6 caractères, soit on scanne le QR code.

- On peut alors tester l’application et vérifier que quand le Smartphone est secoué, il dit« Arrête de me secouer».

4/15

Pour créer l’application et l’enregistrer sur son Smartphone :- On clique sur « Construire » puis sur « App (Donnez le code QR pour fichier .apk) » :

- Attendre que la barcode soit à 100 % puis une fenêtre apparaît :

- Sur le Smartphone, on lance l’application « MIT AI2 Companion » et on scanne le QR code. Patienter un peu et cliquer sur « INSTALLER » puis sur « OK » ou « OUVRIR ».L’application aura une icône dans le menu des applications du Smartphone.

Remarque : si on a installé AI Starter (émulateur) sur son ordinateur, on peut visualiser de la même façon en sélectionnant « Emulateur » dans « Connecte ».

1.2. Lui faire dire une phrase de son choix

On reprend le programme précédent et dans le mode « Designer », on efface le « Label1 » en le sélectionnant dans la fenêtre d’exploration puis en cliquant sur « Supprimer ».Dans la palette, on choisit « Interface utilisateur » et on fait glisser cette fois une « zone de texte » dans le « Screen1 ».Dans la fenêtre des propriétés, on remplace « Nuances pour Zone de Texte 1 » par « saisir votre texte ici » dans Nuance et le faire aligner en sélectionnant « Centre : 1 » dans alignement texte. On efface « Texte pour Zone de Texte 1 » dans Texte.

Dans le mode « Blocs », a disparu car nous avons supprimé le

« Label1 ». A sa place, on insère en sélectionnant Zone_de_texte1 dans la zone des blocs.

On obtient alors :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

5/15

2. Créer une application qui vous dit bonjour ou prend un selfie quand on appuie sur un bouton

- Commencer un nouveau projet et se mettre en mode « Designer ».- Dans la fenêtre d’exploration, cliquer sur Screen1 :

On peut aligner le texte au centre de l’écran. Pour cela on choisit « Centrer : 3 » dans Alignement horizontal et « Centre : 2 » dans Alignement vertical.

- Faire glisser une « zone de Texte » dans le « Screen1 »- Dans la fenêtre d’exploration, cliquer sur « zone de Texte » et la renommer « Zone

saisie Prénom » o Dans les propriétés, remplacer « Nuance pour Zone de texte 1 » par « Saisir votre

Prénom »- Dans la palette « interface utilisateur », faire glisser 2 « boutons » dans le « Screen1 »

o Dans la fenêtre d’exploration, cliquer sur « Bouton_1 » et le renommer « Bouton Bonjour »

o Dans les propriétés (à droite) choisir une couleur de fond et remplacer « Texte pour bouton 1 » par « Bonjour »

o Dans la fenêtre d’exploration, cliquer sur « Bouton_2 » et le renommer « Bouton Photo »

o Dans les propriétés (à droite) choisir une couleur de fond et remplacer « Texte pour bouton 2 » par « Photo »

- Faire glisser une « image » dans le « Screen1 »o Dans les propriétés, modifier l’angle de rotation de 0 à – 90 et cocher

« Redimensionner image pour ajustement »- Dans la palette « Média », faire glisser un « Texte à paroles » , un « lecteur » et une

« caméra » dans le « Screen1 »

- Où trouver les différents blocs ? (Aide à la réalisation)

o Dans « Variables »  ;  ;

o Dans « Texte » ;

o Dans « Math »

o Dans « bouton Bonjour »

o Dans « bouton Photo »

o Dans « Caméra1 » ;

o Dans « Zone saisie Prénom »

o Dans « Image1 »

o Dans « Lecteur 1 »

o Dans « Texte à paroles »

6/15

- Créer et imbriquer les blocs de la façon suivante :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

Pour aller plus loin….voir les parties suivantes

7/15

PARTIE C – QUELQUES APPLICATIONS GRAPHIQUES

1. Créer une application qui transforme un smiley triste en un joyeux par un simple clic On trouvera deux smileys sur internet. Par exemple :

https://www.midilibre.fr/2014/09/08/du-vert-au-rouge-un-smiley-qui-renseigne-sur-l-hygiene-des-restaurants,1048154.php

- Commencer un nouveau projet et se mettre en mode « Designer ».- Dans la partie « Media », charger les deux images.

- Dans la palette, on choisit « Dessin et animation » et on fait glisser un « Cadre » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Cadre1 :o Dans la fenêtre des propriétés, on choisit « Remplir parent » pour Hauteur. o De même pour Largeur.

- Toujours dans « Dessin et animation », on fait glisser une « Image Lutin » dans le « Screen1 ».- Dans la fenêtre d’exploration, cliquer sur Image_lutin1 :

Dans la fenêtre des propriétés, à la rubrique « Image », cliquer sur «Aucun » et sélectionner l’image triste (ici : triste.jpg).

- Si besoin, recadrer l’image dans le « Screen1 ».

On se met ensuite en mode « Bloc » :- Cliquer sur Image_lutin1 dans la zone des blocs et faire glisser

dans la zone de travail.- Recliquer sur Image_lutin1 dans la zone des blocs et faire glisser

dans la zone de travail.

- Cliquer sur Texte dans la zone des blocs et faire glisser dans la zone de

travail. Saisir le nom de l’image joyeuse entre les guillemets (ici : )- Imbriquer les 3 blocs de la façon suivante :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

Pour voir la vidéo correspondante :

8/15

2. Créer une application qui fait déplacer une balle avec son doigt

a. Commencer un nouveau projet et se mettre en mode « Designer ».b. Dans la palette, on choisit « Dessin et animation » et on fait glisser un « Cadre » dans le «

Screen1 ».c. Comme précédemment, choisir « Remplir parent » pour Hauteur et Largeur.d. Toujours dans « Dessin et animation », on fait glisser une « Balle » dans le « Screen1 ».e. Dans la fenêtre d’exploration, cliquer sur Balle1 :

Dans la fenêtre des propriétés, on peut modifier le « rayon » de la balle (par exemple : remplacer 5 par 15).

On se met ensuite en mode « Bloc » :- Cliquer sur Balle1 dans la zone des blocs et faire glisser

dans la zone de travail.

- Recliquer sur Balle1 dans la zone des blocs et imbriquer dans le bloc précédent. On obtient alors :

- Cliquer sur Xactuel et faire glisser « Obtenir Xactuel » au niveau du « x ».

- Faire de même pour Yactuel pour obtenir au final :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

Pour voir la vidéo correspondante :

9/15

3. Créer une application qui permet de dessiner sur l’écran avec son doigt

- Commencer un nouveau projet et se mettre en mode « Designer ».- Dans la palette, on choisit « Dessin et animation » et on fait glisser un « Cadre » dans le «

Screen1 ».- Comme précédemment, choisir « Remplir parent » pour Hauteur et Largeur.

On se met ensuite en mode « Bloc » :- Cliquer sur Cadre1 dans la zone des blocs et faire glisser

dans la zone de travail.

- Recliquer sur Cadre1 dans la zone des blocs et imbriquer dans le bloc précédent.

On obtient alors :

- Sur le même principe que précédemment, cliquer sur X précédent et faire glisser« obtenir X précédent » au niveau du « x1 ». Faire de même pour Y précédent au niveau du « y1 », Xactuel au niveau du « x2 » et Yactuel au niveau du « y2 » pour obtenir au final :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

Pour voir la vidéo correspondante :

10/15

4. Créer une application qui fait lancer une balle qui rebondit sur les bords de l’écran

- Commencer un nouveau projet et se mettre en mode « Designer ».- Dans la palette, on choisit « Dessin et animation » et on fait glisser un « Cadre » dans le « Screen1

».- Comme précédemment, choisir « Remplir parent » pour Hauteur et Largeur.- Toujours dans « Dessin et animation », on fait glisser une « Balle » dans le « Screen1 ». Comme

précédemment, on peut modifier le « rayon » de la balle (par exemple : remplacer 5 par 15).

On se met ensuite en mode « Bloc » :- Cliquer sur Balle1 dans la zone des blocs et faire glisser

dans la zone de travail.

- Recliquer à chaque fois sur Balle1 dans la zone des blocs et imbriquer

et dans le bloc précédent.

On obtient alors :

- Sur le même principe que précédemment, cliquer sur vitesse et faire glisser « obtenir vitesse précédent » au niveau du « Vitesse à ». Faire de même pour orientation pour obtenir au final :

- Cliquer sur Balle1 dans la zone des blocs et faire glisser

dans la zone de travail.

- Recliquer sur Cadre1 dans la zone des blocs et imbriquer

dans le bloc précédent.

On obtient alors :

11/15

- Sur le même principe que précédemment, cliquer sur bord et faire glisser « obtenir bord » au niveau du « bord » de façon à obtenir :

Au final, en mode « Bloc », on a :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

Pour voir la vidéo correspondante :

PARTIE D – UN EXEMPLE D’APPLICATION EN MATHEMATIQUES

12/15

1. Créer une application qui fait trouver un nombre entre 1 et 100 grâce à des réponses du type « plus petit » et « plus grand »

- Commencer un nouveau projet et se mettre en mode « Designer ».« Dans la palette, on choisit « Interface utilisateur » et on fait glisser un « Label » dans le Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Label1 :Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Label1 » par« Trouvez un nombre entre 1 et 100 » dans Texte.

- Toujours dans la palette « Interface utilisateur », on fait glisser une « Zone de texte » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Zone_de_texte1.Dans la fenêtre des propriétés (à droite), effacer ce qui est écrit dans Nuance et Texte.« Toujours dans la palette « Interface utilisateur », on fait glisser un « Bouton » dans le Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Bouton1 :Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Bouton1 » par Valider votre proposition » dans Texte.

- Dans la fenêtre d’exploration, cliquer sur Screen1 :On peut aligner les 3 objets créés au centre de l’écran. Pour cela on choisit « Centrer : 3 » dans Alignement horizontal et « Centre : 2 » dans Alignement vertical.

On se met ensuite en mode « Bloc » :- Cliquersur Variables dans la zone des blocs et faire glisser

Dans la zone de travail. Remplacer « nom » par « nombre ».

- Cliquer sur Math dans la zone des blocs et imbriquerau bloc précédent pour obtenir au final :

- Cliquer sur Bouton1 dans la zone des blocs et faire glisser dans la zone de travail.

- Cliquer sur Contrôle dans la zone des blocs et faire glisser dans la zone de travail.

- Cliquer sur Math dans la zone des blocs et faire glisser dans la zone de travail. Sélectionner « > » dans le menu déroulant.

- Cliquer sur Zone_de_texte1 dans la zone des blocs et faire glisser dans la zone de travail.

- Cliquer sur Variables dans la zone des blocs et faire glisser dans la zone de travail. Sélectionner « global nombre » dans le menu déroulant.

- Imbriquer les derniers objets de la façon suivante :

- Cliquer sur Label1 dans la zone des blocs et faire glisser dans la zone de travail.

13/15

- Cliquer sur Texte dans la zone des blocs et imbriquer dans l’objet précédent. Saisir « trop grand » entre les guillemets pour obtenir au final :

- Imbriquer ce dernier au niveau du alors du bloc précédent pour obtenir au final :

- Effectuer les mêmes démarches (on pourra cliquer droit et dupliquer) pour obtenir les blocs suivants :

- Imbriquer les 3 blocs « si » dans l’objet de départ de la façon suivante :

Au final, en mode « Bloc », on a :

L’application est terminée. On la teste (« Connecte ») ou on l’installe (« Construire ») comme précédemment.

Pour voir la vidéo correspondante :

PARTIE E – UN EXEMPLE D’APPLICATION EN PHYSIQUE-CHIMIE

14/15

1. Calculer une masse molaire

Objectif : Saisir le nombre d’atomes de carbone, d’hydrogène et d’oxygène d’une molécule et faire afficher la masse molaire de celle-ci.

- Commencer un nouveau projet et se mettre en mode « Designer ».

- Dans la palette, on choisit « Interface utilisateur » et on fait glisser un « Label » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Label1 : Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Label1 » par « Calcul de la masse molaire » dans Texte.

- Toujours dans la palette « Interface utilisateur », on fait glisser trois « Zone de texte » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Zone_de_texte1 : Dans la fenêtre des propriétés (à droite), on saisit « nombre d’atomes de carbone » dans Texte. On efface le texte dans Nuance. Dans Largeur, on choisit « Remplir parent ».

- Faire de même pour Zone_de_texte2 pour « nombre d’atomes d’hydrogène » et Zone_de_texte3 pour « nombre d’atome d’oxygène ».

- Toujours dans la palette « Interface utilisateur », on fait glisser un « Bouton » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Bouton1 : Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Bouton1 » par « Calcul » dans Texte.

- Toujours dans la palette « Interface utilisateur », on fait glisser un autre « Label » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Label2 : Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Label2 » par « Masse molaire en g/mol : » dans Texte.

- Toujours dans la palette « Interface utilisateur », on fait glisser un dernier « Label » dans le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Label3 :Dans la fenêtre des propriétés (à droite), on efface « Texte pour Label3 » dans Texte.

On se met ensuite en mode « Bloc » :

La masse molaire s’affichera dans le « Label3 » vide.

Pour voir la vidéo correspondante :

15/15