Difference between revisions of "App per aprendre idiomes"
| Line 392: | Line 392: | ||
| | ||
| − | [[File:ApprendreIdiomes 48.png|center|RTENOTITLE]] | + | [[File:ApprendreIdiomes 48.png|center|720px|RTENOTITLE]] |
| | ||
Revision as of 15:20, 21 January 2019
Contents
Introducció
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”:
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:
A continuació cal penjar la imatge que vollem que es mostri. En aquest exemple, farem servir la imatge d’una poma:
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):
Apareixerà el següent quadre en el qual haurem de clicar “Seleccionar archivo” i cercar la carpeta on està guardada la imatge:
Després de seleccionar el fitxer, li donem al botó d’Aceptar:
Ara anem a la propietat Imatge (en cas que haguem fet servir la opció 1) i seleccionem el nom de la imatge:
I ja ens sortirà la imatge al botó:
Nota: per eliminar el text del botó, només cal esborrar el contingut de la propietat Texto:
Amb lo que ens quedaria així:
Com introduir la resposta
Tot seguit, per tal que l’usuari pugui introduir la resposta a la imatge, necessitem el component CampoDeTexto:
També ens cal un botó adicional per tal d’indicar a l’aplicació que hem acabat d’escriure la resposta i la volem validar:
Canviem el text del botó com hem vist abans:
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:
L’arrosseguem al visor i col·loquem dins tant el camp de text com el botó:
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:
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”:
De manera que quedi així:
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):
Una vegada afegit, fixem-nos que al no ser un element amb component visual, ens apareixerà sota el visor:
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):
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:
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:
El següent pas és comprovar si la resposta que escrivim és o no correcte un cop cliquem el BotónEnviar:
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:
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:
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:
I podem escriure la solució manualment amb el primer bloc que tenim a la categoria Texto:
Així que ja podem crear la comparació:
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:
I ara ja podem crear la condició:
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:
I amb un altre bloc de text posem el missatge a mostrar:
Ara ja podem ajuntar-ho tot:
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:
Arrosseguem el bloc que ens interessi (en aquest cas, el de si no) a la dreta:
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ó):
Per últim només queda modificar el text i col·locar-lo a l’espai corresponent:
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:
Una vegada afegit aquest component, podem veure en les seves propietats que podem configurar alguns paràmetres:
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:
I l’afegim en els dos espais de la nostra condició:
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:
Canviem a la finestra dels blocs i busquem el bloc següent:
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):
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:
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í:
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:
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:
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:
Ara, arrosseguem els blocs que volem refactoritzar (incloent el condicional) per exemple des del codi del botó d’enviar i el fiquem en aquest:
Ara agafem el bloc que executa la definició que acabem de crear:
I el fem servir a on estava el codi originalment, és a dir, quan cliquem el botó d’enviar:
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:
Veurem que ens ha afegit una entrada amb un nom genèric (x). El canviem per un nom més adient:
Deixant el punter del ratolí a sobre del nom, agafem el bloc de prendre el valor d’aquesta entrada:
I l’arrosseguem a la comparació, amb lo qual queda de la següent manera:
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:
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:
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:
Nota: per obtenir el bloc de prendre el valor d’una variable, podem fer-ho o bé a través de la categoria Variables:
O bé deixant el cursor a sobre del nom d’inicialitzar la variable:
Amb el qual ens queda així:
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:
