Projet | Mini Projet - App Inventor | Bouton & Label

Contexte

Nous construisons notre première application à destination d'une tablette ou smartphone Android. Il s'agit de placer un bouton et d'y associer une action.

Le site App Inventor supporte un éditeur graphique pour la conception d'application à destination de ce matériel. Consulter cette notice si nécessaire.

Préparation de la tablette

Un compte Play Store est nécessaire pour y charger l'application QR Droid ou équivalente. Cette application nous servira à importer notre interface sur la tablette en flashant son tag.
On utilisera pour cela l'identificateur et le mot de passe du compte de la tablette à disposition. Exemple :

galaxy.tab.sin4 et galaxysin ou galaxysin4 pour la tablette SIN n°4.
galaxy.tab.mps2 et galaxymps ou galaxymps2 pour la tablette MPS n°2

Nous utiliserons également l'application MIT AI2 Companion disponible sur Play Store à laquelle nous connecterons le site App Inventor via son menu connect, pendant la construction même de l'application.

Les étapes suivantes sont tout d'abord requises. Celles précédées d'une croix ne sont pas nécessaires sur un réseau sans proxy.

Commuter la liaison Wifi via le menu paramètre
Réaliser un appui long sur la borne radio, SSID Wifi-T203.
Valider Modifier config. réseau
Afficher les options avancées
Saisir 10.144.35.246 pour le nom de l'hôte proxy
Saisir 3128 pour le port du proxy
Installer enfin l'application QR Droid

Connexion au site App Inventor

Pour utiliser le site App Inventor, un compte Google - ouvert en 2 minutes - est nécessaire.

Se connecter à son compte personnel Google ou l'instaurer.
Aller sur la page web App Inventor et se connecter via le compte Google.

Dessin de l'interface avec Designer

Il s'agit de construire à l'aide d'un ordinateur, sur le site d'App Inventor, une interface incluant un bouton et un texte. Le texte sera modifié par l'appui sur le bouton par la suite.

Créer un nouveau projet et le nommer.
Déposer un bouton par glisser depuis la palette à gauche jusqu'au viewer au centre de la fenêtre App Inventor Designer. Voir ci-contre.
Cliquer sur le bouton et définir le nom de ce composant - rename - et sa propriété Text.
Ajouter un Label, composant nommé Label1 et affichant le texte : eteint.

Comportement de l'interface avec Blocks

Nous ajoutons une interaction entre le bouton et le label.

Cliquer sur Blocks - en haut à droite puis ajouter le gestionnaire d'évènement OnButton.Click. Voir ci-contre.
Insérer la méthode Set Label1.Text dans le gestionnaire d'évènement onButton.Click. Voir ci-contre.
Ajouter le texte en marche qui devra s'afficher lors de l'appui sur le bouton. Voir ci-contre.

Essai de l'application

Nous établissons la communication entre ordinateur et tablette. On s'assure ainsi sur la tablette que le label change à l'appui sur la bouton.

Charger dans la tablette l'application MIT AI2 Companion disponible au téléchargement sur Play Store. La lancer.
Sous App Inventor, lancer la connexion via le menu Connect | AI Companion.
Scanner le QR Code avec QR Droid.
L'application est maintenant visible sur le smartphone! Tester.

Amélioration de l'application

On envisage ici des ajouts à notre application. Quelques idées :

Ajouter un bouton afin de replacer le label à sa valeur initiale : eteint
Remplacer le texte du bouton par une image trouvée sur internet (voir propriété Image) et chargée sur Designer. Une image au format 64x64 pixels environ suffira.
Concevoir une application comportant un bouton et un label. Le label qui n'affiche que 2 textes, change alternativement à chaque appui. Pour cela nous pourrons utiliser le puzzle ci-contre.
Concevoir une application avec un seul bouton dont l'image change alternativement à chaque appui. Cette image indique la fonction que le bouton va exécuter : ON ou OFF.