Base de Datos con App Inventor 2

¿ QUE ES APP INVENTOR  ?

App Inventor es una Plataforma de desarrollo para dispositivos android originalmente creada por el MIT (Instituto tecnológico de Massachussetts) y que ahora pertenece a Google Labs,

 Para desarrollar aplicaciones con app inventor es necesario tener una cuenta de gmail y opcional un teléfono o tablet con sistema operativo android, si no se dispone del celular se puede usar el emulador que trae la aplicación u otra externa como Bluestacks App.

App inventor trabaja con tres pantallas una la del diseñador gráfico que se trabaja online con la web, la segunda pantalla es el editor de bloques para el cual es necesario primero instalar java en nuestro ordenador si es el caso y la tercera pantalla es el emulador donde podemos ver e interactuar con nuestra aplicación en tiempo real aunque todo depende de nuestra conexión a internet.

Para configurar el app inventor lo primero que debemos hacer es ingresar a la página del MIT appinventor.mit.edu/explore/ para lo cual debemos usar un buscador que sea mozilla firefox o google chrome en windows, safari en mac, el internet explorer no funciona,también si o si teenmos que abrir una cuenta en google.Despues de ingresar a la página nos vamos a recursos (Resources), Get Start y damos clic en Setup instrucciones donde aparecen tres opciones para usar la aplicación, usar el emulador online, la aplicación en nuestro celular o tablet via wifi o conectar el celular al pc via cable usb. A mi parecer la mas fácil es usar  un lector de código QR (lo podemos descargar de play store) , después de hacer la aplicación obtenemos el código de la opción Build de la barra de tareas superior y escogemos App (provide QR code for .apk), seguido nos aparecerá el código el cual debemos escanear con nuestro celular y proceder a instalarlo.
Sí escogemos la opción 2 debemos descargar aiStarter que nos servirá para poder usar el emulador de un celular en el pc, después de instalado le damos clic en el icono y luego nos vamos a la pantalla principal de la plataforma de desarrollo y damos clic en Connect y luego en Emulador, después de unos minutos se abrirá el celular virtual mostrandonos nuestra aplicación.
Ya configurado el pc y el celular pulsamos el botón create de la página principal del MIT el cual nos llevará a nuestra cuenta de google donde debemos logearnos, luego de esto nos muestra otra página donde nos pregunta si damos permiso de compartir con MIT nuestro correo electrónico, aceptamos, seguido aparece otra página con los Términos y condiciones, le damos aceptar y ya con esto podemos empezar a usar la plataforma. Les dejo un link de youtube para que vean el procedimiento : 
https://www.youtube.com/watch?v=r8nBf3F0jGU




PROYECTOS:


Base de Datos :

En esta entrada vamos a desarrollar una base de datos que consiste en pasar y almacenar  datos entre dos pantallas con la ayuda del componente TinyDB.

Lo primero que debemos hacer es seleccionar proyecto nuevo, le colocamos un nombre que haga referencia a la aplicación.

Nos aparece la primera pantalla vacía donde vamos a arrastrar de la interfaz de usuario ubicada en la columna izquierda el componente Listpicker, en la columna derecha propiedades en el cuadro de texto le colocamos un nombre en este caso  "seleccione", en la ventana que dice ElementsFromString escribimos los elementos a seleccionar de la lista, en este caso Rojo, Azul, Verde, Amarillo.

 En el cuadro texto escribimos el nombre que queremos que muestre la lista “ Seleccione” ,.

Utilizamos un Botón “siguiente” el cual al presionar almacena el dato seleccionado y nos lleva a otra pantalla en la cual nos muestra la opción seleccionada, para almacenar el dato seleccionado usamos del elemento tinyDB la opción (store value) almacenar valor.

Creamos otra pantalla que vamos a llamar opciones, en esta pantalla vamos a usar un Label que diga Seleccione el Tamaño, usaremos 5 Checkbox para seleccionar el tamaño de la pintura  ¼ de galon, ½ galon, 1 galon, 1 balde, 1 cuñete.

Agregamos un Botón al cual llamaremos  “Siguiente”, al presionar este botón nos muestra el resultado de la selección de las dos pantallas en una pantalla emergente para lo cual vamos a utilizar el componente Notifier, para esta pantalla también vamos a utilizar el componente TinyDB el cual debe tener el mismo nombre del que usamos en la primera pantalla.

Cuando presionamos el botón siguiente de la segunda pantalla vamos almacenando los botones checkbox que se seleccionaron y almacenar ese valor en una variable que llamaremos Tamaño, con una variable de control if –then vamos a preguntar si el checkbox 1está seleccionado o no , si está seleccionado guardamos ese valor, con un segundo if-then vamos a unir el dato anterior y el nuevo dato con la ayuda de la opción Joint del componente Text, con un segundo Joint  vamos a unir lo que había en global Tamaño más el segundo Checkbox, antes  seteamos una variable global que llamaremos global Tamaño y en ella se irán guardando los datos seleccionados. Este mismo procedimiento lo usamos para la opción 3, 4 y 5, entonces en la variable global  Tamaño tenemos el valor total de las selecciones.

Ahora para mostrar el resultado vamos a usar un Notificador para ello usamos la opción ShowMessageDialog ,utilizamos un Joint del componente Text para unir lo que seleccionamos de la pantalla anterior con la opción GetValue del componente TinyDB en el Tag le colocamos el nombre color que debe ser el mismo que usamos en la primera pantalla, donde dice valuelfTagNothere, valor no encontrado colocamos “No se encontró ningún dato asociado”, con la ayuda de otro Joint unido al Joint anterior unimos la variable global Tamaño., donde dice title en la opción showmessagedialog colocamos un Tag que diga “Su pedido” y en Button Text  “Aceptar” y con esto damos por terminado nuestra aplicación.
Por ultimo dejo el link para que puedan ver el funcionamiento de la aplicación:


https://www.dropbox.com/s/dma4cy1ymt68253/BasedatosPantallas%20%282%29.apk?dl=0