Difference between revisions of "App per aprendre idiomes"

From Edutec Wiki
Jump to: navigation, search
(Página creada con « = App per aprendre idiomes = En el present tutorial s’explica com crear una aplicació amb l’entorn de programació AppInventor. L’objectiu de l’app és practicar...»)
 
Line 4: Line 4:
 
En el present tutorial s’explica com crear una aplicació amb l’entorn de programació AppInventor. L’objectiu de l’app és practicar una llengua fent ús de dels components de l’aplicació que permeten expressar oralment una paraula i transcriure un text oral a un escrit.
 
En el present tutorial s’explica com crear una aplicació amb l’entorn de programació AppInventor. L’objectiu de l’app és practicar una llengua fent ús de dels components de l’aplicació que permeten expressar oralment una paraula i transcriure un text oral a un escrit.
  
El primer que farem serà obrir l’AppInventor i creant un nou projecte, fent clic sobre  “Proyectos” i  “Comenzar un proyecto nuevo”:
+
El primer que farem serà obrir l’AppInventor i creant un nou projecte, fent clic sobre  '''“Proyectos”''' i  '''“Comenzar un proyecto nuevo”''':
  
[[File:ApprendreIdiomes 01.png]]
+
 
  
== <br/> Pas 1: Posar botó amb imatge ==
+
[[File:ApprendreIdiomes 01.png|center|RTENOTITLE]]
  
Una vegada tenim el projecte creat, començarem afegint el component anomenat Botón tot arrossegant-lo desde la Paleta fins al Visor:
+
== <br/> Posar botó amb imatge ==
  
[[File:ApprendreIdiomes 02.png]]
+
Una vegada tenim el projecte creat, començarem afegint el component anomenat '''Botón''' tot arrossegant-lo desde la '''Paleta''' fins al '''Visor''':
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 02.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
<br/> A continuació cal penjar la imatge que vollem que es mostri. En aquest exemple, farem servir la imatge d’una poma:
 
<br/> A continuació cal penjar la imatge que vollem que es mostri. En aquest exemple, farem servir la imatge d’una poma:
  
[[File:ApprendreIdiomes 03.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 03.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
Per penjar-la, fem clic sobre el botó Subir archivo que trobem a la secció Medios (''Opció 1'') o bé clicant la casella de la propietat Imatge del Botó (''Opció 2''):
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 04.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
Apareixerà el següent quadre en el qual haurem de clicar '''“Seleccionar archivo”''' i cercar la carpeta on està guardada la imatge:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 05.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
Després de seleccionar el fitxer, li donem al botó d’'''Aceptar''':
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 06.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
Ara anem a la propietat '''Imatge''' (en cas que haguem fet servir la opció 1) i seleccionem el nom de la imatge:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 07.png|center|RTENOTITLE]]
  
Per penjar-la, fem clic sobre el botó Subir archivo que trobem a la secció Medios (Opció 1) o bé clicant la casella de la propietat Imatge del Botó (Opció 2):
+
<br/> I ja ens sortirà la imatge al botó:
  
[[File:ApprendreIdiomes 04.png]]
+
&nbsp;
  
Apareixerà el següent quadre en el qual haurem de clicar “Seleccionar archivo” i cercar la carpeta on està guardada la imatge:
+
[[File:ApprendreIdiomes 08.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 05.png]]
+
&nbsp;
  
Després de seleccionar el fitxer, li donem al botó d’Aceptar:
+
Nota: per eliminar el text del botó, només cal esborrar el contingut de la propietat '''Texto''':
  
[[File:ApprendreIdiomes 06.png]]
+
&nbsp;
  
Ara anem a la propietat Imatge (en cas que haguem fet servir la opció 1) i &nbsp;seleccionem el nom de la imatge:
+
[[File:ApprendreIdiomes 09.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 07.png]]<br/> I ja ens sortirà la imatge al botó:
+
&nbsp;
  
[[File:ApprendreIdiomes 08.png]]
+
Amb lo que ens quedaria així:
  
Nota: per eliminar el text del botó, només cal esborrar el contingut de la propietat Texto:
+
&nbsp;
  
[[File:ApprendreIdiomes 09.png]]
+
[[File:ApprendreIdiomes 10.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 10.png]]
+
== Com introduir la resposta ==
  
== Pas 2: Com introduir la resposta ==
+
Tot seguit, per tal que l’usuari pugui introduir la resposta a la imatge, necessitem el component '''CampoDeTexto''':
  
Tot seguit, per tal que l’usuari pugui introduir la resposta a la imatge, necessitem el component CampoDeTexto:
+
&nbsp;
  
[[File:ApprendreIdiomes 11.png]]
+
[[File:ApprendreIdiomes 11.png|center|RTENOTITLE]]
  
 
<br/> També ens cal un botó adicional per tal d’indicar a l’aplicació que hem acabat d’escriure la resposta i la volem validar:
 
<br/> També ens cal un botó adicional per tal d’indicar a l’aplicació que hem acabat d’escriure la resposta i la volem validar:
  
[[File:ApprendreIdiomes 12.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 12.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Canviem el text del botó com hem vist abans:
 
Canviem el text del botó com hem vist abans:
  
[[File:ApprendreIdiomes 13.png]]
+
&nbsp;
  
Opcionalment, si volem col·locar el botó al costat de l’altre, necessitem el component DisposiciónHorizontal que podem trobar a la categoria Disposición de la paleta:
+
[[File:ApprendreIdiomes 13.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 14.png]]
+
&nbsp;
 +
 
 +
Opcionalment, si volem col·locar el botó al costat de l’altre, necessitem el component '''DisposiciónHorizontal''' que podem trobar a la categoria '''Disposición''':
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 14.png|center|RTENOTITLE]]
  
 
<br/> L’arrosseguem al visor i col·loquem dins tant el camp de text com el botó:
 
<br/> L’arrosseguem al visor i col·loquem dins tant el camp de text com el botó:
  
[[File:ApprendreIdiomes 15.png]]
+
&nbsp;
  
Per defecte, tots els components visuals que s’afegeixen al visor tenen la mida automàtica (és a dir, s’adapten al seu contingut, ja sigui text, una imatge o altres components). Si volem que la mida s’adapti al contenidor i no al contingut, hem de canviar el valor de les propietats Alto i Ancho:
+
[[File:ApprendreIdiomes 15.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 16.png]]
+
&nbsp;
  
En el nostre cas només ens interessa canviar tant l’amplada de la disposició horitzontal (perquè s’adapti a l’ample de la pantalla) com també la del camp de text (perquè s’adapti també a la disposició horitzontal, amb el valor “Ajustar al contenedor”:
+
Per defecte, tots els components visuals que s’afegeixen al visor tenen la mida automàtica (és a dir, s’adapten al seu contingut, ja sigui text, una imatge o altres components). Si volem que la mida s’adapti al contenidor i no al contingut, hem de canviar el valor de les propietats '''Alto''' i '''Ancho''':
  
[[File:ApprendreIdiomes 17.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 16.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
En el nostre cas només ens interessa canviar tant l’amplada de la disposició horitzontal (perquè s’adapti a l’ample de la pantalla) com també la del camp de text (perquè s’adapti també a la disposició horitzontal, amb el valor '''“Ajustar al contenedor”''':
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 17.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
De manera que quedi així:
 
De manera que quedi així:
  
[[File:ApprendreIdiomes 18.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 18.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
== Afegim notificacions ==
 +
 
 +
Per tal que l’usuari rebi el feedback sobre si ha escrit bé o malament la resposta, podem afegir un '''Notificador''' a la nostra aplicació (categoria Interfaz de usuario):
  
== Pas 3: Afegim notificacions ==
+
&nbsp;
  
Per tal que l’usuari rebi el feedback sobre si ha escrit bé o malament la resposta, podem afegir un Notificador a la nostra aplicació (categoria Interfaz de usuario):
+
[[File:ApprendreIdiomes 19.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 19.png]]
+
&nbsp;
  
 
Una vegada afegit, fixem-nos que al no ser un element amb component visual, ens apareixerà sota el visor:
 
Una vegada afegit, fixem-nos que al no ser un element amb component visual, ens apareixerà sota el visor:
  
[[File:ApprendreIdiomes 20.png]]
+
&nbsp;
  
Pas 4: Programem l’aplicació
+
[[File:ApprendreIdiomes 20.png|center|RTENOTITLE]]
  
Fins ara hem estat dissenyant l’aplicació, afegint els components necessaris i les seves propietats inicials, com ara el text que mostren alguns d’ells o la seva amplada. Ara començarem a programar l’aplicació; per a això, necessitem canviar a la pantalla de Blocs (la trobem a dalt a la dreta):
+
&nbsp;
  
[[File:ApprendreIdiomes 21.png]]
+
== Comencem a programar ==
 +
 
 +
Fins ara hem estat dissenyant l’aplicació, afegint els components necessaris i les seves propietats inicials, com ara el text que mostren alguns d’ells o la seva amplada. Ara començarem a programar l’aplicació; per a això, necessitem canviar a la pantalla de '''Blocs''' (la trobem a dalt a la dreta):
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 21.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
En la següent pantalla podem veure un espai en blanc on desenvoluparem el nostre programa mitjançant els blocs que tenim disponibles a l’esquerra:
 
En la següent pantalla podem veure un espai en blanc on desenvoluparem el nostre programa mitjançant els blocs que tenim disponibles a l’esquerra:
  
[[File:ApprendreIdiomes 22.png]]
+
&nbsp;
  
<br/> Ara fixem-nos en un detall important: com tenim dos botons en la nostra aplicació, l’AppInventor els ha assignat noms genèrics (Botón1 i Botón2). Això pot suposar un problema a l’hora de programar, ja que ens podem confondre i no identificar bé quin botó es el que volem utilitzar. Per tant, és una bona pràctica canviar el nom dels components (encara que només en tinguem un d’un tipus) de forma convenient. Això es pot fer seleccionant el component i clicant al botó “Cambiar nombre” (disponible també al Dissenyador).
+
[[File:ApprendreIdiomes 22.png|center|RTENOTITLE]]
 +
 
 +
<br/> Ara fixem-nos en un detall important: com tenim dos botons en la nostra aplicació, l’AppInventor els ha assignat noms genèrics ('''Botón1''' i '''Botón2'''). Això pot suposar un problema a l’hora de programar, ja que ens podem confondre i no identificar bé quin botó es el que volem utilitzar. Per tant, és una bona pràctica canviar el nom dels components (encara que només en tinguem un d’un tipus) de forma convenient. Això es pot fer seleccionant el component i clicant al botó '''“Cambiar nombre”''' (disponible també al '''Dissenyador''').
  
 
En el nostre cas, canviem els noms de la següent forma:
 
En el nostre cas, canviem els noms de la següent forma:
  
[[File:ApprendreIdiomes 23.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 23.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
El següent pas és comprovar si la resposta que escrivim és o no correcte un cop cliquem el '''BotónEnviar''':
 +
 
 +
&nbsp;
  
El següent pas és comprovar si la resposta que escrivim és o no correcte un cop cliquem el BotónEnviar:
+
[[File:ApprendreIdiomes 24.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 24.png]]
+
&nbsp;
  
 
Quan seleccionem un component que és capaç de capturar esdeveniments, aquests estaran representats amb blocs de color groc que comencen amb “cuando…”, com per exemple el que ens permet detectar quan cliquem un botó (primer bloc). El cliquem i l’arrosseguem a l’àrea de programació.
 
Quan seleccionem un component que és capaç de capturar esdeveniments, aquests estaran representats amb blocs de color groc que comencen amb “cuando…”, com per exemple el que ens permet detectar quan cliquem un botó (primer bloc). El cliquem i l’arrosseguem a l’àrea de programació.
  
Si volem obtenir el text que ha escrit l’usuari en CampoRespuesta, cliquem també aquest i busquem el bloc següent:
+
Si volem obtenir el text que ha escrit l’usuari en '''CampoRespuesta''', cliquem també aquest i busquem el bloc següent:
  
[[File:ApprendreIdiomes 25.png]]
+
&nbsp;
  
Fixem-nos que per cada propietat tenim dos blocs: un per obtenir el valor que té (verd clar) i un altre per canviar-lo (verd fosc). En aquest cas, com que volem obtenir el text, farem servir el primer:
+
[[File:ApprendreIdiomes 25.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 26.png]]
+
&nbsp;
  
Però ens falta comparar la resposta amb la solució, és a dir, el nom de la imatge, per tal de saber si és correcte o no. Per a això farem servir el bloc d’igualtat, disponible als blocs de Lógica:
+
Fixem-nos que per cada propietat tenim dos blocs: un per obtenir el valor que té (''verd clar'') i un altre per canviar-lo (''verd fosc''). En aquest cas, com que volem obtenir el text, farem servir el primer:
  
[[File:ApprendreIdiomes 27.png]]
+
&nbsp;
  
I podem escriure la solució manualment amb el primer bloc que tenim a Texto:
+
[[File:ApprendreIdiomes 26.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 28.png]]
+
&nbsp;
 +
 
 +
Però ens falta comparar la resposta amb la solució, és a dir, el nom de la imatge, per tal de saber si és correcte o no. Per a això farem servir el bloc d’igualtat, disponible als blocs de la categoria&nbsp;<span style="color:#008000;">'''Lógica'''</span>:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 27.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
I podem escriure la solució manualment amb el primer bloc que tenim a la categoria&nbsp;<span style="color:#800080;">'''Texto'''</span>:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 28.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Així que ja podem crear la comparació:
 
Així que ja podem crear la comparació:
  
[[File:ApprendreIdiomes 29.png]]
+
&nbsp;
  
Aquest bloc que hem creat retornarà cert si els dos coincideixen i fals en cas contrari. Per tal d'avaluar aquesta comparació, necessitem un condicional, disponible a Control:
+
[[File:ApprendreIdiomes 29.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 30.png]]
+
&nbsp;
 +
 
 +
Aquest bloc que hem creat retornarà cert si els dos coincideixen i fals en cas contrari. Per tal d'avaluar aquesta comparació, necessitem un condicional, disponible a la categoria <span style="color:#DAA520;">'''Control'''</span>:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 30.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
I ara ja podem crear la condició:
 
I ara ja podem crear la condició:
  
[[File:ApprendreIdiomes 31.png]]
+
&nbsp;
  
Però ens falta l’acció a executar. Podem fer servir el Notificador per mostrar un avís flotant que avisi a l’usuari que ha encertat:
+
[[File:ApprendreIdiomes 31.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 32.png]]<br/> I amb un altre bloc de text posem el missatge a mostrar:
+
&nbsp;
  
[[File:ApprendreIdiomes 33.png]]
+
Però ens falta l’acció a executar. Podem fer servir el notificador per mostrar un avís flotant que avisi a l’usuari que ha encertat:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 32.png|center|RTENOTITLE]]
 +
 
 +
<br/> I amb un altre bloc de text posem el missatge a mostrar:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 33.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Ara ja podem ajuntar-ho tot:
 
Ara ja podem ajuntar-ho tot:
  
[[File:ApprendreIdiomes 34.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 34.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Segurament també volem que també surti un missatge en cas que la resposta hagi estat incorrecta. Podem fer-ho afegint un altre condicional, però és més elegant modificar el que ja tenim, clicant la icona blava de l’engranatge:
 
Segurament també volem que també surti un missatge en cas que la resposta hagi estat incorrecta. Podem fer-ho afegint un altre condicional, però és més elegant modificar el que ja tenim, clicant la icona blava de l’engranatge:
  
[[File:ApprendreIdiomes 35.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 35.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Arrosseguem el bloc que ens interessi (en aquest cas, el de si no) a la dreta:
 
Arrosseguem el bloc que ens interessi (en aquest cas, el de si no) a la dreta:
  
[[File:ApprendreIdiomes 36.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 36.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
I veurem que el bloc es modifica creant un espai per poder inserir un altre bloc dins &nbsp;i així mostrar un avís (podem duplicar el que ja tenim fent clic dret a sobre d’ell i seleccionant la primera opció):
 
I veurem que el bloc es modifica creant un espai per poder inserir un altre bloc dins &nbsp;i així mostrar un avís (podem duplicar el que ja tenim fent clic dret a sobre d’ell i seleccionant la primera opció):
  
[[File:ApprendreIdiomes 37.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 37.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Per últim només queda modificar el text i col·locar-lo a l’espai corresponent:
 
Per últim només queda modificar el text i col·locar-lo a l’espai corresponent:
  
[[File:ApprendreIdiomes 38.png]]
+
&nbsp;
  
== Pas 5: Fem que l’aplicació parli ==
+
[[File:ApprendreIdiomes 38.png|center|RTENOTITLE]]
  
Si el de mostrar l’avís ens sembla poca cosa, podem fer que en comptes (o a més) d’això, l’aplicació “parli” dient si la resposta és correcta o no. Aquesta funcionalitat ens la dóna el component TextoAVoz que podem trobar a la categoría Medios de la Paleta:
+
&nbsp;
  
[[File:ApprendreIdiomes 39.png]]
+
== Fem que l’aplicació parli ==
 +
 
 +
&nbsp;
 +
 
 +
Si el de mostrar l’avís ens sembla poca cosa, podem fer que en comptes (o a més) d’això, l’aplicació “parli” dient si la resposta és correcta o no. Aquesta funcionalitat ens la dóna el component '''TextoAVoz''' que podem trobar a la categoria '''Medios''' de la paleta:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 39.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
<br/> Una vegada afegit aquest component, podem veure en les seves propietats que podem configurar alguns paràmetres:
 
<br/> Una vegada afegit aquest component, podem veure en les seves propietats que podem configurar alguns paràmetres:
  
[[File:ApprendreIdiomes 40.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 40.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Podem especificar-li el país i/o l’idioma amb el que volem que parli o bé deixar-ho tal qual, amb lo qual l’aplicació detectarà automàticament ambdós paràmetres segons la configuració del dispositiu on s’executi.
 
Podem especificar-li el país i/o l’idioma amb el que volem que parli o bé deixar-ho tal qual, amb lo qual l’aplicació detectarà automàticament ambdós paràmetres segons la configuració del dispositiu on s’executi.
  
Tornem a la finestra dels Blocs i cerquem en aquest component la instrucció següent:
+
Tornem a la finestra dels blocs i cerquem en aquest component la instrucció següent:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 41.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 41.png]]
+
&nbsp;
  
 
I l’afegim en els dos espais de la nostra condició:
 
I l’afegim en els dos espais de la nostra condició:
  
[[File:ApprendreIdiomes 42.png]]
+
&nbsp;
  
== Pas 6: Introduïr la resposta mitjançant la veu ==
+
[[File:ApprendreIdiomes 42.png|center|RTENOTITLE]]
  
De igual manera que hem fet que l’aplicació ens parli per comunicar-nos si la resposta era correcta o no, també podem fer que ens “entengui” ella quan li diem la resposta amb veu en comptes d’introduïnt-la escrivint-la al camp de text. Per a fer això necessitarem el component ReconocimientoDeVoz, disponible també a la categoria Medios:
+
&nbsp;
  
[[File:ApprendreIdiomes 43.png]]
+
== Introduïr la resposta mitjançant la veu ==
  
Canviem a la finestra dels Blocs i busquem el bloc següent:
+
De igual manera que hem fet que l’aplicació ens parli per comunicar-nos si la resposta era correcta o no, també podem fer que ens “entengui” ella quan li diem la resposta amb veu en comptes d’introduïnt-la escrivint-la al camp de text. Per a fer això necessitarem el component '''ReconocimientoDeVoz''', disponible també a la categoria '''Medios''':
  
[[File:ApprendreIdiomes 44.png]]
+
&nbsp;
  
Ara el podem executar quan cliquem a sobre de BotónImagen (per aquest motiu l’hem creat com a botó i no com una simple imatge, en la qual no es pot clicar a sobre d’ella):
+
[[File:ApprendreIdiomes 43.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 45.png]]
+
&nbsp;
 +
 
 +
Canviem a la finestra dels blocs i busquem el bloc següent:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 44.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
Ara el podem executar quan cliquem a sobre de '''BotónImagen''' (per aquest motiu l’hem creat com a botó i no com una simple imatge, en la qual no es pot clicar a sobre d’ella):
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 45.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Aquest bloc crida a la funcionalitat dels dispositius Android de reconeixement de veu. Un cop aquesta retorna el text que ha reconegut, el tenim disponible al següent bloc:
 
Aquest bloc crida a la funcionalitat dels dispositius Android de reconeixement de veu. Un cop aquesta retorna el text que ha reconegut, el tenim disponible al següent bloc:
  
[[File:ApprendreIdiomes 46.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 46.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Així que, podem duplicar lo que havíem fet per quan cliquem el botó d’enviar resposta (mitjançant el camp de text) i fer-ho servir aquí:
 
Així que, podem duplicar lo que havíem fet per quan cliquem el botó d’enviar resposta (mitjançant el camp de text) i fer-ho servir aquí:
  
[[File:ApprendreIdiomes 47.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 47.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
== Bola extra: optimització del programa ==
 
== Bola extra: optimització del programa ==
Line 210: Line 392:
 
Podem millorar una mica com hem fet l’aplicació amb un parell de canvis. Fixem-nos que amb lo que hem fet a l’apartat anterior tenim dos parts del programa pràcticament idèntiques:
 
Podem millorar una mica com hem fet l’aplicació amb un parell de canvis. Fixem-nos que amb lo que hem fet a l’apartat anterior tenim dos parts del programa pràcticament idèntiques:
  
[[File:ApprendreIdiomes 48.png]]
+
&nbsp;
  
L’únic que canvia entre ells és que en un comparem el text del camp de resposta i en l’altre el resultat que retorna el reconeixement de veu. Podem sintetitzar tots els blocs en comú en un de sol i fer-lo servir en ambdues parts, tot creant un bloc propi o com s’anomenen en AppInventor, procediments:
+
[[File:ApprendreIdiomes 48.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 49.png]]
+
&nbsp;
  
Anem a la categoria Procedimientos i agafem aquest bloc. Lo primer que farem es canviar-li el nom per un més adient, com per exemple comprovarResposta:
+
L’únic que canvia entre ells és que en un comparem el text del camp de resposta i en l’altre el resultat que retorna el reconeixement de veu. Podem sintetitzar tots els blocs en comú en un de sol i fer-lo servir en ambdues parts, tot creant un bloc propi o com s’anomenen en AppInventor i en altres llenguatges de programació, '''procediments''':
  
[[File:ApprendreIdiomes 50.png]]<br/> Ara, arrosseguem els blocs que volem refactoritzar (incloent el condicional) per exemple des del codi del botó d’enviar i el fiquem en aquest:
+
&nbsp;
  
[[File:ApprendreIdiomes 51.png]]
+
[[File:ApprendreIdiomes 49.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
 +
 
 +
Anem a la categoria <span style="color:#4B0082;">'''Procedimientos'''</span>&nbsp;i agafem aquest bloc. Lo primer que farem es canviar-li el nom per un més adient, com per exemple ''comprovarResposta'':
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 50.png|center|RTENOTITLE]]
 +
 
 +
<br/> Ara, arrosseguem els blocs que volem refactoritzar (incloent el condicional) per exemple des del codi del botó d’enviar i el fiquem en aquest:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 51.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Ara agafem el bloc que executa la definició que acabem de crear:
 
Ara agafem el bloc que executa la definició que acabem de crear:
  
[[File:ApprendreIdiomes 52.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 52.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
I el fem servir a on estava el codi originalment, és a dir, quan cliquem el botó d’enviar:
 
I el fem servir a on estava el codi originalment, és a dir, quan cliquem el botó d’enviar:
  
[[File:ApprendreIdiomes 53.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 53.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Però tal i com està ara mateix, no podem fer servir el mateix bloc en l’altre cas, és a dir, quan obtinguem el text del reconeixement de veu. Per tant, podem “passar-li” a aquest bloc lo que volem que compari, clicant en la icona blava de l’engranatge en la definició i arrossegant un bloc d’entrada:
 
Però tal i com està ara mateix, no podem fer servir el mateix bloc en l’altre cas, és a dir, quan obtinguem el text del reconeixement de veu. Per tant, podem “passar-li” a aquest bloc lo que volem que compari, clicant en la icona blava de l’engranatge en la definició i arrossegant un bloc d’entrada:
  
[[File:ApprendreIdiomes 54.png]]
+
&nbsp;
  
Veurem que ens ha afegit una entrada amb nom “x”. El canviem per un nom més adient:
+
[[File:ApprendreIdiomes 54.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 55.png]]
+
&nbsp;
 +
 
 +
Veurem que ens ha afegit una entrada amb un nom genèric&nbsp;(''x'').&nbsp;El canviem per un nom més adient:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 55.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Deixant el punter del ratolí a sobre del nom, agafem el bloc de prendre el valor d’aquesta entrada:
 
Deixant el punter del ratolí a sobre del nom, agafem el bloc de prendre el valor d’aquesta entrada:
  
[[File:ApprendreIdiomes 56.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 56.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
<br/> I l’arrosseguem a la comparació, amb lo qual queda de la següent manera:
 
<br/> I l’arrosseguem a la comparació, amb lo qual queda de la següent manera:
  
[[File:ApprendreIdiomes 57.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 57.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Amb lo qual ara podem, en cada cas, fer servir el bloc creat passant-li en un el contigut del cap de text i en l’altre la resposta del reconeixement de veu:
 
Amb lo qual ara podem, en cada cas, fer servir el bloc creat passant-li en un el contigut del cap de text i en l’altre la resposta del reconeixement de veu:
  
[[File:ApprendreIdiomes 58.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 58.png|center|RTENOTITLE]]
  
 
=== <br/> Millora 2 ===
 
=== <br/> Millora 2 ===
  
A més, En el cas de fer servir els dos components (Notificador i TextoAVoz) i que els corresponents missatges siguin el mateix, es pot millorar una mica l’algoritme del bloc que hem acabem de fer. Crearem una variable local amb el nom “mensaje” (per exemple) i la inicialitzarem amb una cadena buida, arrossegant-lo al nostre conjunt de blocs i fent que la condició quedi dintre del seu espai:
+
A més, En el cas de fer servir els dos components ('''Notificador''' i '''TextoAVoz''') i que els corresponents missatges siguin el mateix, es pot millorar una mica l’algoritme del bloc que hem acabem de fer. Crearem una variable local posant-li un nom adient i la inicialitzarem amb una cadena buida, arrossegant el bloc corresponent&nbsp;al nostre conjunt de blocs i fent que la condició quedi dintre del seu espai:
  
[[File:ApprendreIdiomes 59.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 59.png|center|RTENOTITLE]]
  
 
<br/> Ara farem que, en ambdós casos, guardarem el missatge en la variable que hem creat i la farem servir en els blocs d’ambdós components:
 
<br/> Ara farem que, en ambdós casos, guardarem el missatge en la variable que hem creat i la farem servir en els blocs d’ambdós components:
  
[[File:ApprendreIdiomes 60.png]]
+
&nbsp;
  
Nota: per obtenir el bloc de prendre el valor d’una variable, podem fer-ho o bé a través de la categoria Variables:
+
[[File:ApprendreIdiomes 60.png|center|RTENOTITLE]]
  
[[File:ApprendreIdiomes 61.png]]
+
&nbsp;
 +
 
 +
Nota: per obtenir el bloc de prendre el valor d’una variable, podem fer-ho o bé a través de la categoria <span style="color:#FF8C00;">'''Variables'''</span>:
 +
 
 +
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 61.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
O bé deixant el cursor a sobre del nom d’inicialitzar la variable:
 
O bé deixant el cursor a sobre del nom d’inicialitzar la variable:
  
[[File:ApprendreIdiomes 62.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 62.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Amb el qual ens queda així:
 
Amb el qual ens queda així:
  
[[File:ApprendreIdiomes 63.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 63.png|center|RTENOTITLE]]
 +
 
 +
&nbsp;
  
 
Fixem-nos que ara, exceptuant el que guarda el missatge en la variable, tenim els mateixos blocs en un cas com l’altre. Per tant, els podem treure a fora del condicional perfectament:
 
Fixem-nos que ara, exceptuant el que guarda el missatge en la variable, tenim els mateixos blocs en un cas com l’altre. Per tant, els podem treure a fora del condicional perfectament:
  
[[File:ApprendreIdiomes 64.png]]
+
&nbsp;
 +
 
 +
[[File:ApprendreIdiomes 64.png|center|RTENOTITLE]]

Revision as of 15:24, 5 December 2018

App per aprendre idiomes

En el present tutorial s’explica com crear una aplicació amb l’entorn de programació AppInventor. L’objectiu de l’app és practicar una llengua fent ús de dels components de l’aplicació que permeten expressar oralment una paraula i transcriure un text oral a un escrit.

El primer que farem serà obrir l’AppInventor i creant un nou projecte, fent clic sobre  “Proyectos” i  “Comenzar un proyecto nuevo”:

 

RTENOTITLE


Posar botó amb imatge

Una vegada tenim el projecte creat, començarem afegint el component anomenat Botón tot arrossegant-lo desde la Paleta fins al Visor:

 

RTENOTITLE

 


A continuació cal penjar la imatge que vollem que es mostri. En aquest exemple, farem servir la imatge d’una poma:

 

RTENOTITLE

 

Per penjar-la, fem clic sobre el botó Subir archivo que trobem a la secció Medios (Opció 1) o bé clicant la casella de la propietat Imatge del Botó (Opció 2):

 

RTENOTITLE

 

Apareixerà el següent quadre en el qual haurem de clicar “Seleccionar archivo” i cercar la carpeta on està guardada la imatge:

 

RTENOTITLE

 

Després de seleccionar el fitxer, li donem al botó d’Aceptar:

 

RTENOTITLE

 

Ara anem a la propietat Imatge (en cas que haguem fet servir la opció 1) i seleccionem el nom de la imatge:

 

RTENOTITLE


I ja ens sortirà la imatge al botó:

 

RTENOTITLE

 

Nota: per eliminar el text del botó, només cal esborrar el contingut de la propietat Texto:

 

RTENOTITLE

 

Amb lo que ens quedaria així:

 

RTENOTITLE

Com introduir la resposta

Tot seguit, per tal que l’usuari pugui introduir la resposta a la imatge, necessitem el component CampoDeTexto:

 

RTENOTITLE


També ens cal un botó adicional per tal d’indicar a l’aplicació que hem acabat d’escriure la resposta i la volem validar:

 

RTENOTITLE

 

Canviem el text del botó com hem vist abans:

 

RTENOTITLE

 

Opcionalment, si volem col·locar el botó al costat de l’altre, necessitem el component DisposiciónHorizontal que podem trobar a la categoria Disposición:

 

RTENOTITLE


L’arrosseguem al visor i col·loquem dins tant el camp de text com el botó:

 

RTENOTITLE

 

Per defecte, tots els components visuals que s’afegeixen al visor tenen la mida automàtica (és a dir, s’adapten al seu contingut, ja sigui text, una imatge o altres components). Si volem que la mida s’adapti al contenidor i no al contingut, hem de canviar el valor de les propietats Alto i Ancho:

 

RTENOTITLE

 

En el nostre cas només ens interessa canviar tant l’amplada de la disposició horitzontal (perquè s’adapti a l’ample de la pantalla) com també la del camp de text (perquè s’adapti també a la disposició horitzontal, amb el valor “Ajustar al contenedor”:

 

RTENOTITLE

 

De manera que quedi així:

 

RTENOTITLE

 

Afegim notificacions

Per tal que l’usuari rebi el feedback sobre si ha escrit bé o malament la resposta, podem afegir un Notificador a la nostra aplicació (categoria Interfaz de usuario):

 

RTENOTITLE

 

Una vegada afegit, fixem-nos que al no ser un element amb component visual, ens apareixerà sota el visor:

 

RTENOTITLE

 

Comencem a programar

Fins ara hem estat dissenyant l’aplicació, afegint els components necessaris i les seves propietats inicials, com ara el text que mostren alguns d’ells o la seva amplada. Ara començarem a programar l’aplicació; per a això, necessitem canviar a la pantalla de Blocs (la trobem a dalt a la dreta):

 

RTENOTITLE

 

En la següent pantalla podem veure un espai en blanc on desenvoluparem el nostre programa mitjançant els blocs que tenim disponibles a l’esquerra:

 

RTENOTITLE


Ara fixem-nos en un detall important: com tenim dos botons en la nostra aplicació, l’AppInventor els ha assignat noms genèrics (Botón1 i Botón2). Això pot suposar un problema a l’hora de programar, ja que ens podem confondre i no identificar bé quin botó es el que volem utilitzar. Per tant, és una bona pràctica canviar el nom dels components (encara que només en tinguem un d’un tipus) de forma convenient. Això es pot fer seleccionant el component i clicant al botó “Cambiar nombre” (disponible també al Dissenyador).

En el nostre cas, canviem els noms de la següent forma:

 

RTENOTITLE

 

El següent pas és comprovar si la resposta que escrivim és o no correcte un cop cliquem el BotónEnviar:

 

RTENOTITLE

 

Quan seleccionem un component que és capaç de capturar esdeveniments, aquests estaran representats amb blocs de color groc que comencen amb “cuando…”, com per exemple el que ens permet detectar quan cliquem un botó (primer bloc). El cliquem i l’arrosseguem a l’àrea de programació.

Si volem obtenir el text que ha escrit l’usuari en CampoRespuesta, cliquem també aquest i busquem el bloc següent:

 

RTENOTITLE

 

Fixem-nos que per cada propietat tenim dos blocs: un per obtenir el valor que té (verd clar) i un altre per canviar-lo (verd fosc). En aquest cas, com que volem obtenir el text, farem servir el primer:

 

RTENOTITLE

 

Però ens falta comparar la resposta amb la solució, és a dir, el nom de la imatge, per tal de saber si és correcte o no. Per a això farem servir el bloc d’igualtat, disponible als blocs de la categoria Lógica:

 

RTENOTITLE

 

I podem escriure la solució manualment amb el primer bloc que tenim a la categoria Texto:

 

RTENOTITLE

 

Així que ja podem crear la comparació:

 

RTENOTITLE

 

Aquest bloc que hem creat retornarà cert si els dos coincideixen i fals en cas contrari. Per tal d'avaluar aquesta comparació, necessitem un condicional, disponible a la categoria Control:

 

RTENOTITLE

 

I ara ja podem crear la condició:

 

RTENOTITLE

 

Però ens falta l’acció a executar. Podem fer servir el notificador per mostrar un avís flotant que avisi a l’usuari que ha encertat:

 

RTENOTITLE


I amb un altre bloc de text posem el missatge a mostrar:

 

RTENOTITLE

 

Ara ja podem ajuntar-ho tot:

 

RTENOTITLE

 

Segurament també volem que també surti un missatge en cas que la resposta hagi estat incorrecta. Podem fer-ho afegint un altre condicional, però és més elegant modificar el que ja tenim, clicant la icona blava de l’engranatge:

 

RTENOTITLE

 

Arrosseguem el bloc que ens interessi (en aquest cas, el de si no) a la dreta:

 

RTENOTITLE

 

I veurem que el bloc es modifica creant un espai per poder inserir un altre bloc dins  i així mostrar un avís (podem duplicar el que ja tenim fent clic dret a sobre d’ell i seleccionant la primera opció):

 

RTENOTITLE

 

Per últim només queda modificar el text i col·locar-lo a l’espai corresponent:

 

RTENOTITLE

 

Fem que l’aplicació parli

 

Si el de mostrar l’avís ens sembla poca cosa, podem fer que en comptes (o a més) d’això, l’aplicació “parli” dient si la resposta és correcta o no. Aquesta funcionalitat ens la dóna el component TextoAVoz que podem trobar a la categoria Medios de la paleta:

 

RTENOTITLE

 


Una vegada afegit aquest component, podem veure en les seves propietats que podem configurar alguns paràmetres:

 

RTENOTITLE

 

Podem especificar-li el país i/o l’idioma amb el que volem que parli o bé deixar-ho tal qual, amb lo qual l’aplicació detectarà automàticament ambdós paràmetres segons la configuració del dispositiu on s’executi.

Tornem a la finestra dels blocs i cerquem en aquest component la instrucció següent:

 

RTENOTITLE

 

I l’afegim en els dos espais de la nostra condició:

 

RTENOTITLE

 

Introduïr la resposta mitjançant la veu

De igual manera que hem fet que l’aplicació ens parli per comunicar-nos si la resposta era correcta o no, també podem fer que ens “entengui” ella quan li diem la resposta amb veu en comptes d’introduïnt-la escrivint-la al camp de text. Per a fer això necessitarem el component ReconocimientoDeVoz, disponible també a la categoria Medios:

 

RTENOTITLE

 

Canviem a la finestra dels blocs i busquem el bloc següent:

 

RTENOTITLE

 

Ara el podem executar quan cliquem a sobre de BotónImagen (per aquest motiu l’hem creat com a botó i no com una simple imatge, en la qual no es pot clicar a sobre d’ella):

 

RTENOTITLE

 

Aquest bloc crida a la funcionalitat dels dispositius Android de reconeixement de veu. Un cop aquesta retorna el text que ha reconegut, el tenim disponible al següent bloc:

 

RTENOTITLE

 

Així que, podem duplicar lo que havíem fet per quan cliquem el botó d’enviar resposta (mitjançant el camp de text) i fer-ho servir aquí:

 

RTENOTITLE

 

Bola extra: optimització del programa


Millora 1

Podem millorar una mica com hem fet l’aplicació amb un parell de canvis. Fixem-nos que amb lo que hem fet a l’apartat anterior tenim dos parts del programa pràcticament idèntiques:

 

RTENOTITLE

 

L’únic que canvia entre ells és que en un comparem el text del camp de resposta i en l’altre el resultat que retorna el reconeixement de veu. Podem sintetitzar tots els blocs en comú en un de sol i fer-lo servir en ambdues parts, tot creant un bloc propi o com s’anomenen en AppInventor i en altres llenguatges de programació, procediments:

 

RTENOTITLE

 

Anem a la categoria Procedimientos i agafem aquest bloc. Lo primer que farem es canviar-li el nom per un més adient, com per exemple comprovarResposta:

 

RTENOTITLE


Ara, arrosseguem els blocs que volem refactoritzar (incloent el condicional) per exemple des del codi del botó d’enviar i el fiquem en aquest:

 

RTENOTITLE

 

Ara agafem el bloc que executa la definició que acabem de crear:

 

RTENOTITLE

 

I el fem servir a on estava el codi originalment, és a dir, quan cliquem el botó d’enviar:

 

RTENOTITLE

 

Però tal i com està ara mateix, no podem fer servir el mateix bloc en l’altre cas, és a dir, quan obtinguem el text del reconeixement de veu. Per tant, podem “passar-li” a aquest bloc lo que volem que compari, clicant en la icona blava de l’engranatge en la definició i arrossegant un bloc d’entrada:

 

RTENOTITLE

 

Veurem que ens ha afegit una entrada amb un nom genèric (x). El canviem per un nom més adient:

 

RTENOTITLE

 

Deixant el punter del ratolí a sobre del nom, agafem el bloc de prendre el valor d’aquesta entrada:

 

RTENOTITLE

 


I l’arrosseguem a la comparació, amb lo qual queda de la següent manera:

 

RTENOTITLE

 

Amb lo qual ara podem, en cada cas, fer servir el bloc creat passant-li en un el contigut del cap de text i en l’altre la resposta del reconeixement de veu:

 

RTENOTITLE


Millora 2

A més, En el cas de fer servir els dos components (Notificador i TextoAVoz) i que els corresponents missatges siguin el mateix, es pot millorar una mica l’algoritme del bloc que hem acabem de fer. Crearem una variable local posant-li un nom adient i la inicialitzarem amb una cadena buida, arrossegant el bloc corresponent al nostre conjunt de blocs i fent que la condició quedi dintre del seu espai:

 

RTENOTITLE


Ara farem que, en ambdós casos, guardarem el missatge en la variable que hem creat i la farem servir en els blocs d’ambdós components:

 

RTENOTITLE

 

Nota: per obtenir el bloc de prendre el valor d’una variable, podem fer-ho o bé a través de la categoria Variables:

 

RTENOTITLE

 

O bé deixant el cursor a sobre del nom d’inicialitzar la variable:

 

RTENOTITLE

 

Amb el qual ens queda així:

 

RTENOTITLE

 

Fixem-nos que ara, exceptuant el que guarda el missatge en la variable, tenim els mateixos blocs en un cas com l’altre. Per tant, els podem treure a fora del condicional perfectament:

 

RTENOTITLE