Ce que vous allez faire :

Dans cette application votre téléphone va répondre à vos questions, comme le miroir de la reine. Il utilise un service de reconnaissance de la parole, déclenché lorsque l'utilisateur clique sur l'écran, Puis quand ce service renvoie le texte reconnu, votre algorithme va rechercher le "mot magique" téléphone dans le texte reconnu. s'il ne le trouve pas il répondra que vous n'avez pas dit le mot magique, s'il l'a trouvé il cherchera successivement la présence de mots clefs comme "belle" , "jeune", etc. et choisira la réponse correspondante si oui "Clara" s'il n'a trouvé aucun mot clef, la réponse sera qu'il ne sait pas.

Evènements à prendre en compte dans cette application :

Dans cette application, les évènements que vous devez prendre en compte et les actions à suivre sont les suivants :

	évènement	action
1	Click sur écran	Lancer la reconnaissance de la parole
2	Parole reconnue	Afficher le texte reconnu, Analyser son contenu pour définir la réponse Convertir la réponse en parole

Choix des mots clefs et des réponses correspondantes :

Vous pouvez choisir à votre guise les mots clefs et les réponses correspondantes.
Dans notre exemple, nous avons gardé "téléphone" comme mot magique à dire dans la phrase et les mots clefs et réponses suivantes :

mot clef	réponse
belle	Clara
jeune	Lucas
rapide	Emmanuel
dynamique	Lisa
grand	Emmanuel
vieux	Pierre
bibliothèque	Yourcenar

• attention à ne pas ajouter de blanc au début ou à la fin des mots clefs,
• attention également au fait que la même lettre en majuscule ou minuscule est traitée comme une lettre différente.

Réalisation

Ressources de départ :

Vous pouvez partir du canevas suivant dans lequel des images ont déjà été chargées : http://ai2.appinventor.mit.edu/?galleryId=5100378894630912.
ou du suivant où la partie design et le choix des composants a déjà été fait :
http://ai2.appinventor.mit.edu/?galleryId=6693064430845952.

Vidéo d'accompagnement

Design : interface utilisateur : Cliquez en haut à droite sur le bouton "Design" :

• Créez un cadre (ou frame) :
  c'est à dire une surface dans laquelle les clicks pourront être reconnus comme des évènements.
  Faites glisser un composant "cadre" (ou frame en anglais) depuis la gauche dans la fenêtre, puis définissez ses propriétés à droite :
  • couleur de fond : aucun, il doit être transparent
  • hauteur et largeur : remplir parent (pour occuper le maximum d'espace)
  
  
• Configurez "Screen1" l'écran principal
  L'écran principal s'appelle toujours Screen1 (pour le premier écran). C'est le composant de plus haut niveau, et le "parent" des composants qu'on y met.
  Vous pouvez définir :
  • le centrage horizontal et vertical des composants
  • et surtout l'image de fond.
    Dans cet exemple, nous avons préchargé deux images qui sont proposées dans la liste disponible. Vous pouvez également en importer depuis votre ordinateur. (Evitez les images de grande taille. Il est inutile de dépasser une hauteur de 640 et une largeur de 360),
  • et si vous le souhaitez, l'icone qui représentera l'application sur votre téléphone.
• un label :
  C'est à dire une zone dans laquelle on peut afficher un texte (mais qui est inactive, ou qui ne réagit pas aux clics comme une zone de texte ou un bouton).
  Glissez ce composant depuis la gauche et placez le haut dessus du cadre. Vous verrez sur l'interface utilisateur que l'endroit où va se placer ce composant est surligné (en bleu).


• un composant de reconnaissance vocale :
  Glissez ce composant depuis l'onglet des media à gauche vers l'écran du téléphone. de partie visible, mais qui fait bien aprtie de i'nterface car il permet d'interagir avec l'extérieur. Comme ce composant n'a pas de partie visible, il apparait en dessous de l
  Ce composant il n'a pas'écran dans la partie design.


• un composant de conversion de la parole en texte :
  Glissez ce composant depuis l'onglet des media à gauche vers l'écran du téléphone.
  Ce composant il n'a pas non plus de composante visible.
  Veillez à ce que ses propriétés correspondent à la langue choisie (par exemple le français)

Programmation : Passez à la programmation en cliquant en haut à droite sur "Blocs"

• Avant de commencer à coder :
  • Faites soigneusement la liste de tous les évènements que vous devrez prendre en compte (auxquels le programme doit réagir), et placez les blocs correspondant à ces évènements (event handlers) dans la fenêtre.
    Nota : Dans un grand nombre de cas, le démarrage du programme est un évènement important. On doit souvent faire des vérifications ou définir la valeur initiale de variables. Vous pouvez donc mettre cet évènement de façon systématique, même si vous ne l'utiliserez pas forcément.
  
  
  • Pour chaque évènement, écrivez en une ou quelques lignes ce qu'il doit faire.
    Si vous travaillez à deux, faites le à haute voix et vérifiez que vous êtes d'accord.
    Posez-vous réciproquement des questions.
    
  • Essayez également de dresser la liste des variables importantes de votre programme.
    Ici, la variable qu'il va falloir calculer c'est la "réponse"
    Vous pouvez initialiser cette variable, ou le faire plus tard quand vous en aurez besoin.
  
  
• Programmation évènementielle (par event handlers) :
  Toutes les scripts ou morceaux de programme de votre application commencent par un évènement (qui peut être tout simplement le démarrage de l'application : quand Screen1.Initialise). On va traiter les évènements identifiés un par un.
  • Quand cadre.touché
  • Quand reconnaissance.obtentionTexte
• Ecriture du script (ou programme) à exécuter quand le cadre est touché :
  1. faire appel au composant reconnaissance de la parole,
  2. changer l'image de fond pour que l'utilisateur se rende compte que la reconnaissnce vocale a été lancé.
  
  
  
• Ecriture du script à exécuter quand le texte est reconnu (Apres OnbtentionTexte).
  Vous pouvez le faire en plusieurs étapes, en vérifiant des résulats intermédaires. C'est toujours plus facile de trouver et corriger les erreurs quand on avance par petites étapes.
  
  Il est fortement recommandé de sauvegarder fréquemment vos projets (ça vous évitera des mésaventures).
  Il y a deux manières de le faire à l'intérieur de l'environnement de développement App Inventor :
  1) Sauvegarder point de contrôle qui fera une copie numérotée en vous laissant continuer à travailler sur le programme de même nom.
  2) Sauvegarder Sous qui vous proposera un nom de copie et continuera à travailler sous le nom de cette copie,
  Nous vous recommmandons d'utiliser le premier mode de façon très régulière, toutes les 10 à 15 mn et le second à chaque étape significative (entre quelques heures et une journée).
  Par ailleurs, vous pouvez faire des sauvegardes sur vote ordinateur, du code source .aia (depuis la page qui affiche la liste des projets) et de l'executable .apk (en option dans l'onglet build ou construire).
  
  
  • Initialisez la variable reponse (avec un texte vide ou "Rien") si vous ne l'avez pas fait plus tôt. C'est dans cette avriable que vous metrez la réponse avant de la convertir en parole,
  • affichez le résultat de reconnaissance dans le label texte : Pour ça mettez la propriété .texte à la valeur reconnue(résultat)
  • et revenez à l'image de fond d'origine pour l'écran.
• Testez le bon fonctionnement de cette première version : L'image doit changer pendant la reconnaissance de la parole, et le texte reconnu doit être affiché.


• Ensuite, codez la première partie de l'algorithme qui examine la présence du mot magique :
  • ajoutez un bloc de controle (ou de branchement conditionnel) "si" et dans ce bloc ajoutez un "sinon" en cliquant sur la roulette bleue,
  • Ajoutez la condition à l'intérieur du bloc de contrôle si/sinon pour examiner si le mot choisi (ici "téléphone") est présent dans la chaine de caractères reconnu (résultat ou result).
    Pour éviter les erreurs liées aux majuscules de début de phrase, ajoutez la conversion en majuscules des chaines de caractères à analyser par le bloc.
  • Si il a trouvé le mot, mettre dans la variable reponse "J'ai trouvé le mot magique",
  • Si non, mettre la variable reponse à : tu ne m'as pas dit lee mot magique
  
  • Enfin, après avoir terminé les tests, faites appel à la fonction du composant "teste à parole" qui dit la réponse.
• Testez le bon fonctionnement de cette deuxième version : Selon que le mot magique a été trouvé ou pas, le téléphone doit vous l'indiquer.


• Dernière étape : rechercher les mots clefs et mettre à jour la réponse
  • Si le mot magique (téléphone) a été trouvé, on va tester la présence de chacun des mots clefs avec un bloc de branchement conditionnel "si ... sinon si ... sinon si ... sinon " avec un test pour chacun des mots clefs.
  • Si un mot clef est trouvé, remplacer la variable quot;reponse" par la réponse attendue,
  • à la fin, dans le cas "sinon", aucun n'a été trouvé, donc la réponse sera "Je ne sais pas".
  
  
• Testez le bon fonctionnement de cette dernière version, (en mode interactif ou connecté)
• Puis finalisez le téléchargement de l'application sur votre téléphone
  • utilisez la fonction "build/construire apk" pour effectuer le téléchargement de l'application sur votre téléphone, (au lieu du mode connect où l'application était pilotée depuis le PC)
  • Vous devez autoriser le chargement d'applications qui ne viennent pas du playstore Android,
  • Faites le TEMPORAIREMENT. N'oubliez pas de désactiver cette autorisation en fin de séance.
• Enfin testez le bon fonctionnement final sur votre téléphone.

Notions abordées :

1. Blocs de branchement conditionnel ("si-sin/n" et "si/sinon-si/.../sinon")
2. Imbrication des blocs de branchement conditionnel
3. Fonctions de traitement de chaines de caractères
4. Blocs de "reconnaissance de la parole" et de "texte à parole"

Revue des notions mises en oeuvre

• Effectuer un déroulement pas à pas du code pour vérifier la bonne compréhension
• Ajouter éventuellement une condition avec un ET
  Par exemple pour distinguer "le" plus jeune de "la" plus jeune