MoleMash 2

Que estàs construint

Aquest tutorial et mostra com construir in joc similar al arcade Whac-A-MoleTM. Específicament, el teu objectiu és arribar a un talp que apareix aleatòriament en un de cinc forats fixats. Cada vegada que ho aconsegueixis, la teva puntuació s’incrementarà en un punt.

Per tal de posar de relleu les noves funcions de App Inventor-la fitxa opcions Avançades i les capes Z per als Sprites-aquesta aplicació té un enfocament diferent al tutorial original de Mole Mash , el qual no és necessari haver realitzat amb la finalitat de fer aquest. Has, de tota manera, estar familiaritzat amb els fonaments de App Inventor – l’ús del Dissenyador de components per construir una interfície d’usuari i ús de l’Editor de blocs per especificar controladors d’esdeveniments.

Introducció

Aquest tutorial inclou:

1. Creació d’una llista dels components
2. L’ús de la funcionalitat de la secció Avançat de l’Editor de blocs per obtenir i establir propietats arbitràries per als components
3. Tenir esdeveniments del joc controlats pel component Clock
4. L’ús de capes en Z per assegurar que un sprite (ImageSprite o una Ball) apareix per davant d’un altre

Primers passos

Connecta’t a la pàgina web de App Inventor i comença un nou projecte. Estableix la propietat del títol de la pantalla Title a nom apropiat, com “Mole Mash”. Obre l’Editor de blocs i conéctalo al telèfon. Descàrrega aquests arxius d’imatge (creats per Yun Miao) fent clic dret sobre ells, i després afegeix-los al projecte prement el botó “Afegeix …” en el panell de mitjans.

hole.png	mole.png

Configuració dels components

La interfície d’usuari contindrà un total de 6 ImageSprites: 5 forats immòbils i 1 talp, que es mourà a la part superior dels forats. Utilitza el dissenyador de components per crear la interfície d’usuari. Quan hagis acabat, ha de ser semblant a la imatge de sota. No et preocupis per alinear els forats de manera uniforme. Hauràs especificar la seva localització a través de les seves propietats X i Y. Les instruccions addicionals estan per sota de la imatge.

Crea els següents components arrossegant des de la paleta al visor.

Tipus de component	Grup de la Paleta	Com ho nombrarás	Objectiu del component
Canvas	Basic	GameCanvas	El camp de joc
ImageSprite (5)	Animation	Hole1, …, Hole5	Forats per aparèixer el talp
ImageSprite	Animation	Mole	El talp
HorizontalArrangement	ScreenArrangement	ScoreArrangement	Per veure la puntuació
Label	Basic	ScoreTextLabel	Per mantenir “Puntuació:”
Label	Basic	ScoreValueLabel	Per mantenir la puntuació (nombre de vegades que s’assoleix al talp)
Clock	Basic	MoleClock	Per controlar el moviment del talp
Sound	Mitjana	Buzzer	Perquè vibri quan es toca el talp

Fes els següents canvis en les propietats dels components:

Component	Acció
Canvas1	Canvia BackgroundColor a Verd. Canvia Width a 320 píxels. Canvia Height a 320 píxels.
Hole1	Canvia X a 20 i Y a 60 (a dalt esquerra).
Hole2	Canvia X a 130 i Y a 60 (dalt centre).
Hole3	Canvia X a 240 i Y a 60 (a dalt dreta)
Hole4	Canvia X a 75 i Y a 140 (baix esquerra).
Hole5	Canvia X a 185 i Y a 140 (baix dreta).
Mole	Canvia Picture a “mole.png”. Canvia Z a 2 perquè el talp aparegui per davant dels altres ImageSprites, que per defecte tenen valor 1 per Z.
ScoreTextLabel	Canvia Text a “Score:”.
ScoreTextValue	Canvia Text a “0”.

No hi fa la configuració de la propietat de Picture per als forats; anem a establir la propietat en l’Editor de blocs.

Afegir comportaments als components

Heus aquí un resum del que necessitem crear amb els blocs:

1. Crear variables:
   1. holes: una llista dels forats
   2. currentHole: el forat del qual el talp està sortint
2. Quan l’aplicació s’inicia:
   1. Completar la llista dels forats.
   2. Establir la propietat Picture de cada forat a “hole.png”.
   3. Trucar al procediment MoveMole (baix).
3. Crear un procediment per MoveMove per:
   1. Establir currentHole a un forat a l’atzar de la llista holes.
   2. Moure el talp a la ubicació de currentHole.
4. Fer que MoleClock truqui a MoveMole cada vegada que el temporitzador es dispari (cada segon).
5. Implementar un controlador que fa el següent quan el talp es toca:
   1. Afegeix un a la puntuació.
   2. Fer que el telèfon vibri.
   3. Trucar a MoveMole.

Per continuar, obre l’Editor de blocs.

Creació de variables

Crea les variables holes i currentHole. Per ara, els donarem “falsos” valors inicials, anem a establir els seus valors inicials reals al controlador d’esdevenimentsScreen1.Initialize, que s’executa quan l’aplicació s’inicia. (Per raons tècniques, els components no pot ser referits als blocs def, que s’executen abans que l’aplicació s’iniciï) Aquí hi ha una imatge i la llista dels blocs que es necessiten:

.

Tipus de bloc	Calaix	Propòsit
def variable es (holes)	Definition	Mantenir una llista dels forats.
make a list	Lists	Crear una llista buida, que s’omple quan s’inicia el programa.
def variable es (currentHole)	Definition	Mantenir el forat actual del talp.
number (0)	Numbers	Proporcionar un valor inicial requerit per currentHole.

Com sempre, els comentaris (crear blocs amb el botó dret del ratolí) es recomana però no és obligatori.

Iniciant l’aplicació

El primer esdeveniment es produeix en qualsevol programa en Screen1.Initialize, pel que posarem el codi d’inici a aquest controlador. En concret, anem a afegir els components dels forats a la llista holes, establirem la propietat Picture de cada forat a la imatge “hole.png”, i anomenarem a MoveMole. Com que encara no hem escritMoveMole, crearem un procediment buit amb aquest nom, que anem a omplir més tard.

A continuació hi ha una imatge i la taula dels elements que necessites crear. Tingues en compte que el calaix “Any ImageSprite” (Qualsevol ImageSprite) es troba sota la pestanya “Advanced” a la dreta de “Built-In” i “My Blocks” en l’Editor de blocs.

Tipus de bloc	Calaix	Propòsit
Screen1.Initialize	Screen1	Especifiqueu ha de passar quan l’aplicació s’inicia.
add items to list	Lists	Afegeix els valors a …
holes	My Definitions	… La llista de forats:
component Hole1	Hole1	• Forat de la part superior esquerra
component Hole2	Hole2	• El forat central superior
component Hole3	Hole3	• L’orifici superior dret
component Hole4	Hole4	• L’orifici inferior esquerre
component Hole5	Hole5	• L’orifici inferior dret
foreach	Control	Especificar que ens agradaria …
name (hole)	Definitions	… Una variable anomenada “hole” …
holes	My Definitions	… A prendre en cada un dels valors de la llista holes.
ImageSprite.Picture	Any Image Sprite	Establir la propietat Picture de …
value hole	My Definitions	… El ImageSprite que fa referència a la variable hole …
text (hole.png)	Text	… A la imatge del forat buit.
to procedure (MoveMole)	Definition	Crear un procediment, que han de completar més tard, per moure el talp.
MoveMole	My Definitions	Trucar a MoveMole per a la primera col · locació del talp.

Compara el bloc foreach amb els blocs equivalents que serien necessaris sense ell:

Nou	Vell

No només el conjunt de blocs l’esquerra és més curt, és menys repetitiu, evitant que el programador sigui semi-inconscient en copiar i enganxar, i és més fàcil de modificar, per exemple, si el nom de la imatge ha canviat.

Movent el Talp

Ara anem a omplir el cos del procediment MoveMole, que anomenarem quan s’inicia el programa, quan es toca el talp, i quan el nostre comptador de temps es dispari cada segon. El que volem fer és escollir a l’atzar un forat i posar al talp sobre. Aquí hi ha una imatge i la llista dels nous blocs:

Tipus de bloc	Calaix	Propòsit
setembre currentHole to	My Definitions	Guardar el …
call pick random item	Lists	… Seleccionat a l’atzar …
holes	My Definition	… Forat.
call Mole.MoveTo	Mole	Mou el talp a la …
ImageSprite.X	Advanced / ImageSprite	.. Coordenada x de …
currentHole	My Definitions	… El forat escollit …
ImageSprite.Y	Advanced / ImageSprite	… I la coordenada i de …
current Hole	My Definitions	… El forat escollit.

Ara hem de especificar que MoveMole ha de ser cridat cada vegada que el temporitzador MoleClock Timer es dispari. Només necessitem dos blocs per fer-ho:

Tipus de bloc	Calaix	Propòsit
MoleClock.Timer	MoleClock	Quan el temporitzador acaba …
call MoveMole	My Definitions	… Mou el talp.

Registre de tocs

Finalment, hem de especificar el que passa quan el talp es toca. En concret, volem:

1. Incrementar la puntuació.
2. Fer que el telèfon vibri breument.
3. Moure el talp.

És fàcil traduir aquests als blocs:

Mole.Touched	Mole	Quan el talp es toca …
setembre ScoreValueLabel.Text to	ScoreValueLabel	… Actualitza la puntuació visible a …
+	Math	… El resultat de sumar …
number (1)	Math	… 1 [i] …
ScoreValueLabel.Text	ScoreValueLabel	… La puntuació anterior.
call Buzzer.Vibrate	Buzzer	Fa que el telèfon vibri …
number (100)	Math	… 100 mil · lisegons.
call MoveMole	My Definitions	Mou el talp a una nova ubicació.

Programa Final

Variacions

Aquestes són algunes de les variacions és possible que vulguis posar en pràctica:

• Afegir un botó de reinici per establir la puntuació a 0.
• Fer la puntuació dependent no només de la quantitat d’encerts, sinó també del nombre de fallades i que el talp va escapar.
• Augmentar la velocitat del moviment del talp en el joc, si el jugador ho està fent bé i disminuir-si el jugador ho està fent malament.
• Afegir un segon talp amb un temporitzador diferent.

Pots veure la manera d’aplicar les dues primeres variacions en el tutorial original de Mole Mash .

Revisió

Aquestes són algunes de les idees que es tracten en aquest tutorial:

• La col · locació de components en una llista List.
• Realitzar una operació a cada component en List (una llista) utilitzant el bloc foreach i característiques avançades.
• Col · locar un ImageSprite sobre d’un altre, utilitzant la seva propietat Z per controlar que va davant.
• L’ús del component Clock (rellotge) per controlar el joc.
• Creació d’un procediment i cridar des de múltiples llocs.

No text while driving

Aquest tutorial demostra com una aplicació pot respondre automàticament als missatges de text.Crearàs una aplicació que retorna una resposta quan es rep un missatge de text. La idea per a l’aplicació procedeix de l’estudiant Daniel Finnegan de la Universitat de San Francisco.

Primers passos

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

Introducció

Dissenyaràs l’aplicació perquè enviï una resposta per a qualsevol missatge rebut. També permetràs l’usuari personalitzar la resposta enviada.

Aquest tutorial introdueix els següents conceptes de App Inventor:

• El component texting per enviar textos i processar els textos rebuts.
• El component base de dades TinyDB per guardar el missatge personalitzat fins i tot quan es tanca l’aplicació.

Prepara els components

La interfície d’usuari per NoTextWhileDriving és simple: té una caixa de text per al missatge de resposta i un botó per enviar els canvis en el missatge. També necessitaràs un component texting i un component TinyDB, els quals apareixeran en l’àrea de components “no visuals”. A sota hi ha una taula amb instruccions detallades per al disseny dels components, però pots també construir-la a partir la la següent imatge de com haurien de quedar:

Els components que es mostren a continuació són els usats per crear la pantalla del dissenyador mostrada més amunt. Arrossega cada component des de la Paletadins el Viewer i nómbralos com s’especifica a continuació:

Tipus de component	Grup de la paleta	Com ho diràs	Propòsit del component
Label	Basic	PromptLabel	Informa l’usuari sobre el funcionament de l’aplicació
TextBox	Basic	MessageTextbox	L’usuari introduirà la seva resposta personalitzada aquí
Button	Basic	SubmitResponseButton	L’usuari fa clic aquí per enviar la resposta a la base de dades
Texting	Social	Texting1	El component que processarà els textos
TinyDB	Basic	TinyDB1	El component que emmagatzemarà la resposta a la base de dades

Ajusta les propietats dels components de la manera:

• Canvia la propietat Text de PromptLabel a “The text below will be sent in response to all texts while this app is running.” (El text a continuació s’enviarà com a resposta a tots els missatges mentre l’aplicació estigui funcionant)
• Canvia la propietat Text de MessageTextbox a “I’ma driving right now, I’ll contact you shortly”. (Estic conduint, et trucaré aviat)
• Canvia la propietat Text de SubmitResponseButton a “Modify Response”. (Modificar la resposta)

Afegeix comportaments als components

NoTextWhileDriving té els següents comportaments:

1. Quan es rep un missatge, el text introduït en MessageTextbox s’envia com a missatge de text en resposta al remitent.

2. Quan l’usuari modifica el missatge personalitzat a MessageTextbox i fa clic SubmitResponseButton, el nou missatge es guarda de manera persistent a la base de dades del telèfon.

3. Quan s’inicia l’aplicació, el ​​missatge personalitzat es carrega des de la base de dades a MessageTextbox.

Responent a un missatge de text

Quan es rep un missatge al telèfon, l’esdeveniment Texting.MessageReceived és iniciat. El teu aplicació ha de manejar aquest esdeveniment ajustant les propietatsPhoneNumber i Message del component texting apropiadament i enviar text de resposta.

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
Texting1.MessageReceived	Texting1	el controlador d’esdeveniment que s’activa quan es rep un missatge de text
setembre Texting1.PhoneNumber to	Texting1	Ajusta la propietat PhoneNumber abans d’enviar.
value number	My Definitions	aquest és el número de telèfon de la persona que va enviar el missatge
setembre Texting1.Message to	Texting1	s’ajusta la propietat Message abans d’enviar
MessageText.Text	MessageText	És el missatge que l’usuari ha introduït.
Texting1.SendMessage	Texting	Envia el missatge.

Els blocs han de quedar així:

Com treballen els blocs

Quan el telèfon rep qualsevol missatge, l’esdeveniment Texting1.MessageReceived és activat. El número de telèfon del remitent està en l’argument number, i el missatge del remitent en l’argument messageText.

En resposta, l’aplicació envia un missatge de text al remitent. Per enviar un missatge, l’aplicació ajusta les dues propietats clau del component texting: la propietatPhoneNumber i la propietat Message. Texting.PhoneNumber s’ajusta al nombre del remitent, i Texting.Message s’ajusta al missatge de MessagetextBox – aquest pot ser, “I’ma driving right now, I’ll contact you shortly.”, (Estic conduint, et trucaré aviat) per defecte, o l’usuari també podrà modificar. Quan aquestes propietats estan ajustades, es diu a Texting1.SendMessage per enviar el missatge de resposta.

Prova el comportament. Necessitaras un segon telèfon per provar aquest comportament. Des del segon telèfon, envia un missatge de text al telèfon que està executant l’aplicació. Rep el segon telèfon el missatge de resposta? Si això funciona, prova a modificar el missatge de resposta i enviar un altre missatge des del segon telèfon. ¿S’ha enviat la nova resposta?

Emmagatzemar la resposta personalitzada

Fins ara l’aplicació funciona, però si la tanques i la tornes a obrir el missatge que has personalitzat s’haurà perdut. Per fer les coses d’una manera més convenient, emmagatzema la resposta personalitzada que l’usuari ha introduït en una base de dades utilitzant el component TinyDB.

TinyDB et proporciona dues bloc: StoreValue i GetValue. D’aquesta manera et permet emmagatzemar i etiquetar una peça d’informació, que més tard podràs recuperar.

Necessitaràs els següents blocs per emmagatzemar la resposta emmagatzemada:

Tipus de bloc	Calaix	Propòsit
SubmitResponseButton.Click	SubmitResponseButton	L’usuari fa clic en aquest botó per guardar el missatge de resposta
TinyDB1.StoreValue	TinyDB1	emmagatzema el missatge de resposta a la base de dades del telèfon
text (“responseMessage”)	Text	és usat com a etiqueta per a les dades
MessageTextbox.Text	MessageTextbox	el missatge de resposta introduït per l’usuari aquí

Els blocs han de quedar així:

Com treballen els blocs

Quan l’usuari fa clic a SubmitResponseButton, l’aplicació emmagatzema la resposta introduïda a la base de dades. El text “responseMessage” és usat com a etiqueta per a identificar específicament la informació – més tard usaràs aquesta etiqueta per recuperar el missatge des de la base de dades.

Recuperant el missatge de resposta emmagatzemat

Programa el controlador d’esdeveniment Screen1.Initialize perquè la resposta personalitzada que s’ha emmagatzemat sigui recuperada des de la base de dades i col · locada en MessageTextbox. Comprova les dades recuperats per assegurar-te que contenen “alguna cosa” – després de tot, la primera vegada que s’usi l’aplicació, la base de dades no tindrà cap missatge guardat. Si hi ha un missatge guardat, col · loca en MessageTextbox perquè l’usuari pugui veure i que pugui ser usat per respondre als missatges entrants.

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
def variable (“response”)	Definitions	Una variable temporal per emmagatzemar les dades recuperats
text (buit)	Text	El valor inicial de la variable pot ser qualsevol cosa
Screen1.Initialize	Screen1	Aquest és activat quan s’inicia l’aplicació
setembre response to	My Definitions	canviessis la variable el valor recuperat de la base de dades
TinyDB1.GetValue	TinyDB1	pren la resposta de text emmagatzemada a la base de dades
text (“responseMessage”)	Text	col · loca a la ranura tag de GetValue, assegura’t que el text és el mateix que es va usar en StoreValue above
if test	Control	per preguntar si el valor recuperat conté algun text
> Block	Math	comprova si la longitud del valor recuperat és> (major que) 0
length text	Text	comprova si la longitud del valor recuperat és més gran que 0
global response	My Definitions	aquesta variable manté el valor retornat des GetValue
number (0)	Math	per comparar amb la longitud de la resposta
setembre MessageTextbox.Text to	MessageTextbox	si recuperem alguna cosa, l’introduïu a MessageTextbox
global response	My Definitions	aquesta variable manté el valor retornat des GetValue

Els blocs han de quedar així:

Com treballen els blocs

Quan s’inicia l’aplicació, l’esdeveniment Screen1.Initialize és activat. L’aplicació crida a la base de dades TinyDB1.GetValue amb l’etiqueta (tag) “responseMessage” – la mateixa etiqueta usada quan almacenaste l’entrada de l’usuari anteriorment. El valor resultant es col · loca en la variable de resposta (response).

La variable de resposta s’usa perquè el valor rebut de la base de dades pugui ser comprovat. Si té una longitud de 0, llavors no hi ha una entrada a la base de dades amb l’etiqueta “responseMessage” – cosa que passarà la primera vegada que s’usi aquesta aplicació. Però si el missatge és més gran que 0, l’aplicació sap que una resposta ha estat emmagatzemada anteriorment, i el valor retornat pot ser col · locat en MessageTextBox qual cosa podrà veure l’usuari i s’utilitzarà com a resposta als missatges enviats.

Prova l’aplicació. Introdueix una nova resposta a MessageTextbox i fes clic a SubmitResponseButton. Llavors reinicia l’aplicació fent clic al botó Restart App a l’Editor de blocs. Això farà que l’aplicació es reiniciï tal com ho faria quan l’usuari tanca i torna a obrir l’aplicació més tard. Apareix el missatge personalitzat que has introduït?

No Text While Driving, programa final

Variacions

Quan tinguis l’aplicació No Text While Driving funcionant, potser vulguis explorar algunes variacions. Per exemple.

• Crea una versió que llegeixi en veu alta els missatges rebuts. Necessitarà utilitzar el component TextToSpeech.
• Crea una versió que permeti a l’usuari crear missatges personalitzats per nombres en particular.
• Crea una versió que enviï respostes personalitzades partir de la ubicació de l’usuari (per exemple, Estic en uneixin església …)

Revisió

Aquestes són algunes de les idees examinades en aquest tutorial:

• El component texting pot ser usat tant per enviar missatges com per processar els que es reben.
• El component TinyDB s’usa per emmagatzemar informació de manera persistent, a la base de dades del telèfon, perquè estigui disponible cada vegada que s’iniciï l’aplicació.

Escaneja l’aplicació d’exemple per al teu telèfon

Escaneja el codi Qr amb el teu telèfon per instal · lar i executar l’aplicació d’exemple.

Text Group

Aquest tutorial estén el tutorial Text Group. L’aplicació enviava un missatge de text a una llista fixa de números de telèfon, i només el programador podia canviar els números de la llista. L’aplicació en aquest tutorial permet a l’usuari afegir i treure números de telèfon de la llista, i emmagatzema la llista de manera permanent en una base de dades. 

Primers passos

Connecta’t al lloc web de App Inventor i obre el teu projecte textgroup (si no has completat aquest tutorial, fes-ho ara abans de continuar). Fes clic a SaveAs (guardar com) i anomeneu “TextGroup2”. Pots deixar eltítol de la pantalla com “Text Group”. Obre l’editor de blocs i conéctalo al telèfon.

Introducció

Dissenyaràs l’aplicació perquè l’usuari afegeixi números de telèfon al grup triant-los de la llista de contactes del telèfon, i pugui llevar triant elements que ja estiguin en el grup. Almacenaras la llista de nombres en una base de dades perquè estiguin disponibles fins i tot després de tancar l’aplicació i reiniciar.

El tutorial cobreix els següents components i conceptes de App Inventor:

• El bloc foreach per repetir operacions en una llista.
• El component PhoneNumberPicker per accedir als contactes del telèfon.
• El component ListPicker per permetre a l’usuari triar un número de la llista per treure’l.
• El component texting per enviar missatges de text.
• El component base de dades TinyDB per emmagatzemar la llista de números de telèfon en una base de dades.

Prepara els components

La interfície d’usuari per Text Group, Part II té una caixa de text, un botó, i una etiqueta d’estat per a l’enviament del missatge al grup, igual que en la part I. Si has triat SaveAs per iniciar aquest projecte, aquests components han d’estar ja en la pantalla. Si és així, has de llavors afegir un component PhoneNumberPicker i un component ListPicker per afegir i treure números de telèfon de la llista, juntament amb un component texting i un component TinyDB, els quals apareixeran al camp “non-visual components” (components no visibles). A sota hi ha una taula amb instruccions detallades per al disseny dels components, però pots també construir-la a partir la la següent imatge de com haurien de quedar:

Els components que es mostren a continuació són els usats per crear la pantalla del dissenyador mostrada més amunt. Els quatre primers eren part del projecte TextGroup pel que ja haurien d’estar a la pantalla del dissenyador si has fet clic a SaveAs (guardar com) per iniciar aquest. Necessitaràs arrossegar cada un dels altres components des de la Paleta al Visor i nomenar com s’especifica a continuació:

Tipus de component	Grup de la paleta	Com ho diràs	Propòsit del component
TextBox	Basic	MessageText	L’usuari introduirà el missatge aquí.
Button	Basic	TextGroupButton	S’enviarà el missatge fent clic aquí
Label	Basic	StatusLabel	Informa quan el missatge ha estat enviat.
Texting	Social	Texting1	El component que envia el missatge.
Label	Basic	GroupHeadingLabel	Capçalera per a la llista de números de telèfon que apareixeran
Label	Basic	MembersLabel	Aquí és on apareixerà la llista de números de telèfon
Horitzontal Arrangement	Screen Arrangement	Horitzontal Arrangement1	Per organitzar horitzontalment els botons (pickers) per afegir i treure
PhoneNumberPicker	Social	PhoneNumberPicker1	Permet a l’usuari triar números de la llista de contactes
ListPicker	Basic	RemoveListPicker	Permet a l’usuari treure un nombre dels números de telèfon del grup
TinyDB	Basic	TinyDB1	Per emmagatzemar i recuperar els números de telèfon del grup des d’una base de dades

Ajusta les propietats dels components de la manera:

• Ajusta Hint (suggeriment) de MessageText a “enter a message” (introdueix un missatge)
• Ajusta Text de TextGroupButton a “Text Group”
• Canvia la propietat Text de StatusLabel a “estatus”.
• Ajusta Text de GroupHeadingLabel a “- Group -“.
• Ajusta Text de MembersLabel a “members will appear here” (els membres apareixeran aquí).
• Ajusta Text de PhoneNumberPicker1 a “Add Member” (afegir membre).
• Canvia Text de RemoverListPicker a “Remove Member” (treure membre)

Afegeix comportaments als components

Si has completat Text Group, Part I, has de tenir la següent llista definida en l’editor de blocs:

Per aquesta aplicació, encara necessitaràs la llista però no amb nombres predefinits-hi – els números seran afegits per l’usuari de l’aplicació. Per tant treu els blocs de de text amb els nombres i deixa el bloc make a list buit:

Necessitaràs afegir els següents comportaments:

1. Quan l’usuari fa clic al botó “Add Member” (el botó afegir membre associat amb el selector PhoneNumberPicker), el selector apareixerà perquè l’usuari triï un nombre. Quan la selecció estigui feta, l’aplicació afegirà el nombre escollit a la llista PhoneNumbers i actualitzarà la base de dades.

2. Quan l’usuari fa clic al botó “Remove Member” (el botó treure membre associat al selector RemovListPicker), el selector apareixerà perquè l’usuari triï un dels nombres existents en PhoneNumbers. Quan la selecció estigui feta, l’aplicació traurà el número de la llista i actualitzarà la base de dades.

3. Quan l’aplicació s’inicia, els números emmagatzemats a la base de dades es recuperen i es carreguen en PhoneNumbers.

Afegint un número de telèfon (membre) al grup

La llista de números de telèfon a la llista de contactes apareixerà quan l’usuari faci clic a botó associat a PhoneNumberPicker: aquest comportament està inclòs en el component. Quan l’usuari fa una selecció de la llista de contactes, l’esdeveniment AfterPicking de PhoneNumberPicker s’inicia – el teu treball és programar aquest esdeveniment per afegir l’element seleccionat a la llista i actualitzar la base de dades.

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
PhoneNumberPicker1.AfterPicking	PhoneNumberPicker1	el controlador d’esdeveniment que és iniciat quan l’usuari tria de la llista de contactes
add items to list	Lists	el teu objectiu és afegir el nombre escollit a la llista
global PhoneNumbers	My Definitions	posi el a la ranura list de add ítems to list
PhoneNumberPicker1.PhoneNumber	PhoneNumberPicker1	això manté el número de telèfon triat, col · loca a la ranura ítem de add items to list (afegir element a la llista)
TinyDB1.StoreValue	TinyDB1	després d’actualitzar la llista, necessites actualitzar la base de dades.
text (“textGroup”)	Text	col · loca a la ranura tag de StoreValue
global PhoneNumbers	My Definitions	posi el a la ranura value (valor) de StoreValue
setembre MembersLabel.Text to	MembersLabel	mostra la llista al telèfon
global PhoneNumbers	My Definitions	col · loca en set MembersLabel.Text to

Els blocs han de quedar així:

Com treballen els blocs

Quan l’usuari fa una elecció des PhoneListPicker, l’esdeveniment PhoneListPicker1.AfterPicking s’inicia. Un dels treballs de PhoneListPicker ‘és col · locar l’elecció de l’usuari en la seva propietat PhoneNumber, de manera que el controlador d’esdeveniment crida a add items to list (afegir elements a la llista) per col · locar l’elecció en la llista PhoneNumbers.

PhoneNumbers és una variable, i les variables són memòries de curta durada que desapareixen quan es tanca l’aplicació. És per això que, després d’afegir l’element a la variable, s’usa el bloc TinyDB1.StoreValue per copiar aquesta llista a la base de dades – la memòria de llarga durada del telèfon. Les dades s’etiqueten com “textGroup”. Més tard, usaràs aquesta etiqueta per recarregar la llista de números de telèfon des de la base de dades cada vegada que s’iniciï l’aplicació.

Després d’actualitzar la base de dades, es diu a set MembersLabel.Text to per mostrar la llista. Això és requerit per que aquestes variable de llista estan ocultes per a l’usuari fins que es col · loquen en un element visible. Col · locar directament la llista en una etiqueta és un mètode rudimentari de mostrar – la llista apareixerà amb la forma (111-1111 222-2222). A la següent secció, programarás una manera més elegant de mostrar la llista.

Prova el comportament. Al telèfon fes clic a “Add Member” i tria un número de la llista de contactes que apareix. Apareix el número en MembersLabel? Prova a afegir alguns nombres més per veure com es mostra la llista.

Mostrant la llista amb els elements en línies separades

En aquest moment l’aplicació mostra a l’usuari els números de telèfon que s’han afegit, però no d’una manera molt elegant. Crea un procediment displayMembers, el qual mostri la llista cada telèfon en una línia separada. Assegura’t i crida al procediment en l’esdeveniment PhonePicker1.AfterPicking, event, després del bloc add items to list, per mostrar la llista actualitzada. La crida al procediment ha de substituir els blocs que col · loquen MembersLabel.Text directament a la llista. Per obtenir ajuda per mostrar la llista i línies separades, mira Displaying a List

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
procedure (“displayMembers”)	Definitions	crea un procediment perquè puguis dir des de múltiples llocs
setembre MembersLabel.Text to	MembersLabel	Mostra la llista aquí
text (“”)	Text	comença amb un text buit
foreach	Control	Es repeteix per als nombres
name number	in the foreach	nomena la variable foreach “number ‘. És l’element actual de foreach
global PhoneNumbers	My Definitions	Es col · loca a la ranura in list de foreach
setembre MembersLabel.Text to	MembersLabel	Es modifica amb cada un dels nombres
make text	Text	Crea un objecte de text des de diverses peces
MembersLabel.Text	MembersLabel	S’afegeix a l’etiqueta en cada repetició de foreach
text (“\ n”)	Text	El caràcter de nova línia, perquè el següent nombre aparegui en una nova línia
value number	My Definitions	El nombre actual de la llista

Així és com han de quedar els blocs:

Com treballen els blocs

El bloc foreach en displayMembers successivament afegeix un número de telèfon al final de l’etiqueta, col · locant un caràcter nova línia entre cada element.

Per descomptat ens procediment no farà res fins que tu ho diguis: has d’afegir una crida al procediment en l’esdeveniment PhonePicker1.AfterPicking, per sota del bloc add items to list. El bloc call displayMembers pots trobar al calaix My Definitions, i ha de substituir als blocs que posen directament a MembersLabel.Text a la llista.

Prova aquest comportament. Al telèfon fes clic a “Add Member” per triar un altre nombre d’afegir a la llista. Quan es mostra la llista modificada, Apareixen els nombres en línies separades?

Llevant un número de la llista

Per permetre a l’usuari treure un número de la llista, primer has de tenir la llista PhoneNumbers al gestor RemoveListPicker que apareix quan l’usuari fa clic a “Remove Member”. A diferència del component PhonePicker, el qual pren les dades de lalista de contactes del telèfon, ListPicker requereix explícitament que el teu carreguis els elements que apareixeran. Pots fer això canviant la propietat Elements del component ListPicker. Faràs això dins de l’esdevenimentRemoveListPicker.BeforePicking, el qual és iniciat just quan l’usuari fa clic al botó però abans de mostrar la llista.

Els blocs han de quedar així:

A continuació, crea l’esdeveniment RemoveListPicker.AfterPicking perquè la selecció de l’usuari sigui llevada de la llista PhoneNumbers. Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
RemoveListPicker.AfterPicking	RemoveListPicker	aquest s’inicia després que l’usuari triï un número de la llista
remove list item	Lists	treu l’element indicat d’una llista donada
global PhoneNumbers	My Definitions	col · loca a la ranura list de remove list item
position in list	Lists	donat un element a una llista, aquest t’indica seu índex (la seva posició en la llista)
RemoveListPicker.Selection	RemoveListPicker	el nombre escollit per l’usuari, col · loca a la ranura thing de position in list
global PhoneNumbers	My Definitions	col · loca a la ranura list de position in list
call displayMembers	My Definitions	una vegada que l’usuari treu un element, mostra la llista modificada

Els blocs han de quedar així:

Com treballen els blocs

Quan l’usuari tria un nombre de RemoveListPicker, l’esdeveniment AfterPicking és iniciat. El controlador d’esdeveniment fa servir position in list per obtenir la posició en la llista del nombre triat, llavors utilitza aquesta posició per treure el número de la llista PhoneNumbers. La base de dades és actualitzada i la llista mostrada.

Prova el comportament. Al telèfon fes clic a “Remove Member” i tria un número de la llista que apareix. Quan la llista torna a aparèixer, S’ha tret el nombre triat?

Carregant la llista des de la base de dades

L’aplicació funciona fins ara, i quan es realitzen canvis en la llista PhoneNumbers, aquests són també emmagatzemats a la base de dades. Ara només necessites afegir el comportament perquè les dades guardats a la base de dades es carreguin quan s’iniciï l’aplicació.

Programa el controlador d’esdeveniment Screen1.Initialize perquè la llista de números de telèfon guardada sigui presa de la base de dades i col · locada en la llistaPhoneNumbers i la pantalla s’actualitzi per mostrar la llista. Necessitaràs comprovar les dades obtingudes per assegurar-te que hi ha algun – això és perquè la primera vegada que s’usa l’aplicació, la base de dades no conté cap número.

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
def variable (“valueFromDB”)	Definitions	Una variable temporal per emmagatzemar les dades recuperats
text (buit)	Text	El valor inicial de la variable pot ser qualsevol cosa
Screen1.Initialize	Screen1	Aquest és activat quan s’inicia l’aplicació
setembre valueFromDB to	My Definitions	canviessis la variable el valor recuperat de la base de dades
TinyDB1.GetValue	TinyDB1	pren la resposta de text emmagatzemada a la base de dades
text (“textGroup”)	Text	col · loca a la ranura tag de GetValue, assegura’t que el text és el mateix que es va usar més amunt en StoreValue
if test	Control	per preguntar si el valor recuperat conté algun text
is list?	Text	comprova si el valor retornat és una llista (si no hi ha dades retornats, això serà fals)
global valueFromDB	My Definitions	aquesta variable manté el valor retornat des GetValue
setembre PhoneNumbers to	PhoneNumbers	si se’ns torna una mica, el col · loca en PhoneNumbers
global valueFromDB	My Definitions	aquesta variable manté el valor retornat des GetValue

Els blocs han de quedar així:

Com treballen els blocs

Quan s’inicia l’aplicació, l’esdeveniment Screen1.Initialize és activat. El controlador d’esdeveniment pregunta a la base de dades amb GetValue i l’etiqueta (tag) “textGroup”. Si hi ha algun valor amb aquesta etiqueta a la base de dades, el seu valor corresponent es col · locarà en la variable valueFromDB. El controlador d’esdeveniment comprova si aquest valor – és una llista? – I si és així col · loca la llista en la variable PhoneNumbers i crida a displayMembers.

Prova l’aplicació. Per provar l’aplicació final, primer empaquétala, instal · la en un telèfon i ejecútala. Tastar “en viu” no funcionarà en aquest cas, perquè cada vegada que “reinicieu l’aplicació”, esborrarà la base de dades: fins i tot si has emmagatzemat les dades de forma persistent, seran esborrats quan reinicieu l’aplicació. Surt de l’aplicació i torna a arrencar perquè es reiniciï. Hi surt la llista de telèfons que has introduït al recarregar? Treu tots els elements i prova un altre cop. ¿S’inicia l’aplicació sense cap error?

Text Group Part II, programa final

Variacions

UNa vegada que tinguis l’aplicació Text Group treballant, potser vulguis explorar algunes variacions. Per exemple.

• Escriu una versió que gravi tots dos, el número de telèfon i el nom de cada membre del grup. Pots també utilitzar ContactPicker per permetre a l’usuari triar des del nom d’un contacte en lloc d’un nombre.
• Escriu una versió que permeti a usuari definir i utilitzar múltiples grups. Necessitaràs una llista en la qual cada element sigui una llista de contactes / números, i necessitaràs una interfície d’usuari més complexa.

Revisió

Aquestes són algunes de les idees examinades en aquest tutorial:

• PhoneListPicker permet a l’usuari triar de la llista de números de telèfon dels seus contactes. L’elecció es col · loca en la propietat Selection i l’esdeveniment AfterPicking és anomenat quan l’usuari fa una elecció.
• ListPicker és similar a PhoneListPicker però mostra una llista definida pel programador, per exemple, la llista de números de telèfon al grup. La teva defineixes la llista que apareixerà a ListPicker ajustant la propietat Elements, i pots fer-ho a l’esdeveniment BeforePicking. L’elecció de l’usuari es col · loca en la propietat Selection, i l’esdeveniment AfterPicking s’inicia quan l’usuari fa una elecció.
• TinyDB s’usa per emmagatzemar les dades de manera persistent i que puguin ser carregats cada vegada que s’iniciï l’aplicació. StoreValue emmagatzema amb una etiqueta (tag) per identificar a la dada i la dada en si mateix (el valor). GetValue retorna les dades d’una etiqueta donada. Sovint, una aplicació cridarà GetValue quan l’aplicació s’iniciï (Screen1.Initialize) per carregar les dades persistents.
• Actualment, App Inventor no proveeix accés i funcionalitat complets per als contactes i grups al telèfon. En aquest tutorial, has creat el teu propi grup i una aplicació per processar el grup (afegint, traient i enviant missatges a tots).

Escaneja l’aplicació d’exemple per al teu telèfon

Escaneja el codi Qr amb el teu telèfon per instal · lar i executar l’aplicació d’exemple.

Map Tour

Que estàs construint

Aquest és un tutorial de dues parts que introdueix el component ActivityStarter per llançar aplicacions d’Android arbitràriament i el component ListPicker per permetre a l’usuari triar d’una llista d’elements.Construiràs MapTour, una aplicació per visitar destinacions francesos de vacances amb un sol clic. Els usuaris de la teva aplicació podran visitar la torre Eiffel, el Louvre i Notre Dame en una ràpida successió.

Primers passos

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

Introducció

Dissenyaràs l’aplicació de manera que mostri una llista de destinacions. Quan l’usuari tria un, l’aplicació Google Maps s’inicia per mostrar un mapa de la destinació.

Aquest tutorial introdueix els següents conceptes de App Inventor:

• El component Activity Starter per llançar altres aplicacions Android des del teu aplicació.
• El component ListPicker (selector de llista), per permetre a l’usuari triar entre una llista de possibilitats.

Prepara els components

La interfície de l’usuari per MapTour és simple: només tindràs un component ListPicker i un component ActivityStarter (no visible). La vista de disseny ha de quedar així quan hagis acabat:

Els elements que es llisten a continuació seran usats per crear aquesta finestra al dissenyador. Arrossega cada component des de la Paleta al Visor (Viewer) i nómbralo com s’especifica:

Tipus de component	Grup de la paleta	Com ho diràs	Propòsit del component
Image	Basic	Image1	Mostra una imatge estàtica del mapa de París a la pantalla
ListPicker	Basic	ListPicker1	Mostra la llista de destinacions
ActivityStarter	other stuff	ActivityStarter1	Inicia l’aplicació mapes quan es tria una destinació

Descarrega l’arxiu parismap.png al teu ordinador, després feu clic a Add a la secció Mitjana per carregar en el teu projecte. Perquè aparegui, hauràs a més que colar a la propietat Picture d’Image1.

El component ListPicker té un botó associat – quan l’usuari fa clic al es desplega la llista d’eleccions. Canvia el text d’aquest botó ajustant la propietat Text deListPicker1 a “Choose Destination” (Trieu la destinació).

Ajustar les propietats de ActivityStarter

ActivityStarter és un component que et permet iniciar qualsevol aplicació Android – el navegador, mapes, o qualsevol altra de les teves aplicacions. Quan es llança una altra aplicació des de la teva, l’usuari pot fer clic al botó enrere per tornar a la teva aplicació. Construiràs MapTour, de manera que l’aplicació Mapes s’iniciarà per mostrar mapes particulars basats en l’elecció d’usuari. L’usuari podrà llavors prémer el botó enrere per tornar a la teva aplicació i triar una destinació diferent.

ActivityStarter és relativament un component de baix nivell al qual necessitaràs ajustar algunes propietats amb informació familiar per als programadors en Java Android SDK, però estranya per al restant 99.999% de la gent en el món. No et preocupis per ara. Copiant l’exemple d’informació de protocol mostrada aquí, podes aprendre fàcilment com llançar altres aplicacions, com Maps, des de les aplicacions que aquestes creant.

Per fer que ActivityStarter iniciï l’aplicació Maps, ajusta les següents propietats en el Dissenyador de Components:

Propietat	Valor
Action	android.intent.action.VIEW
ActivityPackage	com.google.android.apps.maps
ActivityClass	com.google.android.maps.MapsActivity

Amb aquests valors ajustats, podràs iniciar l’aplicació Maps. A l’editor de bloc, vas a ajustar una propietat més, DataUri, la qual et permetrà iniciar Maps un mapa en particular. Aquesta propietat s’ha d’ajustar a l’Editor de bloc perquè canviarà basant-se en si l’usuari tria visitar el Louvre, la Torre Eiffel. o Notre Dame.

Crear una llista de destinacions

Obre l’Editor de blocs i crea una variable amb la llista de destinacions per MapTour. Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
def variable (“Destinations”)	Definitions	crea una llista de destinacions
make a list	Lists	usa per afegir els elements de la llista
text (“Tour Eiffel”)	Text	la primera destinació
text (“Musee du Louvre”)	Text	la segona destinació
text (“Cathedrale Notre Dame”)	Text	la tercera destinació

Els blocs han de quedar així:

Afegeix comportaments als components

MapTour té dos comportaments:

1. Quan s’inicia, l’aplicació carrega la llista de destinacions dins del component ListPicker perquè l’usuari pugui triar.

2. Quan l’usuari tria una destinació de ListPicker, l’aplicació Maps s’inicia per mostrar un mapa d’aquest destí. Per la part I, només obriràs l’aplicació Maps i li indicaràs que busqui la destinació escollida.

El component ListPicker mostra una llista d’elements quan l’usuari fa clic en un botó. ListPicker té una propietat Elements. Si configures Elements a una llista, els elements d’aquesta llista apareixeran en ListPicker. Per aquesta aplicació, tindràs d’ajustar la propietat Elements de ListPicker a la llista de destinacions que acabes crear. Com vols que això passi quan s’iniciï l’aplicació, definiràs ens comportament en l’esdeveniment Screen1.Initialize. Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
Screen1.Initialize	Screen1	aquest esdeveniment s’activa quan s’inicia l’aplicació.
setembre ListPicker1.Elements to	ListPicker1	s’ajusta aquesta propietat a la llista que vols que aparegui
global Destinations	My Definitions	la llista de destinacions

Els blocs han de quedar així:

Com treballen els blocs

Screen1.Initialize s’activa quan s’inicia l’aplicació. El controlador d’esdeveniment només s’ajusta la propietat Elements de ListPicker pels quals tres destinacions apareixeran.

Prova aquest comportament. Feu clic al botó “Choose Destination ‘al telèfon. El selector de llista (list picker) ha d’aparèixer amb els tres elements.

Iniciant Maps amb una recerca de la destinació

A continuació, programarás el comportament que ha de realitzar quan l’usuari triï una de les destinacions – ActivityStarter ha d’iniciar l’aplicació Maps i buscar la destinació escollida.

Quan l’usuari tria un element del component ListPicker, s’inicia l’esdeveniment ListPicker.AfterPicking. Al controlador d’esdeveniment per AfterPicking necessitaràs ajustar DataUri en el component ActivityStarter perquè aquest sàpiga quin és el mapa que ha d’obrir, després necessites iniciar l’aplicació usant StartActivity.

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
ListPicker1.AfterPicking	ListPicker1	aquest esdeveniment s’inicia quan l’usuari tria un element de ListPicker
setembre ActivityStarter1.DataUri to	ActivityStarter1	DataUri indica a l’aplicació Maps qual és el mapa que ha d’obrir
make text	Text	crea DataUri a partir de dues peces de text
text (“geo: 0,0? q =”)	Text	la primera part de DataUri esperada per Maps
ListPicker1.Selection	ListPicker1	l’element que tria l’usuari
ActivityStarter1.StartActivity	ActivityStarter1	s’inicia Maps

Els blocs han de quedar així:

Com treballen els blocs

Quan l’usuari tria un element de ListPicker, l’esdeveniment AfterPicking s’activa. L’element triat es col · loca en la propietat ListPicker1.Selection. Pel que si l’usuari escull “Musee du Louvre”, aquest valor es col · locarà a la propietat Selection de ListPicker1

Al dissenyador de components, ja has preparat les propietats del component ActivityStarter perquè iniciï l’aplicació Maps. Aquí només necessites indicar que ruta ha de mostrar. La propietat DataUri de ActivityStarter et permet especificar això usant un protocol especial.

En aquest cas, vols mostrar el mapa que apareixeria si introdujeses “Musee du Louvre” a la caixa de recerca de de l’aplicació Maps. Per fer això, DataUri s’ha d’ajustar a:

geo: 0,0? q = ‘Musee du Louvre’

El bloc make a text crea un text exactament com aquest, només que el text després de “q =” serà l’elecció feta per l’usuari.

Quan DataUri està preparat, ActivityStarter1.StartActivity s’inicia l’aplicació Maps.

Prova aquest comportament. Reinicia l’aplicació i feu clic de nou a “Choose Destinations”. Quan tries un destí, apareix un mapa d’aquest destí? Pots fer clic al botó enrere per tornar a la teva aplicació i triar una altra vegada (per sortir de l’aplicació hauràs de prémer enrere un parell de vegades)

Map Tour, Programa final

Revisió

Aquestes són algunes de les idees examinades en aquest tutorial:

• El component ListPicker permet a l’usuari triar d’una llista d’elements. La propietat Elements de ListPicker manté la llista, la propietat Selection manté l’element seleccionat, i l’esdeveniment AfterPicking s’inicia quan l’usuari tria.
• El component ActivityStarter et permet iniciar altres aplicacions. Aquest tutorial mostra el seu ús amb l’aplicació Maps, però pots iniciar un navegador o qualsevol altra aplicació – fins i tot una de les teves.
• Mira la pàgina de referència de Activity Starter per més detalls.
• Aprèn usos més sofisticats de ActivityStarter i del component ListPicker en MapTour Part 2 .

Escaneja l’aplicació d’exemple per al teu telèfon

Escaneja el codi Qr amb el teu telèfon per instal · lar i executar l’aplicació d’exemple.

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.

Configura el teu telèfon

En aquesta secció, ens assegurarem que el teu telèfon està llest per funcionar amb App Inventor. Això implica la comprovació d’algunes opcions de configuració i assegurar-te que estan preparades de la manera correcta, a continuació, connectar el telèfon a l’ordinador mitjançant un cable USB. Si tens una màquina amb Windows, llavors és possible que hagis de instal · lar un controlador per al telèfon.

Telèfons compatibles

Hi ha centenars de models diferents de telèfons Android, i estan apareixent nous contínuament. Nosaltres encara no els coneixem tots. Aquests són alguns dels telèfons que s’estan utilitzant amb èxit amb App Inventor:

• Google: Nexus One, Nexus S
• Motorola: Droid, Droid X, Droid Incredible
• T-Mobile: G1
• HTC: Incredible, Hero, Desire, …

Tingues en compte, però, que per a alguns d’aquests telèfons és necessària la instal · lació de controladors per treballar amb ordinadors Windows

Sigui quin sigui el model que tinguis, el telèfon ha de tenir instal · lada una targeta SD, o en cas contrari no funcionarà amb App Inventor.

Fins i tot si el teu telèfon Android no està en aquesta llista, és probable que segueixi treballant amb App Inventor, però no podem afirmar amb seguretat. Segueix les instruccions que apareixen en aquesta pàgina, i si tens qualsevol problema, consulta la pàgina de resolució de problemes , o busca al Fòrum d’usuaris de App Inventor a la secció “Getting set up and connecting your phone” per demanar consell a altres persones que puguin estar utilitzant el mateix telèfon.

Comprova la configuració

Per tenir el telèfon llest per treballar amb App Inventor, segueix aquests passos:

1. Prem el botó Home per anar a la pantalla principal del telèfon.
2. Prem el botó Menú, després Configuració, i després aplicacions.
3. Si el teu telèfon té l’opció Orígens desconeguts, assegura’t que està activada.
   
4. Prem Desenvolupament.
5. Assegura’t que tant la depuració USB com romandre actiu estan seleccionats.
   

Si el telèfon està a la pantalla de bloqueig, desbloquealo com ho faries per estar llest per executar una aplicació. Ara pren el cable USB i connecta el telèfon a un ordinador. Dos missatges d’estat apareixen al telèfon en l’àrea de notificacions a la part superior de la pantalla:

• USB connectat significa que el telèfon està connectat a l’ordinador.
• Depuració USB connectada permet que App Inventor des de l’equip controli el telèfon.

Instal·lació d’ App Inventor

App Inventor s’executa a través d’un navegador web. Si utilitzeu un telèfon, es treballa amb el telèfon connectat a l’ordinador mitjançant un cable USB. El teu aplicació apareixerà al telèfon poc a poc a mesura que treballes. Si no tens un telèfon, hi ha un emulador de telèfon inclòs al paquet d’instal·lació de App Inventor que es pot utilitzar en el seu lloc. Quan hagis acabat la construcció, pots “empaquetar” la teva aplicació acabada per produir un “paquet d’aplicació” (arxiu APK d’Android) que pots compartir i instal · lar en qualsevol telèfon Android, com qualsevol altra aplicació Android.

Per començar cal realitzar els següents passos:

• Pas 1: Configura el teu equip
  
  
• Pas 2: Realitza un dels següents passos, depenent de si vas a desenvolupar en un telèfon amb Android o amb l’emulador:
  • Configura el teu telèfon Android i crea la teva primera aplicació, amb el telèfon , o
  • Crea un primera aplicació amb l’emulador

Prepara el teu equip

Requisits del sistema:

Equip i sistema operatiu

• Macintosh (amb processador Intel): Mac OS X 10.5, 10.6
• Windows: Windows XP, Windows Vista, Windows 7
• GNU / Linux: Ubuntu 8 +, Debian 5 +

Navegador

• Mozilla Firefox 3.6 o superior
• Apple Safari 5.0 o superior
• Google Chrome 4.0 o superior
• Microsoft Internet Explorer 7 o superior

Prova la configuració de Java

El teu ordinador ha d’executar Java 6 (també conegut com Java 1.6). Pots descarregar Java des www.java.com .

Prova la configuració de Java mitjançant la realització de les dues proves següents:

1. Visita la pàgina de prova de Java . Has de veure un missatge que Java està funcionant i que és la versió Java 1.6.
2. Executa la prova de Java de AppInventor prement en aquest enllaç . Això comprovarà que el teu navegador és correcte per executar Java, i que el teu equip pot executar aplicacions amb Java Web Start.

App Inventor no funcionarà a l’ordinador si aquestes proves no tenen èxit. No tractis d’usar App Inventor fins que hagis realitzat les proves.

Instal · la el programari de App Inventor

Abans de poder utilitzar App Inventor, cal instal · lar cap programa a l’ordinador. El programari necessari es proporciona en un paquet anomenat App Inventor Setup.Segueix les instruccions per al teu sistema operatiu per instal · lar, i després passa a construir l’aplicació de demostració (Hello Purr) amb el telèfon o amb l’emulador.

• Descarrega per a Mac OS X
• Descarrega per a GNU / Linux
• Descarrega per a Windows

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!

PaintPot

Aquest tutorial introdueix el component Canvas (llenç) per crear gràfics simples de dues dimensions. Construiràs una aplicació que et permet dibuixar a la pantalla del telèfon amb diferents colors.

Nota històrica: PaintPot va ser un dels primers programes desenvolupats per demostrar el potencial de les computadores personals, tan enrere com en els anys 70.

Que estàs construint

Amb l’aplicació PaintPot pots:

• Mullar el dit al pot de pintura virtual per dibuixar amb el color seleccionat.
• Arrossegar el dit per la pantalla per dibuixar una línia.
• Prémer la pantalla per fer punts.
• Utilitza un botó per netejar la pantalla.
• Incloure una imatge com a fons del dibuix.

Aquest tutorial suposa que ja has completat el Tutorial HelloPurr amb l’emulador o el Tutorial HelloPurr amb el teu telèfon Android . El qual introdueix els següents conceptes de App Inventor:

• El component Canvas (Llenç) per dibuixar.
• Control de l’aparença de la pantalla amb components Arrangement (disposició).
• Control d’esdeveniments que prenen arguments.
• Variables

Abans de començar

Assegura’t que el teu ordinador i el teu telèfon estan preparats per utilitzar App Inventor, i navega fins al lloc web de App Inventor en beta.appinventor.mit.edu . Comença un nou projecte a la finestra del Dissenyador, i escriu com a títol PaintPot. Obre l’Editor de blocs, fes clic a Connect to Phone (connectar al telèfon), i assegura’t que el telèfon ha iniciat l’aplicació App Inventor.

Títol de la pantalla

Per començar cita en el panell Properties (Propietats) a la dreta del Designer (dissenyador) i canvia Title (títol) de la pantalla a PaintPot. Hauries veure aquest canvi al telèfon, amb el nou títol mostrat a la barra de títol.

Hi ha tres noms en App Inventor, i és fàcil confondre’ls:

1. El nom que tries per al teu projecte mentre treballes al. Aquest serà també el nom de l’aplicació si la empaquetas per al telèfon.
2. El nom de “Screen1” (pantalla1), que veuràs en en panell que enumera els components de l’aplicació. No pots canviar aquest nom en la versió actual de App Inventor.
3. El títol (title) de la pantalla, el qual és el que veuràs a la barra de títol del telèfon. Aquest comença sent “Screen1”, que és el que vas usar en HelloPurr. Però pots canviar, com estàs fent per Paintpot.

Prepara els components

Usaràs aquests components per crear PaintPot:

• Tres botons per seleccionar pintura vermella, blava o verda i un altre botó per netejar el dibuix.
• Un Llenç (canvas), la superfície de dibuix. Aquest llenç té una imatge de fons, la qual és el gatet del tutorial HelloPurr. També pots dibuixar en un llenç en blanc. Aquest és només un llenç sense imatge de fons.
• També hi ha un component que no veus: utilitza un component HorizontalArrangement (disposició horitzontal) per alinear els tres botons de color.

Això fa cinc components en total. Tomemoslos i construïm l’aplicació.

Botons de color

• Arrossega un component Botó al visor i canvia l’atribut Text del botó a “Xarxa” (vermell) i el seu color de fons (BackgroundColor) a vermell.
• Fes clic a Button1 en la llista de components del visor per ressaltar (ja hauria d’estar ressaltat) i utilitza el botó Rename … per canviar el seu nom de Button1 aButtonRed.
• De la mateixa manera, crea dos botons per al blau i el verd, truca’ls ButtonBlue i ButtonGreen, col·locant verticalment sota el botó vermell.

Així és com això hauria d’aparèixer en el dissenyador, amb els tres noms dels botons en la llista de components del projecte. En aquest projecte estàs canviant els noms dels components millor que deixant els seus noms per defecte, com vas fer en HelloPurr. Utilitza noms significatius en els teus projectes els fa més fàcils de llegir per a tu mateix i per altres.

També hauries de veure els tres botons a la pantalla del telèfon.

Aparença amb Disposició de pantalla (Screen Arrangemen)

Ara has de tenir tres botons, un sobre l’altre. El següent pas és alinear horitzontalment. Faràs això usant un component HorizontalArrangement (disposició horitzontal).

1. Des de la categoria Screen Arrangement de la paleta, arrossega un component HorizontalArrangement i col·loca sota els botons. Canvia el nom d’aquest component de HorizontalArrangement1 a ThreeButtons
2. Al tauler Properties (Propietats), canvia Width (ample) de ThreeButtons a Fill Parent … pel que omplirà per complet l’ample de la pantalla.
3. Mou els tres botons dins del component HorizontalArrangement. Nota: Veuràs una línia vertical que mostra on anirà la peça que aquestes arrossegant.

Si mires la llista de components del projecte, veuràs els tres botons inclosos sota ThreeButtons per indicar que són ara els seus subcomponents. Fixa’t que tots els components estan inclosos sota Screen1.

També has de veure els teus tres botons alineats en una fila a la pantalla del telèfon, encara que algunes coses no apareguin exactament com en el Dissenyador. Per exemple, la vora de la disposició (Arrangement) es mostra en el Dissenyador però no en el telèfon.

Generalment, usaràs la disposició de pantalla per crear simples dissenys verticals o horitzontals. Pots crear dissenys més complexos niant components de disposició de pantalla. Existeix a més un component Disposició de Taula TableArrangement.

Llenç i botó de neteja

Els dos components finals són el llenç (canvas) i el botó de neteja.

1. Des de la categoria Basic de la Paleta arrossega un component Llenç (Canvas) al Visor. Canvia el seu nom a DrawingCanvas. Estableix l’atribut Width (ample) a Fill Parent Estableix l’atribut Height (alt) a 300 píxels.
2. Afegeix un imatge de fons (Background Image) al llenç. Feu clic al camp conté None … al costat de BackgroundImage al panell de Propietats de la tela Pots utilitzar el mateix arxiu kitty.png, si encara el tens a l’escriptori d’un tutorial anterior. O pots usar una altra imatge.
   

   Pots usar qualsevol imatge que vulguis, però obtindràs millors resultats si la mida de la imatge (en píxels) s’aproxima a la mida que mostressis al telèfon. A més, imatges grans poden trigar més temps a carregar-se, i poden excedir la quantitat de memòria que el telèfon assigna per les aplicacions.

3. Des de la Paleta, arrossega el botó final a la pantalla, col · locant-sota el llenç. Canvia el seu aneu a ButtonWipe Canvia el seu atribut Text a Wipe.

Ara hauràs completat els passos per configurar l’aparença de la teva aplicació. Així és com hauria d’aparèixer en el Dissenyador. A continuació, definiràs com es comporten els components.

Afegeix comportaments als components

L’Editor de blocs deu ser ja obert. Primer configura els botons que canvien el color de la pintura.

Afegeix controladors d’esdeveniments de botó

En l’Editor de blocs:

1. Canvia a la columna My Blocks.
2. Obre el calaix de ButtonRed i arrossega fora el bloc when ButtonRed.Click.
3. Obre el calaix DrawingCanvas. Arrossega fora el bloc set DrawingCanvas.PaintColor to (hauràs de desplaçar la llista de blocs del calaix per trobar-lo) i col · loca-en la secció do (fer) de when ButtonRed.Click.
4. Canvia a la columna Built-In. Obre el calaix Colors, arrossega el bloc per al color vermell i col·loca-ho en set DrawingCanvas.PaintColor to.
5. Repeteix els passos del 2 al 4 per als botons blau i verd.
6. L’últim botó de configurar és el de neteja Wipe. Canvia de nou a la columna My Blocks. Crea un controlador d’esdeveniment clic per ButtonWipe arrossegant when ButtonWipe.Click des del calaix ButtonWipe. Des del calaix DrawingCanvas, arrossega call DrawingCanvas.Clear i col · loca-a l’àrea do del bloc when ButtonWipe.Click.

Els blocs per als botons han ser així:

Afegeix controlador d’esdeveniment tocar

Ara per al següent pas: dibuixar en el llenç. Organitzaràs les coses perquè quan toquis el llenç, aconsegueix algun punt en el lloc on tocs. I si arrossegues el dit lentament pel llenç, es dibuixi ua línia.

• En l’Editor de blocs, obre el calaix de la tela (canvas) i arrossega el bloc when DrawingCanvas.Touched a l’espai de treball.

Així que deixis anar fora el bloc, els tres buits de la dreta s’ompliran automàticament amb blocs de noms anomenats x, i, i touchedSprite.

Ja hem vist esdeveniments de botó clic. Els clics són simples, perquè no hi ha res de saber sobre el clic que no sigui que ha succeït. Altres controladors d’esdeveniments, com ara when ... Touched, necessiten informació sobre l’esdeveniment. En App Inventor, aquesta informació s’expressa com el valor delsarguments relacionats amb el controlador d’esdeveniments. Per l’esdeveniment when ... Touched els dos primers arguments representen les coordenades x i i d’on va succeir el toc.

Per aquest esdeveniment tocar, fes al llenç dibuixar un petit cercle al punt amb les coordenades x, i.

• Arrossega fora una ordre call DrawingCanvas.DrawCircle des del calaix canvas i col·loca-en la secció do de when DrawingCanvas.Touched.

A la part dreta de when DrawingCanvas.DrawCircle hi ha tres connexions on has d’especificar els valors per x i i on s’ha de dibuixar el cercle i r, el qual és el radi del cercle.

Per x i i, utilitzarà els valors dels arguments proporcionats pel controlador Touched:

1. Obre el calaix My Definitions a la part superior de la columna. Busca els blocs per value x i value y. Els blocs es crearàn automàticament quan s’arrossegui el bloc del controlador d’esdeveniment tocar.
2. Arrossega value x i value y conéctalos en els seus llocs corresponents al bloc when DrawingCanvas.Touched. Assegura’t d’arrossegar els blocs de value no els que corresponen a name, són molt similars.

També necessitaràs especificar el radi del cercle de dibuixar. Cinc (píxels) és un bon valor per a aquesta aplicació:

• Fes clic en una àrea buida del la pantalla perquè aparegui el menú activable i selecciona matemàtiques math (verd). Selecciona 123 de la llista desplegable, per crear un bloc número. Canvia el 123 a 5 i conéctalo al buit per al radi.
  

  També pots sol escriure 5 seguit de Intro, per crear un bloc amb el valor 5. Això és un exemple de typeblocking: si comences a escriure, l’Editor de blocs mostra uns llista de blocs els noms coincideixen amb el que aquestes escrivint, si prems un nombre crearà un bloc número.

Així és com s’hauria de veure el controlador d’esdeveniment tocar:

Prova el que has fet fins ara al telèfon. Toca un botó de color. Ara toca el llenç, i el dit de deixar un punt a cada lloc que tocs. Prement el botó Wipe has netejar el teu dibuix.

Afegeix Esdeveniments d’arrossegament

Finalment, afegeix el controlador d’esdeveniment d’arrossegament. Aquesta és la diferència entre tocar i arrossegar:

• Un toc és quan poses el dit en el llenç i el lleves sense moure’l.
• Un arrossegament és quan és quan poses el dit en el llenç i mous el dit mentre el mantens en contacte.

Quan arrossegues el dit per la pantalla, sembla dibuixar una gran línia corba per on mous el dit. El que realment fas és dibuixar centenars de petites línies rectes: cada vegada que mous el dit, fins i tot molt poc, estens la línia des de l’última posició del teu dit a la nova posició.

Un esdeveniment d’arrossegament té 6 arguments. Aquests són tres parells de coordenades x i i que mostren:

• La posició anterior del teu dit on va començar l’arrossegament.
• La posició actual del teu dit.
• La posició immediatament anterior del teu dit.

També hi ha un sprite, el qual ignorarem en aquest tutorial.

Ara fes que arrossegar dibuixi una línia entre la posició prèvia i l’actual creant un controlador d’arrossegament:

1. Des del calaix DrawingCanvas, arrossega el bloc when DrawingCanvas.Dragged a l’espai de treball.
2. També des del calaix DrawingCanvas, arrossega el bloc call DrawingCanvas.DrawLine al buit do (fer) del bloc when DrawingCanvas.Dragged.
3. Feu clic al calaix My Definitions. Has de veure els blocs per als arguments que necessites. Arrossega els blocs de value (valor) corresponents als buits apropiats en when DrawingCanvas.Dragged: x1 i y1 han de ser prevX i prevY; x2 i y2 han de ser currentX i currentY

Aquí està el resultat:

Prova el teu treball al telèfon: arrossega el dit per la pantalla per dibuixar línies i corbes. Toca la pantalla per crear punts. Fes servir el botó Wipe per netejar la pantalla.

Revisió

Aquí hi ha algunes de les idees vistes en aquest tutorial:

• Pots utilitzar components de Disposició de pantalla (Screen Arrangement) per especificar l’aspecte en lloc de col · locar els components un sobre l’altre.
• El component Canvas et permet dibuixar al. Aquest a més sent els tocs i arrossegaments.
• Alguns controladors d’esdeveniments són anomenats amb informació sobre l’esdeveniment, com les coordenades d’on s’ha tocat la pantalla. Aquesta informació està representada per arguments. Quan selecciones un controlador d’esdeveniment que té arguments, App Inventor crea blocs de value per aquests i els col·loca al calaix My Definitions.

A la Part 2 , veuràs com utilitzar variables globals per crear punts de diferent grandària.