Crea la teva primera aplicació (Part 2): Completan Hello Purr

Ara que has configurat el teu equip i la teva dispositiu, i que has après com treballen el dissenyador i l’Editor de blocs, estàs llest per completar l’aplicació HelloPurr. En aquest punt, has de tenir el dissenyador obert al navegador, l’editor de blocs obert en una altra finestra, i el dispositiu triat (telèfon o emulador) connectat amb l’Editor de blocs.

Aquí hi ha una vista prèvia dels passos que seguiràs en aquest tutorial per completar l’aplicació:

Al Dissenyador:

• Afegir un component Label (Etiqueta) que digui “Pet the Kitty”.
• Pujar l’arxiu meow.mp3
• Afegir un component Sound (So) que reprodueixi l’arxiu meow.mp3.

En l’Editor de blocs:

• Crear un controlador d’esdeveniments que reprodueixi el component de so quan l’usuari premi el botó.

Afegir l’Etiqueta (Label)

En la Paleta

1. Arrossega i deixa anar el component Label al Visor, situant per sota del gatet. Apareixerà en la llista de components com Label1

En Propietats

1. Canvia la propietat Text de Label1 perquè digui “Pet the Kitty”. Veuràs el canvi del text en el dissenyador i en el dispositiu.
2. Canvia el Color de Fons (BackgroundColor) de Label1, fent clic al quadre
3. Canvia el Color de Text (TextColor) de Label1
4. Canvia la Mida de la Font (fontsize) de Label1 a 30

El dissenyador hauria ser així:

Afegir el so miau

En la Paleta

1. Fes clic a la capçalera marcada com Media per ampliar la secció en la paleta de components.
2. Arrossega un component Sound i col·loca-al Visor. Quan el col · loquis, apareixerà a la part inferior del visualitzador marcada com a components no visibles(Non-visible components).

Sota Mitjana

1. Fes clic a Add … (Afegeix …)
2. Puja l’arxiu meow.mp3 a aquest projecte.

En Propietats

1. Per al component Sound1 estableix el seu origen a meow.mp3.

El dissenyador hauria ser així:

Reproduint el so

Amb l’Editor de blocs definirem la forma de comportar-se de l’aplicació. Li direm als components que han de fer i quan fer-ho. Vas a dir-li al botó del gatet que reprodueixi un so quan l’usuari ho premi. Si els components són els ingredients d’una recepta, pots pensar en els blocs com les instruccions per cuinar.

L’editor de blocs té dues fitxes a la part superior esquerra: Built-in i My Blocks. Els botons situats sota cada fitxa amplien i exposen els blocs quan es fa clic en ells.Els blocs integrats (Built-in) són el conjunt estàndard de blocs que estan disponibles per a cada aplicació a construir. Els blocs sota meus blocs (My Blocks) contenen blocs específics que estan vinculats amb el conjunt de components que has triat per la teva aplicació.

Per fer que es reprodueixi de so, hauràs d’arrossegar i deixar anar el bloc Button1.Click i el bloc Sound1.Play l’editor. Els blocs es connecten entre si com peces d’un trencaclosques.

Passos per reproduir el so

1. Navega fins l’Editor de blocs. Pot estar cobert pel navegador web.
2. Fes clic a la pestanya My Blocks a la part superior esquerra.
3. Fes clic a Button1.
4. Arrossega i deixa anar el bloc when Button1.Click do a l’editor.
5. Fes clic a Sound1.
6. Arrossega el bloc call Sound1.Play en l’editor i col · loca-en el bloc when Button1.Click do.
7. Fes clic a la foto del gatet al teu dispositiu. Has sentir el miol del gatet.

El teu Editor de blocs ha ser així:

Empaquetant teva aplicació

Felicitats, la teva primera aplicació s’està executant! Si utilitzeu un telèfon, llavors l’aplicació s’està executant en el telèfon, però només funciona quan el telèfon està connectat a App Inventor. Si desenchufas el cable USB, l’aplicació desapareixerà. Pots tornar a connectar el telèfon per fer que torni. Per obtenir una aplicació que s’executi sense estar connectada a App Inventor, has “empaquetar” l’aplicació per produir un paquet d’aplicació (arxiu APK). En prémer Package for Phone (paquet per al telèfon) a la part superior dreta de la pàgina del dissenyador et mostrarà tres opcions d’embalatge:

1. Si el telèfon està connectat, pots descarregar i instal · lar automàticament l’aplicació al telèfon.
2. Pots descarregar l’aplicació al teu ordinador com un arxiu APK, que es pot distribuir i compartir qui vulguis, i instal · lar manualment en els telèfons usant el programa Android ADB.
3. Es pot generar un codi de barres, que es pot utilitzar per instal · lar l’aplicació en el teu telèfon amb l’ajuda d’un escàner de codi de barres, com l’escàner de codi de barres ZXing (disponible gratuïtament en l’Android Market). Aquest codi de barres funciona només per al teu propi telèfon. Si vols compartir l’aplicació amb els altres, hauràs de descarregar l’arxiu APK al teu ordinador i compartir l’arxiu.

Revisió

Aquestes són les idees clau recollides fins ara:

• Construeixes aplicacions mitjançant la selecció dels components (ingredients) i després dient-los què fer i quan fer-ho.
• S’utilitza el Dissenyador per seleccionar els components. Alguns components són visibles i altres no.
• Pots afegir els mitjans (imatges i sons) per les aplicacions carregant des del teu ordinador.
• Utilitzes l’Editor de blocs per acoblar els blocs que defineixen el comportament dels components
• Els blocs when ... do ...  (quan. .. fer …) defineixen controladors d’esdeveniments, que diuen als components que fer quan alguna cosa passa.
• Els blocs  call ...  (trucar a …) indiquen als components que coses fer.

Crea la teva primera aplicació amb un telèfon Android (Part 1): HelloPurr

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:

• foto del gatet
• so miau

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

1. Fes clic a Nou a la banda esquerra, prop de la part superior de la pàgina.
2. 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ò:

1. Arrossega i deixa anar el component Button a Screen1. El component Button es troba a la secció Bàsics de la Paleta.
2. Fes clic a Button1 a la llista Components.
3. A la llista de propietats, sota Imatge, fes clic a none … (cap).
4. Fes clic a add (afegir).
5. Puja l’arxiu kitty.png.
6. 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ó!

Crea la teva primera aplicació amb l’emulador (Part 1): Hello Purr

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. Quan hagis acabat la construcció de HelloPurr, estaràs preparat 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:

• foto del gatet
• so miau

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

1. Fes clic a Nou a la banda esquerra, prop de la part superior de la pàgina.
2. 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ò:

1. Arrossega i deixa anar el component Button a Screen1. El component Button es troba a la secció Bàsics de la Paleta.
2. Fes clic a Button1 a la llista Components.
3. A la llista de propietats, sota Imatge, fes clic a none … (cap).
4. Fes clic a add (afegir).
5. Puja l’arxiu kitty.png.
6. 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 amb l’emulador

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. Anem a utilitzar l’Editor de blocs per assignar els comportaments dels components, com el que ha de succeir quan l’usuari de la teva aplicació prem un botó.

L’Editor de blocs s’executa en una finestra seprada. En fer clic a Obre l’editor de blocs en 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 amb espai per a la col · locació de blocs per armar el programa, el que vas a fer a continuació.

Abans de continuar amb la construcció de l’aplicació, hauràs de iniciar l’emulador. Feu clic al botó New emulator a la part superior de la finestra. Rebràs un avís dient que l’emulador s’està iniciant, i et demana que tinguis paciència: L’emulador pot trigar un parell de minuts. L’emulador apareixerà inicialment amb una pantalla buida en negre. Espera fins que l’emulador estigui llest, amb un fons de pantalla de color, com es mostra a continuació. Fins i tot després que el fons aparegui, has d’esperar fins que el telèfon emulat hagi acabat la preparació de la targeta SD: hi haurà un avís a la part superior de la pantalla del telèfon mentre la targeta està sent preparada.També pots haver de fer servir el punter del ratolí sobre la pantalla del telèfon emulat per desbloquejar el dispositiu arrossegant el botó de bloqueig verda a la dreta.

Quan l’emulador estigui finalment llest, fes clic al botó Connect to device … (Connectar al dispositiu), seleccioneu l’emulador de la llista desplegable haciedo clic. Vas a veure una fletxa groga animada movent endavant i enrere, indicant que App Inventor s’està connectant al telèfon emulat. La creació d’aquesta connexió pot prendre un minut o dos. Quan acabi, la fletxa deixarà de moure i es posarà de color verd, i si ens fixem en la pantalla del telèfon emulat, veuràs allà al gatet – aquest és el començament de la teva aplicació!

Continua amb la segona part!