Creacin de materiales didcticos

Aplicaciones para dispositivos mviles

Leccin 4
Bases de datos

ndice de contenido
Introduccin............................................................................................................................3
Bases de datos locales: TinyDB............................................................................................ 4
Compartir datos: TinyWebDB.............................................................................................. 10
Ejemplo: Aplicacin para compartir notas entre Profesor y Alumno...............................12
Aplicacin del Profesor................................................................................................12
Aplicacin del Alumno................................................................................................. 17
En la prxima leccin........................................................................................................... 19

Introduccin
Cuando utilizamos una aplicacin, muchas veces es necesario almacenar informacin
para usarla en futuras sesiones de la aplicacin. Un claro ejemplo pueden ser los datos de
configuracin de un programa, o un documento de texto.
En aplicaciones Android, la mejor manera de almacenar informacin es mediante bases
de datos. App Inventor nos ofrece un mecanismo sencillo para tal caso: el bloque TinyDB
para bases de datos locales, y el bloque TinyWebDB para bases de datos que se
almacenan de forma remota.
En este captulo veremos cmo usar ambos bloques en nuestras aplicaciones.

Bases de datos locales: TinyDB

El bloque TinyDB lo encontramos en la pestaa Basic de la paleta del editor:

Es un elemento oculto, por tanto, cuando lo insertemos en nuestra ventana, nos

aparecer debajo de sta (como los relojes):

El TinyDB es un elemento muy sencillo. No tiene ninguna propiedad y sus bloques son los
siguientes:

Los dos bloques que ms nos interesan son GetValue, para leer un valor de la base de
datos, y StoreValue para almacenarlo. Como vemos, ambos bloques tienen como
parmetro una etiqueta, tag, con la que identificamos el valor almacenado. TinyDB, por
tanto, es una base de datos mucho ms simple que las que estamos acostumbrados a ver
(por ejemplo, Access o MySQL), y consiste en una lista de cadenas de texto, cada una
identificada por una etiqueta.
Vamos a practicar con su uso haciendo una sencilla aplicacin para guardar notas (Postits). Un posible diseo lo encontramos en el fichero Notas.zip:

El programa tiene los siguientes elementos:

Un TextBox donde escribir una nota y un botn Aadir para aadirla a nuestra
lista.
Una etiqueta Mis notas donde podremos ver todas las notas creadas.
Un ListPicker, Eliminar una nota para borrar notas.
Vamos a aadir la funcionalidad desde el Block Editor. En primer lugar, necesitaremos
tener una variable notas, que ser una lista:

Cuando el usuario pulse el botn Aadir, lo tenemos que hacer es comprobar que el
usuario ha introducido un texto y en tal caso aadir la nota a la lista:

En este caso, hacemos uso de una variable llamada texto, donde almacenamos el texto
introducido por el usuario, pero sin espacios ( para eso usamos el bloque trim). A
continuacin, probamos si dicho texto NO est vaco. En tal caso, aadimos la nota a
nuestra lista, mediante un procedimiento insertarNota, y actualizamos labelNotas
mediante otro procedimiento, mostrarNotas. Por ltimo, borramos el TextBox para que el
usuario pueda escribir otra nota.
El procedimiento insertarNota debe hacer dos cosas: insertar la nota en la lista, y
actualizar nuestra base de datos:

Vemos que la lista de notas la almacenamos en la base de datos con el formato CSV, es
decir, cada elemento separado por comas.
Para mostrar las notas, el procedimiento mostrarNotas debe recorrer nuestra lista,
actualizando la etiqueta labelNotas:

mostrarNotas, recorre la lista usando el bloque forEach. Para cada elemento, aadimos el
texto a labelNotas, insertando adems un prefijo con el nmero de nota:
Mis notas:
1: Primera nota
2: Segunda nota
.

Ahora, vamos a aadir funcionalidad al ListPicker, para eliminar notas. En primer lugar,
debemos asegurarnos de que el ListPicker va a usar la lista notas. Para ello podemos
utilizar el bloque listPickerEliminar.BeforePicking (se encuentra en MyBlocks
listPickerEliminar):

Mediante el bloque AfterPicking le decimos al App Inventor qu debe hacer cuando el

usuario seleccione un elemento:

Vemos que para eliminar notas, tambin podemos hacer un procedimiento que acepte
como parmetro el ndice de la nota a eliminar:

Al igual que ocurre al aadir una nueva nota, debemos asegurarnos de que la base de
datos se actualiza cuando se borra un elemento.
7

La aplicacin que actualmente tenemos, nos permite aadir y eliminar notas,

almacenndolas adems en la base de datos. Para terminar la aplicacin, debemos
decirle a nuestro programa que, cuando arranque, recupere las notas de las base de
datos y las muestre en pantalla. Esto lo podemos hacer dentro del bloque
Screen1.Initialize:

Para recuperar las notas de las base de datos, usamos el bloque TinyDB1.GetValue. El
tag debe coincidir con el del valor almacenado con TinyDB1.StoreValue (en este caso
notas). Las notas las recuperamos en una variable y comprobamos que no est vaca.
En tal caso, usamos el bloque list from csv row para crear la lista a partir del valor de la
base de datos, y llamamos al procedimiento mostraNotas para actualizar labelNotas.
El programa en ejecucin debe tener un aspecto como ste:

Importante: Ejecutar Apps con TinyDB

Si hemos probado a ejecutar la App desde el Block Editor, nos daremos cuenta de que cada vez
que entramos, la base de datos est vaca. Esto es debido a que realmente no se est ejecutando
la aplicacin, sino que se est abriendo para depurar, a partir del propio App Inventor.
Para ejecutar la aplicacin completa, debemos hacerlo desde el Editor, pulsando en Package for
Phone y a continuacin en Download to Connected Phone. Si no tenemos un mvil conectado, el
programa se instalar en el Emulador que estemos usando. Cuando el App Inventor nos avise de
que se ha instalado correctamente, podremos ejecutarla desde el men de aplicaciones:

Las otras dos opciones de Package for Phone, ejecutar usando el cdigo QR o generar el APK,
tambin son vlidas.

Compartir datos: TinyWebDB

Las bases de datos creadas con los TinyDB slo sirven para la aplicacin instalada en
nuestro mvil. Esto nos limita ya que no podemos compartir datos entre usuarios o
diferentes dispositivos mviles. Para permitirlo, App Inventor nos permite usar los
elementos TinyWebDB, que se encuentran en la pestaa Other Stuff de la paleta del
editor:
Las bases de datos TinyWebDB nos van a permitir almacenar la informacin en un
servidor web remoto, para poder compartir la informacin entre diferentes usuarios,
mviles o incluso acceder a ella desde un PC. App Inventor, por defecto, nos permite
alojar sus datos en el servidor del MIT. Sin embargo, este servidor est compartido por
todos los usuarios del App Inventor, por lo que en cualquier momento otro usuario puede
sobreescribir la informacin que hemos aadido desde nuestro programa. Para
solucionarlo, tenemos que asegurarnos de que los tags que utilizamos son nicos.
La manera de asegurarnos que nuestros tags son nicos, consiste en aadir a cada tag
un prefijo aleatorio. La pgina web http://www.guidgenerator.com/, permite generar lo que
en informtica se conoce como GUID, Globally Unique Identifier, que son realmente eso:
identificadores nicos tericamente a nivel mundial. Tienen un aspecto como el siguiente:
fba316b2-d427-481f-a996-4f1e3d9d4acc
A partir de ese identificador, podemos generar un tag nico usndolo como prefijo:
fba316b2-d427-481f-a996-4f1e3d9d4acc_notas
fba316b2-d427-481f-a996-4f1e3d9d4acc_configuracion
fba316b2-d427-481f-a996-4f1e3d9d4acc_lista_alumnos
.
Para aadir o leer elementos de la base de datos, TinyWebEditor tiene bloques similares
a los de su hermano TinyDB:

Podemos observar que, a diferencia de TinyDB, el bloque StoreValue no devuelve el

valor. Esto se debe a que TinyWebDB funciona de manera asncrona, lo que significa que
las tareas de leer y almacenar valores se llevarn a cabo en segundo plano,
producindose un evento cuando termine. La explicacin de que sea asncrona se debe a
que el acceso a la web puede llevar tiempo, dependiendo de la conexin a internet. Por
10

tanto, para no bloquear la aplicacin mientras se accede a la web, TinyWebDB lo har en

segundo plano para que, mientras tanto, podamos seguir usando la aplicacin.
Los eventos del TinyWebDB son los siguientes:

El primero, se llamar cuando TinyWebDB termine de leer un valor. Como argumentos,

nos dar el tag y el valor. Si tenemos varios valores, debemos, mediante bloques IFELSE, comprobar el tag para discriminar qu valor nos ha llegado:

El segundo evento, ValueStored, nos avisar de que un valor se ha almacenado con xito.
Normalmente, cuando recibamos este evento, mostraremos un mensaje en pantalla y
poco ms. El ltimo evento, WebServiceError, ocurre cuando no hemos podido almacenar
o recuperar un mensaje. Em el argumento message nos dar un error el servidor,
indicando el porqu.

11

Ejemplo: Aplicacin para compartir notas entre Profesor y Alumno

Basndonos en el programa Notas ya realizado, vamos a hacer una aplicacin para que
el profesor pueda compartir notas con sus alumnos. Para ello, vamos a hacer dos
versiones de la aplicacin:

La aplicacin del Profesor, con la que podremos aadir y eliminar notas, adems
de visualizarlas.

La aplicacin del Alumno, en la que slo vamos a poder consultar las notas que
haya escrito el profesor.

Aplicacin del Profesor

El diseo de la aplicacin del profesor lo podemos ver en NotasProfesor.zip, y es
prcticamente el mismo que que el del ejemplo anterior:

Vemos que hemos aadido, adems del TinyWebDB, un elemento Notifier (Other Stuff
dentro de la paleta del editor). Dicho elemento nos permite de una forma cmoda mostrar
mensajes emergentes:

Burbujas con un mensaje que desaparecen de forma automtica.

Cuadros de dilogo mostrando un texto o pidiendo una confirmacin
Mensajes para Debugging.....

Nosotros usaremos el notifier para informar de lo que va ocurriendo en segundo plano con
12

la base de datos.
Antes de aadir la funcionalidad de la aplicacin, lo primero que vamos a hacer es entrar
en la pgina http://www.guidgenerator.com/ y obtener un GUID para nuestro tag en la
base de datos. Es importante que cada uno obtenga el suyo propio:

Con el GUID generado, podemos definir una variable que usaremos como tag:

Al igual que con la aplicacin notas, necesitamos una lista donde guardar los datos:

El botn de aadir notas tiene el mismo comportamiento:

13

Tambin tenemos el mismo comportamiento para el ListPicker de eliminar notas:

El procedimiento mostrarNotas tambin es igual al de la aplicacin Notas:

A partir de aqu, vamos a aadir funcionalidad que es propia para la aplicacin

NotasProfesor. En primer lugar, cuando se entre en la aplicacin, debemos decirle al
TinyWebDB1 que recuper las notas del servidor. Esto lo podemos hacer con el bloque
Screen1.Initialize:

Puesto que el proceso de recuperar notas puede tardar un poco, conviene informar al
usuario mediante el Notifier1.ShowAlert. Este bloque mostrar un mensaje emergente con
14

el texto Recuperando notas.... Despus de unos segundos, el mensaje desaparecer.

Como ya hemos dicho anteriormente, el TinyWebDB1 nos avisar mediante un evento
cuando se haya terminado de recuperar las notas:

El bloque tiene como argumentos el tag y el valor recuperado. En nuestro caso, como slo
tenemos un tag, podemos directamente utilizar el valor. Al igual que con la aplicacin
Notas, lo que hacemos es comprobar si NO est vaco, y en ese caso creamos la lista
usando el bloque list from csv row. Por ltimo, mostramos las notas e informamos al
usuario de que el proceso de recuperacin ha tenido xito.
En el caso de que haya ocurrido un error al acceder a la base de datos, tambin debemos
informar al usuario. Para ello, usamos el bloque WebServiceError del TinyWebDB1:

Podemos ver que para informar del error usamos el bloque Notifier1.ShowMessageDialog,
ya que no queremos que el mensaje desaparezca de pantalla tras unos segundos.
Ahora vamos a aadir los mtodos para insertar y eliminar elementos. Estos son muy
similares a los de la aplicacin Notas, pero usando el TinyWebDB1. El procedimiento
insertarNota es el siguiente:

15

Al igual que antes, aadimos la nota a la lista. A continuacin, usamos el bloque

TinWebDB1.StoreValue para almacenar las notas en el servidor. Esta tarea tambin se
ejecuta en segundo plano, por lo que conviene mostrar un mensaje, usando el bloque
ShowAlert del elemento Notifier1.
El procedimiento elminarNota es el siguiente:

En este caso, como en el programa Notas, lo que hacemos es borrar el elemento que
ocupa la posicin n. A continuacin, guardamos las notas en la base de datos y
mostramos el mensaje emergente para informar al usuario.
Cuando el proceso de guardado se haya llevado con xito, App Inventor llamar al evento
ValueStored, del TinyWebDB1. Lo que haremos entonces ser mostrar un mensaje para
informar que todo ha ido bien:

Para ejecutar la aplicacin NotasProfesor, podemos usar directamente Connect to

device del Block Editor, ya que en este caso las notas estn almacenadas en internet, y
no hace falta crear una base de datos local. Las siguientes capturas muestran la
aplicacin ejecutndose:

16

Aplicacin del Alumno

En este caso, slo se podrn leer las notas aadidas por el profesor, por lo que el diseo
es ligeramente diferente al anterior:

En este caso, no existe la posibilidad de aadir notas y hemos incluido un botn Actualizar
para que el alumno pueda descargar nuevamente la lista notas.

17

La implementacin de este programa se encuentra en NotasAlumno.zip, y bsicamente es

la misma que la de NotasProfesor.zip, eliminando todo lo correspondiente a la edicin de
las notas.
La ejecucin de la aplicacin, junto con la del profesor, se muestra a continuacin:

18

En la prxima leccin...
En la prxima leccin daremos un repaso a los elementos que incluye App Inventor para
manejar imgenes, sonido y vdeo.

19