Giter VIP home page Giter VIP logo

crud_appinventor's Introduction

CRUD Base de Datos

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. ☁️

Proceso de Diseño

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.

Elementos principales:

  • 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

Creación de la Base de Datos (FirebaseDB)

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 .

Procesos lógicos

Buscar

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.

alternativo

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.

no tienes waifai pobreton

Limpiar

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.

alternativo

Es importante no olvidar asignarle la funcionalidad al Botón Limpiar, para cuando le des click ejecute el procedimiento Limpiar...

alternativo

Eliminar

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.

alternativo

Registrar

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.

alternativo

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.

alternativo

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.

alternativo

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.

alternativo

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.

alternativo

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.

alternativo

Ahora solamente duplicamos el bloque, y modificamos para el Nombre y el Correo.

alternativo

Referencias

crud_appinventor's People

Contributors

parkerpial avatar alexwithstars avatar

Watchers

 avatar

Forkers

parkerpial

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.