Simuler la commande d'une
lampe avec APPINVENTOR
AppInventor, c’est quoi ?
C’est un logiciel en ligne qui permet de créer des applications pour appareils
Android (smartphone ou tablette). L’outil est gratuit et permet de développer sa
créativité et ses compétences en programmation.
Ainsi, vous pourrez réaliser vos applications, mais aussi vos objets connectés
via une carte arduino ou picaxe par exemple.
Il vous faudra obligatoirement un compte google !
Et un smartphone ou tablette Android pour tester votre
application avec l’application MIT AI2 Companion
installée
Rendez-vous sur le site suivant avec
votre compte Google
[Link]
Sélectionnez la version Français, cela
sera plus simple …
Dans le menu Projets > Commencer
nouveau projet …
4
Nom du projet par exemple : PILOT_DEL_SWITCH
Attention : pas d’espace, pas de nom trop long et pas
d’accents !
App Inventor - Appli Lampe V2 1
Notre 1ère application sera très
simple !
Elle consiste en un seul bouton
inverseur de faire apparaitre
une image d’une lampe
allumée et de revenir sur
l'affichage d'une lampe éteinte.
Affichage pour dessiner
Les composants : les l’application « Designer »
boutons, zones de textes, … ou pour programmer son
que contient notre application fonctionnement « Blocs »
Les outils disponibles
L’aperçu du design Les outils de mises en
de l’application Pour charger des
forme : Gras, centre,
images par exemple
les polices …
App Inventor - Appli Lampe V2 2
5
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
Le bandeau du
haut fera donc 15
pixel de haut et
100% de la
largeur de l’écran
Modifiez les propriétés
6
afin qu’il ressemble à
l’exemple
7
Modifiez également le nom du label en
« Titre » par exemple
Ce qui sera plus facile par la suite, plutôt
que d’avoir 15 « labels_N° » ?
App Inventor - Appli Lampe V2 3
Chargez toutes les images dans la fenêtre « Média »
8
• L’image de la lampe éteinte : lampe_off.png
• L’image de la lampe allumée : lampe_on.png
• L’image du logo de l’application : lampe_app.png
9
Avant de continuez l’application, nous
allons améliorer rapidement quelques
propriétés d’affichage : Icône de l’app,
titre, affichage de l’écran …
Toutes les propriétés sont
dans le bandeau
Propriétés de Screen1
Il est possible aussi
d’ajouter une image
« Charger fichier » qui
correspondra à l’icône de
l’application
App Inventor - Appli Lampe V2 4
10
Par glisser/déposer, ajoutez
deux images
11
Une image pour la lampe éteinte et une
pour la lampe allumée. Indiquez le fichier
image pour chacune d’elles
Une seule image sera affichée
évidement …
Il faut donc rendre non visible
l’image2
12
Décochez Visible pour l’image2
13
Pensez à renommer les composants
App Inventor - Appli Lampe V2 5
Par glisser/déposer ajoutez
un arrangement vertical et
1 Switch
14
15
Renommez le Switch par Inverseur
Dans les propriétés des boutons,
16
modifier le texte de l'inverseur par
ON/OFF
Les couleurs du
switch peuvent
être
personnalisées
App Inventor - Appli Lampe V2 6
17
Passons maintenant sur la programmation des boutons
et donc de l’affichage des images. Rendez-vous dans Blocs
Au niveau de l'inverseur :
(quand le curseur change de
position)
si la position de l'inverseur est sur
ON
Rendre visible l’image LAMPE_ON
et
Ne pas afficher l’image LAMPE_OFF
Sinon l'inverse
App Inventor - Appli Lampe V2 7
18
Il est peut être temps d’enregistrer le projet …
20
Notre application est terminée, il
faut maintenant la tester sur notre
tablette Android pour cela, menu
Connecte > Compagnon AI
Un QR Code est généré ainsi
qu’un code
21
Sur votre tablette, évidement
vous venez d’installer l’application
MIT AI2 Companion
22
Une fois sur l’application,
indiquez le code et Connect
with code
L’application se lance ensuite
automatiquement
App Inventor - Appli Lampe V2 8
23
Terminé ! Vous pouvez tester
votre application …
L’application est synchronisée avec le logiciel en
ligne. Toutes modifications sur le logiciel sont
donc immédiatement prises en compte sur la
tablette
Passons maintenant à l’installation complète de l’application
24
Pour générer l’application : Menu
Construire > App (Donner le Code QR)
25
Depuis l’application
Compagnion ou depuis
n’importe quelle application
de lecteur de QR Code,
lancez la lecture du QR code
précédemment généré depuis
le logiciel
26
Terminez en suivant les
indications d’installation …
App Inventor - Appli Lampe V2 9