Version textuelle

Présentation :

Avec cette application, vous allez dire une phrase au téléphone et il va la traduire dans une autre langue puis la dire à haute voix dans cette langue!

Cette application va donc utiliser des fonctions de reconnaissance de la parole, de traduction et de lecture d'un texte.

• dans la 1° version chaque étape est décomposée : écoute, traduction, lecture
• dans la 2° version, l'utilisateur peut choisir la 2° langue dans une liste
• dans la 3° version, l'enchainement est automatique
• dans la 4° version on choisit la 1° langue,
• dans la 5° version la traduction se fait dans un sens ou dans l'autre selon la manière dont on tient le téléphone.

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

Réalisation version 1 :

Ressources en entrée :

Pour la 1° version de cette application vous pouvez démarrer en créant un projet vide.

Guide :

Suivez les indications de cette vidéo ou celles indiquées dans les planches.

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.

Réalisation version 2 :

Objectif :

Dans cette version vous allez permettre à l'utilisateur de choisir la langue dans laquelle est traduite la phrase reconnue par reconnaissnce vocale.
Vous allez ajouter un composant "curseur animé" ("spinner" en anglais)pour choisir cette langue

Ressources en entrée :

Pour cette 2° version vous pouvez repartir de la veriosn précédente ou télécharger la version à cette adresse puis l'importer dans App Inventor.

Guide :

Suivez les indications de la vidéo ci-dessus ou celles indiquées dans les planches pour cette version.

• Interface utilisateur / Design :
  • Dans la partie "design" et la colonne des composants à gauche, sélectionnez dans la catégorie "Interface utilisateur", un "curseur animé " (ou spinner en anglais) et ajoutez le dans l'interface.
  • renommez ce composant dans l'avant dernière colonne à droite, pour que son nom permette de savoir à quoi il correspond, par exemple : "Curseur_animéLangue1"
  • 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 sous forme d'un code sur 2 caractères que vous pouvez faire suivre du nom de la langue. Les codes de langue doivent correspondre à ceux reconnus par les fonctions de traduction et de vocalisation (texte à parole).
      Vous pouvez copiper/coller la chaine qui suit. Les codes de langue sont indiqués sur 2 caractères et séparés par des virgules. Il ne doit pas y avoir d'espace. corresponent au code de la langue. Supprimez les retours de ligne et évitez les blancs :
      fr,en,es,ar,zh,ko,da,et,fi,el,hi,hu,it,ja,km,ne,pl,pt,ro,ru,si,sk,sv,th,tr,uk,vi
      Avec la correspondance suivante :
      fr:Français,en:Anglais,es:Espagnol,de:Allemand,ar:Arabe,da:Danois,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 le code de la langue par défaut. Par exemple "es" por l'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 le code de langue par (la valeur qui correspond à) la sélection du curseur animé :
    • dans le paramètre d'appel à la traduction Yandex
    • et dans la propriété langue du composant texte à parole
    

Réalisation version 3 :

Objectif :

Dans cette version vous allez automatiser le processus en enchainant les taches à partir du clic sur le bouton.
Dès réception du texte reconnu, vous allez appeler la traduction et dès réception de la traduction vous allez appeler la lecture à haute voix

Ressources en entrée :

Pour cette 3° version vous pouvez repartir de la version précédente ou télécharger la version à cette adresse puis l'importer dans App Inventor.

Guide :

Suivez les indications indiquées dans les planches pour cette version.

Réalisation version 4 :

Objectif :

Dans cette version vous allez permettre à l'utilisateur de choisir la langue dictée au téléphone.

Vous constaterez que le composant de reconnaissance vocale proposé en standard par App Inventor ne permet pas de choisir cette langue. Vous allez donc utiliser un comporant externe ou une extension à App Inventor : la version de "speech to text" proposée par Taifun que vous allez impoorter et utiliser à la place.
Vous allez aussi ajouter un spinner ou curseur animé "Curseur_utilisaateur" que vous placerez avec le prmier curseur dans un arrangement horizontal. Ce premier curseur qui permmet de sélectionner la langue de l'autre ser renommé "Curseur_interlocuteur".

Ressources en entrée :

Pour cette 4° version vous pouvez repartir de la version précédente ou télécharger la version à cette adresse puis l'importer dans App Inventor.

Guide :

Suivez les indications indiquées dans les planches pour cette version.

Réalisation version 5 :

Objectif :

Dans cette version vous allez permettre un dialogue dans les deux sens entre l'utilisateur et son interlocuteur.

Dans les étapes précédentes, on a vu comment choisir chacune des langues en entrée et en sortie. On av ici inverser en fonction de l'orientation du téléphone (verticale ou horizontale) détectée par l'accéléromètre.

Ressources en entrée :

Pour cette 5° version vous pouvez repartir de la version précédente ou télécharger la version à cette adresse

Guide :

Suivez les indications indiquées dans les planches pour cette version.

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.