AppInventor: Caçador de Talps!

TalpT’han aparegut mai talps al mòbil? Has provat de caçar-los?

Et proposem que creis un joc per al teu mòbil Android. És molt fàcil, estàs preparat/da?

Guió de la sessió presencial: Talps

iniAbans de començar

  • Fitxa Didàctica (general)

    Fitxa Didàctica (general)

    Abans de fer aquesta activitat, és convenient haver-ne fet amb un entorn més senzill, per exemple Scratch (si no és així, fes una ullada als entorns de programació).

  • Per a fer aquesta activitat, primer t’has d’instal·lar l’entorn AppInventor:
    • Obre aquesta pàgina web: http://beta.appinventor.mit.edu
    • Has de registrar-te utilitzant un compte de Google.
    • Prem el botó NEW i introdueix el nom del projecte que vols crear. Per exemple, per aquest projecte pots posar: TalpApp. Després has de prémer el botó OK.
  • Mira d’assolir els reptes que hi ha a continuació tu sol/a, i si no saps com fer-ho, mira les bombetaIdees. Si encara et cal una mica més d’ajuda, pots fer una ullada a les lupaPistes.
  • Pla de treball:
    • Pas 1: Dissenyar la pantalla del joc amb un talp al mig.
    • Pas 2: Fer que el talp es situï en una posició diferent cada cop que s’engegui l’aplicació.
    • Pas 3: Fer que el talp es vagi movent cada segon.
    • Pas 4: Fer que l’usuari acumuli punts si encerta a tocar el talp abans que es mogui.
  • Podeu fer una ullada a aquesta presentació de diapositives sobre les aplicacions per a mòbil (feta per en Santi Seguí per a les Jornades Taller UB 2013).

petjadaPas 1: Dissenya la pantalla del joc amb un talp al mig

  • puzzleRepte 1: Crea un zona on poder dibuixar els talps
    • Aquesta zona ha de tenir una alçada de 300 píxels i estar a la part superior de la pantalla. L’amplada ha de ser tota la pantalla.
    • interrogantPregunta 1: Com es diu la tela que usen els pintors per a fer un quadre? Com es diu en anglès?
    • bombetaIdees:
      • Aquesta àrea de dibuix és un component que es diu Canvas.
      • Busca dins la pestanya Basic del magatzem de components.
      • Les mides es poden tocar a l’apartat Properties, situat a la dreta.
    • lupaPistes:
      • Talp-1
      • (pots fer un clic a la imatge per a veure-la més gran; podràs fer el mateix amb les següents imatges del quió)
      • Widht = “fill parent” (significa que ocupi tot l’espai disponible).
      • Height = 300 píxels
  • puzzleRepte 2: Posa un talp en pantalla
    • Situa al mig de l’àrea de dibuix (Canvas) el personatge principal (pots usar la imatge d’un talp o la que més t’agradi).
    • bombetaIdees:
      • Les imatges es poden inserir amb un component que es diu ImageSprite.
      • Busca dins la pestanya Animation del magatzem de components.
    • lupaPistes:
      • talp-2
      • Un cop inserit el component has d’indicar el fitxer de la imatge a la propietat Picture.
  • puzzleRepte 3: Executa l’aplicació
    • De moment tan sols has dissenyat la pantalla, però pots executar l’aplicació per veure si tot funciona correctament.
    • bombetaIdees:
      • Hi ha vàries opcions possibles: (1) en un emulador sense que calgui mòbil, (2) enviant l’aplicació per correu-e, (3) usant un codi QR, (4) connectant el mòbil per wifi, (5) connectant el mòbil per cable.
      • Si no vols haver d’instal·lar programari addicional, et recomanem el mètode “(3) usant un codi QR” per a provar-lo tu mateix/a, o el mètode “(2) enviant l’aplicació per correu-e” si vols que el provi algú altre.
    • lupaPistes:
      • Aquí tens les indicacions per a fer-ho (3) usant un codi QR:
        • Prem el menú Package for Phone (que hi ha a la part superior dreta de l’Editor de components) i selecciona Show barcode.
        • S’obrirà una finestra on apareixerà un codi QR (pot trigar una mica).
        • Apropa el mòbil i usa un lector de codis QR (p.ex. QR-Droid). ATENCIÓ, aquest mètode només serveix per al teu telèfon (ja que has d’introduir l’usuari i clau del teu compte de Google).
      • Pots veure més instruccions sobre altres mètodes d’execució.

petjadaPas 2: Fes que el talp es situï en una posició diferent cada cop que engeguis l’aplicació

  • interrogantPregunta 2: Com es diu aleatori en anglès? Hi ha algun component que tingui aquest mot anglès?
  • puzzleRepte 1: Crea el procediment que permetrà moure el talp a una posició aleatòria de la pantalla.
    • Entra a l’Editor de codi i crea un procediment anomenat MoureTalp que mogui el talp a una posició vertical i horitzontal aleatòries.
    • bombetaIdees:
      • L’Editor de codi s’obre amb el botó Open the Blocks Editor (de la part superior dreta de l’Editor de components)
        • Cal tenir l’entorn Java instal·lat.
          • Si el tens instal·lat sortirà un diàleg preguntant si vols executar l’editor.
          • Sinó, el pots descarregar d’aquí. Un cop descarregat, pots tornar a prémer el botó Open the Blocks Editor.
        • A continuació pot demanar: “Please locate the command directory on your computer and enter the full path below
          • Si és així, prem el botó “Cancel·lar”.
          • Sortirà un missatge avisant que no es podrà passar el teu programa al mòbil per cable, però no hi ha problema si no vols usar aquest mètode (si el vols usar, mira el darrer repte del pas anterior).
      • Pots iniciar un nou procediment des de la pestanya Built-in, a l’apartat Definition, arrossegant el bloc to procedure sobre l’àrea del programa (no confondre amb el bloc to procedureWithResult).
      • Trobaràs el personatge que has inserit a la pestanya My Blocks i veuràs que té el bloc de moviment MoveTo.
      • Pots generar números aleatoris usant el bloc Random Integer (busca dins de Built-in / Math).
    • lupaPistes:
      • talp-6
      • talp-7
      • Pots canviar el nom del procediment fent un clic sobre el nom “procedure” original.
      • Pots canviar el nombre inicial que us surt per defecte “number 1” fent un doble clic sobre ell.
      • Pots esborrar el nombre final que us surt per defecte “number 100” arrossegant-lo fins la paperera que hi ha a la part inferior dreta.
      • Trobaràs l’alçada (Height) i l’amplada (Width) de l’àrea de dibuix (Canvas) i del personatge (Talp) dins la pestanya My Blocks.
  • puzzleRepte 2: Fes que el talp es mogui quan l’aplicació s’inicia
    • Defineix que quan la pantalla s’inicialitzi, el talp es mogui a una posició aleatòria.
    • bombetaIdees:
      • Pots trobar el menú de la pantalla creada Screen1 dins la pestanya My Blocks.
      • Pots definir què passa al inicialitzar la pantalla amb Screen1.Initialize.
      • El fragment de programa que has creat al repte anterior el trobaràs a la pestanya My Blocks dins la categoria My Definitions.
    • lupaPistes:
      • talp-8
  • interrogantPregunta 3: Si proves d’engegar l’aplicació vàries vegades, el talp se situa a posicions diferents?

petjadaPas 3: Fes que el talp es vagi movent cada segon

  • interrogantPregunta 4: Com és diu en anglès l’aparell per a mesurar el temps?
  • puzzleRepte 1: Posa un component per a poder cronometrar el temps.
    • Insereix un component que permeti cronometrar el temps transcorregut.
    • bombetaIdees:
      • El temps es pot mesurar amb un component que es diu Clock.
    • lupaPistes:
      • talp-5
      • Fixa’t com al no ser un component que tingui representació visual en la pantalla del mòbil, a l’editor es veu sota el simulador de la pantalla.
  • puzzleRepte 2: Fes que el el talp es mogui un cop per segon.
    • Fes que el moviment aleatori del talp es produeixi cada cop que el cronòmetre hagi mesurat que ha passat 1 segon.
    • bombetaIdees:
      • El component rellotge té una propietat per indicar l’interval de temps a mesurar.
      • El component rellotge té un esdeveniment (event) que succeeix cada cop que transcorre l’interval de temps indicat, és diu Timer.
    • lupaPistes:
      • talp-9
      • El component Clock1 el trobaràs dins de la pestanya My Blocks.
      • El procediment MoureTalp el trobaràs dins de la pestanya My Blocks, a My Definitions.
  • interrogantPregunta 5: En executar l’aplicació, creus que arriba a repetir les posicions a mida que es va movent?

petjadaPas 4: Fes que l’usuari acumuli punts si encerta a tocar el talp abans que es mogui

  • puzzleRepte 1: Posa el marcador de punts en pantalla.
    • Insereix una etiqueta a la pantalla que posi la puntuació, d’entrada amb zero punts.
    • bombetaIdees:
      • Les etiquetes es poden inserir amb un component que es diu Label.
    • lupaPistes:
      • talp-3
      • Un cop inserit el component has d’indicar el contingut de l’etiqueta a la propietat Text i pots variar la seva mida del amb FontSize.
  • puzzleRepte 2: Afegeix una variable per controlar la puntuació.
    • Crea una variable anomenada “puntuació” per a “apuntar-se” la puntuació actual del jugador.
    • bombetaIdees:
      • Una variable és una estructura de dades per emmagatzemar un valor que podrà variar al llarg de l’execució del programa.
      • Fes una ullada a la pestanya Built-in, menú Definitions.
      • Per indicar el tipus d’element que es podrà guardar a la variable, fes una ullada a la pestanya Built-in, del menú Maths.
    • lupaPistes:
      • talp-10
      • Pots canviar el nom original “variable” a “puntuacio” (fixa’t que no hi posem l’accent) fent un clic a sobre.
      • El valor inicial el pots indicar arrossegant l’element number que trobaràs a Maths. Pots modificar aquest valor inicial i deixar-lo a 0.
  • puzzleRepte 3: Augmenta la puntuació quan l’usuari toqui el talp.
    • Cada cop que l’usuari toqui un talp, dona-li un punt.
    • bombetaIdees:
      • Existeix un esdeveniment (event) que s’activa quan l’usuari toca un component, que es diu Touched.  Mira a la pestanya a My Blocks, dins el component Talp.
      • Durant l’execució del programa es pot canviar el valor d’una variable usant set global (mira dins de la pestanya My Blocks, menú My Definitions, entrada puntuacio).
      • Durant l’execució del programa es pot canviar el valor d’una propietat usant set (mira dins de la pestanya My Blocks, element Label1).
    • lupaPistes:
      • talp-11.00
      • Fixa’t que per a incrementar el comptador has de modificar el seu valor (set global puntuacio) en funció del seu valor actual (global puntuacio). Et cal l’element suma (+) i constant (number) del menú Math.
      • Per indicar el valor del marcador et ca et cal ajuntar (join) el text (Built-In/Text) explicatiu i el valor del comptador (My Blocks/My Definitions/global puntuacio).
  • puzzleRepte 4: Fes que el telèfon vibri al tocar el talp.
    • Insereix un component que permeti fer vibrar el telèfon durant mig segon quan el jugador encerti a tocar un talp.
    • bombetaIdees:
      • Els sons es poden inserir amb un component que es diu Sound. Busca dins la pestanya Media del magatzem de components.
      • El mateix component de só permet controlar la vibració del telèfon amb un mètode que es diu Vibrate.
    • lupaPistes:
      • talp-4
      • Veuràs que el component no es dibuixa a l’àrea de la pantalla del mòbil, sinó fora d’aquesta, ja que no és un element visual.
      • talp-11.01
      • Pensa que el fragment de codi l’hauràs d’inserir després d’actualitzar el comptador de puntuació.
      • L’element Sound1.Vibrate el trobaràs dins de Sound1 a la pestanya My Blocks. Recorda com has inserit el número inicial de la variable al repte anterior perquè necessitaràs el mateix per indicar la quantitat de mili-segons que dura la vibració.

mesI després…

MoleOnEmulatorFelicitats! Has creat el teu primer joc d’Android! Estàs fet tot un programador/a d’Apps!

Recorda que ara ja saps com:

  • Arrossegar components per a crear la interfície gràfica (la “pantalla”) de la teva aplicació.
  • Arrossegar components per a crear petits programes.
  • Mostrar una imatge i un text en pantalla.
  • Usar una variable per a comptar els punts.
  • Usar un rellotge per a fer accions a mida que passa el temps.
  • Distribuir la teva aplicació i executar-la al mòbil.

Si vols, pots fer una ullada a aquesta galeria d’aplicacions fetes amb AppInventor.

feather Autoria: Jordi Campos i Miralles (creació activitat EduLogiX) a partir de l’activitat de les Jornades Taller UB 2013 de Santi Seguí (feta a partir de l’original MoleMash).

Anuncis

Un pensament sobre “AppInventor: Caçador de Talps!

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s