HOLA GATETA

En aquesta pràctica dissenyaràs una app que tracta d'una mascota virtual (una gateta) que fa un so
quan la toques.

L'entorn de programació d'App Inventor consta de tres parts principals:

● Dissenyador de components: per seleccionar els components (elements) de l'aplicació i
canviar les seues propietats.
● Editor de blocs: per crear comportaments dels components.
● Un telèfon et permet executar realment i provar la teua aplicació com ho estàs
desenvolupant. Si no tens un telèfon Android a mà, pots provar les aplicacions que
construeixen utilitzant l'emulador d'Android que ve integrat amb el sistema.
Accedeix a la web http://ai2.appinventor.mit.edu Et demanarà que accedisques amb un compte
Google.

Si aquesta és la primera vegada que fas servir l'App Inventor, veuràs la pàgina de projectes, que
seran en la seua majoria en blanc perquè no s'ha creat cap projecte encara. El primer que has de fer
és canviar l'idioma. A l'esquerra del teu compte Google apareix l'idioma, canvia'l a Español.

Per crear un projecte, fes clic al botó “Comenzar un proyecto nuevo” a la part superior esquerra de
la pàgina, escriu el nom del projecte "HolaGateta" i polsa “Aceptar”.

La primera finestra que s'obre és el Dissenyador de components. Els components són els elements
que es combinen per crear aplicacions, com els ingredients d'una recepta.

Està dividida en quatre parts:

● Paleta: Llista de components que es poden seleccionar. La paleta es divideix en seccions,
en aquest moment, només "Interfaz de usuario" és visible, però pots veure els components en
altres seccions de la paleta fent clic a les capçaleres de "Disposición", "Medios", "Dibujo y
animación", etc.
● Visor: on es fiquen els components que formaran part de la teua aplicació. Mostra una
indicació de com es veurà aproximadament ja que per exemple, una línia de text es pot acabar
en un altre lloc diferent en el teu mòbil
● Components: enumera els components del projecte. Qualsevol component que s'arrossega
al visor apareixerà en aquesta llista. Actualment el projecte té només un component Screen1
que representa la pantalla del telèfon. En la part de baix hi ha una secció anomenada Media on
apareixen les imatges i sons del projecte.
● Propietats de components: són les característiques del component seleccionat en
Components que es pot canviar (per exemple, el color de la lletra en un component Etiqueta).
En aquesta app hi haurà dos components visibles: una etiqueta i un botó i dos no visibles: un so i un
acceleròmetre que detecta quan el telèfon s'està sacsejant.

1. Creació de la interfície.
Creació de l'etiqueta.

El primer component és afegir una etiqueta:

1) Ves a la paleta, fes clic a "Etiqueta" i arrossega-a al Visor. Veuràs una forma rectangular

-1-
 que apareix a la pantalla, amb les paraules "Texto para Etiqueta1".
2) Mira el quadre "Propiedades" a la part dreta del dissenyador. Mostra les propietats de
l'etiqueta. Hi ha una propietat anomenada "Texto" a mig camí cap avall, amb una caixa de text
de l'etiqueta. Canvia el text a "Hola gateta" i polsa Intro. Veuràs el canvi de text en el Visor.
3) Canvia el color de fons a blau.
4) Canvia el color de text a groc.
5) Finalment, canvia la mida de la lletra a 20.

Creació del botó.

La gateta s'implementa com un component "Botón" on es canvia la imatge del botó pel de la gateta.

Fes clic en "Botón" en la paleta i afegeix-lo baix de l'etiqueta. Veuràs un botó rectangular que
apareix a la pantalla.

Si polsares el botó en el telèfon no passaria res perquè la teua aplicació no li ha dit al botó que faça
res. Aquest és el primer punt important a comprendre sobre App Inventor: per a cada component
que s'agrega en el disseny, cal passar al Editor de Blocs i crear el codi per fer que alguna cosa
succeeixi amb aquest component (ho faràs després d'acabar d'afegir els components que necessitem
en el disseny).

Per ficar en el botó la imatge de la gateta:

1) El quadre de propietats hauria de mostrar les propietats del botó. Si no és així, fes clic a la
imatge del botó a la pantalla per mostrar les propietats del botó de la dreta.
2) En el quadre de propietats, fes clic a l'àrea baix "Imagen" (on actualment diu "Ninguno").
Apareix un quadre amb un botó marcat "Subir archivo..."
3) Fes clic a "Subir archivo" i després fes clic a "Seleccionar archivo...", busca i selecciona
l'arxiu "gateta.png" i fes clic a "Aceptar".
4) Veuràs un missatge a la part superior de la pantalla: "Subiendo gateta.png...". Després
d'uns 30 segons, el missatge i la caixa de càrrega desapareixerà, i gateta.png ha d'aparèixer
com la propietat d'imatge per al botó. També veuràs que aquest apareix en l'àrea de "Medios"
de la finestra del dissenyador, just baix de la llista de components. En el botó ara es veu com
un gatet.
5) Voràs que la imatge del gatet al telèfon té les paraules "Texto para Boton1" que apareix en
ella. Per evitar que es veja en la teua aplicació has d'eliminar el text que apareix en la propietat
"Texto".
Ara, el dissenyador ha d'aparèixer com es mostra a continuació:

-2-
Incorporació del so “meu”.

En la aplicació la gateta ha de miolar quan polsem damunt d'ella. Per fer-ho, hauràs d'afegir el so
meu i programar el comportament del botó per reproduir el so quan es polse el botó:
1) Ves a la paleta a l'esquerra de la finestra del Dissenyador i fes clic a la capçalera de "Medios" per
expandir aquesta secció. Arrossega un component "Sonido" i posa'l en el Visor. Veuràs que apareix
a la secció de la part inferior del visor de nom "Componentes no visibles". Components no visibles
són objectes que fan coses per l'aplicació, però no apareixen a la interfície d'usuari visual de
l'aplicació.
2) Fes clic en Sonido1 per mostrar les seues propietats. Estableix el seu origen fins meu.mp3.
Hauràs de seguir els mateixos passos per carregar l'arxiu des del teu ordinador com ho vas fer per a
la foto de la gateta. En acabar, has de veure gateta.png i meu.mp3 aparèixer a la secció de "Medios"
del Dissenyador.
Encara que App Inventor va guardant, de tant en tant, el teu treball, pots guardar-lo en qualsevol
moment des del menú "Proyectos" > "Guardar proyecto". Es convenient que ho faces tu, de tant en
tant, per si es perd la connexió.

2. Creació del codi.

En aquest punt, has creat la interfície però l'app encara no fa res. Has d'afegir instruccions per fer
que funcione com desitges.

Això es fa amb l'Editor de blocs. Si l'Editor de blocs encara no està obert, feu clic a "Bloques" a la
part superior dreta del Dissenyador de components baix del correu electrònic.

Mira la finestra de l'editor de blocs. Ací és on diràs als components el que cal fer i quan fer-ho. Vas
a dir-li al botó de la gateta que reproduïsca un so quan l'usuari el polse. Si els components són
ingredients d'una recepta, pots pensar en els blocs com les instruccions de cocció.

El miol de la gateta.

A la part superior esquerra de la finestra, veuràs botons etiquetats "Integrados" i altres que
apareixen baix de "Screen1" que són els components que has afegit a l'aplicació. Si fas clic a un
calaix, veuràs un munt d'opcions (blocs) per al component seleccionat.
1) Fes clic al calaix de "Botón1". El calaix s'obre, mostrant una selecció de blocs que es
poden utilitzar per indicar al botó que fer. Tria el bloc "cuando Botón1.Clic" i arrossega'l a
l'editor.
2) Fes clic a "Sonido1" per obrir el calaix per al component de so, i arrossegar el bloc "llamar
Sonido1.Reproducir". Fixa't que aquest bloc té una forma que pot cabre en un espai marcat
com "ejecutar" en el bloc "cuando Botón1.Clic". App Inventor està configurat perquè només
certs blocs encaixen entre si, d'aquesta manera, sempre sabràs que s'estàs connectant blocs que
treballen realment junts. En aquest cas, els blocs amb la paraula "llamar" són els components
que fan les coses. Els dos blocs ha d'encaixar entre si per formar una unitat, com es mostra a
continuació, i se sent un espetec quan es connecten.

-3-
El ronquit de la gateta.

Ara has de fer que la gateta ronque quan toques el botó. Simularàs el ronc fent que el telèfon vibre.
Això pot semblar dur, però de fet, és fàcil de fer, perquè el component de so que utilitza per
reproduir el so meu pot fer que el telèfon vibre també. App Inventor t'ajuda a aprofitar aquest tipus
de funcionalitat bàsica del telèfon sense haver de bregar amb la manera com el telèfon realment
vibra. No ha de fer res diferent en el disseny, només cal afegir un segon comportament al clic del
botó en l'Editor de blocs:
1) Ves a l'Editor de Blocs i polsa en "Sonido1".
2) Selecciona el bloc "llamar Sonido1.Vibrar" i arrossega'l baix del bloc "llamar
Sonido1.Reproducir". El bloc ha de fer clic en el seu lloc, com es mostra en la següent figura.

3) L'última instrucció té una ranura al costat de milisegons que indica que s'ha d'afegir alguna
cosa. En aquest cas, el temps que estarà vibrant el telèfon.
4) Has de fer que vibre 500 milisegons. Per fer-ho escriu amb el teclat 500 i polsa Intro. Es
crearà un bloc de "número" que hauràs d'acoblar al lloc corresponent.
Agitant el telèfon.

Ara vas a afegir un últim element que es nodreix d'una altra característica interessant dels telèfons
Android. Has de fer que la gateta miole quan s'agita el telèfon. Per fer-ho has d'utilitzar un
component anomenat Acceleròmetre que pot sentir quan s'agita o mou el telèfon.
1) Tornar al dissenyador amb el botó "Diseñador" que apareix a la part esquerra del botó
"Bloques". Amplia la secció "Sensores" i arrossega un "Acelerómetro" des de la Paleta al
Visor. Com és un component no visible es traslladarà als "Componentes no visibles", situat a
la part inferior de la pantalla.
2) Has de tractar l'agitament del telèfon com un esdeveniment diferent, separat del clic de
botó. Això significa que necessites un nou controlador d'esdeveniments.
3) Ves a l'Editor de blocs. Hi ha d'haver un nou calaix per "Acelerometro1". Obre'l i arrossega
el bloc "cuando Acelerometro1.Agitar" a l'editor. Hauria de ser el segon bloc de la llista.
4) Igual que vas fer amb el so i el clic d'un botó, arrossega un bloc "llamar
Sonido1.Reproducir" i encaixa'l en el buit a "Acelerometro1.Agitar".
Hi ha dos parts en una app d'App Inventor:
1) Els Components i les seues propietats.
2) El Codi (o blocs) – les instruccions del programa. La major part del codi es produeix per
esdeveniments (events)- coses que ocorren en el telèfon com el clic d'un botó. El codi també
es pot usar per canviar les propietats dels components.
Els components necessiten codi (instruccions) per fer una tasca.

-4-
3. Prova de l'app.
Ara que ja has creat l'app, l'últim pas és provar que funciona correctament.

L'App Inventor et permet provar la teua app de tres formes diferents:

1) Utilitzant un emulador d'Android.

2) Amb un dispositiu (telèfon o tauleta) i una connexió WIFI a Internet (aquesta és l’opció
recomanada i la que utilitzarem a classe).
3) Amb un dispositiu Android i un cable USB.

L'emulador d'Android.

L'emulador d'Android és una recreació completa d'un telèfon Android en el teu ordinador. Encara
que no és un telèfon real (no pot fer cridades ni enviar sms), l'App Inventor el considera com a tal i
envia les mateixes comandes a l'emulador que enviaria al telèfon.

El terme informàtic per açò s'anomena màquina virtual.

Els passos per utilitzar l'emulador en Windows són:

Instal·lar l’emulador. Per fer-ho:
1) Descarrega l’instal·lador del emulador MIT App Inventor Tools (des de la pàgina web
https://appinventor.mit.edu/explore/ai2/windows).
2) Executa l’instal·lador amb permisos d’administrador. En el procés marca l’opció Desktop
Icon.

Per fer les proves segueix els passos següents:

1) Arranca en el teu ordinador el programa "aiStarter" des de la icona que es crearà a
l’escriptori o des del menú MIT App Inventor Tools del menú d’inici de Windows. S’obrirà
una finestra on aniran apareixen missatges. Molt important: No tanques aquesta finestra fins
finalitzar totes les proves.
2) En l'AppInventor ves al menú "Conectar" i tria l'opció "Emulador". (Atenció: Si et
demana actualitzar l'aplicació "MIT AI2 Companion", segueix atentament els passos que
t'indicarà per fer-ho).
Veuràs que t'apareix en pantalla una finestra emulant un telèfon amb la teua app instal·lada.

Prova el funcionament de la teua app (la vibració no funcionarà).

Utilitza aquesta opció si no tens disponible un dispositiu mòbil o tauleta.

Dispositiu Android amb connexió WIFI a Internet (opció recomanada).

Si tens un dispositiu i una connexió WIFI a Internet, el següent mètode és el recomanat.

Amb aquest mètode podràs crear aplicacions amb l'App Inventor (directament en la web) i provar-
les al teu dispositiu sense haver de descarregar ni instal·lar res al teu ordinador.

-5-
Els passos a seguir són:

1) Instal·la en el teu dispositiu l'aplicació "MIT AI2 Companion". Per fer-ho accedeix a la
"Google Play" o a la "App Store" segons el sistema operatiu del teu dispositiu (Android o
iOS).

Si el teu dispositiu té un lector de codis QR també pots instal·lar l’aplicació escanejant el

següent codi:

Google Play App Store

2) Connecta el teu ordinador i el teu dispositiu a la mateixa xarxa (el teu professor et dirà com
accedir a la WIFI de l'aula).
3) Arranca l'aplicació "MIT AI2 Companion" en el teu dispositiu.
4) En l'AppInventor ves al menú "Conectar" i tria l'opció "AI Companion". Veuràs que
t'apareix una finestra amb un codi de text i amb un codi QR.
5) Escaneja amb l'aplicació "MIT AI2 Companion" el codi QR o introdueix-lo tu manualment
i veuràs aparèixer la teua app en el dispositiu.

Prova el funcionament de la teua app (ara la vibració ha de funcionar).

Dispositiu Android i cable USB.

Aquest és el mètode menys recomanat.

No utilitzarem aquest mètode a classe. No obstant això els passos a seguir són:

1) Descarrega i instal·la l'aplicació "MIT AI2 Companion" en el teu dispositiu.

2) Arranca en el teu ordinador el programa "aiStarter".
3) Activa la "Depuración USB" al teu dispositiu (aplicació Ajustes > Opciones del
desarrollador > Depuración USB).
4) Connecta el cable USB al dispositiu Android i a l'ordinador.
5) En l'AppInventor ves al menú "Conectar" i tria l'opció "USB".

-6-
4. Còpia de l'app al teu ordinador.
Per a què el teu professor puga corregir el teu projecte hauràs d'exportar-lo a la teua carpeta
personal.

Per fer-ho ves al menú "Proyectos" i tria l'opció "Exportar a mi ordenador el proyecto (.aia)
seleccionado" i guarda'l a la teua carpeta personal amb el nom HolaGateta_v0.aia

5. Generació de l'APK.
L'últim pas que has de realitzar és generar un arxiu amb extensió APK per poder instal·lar l'app
creada en el teu dispositiu Android, en el dels teus amics o distribuir-la des de la "Google Play
Store".

Per fer-ho ves al menú "Generar" i veuràs que t'apareixen dos opcions:
● App (guardar archivo .apk en mi ordenador). Llança el procés de generació de l'arxiu
APK i després et permet descarregar-lo al teu ordinador.
● App (generar codigo QR para el archivo .apk). Llança el procés de generació de l'arxiu
APK i després et permet instal·lar-la al teu dispositiu Android escanejant, des de l'aplicació
"MIT AI2 Companion", el codi QR que t'apareixerà per pantalla.
ATENCÍO: Per poder instal·lar aquestes aplicacions (que no estan en la "Google Play Store") has
d'activar la instal·lació des de "Origens desconeguts" al teu dispositiu (aplicació Ajustes >
Seguridad > Origenes desconocidos).

-7-