Tag Archives: android

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.

Un forat per sortir el talp Un talp d'aspecte desagradable
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.
Etiquetat , , , , , ,

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.emulator

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.

notextbarcode

Continua llegint

Etiquetat , , , , , , , ,

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. textGroup2emulator

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.

Etiquetat , , , , , ,

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.

Etiquetat , , , , , ,

Quiz Me

Que estas construint

QuizMe és un joc de preguntes sobre beisbol, però es pot utilitzar com a plantilla per construir qüestionaris sobre qualsevol tema.Amb QuizMe:

  • L’usuari respon pas a pas a una sèrie de preguntes, fent clic en un botó per passar a la següent pregunta.
  • L’usuari introdueix una resposta per a cada pregunta i l’aplicació informa si cada resposta és correcta o no.

Amb QuizMe, les pregunta del qüestionari són sempre les mateixes llevat que tu, el programador, les canviïs. Més tard, pots crear MakeQuiz , una aplicació que permet als usuaris de l’aplicació crear i modificar les preguntes del qüestionari.

Primers passos

Connecta’t a la pàgina web de App Inventor i comença un nou projecte. Nombralo QuizMe, i també estableix el títol de la pantalla com QuizMe. Obre l’Editor de blocs i conectalo amb el telèfon.

Descàrrega també aquestes fotografies de jugadors de beisbol i guardar-les en el teu ordinador: Larsenberra.jpg , dallasbraden.jpg ,cyyoung.jpg , nolanryan.jpg . Més tard, vas a carregar aquestes imatges en el teu projecte.

Introducció

Vas a dissenyar un joc de preguntes perquè l’usuari passi d’una pregunta a una altra fent clic al botó Següent, per rebre la teva senzilla retroalimentació correcte / incorrecte a cada resposta.

Aquest tutorial presenta:

  • Definició i visualització de llistes d’informació
  • La seqüenciació a través d’una llista que utilitza una variable d’índex – una variable que segueix la pista d’una posició en una llista.
  • Comportaments condicionals – dur a terme determinades operacions només quan es compleix una condició.
  • Canvi d’una imatge per mostrar una imatge diferent en diferents moments.

Configuració dels components

Utilitza el dissenyador de components per crear la interfície d’QuizMe. Quan hagis acabat, ha de ser semblant a la figura de sota (també hi ha instruccions més detallades per sota de la imatge).

Per crear aquesta interfície, primer carrega les imatges que has descarregat en el projecte. Feu clic al botó Add a l’àrea de Mitjana i selecciona un dels arxius descarregats (per exemple, Larsenberra.jpg). Després fes el mateix amb les altres tres imatges.

A continuació, crea els següents components arrossegant des de la Paleta al Visor.

Tipus de component Grup de la paleta Com ho diràs Propòsit del component
Image Basic Image1 La imatge part de la pregunta
Label Basic QuestionLabel Mostra la pregunta actual
HorizontalArrangement Screen Arrangement HorizontalArrangement1 Organitza l’etiqueta i calaix de text
Label Basic AnswerPromptLabel Text per al calaix de resposta
TextBox Basic AnswerText L’usuari introdueix la teva resposta aquí.
Label Basic RightWrongLabel Correcte / Incorrecte es mostra aquí.
HorizontalArrangement Screen Arrangement HorizontalArrangement2 Organitza el AnswerButton i nextButton
Button Basic AnswerButton On l’usuari fa clic per enviar una resposta
Button Basic NextButton On l’usuari fa clic per passar a la següent resposta

Estableix les propietats dels components que es descriuen a continuació:

Component Acció
Image1 Estableix la seva propietat Picture a Larsenberra.jpg. Aquesta és la primera imatge que ha d’aparèixer.
QuestionLabel Canvia la seva propietat Text a “question”
AnswerPromptLabel Canvia la seva propietat Text a “Enter Answer:”. A la pantalla Viewer (visor). Mou el botó dins de HorizontalArrangement1.
AnswerText Canvia la seva propietat Hint a “please enter an answer”. Al Visor, mou ​​AnswerText dins HorizontalArrangement1.
AnswerButton Canvia la seva propietat Text a “Submit”. Al Visor, mou ​​el botó dins de HorizontalArrangment2.
NextButton Canvia la seva propietat Text a “Next”. Mou el botó dins de HorizontalArrangement2.
RightWrongLabel Canvia la seva propietat Text a “correct / incorrect”

Afegir comportaments als components

Obre l’Editor de blocs per afegir els comportaments de l’aplicació. En primer lloc, definirem dues variables de llista, QuestionList per mantenir la llista de preguntes, iAnswerList per mantenir la llista de respostes corresponents.

Per definir les dues variables de llista, necessitareu els següents blocs:

Tipus de bloc Calaix Propòsit
def variable Definitions Defineix la variable QuestionList (Canvia-li el nom)
def variable Definitions Defineix la variable AnswerList (Canvia-li el nom)
make a list Lists Utilitzada per inserir els elements de QuestionList
text (3 d’ells) Text les preguntes actuals
make a list Lists Utilitzada per inserir els elements de AnswerList
text (3 d’ells) Text les respostes actuals

Per crear variables globals arrossega un bloc definició de variable del calaix Definitions i feu doble clic al nom per defecte “variable” per canviar-li el nom. El bloc def variable té una ranura per al valor inicial de la variable. Si la variable representa un nombre o text, feu clic al triangle del bloc vermell-i tria el tipus que desitgis. Si la variable representa una llista, arrossega bloc vermell? A la paperera, veu el calaix Lists, i connecta un bloc make a list en la definició de la variable.

Els blocs han de tenir el següent aspecte:

Defineix la variable oculta d’Índex

Cada vegada que l’usuari fa clic al NextButton per procedir a través del qüestionari, l’aplicació ha de recordar la pregunta en què es troba. En programació, per recordar alguna cosa, es defineix una nova variable. En aquest cas, l’aplicació ha de recordar el nombre de pregunta en curs – l’índex en la llista QuestionList.

Per crear la variable currentQuestionIndex, necessitareu els següents blocs:

Tipus de bloc Calaix Propòsit
def variable Definitions Defineix la variable currentQuestionIndex (Canvia-li el nom)
number (1) Math Establir el valor inicial currentQuestionIndex a 1

Els blocs han de tenir el següent aspecte:

index

Mostra la primera pregunta

Per començar, fes cas omís de les respostes i simplement treballa en el comportament de la seqüència per les preguntes. El comportament desitjat és el següent: quan l’aplicació s’inicia, la primera pregunta hauria d’aparèixer a l’etiqueta amb el nom QuestionLabel. Quan l’usuari fa clic a NextButton, la segona pregunta ha d’aparèixer.Quan l’usuari fa clic una vegada més, la tercera ha d’aparèixer. Quan s’arriba a la darrera pregunta, fent clic a NextButton ha de donar lloc a la primera pregunta, que un cop més ha d’aparèixer en QuestionLabel.

Amb App Inventor, es seleccionen els elements particulars d’una llista amb el bloc select list item. El bloc demana que especifiquis la llista i un índex – una posició en la llista. Si una llista té tres elements, els índexs 1,2, i 3 són vàlids.

Per QuizMe, quan l’aplicació s’inicia, l’aplicació ha d’elegir la primera pregunta a la llista i mostrar-la en el component QuestionLabel.

Per aquest comportament d’inicialització d’aplicació, necessites els següents blocs:

Tipus de bloc Calaix Propòsit
Screen1.Initialize Screen1 Quan aplicació comença, aquest controlador d’esdeveniments s’activa.
setembre QuestionLabel.Text to QuestionLabel Necessari per posar la primera pregunta en QuestionLabel
select list item Lists Necessari per seleccionar la primera pregunta de QuestionList
global QuestionList My Definitions La llista per seleccionar
number (1) Math Selecciona la primera pregunta amb l’índex 1

Els blocs han de tenir el següent aspecte:

Com treballen els blocs

L’esdeveniment Screen1.Initialize s’activa quan l’aplicació s’inicia. El primer element de la variable QuestionList es selecciona i es col · loca en QuestionLabel.Text.Així que quan l’aplicació s’inicia, l’usuari veurà la primera pregunta.

Prova d’aquest comportament. Fes clic a Restart Phone App (o Connect Phone si el telèfon no està connectat). Què apareix al telèfon? Si heu creat QuestionList com es descrivia anteriorment, el primer element de QuestionList, “Who pitched a perfect game in the World Series?” (Qui va llançar un joc perfecte en les Sèries Mundials?), Hauria aparèixer en l’etiqueta QuestionLabel.

Passant a través de les preguntes

Ara programa el comportament de NextButton. Ja has definit currentQuestionIndex per recordar la pregunta en què l’usuari es troba. Quan es prem NextButton,l’aplicació necessita incrementar aquesta variable, per exemple, canviar d’1 a 2 o de 2 a 3, etc, i aleshores utilitzar el valor resultant per seleccionar la nova pregunta “actual”. Per aquest comportament, necessitareu els següents blocs:

Tipus de bloc Calaix Propòsit
NextButton.Click NextButton Quan l’usuari prem Next, aquest controlador de evnto és activat.
setembre currentQuestionIndex to My Definitions Necessari per col · locar la primera pregunta a QuestionLabel
Bloc + Math Usat per incrementar currentQuestionIndex
global currentQuestionIndex My Definitions El nou valor és el vell + 1
number (1) Math Per al + 1
setembre QuestionLabel.Text to QuestionLabel Necessari per mostrar la següent pregunta aquí
select list item Lists Necessari per seleccionar la primera pregunta de QuestionList
global QuestionList My Definitions Es col · loca a la ranura list de l’anomenada select list item
global currentQuestionIndex My Definitions Es col · loca a la ranura index de l’anomenada select list item, volem l’últim element referit

Els blocs han de tenir el següent aspecte:

Com treballen els blocs

La primera fila de blocs incrementa la variable currentQuestionIndex. Si currentQuestionIndex té un 1 al, és canviat a 2. Si té un 2, és canviat a 3, i així successivament. Quan la variable currentQuestionIndex ha canviat, l’aplicació s’utilitza per seleccionar la pregunta “actual”.

Recordem que al controlador d’esdeveniments Screen.Initialize, l’aplicació selecciona la primera pregunta per mostrar:

Quan es fa clic a NextButton, l’aplicació no tria el primer element de la llista, o el segon o el tercer, tria l’element referit a currentQuestionIndex .

Els blocs s’executen d’esquerra a dreta. L’aplicació primer avalua el paràmetre index de select list item, que és la variable currentQuestionIndex. El nombre emmagatzemat en currentQuestionIndex s’utilitza com a índex quan l’element de la llista de selecció s’executa.

Quan es fa clic a NextButton per primera vegada, els blocs d’increment d’establir currentQuestionIndex d’1 a 2, de manera que l’aplicació selecciona el segon element de QuestionList, “who pitched the first perfect game of 2010?”. La segona vegada que es fa clic a NextButton, currentQuestionIndex es canvia de 2 a 3, i l’aplicació selecciona la 3 ª pregunta a la llista, “who pitched the first perfect game of the modern era?”

Prova d’aquest comportament. Prova el comportament de NextButton per veure si l’aplicació està treballant correctament fins ara.Per provar-ho, pren el paper de l’usuari i fes clic a NextButton al telèfon. ¿Mostra la pantalla del telèfon a la segona pregunta?, “Who pitched the first perfect game of 2010?” Hauria, i la tercera pregunta ha d’aparèixer quan fas clic a NextButton de nou. Si això funciona, fes-te un copet a l’esquena ràpidament, i després sige endavant.

Intenta fer clic a NextButton de nou (una tercera vegada). Has de veure un error: “Attempting to get item 4 of una llista dels length 3” (Intent d’obtenir el punt 4 d’una llista de longitud de 3). L’aplicació té un error – Saps quin és el problema?

El problema amb l’aplicació és que sempre incrementa la variable currentQuestionIndex quan NextButton es prem. Quan currentQuestionIndex ja està en 3 i l’usuari fa clic a NextButton, l’aplicació canvia currentQuestionIndex de 3 a 4, truca al element de la llista de selecció per obtenir el currentQuestionIndex , O en aquest cas, l’element quart. Atès que només hi ha tres elements QuestionList, Android es queixa.

El que l’aplicació ha de fer és fer una pregunta – comprovar una condició – quan NextButton es prem, i executa diferents blocs dependendiendo de la resposta. Una manera de fer la pregunta és preguntar, “¿És la variable currentQuestionIndex actualment en 3?” Si la resposta és si, Has ajustar currentQuestionIndex de nou a 0 de manera que l’usuari és portat de nou a la primera pregunta.

Necessitaràs els següents blocs:

Tipus de bloc Calaix Propòsit
if test then estat Control Per preguntar si l’usuari està en l’última pregunta
= Block Math Per provar si currentQuestionIndex és 3
global currentQuestionIndex My Definitions
number 3 Math 3 és el nombre d’elements a la llista
setembre currentQuestionIndex to My Definitions Ajustar a 0 per tornar a la primera pregunta
number (0) Math Estableix a 0, perquè els propers blocs s’incrementaran en 1

El controlador d’esdeveniments NextButton.Click modificat ha de tenir aquest aspecte:

Com treballen els blocs

Quan es fa clic a NextButton, l’aplicació 1 comprova si currentQuestionIndex té un 3 en el mateix. Si és així currentQuestionIndex es torna de nou a 0 perquè quan es agrégé 1 a ell amb els blocs de baix, sigui 1 i l’aplicació mostri de nou la primera pregunta. Tingues en compte que només els blocs inserits en if-test-then estatdepenen de la condició – els blocs increment i set QuestionLabel.Text to s’executen en totes les condicions.

Prova aquest comportament. Atès que les variables com currentQuestionIndex estan ocultes, són sovint la font d’errors en un programa. Afortunadament, App Inventor ofereix una manera de fer aquestes variables ocultes transparents durant la prova. En concret, App Inventor et permet “veure” com el valor d’una variable canvia segons progressa l’aplicació. Per aquesta prova, feu clic dret en el bloc de definició currentQuestionIndex a l’Editor de blocs i tria Watch. A continuació, tria Restart Phone App A continuació, en el bloc de definició apareixerà una caixa que mostra el valor inicial de currentQuestionIndex (1):

Ara agafa el telèfon i feu clic al NextButon. La segona pregunta, “who pitched the most Recent perfect game in the major Leagues?”(Qui va llançar el joc perfecte més recent en les Grans Lligues?) Ha d’aparèixer en QuestionLabel al telèfon, com abans. A la pantalla d’App Inventor, 2 hauria d’aparèixer a la cel · la de memòria de currentQuestionIndex:

En fer clic un cop més, la tercera pregunta ha d’aparèixer al telèfon i 3 ha d’aparèixer en la cel · la de memòria. Si fas clic de nou, 1 d’aparèixer en currentQuestionIndex i la primera pregunta al telèfon.

Una aplicació sostenible: Fer que sigui fàcil modificar les preguntes

A continuació, es modificarà l’aplicació perquè sigui fàcil afegir i eliminar elements de la llista. Vas a reescriure els blocs perquè treballin en qualsevol llista, no només en una amb exactament tres elements. Per començar, afegeix una quarta pregunta a QuestionList i una altra resposta a AnswerList. Els blocs han de tenir el següent aspecte:

Prova l’aplicació modificada. Fes clic a NextButton un nombre de vegades. Has de veure que no apareix la quarta pregunta, no importa quantes vegades facis clic a Next.

El problema és que la prova per veure si l’usuari està en l’última pregunta és molt concreta: se li pregunta si la variable currentQuestionIndex és 3:

Pots només canviar el número 3 a 4, i l’aplicació tornarà a funcionar correctament. El problema amb aquesta solució, però, és que cada vegada que modifiquis les preguntes i respostes, també has de recordar-te de fer aquest canvi. Aquestes dependències en un programa d’ordinador sovint condueixen a errors, especialment quan una aplicació creix en complexitat. És molt millor establir el programa de manera que treballi, sense importar quantes preguntes hagi. Tal generalitat és encara més important que la llista està treballant amb canvis de forma dinàmica, per exemple, una aplicació de prova que permet a l’usuari afegir noves preguntes.

La millor solució és fer la pregunta d’una manera més general. Realment vols saber si la pregunta en què s’encuntra l’usuari està – el valor de currentQuestionIndex – és tan llarg com el nombre d’elements en QuestionList. Si l’aplicació fa la pregunta d’una manera més general, funcionarà fins i tot quan agreges o treguis elements de QuestionList. Per modificar el controlador d’esdeveniments NextButton.Click vas a substituir la comprovació anterior que es referia directament a 3. Necessitaràs els següents blocs:

Tipus de bloc Calaix Propòsit
length of list Lists Comprova el nombre d’elements en QuestionList
global QuestionList My Definitions Es col · loca a la ranura list de length of list

El teu controlador d’esdeveniments NextButton.Click ha d’aparèixer ara així:

Com treballen els blocs

La prova if ara compara currentQuestionIndex amb la longitud de QuestionList. Així, si currentQuestionIndex té un 4 en l’, i la longitud de QuestionList és 4, llavorscurrentQuestionIndex es posa a 0 (i després a 1 després de l’operació d’increment en la primera fila de blocs després de if). Tingues en compte que, pel fet que els blocs no es refereixen a tres o ni a cap mida específica, el comportament funcionarà independentment quants elements hi ha a la llista.

Posa a prova el comportament modificat. Quan fas clic al nextButton, realitza l’aplicació ara la seqüència a través de les quatre preguntes, passa a la primera després de la quarta?

Canvi de la imatge per a cada pregunta

L’aplicació actual mostra sempre la mateixa imatge, no importa la pregunta que se li demani. Pots canviar això perquè la imatge correspongui a la pregunta que apareix quan es fa clic a NextButton. Anteriorment, has agregat quatre imatges en els mitjans per al projecte. Ara, crearem una tercera llista, PictureList, amb els noms dels arxius d’imatge com els seus elements i modificar el controlador d’esdeveniments NextButton.Click per canviar la imatge cada vegada.

En primer lloc, crea una PictureList i inicializala amb els noms dels arxius d’imatge. Assegura’t que els noms són exactament els mateixos que els noms dels arxius que es van carregar en els mitjans del projecte. Així és com els blocs de PictureList han de quedar:

A continuació, has de modificar el controlador d’esdeveniments NextButton.Click perquè es modifiqui la imatge en funció de la pregunta que l’usuari estigui en aquest moment. Si s’estableix la propietat Image.Picture a el nom d’un arxiu d’imatge que s’ha carregat, aquesta imatge apareixerà. Per modificar NextButton.Click,necessitareu els següents blocs:

Tipus de bloc Calaix Propòsit
setembre Image1.Picture to Image1 estableix aquesta per canviar la imatge
select list item Lists necessària per seleccionar la imatge corresponent a la pregunta actual
global PictureList My Definitions selecciona un nom de fitxer d’aquesta llista
global currentQuestionIndex My Definitions selecciona l’element indicat de currentQuestionIndex

Els blocs han de tenir aquest aspecte:

Com treballen els blocs

CurrentQuestionIndex serveix d’índex per QuestionList i PictureList. Quan currentQuestionIndex és 1, l’aplicació selecciona la primera pregunta i la primera imatge.Quan currentQuestionIndex és 2, l’aplicació selecciona la segona pregunta i la segona imatge. aquest sistema depèn de les llistes que estan sincronitzades com a efecte están.ía i indeed they are. Per exemple, la primera foto, LarsenBerra.jpg és una imatge de Don Larsen, i Don Larsen és la resposta a la primera pregunta, “Qui va llançar un joc perfecte en la Sèrie Mundial?” Posa a prova el comportament modificat. Apareix una imatge diferent cada vegada que fas clic a nextButton?

L’avaluació de les respostes

A continuació, anem a afegir blocs que informen de si l’usuari ha respost a una pregunta correctament o no. L’usuari introdueix la resposta a AnswerText i després fa clic a AnswerButton. L’aplicació de comparar l’entrada de l’usuari amb la resposta a la pregunta “actual”, utilitzant un bloc ifelse per comprovar-ho. L’etiquetaRightWrongLabel s’ha de modificar per informar si la resposta és correcta o no. Necessitaràs els següents blocs per aquest comportament:

Tipus de bloc Calaix Propòsit
AnswerButton.Click AnswerButton el comportament s’activa quan l’usuari fa clic a AnswerButton
ifelse Control si la resposta és correcta, fa una cosa, si no fa altra cosa
= Block Math per preguntar si és la resposta correcta
AnswerText.Text AnswerText la resposta de l’usuari es troba en aquesta caixa de text
select list item Lists per seleccionar la resposta actual d’AnswerList
global AnswerList My Definitions La llista de la de seleccionar
global currentQuestionIndex My Definitions el número de la pregunta (i el nombre de resposta) en què l’usuari està
setembre RightWrongLabel.Text to RightWrongLabel informar sobre la resposta aquí
text “correct” Text si la resposta és correcta
setembre RightWrongLabel.Text to RightWrongLabel informar sobre la resposta aquí
text “incorrect” Text si la resposta és incorrecta

Els blocs han de tenir el següent aspecte:

Com treballen els blocs

La prova ifelse comprova, “és la resposta de l’usuari (AnswerText.Text) igual a l’element currentQuestionIndex h corresponent a AnswerList?” SicurrentQuestionIndex és 1, l’aplicació compara la resposta de l’usuari amb el primer element de AnswerList, “Don Larsen”. Si currentQuestionIndex és 2, l’aplicació compara la resposta de l’usuari amb la segona resposta a la llista, “Dallas Braden”, i així successivament. Si el resultat és positiu, els blocs then estat s’executen iRightWrongLabel s’ajusta a “correcte!”. Si la prova és negativa, els blocs else estat blocks s’executen i RightWrongLabel s’ajusta a “incorrecte”.

Prova l’aplicació modificada. Tracta de respondre a una de les preguntes. Ha d’informar has respost a la pregunta tal i com s’especifica en AnswerList. Posa a prova tant amb una resposta correcta com incorrecta (com el text es compara, la prova distingeix entre majúscules i minúscules).

Fes clic a NextButton i respon a una segona pregunta. Encara funciona? Ha, però és possible que notis que quan fas clic NextButton,el text “correct” .. / .. / .. / “incorrect” i la resposta anterior encara hi són. Encara que és bastant innocu, com qüestions de la interfície d’usuari sense dubte seran observades pels usuaris de la teva aplicació.

Per deixar en blanc RightWrongLabel i AnswerText, vas a posar els següents blocs dins del controlador d’esdeveniments NextButton.click:

Tipus de bloc Calaix Propòsit
setembre RightWrongLabel.Text to RightWrongLabel L’etiqueta per deixar en blanc
text (blank) Text Quan es fa clic a Següent, esborra l’avaluació a la resposta anterior
setembre AnswerText.Text to AnswerText La resposta de l’usuari per a la pregunta anterior
text (blank) Text Quan es fa clic a Següent, esborra la resposta anterior

Els blocs han de tenir el següent aspecte:

Com treballen els blocs

Quan es fa clic a NextButton l’usuari es mou a la següent pregunta, de manera que les dues primeres files del controlador d’esdeveniments esborren RightWrongLabeli AnswerText.

Prova d’aquest comportament. Respon la pregunta i fes clic a Submit, a continuació, fes clic a NextButton. El teu resposta anterior i l’avaluació de l’aplicació desapareixen?

Programa Final

QuizMe! Versió Final

Embolica la versió final de l’aplicació triant Package For Phone | Barcode al menú del Component Designer. Quan aparegui el codi de barres, utilitza l’escàner de codi de barres del teu telèfon per descarregar i instal · lar l’aplicació.

Variacions

Quan aconsegueixis una quiz funcinando, és possible que desitgis explorar algunes variacions. Per exemple,

  • En comptes de mostrar imatges per a cada pregunta, intenta reproduir un clip de so o un vídeo de curta durada. Amb el so, pots convertir la teva aplicació en una aplicació Endevina aquesta cançó.
  • La prova és molt rígida en termes del que és acceptat com una resposta vàlida. Hi ha diferents formes de modificar això. Una d’elles és utilitzar el bloctext.contains per veure si la resposta de l’usuari està dins de la resposta actual. Una altra és la de proporcionar respostes múltiples per a cada pregunta, i comprovar per iteració (foreach) a través d’elles per veure si algúna coincideix.
  • Transforma la prova perquè sigui d’opció múltiple. La llista de respostes haurà de ser una llista de llistes, i cada sub-llista mantindrà les opcions de resposta. Fes servir el component ListPicker per permetre a l’usuari triar una resposta.

Revisió

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

  • Les aplicacions poden ser escrites d’una manera general perquè funcionin amb qualsevol llista de dades.
  • Les variables d’índex s’utilitzen per fer un seguiment de la posició actual dins d’una llista. Quan les incrementes, vés amb compte amb arribar a la final de la llista.

Continua llegint

Etiquetat , , , , ,

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í:

kittybluebutton

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í:

kittybluebuttonsound

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í:

blockseditorwithblocks

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.
Etiquetat , , , , , , , ,

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.
    unknownsources
  4. Prem Desenvolupament.
  5. Assegura’t que tant la depuració USB com romandre actiu estan seleccionats.
    usbdebugging

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.
Etiquetat , , , , , ,

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:

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.

Etiquetat , , , , , ,

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 .Captura de pantalla 2013-01-01 a la(s) 23.19.05

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:

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:

projects

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:

designer

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:

designerwithkittybutton

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ó.

blockseditorhellopurr

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ó!

Continua llegint

Etiquetat , , , , , , , ,

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 .Captura de pantalla 2013-01-01 a la(s) 23.19.05

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:

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:

projects

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:

designer

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:

designerwithkittybutton

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ó.

blockseditorhellopurr

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.

readyemulator

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!

Etiquetat , , , , , , , ,
Design a site like this with WordPress.com
Per començar