Tutoriel – App Inventor : La Voyante

Le design

Pour avoir accès à la fiche complète c’est par ici !

Etape 1 : Paramétrer l’écran (Screen)

Tout d’abord, occupons-nous des paramètres de l’écran en allant dans la partie Properties tout à
droite.
Nous voulons que les éléments soient alignés au centre (AlignHorizontal : center),
en haut (AlignVertical : Top) et surtout que le fond soit noir (BackgroundColor : Black).

Etape 2 : Ajouter un texte (Label)

Depuis la partie de gauche Palette/User Interface, ajoutez un label à votre application. Il servira à expliquer aux utilisateurs ce qu’ils doivent faire. Pensez à changer la couleur de votre texte avec TextColor et la taille de la police à 30.0 FontSize. Pour cela, allez dans la partie Properties tout à droite.

Etape 3 : Rajouter une image (Media)

Afin d’illustrer notre application, nous allons mettre une image sous notre texte. Pour cela rajouter une Image dans la Palette/User Interface. Il faut maintenant définir quelle image faire apparaître.
Pour cela, nous avons récupéré sur internet une image libre de droit de boule de cristal
(https://pixabay.com/fr/l-astrologie-boule-cristal-156576).

Pour mettre l’image dans votre application, cliquer dans la partie Picture puis sélectionner upload files et ajouter l’image.
Une fois téléchargé sur votre ordinateur, il faut l’importer dans votre application. Il sera nécessaire de modifier la taille de votre image, en modifiant les caractéristiques Height (hauteur) et Width (largeur), comme montré ci-contre.

Etape 4 : Rajouter l’accéléromètre (AccelerometerSensor) et le dernier Label

Dans la partie Sensors, de la Palette, prenez l’AccelerometerSensor et ajoutez-le à votre application. Il faut également rajouter un nouveau Label sous l’image, qui servira à afficher les réponses de la voyante.
Cependant, il va falloir cacher le texte : la réponse ne doit pas être visible avant d’avoir secoué le téléphone. Pour cela, il faut décocher l’option Visible dans les paramètres.
Pensez également à changer la couleur et la taille du texte.

Votre application devrait ressembler à cela :

Les composantes de votre application

 

La programmation

Maintenant la partie interface créée, passons à la programmation en allant dans la partie Blocks. Si vous ne trouvez pas un des blocs, n’hésitez pas à consulter l’annexe.

Etape 1 : Bloc initialisation

Le premier bloc à créer permet de cacher notre Label2 lors de l’initialisation de l’application.

Etape 2 : Créer une liste

Très bien ! Désormais, nous allons créer une liste de réponse que notre application pourra afficher.
Pour cela, nous allons initialiser une variable « reponse », qui regroupe une liste d’item définit.
Cliquez sur le petit carré bleu de Make à list pour rajouter un item.

Etape 2 : Créer une liste

Et pour finir, voici notre code pour faire en sorte que lorsque le téléphone est secoué, le texte 2
devient visible et choisi de façon aléatoire une des phrases de notre liste « reponse ».

Félicitation, vous n’avez plus qu’à cliquer sur le bouton Build pour récupérer votre application via un QRcode !

Aller plus loin

Voici quelques pistes de ce que vous pouvez faire avec votre application :

•  Rajouter des réponses
•  Faire dire à votre téléphone les phrases (en utilisant le Text To Speech)
• Travailler la partie graphique pour rendre l’application plus jolie

Annexe