Taller 3: Lista de datos

 En este taller aprenderás a como crear una app que te sirva para crear listas y cuentas las cuales servirán para obtener información de una base de datos móvil.

Lo básico antes de empezar

• Ingresa a https://appinventor.mit.edu/
• Apretar en "Create apps!"
• Crear un nuevo proyecto (nombre a elección) 

• Iniciar AIStarter 
• Iniciar el Emulador

En este taller usaremos la siguiente disposición (diseño), diseñaremos la siguiente disposición en nuestro taller, arrastraremos disposiciones, uno 3 cuadros de disposición vertical, luego se añadirán botones y dentro de los cuadros de disposición añadiremos otros mas.

Dentro de los cuadros de disposición añadiremos la disposición tabular, procedemos a insertar botones, cuadros de texto y cuadros de disposición hasta obtener algo así.

Debemos etiquetar bien cada botón, cuadro de texto para no tener problemas en la etapa de programación. (si tienes alguna duda, te recomiendo mirar las imágenes a detalle en talleres anteriores)

Ahora procederemos con la programación.

El iniciador global tamaño definirá el tamaño de nuestra lista, mientras que el iniciador global arreglo definirá donde se ubicaran los datos.

Primero crearemos un iniciador de lista, para ello arrastraremos un cuadro iniciador global en la pestaña variables (color naranja), luego en la variable lista (color celeste) arrastraremos "crear lista vacía".

Ahora crearemos una orden de procedimientos tal como indica en la imagen, notaras que cada bloque lo puedes encontrar en la variable de cada color.

Ahora crearemos el siguiente procedimiento, para agregar mas entradas haces clic en el engrane azul, luego añadiremos dos entradas las que renombraremos como en la imagen.

Para crear una lista, usaremos el siguiente algoritmo:

• Al hacer clic en btntamano Hacer
• Obtener valor del tamaño
• Crear una lista vacía
• Inicializar la lista con todos los elementos en "  "
• Enviar mensaje "Arreglo Creado"
• Limpiar caja de texto
• Fin_hacer

Ahora será un poco mas complicado, crearemos un comando control, como en la siguiente imagen, recuerda que cada bloque lo encontraras según el color en la lista variables.

Para crear un control de las listas debemos utilizar el siguiente algoritmo.

• Al hacer clic en btnlistar Hacer
• limpiar caja de texto de listado
• Para i desde 1 hasta tamaño del arreglo Hacer
• En la caja de texto listado unir los caracteres [i]= con el valor obtenido, obtener el elemento en posición i
• Fin_Hacer

Ahora crearemos un botón que nos permita agregar un dato y coordenada a cada lista

Para ingresar un dato a cada lista, usaremos el siguiente algoritmo:

• Al hacer clic en btnacepting Hacer
• Llamar al procedimiento "agregarElemento" enviando la posición y el dato
• Limpiar caja de texto posición
• Limpiar caja de texto dato
• Fin_Hacer

Terminado los preparativos, procederemos a hacer la segunda parte del taller 3.

Intenta agregar un botón que permita buscar y borrar elementos en las listas.

• Solución

Lo primero que haremos será ampliar un poco mas la disposición y diseño de nuestra aplicación, ten encuentra que se puede hacer mas de una lista, pero por conceptos de aprendizaje empezaremos con solo una lista.

Con este botón podremos borrar los elementos que escribamos en la listas, ten en cuenta que se debe crear un borrar elemento para cada uno de los arreglos. (para borrar basta con escribir el numero del elemento)

Con este botón podremos buscar en la lista, permitiendo escribir la palabra para encontrar su ubicación en ella, ten encuentra que se pueden añadir nuevas listas a este botón.

Con este botón podremos reiniciar todas las listas, o lista en este caso, para así poder ingresar nuevas variables a la aplicación.

Finalmente nos debería quedar algo así en primera instancia.

Aquí dejo un video que mostrara como funciona la aplicación. Espero que logres crear esta aplicación, y recuerda que puedes agregar imágenes, colores, sonidos y cambiar la disposición según te sea útil.