View source for App per aprendre idiomes


[[File:Apprendreidiomes.png|border|left|400px|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ó '''[[Ejercicio:_Introducción_a_AppInventor|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 &nbsp;'''“Proyectos”''' i &nbsp;'''“Comenzar un proyecto nuevo”''':

&nbsp;

[[File:ApprendreIdiomes 01.png|center|RTENOTITLE]]

== <br/> 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''':

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

&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]]

<br/> I ja ens sortirà la imatge al botó:

&nbsp;

[[File:ApprendreIdiomes 08.png|center|RTENOTITLE]]

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 09.png|center|RTENOTITLE]]

&nbsp;

Amb lo que ens quedaria així:

&nbsp;

[[File:ApprendreIdiomes 10.png|center|RTENOTITLE]]

=== Com introduir la resposta ===

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

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 12.png|center|RTENOTITLE]]

&nbsp;

Canviem el text del botó com hem vist abans:

&nbsp;

[[File:ApprendreIdiomes 13.png|center|RTENOTITLE]]

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

&nbsp;

[[File:ApprendreIdiomes 15.png|center|RTENOTITLE]]

&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''':

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

&nbsp;

[[File:ApprendreIdiomes 18.png|center|RTENOTITLE]]

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 19.png|center|RTENOTITLE]]

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 20.png|center|RTENOTITLE]]

&nbsp;

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

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

&nbsp;

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

&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;

[[File:ApprendreIdiomes 24.png|center|RTENOTITLE]]

&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ó.

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

&nbsp;

[[File:ApprendreIdiomes 25.png|center|RTENOTITLE]]

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

&nbsp;

[[File:ApprendreIdiomes 26.png|center|RTENOTITLE]]

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

&nbsp;

[[File:ApprendreIdiomes 29.png|center|RTENOTITLE]]

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

&nbsp;

[[File:ApprendreIdiomes 31.png|center|RTENOTITLE]]

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

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

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

&nbsp;

[[File:ApprendreIdiomes 35.png|center|RTENOTITLE]]

&nbsp;

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

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

&nbsp;

[[File:ApprendreIdiomes 37.png|center|RTENOTITLE]]

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 38.png|center|RTENOTITLE]]

&nbsp;

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

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

&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.

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

&nbsp;

[[File:ApprendreIdiomes 41.png|center|RTENOTITLE]]

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 42.png|center|RTENOTITLE]]

&nbsp;

== 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''':

&nbsp;

[[File:ApprendreIdiomes 43.png|center|RTENOTITLE]]

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

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

&nbsp;

[[File:ApprendreIdiomes 47.png|center|RTENOTITLE]]

&nbsp;

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

&nbsp;

[[File:ApprendreIdiomes 48.png|center|1024px|RTENOTITLE]]

&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 i en altres llenguatges de programació, '''procediments''':

&nbsp;

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

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

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

&nbsp;

[[File:ApprendreIdiomes 54.png|center|RTENOTITLE]]

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

&nbsp;

[[File:ApprendreIdiomes 56.png|center|RTENOTITLE]]

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

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

&nbsp;

[[File:ApprendreIdiomes 58.png|center|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&nbsp;al nostre conjunt de blocs i fent que la condició quedi dintre del seu espai:

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

&nbsp;

[[File:ApprendreIdiomes 60.png|center|RTENOTITLE]]

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

&nbsp;

[[File:ApprendreIdiomes 62.png|center|RTENOTITLE]]

&nbsp;

Amb el qual ens queda així:

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

&nbsp;

[[File:ApprendreIdiomes 64.png|center|RTENOTITLE]]

== Bitbot.cat ==

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

*[[Recursos_formació_BitBot|Formació presencial '''Bitbot.cat''']] 
*[[Bitbot|Formació semipresencial '''Bitbot.cat''']] 

'''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'''.