Aquesta pàgina t’ajudarà a començar la construcció de la teva primera aplicació: Una imatge d’un gatet que miola quan ho acaricies. Pots veure també un vídeo d’aquesta aplicació sent construïda. Quan hagis acabat la construcció de HelloPurr, estaràs llest per dissenyar i construir aplicacions pel teu compte. Abans de començar, assegureu-vos d’haver configurat el teu equip .
A mesura que construeixes HelloPurr, aprendràs a utilitzar les tres eines fonamentals de treball de App Inventor:
- El Dissenyador, el lloc on dissenyes la teva aplicació. S’executa al navegador web.
- L’Editor de blocs, el lloc on es configura el comportament de l’aplicació. És una aplicació independent amb la seva pròpia finestra.
- El emulador, un dispositiu mòbil virtual que s’executa en el teu equip juntament amb App Inventor
Per construir Hello Purr necessitaràs una imatge del gatet i un so miau. Descàrrega aquests arxius al teu ordinador:
Inicia el dissenyador i crea un nou projecte
Al navegador web, vagi a la pàgina web de App Inventor en http://beta.appinventor.mit.edu . Si aquesta és la primera vegada que fas servir App Inventor, veuràs lapàgina de projectes buida, sense projectes-hi encara. Ha de tenir aquest aspecte:
Crea un nou projecte
- Fes clic a Nou a la banda esquerra, prop de la part superior de la pàgina.
- Introdueix el nom del projecte HelloPurr (una sola paraula, sense espais) al quadre de diàleg que apareix, fes clic a D’acord.
Al navegador s’obrirà el Dissenyador, el lloc on es seleccionen els components per la teva aplicació, i ha de tenir aquest aspecte:
Selecciona els components per al disseny de la teva aplicació
Els components d’App Inventor es troben al costat esquerre de la pantalla de disseny, sota l’etiqueta Palette. (Paleta). Els components són els elements bàsics que s’usen per crear les aplicacions per al telèfon Android. Són com els ingredients d’una recepta. Alguns components són molt simples, com el component Label que només mostra un text a la pantalla, o el component Button (Botó), que es toca per iniciar una acció. Altres components són més elaborats: un Llenç de dibuix (Canvas) que pot emmagatzemar imatges fixes o animacions, un sensor Acceleròmetre (de moviment) que funciona com un comandament de Wii i detecta si es mou o s’agita el telèfon, components que creen o envien missatges de text, components per reproduir música i vídeo, components per obtenir informació de llocs web, i més encara.
Els components d’App Inventor es troben al costat esquerre de la pantalla de disseny, sota l’etiqueta Palette (paleta). Per utilitzar un component en la teva aplicació, hauràs de fer clic i arrossegar sobre el visor al centre del Dissenyador. Quan s’afegeix un component al visor, també apareix a la llista de components a la dreta del visor.
Els components tenen propietats que es poden ajustar per canviar la manera com el component apareix dins de l’aplicació. Per veure i canviar les propietats d’un component, primer has de seleccionar el component desitjat en la llista de components.
Passos a seguir per seleccionar els components i ajustar les propietats
HelloPurr tindrà un component Botó amb la propietat imatge ajustada a la imatge kitty.png que has descarregat abans. Per establir això:
- Arrossega i deixa anar el component Button a Screen1. El component Button es troba a la secció Bàsics de la Paleta.
- Fes clic a Button1 a la llista Components.
- A la llista de propietats, sota Imatge, fes clic a none … (cap).
- Fes clic a add (afegir).
- Puja l’arxiu kitty.png.
- Elimina el text per Button1 que apareix sota la propietat Text.
El teu dissenyador hauria de tenir aquest aspecte:
Obre l’Editor de blocs, i connecta el telèfon
El dissenyador és una de les tres eines clau que utilitzaràs en la creació de les teves aplicacions. La segona és l’Editor de blocs. La tercera és el telèfon. Anem a utilitzar l’Editor de blocs per assignar els comportaments dels teus components, com el que ha de succeir quan l’usuari de la teva aplicació premi un botó.
L’Editor de blocs s’executa en una finestra seprada. En fer clic a Obre l’editor de blocs de la finestra del dissenyador, l’arxiu del programa Editor de blocs s’ha de descarregar i executar. Aquest procés pot trigar 30 segons o més. Si no s’obre l’Editor de blocs, podria ser perquè el teu navegador no està configurat per executar aplicacions Java descarregades de forma automàtica. En aquest cas, busca l’arxiu descarregat anomenat AppInventorForAndroidCodeblocks.jnlp i obre’l. La finestra de l’editor de blocs s’ha de veure com es mostra a sota, amb “calaixos” per als blocs de programa a l’esquerra, i un gran “llenç” buit d’espai per a la col · locació de blocs per armar el programa, el que vas a fer a continuació.
Abans de continuar la construcció de l’aplicació, hauràs de connectar el telèfon. Assegura’t que ja has configurat el teu telèfon. Ara connecta el teu telèfon a un ordinador amb un cable USB, i fes clic a Connectar a dispositiu … a la part superior de la finestra de l’editor de blocs. Veuràs una llista desplegable amb el telèfon a la llista, identificat pel seu tipus de model (per exemple, HT99TP800054). Fes clic al. Veuràs una fletxa groga animada moure endavant i enrere, indicant que App Inventor s’està connectant al telèfon. La creació d’aquesta connexió pot prendre un minut o dos. Quan acaba, la fletxa deixarà de moure i es tindrà color verd, i si ens fixem en la pantalla del telèfon, veuràs allà al gatet – aquest és el començament de la teva aplicació!
Using AppInventor 
