1 INTERACCIONS BÀSIQUES

1.1 INTRODUCCIÓ A THUNKABLE

En aquest curs aprendrem conceptes bàsics de programació alhora que els anem aplicant al desenvolupament d'aplicacions per a telèfons mòbils i tauletes. Utilitzarem una eina senzilla i ràpida que funciona amb un llenguatge gràfic de blocs, s'anomena Thunkable, i és una evolució del popular MIT App Inventor. Els resultats no són tan professionals com les aplicacions desenvolupades amb llenguatges de programació textuals (Java, C, etc.) i l'eina té alguns punts febles, però és molt útil per a fer els primers passos en el món de la programació d'aplicacions i començar a conèixer els elements i estructures de programació comunes en tots els llenguatges.

Thunkable té dues pantalles principals, la pantalla de disseny (Design) i l'editor de blocs (Blocks). Primer heu de dissenyar la pantalla de la vostra aplicació afegint els components visibles necessaris a Design, i a continuació especifiqueu el comportament interactiu de l'aplicació a l'editor de blocs. 

Un cop dissenyada i programada l'aplicació, la podeu provar en el vostre ordinador amb la funció Web Preview o amb el vostre telèfon amb l'aplicació Thunkable Live. Per veure com queden petits canvis en el disseny o funcionalitats pot ser més pràctic utilitzar la funció Web Preview que la podeu deixar oberta en una pestanya del navegador, però en un ordinador no tenim accés als sensors i algunes de les funcionalitats dels telèfons i per tant en alguns casos ens caldrà provar l'aplicació directament al telèfon amb Thunkable Live o instal·lant-la. També cal tenir present que l'aspecte de la previsualització web no sempre és el mateix que tenen les aplicacions quan s'executen al telèfon o tauleta.

1.1.1 Pantalla de disseny

A la part superior esquerra hi apareixen els components (screens, labels, imatges, botons, etc.) que ja tenim a l'aplicació. A sota hi tenim els components disponibles a Thunkable que podem afegir a l'aplicació. A la part central és on realitzem el disseny de les nostres pantalles arrossegant els components i ajustant-ne la mida i la posició. Quan seleccionem un component a la dreta de la pantalla ens apareix el menú de propietats d'aquell component. 

1.1.2 Editor de blocs

Al panell de l'esquerra ens apareixen en primer lloc un llistat dels components de disseny que tenim a l'aplicació, els que hi hem posat nosaltres. Clicant a sobre de cada component s'obre un menú amb els diferents blocs de programació que tenim disponibles per aquell component. A continuació tenim els blocs generals de programació agrupats per categories (control, lògica, text, etc.). I, finalment, tenim els blocs d'una sèrie de funcionalitats extres que podem incloure a l'aplicació (sons, càmera, alertes, sensors, etc.).

A la part central és on anirem arrossegant els blocs de codi i construint tota la lògica de l'aplicació.

1.2 GESTIONAR ESDEVENIMENTS

Els blocs de l'Exemple 1 especifiquen una resposta (say "Hola Roger" in Catalan) a un determinat esdeveniment (When Button1 Click). Aquest sistema de programació, molt utilitzat, es coneix com a programació basada en esdeveniments (o Even handler). En aquest paradigma de programació, l'execució del flux o instruccions del programa està determinat per esdeveniments com ara accions de l'usuari (clics, entrada de text, etc.), accions dels sensors o internes de la mateixa aplicació (quan s'obre una pantalla, quan transcorre un cert temps, etc.).

Per tant, la programació del comportament d'una aplicació consisteix a programar quines accions s'hauran d'executar quan succeeixi un determinat esdeveniment.

1.3 AFEGIR RECURSOS

Si volem que a l'aplicació hi hagi imatges, animacions, es reprodueixi un vídeo o un so, tenim dues opcions: una és entrar l'adreça (URL) on hi ha el recurs i l'altre és pujar el fitxer del recurs a l'aplicació. A l'apartat Assets podem gestionar els fitxers de tots els recursos que tenim a l'aplicació. L'avantatge del primer sistema (escriure la URL) és que l'aplicació "pesarà" menys i ocuparà menys espai de memòria al dispositiu de l'usuari, el problema és que si canvia la URL l'aplicació no trobarà el recurs i si la connexió és dolenta, tardarà molt a carregar-lo.

En general s'aconsella que els recursos s'incorporin a la mateixa aplicació, però procurant que ocupin poc espai, p.ex. reduint el pes de les imatges.

Una propietat important a tenir en compte, en el cas de les imatges, és Picture Resize Mode, aquesta propietat és la què controla com es redimensiona la imatge original per ajustar-la a l'espai que li hem reservat, podeu triar entre les següents opcions:

• Cover: redimensiona la imatge a la seva alçada o amplada màxima sense importar la qualitat de la imatge.

• Contain: redimensiona la imatge perquè s’adapti a la zona sense canviar-ne la qualitat.

• Stretch: l'alçada de la imatge canviarà per omplir el component segons la longitud.

• Repeat: repeteix la imatge amb la seva qualitat original a tota l'àrea del component.

• Center: situa la imatge al centre del component.

Generalment s'utilitzen les opcions cover o contain.

1.4 PROPIETATS DELS COMPONENTS

Cada component té una sèrie de propietats que ens permeten ajustar com es mostrarà (el color, el fons, la lletra, etc.). Les propietats dels components que fixem a la interfície de disseny són les propietats inicials que tindrà el component quan s'obri l'aplicació, però la majoria d'aquestes propietats les podem modificar quan es produeixi un esdeveniment (p.ex. quan s'obri la pantalla o l'usuari faci clic) a través de codi amb l'ordre set (col·loca). També podem fixar les propietats inicials dels components, així com altres accions que s'hagin d'executar quan s'obre l'aplicació o una de les pantalles, amb els esdeveniments del component pantalla whenScreen.Starts i whenScreen.Opens. WhenScreen.Starts només s'executa una vegada, quan s'obre l'aplicació, en canvi whenScreen.Opens s'executa quan s'obre la pantalla i cada cop que l'usuari hi retorna.