Embedded Files
1. Introducció al Thunkable
1. Introducció al 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. 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.
- 2. Editor de blocs
Al panell de l'esquerra ens apareixen en primer lloc 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 continuació tenim 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 la part central és on anirem arrossegant els blocs de codi i construint tota la lògica de l'aplicació.
2. Gestionar esdeveniments
2. Gestionar esdeveniments
Els blocs de l'Exemple 1 especifiquen una resposta (say "Hola Anna" 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.
Exercici 1: Ajuda un viatger a comunicar-se en altres llengües
Exercici 1: Ajuda un viatger a comunicar-se en altres llengües
L'aplicació ha de dir una frase útil per quan vas de viatge (p.e. "On és el lavabo?") amb almenys quatre idiomes diferents. Cada idioma ha de tenir un botó que quan el cliquis digui la frase (important!, posa un nom diferent a cada component botó per poder-los identificar fàcilment a la part de programació). A la part superior posa un títol amb la frase que diran els botons.
Utilitza el bloc translation of de la funcionalitat Speech. L'hauràs de situar com a text del bloc say de la mateixa funcionalitat.
Exercici 2: Millorem l'app del viatger I
Exercici 2: Millorem l'app del viatger I
L'aplicació que hem fet fins ara és una mica limitada, ja que només tradueix una frase...
Insereix un text input a la interfície de disseny (al lloc on hi havia el títol amb la frase) i realitza la corresponent programació per tal que l'aplicació no tradueixi un text concret sinó qualsevol text que introdueixi l'usuari.
Al bloc de traducció li has de dir que tradueixi el text que l'usuari ha introduït al text input (propietat text del text input).
3. Afegir recursos
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.e. reduint el pes de les imatges (sempre JPG).
Imatges
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.
4. Propietats dels components
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 (pe. 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.
Exercici 3: Millorem l'aplicació del viatger II
Exercici 3: Millorem l'aplicació del viatger II
Quines millores podem afegir a l'aplicació?
Per exemple:
Posar una imatge amb la bandera de l'idioma a cada botó.
Introduir un camp de text on es mostri la traducció.
Fes que la imatge del botó seleccionat canviï durant 1 segon per indicar quin és l'idioma escollit.
Quina més?
from Canva Education
Page updated
Report abuse