miércoles, 18 de septiembre de 2019

Chat en App Inventor con CloudDb

Hola y bienvenido una vez más a inventordeaplicaciones.es. En este vídeo te enseñaré a usar el componente CloudDB en App Inventor 2 y ha abrir una cuenta gratuita en el software Redis para el almacenamiento en la nube.

Con la combinación de estos dos elementos crearás una aplicación de chat en app inventor con cloudDB

¿Qué es CloudDB?

CloudDB es un componente no visible que después de la actualización nb179 el componente deja de ser experimental para situarse en componentes de almacenamiento. Este componente te permite almacenar datos en un servidor de datos conectado a Internet (utilizando el software Redis). Esto permite que tu aplicación comparta datos con otros usuarios que tengan la misma aplicación.

De forma predeterminada, cuando estés creando una aplicación los datos se almacenarán en un servidor mantenido por MIT. Pero este servidor tiene una serie de inconvenientes. Los datos no se guardarán de forma persistente, es decir, en cualquier momento pueden desaparecer. La base de datos será compartida con otros usuarios de App Inventor 2 pudiendo alterar los datos almacenados. Por último este servidor es muy inestable, dándose el caso que pudiera caerse en cualquier momento, sin embargo, puedes configurar y ejecutar tu propio servidor.

 Podemos modificar la propiedad «RedisServer» y la propiedad «RedisPort» para acceder a tu propio servidor. Veremos un ejemplo creando una cuenta y usando el Software Redis.

Diseñando la aplicación para el chat en App Inventor con CloudDb

Como el diseño es bastante complejo dejaré un enlace para descargar el proyecto de la aplicación en formato AIA para abrir con App Inventor. De esta manera podrás ver con más detalle cómo está diseñada la aplicación y por supuesto seguir este tutorial fácilmente.

Pincha en este enlace para descargar el archivo AIA.

Programando la aplicación de chat en app inventor con cloudDB

Lo primero que crearas para tu chat en app inventor con cloudDB, es una variable global a la que le darás el nombre de “USUARIO”. Te servirá para almacenar el valor que el usuario escoja al pulsar el botón en la primera pantalla. Inicializa la variable con un bloque de texto vacío.

Variable Global de texto en App Inventor

Lo siguiente es programar los botones que servirán para definir quién es el usuario uno y el usuario dos. Y una vez hecho esto cambiar de pantalla. 

Comienza por el botón que definirá el usuario uno. Necesitas que al pulsar el botón “BtnUsuario1” guarde en la variable que anteriormente creaste el valor de “USUARIO1”. Seguido debes de cambiar de pantalla, o en este caso hacer visible la otra disposición vertical. Tiene que quedar de la siguiente manera.

Pulsa el botón para cambiar variable

Tendrás que hacer lo mismo para el botón “BtnUsuario2”. Pero esta vez a la hora de darle valor a la variable, le introducirás el valor “USUARIO2”. lo demas sera exactamente igual.

Pulsa el botón para cambiar variable

Una vez que has definido quien es cada uno de los usuarios, vas a programar la parte de envío de mensajes. Cuando el usuario introduzca un texto en la caja y pulse enviar este se envíe y guarde en la nube para posteriormente utilizarlo.

Lo primero que harás es decirle a tu aplicación que si se pulsa el botón “BtnEnviar” y la caja de texto no está vacía. Entonces guardarás el texto en la nube con ayuda del componente CloudDb. Pasándole como etiqueta el valor que tenga la variable global “USUARIO”. Y el valor a guardar, el texto que contenga en ese momento la caja de texto.

Una vez hecho esto, dejaremos la caja de texto vacía para el siguiente mensaje. Lo único que tienes que hacer para esto es cambiar el texto por una caja de texto vacía.

Ahora utiliza el bloque «Cuando CloudDb Datachanged» para detectar cambios en la base de datos. Este bloque no solo te detectará cuando se ha producido un cambio. Si no que devolverá cuál etiqueta y valor se ha introducido o se ha modificado. De esta manera, sabrás si se ha realizado algún cambio.

También necesitas saber cuál de los dos usuarios ha sido. Para ello te vas ayudar del bloque «IF«, y si la última etiqueta que se ha modificado es la del usuario 1. Entonces será la etiqueta de texto de este la que modificaras, asignándole el dato guardado en esta última etiqueta. Si por el contrario la última etiqueta que se ha modificado no es la del Usuario2. Entonces será la del usuario 2, y procederá a modificar la etiqueta de texto de este. Tanto si modificas la etiqueta de texto del usuario 1 o 2, pon un salto de texto ayudándote con «/n». Tiene que quedar de la siguiente manera.

Ahora solo te falta buscar a un amigo y ejecutar tu nueva aplicación. Usando dos dispositivos, uno será el usuario 1 y el otro el usuario 2.

Evidentemente esta aplicación podría mejorar infinitamente. Pero la intención de este artículo es solo la de ver un ejemplo sencillo de cómo puede ayudar el almacenar datos en la nube.

Cómo crear una cuenta en el Software Redis para el uso de cloudDB

Cómo bien te explicaba al principio de este artículo querido amigo, el MIT te ofrecerá almacenamiento en un servidor de pruebas. Pero solo se recomienda el uso mientras dure el desarrollo de la aplicación, una vez terminado se recomienda que se cree una cuenta en el Software Redis. Aquí veremos cómo crear una cuenta gratuita y como configurar el componente CloudDB para utilizarlo en tu chat en app inventor con cloudDB.

Lo primero es dirigirte a tu navegador e introducir la siguiente direccion web https://redislabs.com/ . Que te mandara a la página de Redis Labs donde crearemos una cuenta gratuita. Si te fijas justo en el centro de la página tienes un botón con un recuadro. Donde te pide un correo y un botón donde dice que comiences gratis, introduce tu correo y pulsa al botón.

Inmediatamente después recibirás en la misma cuenta de correo que has introducido un e-mail de bienvenida. Para confirmar el correo y donde se te pedirá que actives la cuenta pulsando al botón.

Al pulsar el botón “Ativate Now” te redirigirá a una página para terminar de configurar su cuenta. Si no está seleccionada la opción de la nube selecciónala y rellena los campos, además de aceptar los términos y condiciones, nos redirigirá a una página que nos dará la bienvenida.

Pulsa el botón donde dice “Create your subscription” para terminar de configurar tu cuenta. Selecciona la opción  “Essentials”  que es la opción gratuita y sin servidos que nos ofrece 30 megas y por cada giga adicional se cobrará 5$.

Nuevamente te dirigira a una nueva página para una nueva suscripción, selecciona nuevamente la opción free si no quieres pagar y pulsa continuar.

Ya está, pon nombre a tu base de datos yo para el ejemplo pondré Prueba0001.

deja como esta las demas opciones y pulsa en “Activate”

Pues bien ya tenemos activada nuestra cuenta. Ahora pulsa sobre ella para coger unos datos que usaremos en nuestro proyecto de App Inventor 2. Solo coge los datos que te muestro en la siguiente imagen he introducelos en la configuración del componente CloudDb

Solo tienes que utilizarlo en la aplicación que has construido en este artículo. Si todo ha ido bien funcionara tu chat en app inventor con cloudDB a la perfección.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo, no olvides dejarlo en los comentarios. Sin más me despido hasta el próximo tutorial. Un saludo

Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas ...