WhatsAppInventor ¡App Inventor con Firebase!

Con esta aplicación vamos a crear una prueba de concepto de cómo realizar una aplicación de mensajería utilizando el nuevo componente experimental Firebase.

 

Como podéis ver en la imagen que os adjunto creamos una app multipantalla que muestra una interfaz en la que podemos:

  • Crear usuarios y almacenarlos en Firebase
  • Consultar los usuarios creados previamente en la base de datos
  • Chatear entre los distintos usuarios

Podéis probar el envío y la recepción de mensajes desde el mismo dispositivo utilizando un desplegable que permite seleccionar el usuario...recordad que es una prueba de concepto... o bien desde dispositivos distintos (podemos usar incluso un dispositivo real y el emulador Genymotion si carecemos de otro terminal).

Os he dejado un vídeotutorial completo donde podéis ver todo el proceso de creación de la aplicación(paso a paso)...desde la creación de la interfaz hasta las pruebas finales. Comentaros también que en la descripción del vídeo de Youtube podréis encontrar los materiales necesarios para hacer la aplicación así como un par de tutoriales, uno en español con ejercicios, y otro en inglés que en su día publiqué como trabajo en el MIT.

¡Espero lo disfrutéis y os invito a descargarla de Gallery y personalizarla!
Jose Luis Núñez
@twajoseluis

Escribir comentario

Comentarios: 12
  • #1

    Guerra (viernes, 22 abril 2016 18:10)

    Que tal! Buenísimo tu tutorial y explicación, y esta nueva actualización de AppInventor, pero tengo algunas dudas= Cuatos usuarios se pueden agregar en la app o en firebase, y creo que falto en ese ejemplo, si el chat se borra automático o hay que crear un botón de limpiar chat o borrar chat. Gracias.

  • #2

    Jose Luis Núñez (viernes, 22 abril 2016 19:51)

    ¡Me alegro te guste!
    La app es una prueba de concepto...tiene mucho por hacer para que sea realmente funcional. A tus preguntas comentarte que:
    - Teniendo en cuenta que Firebase funciona almacenando valores asociados a etiquetas lo suyo sería por cada usuario que se creara ir poniéndole etiquetas sucesivas: Usuario1, Usuario2, ..., UsuarioN. Podrías usar una etiqueta NumeroUsuarios que se almacenara tmabien en Firebase ese índice que lleva el conteo de usuarios.
    - Borrar el chat lo podrías hacer estableciendo los respectivos valores de los usuarios sin nada(cadena vacía).

    Más personalizaciones?? Puestos a imaginar..."canales o salones de charla"...igual Canal1, Canal2, ..., CanalN... Introducir algún mecanismo de autenticación también sería útil....
    vamos que no te aburrirás ;-)

  • #3

    Lu (miércoles, 27 julio 2016 22:06)

    Hola.. Muy buen tutorial-- Excelente!!
    ahora tengo una consulta .. en el caso de que este chateando con otra persona que tenga instalada también la aplicación, como hago para que me notifique que estoy recibiendo un mensaje.. Me interesaría averiguar eso.. Gracias :)

  • #4

    Claudio (domingo, 31 julio 2016 19:19)

    Hola José. Muy bien explicado!!! COn esto arranque y fui por mas. He creado una cuenta y cargado proyectos de prueba. Lo extrano que me ha sucedido que desde el jueves pasado en una aplicación que estaba armando dejaron de funcionar los bloques donde incluyo funciones firebase (Gettaglist, taglist, etc) al no responde a lo esperado le agrague notificadores para ver que hasta ahi llegó y nada. Volvi a cargar una aplicacion que siempre funciono, la volvi a compilar y tampoco funcionaba. Ahora mismo inicié una aplicación y tampoco hace nada (tampoco tira error) en los bloques donde hay algo relacionado con firebase. Nunca te ha pasado?
    Desde ya muchas gracias.
    PD: Por cierto, que me olvidaba lo principal; muy didacticos todos tus ejemplos, eso demuestra que ademas de saber, eres muy bueno explicando..

    Claudio

  • #5

    Jose Luis Núñez (domingo, 31 julio 2016 19:58)

    Hola Claudio,
    ten en cuenta que hemos pasado unos días con actualización de App Inventor(nb150), problemas con los bloques al trabajar en otro idioma, vuelta a sacar otra release en menos de 24h (nb150b) que ya arregla los problemas de los bloques en otros idiomas..etc.
    A ver si te ha pillado eso entre medio y por eso no te funciona.
    ¿Has actualizado MIT AI2 Companion? Eso es otra...en las notas de la nueva release se dice que hay que reempaquetar las apps antiguas que usen Fusion Tables...no tiene que ver con Firebase pero lo que te quiero transmitir es que son días de cambios en la plataforma.
    Personalmente, no me ha pasado, acabo de comprobarlo y todo OK. Te sugiero le pegues un borrado a la memoria caché de tu navegador y lo vuelvas a probar asegurándote que tienes Companion actualizado.

    Un abrazo y gracias por tus palabras!

  • #6

    Claudio (domingo, 31 julio 2016 21:58)

    Gracias por tu respuesta Jose. Problema solucionado...

    En estos cambios de plataforma, en mi proyecto se le ha pegado un nombre en la propiedad ProjectBucket. Se lo he borrado y todo volvió a su normalidad...

    Por si alguien le pasa...

    Abrazo de Argentina...
    A proposito, no sabes de alguna librería que incluya alguna función para saber cual es mi la IP publica actual, algo similar a NO-IP pero desde codigo C, o JS., o lo que fuera...

    Muchas gracias nuevamente.
    Claudio

  • #7

    Jose Luis Núñez (domingo, 31 julio 2016 22:30)

    Usa mi app publicada en Gallery:
    http://ai2.appinventor.mit.edu/?galleryId=6577031564754944

    Otro abrazo para ti ;-)

  • #8

    Claudio (lunes, 01 agosto 2016 00:07)

    Excelente colega!!!! Muchísimas gracias. Exactamente lo que buscaba, y en la pagina de ipify el ejemplo para arduino que precisaba... Estoy en un proyecto de monitoreo de sensores y me es indispensable saber en que IP están la camara que quiero visualizar. Ahora investigar para poder visualizar las camaras de vigilancia.

    Fuerte abrazo y nuevamente muchas gracias!

    Claudio.

  • #9

    Pablo (jueves, 06 octubre 2016 18:48)

    Buenas, me gusto la aplicación. Me pregunta sería si podría guardar datos de ubicación en el servidor y luego llamarlas desde otro dispositivos y usarlas en google maps.

  • #10

    Jose Luis (viernes, 07 octubre 2016 07:34)

    Puedes hacerlo Pablo pero en tal caso utilizaría dos bases de datos. Por un lado Firebase para la comunicación y por otro otra basada en Fusion Tables para almacenar las ubicaciones. La ventaja de usar Fusion Tables es que al almacenar las ubicaciones puedes verlas reflejadas fácilmente en un mapa.

    Saludos ;-)

  • #11

    Luis Alcazar (viernes, 02 diciembre 2016 20:22)

    Hola José Luis, excelentes tus videos, sos un genio explicando... gracias a esta app, ya me animé a trabajar con firebase... Muchas gracias

    Tengo una consulta: cómo hago para saber cuántos registros tiene guardada la firebase?
    Te cuento, he creado una app que es una agenda, y mientras los cargo es todo bárbaro, pero en cuanto salí de la app y volví a ingresar, al cargar los datos me comienza a reemplazar los registros desde el primero...
    Seguramente se realiza con un bucle, y dejando alguna bandera por allí, o tal vez cargando un campo mas con el número de registro, pero no sé como acceder a ese último registro... no me doy cuenta cómo hacerla...

    Por favor, serías tan amable de explicarme??

    Quedo a la espera, muchas gracias, y saludos desde Argentina.

  • #12

    Jose Luis (domingo, 04 diciembre 2016 18:23)

    Hola Luis, gracias por tus palabras!
    en Firebase tienes un método que te obtiene una lista con todas las etiquetas existentes en la base de datos(GetTagList) lanzando un evento de nombre TagList. Si obtienes la longitud de la lista tendrás el número de registros de tu base de datos Firebase. Esa misma lista puedes usarla como desees ;-)