App per aprendre idiomes

From Edutec Wiki
Revision as of 12:59, 5 December 2018 by Vcasado (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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”:

ApprendreIdiomes 01.png


Pas 1: 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:

ApprendreIdiomes 02.png


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

ApprendreIdiomes 03.png

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):

ApprendreIdiomes 04.png

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

ApprendreIdiomes 05.png

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

ApprendreIdiomes 06.png

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

ApprendreIdiomes 07.png
I ja ens sortirà la imatge al botó:

ApprendreIdiomes 08.png

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

ApprendreIdiomes 09.png

ApprendreIdiomes 10.png

Pas 2: Com introduir la resposta

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

ApprendreIdiomes 11.png


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

ApprendreIdiomes 12.png

Canviem el text del botó com hem vist abans:

ApprendreIdiomes 13.png

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:

ApprendreIdiomes 14.png


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

ApprendreIdiomes 15.png

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:

ApprendreIdiomes 16.png

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”:

ApprendreIdiomes 17.png

De manera que quedi així:

ApprendreIdiomes 18.png

Pas 3: 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):

ApprendreIdiomes 19.png

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

ApprendreIdiomes 20.png

Pas 4: Programem l’aplicació

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):

ApprendreIdiomes 21.png

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:

ApprendreIdiomes 22.png


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:

ApprendreIdiomes 23.png

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

ApprendreIdiomes 24.png

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:

ApprendreIdiomes 25.png

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:

ApprendreIdiomes 26.png

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:

ApprendreIdiomes 27.png

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

ApprendreIdiomes 28.png

Així que ja podem crear la comparació:

ApprendreIdiomes 29.png

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:

ApprendreIdiomes 30.png

I ara ja podem crear la condició:

ApprendreIdiomes 31.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:

ApprendreIdiomes 32.png
I amb un altre bloc de text posem el missatge a mostrar:

ApprendreIdiomes 33.png

Ara ja podem ajuntar-ho tot:

ApprendreIdiomes 34.png

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:

ApprendreIdiomes 35.png

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

ApprendreIdiomes 36.png

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ó):

ApprendreIdiomes 37.png

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

ApprendreIdiomes 38.png

Pas 5: 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 categoría Medios de la Paleta:

ApprendreIdiomes 39.png


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

ApprendreIdiomes 40.png

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:

ApprendreIdiomes 41.png

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

ApprendreIdiomes 42.png

Pas 6: 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:

ApprendreIdiomes 43.png

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

ApprendreIdiomes 44.png

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):

ApprendreIdiomes 45.png

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:

ApprendreIdiomes 46.png

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í:

ApprendreIdiomes 47.png

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:

ApprendreIdiomes 48.png

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:

ApprendreIdiomes 49.png

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:

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

ApprendreIdiomes 51.png

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

ApprendreIdiomes 52.png

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

ApprendreIdiomes 53.png

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:

ApprendreIdiomes 54.png

Veurem que ens ha afegit una entrada amb nom “x”. El canviem per un nom més adient:

ApprendreIdiomes 55.png

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

ApprendreIdiomes 56.png


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

ApprendreIdiomes 57.png

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:

ApprendreIdiomes 58.png


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:

ApprendreIdiomes 59.png


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:

ApprendreIdiomes 60.png

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

ApprendreIdiomes 61.png

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

ApprendreIdiomes 62.png

Amb el qual ens queda així:

ApprendreIdiomes 63.png

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:

ApprendreIdiomes 64.png