Difference between revisions of "App per aprendre idiomes"

From Edutec Wiki
Jump to: navigation, search
Line 346: Line 346:
 
 
 
 
  
== Introduïr la resposta mitjançant la veu ==
+
== Introduir 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''':
+
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’introduint-la escrivint-la al camp de text. Per a fer això necessitarem el component '''ReconocimientoDeVoz''', disponible també a la categoria '''Medios''':
  
 
 
 
 

Revision as of 10:42, 11 February 2019

Apprendreidiomes.png
Una aplicació o app és com informalment de vegades s'anomena a un programa fet per a un dispositiu mòbil o una tableta. El present tutorial mostra com crear una aplicació amb l’entorn de programació AppInventor.

L’objectiu serà crear una aplicació per a practicar vocabulari en una altra llengua. Això es farà usant components que permeten expressar oralment una paraula i transcriure un text oral a un escrit.

Començar un projecte

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

 

RTENOTITLE


Disseny

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

 

Afegir notificacions

Per tal que l’usuari rebi el retorn 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

 

Programació

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

 

Fer 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

 

Introduir 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’introduint-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

 

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

Bitbot.cat

Aquest és un article del programa Bitbot.cat, podeu consultar la resta d'articles a:

Bitbot.cat és un programa implusat per la Secretaria de Telecomunicacions, Ciberseguretat i Societat Digital de la Generalitat de Catalunya, en col·laboració amb el Departament d’Ensenyament, que neix amb l’objectiu d’impulsar la millora de les competències digitals del jovent i promoure el creixement de les vocacions tecnològiques.

Una de les accions que es proposa aconseguir és la capacitació de monitores i monitors per a conduir i desenvolupar activitats educatives de lleure en els camps de la robòtica i la programació, per tal d’anar formalitzant aquesta oferta amb monitores i monitors certificats.