Creación de materiales didácticos Aplicaciones para dispositivos móviles Lección 4 Bases de datos Índice de contenido Introducción............................................................................................................................3 Bases de datos locales: TinyDB............................................................................................ 4 Compartir datos: TinyWebDB.............................................................................................. 10 Ejemplo: Aplicación para compartir notas entre Profesor y Alumno...............................12 Aplicación del Profesor................................................................................................12 Aplicación del Alumno................................................................................................. 17 En la próxima lección........................................................................................................... 19 2 Introducción Cuando utilizamos una aplicación, muchas veces es necesario almacenar información para usarla en futuras sesiones de la aplicación. Un claro ejemplo pueden ser los datos de configuración de un programa, o un documento de texto. En aplicaciones Android, la mejor manera de almacenar información 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 capítulo veremos cómo usar ambos bloques en nuestras aplicaciones. 3 Bases de datos locales: TinyDB El bloque TinyDB lo encontramos en la pestaña 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 más nos interesan son “GetValue”, para leer un valor de la base de datos, y “StoreValue” para almacenarlo. Como vemos, ambos bloques tienen como parámetro una etiqueta, “tag”, con la que identificamos el valor almacenado. TinyDB, por tanto, es una base de datos mucho más 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 aplicación para guardar notas (Postits). Un posible diseño lo encontramos en el fichero Notas.zip: 4 El programa tiene los siguientes elementos: • Un TextBox donde escribir una nota y un botón “Añadir” para añadirla a nuestra lista. • Una etiqueta “Mis notas” donde podremos ver todas las notas creadas. • Un ListPicker, “Eliminar una nota” para borrar notas. Vamos a añadir la funcionalidad desde el Block Editor. En primer lugar, necesitaremos tener una variable notas, que será una lista: Cuando el usuario pulse el botón Añadir, lo tenemos que hacer es comprobar que el usuario ha introducido un texto y en tal caso añadir la nota a la lista: 5 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 continuación, probamos si dicho texto NO está vacío. En tal caso, añadimos 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: 6 mostrarNotas, recorre la lista usando el bloque forEach. Para cada elemento, añadimos el texto a labelNotas, insertando además un prefijo con el número de nota: Mis notas: 1: Primera nota 2: Segunda nota …. Ahora, vamos a añadir 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, también podemos hacer un procedimiento que acepte como parámetro el índice de la nota a eliminar: Al igual que ocurre al añadir una nueva nota, debemos asegurarnos de que la base de datos se actualiza cuando se borra un elemento. 7 La aplicación que actualmente tenemos, nos permite añadir y eliminar notas, almacenándolas además en la base de datos. Para terminar la aplicación, 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é vacía. 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 ejecución debe tener un aspecto como éste: 8 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á vacía. Esto es debido a que realmente no se está ejecutando la aplicación, sino que se está abriendo para depurar, a partir del propio App Inventor. Para ejecutar la aplicación completa, debemos hacerlo desde el Editor, pulsando en “Package for Phone” y a continuación en “Download to Connected Phone”. Si no tenemos un móvil 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 código QR o generar el APK, también son válidas. 9 Compartir datos: TinyWebDB Las bases de datos creadas con los TinyDB sólo sirven para la aplicación instalada en nuestro móvil. Esto nos limita ya que no podemos compartir datos entre usuarios o diferentes dispositivos móviles. Para permitirlo, App Inventor nos permite usar los elementos TinyWebDB, que se encuentran en la pestaña “Other Stuff” de la paleta del editor: Las bases de datos TinyWebDB nos van a permitir almacenar la información en un servidor web remoto, para poder compartir la información entre diferentes usuarios, móviles 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 información que hemos añadido 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 añadir a cada tag un prefijo aleatorio. La página web http://www.guidgenerator.com/, permite generar lo que en informática se conoce como GUID, Globally Unique Identifier, que son realmente eso: identificadores únicos teóricamente a nivel mundial. Tienen un aspecto como el siguiente: fba316b2-d427-481f-a996-4f1e3d9d4acc A partir de ese identificador, podemos generar un tag único usándolo como prefijo: fba316b2-d427-481f-a996-4f1e3d9d4acc_notas fba316b2-d427-481f-a996-4f1e3d9d4acc_configuracion fba316b2-d427-481f-a996-4f1e3d9d4acc_lista_alumnos …. Para añadir 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 asíncrona, lo que significa que las tareas de leer y almacenar valores se llevarán a cabo en segundo plano, produciéndose un evento cuando termine. La explicación de que sea asíncrona se debe a que el acceso a la web puede llevar tiempo, dependiendo de la conexión a internet. Por 10 tanto, para no bloquear la aplicación mientras se accede a la web, TinyWebDB lo hará en segundo plano para que, mientras tanto, podamos seguir usando la aplicación. 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 más. 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: Aplicación para compartir notas entre Profesor y Alumno Basándonos en el programa Notas ya realizado, vamos a hacer una aplicación para que el profesor pueda compartir notas con sus alumnos. Para ello, vamos a hacer dos versiones de la aplicación: • La aplicación del Profesor, con la que podremos añadir y eliminar notas, además de visualizarlas. • La aplicación del Alumno, en la que sólo vamos a poder consultar las notas que haya escrito el profesor. Aplicación del Profesor El diseño de la aplicación del profesor lo podemos ver en NotasProfesor.zip, y es prácticamente el mismo que que el del ejemplo anterior: Vemos que hemos añadido, además del TinyWebDB, un elemento Notifier (Other Stuff dentro de la paleta del editor). Dicho elemento nos permite de una forma cómoda mostrar mensajes emergentes: • • • Burbujas con un mensaje que desaparecen de forma automática. Cuadros de diálogo mostrando un texto o pidiendo una confirmación 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 añadir la funcionalidad de la aplicación, lo primero que vamos a hacer es entrar en la página 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 aplicación notas, necesitamos una lista donde guardar los datos: El botón de añadir notas tiene el mismo comportamiento: 13 También tenemos el mismo comportamiento para el ListPicker de eliminar notas: El procedimiento mostrarNotas también es igual al de la aplicación Notas: A partir de aquí, vamos a añadir funcionalidad que es propia para la aplicación NotasProfesor. En primer lugar, cuando se entre en la aplicación, 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...”. Después 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 sólo tenemos un tag, podemos directamente utilizar el valor. Al igual que con la aplicación Notas, lo que hacemos es comprobar si NO está vacío, 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 recuperación ha tenido éxito. En el caso de que haya ocurrido un error al acceder a la base de datos, también 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 añadir los métodos para insertar y eliminar elementos. Estos son muy similares a los de la aplicación Notas, pero usando el TinyWebDB1. El procedimiento insertarNota es el siguiente: 15 Al igual que antes, añadimos la nota a la lista. A continuación, usamos el bloque TinWebDB1.StoreValue para almacenar las notas en el servidor. Esta tarea también 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 posición “n”. A continuación, 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 aplicación NotasProfesor, podemos usar directamente “Connect to device” del Block Editor, ya que en este caso las notas están almacenadas en internet, y no hace falta crear una base de datos local. Las siguientes capturas muestran la aplicación ejecutándose: 16 Aplicación del Alumno En este caso, sólo se podrán leer las notas añadidas por el profesor, por lo que el diseño es ligeramente diferente al anterior: En este caso, no existe la posibilidad de añadir notas y hemos incluido un botón Actualizar para que el alumno pueda descargar nuevamente la lista notas. 17 La implementación de este programa se encuentra en NotasAlumno.zip, y básicamente es la misma que la de NotasProfesor.zip, eliminando todo lo correspondiente a la edición de las notas. La ejecución de la aplicación, junto con la del profesor, se muestra a continuación: 18 En la próxima lección... En la próxima lección daremos un repaso a los elementos que incluye App Inventor para manejar imágenes, sonido y vídeo. 19