Téléphone, dis-moi qui est la plus belle !

Durée estimée: 45 minutes

Ce que vous allez faire :

Dans l'application que vous allez réaliser, votre téléphone va répondre à vos questions, comme le miroir de la reine ou si vous préférez (un peu) comme Siri :
Téléphone, dis moi qui est le plus beau ?
Téléphone dis moi de quelle couleur est le ciel ?
...
Si vous ne dites pas le mot "Téléphone" il vous répondra que vous ne lui avez pas dit le mot magique, et si il n'a pas trouvé de réponse, il vous dira qu'il ne sait pas.

Mais, il n'y a rien de magique, c'est vous qui allez réaliser ce programme.
  • Il utilise un service de reconnaissance de la parole, que vous devrez déclencher lorsque l'utilisateur clique sur l'écran (ou plutôt un cadre),
  • Puis quand ce service renvoie le texte reconnu
    • votre algorithme va analyser la phrase,
    • choisir une réponse en fonction des mots présents dans la phrase,
    • puis dire cette réponse en appelant une fonction qui convertit le texte en parole.

Ce programme comme beaucoup d'autres comprend 3 parties complémentaires :
  1. La perception de l'environnement : ici la reconnaissance de la parole,
  2. l'analyse et la prise de décision par un algorithme : il va décider de la réponse en fonction du contenu du texte en entrée,
  3. la production d'un résulat en sortie : ici l'expression orale de la réponse.
Beaucoup de programmes fonctionnent de cette manière, par exemple celui des machines à laver. Si on a choisi un lavage à 45°, le programme de la machine va utiliser un thermomètre pour mesurer la température de l'eau et décidera de chauffer si la températre est inférieure. Il répètera cette mesure et prendra la même décision jusqu'à ce que l'eau soit à la température de consigne qui est une variable du programme. Cette variable est choisie par l'utilisateur avec un bouton : c'est l'interface entre l'homme et la machine. Le programme va lire cette température de consigne et l'utiliser. Il fera plein d'autres choses du même genre, comme mesurer le niveau d'eau dans la machine et empêcher d'ouvrir la porte si il est trop haut ou que le moteur est en marche. C'est le même principe pour une voiture autonome dont l'algorithme analyse l'environnement avec des capteurs pour décider des actions à prendre.

On a donc en permanence un cycle de perception de l'environnement avec des capteurs, d'analyse avec un algorithme et d'action avec des moteurs, des haut-parleurs, ... parfois appelés des actuateurs.

Dans les micro-controleurs et les petits robots (Arduino), c'est souvent le programme qui va lire les mesures des capteurs. Ce n'est généralement plus le cas dans les systèmes de plus haut niveau. Les capteurs sont devenus intelligents et peuvent signaler au programme un changement. Ce message de changement est traité comme un évènement. Certaines étapes internes du programme comme l'obtention d'un résulat ou l'arrivée d'un message sont aussi des évènements.
Au final, l'écriture de votre programme va consister à définir les actions à prendre pour chacun des évènements à prendre en compte. On parle de "event driven programming", ou de programmation pilotée par les évènements.
Cette tendance va franchir une nouvelle étape avec les objets connectés. Si un message de Météo-France annonce un coup de froid, votre téléphone va pouvoir envoyer un message à votre chaudière. Dans un avenir proche, quand vous presserez un bouton pour allumer la lumière, c'est l'interrupteur qui enverra un message à la lampe pour qu'elle s'allume.

Pour revenir à notre cas, les évènements que vous devez prendre en compte et les actions à suivre sont les suivants :
évènementaction
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

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 clefréponse
belle Clara
jeune Lucas
rapide Emmanuel
vieux Pierre

Attention !
Pour un ordinateur, le même mot avec ou sans majuscule n'est PAS le même mot. De même, attention aux blancs au début et à la fin d'une chaine de caractères. On ne les voit pas bien, donc on croit que c'est pareil, mais pour l'ordinateur NON.
Vous ne serez pas les premiers (ni les derniers) à perdre du temps avec ce genre de détail, et à titre préventif vous pouvez utiliser des blocs (ou fonctions) qui vont réduire le risque, dont

  • le bloc trim qui retire les blancs au début et à la fin d'une chaine de caractères, (trim a été traduit par "couper" en français, il aurait mieux valu utiliser "élaguer")
  • et les blocs upcase et downcase (ou majuscule et minuscule) qui permettent respectivement de convertir une chaine de caractères en majuscules et minuscules.

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.

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"

Faites attention de toujours utiliser la même langue (le français ou l'anglais) pour un même programme. La bascule d'une langue à l'autre génère souvent des erreurs liées au nom des variables and les blocs de gestion dévènements (Event handlers). Par exemple, pour la reconnaissnce de la parole, la varaible sera "résultat" en français et "result" en anglais. Cette variable utilisée à l'intérieur du bloc gardera le nom initial au moment d'un changement de langue et provoquera une erreur.

  • 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.

Vidéo d'accompagnement

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