APP INVENTOR 2 - ac-orleans-tours.fr · 2019. 12. 11. · - On clique sur « Construire » puis sur...

1

APP INVENTOR 2

EN PHYSIQUE-CHIMIE

CRÉER DES APPLICATIONS ANDROID

1ère version

Jean-François THULLIER – Novembre 2018

2

SOMMAIRE

Introduction .......................................................................................... 3

Partie A : Découverte et prise en main d’APP INVENTOR 2 ....... 5 I – Créer une application qui fait parler le Smartphone quand on le secoue

1) Lui faire dire « Bonjour » ............................................................................................... 6

2) Lui faire dire une phrase de son choix ........................................................................... 8

II – Créer une application qui transforme un smiley triste en un joyeux par un simple clic...... 9

III – Créer une application qui fait déplacer une balle avec son doigt ..................................... 10

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

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

VI – Créer une application qui compte le nombre de clics que l’on fait sur un écran et qui remet

à zéro le compteur quand on fait un appui « long » ................................................................. 14

VII – 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 » .......................................................................................... 17

Partie B : Applications en physique-chimie .................................... 20 I – Calculer une masse molaire (seconde bac pro) ................................................................... 21

II – Comment un son se propage-t-il ? (cycle terminal bac pro) .............................................. 23

Annexes ............................................................................................... 25 Annexe 1 : algorithme et formation par compétences .............................................................. 26

Annexe 2 : Rappel des QR codes liés aux vidéos des applications .......................................... 27

Bibliographie – Webographie ........................................................... 28

3

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 comme

avec Scratch pour former une application. La prise en main est rapide par des élèves,

notamment par ceux qui ont été initiés à Scratch.

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.

Pour se connecter :

- Sur un ordinateur :

http://ai2.appinventor.mit.edu

- Sur un Smartphone ou une tablette : télécharger l’application « MIT AI2 Companion »

sur Google Play :

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=fr

- 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

Premières étapes :

- 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 : bonjour) puis OK :

http://ai2.appinventor.mit.edu/

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=fr

http://appinventor.mit.edu/explore/ai2/windows.html

http://ai2.appinventor.mit.edu/

4

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

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

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être

des

propriétés

Zone des blocs :

du même genre

que Scratch

Zone qui apparaît

après avoir choisi

un bloc : on n’a

plus qu’à « glisser »

son choix dans la

zone de travail

Zone de travail

5

PARTIE A :

DÉCOUVERTE ET

PRISE EN MAIN

D’APP INVENTOR 2

6

I – Créer une application qui fait parler le Smartphone quand on le secoue

1) Lui faire dire « Bonjour »

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

« Bonjour » 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 glisser

dans la zone de travail.

- Cliquer sur Texte_à_parole1 dans la zone des blocs et faire glisser


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

7

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

code et un QR code.

- Sur le Smartphone, on lance l’application « MIT AI2 Companion » et on entre soit le

code à 6 caractères, soit on scan le QR code.

- On peut alors tester l’application et vérifier que quand le Smartphone est secoué, il dit

« Bonjour ».

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 scan 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 ».

Pour voir la vidéo correspondante :

8

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 peut saisir « saisir votre texte ici » dans Texte et le faire

aligner en sélectionnant « Centre : 1 » dans alignement texte. On efface également le texte dans

Nuances.

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.


9

II – Créer une application qui transforme un smiley triste en un joyeux par un simple clic

On trouvera deux smileys sur internet. Par exemple :

- 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 ».


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


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


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


précédemment.


https://www.pleinchamp.com/actualites-generales/actualites/bientot-

un-smiley-qui-rit-ou-qui-pleure-a-l-entree-des-restaurants

https://www.pleinchamp.com/actualites-generales/actualites/bientot-un-smiley-qui-rit-ou-qui-pleure-a-l-entree-des-restaurants

https://www.pleinchamp.com/actualites-generales/actualites/bientot-un-smiley-qui-rit-ou-qui-pleure-a-l-entree-des-restaurants

10

III – Créer une application qui fait déplacer une balle avec son doigt



« 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 ».

- 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).


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


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


11

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



« Screen1 ».



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


précédemment.


12

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



« Screen1 ».


- 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).




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



- Recliquer sur Cadre1 dans la zone des blocs et imbriquer

dans le bloc précédent.

13

On obtient alors :

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


précédemment.


14

VI – Créer une application qui compte le nombre de clics que l’on fait sur un écran et qui

remet à zéro le compteur quand on fait un appui « long »


- Dans la palette, on choisit « Interface utilisateur » et on fait glisser un « Bouton » dans

le « Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Bouton1 :

o Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Bouton1 »

par « Cliquez ici » dans Texte.

o Si on veut, on peut changer la taille de police : par exemple 40 et mettre en

« Gras »

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

« Screen1 ».

- Dans la fenêtre d’exploration, cliquer sur Labe1 :

Dans la fenêtre des propriétés (à droite), on remplace « Texte pour Label1 » par « On va

compter le nombre de clics » dans Texte.

- Faire un autre « Label » et remplacer « Texte pour Label2 » par « Faire un appui long

pour remettre à zéro ».


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.


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

dans la zone de travail. Remplacer « nom » par

« compteur ».

- Cliquer sur Math dans la zone des blocs et imbriquer au bloc précédent pour

obtenir au final :

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


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

zone de travail. Sélectionner « global compteur » dans le menu déroulant.

- Cliquer sur Math dans la zone des blocs et imbriquer au bloc

précédent.



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

Remplacer « 0 » par « 1 ».

15

- Imbriquer et dans le bloc

pour obtenir au final :

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


- Cliquer sur Texte dans la zone des blocs et imbriquer au bloc précédent

pour obtenir :


travail. Saisir « Le nombre de clics est » entre les guillemets.


zone de travail. Sélectionner « global compteur » dans le menu déroulant. On pouvait

aussi cliquer droit sur le « obtenir global compteur » déjà créé et choisir « Dupliquer ».

- Joindre les deux objets créés au bloc précédent de la façon suivante :

- Réaliser l’imbrication suivante :






travail. Saisir « Remise à zéro » entre les guillemets.

- Imbriquer les deux derniers objets pour donner :

16



- Cliquer sur Math dans la zone des blocs et imbriquer au bloc précédent pour

obtenir au final :

- Réaliser l’imbrication suivante :



précédemment.


17

VI – 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 »



« Screen1 ».


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 des propriétés (à droite), on remplace « Texte pour Bouton1 » par

« Valider votre proposition » dans Texte.





- Cliquer sur 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 imbriquer

au bloc précédent pour obtenir au final :



- 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


18


zone de travail. Sélectionner « global nombre » dans le menu déroulant.

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



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

19



précédemment.


20

PARTIE B :

APPLICATIONS

EN PHYSIQUE-

CHIMIE

21

Pour l’enseignement de la physique-chimie, on va pouvoir :

- utiliser les capteurs du Smartphone ou de la tablette pour acquérir des grandeurs

physiques,

- stocker et traiter des données acquises,

- étudier et exploiter des modèles avec un outil, le Smartphone, connoté positivement par

les élèves.

I – Calculer une masse molaire (seconde bac pro)

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.



« Screen1 ».



« Calcul de la masse molaire » dans Texte.

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


- 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 ».


« Screen1 ».



« Calcul » dans Texte.

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

le « Screen1 ».



« Masse molaire en g/mol : » dans Texte.

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



Dans la fenêtre des propriétés (à droite), on efface « Texte pour Label3 » dans Texte.

22


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


23

II – Comment un son se propage-t-il ? (cycle terminal bac pro)

Objectif : appuyer sur un bouton « émission » pour l’émission d’une onde ultrasonore d’un

sonar puis appuyer sur la touche « réception » pour prévenir la réception de l’onde réfléchie par

un obstacle et faire afficher la distance de l’obstacle.



« Screen1 ».



« Calcul de la distance d’un obstacle repéré par un sonar » dans Texte.


« Screen1 ».



« émission » dans Texte.

- Faire de même pour un second bouton appelé « réception ».

- Dans la palette, on choisit « Interface utilisateur » et on fait glisser un autre « Label »



Dans la fenêtre des propriétés (à droite), on efface le « Texte pour Label2 » dans Texte.

Recréer un troisième « Label » et on remplace « Texte pour Label3 » par « mètres »

dans Texte.




- Dans la palette, on choisit « Capteurs » et on fait glisser une « Horloge » dans le

« Screen1 ».

24


Quelques explications :

- La distance s’affichera dans le « Label2 » vide.

- La vitesse de propagation d’une onde ultrasonore dans l’eau de mer est de 1 530 m/s. Il faut penser à diviser le temps par 2 (aller-retour)

et à convertir ce temps en seconde (d’où la division par 1 000 car il est calculé en ms)

On peut également améliorer le programme en insérant une photo d’un sonar en image de fond dans le mode « Designer » :

- Dans la partie « Media », charger l’image désirée.

- Dans la fenêtre d’exploration, cliquer sur Screen1 et dans la fenêtre des propriétés (à droite), dans Image de fond, sélectionner l’image

chargée.


25

ANNEXES

26

Annexe 1 : algorithme et formation par compétences

Compétences Capacités En utilisant l’algorithme (pistes de réflexion)

S’approprier Rechercher, extraire et

organiser l’information.

Extraire les informations de la situation : de

combien de variables a-t-on besoin ? Faut-il

toutes les initialiser ?

Analyser

Raisonner

Émettre une conjecture,

une hypothèse.

Proposer une méthode de

résolution, un protocole

expérimental.

Indiquer les instructions de programmation

nécessaires

Proposer un protocole expérimental

Analyser les étapes d’un algorithme

Gérer la mise à jour des variables

Gérer l’erreur après étude de résultats

incohérents ou lors de l’exécution d’un

programme

Réfléchir à l’objectif d’un algorithme

Réaliser

Choisir une méthode de

résolution, un protocole

expérimental.

Exécuter une méthode de

résolution, expérimenter,

simuler.

Rédiger un algorithme

Programmer un algorithme à l’aide d’un outil

de compilation

Valider

Contrôler la vraisemblance

d’une conjecture, d’une

hypothèse.

Critiquer un résultat,

argumenter.

Critiquer le résultat obtenu d’une

expérimentation après exécution du

programme associé

Confirmer ou infirmer une hypothèse à l’aide

de l’algorithme puis du programme associé à

l’expérimentation

Communiquer

Rendre compte d’une

démarche, d’un résultat, à

l’oral ou à l’écrit.

Renseigner les étapes de l’algorigramme et/ou

en langage naturel à l’écrit

Rendre compte des résultats d’une

expérimentation après l’exécution d’un

programme

Mener une réflexion lors du débogage d’un

programme et l’exposer à l’oral

Source : LENOIR, Jérôme et DIANA, Ludovic. Algorithme et programmation en

mathématiques & physique-chimie. Eyrolles, 2018.

27

Annexe 2 : Rappel des QR codes liés aux vidéos des applications

Dire bonjour Dire une phrase

Smiley triste en joyeux Balle qui se déplace avec le doigt

Dessiner avec son doigt Balle qui rebondit

Compter le nombre de clics Deviner un nombre entre 1

et 100

Calculer une masse molaire Sonar

28

Bibliographie – Webographie

LENOIR, Jérôme et DIANA, Ludovic. Algorithme et programmation en mathématiques &

physique-chimie. Eyrolles, 2018.

ROUILLARD José. APP Inventor 2 – Cours n° 1 [en ligne]. Disponible à l’adresse :

https://fr.calameo.com/read/000397703c5c72572fd59

TEEN-CODE. Créez votre première application mobile (Androïd) [en ligne]. Disponible à

l’adresse : https://www.youtube.com/watch?time_continue=1&v=w4_oX2t3B6g

LES COURS DU BTSSIO. Les fiches Appinventor [en ligne]. Disponible à l’adresse :

http://cours.btssio.ac-limoges.fr/cours/doku.php?id=icn:app2fiches

LABBÉ Julien. Créer des applications androïd avec MIT APP INVENTOR [en ligne].

Disponible à l’adresse : https://icn-isn-boissy.yj.fr/wp/tag/app-inventor/

https://fr.calameo.com/read/000397703c5c72572fd59

https://www.youtube.com/watch?time_continue=1&v=w4_oX2t3B6g

http://cours.btssio.ac-limoges.fr/cours/doku.php?id=icn:app2fiches

https://icn-isn-boissy.yj.fr/wp/tag/app-inventor/

APP INVENTOR 2 - ac-orleans-tours.fr · 2019. 12. 11. · - On clique sur « Construire » puis sur...

Documents

Transcript of APP INVENTOR 2 - ac-orleans-tours.fr · 2019. 12. 11. · - On clique sur « Construire » puis sur...