Construcció de la primera aplicació: HelloPurr

Transcripción

1 Construcció de la primera aplicació: HelloPurr Ara que hem configurat l ordinador i el dispositiu emulador, i que hem après com el Dissenyador i el treball de l Editor de blocs, estem llestos per a construir l aplicació HelloPurr. En aquest punt, cal tenir el dissenyador o editor de blocs oberts en el navegador, i, o bé un dispositiu Android o un emulador d Android connectat amb l Editor de blocs. HelloPurr : toca el gatet i escolta el miau HelloPurr és una aplicació senzilla que es pot construir en un temps molt curt. Es pot crear un botó que té una imatge d un gat en ell, i després, programar el botó per a que, quan es faci clic, es reprodueixi el so d un miau. Per a construir HelloPurr, necessitaràs un arxiu d imatge d un gat i un arxiu d àudio amb un so " miau ". Descarrega aquests arxius a l ordinador. Per a descarregar: després de fer clic en un vincle, fes clic dret sobre la barra d imatge o so i selecciona " Guardar como". Guarda ambdós arxius en una carpeta de l escriptori o de descàrregues, o en qualsevol lloc on puguis trobar fàcilment més tard. Gatet foto : kitty.png ( botó dret del ratolí i guardar ) Meow so : meow.mp3 ( botó dret del ratolí i guardar ) Selecciona els components de disseny de la teva app Els Components App Inventor es troben al costat esquerre de la finestra Dissenyador sota la paleta de títol. Els components són els elements bàsics que s'utilitzen per fer les aplicacions al telèfon Android. Són com els ingredients d'una recepta. Alguns components són molt simples, com un component Label, que només mostra el text a la pantalla, o un component Button (# 1 esquerra) que es toca per iniciar una acció. Per utilitzar un component en la seva aplicació, hauràs de fer clic i arrossegar cap a l'espectador enmig de Dissenyador. Quan s'agrega un component al Visor (# 1 a baix), també apareixerà a la llista de components en el costat dret del visor. Components (# 2 a baix) tenen propietats que es poden ajustar per canviar la forma en què el component apareix o es comporta dins de l'aplicació. Per veure i canviar les propietats d'un component(# 3 a baix), primer ha de seleccionar el component desitjat en la llista de components.

2 Passos per a la selecció de components i configuració de propietats HelloPurr tindrà un component Button que mostra la imatge del gatet que es va descarregar anteriorment. Per aconseguir això: Pas 1a. Des de la interfície d'usuari de la paleta, arrossegueu i deixeu anar el component Button a Screen1 ( # 1 ). Pas 1b. Per fer que el botó tingui una imatge d'un gat, en el panell Propietats, a la imatge, feu clic sobre el text "Res... " i feu clic a " Pujar Nou... " ( # 2 ). Una finestra s'obrirà perquè pugui triar el fitxer d'imatge. Feu clic a " Examinar " i després aneu a la ubicació de l'arxiu kitty.png que s ha descarregat anteriorment( #3 ). Feu clic al fitxer kitty.png, feu clic a "Obre " i feu clic a "D'acord".

3 Pas 2. Canvia la propietat Text del botó: Eliminar "Text per a Button1", deixant la propietat de text del botó en blanc perquè no hi hagi escriptura sobre la cara del gatet. El dissenyador ha de tenir aquest aspecte: Si tota la imatge del gatet no apareix, es pot solucionar aquest problema mitjançant l establiment de les propietats d altura i amplada del botó en "Fill pattern". Per això, fes clic en el component Button, ves a la dreta al panel Propietats, desplaça t des de a baix fins al fons fins on diu Width i fes clic en la paraula "automàtic..." per activar la llista desplegable. Selecciona l opció "Fill pattern". Fes el mateix amb la propietat Height.

4 Pas 3. A la paleta bàsica, arrossegar i deixar anar el component Label al Visor ( # 1 ), col locant sota la imatge del gatet. Apareixerà sota de la llista de components com Label1. Al panell Propietats, canviï la propietat Text de Label1 a llegir "Pet del gatet" ( # 2 ). Veuràs el canvi de text en el Dissenyador i en el seu dispositiu. Canviar el Mida de Lletra de Label1 a 30 ( # 3 ). Canvieu el BackgroundColor de Label1 fent clic a la caixa ( # 4 ): es pot canviar a qualsevol color que t'agrada. Canvieu el textcolor de Label1 ( # 5 ) a qualsevol color que t'agrada. Aquí, el color de fons s'estableix en blau i el color del text s'estableix groga.

5 Pas 4. Sota paleta, feu clic al calaix dels mitjans de comunicació i arrossegament un component de so i posar en el Visor ( # 1 ). On sigui que se't cau, apareixerà en l'àrea en la part inferior del visualitzador marcada components no visibles. Sota el panell Multimèdia, feu clic a Afegeix... ( # 2 ) Aneu a la ubicació de l'arxiu meow.mp3 que va descarregar anteriorment i pujar-lo a aquest projecte ( # 3 ). Al panell Propietats, veure que la propietat Font Actualment diu Cap... Feu clic a la paraula Cap... per canviar Font del component SONIDO1 a meow.mp3 ( # 4 ). Programació amb l'editor de blocs Fins ara, heu fet l'organització de la pantalla i els components de la seva aplicació en el dissenyador, que està en una finestra del navegador web. Per començar a programar el comportament de l'aplicació, cal anar a l'editor de blocs. Si no tens un editor de blocs en execució, feu clic al botó Obre l'editor de blocs en la part superior dreta de la finestra del dissenyador. Nota: Una manera fàcil de canviar entre l'editor de blocs i dissenyador és l'ús de la barra de tasques que mostra les aplicacions que s'executen en l'equip. L'Editor de blocs s'executa localment com un programa Java i està representat per una icona de la tassa de cafè. El dissenyador s'està executant en el seu navegador web perquè pugui arribar-hi fent clic a la icona del seu navegador. Una vegada que tinguis l'editor de blocs al davant, continua amb el pas per començar a programar la seva aplicació amb els blocs.

6 Fer el joc de so Pas 1. A la paleta Els meus blocs a la part esquerra de l'editor de blocs, fes clic al calaix Button1 per obrir-lo. Arrossegar i deixar anar el bloc Button1.Click en l'àrea de treball (l'àrea oberta a la dreta). Aquests blocs verds s'anomenen blocs de controlador d'esdeveniments. Els blocs de controlador d'esdeveniments especifiquen com el telèfon ha de respondre a certs esdeveniments: un botó s'ha premut, el telèfon està sent sacsejat, l'usuari està arrossegant el seu dit sobre la pantalla, etc. Els blocs de controlador d'esdeveniments són de color verd i l'ús de la paraula when. Per exemple, quan Button1.Click és un controlador d'esdeveniments. Pas 2. Feu clic al calaix SONIDO1 i arrossegament el bloc Sound1.Play i connecteu-lo a la secció del bloc quan Button1.Click "fer". Els blocs es connecten entre si com peces d'un trencaclosques i es pot sentir un so de clic quan es connecten.

7 Els blocs de color porpra i blau s'anomenen blocs de comandes, que es col loquen en el cos de controladors d'esdeveniments. Quan s'executa un controlador d'esdeveniments, s'executa l'script en el seu cos. Un comando és un bloc que especifica una acció a realitzar (per exemple, reproduir so) quan s'activa l'esdeveniment (per exemple, en prémer Button1). Els seus blocs han de tenir aquest aspecte en aquest punt: Ara es pot veure que el bloc de comandaments es troba al controlador d'esdeveniments. Aquest conjunt de blocs significa; "Quan es fa clic a Button1, SONIDO1 s executa". El controlador d'esdeveniments és com una categoria d'acció (per exemple, un botó es fa clic), i la comanda especifica el tipus d'acció i els detalls de l'acció (per exemple, jugant so un so especificat). Prova-ho! En fer clic al botó que ha de sentir el miol del gatet. Felicitacions, la seva primera aplicació s'està executant! Empaquetatge l aplicació Mentre el dispositiu (emulador o telèfon / tauleta) s'ha connectat a App Inventor, l aplicació ha estat funcionant en temps real en el dispositiu. Si desconnectes l'emulador / telèfon / tablet des de l'editor de blocs, l'aplicació s'esvairà. Sempre es pot fer tornar per tornar a connectar el dispositiu. Per tenir una aplicació en execució sense estar connectat a App Inventor, has de "empaquetar" l'aplicació per produir un paquet d'aplicació (arxiu Apk). Per a "empaquetar" l'aplicació al telèfon, connecteu-vos a l emulador, descarregueu l aplicació i assegureu-vos que la icona de telèfon de color a la part superior dreta de l'editor de blocs és de color verd.