TEMA 1 1/18

CAPITOL 1

Hola Gateta

Aquest tema us ajuda a començar la creació d'aplicacions. Es presenten els elements clau de App Inventor, el Dissenyador de components i l'editor de blocs, i et guiarà en els passos bàsics per crear la teua primera aplicació, HolaGateta. En acabar, estaràs llest per construir aplicacions pel teu compte.

Un programa típic per a la primera vegada amb un nou sistema informàtic és imprimir el missatge "Hola Món" per demostrar que tot està connectat correctament. Aquesta tradició es remunta a la dècada de 1970 i el treball de Brian Kernighan en el llenguatge de programació C en els Laboratoris Bell (Brian és ara professor visitant a Google i treballa en l'equip d'App Inventor!). Amb App Inventor, fins i tot les més simples aplicacions fan més que mostrar només missatges: juguen i reaccionen sons en tocar el telèfon. Així que anem a començar immediatament amb una mica més emocionant, la teua primera aplicació (com es mostra a la Figura 1-1) serà "HolaGateta", una foto d'un gateta que miola quan la toques i ronca al sacsejar-la.

Figura 1-1. L'aplicació Hola Gateta

TEMA 1 2/18

El que aprendràs

El tema cobreix els següents temes:

• La construcció d'aplicacions mitjançant la selecció de components i després dir-los què fer i quan fer-ho.

• Utilitzar el Dissenyador de components per seleccionar els components. Alguns components són visibles a la pantalla del telèfon i alguns no ho són.

• Afegir elements multimèdia (sons i imatges) a les aplicacions mitjançant la càrrega del seu equip.

• Treballar en l'Editor de blocs per acoblar els blocs que defineixen el comportament dels components.

• Prova d'aplicacions amb proves en viu App Inventor. Això li permet veure com les aplicacions es veuen i es comporten al telèfon pas a pas, fins i tot quan l'estàs construint.

• Empaquetat de les aplicacions construïdes i descarregar-les al telèfon.

TEMA 1 3/18

L'entorn d'App Inventor

Podeu configurar l'aplicació Inventor utilitzant les instruccions en http://appinventor.mit.edu/explore/content/setup-mit-app-inventor.html.

App Inventor s'executa principalment a través del navegador, però cal descarregar algun programari per a l'escriptori de l'equip i canviar alguna configuració del telèfon. Normalment, pots posar-te en marxa en tan sols uns minuts, encara que de vegades hi ha problemes amb els drivers d'algún telèfon Android. Si tens qualsevol problema de telèfon, és recomanable començar a utilitzar l'emulador d'Android que ve inclòs amb la descàrrega d'App Inventor.

L'entorn de programació d'App Inventor consta de tres parts principals, tot es mostra a la Figura 1-2:

• El Dissenyador de components, que es mostra a la part esquerra de la Figura 1-2, s'executa en la finestra del teu navegador. S'utilitza per seleccionar components per a la teua aplicació i per determinar les seues propietats.

• L'Editor de blocs s'executa en una finestra separada del component de disseny. Sovint és més fàcil d'organitzar aquesta a la dreta del Dissenyador de components en la pantalla mentre estàs treballant en la seua aplicació. Utilitzeu l'Editor de blocs per crear comportaments dels components.

• Un telèfon et permet executar realment i provar la teua aplicació com ho estàs desenvolupant. Si no tens un telèfon Android a mà, pots provar les aplicacions que construeixen utilitzant l'emulador d'Android (que es mostra a la part inferior dreta de la Figura 1-2) que ve integrat amb el sistema.

Figura 1-2. El Dissenyador de components, Editor de blocs, i un emulador d'Android

TEMA 1 4/18

Comences App Inventor amb la navegació a http://beta.appinventor.mit.edu/. Et demanarà que entres en un compte de Google. Si no tens un compte de Google, te l'hauràs de crear.

Si aquesta és la primera vegada que heu fet servir App Inventor, veuràs la pàgina de projectes, que seran en la seua majoria en blanc perquè no s'ha creat cap projecte encara. Per crear un projecte, feu clic a “New” a la part superior esquerra de la pàgina, escriviu el nom del projecte "HolaGateta" (una paraula sense espais) i premeu “OK”.

La primera finestra que s'obre és el Dissenyador de components. Quan apareix, feu clic a “Open the Blocks Editor” al menú a la part superior dreta. L'Editor de blocs apareix en una finestra independent, amb l'ajuda d'una eina anomenada Java Web Start. (No s'heu de preocupar de tots els missatges Java, App Inventor utilitza Java, que ja ha d'estar instal·lat al seu ordinador, per ajudar a llançar l'Editor de blocs.) Aquest procés sol trigar uns 30 segons.

Si tot és correcte, l'Editor de blocs apareixerà i veuràs dos botons prop de la part superior dreta de la pantalla, com es mostra a la Figura 1-3.

Figura 1-3. Endolla un telèfon al teu ordinador o fes clic a "New emulator", a continuació, fes clic a "Connect to Device"

Si tens un telèfon amb Android i un cable USB, connecteu el telèfon a un ordinador i seleccioneu "Connect to Device..." Si per contra vols provar les aplicacions que construeixen usant un emulador, feu clic a "New emulator" i esperar uns 30 segons, mentre que es carrega l'emulador d'Android. Quan estigui en ple funcionament, feu clic a "Connect to Device..." perquè App Inventor execute la teua aplicació en l'emulador.

Si tot va bé, hauria d'aparèixer una finestra per al Dissenyador de components, una finestra de l'Editor de blocs, i la finestra de l'emulador cas d'escollir aquesta opció (la pantalla ha semblar-se a la Figura 1-2, indicada anteriorment, però amb les finestres gairebé buides). Si estàs tenint problemes aquí, revisa les instruccions de configuració en http://appinventor.mit.edu/explore/content/setup-mit-app-inventor.html.

TEMA 1 5/18

Disseny dels components

La primera eina que farem servir és el Dissenyador de Components (o simplement Designer). Els components són els elements que es combinen per crear aplicacions, com els ingredients d'una recepta. Alguns components són molt simples, com un component Label que mostra el text a la pantalla, o un component Button, que li toqui per iniciar una acció. Altres components són més elaborats: un Canvas que pot contenir imatges estàtiques o animacions, una acceleròmetre, un sensor de moviment que funciona com els controladors de Wii i detecta en moure o agitar el telèfon, o els components que fabriquen o envien missatges de text, reproduir música i vídeo, obtenir informació de llocs web, i així successivament.

Quan s'obre el Dissenyador, apareixerà com es mostra a la Figura 1-4.

Figura 1-4. El Dissenyador de Components d'App Inventor

El Dissenyador es divideix en diverses àrees:

• Cap al centre és una àrea blanca anomenada Visor. Aquí és on pots col·locar components i organitzar per traçar el que vols que semble la teua aplicació. El visor mostra només una indicació aproximada de com l'aplicació es veurà, així, per exemple, una línia de text pot trencar en un lloc diferent en l'aplicació del que es veu en la pantalla. Per veure com la teua aplicació realment apareixerà, hauràs de descarregar l'aplicació al teu telèfon (com fer això ho veurem una mica més endavant, a la secció "Empaquetat de l'aplicació per a la descàrrega") o veure-ho en l'emulador que ve amb App Inventor.

• A l'esquerra del visor és la paleta, que és una llista de components que es poden triar. La paleta es divideix en seccions, en aquest moment, només els components bàsics són visibles, però pots veure els components en altres seccions de la paleta fent clic a les capçaleres de Media, Animació, etc.

TEMA 1 6/18

• A la dreta del visor és la llista de components, que enumera els components del projecte. Qualsevol component que s'arrossega al visor apareixeran en aquesta llista. Actualment, el projecte té només un component en la llista: Screen1, que representa la pantalla del telèfon en si.

• A la llista de components hi ha una àrea que mostra els Media (imatges i so) en el projecte. Aquest projecte no té arxius multimèdia, però se li agregaran molt prompte.

A l'extrem dret hi ha una secció que mostra les propietats dels components, en fer clic a un element al Visor, podràs veure les seves propietats en aquesta llista. Les propietats són detalls sobre cada component que pots canviar. (Per exemple, en fer clic en un component Label, pots veure les propietats relacionades amb el color, text, tipus de lletra, etc.) En aquest moment, es mostren les propietats de la pantalla (anomenada Screen1), que inclouen un color de fons , una imatge de fons, i un títol.

Per a l'aplicació HolaGateta, tindràs dos components visibles (es pot pensar en aquests com a components que en realitat es poden veure en l'aplicació): el component Label diu "Accepta la Gateta" i un component Button amb una imatge d'una gata en ell. També necessitaràs un component de so no visible que sap com reproduir sons, com "meu" i un component de l'acceleròmetre per detectar quan el telèfon està sent sacsejat. No et preocupes, ara explicarem el procés pas a pas.

TEMA 1 7/18

Com fer una etiqueta

El primer component és afegir una etiqueta:

1. Anar a la paleta, feu clic a Label (que apareix al voltant de sis punts avall en la llista de components) i arrossegueu al Visor. Veuràs una forma rectangular que apareix a la pantalla, amb les paraules "Text for Label1".

2. Mira el quadre de propietats a la part dreta del dissenyador. Mostra les propietats de l'etiqueta. Hi ha una propietat anomenada Text a mig camí cap avall, amb una caixa de text de l'etiqueta. Canvieu el text a "Hola gateta" i premeu Intro. Veuràs el canvi de text en el Visor.

3. Canviar el BackgroundColor de l'etiqueta fent clic a la caixa, que actualment diu None, per seleccionar un color de la llista que apareix. Seleccionar Blau. També canviar el TextColor de l'etiqueta groga. Finalment, canvieu el Fontsize a 20.

El dissenyador ha d'aparèixer ara com es mostra a la Figura 1-5.

Figura 1-5. L'aplicació ara té una etiqueta

Comproveu tenir el telèfon connectat i l'Editor de blocs oberts. Heu de veure l'etiqueta al telèfon com ho afegeix al Dissenyador. En App Inventor es genera l'aplicació al telèfon, mentre selecciones els components en el dissenyador. D'aquesta manera, es pot veure immediatament com la seva aplicació es veurà. Això es coneix com a proves en viu, i també s'aplica a les conductes que creeu per als components de l'Editor de blocs, com veurem en breu.

TEMA 1 8/18

Afegir el botó

La gateta per HolaGateta s'implementa com un component Button; es crea un botó normal, i després canviar la imatge del botó per a la gateta. Fer el botó bàsic en primer lloc, anar a la paleta del Dissenyador al botó i feu clic (en la part superior de la llista de components). Arrossegueu-lo fins el visor, col·locant-lo sota l'etiqueta. Veuràs un botó rectangular que apareix a la pantalla. Després d'aproximadament 10 segons, el botó ha d'aparèixer al telèfon. Segueix endavant i toca al botó del telèfon. Creus que alguna cosa passarà? No passa res, doncs que la teua aplicació no li ha dit al botó fer res. Aquest és el primer punt important a comprendre sobre App Inventor: per a cada component s'agrega en el disseny, cal passar a la Editor de Blocs i crear el codi per fer que alguna cosa succeeixi amb aquest component (ho farem després d'acabar d'afegir els components que necessitem en el disseny).

Ara tenim un botó que utilitzarem per activar l'efecte de so quan algú fa clic, però realment vull que es vegi com la imatge de la gateta, no un vell i simple rectangle. Per fer el botó com la gateta:

1. En primer lloc, cal descarregar una imatge de la gateta i deseu-la a l'escriptori de l'ordinador. La imatge és l'arxiu anomenat gateta.png. (.PNG és un format d'imatge estàndard semblant a jpg i gif. Tots aquests tipus de fitxers funcionen en App Inventor, així com els arxius de so més estàndard com .mpg o .mp3 ...) També pot descarregar l'arxiu de so que necessitem, meu.mp3.

2. El quadre de propietats haurien de mostrar les propietats del botó. Si no és així, feu clic a la imatge del botó a la pantalla per mostrar les propietats del botó de la dreta. En el quadre Propietats, feu clic a l'àrea sota la imatge (que actualment llegeix None). Apareix un quadre amb un botó marcat Upload New...

3. Feu clic a Upload New... i veuràs "Upload File...". Feu clic a Browse..., busqueu i seleccioneu l'arxiu gateta.png que ha descarregat al seu ordinador abans, i feu clic a OK.

4. Veuràs un missatge de color groc a la part superior de la pantalla: "Uploading gateta.png to the AppInventor server". Després d'uns 30 segons, el missatge i la caixa de càrrega desapareixerà, i gateta.png ha d'aparèixer com la propietat d'imatge per al botó. També veuràs que aquest apareix en l'àrea de Media de la finestra del dissenyador, just a sota de la llista de components. I si ens fixem en el telèfon, podràs veure la imatge del gatet. En el botó ara es veu com un gatet.

5. Pots haver notat que la imatge del gatet al telèfon té les paraules "Text for button 1 " que apareix en ella. Probablement no vols que es veja en la teua aplicació, així que canvia la propietat Text for Button1 a alguna cosa així com "Hola Gateta," o simplement eliminar el text complet.

TEMA 1 9/18

Ara, el dissenyador ha d'aparèixer com es mostra a la Figura 1-6.

Figura 1-6. L'aplicació amb una etiqueta i un botó amb una imatge-hi

TEMA 1 10/18

Afegir el so “meu”

En la teu aplicació, vols que el gatet miole quan es prem la tecla. Per això, hauràs d'afegir el so meu i programar el comportament del botó per reproduir el so quan es prem el botó:

1. Si no t'has descarregat l'arxiu meu.mp3 a l'escriptori del teu ordinador, fes-ho ara.

2. Anar a la paleta a l'esquerra de la finestra del Dissenyador i feu clic a la capçalera de Media per expandir la secció Media. Arrossega un component de so i posa-lo en el Visor. Sembla que cau, apareix a la secció de la part inferior del visor de marcat "components no visibles". Components No visibles són objectes que fan coses per l'aplicació, però no apareixen a la interfície d'usuari visual de l'aplicació .

3. Feu clic en Sound1 per mostrar les seues propietats. Estableix el seu orige fins meu.mp3. Hauràs de seguir els mateixos passos per carregar l'arxiu des del teu ordinador com ho vas fer per a la foto de la gateta. En acabar, has de veure gateta.png i meu.mp3 aparèixer a la secció de Media del Dissenyador.

Ara has de tenir els components descrits a la Taula 1-1.

Taula 1-1. Els components que ha afegit a l'aplicació HolaGatetaComponent Paleta Nom assignat Objectiu

Button Basic Button1 Prem per fer el miol de la gateta.

Label Basic Label1 Mostra el text “Hola gateta.”

Sound Media Sound1 Escoltar el so meu

Afegir comportaments als Components

Acabes d'afegir Button, Label i Components de so com els blocs de construcció de la teua primera aplicació. Ara farem el miol del gatet quan es prem la tecla. Això es fa amb l'Editor de blocs. Si l'Editor de blocs encara no està oberta, feu clic a "Open the Blocks Editor" a la part superior dreta del Dissenyador de components.

Mira la finestra de l'editor de blocs. Aquí és on diràs als components el que cal fer i quan fer-ho. Vas a dir-li al botó de la gateta per reproduir un so quan l'usuari ho copeja. Si els components són ingredients d'una recepta, pots pensar en blocs com les instruccions de cocció.

TEMA 1 11/18

Fer el miol de la gateta

A la part superior esquerra de la finestra, veuràs botons etiquetats "Built-In" i “My Blocks”. Fes clic a “My Blocks”, i veuràs una columna que inclou un calaix per a cada component que has creat en el Dissenyador de "My Blocks": Button1 , Label1, Screen1 i Sound1. En fer clic a un calaix, et donen un munt d'opcions (blocs) d'aquest component que ha creat. (No et preocupes sobre la columna Built-In per ara; arribarem a això en altre tema). Fes clic al calaix de Button1. El calaix s'obre, mostrant una selecció de blocs que es poden utilitzar per explicar el botó de què fer, començant per Button1.Click a la part superior, com es mostra a la Figura 1-7.

Figura 1-7. En fer clic a Button1 mostra blocs del component

Feu clic al bloc etiquetat Button1.Click i arrossegament en l'àrea de treball. Quan estàs buscant per al bloc, t'adonaràs que la paraula "when" és més petit que Button1.Click. Els blocs que inclouen la paraula "when" estan anomenats controladors d'esdeveniments, que especifiquen quins components han de fer quan ocorre algun esdeveniment en particular. En aquest cas, l'esdeveniment que ens interessa que passa quan l'usuari fa clic a la gateta de l'aplicació (que en realitat és un botó), com es mostra a la Figura 1-8. A continuació, anem a afegir alguns blocs de programa per al que succeirà en resposta a aquest esdeveniment.

TEMA 1 12/18

Figura 1-8. Hauràs d'especificar una resposta per a que l'usuari faci clic al bloc Button.Click

Feu clic a Sound1 en My Blocks per obrir el calaix per al component de so, i arrossegar el bloc call Sound1.Play. (Recordeu que abans s'estableixi la propietat per Sound1 l'arxiu de so meu.mp3 s'ha descarregat a l'ordinador.) Pot notar en aquest punt que el bloc call Sound1.Play té una manera que pot cabre en un espai marcat com "do" en el bloc Button1.Click. App Inventor està configurat perquè només certs blocs encaixen entre si, d'aquesta manera, sempre sabràs que s'estàs connectant blocs que treballen realment junts. En aquest cas, els blocs amb la paraula "call" són els components que fan les coses. Els dos blocs ha d'encaixar entre si per formar una unitat, com es mostra a la Figura 1-9, i se sent un espetec quan es connecten.

Figura 1-9. Ara, quan algú fa clic al botó, el so meu sonarà

A diferència de codi de programació tradicional (que sovint es veu com un desordre de "paraules"), els blocs de App Inventor expliquen els comportaments que estàs tractant de crear. En aquest cas, estem essencialment dient, "Eh, App Inventor, quan algú fa clic al botó gateta, reproduir el so meu."

Posa a prova la teua app. Anem a comprovar per assegurar-se que tot funciona correctament, és important provar la teua aplicació cada vegada que s'afegeix alguna cosa nova. Prem el botó al telèfon (o feu clic amb l'emulador). Has d'escoltar el miol de la gateta. Felicitacions, la teua primera aplicació està funcionant!

TEMA 1 13/18

Afegir un ronquit

Ara farem que la gateta ronque quan li toques el botó. Anem a simular el ronc fent que el telèfon vibre. Això pot semblar dur, però de fet, és fàcil de fer, perquè el component de so que utilitza per reproduir el so meu pot fer que el telèfon vibre també. App Inventor l'ajuda a aprofitar aquest tipus de funcionalitat bàsica del telèfon sense haver de bregar amb la manera com el telèfon realment vibra. No ha de fer res diferent en el disseny, només cal afegir un segon comportament al clic del botó en l'Editor de blocs:

1. Anar a l'Editor de Blocs i premeu Sound1 de My Blocks per obrir el calaix.

2. Seleccioneu call Sound1.Vibrate i arrossegueu sota del bloc call Sound1.Play a la ranura Button1.Click. El bloc ha de fer clic en el seu lloc, com es mostra en la figura 1-10. Si no és així, intenteu arrossegar de manera que la xicoteta immersió a la part superior de call Sound1.Vibrate toca la xicoteta protuberància a la part inferior de call Sound1.Play.

Figura 1-10. Executant el so i vibració en l'esdeveniment Click

3. Probablement ha notat que la restricció de call Sound1.Vibrate inclou el text "mil·lisegons" a la part superior dreta. Una ranura oberta en un bloc vol dir que pots endollar alguna cosa en ell per especificar més coses sobre com funcionarà el comportament. En aquest cas, ha de dir-li al bloc de vibració quant temps ha de vibrar. Haurà d'introduir aquesta vegada en mil·lèsimes de segon (mil·lisegons), que és bastant comú per a molts llenguatges de programació. Per tant, perquè el telèfon vibri durant mig segon, posar en un valor de 500 mil·lisegons. Posar en un valor de 500, necessiteu prendre un bloc de nombres. Feu clic en un espai buit a la pantalla de disseny, a continuació, feu clic al botó verd de Matemàtiques al menú que apareix, com es mostra a la Figura 1-11. Heu de veure una llista desplegable, amb 123 com el primer element, 123 indica un bloc que representa un nombre.

Figura 1-11. Obrir el calaix de Matemàtiques

TEMA 1 14/18

4. Feu clic al 123 en la part superior de la llista i veuràs un bloc verd amb el nombre 123, com es mostra en la figura 1-12.

Figura 1-12. L'elecció d'un bloc de nombres (123 és el valor predeterminat)

5. Canviar el 123 per 500 fent clic i escrivint un nou valor, com es mostra en Figura 1-13.

Figura 1-13. Canviar el valor a 500

6. Connecteu el bloc número 500 al socket a la dreta de call Sound1.Vibrate, com es mostra a la Figura 1-14.

Figura 1-14. En connectar el 500 a la ranura mil·lisegons

Posa a prova la teua app. Proveu! Premi el botó al telèfon, i es sentirà el ronc de mig segon.

TEMA 1 15/18

Agitant el telèfon

Ara anem a afegir un últim element que es nodreix d'una altra característica interessant dels telèfons Android: fer que la gateta miole quan s'agita el telèfon. Per això, utilitzarem un component anomenat AccelerometerSensor que pot sentir quan s'agita o mou el telèfon.

1. Al dissenyador, ampliar l'àrea de Sensors i arrossegueu un AccelerometerSensor de la llista Paleta a Components. No es preocupeu per on s'arrossega, com passa amb qualsevol component no visible, no importa on ho poseu al visor, es traslladarà als "components no visibles", situat a la part inferior de la pantalla.

2. Voldràs tractar l'agitament del telèfon com un esdeveniment diferent, separat del clic de botó. Això significa que necessites un nou controlador d'esdeveniments. Anar a l'Editor de blocs. Hi ha d'haver un nou calaix per AccelerometerSensor1 a My Blocs. Obre'l i arrossegueu el bloc AccelerometerSensor1.Shaking; hauria de ser el segon bloc de la llista.

3. Igual que vas fer amb el so i el clic d'un botó, arrossegueu un bloc call Sound1.Play i encaixeu-lo en el buit a AccelerometerSensor1.Shaking. Proveu per Shaking del telèfon.

Figura 1-15. Els blocs per HolaGateta

TEMA 1 16/18

Empaquetat de l'aplicació per descarregar-la

App Inventor és una eina informàtica en el núvol, és a dir, la seva aplicació s'emmagatzema en els servidors en línia de Google a mesura que treballa. Així que si tanca l'aplicació Inventor, la seva aplicació estarà allà quan torni, no has de guardar res al teu ordinador com ho faries amb un arxiu de Word o una pista de música. Això també li permet comprovar fàcilment l'aplicació mentre està connectat al seu telèfon (el que anomenem les proves en viu), sense haver de descarregar res al seu telèfon. L'únic problema és que si et desconnectes el telèfon de App Inventor, l'aplicació que s'executa al telèfon s'aturarà, i no trobaràs una icona per a ell en cap lloc, ja que mai s'ha instal·lat realment.

Pots empaquetar i instal·lar l'aplicació completa perquè funcioni en qualsevol telèfon, fins i tot quan no està connectat a l'ordinador. En primer lloc, assegurat que el teu telèfon permet a les aplicacions que es descarreguen de llocs que no siguin l'Android Market. En general, això es fa anant a Ajustos → Aplicacions al telèfon i marcant la casella de "fonts desconegudes". Després, anar en el Dissenyador de App Inventor, feu clic a "Package for Phone", i seleccioneu "Download to Connected Phone" on ha d'haver-hi el missatge "Saving" i després un procés "Packaging", que pot trigar fins a un minut. Després de que "Packaging" desaparegui, segueixi esperant durant altres 10-15 segons mentre que l'aplicació acabi es descarrega al telèfon. Rebràs una confirmació de descàrrega quan tot està complet.

Quan l'hages descarregat, mira les aplicacions disponibles al telèfon, i ara veurem HolaGateta, l'aplicació que acabem de construir. Pot executar com qualsevol altra aplicació. Ara pot desconnectar o reiniciar el telèfon i matar a totes les aplicacions i la seva nova aplicació empaquetada encara hi serà.

És important entendre que això significa que la teua aplicació empaquetada és ara independent del projecte a App Inventor. Pot fer més feina en el projecte de App Inventor en connectar el telèfon amb el cable USB com abans. Però això no canviarà l'aplicació empaquetada que està instal·lada al telèfon. Si realitzes canvis addicionals a la teua aplicació en App Inventor, pots empaquetar el resultat i descarregar la nova versió per substituir l'antiga al telèfon.

Seguir endavant i empaquetar la seua aplicació HolaGateta que te en el seu telèfon. Quan hages fet això, pots compartir amb la teua família i amics, també!

TEMA 1 17/18

Compartint l'App

Pot compartir la seua aplicació en un parell de maneres. Per compartir l'aplicació executable, primer feu clic a "Package for Phone " i seleccioneu "Download to this Computer. " Això crearà un fitxer amb una extensió .APK a l'ordinador. Necessites carregar aquest arxiu perquè sigui accessible a la web. Una vegada que l'aplicació és en línia, altres persones poden instal·lar en els seus telèfons obrint el navegador del telèfon i descarregar-la. Ells han de saber que han de permetre "fonts desconegudes" a la configuració de l'aplicació al seu telèfon per poder instal·lar aplicacions que no són del Android Market.

També pots compartir el codi font (blocs) de la teua aplicació amb un altre desenvolupador App Inventor. Per això, feu clic a My Projects , comproveu l'aplicació que voleu compartir (en aquest cas, HolaGateta) i seleccioneu More Actions → Download Source . L'arxiu creat en l'equip tindrà una extensió .zip. Pots enviar aquest arxiu a algú, i podran obrir App Inventor, seleccionant More Actions → Upload Source, i seleccionant el fitxer .zip. Això li donarà a l'usuari la seva pròpia còpia completa de la seua aplicació, que es pot editar i personalitzar sense afectar la seua versió.

Variacions

Ara que has creat una aplicació completa i tens l'oportunitat de jugar amb ella (i potser descarregar-la per compartir amb altres persones), pots haver notat un parell de coses. Fes un cop d'ull als següents articles i considera com ho abordaries en la teua aplicació. Com és probable que aviat descobrisques, sovint al construir una aplicació, trobaràs formes de millorar i canviar, i després tornar-hi per programar les noves idees. No et preocupis, això és una bona cosa, això significa que estàs en el bon camí d'esdevenir un desenvolupador d'aplicacions en tota regla!

• En agitar el telèfon, els miols sonaran estranys, com si estiguessin fent ressò. Això és perquè el sensor acceleròmetre activa l'esdeveniment sacsejant moltes vegades per segon, de manera que els miols es superposen. Si ens fixem en el component so en el Dissenyador, veuràs una propietat anomenada Interval mínim. Això determina quants sons successius es pot iniciar. Està fixat actualment en mig segon (500 mil·lisegons), que és inferior a la durada d'un sol miol. En jugar amb l'interval mínim, pot canviar la quantitat dels miols que es superposen.

• Si executeu l'aplicació empaquetada i camineu una mica amb el telèfon a la butxaca, el teu telèfon miolarà cada vegada que es mou de sobte. Les aplicacions d'Android estan típicament dissenyades per seguir funcionant fins i tot quan no estàs buscant a elles, la teua aplicació segueix comunicant-se amb l'acceleròmetre i el miol segueix endavant. Per sortir realment de l'aplicació, obri HolaGateta i prem el botó del menú del telèfon. Se li oferirà l'opció d'aturar l'aplicació.

TEMA 1 18/18

Resum

Aquests són alguns dels conceptes que hem tractat en aquest tema:

• A construir aplicacions mitjançant la selecció dels components en el disseny i després dir-los què fer i quan fer-ho en l'Editor de blocs.

• Alguns components són visibles i alguns no ho són. Els visibles apareixen a la interfície d'usuari de l'aplicació. Els no-visibles serveixen per a fer coses com reproduir sons.

• Per definir el comportament dels components mitjançant l'acoblament de blocs en l'editor de blocs. En primer lloc, allargar un controlador d'esdeveniments com Button1.Click, a continuació, col·locar blocs de comandes com Sound.play dins d'ella. Els blocs dins Button1.Click es durà a terme quan l'usuari fa clic al botó.

• Alguns comandaments necessiten informació addicional perquè funcionin. Un exemple és el de vibració, el que necessita saber quants milisegons a vibrar. Aquests valors es diuen arguments.

• Els nombres es representen com blocs de nombres. Podeu connectar aquests a comandes que tenen nombres com a arguments.

• App Inventor té components del sensor. El AccelerometerSensor pot detectar quan el telèfon es mou.

• Pot empaquetar les aplicacions que creen i descarregar al telèfon, on s'executen independentment d'App Inventor.

4. La Figura 1-15 mostra els blocs per a l'aplicació HolaGateta completat.