Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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