Version textuelle

Présentation :

Avec cette application, vous allez dire une phrase au téléphone qui va la traduire dans une autre langue, puis vous la dire dans cette langue! L'application utilise la reconnaissance de la parole, la traduction et la lecture.

• dans la 1° version 3 boutons permettent d'écouter, traduire et lire
• dans la 2° version, l'utilisateur peut choisir la 2° langue dans une liste
• dans la 3° version, (1°option courte) l'enchainement est automatique
• dans une 4° version (2°option longue) on choisit la 1° langue et la traduire dans un sens ou dans l'autre selon la manière dont on tient son téléphone.

Ce que vous allez faire :

Vous allez d'abord identifier et mettre en place les composants dont vous avez besoin :

• 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,
• et aussi des évènements correspondant à l'arrivée d'une information que l'on a demandée : 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 :

• le choix des composants nécessaires et le design de 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.
• l'utilisation des ressources externes comme la reconnasisince vocale ou la taduction,
• la programmation évènementielle, ou de la réaction à des évènements :
  • 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

  à chaque fois un script (séquence d'instructions) exécuté quand un évènement se produit.

• Vous verrez aussi la notion de processus "asynchrone" :
  Pour certaines demandes, comme la traduction, votre programme ne va rester à ne rien faire en attendant la réponse! Il va continuer à faire autre chose, et quand la réponse arrive, ça déclenche un évènement auquel le programme devra réagir dans un nouveau script.
  Cette séparation entre demande et réponse, c'est 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 (Build) :

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

Revue : Quiz / auto contrôle (Conceptualize) :

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.

Extensions (Customize) :

version 2 : choix de la langue de l'interlocuteur

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 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é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

version 3 : automatisation du processus

rédaction en cours

• Vous allez ajouter un composant "case à cocher" (ou "checkBox") dans l'interface utilisateur,
• puis dans la partie programme, si cette case est cochée, vous allez automatiser le processus et enchainer toutes les opérations (écouter, traduire et vocaliser) à partir du moment où l'utilisateur aura cliqué sur le bouton de dictée.
• indices :
  • prenez un bloc de contrôle "if ..." avec comme condition que la case est cochée (checked),
  • 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 ...

version 4 : Choix de la langue, traduction directe et inverse

rédaction en cours

Cette option est plus longue et plus difficile, elle suppose

• de télécharger un composant qui n'est pas dans App Inventor au départ,et qui permet de choisir langue utilisée pour parler à son smartphone
• d'utiliser l'accéléromètre pour savoir si le téléphone est vertical ou horizontal. Pour ça il faut savoir que le téléphone mesure la gravité (9,81 m/s2), ce qui permet de savoir s'il est veritcal ou horizontal.

On arrive à un niveau où il est nécessaire de commencer par des essais pour

• comprenre l'information de l'accéléromètre,
• vérifier le ontionnement du choix de la langue
• puis réfléchir à l'algorithme et l'écrire sur un papier. Si on ne le fiat pas, on se noie.