Bola 8 Màgica

L'app Bola 8 Màgica val 2 punts (1 per crear-la i un altre per omplir la seva fitxa)

Aquest mòdul introductori et guiarà a través de la construcció d'una aplicació "Bola 8 Màgica" amb AppInventor. Quan es toqui la icona de la bola 8, l'app ens donarà una de les seves prediccions clàssiques a la pregunta que li fem, com "És clar que sí, segur" o "No està clar, torna-ho a intentar."

Objectius d'aprenentatge: Després de completar aquesta sessió, seràs capaç de:

• • Navegar per l'entorn App Inventor: dissenyador, editor de blocs, emulador i/o telèfon físic

  • Utilitzar correctament els següents components d'App Inventor: sensor acceleròmetre, imatge, selector de llista i Text-to-Speach

  • Seguir amb cura les instruccions per a dur a terme amb èxit un procés

Materials

• • Una selecció d'imatges i sons estan disponibles a la Biblioteca de Mitjans d'App Inventor .

  • Tens materials impresos opcionals, tals com els Documents Resum App Inventor, i la versió en PDF d'aquesta lliçó (en anglès).

  • Basic App Inventor Tutorial [ vídeo ]

Primera part: clica a un botó i escoltaràs un so

L'app Bola 8 Màgica oferirà una predicció d'una llista que tu has dissenyat prèviament. Per a començar, el primer que anem a fer és un botó amb una imatge a dins, i programar-lo per a que es reprodueixi un so quan es polsa el botó.

DISSENY: Dissenyador App Inventor

• 1. Per a obrir la finestra d'App Inventor Designer, ves a http://beta.appinventor.mit.edu i inicia sessió (recorda que tens l'extensió a Chrome per a això)

  2. Clica a "My Projects" a la part superior esquerra de la pantalla, el que et durà al teu llistat de projectes. Clica a "New" i posa-li un nom al teu nou projecte, alguna cosa així com "Bola8Màgica" (recorda!: no es permeten espais!).

1. Descarrega una imatge i un fitxer de so des de la biblioteca multimèdia . Clica amb el botó dret (Ctrl + clic) a l'enllaç de la imatge o el so, i selecciona "Desa la imatge com a ..." o "Anomena i desa l'enllaç...". Desa els fitxers en una ubicació que puguis recordar (com l'Escriptori o Baixades/Descàrregues).

   1. A la columna esquerra de la finestra del Designer, obre la paleta bàsica i arrossega un component Button cap al visor (# 1).

   2. Ajusta el botó d'imatge en una imatge de Bola-8 de les que t'has descarregat:

   3. Clica al botó que acabes d'afegir per a veure'n les seves propietats al panell Properties de la dreta. A "Image" clica a la paraula "None ..." i s'obrirà una petita finestra de selecció (# 2). Clica al botó "Add" i ves on vas desar la imatge de Bola-8. Selecciona el fitxer i clica a "D'acord" per a tancar la finestra de selecció. Clica "D'acord" de nou al panell de propietats per a tancar la petita finestra emergent (# 3).

   4. Ves al camp de text al panell Properties i esborra el text de la pantalla del teu botó (# 4).

• 1. Des de la paleta de Media, arrossega un component de so al panell de visualització (# 1). Tingues en compte que, donat que el so no serà una part visible de l'aplicació, aquest apareixerà a la part inferior del panell de visualització, com un "component no visible".

  2. Estableix el fitxer del component de so font:

  3. Clica al component de so que acabes d'afegir per a veure'n les seves propietats al panell Properties de la dreta. A "Source" (font) clica al quadre petit a la paraula "None ..." i s'obrirà una petita finestra de selecció (# 2). Clica al botó "Add" i ves on vas desar el fitxer de so. Selecciona el fitxer de so, clica a "D'acord" per a tancar la finestra de selecció. Clica a "Acceptar" de nou al panell de propietats per a tancar la petita finestra emergent (# 3).

• 1. Ja has completat la feina al Dissenyador per a la primera part d'aquesta aplicació. Ja és hora d'anar a l'Editor de Blocs per a programar el comportament d'aquests components.

CONSTRUIR: Blocks Editor

A la cantonada superior dreta del Designer, clica al botó Open the Blocks Editor. Espera uns instants mentre l'editor de blocs es carrega. Això triga una mica, i freqüentment requereix que cliquis a "D'acord", "OK", o "Desar" com altres descàrregues de programes Java a l'equip. (Assegura't de buscar a la part inferior o superior del teu navegador per a veure si et demana que acceptis). Si estàs tenint problemes per a carregar l'editor de blocs, torna al punt 2 de la Instal·lació d'App Inventor.

Ara li diràs a la teva aplicació com comportar-se quan es polsa el botó. Això és realment molt simple a App Inventor, perquè el "codi" per al programa consta de només dos blocs!

Una vegada que l'editor de blocs està obert, hi ha diverses opcions de funcions al llarg del costat esquerre de la pantalla. Ens referim a aquests com a "paletes" per "calaixos".

Des de la paleta My Blocks, clica al calaix Button1. Arrossega el bloc when Button1.Click a l'àrea de treball (# 1). Des de la paleta My Blocks, clica al calaix Sound1, arrossega el bloc Sound1.Play a l'àrea de treball i la insereixes al bloc when Button1.Cllick (# 2). Ells s'encaixaran com peces d'un puzle.

Els blocs ara haurien de tenir aquest aspecte:

Això és! Has escrit el programa per a la primera part de Bola 8 Màgica. Ara és el moment de provar que està funcionant bé.

TEST: Telèfon / emulador

Ara has creat una aplicació! Per a provar que funciona, has de llançar un emulador o connectar-te al telèfon.

Emulador: clica a la imatge, se sent el so.

Telèfon: toca la foto, se sent el so.

Segona part : La predicció

Ara que hem aconseguit que el botó faci una acció (reproduir un so), volem estendre aquesta acció a la que dóna a l'usuari una predicció.

En primer lloc necessitarem dues etiquetes: Label1 mostrarà les instruccions, i Label2 mostrarà la predicció escollida. Anem a utilitzar els blocs per a programar un "selector de llista" que escollirà entre una llista de prediccions. Cada vegada que es polsa el botó, l'aplicació canviarà el text de Label2 per a mostrar la predicció escollida.

DISSENY: App Inventor

Torna a la finestra de disseny al teu navegador i afegeix algunes coses noves a la teva aplicació.

• 1. Des de la paleta Screen Arrangement, arrossega el component de disposició vertical (VerticalArrangement) (# 1). Al començament només es veurà com una caixa buida, però quan hi poses les coses, App Inventor sabrà que vols alinear-los verticalment (una a sobre de l'altra).

• 1. Des de la paleta Basic, arrossega un component Label (# 2) i col·loca'l dins del component de disposició vertical (VerticalArrangement). Al panell Properties, canvia la propietat "Text" de Label1 a "Fes-li una pregunta al Bola 8 Màgica". (# 3)

• 1. Des de la paleta Basic, arrossega un altre component Label (Label2) al quadre de disposició vertical (VerticalArrangement) de forma que es trobi just a sota de Label1. Canvia la propietat "Text" de Label2 a "Toca la Bola 8 Màgica per a rebre la teva resposta." Ara arrossega la imatge 8-Ball per a que estigui també dins del component de disposició vertical a sobre de les dues etiquetes. Això farà que s'alineïn entre si en una línia vertical.

Ara és el moment de tornar a l'editor de blocs per a programar els components que acabes d'afegir al teu projecte. (Recorda, l'editor de blocs s'executa en una finestra emergent del teu navegador web, representada per la icona de Java, que se sembla a una tassa de cafè).

CONSTRUIR: Editor Blocks

Ara ve la part divertida! Faràs una llista de prediccions i programaràs el botó per a seleccionar un element de la llista i mostrar-lo dins de Label2. El botó també segueix reproduint el so que havies programat a la primera part. Aquí tens com fer-ho:

• 1. Des de la paleta My Blocks, clica al calaix Label2 per a veure tots els seus blocs associats. Arrossega el bloc Label2.Text blau i insereix-lo just per sobre del bloc Sound1.Play. Tingues en compte que el bloc When Button1.Click automàticament es fa més gran per a acomodar el nou bloc.

• 1. Des de la paleta Built-In, clica al calaix de llistes (Lists). Arrossega el bloc pick random item i connecta'l a la dreta del bloc Label2.Text.

• 1. Des de la paleta Built-In, clica a Lists de nou. A continuació, arrossega el bloc make a list i connecta'l a la "llista" del costat dret del bloc d'element aleatori de selecció pick random item.

  2. Des de la paleta Built-In, clica al calaix Text, arrossega un bloc text i connecta'l a la dreta del bloc make a list . Clica directament a la paraula "text" per a que es ressalti. A continuació, pots escriure-hi el text nou. Pensa en les paraules que vols a la teva llista de prediccions per al Bola 8 Màgica. Escriu la primera predicció en aquest nou bloc de text.

1. Tingues en compte que quan es connecta un nou bloc de text al make a list es crea automàticament una nova branca. Repeteix el pas anterior per a cada una de les opcions de predicció que desitges programar a l'app Bola 8. Connecta cada bloc de text al bloc de make a list.

Els blocs han de ser quelcom com això:

(Nota: És normal que hi hagi un espai en blanc "item" al final de la llista)

Ja tens l'app Bola 8 Màgica! Ara, la teva aplicació és completament funcional, diverteix-te canviant les prediccions al teu gust.

TEST: Emulador o Telèfon

Emulador: Clica a la imatge de la Bola 8. Hauries de veure una de les respostes en el camp de text Label2.Text, seguit pel so.

Telèfon: Toca la imatge de la Bola 8. Hauries de veure una de les respostes en el camp de text Label2.Text, seguit pel so.

Tercera part : Sacsejar el telèfon, obtenir una predicció

Malgrat que tens una app Bola 8 Màgica, hi ha una manera per a que sigui encara més divertit. Pots utilitzar el component acceleròmetre per a que el telèfon respongui a les sacsejades en lloc de respondre a un clic de botó. Això farà l'aplicació molt més semblant a la veritable Bola 8. Nota: Aquesta part només es pot fer amb un telèfon real o tablet equipats amb un acceleròmetre. Si estàs utilitzant un emulador, omet aquesta part i ves directament al Desafiament.

DISSENY: App Inventor

Des de la paleta de sensors (Sensors), arrossega un component sensor AccelerometerSensor. Observa que automàticament baixa als "components no visibles" de la finestra del visor. Aquest és l'únic component nou que necessites.

CONSTRUIR: Blocks Editor

• 1. Des del calaix My Blocks, clica a AccelerometerSensor. A continuació, arrossega el bloc when AccelerometerSensor.Shaking.

  2. Desconnecta tots els blocs de l'interior del bloc Button1.Click i mou-los a dins del bloc AccelerometerSensor.Shaking

  3. NOTA: Pots moure seccions completes de blocs connectats clicant al bloc superior o en el més a l'esquerra i arrossegant-lo. Els blocs connectats es mouran amb ell.

  4. Suprimeix el bloc Button1.Click per a mantenir la teva àrea de treball ordenada, ja no el necessites.

Els blocs han de ser quelcom com això:

TEST: Telèfon / Emulador

Telèfon: En sacsejar el telèfon ha de mostrar una resposta i reproduir un so.

Emulador: Per desgràcia no es pot simular sacsejar el telèfon amb l'emulador.

Empaqueta l'aplicació per al teu telèfon!

La teva aplicació podria desaparèixer si desconnectes el telèfon des de l'editor de blocs. Això és degut a que l'aplicació encara es desa al servidor d'App Inventor i no al telèfon. Segueix las instruccions per a empaquetar la teva aplicació per al telèfon o per a crear un fitxer ".apk" que es pot instal·lar a qualsevol telèfon Android. Si vols una aplicació més "guay" encara, atreveix-te amb els següents desafiaments:

Desafiament: Fer que el la Bola 8 Màgica parli

En lloc de (o a més a més de) fer que la predicció aparegui com a text, pots fer que el 8-Ball parli en veu alta? Suggeriment: el component de text a veu (TextToSpeech) es troba a la paleta Other stuff al Designer. Nota: La majoria dels dispositius Android tenen la capacitat text-to-speech (TTS), però si tens problemes per a obtenir el component de TTS en AppInventor per a treballar, pot ser que hagis d'instal·lar TTS i / o habilitar-lo a teu dispositiu.

Si resols aquest desafiament guanyaràs una insígnia :-)

Aquí tens una pista:

Si el TTS del teu mòbil et dóna problemes prova a instal·lar-te TTS Extended de Eyes-Free:

Font: Curriculum MIT AppInventor, Magic 8 ball