En este proyecto aprenderemos a crear una aplicación en MIT APP INVENTOR que te permita Registrar, Modificar, Buscar, Listar y Eliminar los datos almacenados en una base de datos almacenada en la nube. ☁️
El diseño de la aplicación puede ser modificado a tu gusto, a continuación se encuentran las partes cruciales de la UI que se deben implementar para el funcionamiento de la aplicación.
- Cajas de texto:
- Usuario
- Nombre
- Correo
- Buscador
- Botones:
- Crear/Actualizar
- Buscar
- Limpiar
- Eliminar
- Visor en Lista (único)
Tip
Es posible el uso de etiquetas a conveniencia para facilitar la coomprensión y el uso de la UI
Una vez implementado el componente FirebaseDB a nuestra aplicación, ingresaremos al sitio web de Firebase y crearemos un nuevo proyecto, una vez completada su creación ingresaremos al apartado de "Realtime Database" y crearemos una nueva base de datos. Una vez creada, iremos a la pestaña de Reglas, donde modificaremos todos los "false" por "true", y para guardar los cambios clickeamos el botón "Publicar". Finalmente regresamos a la pestaña de Datos, donde copiaremos el enlace de conexión, nos trasladamos a la aplicación y lo pegamos en el componente FirebaseDB en la opción llamada URLFirebase .
Comenzaremos por mostrar la lista de usuarios registrados en la base de datos, para ello solamente mandamos llamar la lista de etiquetas, y tomamos el valor de cada uno de sus elementos para mostrarlo en el Visor de Lista.
Y, ahora sí, para buscar debemos de seleccionar el dato que estamos buscando en el Visor de Lista, donde usaremos la opción de selección, y la caja buscar.
Continuamos por crear el procedimiento Limpiar, el cuál se encargará de actualizar la tabla de usuarios, y a la vez limpiará las Cajas de Texto, una vez creado invocaremos la lista de usuarios de la base de datos con la función de ObtenerListaEtiquetas, y finalmente mandamos llamar el texto de cada Caja de Texto para asignarle un cuadro de texto vacío.
Es importante no olvidar asignarle la funcionalidad al Botón Limpiar, para cuando le des click ejecute el procedimiento Limpiar...
Seguimos con el botón eliminar. Este botón primero ubicará en la base de datos el nombre del usuario que está escrito en la caja de texto usuarios, luego lo eliminará. Para eliminarlo se usará el bloque Eliminar Elemento con Índice del nombre de usuario escrito en la Caja Buscar. Luego de eliminar al usuario, ejecutamos el procedimiento limpiar.
Para registrar a los nuevos usuarios hacemos uso del bloque Guardar Valor. Debemos de armar el campo donde se almacenará los datos del usuario a registrar. Primero se crea la etiqueta principal, esta etiqueta se encargará de almacenar otras etiquetas y en estas otras etiquetas se almacenará los datos. Cada usuario tendrá su propia etiqueta principal y sus sub-etiquetas para que sea más fácil y ordenado ubicar sus datos. Para ello, uniremos el texto de la Caja de Texto del usuario, con una sub-etiqueta llamada /Usuario... La diagonal seguida de un texto es la que te permitirá crear una segunda etiqueta, en este caso será la etiqueta usuario y lo que almacenará en esa etiqueta será lo que escribimos en la caja usuario, así se deberia de ir viendo.
Faltaría registrar el nombre y el correo, para ello duplicamos el bloque de Guardar Valor ya creado... Usamos la diagonal y el nombre de la etiqueta principal (la etiqueta principal siempre será el usuario), debemos de crear la sub etiqueta para el Nombre: /Nombre, y la ultima etiqueta será para el nombre y guardará lo que hay en la caja nombre.
Finalmente haremos lo mismo, duplicaremos los bloques de Guardar Valor, pero ahora para registrar el correo... Luego de Registrar o Modificar a un usuario, debemos de ejecutar la función Limpiar para actualizar los datos de la lista.
Lo que vamos a hacer a continuación es enviar los datos del usuario seleccionado a las cajas de texto, esto será útil para facilitar la modificación de cada usuario. Para ello necesitamos crear un bucle, este bucle tendrá que recorrer por cada sub-etiqueta, cada etiqueta principal tiene usuario, nombre y correo, entonces deberá de recorrer tres veces. Necesitamos agregar una condicion... Sí en la primera vuelta recoge la sub-etiqueta usuario, entonces el número que está recorriendo el bucle es el 1, por lo tanto obtendrá la sub-etiqueta usuario.
De la misma manera lo haremos para los otros datos, solo debemos de modificar la sub-etiqueta a recoger. En la segunda vuelta recogerá la sub-etiqueta nombre, y en la tercera vuelta recogerá la sub-etiqueta correo.
Finalmente faltaría tomar el valor de cada etiqueta y mostrarlo en las cajas de texto... Para ello, usamos el bloque Obtener Valor, primero necesitamos condicionar, la condición será que si la etiqueta que se ha recogido anteriormente en el bucle es la del usuario, entonces tomará el valor de esa etiqueta y lo mostrará en la caja de texto usuario.
Ahora solamente duplicamos el bloque, y modificamos para el Nombre y el Correo.