L MENUS

AppIventor_bases.odt Page 6/7 Ressources. AppInventor Créer une interface homme machine (IHM) avec AppInventor. PROGRAMMATION DES BLOCS La partie gest...

0 downloads 243 Views 883KB Size
AppInventor Créer une interface homme machine (IHM) avec AppInventor.

Ressources.

APPINVENTOR : LES MENUS 3

2

4

1

5

10

6

8

7

9

1

Rendez-vous sur le site suivant avec votre compte Google, http://ai2.appinventor.mit/edu

2

Sélectionnez la langue Français… si vous le souhaitez.

3

Choisir nouveau projet dans le menu projet. (ATTENTION, pas d'espace, pas de nom trop long, pas d'accent et pas de caractères spéciaux !)

4

-Connecte/USB, choisissez le mode de connexion à votre matériel android. (ai2Starter doit être démarré si USB)

-Sinon, vous pouvez choisir Construire et récupérer le QRCode pour télécharger votre application via internet, une fois celle ci terminée. 5

Pour cet exemple, nous resterons sur la gestion d'un seul écran.

6

Outils disponibles pour créer ce que vous voulez : Bouton, Zone de texte… Mais également tout ce qui concerne la gestion des différentes fonctions d'un matériel android, Bluetooth, Caméra, Sms, Accéléromètre, Appel téléphonique, Stockage...

7

Zone d'aperçu du design de l'application. On y positionne tous les éléments du menu . 6

8

Outils de mise en forme : Gras, Images de fond, Nom de l'élément...

AppIventor_bases.odt

Page 1/7

AppInventor Créer une interface homme machine (IHM) avec AppInventor.

Ressources.

9 Zone des composants : Les boutons, zones de texte… que contient l'application. 10 Affichage DESIGNER pour dessiner l'application et BLOCS pour programme les fonctionnement.

APPINVENTOR : MA PREMIÈRE APPLICATION A vous de jouer. C'est parti pour votre 1ère application : Réaliser une application qui affiche le mot Technologie par appui simple sur un bouton.

Par glisser/déposer, ajoutez un Label sur le haut de l’écran de la tablette. Il se rajoute automatiquement dans la colonne Composants. Et il est modifiable dans la colonne Propriétés

Modifiez le noms et les propriétés pour obtenir ça :

Ajoutez un bouton, nommez le bouton_affichage et un texte « Afficher ». Ajoutez un Label, nommez le zone_a_afficher, avec un texte « Technologie »

AppIventor_bases.odt

Page 2/7

AppInventor Créer une interface homme machine (IHM) avec AppInventor.

PROGRAMMATION

Ressources.

DES BLOCS

Voilà, la partie est terminée. Nous allons maintenant programmer le comportement de chaque élément. Cliquez sur le mode blocs : Cette nouvelle fenêtre va vous permettre de programmer chaque éléments à la « façon » Blockly.

Lorsque vous sélectionnez un élément présent dans la partie Design, un menu automatique apparaît et vous propose des fonctions de programmation. Par glisser/déposer réalisez votre programme.

AppIventor_bases.odt

Page 3/7

AppInventor Créer une interface homme machine (IHM) avec AppInventor.

Ressources.

TEST DE L'APPLICATION Testez votre application, soit en mode direct USB à l'aide du compagnon et USB

Soit par Construire le QrCode

Soit à l'aide de l'émulateur

AppIventor_bases.odt

Page 4/7

AppInventor Créer une interface homme machine (IHM) avec AppInventor.

CONNEXION

PAR

Ressources.

BLUETOOTH

Dans cette partie nous allons voir comment créer une application pour se connecter à n'importe quel matériel Bluetooth, dès lors qu'il à été reconnu (appairé) par le système android et que le mode Bluetooth de l'appareil est démarré. Créer 2 boutons, un pour la connexion et l'autre pour la déconnexion. Nommez les respectivement, Bouton_connecter, Bouton_Déconnecter. Ajoutez un client Bluetooth du menu Connectivité.

Ainsi qu'un notificateur qui nous renseignera sur l'état de la connexion.

PROGRAMMATION

DES BLOCS

La méthode est standard et toujours la même. (cette partie peut être fournie aux élèves.) Lorsque l'on appui sur le bouton Connecter, on affiche la liste des appareils bluetooth susceptibles d'être connectés. (pour repérer d'où est issu le bloc de programmation, regardez l'intitulé du 1 er élément.)

Une fois l'appareil sélectionné,on affiche (à l'aide du notificateur) l'état de la connexion.

Lorsque l'on appui sur le bouton Déconnecter, on déconnecte l'appareil qui était connecté et on ferme l'application.

AppIventor_bases.odt

Page 5/7

AppInventor Créer une interface homme machine (IHM) avec AppInventor.

ENVOI D'INFORMATION

PAR

BLUETOOTH. « POUR PILOTER

Ressources. UNE CARTE ARDUINO

» ARDUINO BT)

Vous êtes devenus des AS d'AppInventor, alors essayons maintenant de « piloter » une carte arduino à l'aide d'une application android.

Le but, réaliser une interface complète pour commander un robot à base d'arduino. Avec un module bluetooth HC-06 et 2 moteurs CC. La partie arduino est décrite dans le document Arduino_Bluetooth_Blocklyarduino.odt.

DESIGN

DE L'INTERFACE

On veut obtenir une interface de ce type.

Les boutons de direction sont justes remplacés par des images. (dossier /AppInventor/images/)

AppIventor_bases.odt

Page 6/7

AppInventor Créer une interface homme machine (IHM) avec AppInventor.

PROGRAMMATION

DES

Ressources.

BLOCS

La partie gestion du bluetooth est identique à celle vue précédemment.

La partie envoi d'information doit correspondre avec la partie BlocklyArduino de la carte Arduino.

AppIventor_bases.odt

Page 7/7