PicCall

PicCall et mostra com utilitzar App Inventor per fer aplicacions per utilitzar funcions reals del telèfon, com trucar als amics.

Abans de començar

Per executar PicCall, el teu telèfon estigui configurat i activat per fer trucades. Si no és així, pots encara construir PicCall per practicar, però el telèfon no podreu fer trucades.

Atenció: PicCall no funciona en tots els telèfons Android en la implementació actual de App Inventor: tindràs un avís d’error en alguns telèfons quan es tracti de triar un número de telèfon. A més, no podràs veure tots els teus contactes només aquells creats a partir de Gmail. Aquestes limitacions s’eliminaran en el futur.

En aquest tutorial, a diferència de a HelloPurr, se li donen noms als components, en comptes d’utilitzar els noms predeterminats que App Inventor ofereix (com “Button1”). L’ús de noms significatius és una bona pràctica de programació: t’ajuda a mantenir els programes ordenats al teu cap, i ajuda a altres a entendre teus programes.

El teu telèfon ha de contenir també alguns contactes amb fotos. Pots utilitzar l’aplicació Contactes per guardar les imatges dels teus contactes. També pots fer clic a Contactes al teu compte de Gmail en el teu ordinador i afegir fotos allà.

Assegura’t que el teu ordinador i el telèfon s’han configurat per utilitzar App Inventor, i navega fins al lloc web de App Inventor en beta.appinventor.mit.edu . Inicia un nou projecte a la finestra del Designer (dissenyador). Nómbralo PicCall i canvia el Title (títol) de la pantalla a PicCall. Obre l’Editor de blocs, fes clic a Connect to Phone, i comprova que el telèfon ha iniciat l’aplicació App Inventor.

Primers passos

Comença com a HelloPurr col·locant un botó a la pantalla. Fes que el botó tingui 150 píxels d’amplada i 150 píxels d’alt. Ajusta la propietat Image del botó a una imatge. Pots fer servir la imatge del gatet si la tens a mà – canviaràs aquesta imatge aviat. Ajusta la propietat Text del botó a “Press to Call”, encara que també canviarà això aviat.

Canvia el nom del component Button a TopButton (botó a dalt) (Crearàs 1 BottomButton (botó baix) més endavant en el tutorial.) Per canviar el nom, d’un component, fes clic al botó Rename al panell components i introdueix el nou nom.

En aquest tutorial, a diferència de a HelloPurr, se li donen noms als components, en comptes d’utilitzar els noms predeterminats que App Inventor ofereix (com “Button1”). L’ús de noms significatius és una bona pràctica de programació: t’ajuda a mantenir els programes ordenats al teu cap, i ajuda a altres a entendre teus programes. No confonguis name (el nom) d’un component amb text (el text) d’un component. Textés el text que apareix a la pantalla. Name és el nom que el teu programa fa servir per fer referència al component. Veuràs el nom en l’estructura de la llista Components al Designer (dissenyador) i en els calaixos de l’editor de blocs.

Fer trucades telefòniques

En HelloPurr, vas fer que el telèfon reproduís un so quan el botó era premut. En PicCall gairebé el mateix, excepte que en comptes de reproduir un so, el telèfon fa una trucada.

El component de App Inventor PhoneCall fa trucades telefòniques. Pots trobar PhoneCall a la secció Social de la Paleta. Obre la secció i arrossega un componentPhoneCall al visor. Es col · locarà a la zona Non-visible components. Nómbralo TopCall. La propietat PhoneNumber de PhoneCall determina el número que voleu marcar. Ajusteu a algun número de telèfon al que t’agradaria dir. Així és com el Dissenyador ha de quedar:

Ara canvia a l’Editor de blocs i arrossega el bloc when TopButton.Click do. A la ranura do, col · loca un bloc call TopCall.MakePhoneCall des del calaixTopPhoneCall, de manera que el controlador d’esdeveniments quedi així:

Prova el que hem fet fins ara al telèfon: Prem el botó i fes la trucada. Es pot empaquetar això com una aplicació. Seria una aplicació força limitada, sempre trucant al mateix número, encara que algunes persones poden trobar útil.

Informació de contacte del telèfon

A més de fer trucades telefòniques, les aplicacions de App Inventor també poden obtenir informació de la llista de contactes del telèfon. Això es fa amb el componentPhoneNumberPicker (Selector de número de telèfon).

Arrossega un component PhoneNumberPicker de la secció Social de la Paleta, col · loca sota TopButton i Canvia-li el nom a TopPick. PhoneNumberPicker és n tipus de botó: quan el pressiones, porta al capdavant teva llista de contactes del telèfon i et permet triar algun. Cámbai el nom del PhoneNumberPicker a TopPick, i canvia la seva Text a “Press to pick a number to call”. Prova prement el selector al telèfon: has de veure aparèixer teus contactes, i podràs triar un. Res passarà després de triar, perquè encara no has indiacado als components que facin res. Això serà el següent.

Utilitzant el selector

Canvia a la finestra de blocs i obre el calaix TopPick. Arrossega el bloc when TopPick.AfterPicking do. Aquest et permet definir un controlador d’esdeveniments que diu el que s’ha de fer després d’haver escollit un nombre dels teus contactes.

Ara obre el calaix TopCall i arrossega setembre TopCall.PhoneNumber to i introdueix a la ranura del bloc when TopPick.AfterPicking do. Ara arrossegaTopPick.PhoneNumber del calaix TopPick a la presa buida. Així és com el controlador d’esdeveniments ha de quedar:

Prova-ho al telèfon: Prem el botó selector, seleccioneu un contacte i un número de telèfon. A continuació, prem el botó de trucada de telèfon per fer la trucada. Afegeix una ordre al controlador d’esdeveniments per establir la propietat de TopButton Text a TopPick.PhoneNumber:

Imatges

Si tens una imatge emmagatzemada amb els teus contactes, pots fer que el botó la mostri, juntament amb el número de telèfon, en lloc d’utilitzar sempre la imatge del gatet. Per això, afegeix una ordre al controlador d’esdeveniments, per establir la propietat Image de TopButton perquè sigui la propietat Picture de TopPick:

PhoneNumberPicker té dues propietats que són fàcils de confondre: Picture i Image. Picture és la imatge associada amb el contacte que s’ha seleccionat. Image és la imatge del component PhoneNumberPicker tal com apareix en el Designer (dissenyador) i al telèfon.

Millores

Aquí hi ha algunes variacions que pots provar:

• Afegeix un segon botó, BottomButton i un segon PhoneNumberPicker, perquè la teva aplicació ofereixi l’opció de dos nombres.
• Afegeix una etiqueta amb instruccions sobre com utilitzar l’aplicació.
• Mostra el nom de la persona a qui es diu a més del número de telèfon. Utilitza altra etiqueta més per mostrar la informació addicional.

Usant PicCall

Pots empaquetar PicCall i descarregar-lo al telèfon perquè puguis utilitzar-lo quan no estiguis connectat a l’ordinador. Però hi ha una gran limitació: Cada vegada que es reinicia PicCall, comença de nou i no recorda el que has triat l’última vegada. Més endavant, veurem com utilitzar el component TinyDB per crear aplicacions que puguin recordar informació d’una vegada a una altra. Aquesta informació se li crida dades persistents.

Revisió

Aquestes són les idees principals tractades en aquest tutorial:

• Pots nomenar els components mitjançant el botó Rename.
• App Inventor té components que poden utilitzar la informació emmagatzemada al telèfon. PhoneNumberPicker pot obtenir números de telèfon i fotos dels teus contactes, i PhoneCall pot fer trucades.

Atenció: En alguns sistemes Android, la llista que apareix en executar el selector de número de telèfon no mostra les imatges associades amb els seus contactes. Tot i que la imatge no es mostra, la propietat “imatge” seguirà retornant una imatge que es mostrarà quan s’executi l’aplicació, sempre que el telèfon tingui una imatge per a aquest contacte.

MoleMash

Que estàs construin

En el joc MoleMash, un talp apareix en posicions aleatòries en un camp de joc, i el jugador aconsegueix punts golpendo al talp abans que desaparegui. Aquest tutorial mostra com construir MoleMash com un exemple de joc simple que utilitza una animació.

En aquest toturial se suposa que has completat algun dels tutorials HelloPurr amb l’emulador , o HelloPurr amb el telèfon i PaintPot .

Primers passos

Connecta’t al lloc web de App Inventor i comença un nou projecte. Nómbralo MoleMash, i també estableix el Title(títol) de la pantalla a MoleMash. Obre l’Editor de blocs i connecta el telèfon.

També descàrrega aquesta imatge d’un talp i guarda-la al teu ordinador.

Introducció

Dissenyaràs el joc perquè el talp es mogui cada mig segon. Si és tocat la puntuació s’incrementarà en un punt i el telèfon vibrarà. Prement restart posaràs el comptador a zero.

Aquest tutorial introdueix:

• Sprites d’imatge
• Temporitzadors i el component Clock
• Procediments
• Prendre un nombre aleatori entre 0 i 1
• Blocs de text
• Typeblocking (creació de bloc mitjançant el teclat)

Els primers components

Molts components et resultaran familiars de tutorials anteriors:

• Un Canvas (llenç) anomenat MyCanvas. Aquesta és l’àrea on el talp es mourà.
• Una Label (etiqueta) anomenada ScoreLabel que mostra la puntuació, p. ex. el nombre de vegades que el jugador colpeja el talp.
• Un Button (botó) anomenat ResetButton

Arrossega aquests components des de la Paleta al Visor i assigneu els seus noms. Col · loca en MyCanvas dalt i s’ajusta seves dimensions a 300 píxels d’amplada per 300 píxels d’alt. Canvia la propietat Text de ScoreLabel a Score: —. Canvia la propietat Text de ResetButton a Reset. Afegeix també un component Sound i nómbralo Noise. Usaràs Noise per fer que el telèfon vibri quan el talp sigui tocat, de la mateixa manera que vas fer amb el ronc del gat en HelloPurr.

Temporitzadors i el component Clock (rellotge)

Necessitaràs que el talp salti periòdicament, i faràs això amb l’ajuda d’un component Clock.

El component Clock proporciona diverses operacions relacionades amb el temps, com dir-te la data. Aquí, usaràs el component com un temporitzador que es dispari a intervals regulars. L’interval de tret està determinat per la propietat TimerInterval de Clock. Arrossega un component Clock, es col · locarà a l’àrea de components no visibles (non-visible components). Nómbralo MoleTimer. Ajusta la seva TimeInterval a 500 milisegons per fer que el talp es mogui cada mig segon. Assegura’t queEnabled (activat) està marcat.

Afegir un Sprite d’imatge (imatge animada)

Per afegir el talp en moviment utilitzarem un sprite.

Els sprites són imatges que es mouen a la pantalla en un Canvas (llenç). Cada sprite té una velocitat i una direcció, i també un interval que determina la freqüència dels moviments del sprite a la seva velocitat assenyalada. Els sprites també poden detectar quan es toquen. En MoleMash, el talp té una velocitat zero, de manera que no es mou per si mateix. En el seu lloc, vas a configurar la posició del talp cada vegada que s’activi el temporitzador. Arrossega un component ImageSprite al Viewer(visor). Trobaràs aquest component en la categoria Animation de la Paleta. Col · loca dins de l’àrea MyCanvas. Estableix aquestes propietats per al sprite Mole:

• Picture: Usa mole.png, el qual has descarregat a l’inici d’aquest tutorial.
• Enabled: marcat
• Interval: 500
• L’interval no importa aquí, perquè la velocitat del talp és zero: no es mou per si mateix.
• Heading: 0 La direcció no importa aquí tampoc, perquè la velocitat és 0.
• Speed: 0.0
• Visible: activat
• Width: Automatic
• Height: Automàtica

Has de veure les propietats X i Y ja emplenades. Aquestes van ser determinades pel lloc on posaves el sprite quan ho arrossegar a MyCanvas. Arrossega una mica més al talp. Has de veure com canvien X i Y. Has de veure també al talp al telèfon connectat, i moure pel telèfon quan ho arrossega al Designer (dissenyador). Ja has especificat tots els components. El Designer hauria ser així. Fixa’t que Mole està inclòs sota MyCanvas en l’estructura de la llista de components, indicant que el sprite és un sub-component de la tela (canvas).

Comportament de components i controladors d’esdeveniments

Ara anem a especificar el comportament dels components. Això introdueix algunes idees noves de App Inventor. La primera és la idea d’un procediment.

Un procediment és una seqüència d’instruccions a les quals es pot fer referència a totes alhora amb un únic comandament. Si tens una seqüència que cal utilitzar més d’una vegada en un programa, aquesta es pot definir com un procediment, per no haver-la repetir cada vegada que la facis servir. Els procediments en App Inventor poden prendre arguments i retornar valors. Aquest tutorial cobreix només el cas més simple: els procediments que no tenen arguments i no tornen cap valor.

Definir els procediments

Defineix dos procediments:

• MoveMole mou el sprite Mole a una nova posició a l’atzar en el llenç.
• UpdateScore mostra la puntuació, en canviar el text de ScoreLabel

Comença amb MoveMole:

• En l’Editor de blocs, sota Built-In, obre el calaix Definition. Arrossega un bloc te procedure i canvia l’etiqueta procedure a MoveMole.
  

  Nota: Hi ha dos blocs similars: procedure i procedureWithResult. Aquí has d’utilitzar procedure.

  El bloc to MoveMole té una ranura amb l’etiqueta do. Aquí és on has poses les declaracions per al procediment. En aquest cas hi haurà dos estats: un per establir la posició del talp x i un altre per definir la posició i. En cada cas, establiràs la posició a una fracció aleatòria, entre 0 i 1, de la diferència entre la mida del llenç i la mida del talp. Crearàs el valor usant blocs random-fraction i multiplicació i resta. Trobaràs aquests blocs al calaix Math.

• Construeix el procediment MoveMole. La definició completa ha de tenir aquest aspecte:
  

  Deixa buida la ranura arg de MoveMole perquè MoveMole no pren cap argument. Observa com els blocs es connecten entre si: La primera instrucció utilitza el bloc Mole.X gets per definir la posició horitzontal de talp. El valor connectat a la ranura del bloc és el resultat de multiplicar:

  1. el resultat del bloc call random-fraction, el qual té un valor entre 0 i 1
  2. el resultat de restar l’amplada del talp de l’amplada de la tela.

  La posició vertical es manegen de manera similar.

Amb MoveMole fet, el següent pas és definir una variable per a la puntuació anomenada score per mantenir la puntuació, (nombre d’encerts) i donar-li valor inicial 0.També hem de definir un procediment UpdateScore que mostri la puntuació en ScoreLabel. El contingut actual per mostrar en ScoreLabel és el text “Score:” pres del valor de score.

• Per crear la part de l’etiqueta “Score:”, arrossega un bloc text des del calaix Text. Canviar el bloc a “Score:” en lloc de “text”.
• Utilitza un bloc join per unir aquest al bloc que dóna el valor de la variable score. Pots trobar el bloc join al calaix Text.
• Així és com score i UpdateScore han d’aparèixer:

Afegeix un temporitzador

El següent pas és fer el talp mantenir-se en moviment. Aquí és on farem servir MoleTimer. El component Clock té un controlador d’esdeveniments anomenat when … Timer que es dispara repetidament a una velocitat determinada per TimerInterval.

Estableix MoleTimer per trucar a MoveMole cada vegada que s’activi el temporitzador, mitjançant la construcció d’un controlador d’esdeveniments com aquest:

Observa com el talp comença a moure al telèfon tan aviat com es defineix el controlador d’esdeveniments. Aquest és un exemple de com les coses en App Inventor comencen a succeir de forma instantània, tan aviat com es defineixen.

Afegeix un controlador tàctil per el talp

El programa ha d’incrementar la puntuació cada vegada que es toqui el talp. Els sprites, com els llenços, responen als esdeveniments tàctils. Així que crea un controlador d’esdeveniments tàctil per Mole que:

1. Incrementi la puntuació.
2. Truqui a UpdateScore per mostrar la nova puntuació.
3. Fer que el telèfon vibri durant 1/10 de 2 (100 mil · lisegons).
4. Truqui a MoveMole perquè el talp es mogui immediatament, en lloc d’esperar al temporitzador.

Així és com ha d’aparèixer això en blocs. Segueix i acobla els blocs Mole.Touched com es mostren.

Heus aquí un consell: Pots utilitzar typeblocking: per crear ràpidament els blocs.

• Per crear un bloc de valor 100, només has d’escriure 100 i prémer Intro.
• Per crear un bloc MoveMole, només has d’escriure MoveMole seleccionar el bloc que vulguis de la llista

Restablir la puntuació

Un detall final és restablir la puntuació. Això simplement és qüestió de fer que el botó Reset canviï la puntuació a 0 i truqui a UpdateScore.

Programa Complet

Aquí hi ha el programa MoleMash complet:

Variacions

Quan tinguis en funcionament el joc, és possible que desitgis explorar algunes variacions. Per exemple:

• Fer al joc variar la velocitat del talp en resposta al bé que el jugador ho està fent. Per variar la rapidesa dels moviments del talp, hauràs de canviar la propietatInterval de MoleTimer s.
• Portar un registre de quan el jugador colpeja el talp, i quan falla el tir, i mostrar una puntuació amb els encerts i errors. Per fer això, hauràs de definir controladors tàctils per Mole, com fins ara, i per MyCanvas. Una de les qüestions subtils, si el jugador toca el talp, això també compta com un toc per la tela? La resposta és sí. Tots dos esdeveniments es registraran.

Revisió

Aquestes són algunes de les idees incloses en aquest projecte:

• Els sprites són sensibles al tacte i es poden programar per moure en un llenç.
• El component Clock pot ser utilitzat com un temporitzador per fer que ocorrin esdeveniments a intervals regulars.
• Es defineixen els procediments mitjançant els blocs to.
• Per a cada procediment que es defineix, App Inventor crea automàticament un bloc de trucades associat i el col · loca al calaix My Definitions.
• La crida a random-fraction produeix un nombre entre 0 i 1
• Els blocs de text especifiquen, literalment, de la mateixa manera que els blocs de nombres especifiquen nombres literals
• Typeblocking és una manera de crear blocs de forma ràpida, escrivint el nom d’un bloc

Paintpot 2

PaintPot (Part 2)

En aquest projecte s’estén la Part 1 del tutorial per crear punts grans i petits, per demostrar com s’utilitzen les variables globals.

Començant

Assegura’t d’haver completat el procés de configuració i de tenir el teu projecte PaintPot Part 1 complet i carregat.

Comença des d’on ho vas deixar al final de la part 1, amb el projecte obert a in App Inventor. Fes servir el botó Save As per fer una còpia de PaintPot i poder treballar amb la nova versió sense afectar l’original. Anomena la còpia com PaintPotV2 (sense espais). Després de guardar la còpia, has de veure PaintPotV2 al Dissenyador.

Creant les variables

La mida dels punts dibuixats en el llenç està determinat pel controlador d’esdeveniment when DrawingCanvas.Touched on call Drawing.DrawCircle és anomenat amb r, el radi del cercle, igual a 5. Per canviar el gruix, tot el que necessitem fer és utilitzar diferents valors per ar. Utilitza r = 2 for punts petits i r = 8 per als punts grans.

Comença per crear noms per a aquests valors:

1. Obre l’Editor de blocs, si no està ja obert, i connecta el telèfon. El telèfon es mostrin els botons i el llenç que vas crear anteriorment.
2. En l’Editor de blocs, a la columna Built-In, obre el calaix Definitions. Arrossega un bloc def variable. Canvia el text que diu variable a small (petit). Un signe d’exclamació groc d’advertència apareixerà al bloc. Si passes el ratolí sobre el veuràs un missatge d’advertència explicant que el bloc té un connector buit.
3. Necessites omplir en el connector amb un bloc de nombre que especifiqui el valor per small – usa 2 com a valor. Per crear el bloc de nombre, escriu el número 2.Apareixerà un menú, que mostra tots els blocs possibles, que inclouen “2” en el seu nom. Fes clic en el primer, que és el número 2 en si, i un bloc de nombre amb el valor 2 hauria d’aparèixer. Col · loca en el bloc def variable. La marca groga d’advertència desapareixerà, perquè l’espai buit s’ha omplert. (El segon valor apareix al menú és el bloc de matemàtiques atan2, que no vas a utilitzar aquí.)

Aquests són els passos de la seqüència:

Ja has definit una variable global anomenada small el valor és el número 2.

De la mateixa manera que per small, defineix una variable global big, el valor sigui 8.

Finalment, defineix una variable global dotsize i dóna-li un valor inicial de 2.

Podries preguntar si no seria millor l’estil de programació per fer que el valor inicial de dotsize ser el valor de small en lloc de 2. Això seria cert, excepte per una subtil qüestió de programació: Fer això suposaria que small ja té un valor quan a dotsize s’assigna el seu valor. En App Inventor no pots fer suposicions sobre l’ordre en què es processaran els blocs def. En general, és clar, desitjaràs especificar l’ordre en què són assignades les variables. Pots fer això assignant tots els valors quan s’iniciï l’aplicació, utilitzant l’esdeveniment Inici de pantalla. El tutorial Quiz Em dóna un exemple de la inicialització.

L’ús de variables

Ara canvia la crida a DrawCircle al controlador d’esdeveniments contacte perquè utilitzi el valor de dotsize en lloc d’utilitzar sempre 5.

En l’Editor de blocs, canviar a la columna My Blocks, i obre el calaix My Definitions Has de veure sis nous blocs, per a cada una de les tres variables definides:

• Un bloc global … que produeix el valor de la variable
• Un bloc setembre global … que estableix la variable a un nou valor.

Aquests blocs s’han creat de forma automàtica, de manera semblant a la manera com els blocs de x i i es creen quan es defineix el controlador d’esdeveniment when DrawingCanvas.Touched a la part 1 d’aquest tutorial. “Global” significa “variable global”, en contrast amb els arguments de controladors d’esdeveniments, els blocs estan etiquetats com “valor”. La diferència és que els arguments valor només són accessibles dins del cos del controlador d’esdeveniments, mentre que les variables globals són accessibles en tot el programa.

• Vés al controlador d’esdeveniments when MyCanvas.Touched i reemplaça el bloc de nombre 5 en call DrawCircle pel bloc global dotsize del calaixMyDefinitions.

Canvi dels valors de les variables

Ara crea una forma per canviar dotsize de petit (2) a gran (8). Fes això amb els botons.

1. Al Dissenyador, arrossega un component HorizontalArrangement al panell de visualització sota del component DrawingCanvas Nomena el component comBottomButtons
2. Arrossega el botó Wipe existent a BottomButtons.
3. Arrossega dos components botó més de la Paleta dins BottomButtons, col · locant al costat del botó Wipe.
4. Anomena els botons com ButtonBig i ButtonSmall, i canvia la seva Text (text) a “Big dots” i “Small dots”, respectivament.
5. En l’Editor de blocs sota My Blocks, crea un controlador d’esdeveniment when … Clicked des ButtonSmall que canviï dotsize al valor de small. Per canviar dotsize fa servir el bloc setembre global dotsize to des del calaix MyDefinitions i col · loca-en el bloc global small.
6. Crea un controlador d’esdeveniment similar per ButtonBig.

Els dos controladors d’esdeveniment Click haurien de tenir aquest aspecte:

Ja està! Pots dibuixar en PaintPot i utilitzar els nous botons per dibuixar punts, ja siguin grans o petits. Tingues en compte que en arrossegar el dit encara dibuixes una prima línia. Això és perquè els canvis que acabes de realitzar no afecten la manera com es diu a DrawLine.

Aquí hi ha el programa complet en el Dissenyador

i en la finestra de blocs.

Un error en el qual pots treballar: El programa que acabes de construir, té amb un petit error. Si comences a dibuixar abans de prémer qualsevol dels botons de color per a la pintura, el color de la pintura serà negre, però després de triar un color, no hi ha manera de tornar a negre. Pensa en com es pot arreglar això.

Revisió

Has creat variables globals usant blocs def des del calaix Definitions.

Per a cada variable global que es defineix, App Inventor proporciona automàticament un bloc global que dóna el valor de la variable, i un bloc setembre global … ment per canviar el valor de la variable. Aquests blocs es poden trobar al calaix My Definitions.