Je parle les langues

Durée estimée: 30 minutes

Version textuelle

Présentation :

Avec cette application, vous allez dire une phrase au téléphone, choisir la langue dans laquelle vous voulez la traduire. Le téléphone l'écrira et vous la dira dans cette langue!

Ce que vous allez faire :

Vous allez d'abord sélectionner et mettre en place les composants dont vous avez besoin dans cette application :
  • avec des composants visibles :
    • une zone de texte et trois boutons qui constituent l'interface avec utilisateur.
  • et des composants invisibles ou de service :
    • pour la reconnaissance vocale, pour la traduction et pour lire à haute voix le texte traduit.
Vous allez ensuite écrire le programme de cette application, c'est à dire cles séquences de blocs correspondant à chacun des évènements qui la concerne :
  • les clics de l'utilisateur sur les boutons pour la dictée, la traduction ou la vocalisation,
  • mais aussi des évènements correspondant à l'arrivée d'une information que l'on a demandé : comme l'arrivée du texte après l'avoir dicté, ou l'arrivée de la traduction que l'on a demandé.

Ce que vous allez apprendre :

  • choisir les composants nécessaires et construire l'interface utilisateur :
    • une zone de texte pour afficher la phrase dictée au téléphone, puis sa traduction
    • un bouton pour déclencher la reconnaissance vocale et démarrer ala dictée,
    • un bouton pour déclencher la traduction,
    • un bouton pour lire à haute voix la traduction.
  • programmer en mode évènementiel,
    c'est à dire définir avec une séquence de blocs le comportement de l'application pour chacun des évènements qui la concerne :
    • quand clic sur le bouton de dictée ==> écouter la phrase et la convertir en texte,
    • quand clic sur le bouton de traduire ==> traduire la phrase dans une autre langue,
    • quand clic sur le bouton de vocalisation ==> dire la phrase à haute voix

    Dans la programmation évènementielle, le programme est constitué par les séquences d'instructions (ou scripts) dont chacune est exécutée quand un évènement se produit.

    Mais dans notre cas la réaction aux clics de l'utilisateur ne va pas suffire ...
    Par exemple, le script qui permet de demander la reconnaissance vocale d'une phrase ou la traduction d'un texte, se termine sasn que l'on ait la réponse.

Nous verrons que la séparation entre la demande et la réponse correspond à ce qu'on appelle un processus asynchrone.

Ressources en entrée :

Pour cette application vous pouvez démarrer en créant un projet vide.

Réalisation :

Suivez les indications données dans cette vidéo.

Quiz / auto contrôle:

rédaction en cours

  • qu'est-ce que la programmation évènementielle ?
    • La programmation d'applications correspodnant à des évènements artistiques, politiques, ...
    • Une organisation du programme qui consiste à décrire le comportement associé à tous les évènements qui concernent l'application.
  • qu'est-ce qu'un processus asynchrones ?
    • un processus où rien n'est coordonné
    • un processus où on n'attend pas la réponse à une demande pour continuer le déroulement du programme. La réponse arrive plus tard et donne lieu à un évènement.
    • un processus où on n'attend pas la réponse à une demande pour continuer le déroulement du programme. Le programme reprend au même endroit quand la réposne arrive.
  • dans ces fonctions d'App Inventor, lesquelles sont asynchrones
    • la fonction de reconnaissance vocale et la fonction de traduction
    • la fonction de traduction et la fonction de vocalisation (texte à parole)
    • fonction de vocalisation (texte à parole)et la fonction de reconnaissance vocale
    • les trois fonctions
  • laquelle de ces affirmations correspond le mieux à une différence entre un composant "label" et un composant "zone de texte" ?
    • le "label" et la "zone de texte" permettent d'afficher et de modifier un texte,
    • le "label" permet seulement l'affichage et la "zone de texte" permet d'afficher et de modifier. les deux composants réagissent au clic. le "label" permet seulement l'affichage et la "zone de texte" permet d'afficher et
    • de modifier. Il n'existe pas d'évènement associé au lable, contrairement à la zone de texte avec des évènement comme le clic.

Extension

Pour pouvoir choisir la langue dans l'interface utilisateur, vous allez ajouter un composant ""curseur animé" ("spinner" en anglais)pour choisir la langue

  • Interface utilisateur :
    • Dans la partie "design" et la colonne des composants à gauche, sélectionnez dasn la catégorie"Interface utilisateur", un "curseur animé " (ou spinner en anglais) et ajoutez le dasn l'interface.
    • renommez ce composant dans l'avant dernière colonne à droite, our que son nom permette de saavoir à quoi il correspond, par exemple : "Curseur_animéLangue"
    • modifiez les propriétés de ce composant (colonne de droite) de la façon suivante :
      • Dans la propriété "éléments de la chaine" ajoutez une liste de langues sosu forme d'un code sur 2 caractères quevous pouvez faire suivre du nom de la langue. Les codes de langue doivent correspondre à ceux reconnus par les fonctions de traduction et de vaoclisation (texte à parole).
        Vous pouvez copiper/coller la chaine qui suit. Les deux premiers caractères après chaque virgule corresponent au code de la langue. Supprimez les retours de ligne et évitez les blancs :
        fr:Français,en:Anglais,es:Espagnol,de:Allemand,zh:Chinois,ko:Corée,da:Danois,
        et:Estonien,fi:Finnois,el:Grec,hi:Hindi,hu:Hongrois,it:Italien,ja:Japonais,
        km:Khmer,ne:Népalais,pl:Polonais,pt:Portuguais,ro:Roumain,ru:Russe,si:Sinhala,
        sk:Slovaque,sv:Suédois,th:Thai,tr:Turc,uk:Ukrainien,vi:Vietnamien


      • Dans la propriété"Sélection" indiquez la langue par défaut.
        La chaine de caractère doit correspondre exactement à une chaine entre 2 virgules, par exemple : es:Espagnol
  • Dans la partie Programme :
    • Dans les deux scripts correspondant aux évènements "quand boutonTraduire.clic" et "quand boutonTraduire.clic" qui utilisent un code de langue en paramètre
      remplacez
      par le bloc qui sélectionne les deux premiers caractères de la sélection du curseur (spinner) :
      pour obtenir

Pour aller plus loin

rédaction en cours

Automatisation du processus :

  • Vous allez ajouter un composant "case à cocher" (ou "checkBox" en anglais)dans l'interface utilisateur,
  • puis dans la partie programme, si cette case est cochée, vous allez automatiser le processus à aprtir du moment où l'utilisateur aura cliqué sur le bouton de dictée.
    C'est à dire que la phrase traduite doit être affichée et vocalsiée par le téléphone sans que l'utilisateur ait à appuyer sur les boutons les suivants.
  • indices :
    • prenez un bloc de contrôle "i ..." et mettez comme condition que la acse est cochée,
    • ajoutez ce bloc conditionnel dans la séquence qui correspond au retour du texte dicté et appelez la traduction sans attendre ...
    ajoutez ce bloc conditionnel dans la séquence qui correspond au retour de la traduction et appelez la vocalisation sans attendre ...

Pour votre portfolio

Décrivez, en quelques lignes, avec vos propres termes, commem si vous deviez l'expliquer un ami :
  • ce qu'est la programamtion évènementielle
  • ce qu'est un processus asynchrone et ce que ça change dans le code.