Etape 2 - Apprenons à construire une première application Android

Phase 1 : déposer les composants sur l'interface

1-1 Configurer l'interface comme indiqué dans l'image ci-dessous :

1-2 Glisser-déposer les composants présentés ci-dessous depuis la palette sur l'interface :

Phase 2 : renommer les composants pour faciliter la programmation

2-1 Renommer les composants comme indiqué ci-dessous :

Phase 3 : importer les images

3-1 Importer les fichiers images disponibles dans T/travail/technologiePC/4ème/Activité 2-4/

Phase 4 : modifier les propriétés de l'écran et des composants

4-1 Modifier les propriétés listées ci-dessous : (les autres propriétés ne sont pas modifiées)

Screen1

Label_question

Label_couleur

Label_resultat

Arrangement_horizontal1

Bouton_couleur

Bouton_reponse

Alignement horizontal : Centrer:3 Alignement vertical : Centre:2 Image de fond : Vertical_flag_UK480.png

Taille de police : 35 Texte : What is the name of this color ? Alignement texte : centre:1

Taille de police : 50 Hauteur : 200 pixels Largeur : 400 pixels Texte : ? Alignement texte : centre:1

Taille de police : 28 Alignement texte : centre:1 Visible :

Alignement horizontal : Centrer:3 Alignement vertical : Centre:2 Hauteur : 200 pixels Largeur : 80 percent

Hauteur : 150 pixels Image : boutoncouleur.png Texte : "aucun"

Hauteur : 150 pixels Image : boutonreponset.png Texte : "aucun"

 

Phase 5 : créer les variables utiles au programme

Dans la partie programmation (bouton    en haut à droite de Mitt App Inventor)

5-1 Créer la variable liste_couleurs comme une liste contenant 7 noms de couleurs en construisant le programme bloc ci-dessous :

5-2 Créer la variable couleurs comme une liste contenant les codes RGB des 7 couleurs en construisant le programme bloc ci-dessous :

5-3 Créer la variable numero_couleur contenant le numéro (entier entre 1 et 7) de la couleur choisie aléatoirement en construisant le programme bloc ci-dessous :

Phase 6 : programmer l'initialisation de l'écran

6-1 Construire le programme bloc ci-dessous permettant de :

- colorer le composant Label_couleur avec la couleur choisie aléatoirement,

- écrire ? dans le composant Label_couleur.

Phase 7 : programmer le bouton choix des couleurs

7-1 Construire le programme bloc ci-dessous permettant, lorsque le composant Bouton_couleur est cliqué sur l'écran de la tablette, de :

- choisir une couleur aléatoirement (son numéro)

- colorer le composant Label_couleur avec la couleur choisie aléatoirement,

- écrire ? dans le composant Label_couleur,

- rendre invisible le composant Label_resultat.

Phase 8 : programmer le bouton permettant de donner sa réponse

8-1 Construire le programme bloc ci-dessous permettant, lorsque le composant Bouton_reponse est cliqué sur l'écran de la tablette, de :

- configurer la reconnaissance vocale en langue anglaise,

- lancer la reconnaissance vocale pour obtenir la réponse orale de l'utilisateur.

Phase 9 : programmer le traitement du résultat de la reconnaissance vocale

9-1 Construire le programme bloc ci-dessous permettant, lorsque la reconnaissance vocale vient d'obtenir une réponse de l'utilisateur, de :

- remplacer le point d'interrogation écrit sur le composant Label_couleur par la réponse de l'utilisateur,

- rendre visible le composant Label_resultat pour afficher un message "bonne ou mauvaise réponse",

- tester la réponse de l'utilisateur en la comparant avec le nom de la couleur,

si la réponse correspond, "Right answer, try another color" est écrit en vert dans le composant Label_resultat,

si la réponse ne correspond pas, "Wrong answer, try again" est écrit en rouge dans le composant Label_resultat.

Phase 10 : définir l'image de l'icône de l'application

10-1 Affecter l'image iconeappli.png comme image de l'icône de l'application dans les propriétés du projet (bouton ).