Lo que realizaremos en esta sección es crear una aplicación que permita, modificar, registrar, eliminar/limpiar, buscar y listar los datos almacenados en una base de datos que se encuentra en la nube. Para poder hacer esto trabajaremos adicional con Firebase que consiste en una plataforma cross-device por lo que permite el desarrollo para aplicaciones nativas (android e IOS) y web, ayuda en tres aspectos: desarrollo, crecimiento y monetización de la app. Además usaremos sub etiquetas para poder almacenar con un mayor orden los datos de cada usuario
Para comenzar crearemos nuestro proyecto, ingresando en la app como ya hemos trabajado anteriormente, en el nombre del proyecto le colocaremos ''modificando_listas''
Primero nos vamos a enfocar en el diseño de lo que va a ser nuestra aplicación
En paleta, nos dirigimos a Disposición y seleccionaremos ''Disposición tabular'' y la moveremos deslizando hacia nuestro simulador de dispositivo celular/tablet. También agregaremos deslizando, 2 ''Disposición Horizontal''. De la siguiente manera nos tiene que quedar:
Ahora miraremos nuestro lado derecho de la pantalla, en la parte de Propiedades, y cambiaremos las propiedades de nuestra Disposición Tabular, le colocaremos en Registros a 3, ya que estas serán la cantidad de filas que tendremos.
Nos fijamos en nuestro lado derecho y nos damos cuenta que este Interfaz de Usuario, y buscamos ''Etiqueta'' la cual deslizaremos 3 veces en nuestra disposición tabular. También buscaremos ''Campo de texto'' y también deslizaremos a nuestra pantalla del móvil 3 veces, notarás que estas quedarán al lado de nuestras etiquetas de texto, te debe quedar de la siguiente manera:
El siguiente cuadro horizontal, le ajustaremos en las propiedades el ancho, con ajustar al contenedor, además a esta disposición le añadiremos 3 botones.
Nos faltaría la opción para buscar a el usuario. Para eso, lo que haremos será agregar desde paleta un Campo de Texto y lo deslizaremos a nuestra última casilla de disposición horizontal, junto a este cuadro, también añadiremos un botón.
Antes de continuar, por favor recuerda ¡guardar tu proyecto! así evitamos perderlo.
Ahora necesitamos una herramienta que permita mostrarnos los datos, para eso vamos a usar un visor de lista, antes de eso, añadiremos una etiqueta y luego el visor, ambos encontrados en el mismo lado.
Y por último añadiremos la base de datos, para eso nos vamos hasta el final de nuestra página y encontraremos ''Experimental'', le hacemos clic y veremos la opción ''FirebaseDB'', esta la debemos de deslizar hasta nuestra pantalla negra del visor de lista.
Ahora vamos a ir modificando las propiedades de cada uno de los elementos que tenemos en nuestros componentes, para poder ir seleccionando más rápido, los seleccionas directamente de la barra de componentes. Te iré seleccionando las propiedades según el elemento. Los cambios que se mencionarán son los únicos que se van a realizar, todo lo demás quedará de la misma manera.
-Screen1: DispoHorizontal: centro 3 / DispoVertical: centro 2 / ColorFondo: rosa / ShowStatusBar: desactivar (sacar el visto que trae) / TitleVisible: desactivar (sacar visto)
-Etiqueta1: ''Texto'' se debe reemplazar por: usuario
-Etiqueta2: ''Texto'' se debe reemplazar por: nombre
-Etiqueta3: ''Texto'' se debe reemplazar por: correo
-CampoDeTexto1: Pista: se debe borrar dejando casillero vacío / Cambiar nombre a: CajaUsuario.
-CampoDeTexto2: Pista: se debe borrar dejando casillero vacío / Cambiar nombre a: CajaNombre
-CampoDeTexto3: Pista: se debe borrar dejando casillero vacío / Cambiar nombre a: CajaCorreo
-Botón2: en texto se debe colocar Eliminar, cambiar nombre al botón por BtnEliminar
-Botón3: en texto se debe colocar Limpiar, cambiar nombre al botón por BtnLimpiar
-DisposiciónHorizontal2: DispHorizontal: Centro3 / DispVertical: Centro2 / ColorDeFondo: Ninguno
-CampoDeTexto4: Pista: se debe borrar dejando casillero vacío / Cambiar nombre a: CajaBuscar
-Botón4: en texto se debe colocar Buscar, cambiar nombre al botón por BtnBuscar
-Etiqueta4: ''Texto'' se debe reemplazar por: Tabla de Usuarios.
¡Ya estamos terminando esa parte de diseño y propiedades, recuerda guardar tu progreso!
Para el Firebase necesitamos crear la base de datos en la nube, para eso vamos a dejar de trabajar con appinventor un momento, y nos vamos a dirigir a configurar la base de datos. Nos vamos al buscador de Google y escribimos ''Firebase'', ingresamos al primer link y le damos en comenzar.
Luego le daremos clic a la parte de ''Crear proyecto'', y nos llevará a colocarle un nombre a esto, le colocaremos ''AppInventor'', comenzará a cargar la página NO es necesario tener habilitada la opción de activar google analytic así que si gustas la puedes desactivar, y le das a ''Crear Proyecto''.
Creado ya el proyecto estaremos en la página principal, donde nos dirigiremos a nuestro lado izquierdo de la pantalla y vamos a ''Compilación'' y luego a ''Realtime Database''.
Hacemos clic en ''Crear Base de datos'', luego siguiente y luego habilitar. Si nos fijamos en nuestra página principal. nos vamos a la sección ''Reglas'', aquí modificaremos algunas cosas; el ''false'' lo cambiaremos por un true esto en ambas ocasiones donde aparece, y luego le damos a ''Publicar'', si te algún mensaje de revisar, no te preocupes e ignóralo.
En Componentes, nos vamos a Firebase, y luego vemos las propiedades, en donde dice FirebaseURL pegaremos el link que obtuvimos desde el otro sitio web. Ya con esto terminamos por completo la parte de diseño, seguiremos con el trabajo con los bloques.
Ahora seleccionamos la opción bloques, y nos dirigimos a ''Procedimientos'' que se encuentra al lado izquierdo de la pantalla, y deslizamos la opción de ''como procedimiento, ejecutar''. si te das cuenta donde dice procedimiento lo podemos reemplazar, así que le colocaremos ''Limpiar''. Este procedimiento se encargará de actualizar la tabla de usuarios y a la vez de limpiar las cajas de texto.
Vamos a Bloques y buscamos la CajaUsuario, le seleccionamos y buscamos el bloque '', lo unimos a nuestro bloque anterior, además añadiremos de Firebase ''Llamar FirebaseDB1.GetTagList'' para que cuando creemos etiquetas, esta se encargue de poder invocar dichas etiquetas.
Nos vamos a texto y obtener la opción de uno poder escribir. Esto que agregamos lo duplicamos 3 veces (para que nos quede cuatro veces lo mismo y luego solo lo modificaremos), debe quedarte de la siguiente manera por el momento:
Si te das cuenta al hacer clic uno puede modificar que nombre colocar, así que cada uno será según las cajas que tenemos creadas.
Como hablamos de mostrar las etiquetas, debemos saber donde se mostrarán, así que, iremos a Firebase nuevamente y obtendremos el bloque ''cuando FirebaseDB1. TagList / value''. y para que estas se puedan mostrar es necesario utilizar el visor de lista. Así que en la sección de bloques vamos a ''Visor de Lista'' y seleccionaremos el bloque ''Poner visor de lista1, elementos, como''. Lo unimos a nuestro ''Cuando...''. Si hacemos clic en Value, obtendremos el bloque ''Tomar value'' que lo sacaremos para unirlo a nuestros bloques de la sigueinte manera.
Con lo que llevamos aquí tenemos para limpiar y mostrar los datos actualizados, así que es momento de guardar el progreso que llevamos!
Continuaremos con la opción de buscar. Vamos a la casilla BtnBuscar la seleccionamos, y arrastraremos nuestro botón ''Cuando BtnBusca .Clic ejecutar''. Con esto, el visor de datos podrá buscar el elemento que se está buscando de su lista. Al bloque seleccionado recién, le anclaremos uno que obtendremos de VisordeLista, El que uniremos se llama ''poner visordelista selección como..''. Como tiene que buscar datos, ahora volvemos a la casilla CajaBuscar y seleccionamos el bloque ''CajaBuscar, texto''. Con esto ya tenemos lista la opción para buscar los usuarios.
Te debe quedar de la siguiente manera y esos son los casilleros que se deben usar para obtener los bloques:
Ahora haremos con Limpiar, de esta manera el procedimiento lo que hará será limpiar dentro de la aplicación. Vamos a BtnLimpiar, y seleccionamos el bloque ''Cuando BtnLimpiar .Clic, ejecutar''. Luego nos dirigimos a Procedimientos y seleccionamos el bloque ''Llamar limpiar''. Para que esto funcione y se abrir el procedimiento de limpiar, para que esto suceda, nos vamos a Screen1 y buscamos la opción ''Cuando screen1 inicializar, ejecutar'' y le uniremos el llamar limpiar que teníamos del bloque anterior. Nos quedará de la siguiente manera:
Vamos a BtnEliminar y seleccionamos ''Cuando BtnEliminar Clic ejecutar'' lo que irá dentro de este bloque será un bloque que encontraremos en FireBase, el cual se llama ''Llamar FirebaseDB1. Limpiar Etiqueta, etiqueta''. Adicional, nos vamos a la CajaUsuario y sacamos el bloque ''CajaUsuario Texto''. Con esto lo que realizamos es eliminar al Usuario, ahora luego del procedimiento, lo que debemos hacer es limpiar, así que copiaremos el ''Llamar limpiar'' que tenemos más arriba y lo pondremos al final de nuestra secuencia.
Con estos ya estamos listos con eliminar, nos debe quedar de la siguiente manera:
Ya estamos casi terminando, ahora vamos con los registros que son los que luego nos permitirán ver los datos en las listas.
Vamos a BtnRegistar y buscamos el bloque ''Cuando BtnRegistar clic ejecutar'', para poder hacer uso del registro de los nuevos usuarios vamos al bloque que encontraremos en Firebase llamado ''Llamar FirebaseDB1, guardar valor''. Ahora nos dirigimos a Texto, donde anclaremos a la parte de ''etiqueta'' e bloque ''unir'' que tiene una tuerca. Debe quedar de la siguiente manera:
Primero debemos crear una etiqueta principal, esta etiqueta se encarga de almacenar otras y así sucesivamente, almacenando los datos, cada usuario tendrá su propia etiqueta principal para que sea más fácil y ordenado encontrar y almacenar sus datos, para eso copiaremos de uno de los bloques de más arriba el bloque ''CajaUsuario texto'' y lo anclaremos a la parte primera de unir, en la segunda parte de nuestro unir pondremos un cuadro vacío, que encontramos en la sección de textos, a este casillero le colocaremos dentro /Usuario.
Copiaremos nuevamente el ''CajaUsuario texto'' y lo uniremos en la parte de valorAGuardar, de esta manera lo que se almacenará será lo que nosotros escribimos en la parte de usuario.
Con los bloque que recién hemos creado, ya tenemos para el registro del usuario, solamente nos faltaría para el correo y nombre. Los bloques deben quedarte de esta manera:
Debemos crear una subetiqueta, para eso, hacemos clic en la tuerca y saldrá la opción cadena, la cual seleccionamos y añadimos en el dibujo de al lado para que nos aparezca otra opción a añadir. Para eso copiaremos el casillero con ''/'' y lo uniremos allí, lo único que cambiará es que dentro tendrá ''/Nombre'', y donde sale valorAGuardar, no debe salir CajaUsuario, si no que CajaNombre, haciéndole clic de puede cambiar.
De la siguiente manera queda nuestro bloque:
Ya no queda nada, solo nos falta una etiqueta, así que copiaremos el ultimo bloque morado de llamar, y lo colocaremos al final. Conservaremos su mayoría, en el bloque rosa ''/Nombre'' lo reemplazaremos por ''/Correo'' y en valorAGuardar, debemos cambiar el ''CajaNombre'' por un ''CajaCorreo'', al igual que la vez anterior, solo haciendo clic se logra cambiar. Lo último que nos faltaría sería copiar un ''llamar limpiar'' y agregarlo al final de nuestros bloques. Nos queda de la siguiente manera:
Lo que haremos es enviar los datos del usuario seleccionado a las cajas de texto. Vamos a VisordeLista y seleccionamos el bloque ''despues de selección''. Luego nos vamos a Control y seleccionamos ''por cada número desde'' el orden de los números que se ven, debe ser 1;3;1 (por ende el 5 que nos aparece lo cambiamos por un 3).
En ejecuta, necesitamos condiciones, por lo que nuevamente en control deslizamos el bloque ''si, entonces'', nos vamos a Matemáticas y buscamos y añadimos el bloque de '' = '', en donde la primera parte debemos añadir un ''tomar número'' que podemos obtener manteniendo el cursor sobre ''número'' del bloque ''por cada número'', y el otro lado o casillo de la igualdad, copiamos el 1 de alguno de los bloques de arriba.
En el entonces, añadimos de Firebase un ''llamar, obtener valor'', en etiqueta añadimos un unir obtenido en texto, a este unir en primero le unimos un ''visordelista selección'' que encontramos en visordelista y abajo de este, va un cuadro de texto el cual le colocaremos ''/Usuario'', y por debajo va un cuadro vacío también obtenido de texto.
Este último bloque lo repetiremos 3 veces para los tres casos. Solo debemos percatarnos de editar el valor de ''tomar número'', en la segunda copia debe ser 2, y en el tercero 3. En la segunda copia el ''/Usuario'' lo reemplazamos por ''/Nombre'' y en la tercera duplicación debe ir ''/Correo'', solo esos cambios, debe quedarte:
Lo único que nos falta es que esto comience a mostrar lo que dice nuestras cajas de texto, para eso haremos el último gran bloque.
Y finalmente realizamos el bloque en donde el Firebase obtendrá valor, de esta manera nos revisa y ejectura según el usuario, nombre y el correo,.
En Firebase obtiene el cuando obtener valor, y con los conectores lógicos del si entonces sino, vamos copiando los comparar obtenidos anteriormente, dándonos cuenta que en cada uno diga el término distinto (/Usuario, /Nombre, /Correo).
De la sigueinte manera:
No hay comentarios:
Publicar un comentario