Per fer amb AppInventor

Avui en dia la proliferació dels smartphones i tauletes enstre els joves i adolescents, ens obra les portes a planificar activitats orientades per una banda a treballar continguts i conceptes curriculars, i d’altra a aprofitar la motivació i accessibilitat que ens donen aquestes noves tecnologies.
Per això veurem com podem fer amb AppInventor, una senzilla aplicació per a Android que ens calculi la velocitat d’un objecte indicant l’espai i el temps transcorregut.
Els requisits necessaris són:

  1. Cal que tinguem instal.lat el Java. Si no és així fins i tot podem descarregar la versió portable ( cliqueu aquí).
  2. Ens hem de descarregar i descomprimir el paquet de fitxers de l’emulador de la terminal Android. (Cliqueu aquí) . Aquesta és una versió també portable
  3. Necessitarem tenir un compte Gmail i amb aquest compte ens validarem a la web d’AppInventor. (cliqueu aquí)

0.- Accedirem a la plataforma web Appinventor (cliqueu aquí) . Com  ja hem comentat ens caldrà validar-nos fent servir un compte gmail.

Aquí tenim la plataforma inicial:

  • AppInventor1

Elements de la plataforma Appinventor

  1. Opció del Menú per crear projectes i gestionar els creats. El primer que haurem de fer serà crear un projecte nou des d’aquesta opció
  2. Columna amb els objectes que podem afegir a les nostres aplicacions  agrupats per àmbits
  3. Columna on visualitzem com queda la pantalla de la nostra aplicació
  4. Columna  contenidora de tots els objectes que anirem afegint a la nostra aplicació. Al final en l’apartat Media visualitzarem els fitxers d’imatge, àudio i vídeo que anirem incorporant des del nostre ordinador
  5. Columna amb totes les propietats que podem configurar de l’objecte seleccionat en la columna 4
  6. Botó per gravar el projecte
  7. Botó per accedir a l’editor de codi de l’aplicació. A on podem programar les accions a realitzar per a cada objecte
  8. Botó que ens facilitar l’accés a l’aplicació ja compilada i preparada per s er emprada en una terminal Android

Anem a fer la nostra primera aplicació :

  1. Afegirem una Taula d’arrengament per tal de poder tenir en la mateixa fila el text i la caixa per escriure el valor

Seleccionem l’objecte “TableArrangement” (1)  i l’arrosseguem fins a la columna de pantalla (2) , en la columna d’objectes ja visualitzem aquest objecte (3) i en la columna 4 podem personalitzar les seves 5 propietats com numero de files i columnes

2.- Dins de la taula afegirem una etiqueta(Label) per visualitzar informació :

Seleccionem l’objecte Label (Etiqueta) (1)  i l’arroseguem fins dins del primer espai de la taula (2) , ara visualitzarem el nou objecte en la columna (3) , com a propietats personalitzades hem escrit un text dins l’etiqueta (4) i canviat el color de la lletra (5)

3.- A continuació afegirem una caixa de text (textbox) que ens permetrà escriure un valor al nostre terminal per poder processar:

Seleccionem l’objecte TextBox i l’arrosseguem fins al costat de l’etiqueta que hem escrit abans (2) , veurem un nou objecte a la llista (3) i en aquest cas no modifiquem cap propietat d’aquest objecte

4.- Repetirem el mateix dels passos 2 i 3 per afegir una nova etiqueta i una nova caixa de text:

Seleccionem els dos objectes (1) i (2) , a continuació els arrosseguem a les seves posicions dins de la taula (3) i (4) . Els nous objectes els tindrem a la llista (5) i hem de tenir present de personalitzar propietats com el color(6) i el text(7)

5.- Afegirem el botó que ens ha d’activar el càlcul de la velocitat

Seleccionem l’objecte Button (1) i l’arrosseguem a la pantalla (2) , veurem que ara el tenim situat fora de la taula com un nou objecte (3) i finalment personalitzarem el text que sortirà al botó (4)

6.- Afegirem una etiqueta per visualitzar el resultat.

Seleccionem l’objecte etiqueta (1) i l’arrosseguem a la pantalla (2) , com que aquest objecte el farem invisible, activem que el visor ens mostri els objectes invisibles (3) , veurem l’objecte ja afegit a la llista (4) i finalment personalitzarem les propietats: netejarem el text de l’etiqueta (5) , farem l’etiqueta invisible mentre no tinguem resultat per escriure (6) i farem que tingui tota l’amplada de l’objecte para (7)

7.-  Finalment personalitzarem la pantalla de l’aplicació

Seleccionem l’objecte Screen (pantalla) (1) , anirem a la secció de Media (2) i afegirem una imatge en format ICO que posteriorment farem servir de icona de l’aplicació dins del mòbil (3) . Dins de les propietats de la pantalla , veurem que tenim l’opció ico per escollir una icona per visualitzar en el mòbil

8.- Una vegada configurada la pantalla, ens caldrà programar el codi de les accions a realitzar per part dels objectes dissenyats en  l’aplicació, per això ens adreçarem al botó “Editor de Blocks” . En clicar ens descarregarà una aplicació en Java (“AppInventorForAndroidCodeblocks.jnlp“) . Si teniu problemes amb el Java per obrir aquesta aplicació, us podeu descarregar el Java portable i l’obriu amb el fitxer “javaws.exe” de la carpeta /bin .

En aquest editor diferenciarem:

  1. Selecció  d’objectes de la propia aplicació (“My Blocks”)
  2. Objectes, elements i funcions per emprar en la programació (“Built In”)
  3. Elements Avançats (“Advanced”)
  4. Espai de desenvolupament del codi
  5. Botons per “Gravar” , “Desfer” i “Esborrar”  el codi
  6. Espai per enviar l’aplicació a un emulador o aparell mòbil,  per visualitzar el seu funcionament

9.- Desenvoluparem el codi de la nostra aplicació, programant l’acció de clicar el botó de “Calcular la velocitat” (Buton1″)

Seleccionem “My Blocks” (1) pr visualitzar els objectes que hem inclòs en la pantalla. Clicarem sobre “Button1” i se’ns obrirà al costat el llistat d’elements programables del botó (2) , de manera que escollirem aquella opció referent a clicar el botó (“Button1.Click“) i l’arrossegarem a l’espai de treball (3)

10.- Assignarem el valor del càlcul a l’etiqueta Label3 que visualitzarà el resultat :

Com que el resultat l’hem de visualitzar en l’etiqueta3 (“Label3”) , escollirem l’event que consisteix en assignar valors a l’etiqueta “Set Label3.Text” (1) , l’objecte Label3 el trobarem a l’espai “My Blocks”. A Continuació hem de fer l’operació de multiplicar el valor entrat com a espai a la caixa de textbox1 amb el valor de la caixa de textbox2. Per això anirem a “Built in” i localitzarem els elements de càlcul (“Math”) , entre aquests escollirem el de fer multiplicacions (2)  i l’arrossegarem al costat de l’element Label3.text. Ara omplirem els valors del càlcul que estaran dins de la propietat text de les dues caixes de text, (3) i (4)  que seguim el que ja hem fet trobarem a l’espai de “My Blocks” .

11.- Finalment haurem de fer visible l’etiqueta3 per visualitzar el resultat :

Seleccionem l’objecte Label3 de “My Blocks” (1) i escollim la propietat “Set Label3.Visible”  i la situem dins del block del codi (2) , ara ens caldrà assignar el valor “true” per fer visible el text. Clicarem el ratolí sobre el forat “to” (3) i ens apareixerà un menú, escollirem l’apartat de “Logic” on trobarem el valor “true

11. Estem ja en condicions de visualitzar com funciona l’aplicació. per això crearem un nou emulador  “New Emulator” . En aquest procés, la primera vegada ens demanarà en quina carpeta tenim l’emulador, que prèviament haurem descarregat i descomprimit tal com hem indicat al principi (requisit 2). Aquí podem veure la finestra de l’emulador que se’ns obrirà:

12.- Una vegada tenim l’emulador funcionant podem enviar l’aplicació des de l’editor de Blocks:

Obrirem el desplegable dels dispositius connectats (“Connect Device“) i localitzarem el identificador de l’emulador que tenim obert, en el nostre cas “emulator-5554” i clicarem (1)de manera que enviara l’aplicació a la terminal Android.

13.- El moment de veure el resultat és arribat:

Una vegada entrades les dades, obtenim ja el nostre primer càlcul :

14.- Finalment podem instal.lar l’aplicació al nostre emulador o aparell de mòbil. Per fer-ho accedirem de nou a la web de disseny i des del Menú “Package for Phone” escollim l’opció del terminal connectat que pot ser l’emulador o també podem connectar via cable el nostre mòbil.

Aquí tenim el resultat, portem una aplicació pròpia en el nostre mòbil …….

Podeu descarregar el codi del programa en format AppInventor clicant aquí

Si voleu accedir a la Base de Dades d’aplicacions Android per descarregar el codi cliqueu aquí.

També podeu recopilar diversos skins per al vostre emulador: cliqueu aquí

Share Button

Una resposta so far.