Public
Participants
Nombre d'animateurs
Niveau
Préparation
Activité
Description
–
Objectifs
Après une brève introduction à App Inventor, c’est l’une des premières fiches que vous pouvez donner aux participants qui débutent à la création d’application car cette fiche est très simple à utiliser.
Elle est idéale pour un public intéressé par la création d’application pratique. On peut d’ailleurs tout à fait imaginer une séance dont le but est de créer ce type d’application, en ouvrant la séance par cette fiche.
Compétences travaillées
– Variables
– TextBox
– YandexTranslate
Pré-requis pour le public
– Connaître les base d’AppInventor (avoir fait la fiche TalkToMe)
– Avoir un appareil Androïd (attention, certaines tablettes ne sont pas équipées de capteurs)
– Avoir un compte Gmail
Matériel
– Ordinateur avec une connexion Internet
– Smartphone ou tablette sous Androïd
Contenus utilisés
App Inventor : http://ai2.appinventor.mit.edu/
Le design
Vous pouvez télécharger la fiche activité ici
Étape 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 maintenant que les éléments soient alignés au centre (AlignHorizontal : center), en haut (AlignVertical : Top).
Étape 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. Par exemple écrivez : « Entrez votre texte en français ici ». Pensez à changer la taille de la police à 20.0 (FontSize).
Étape 3 : Ajouter deux zones de texte (TextBox)
Depuis la partie gauche Palette/User Interface, ajouter deux zones de textes TextBox à votre
application.
- Dans la première, l’utilisateur entrera la phrase à traduire.
- La seconde affichera la traduction une fois celle-ci disponible. Dans la deuxième zone de texte, décochez « Enabled » pour empêcher l’utilisateur d’écrire dedans. Au deux zones de texte, changer Height à 100 px.
Étape 4 : Ajouter un bouton cliquable (Button)
Depuis la partie gauche Palette/User Interface, ajouter un bouton cliquable (Button) à votre application. Lorsque l’utilisateur appuiera dessus, la phrase qu’il vient d’entrer sera
traduite. Ajouter un texte au bouton.
Étape 5 : Ajouter une étiquette (Label)
Depuis la partie gauche Palette/Media, ajoutez un module de traduction (YandexTranslate). Il s’agit d’un
des modules qui n’apparaîtra pas dans la fenêtre de l’application mais directement en bas.
Votre application devrait ressembler à cela : 
Les composantes de votre application : 
La programmation
Nous allons maintenant programmer la traduction. Rendez-vous dans la partie Blocks.
Si vous ne trouvez pas un des blocs utiles, n’hésitez pas à consulter l’annexe.
Étape 1 : Envoyer le texte au programme de traduction
Nous allons créer le script qui permet de traduire le texte, pour cela créez le bloc suivant: 
Quand le bouton est cliqué, le programme va appeler le service Yandex qui traduira le texte. Le couple “fr-en” spécifie la langue à traduire et vers quelle langue le faire. Si vous écrivez simplement “en” le programme détectera la langue de départ. (Peut être plus long).
Étape 2 : Afficher la traduction
Une fois que la traduction est trouvée, il va bien sûr falloir l’afficher. C’est ce que fait le programme suivant:
Une fois que le programme a obtenu la traduction (GotTranslation) depuis le service Yandex, il stocke deux paramètres : responseCode qui indique si la traduction a eu lieu et translation qui récupère la traduction via “get translation” et l’affiche via le “set”.
Aller plus loin
Voici une liste (non exhaustive bien sûr) des améliorations possibles :
- Améliorer l’interface graphique.
- Faire en sorte que la personne prononce la phrase à traduire
- Le programme prononce à haute voix la phrase traduite.
Annexe
