7. AppInventor - Base de Datos Online - FirebaseDB
En este post vamos a ver cómo guardar datos en la nube que sean accesibles para todos los usuarios y podamos modificarlos cuando queramos para añadir más contenido a nuestra aplicación.
Para ello usaremos el componente FirebaseDB, que nos dará acceso a Firebase, una popular plataforma (página web) gratuita* para desarrolladores gestionada por Google donde crearemos nuestra base de datos en la nube llamada Realtime Database.
Y para obtener usaremos .ObtenerValor
Para ello usaremos el componente FirebaseDB, que nos dará acceso a Firebase, una popular plataforma (página web) gratuita* para desarrolladores gestionada por Google donde crearemos nuestra base de datos en la nube llamada Realtime Database.
* Firebase es gratuito para un uso moderado. En caso que nuestra aplicación empiece a tener miles de usuarios hay un coste fijo de 25€ al mes o pago por uso. Más información en: https://firebase.google.com/pricing
1) Configuración de FirebaseDB
Podemos encontrar el componente FirebaseDB en la Paleta de AppInventor dentro de Experimental > FirebaseDB. Igual que con TinyDB, lo arrastramos y nos aparecerá en Componentes no visibles.
Si hacemos click en el componente, en la barra de la derecha de Propiedades vemos que hay un campo llamado FirebaseURL que pone DEFAULT. Esto deberemos cambiarlo con la dirección de nuestra base de datos en Firebase, así que vamos a crear una.
# Registro en Firebase
Primero de todo necesitaremos acceder a Firebase. Para ello podemos usar cualquier cuenta de Gmail que tengamos, por ejemplo la misma que App Inventor.
La web para acceder es: https://firebase.google.com/
- Una vez dentro, haremos click en el botón "GO TO CONSOLE" que aparece arriba del todo a la derecha.
Ahora nos aparecerá una página con los proyectos de Firebase que tengamos en caso que tengamos alguno.
- Seleccionaremos el botón "+ Add Project" para crear nuestro proyecto.
- Elegimos el nombre que queramos para nuestro proyecto, aceptamos las condiciones y le damos a crear!
# Creando la Base de Datos (Realtime Database)
Una vez se haya terminado de crear el proyecto, entraremos en la página de nuestro proyecto en Firebase, donde nos aparecerán un montón de opciones.
Para AppInventor solo usaremos una cosa, la Realtime Database que será la FirebaseDB en AppInventor.
- Para crearla, en la barra de la izquierda seleccionaremos Database.
- En la nueva página, bajaremos hasta encontrar Realtime Database y le daremos al botón de "Create database".
Muy importante ahora, nos saldrá una ventana con las normas de seguridad de la Realtime Database.
Debemos elegir Start in test mode para poder usarla con AppInventor.
Le damos a Enable y ya tendremos nuestra base de datos en la nube creada!
Finalmente solo nos queda obtener la URL de nuestra nueva base de datos para indicársela al AppInventor en el campo de FirebaseURL que mencionamos antes.
Para ello seleccionamos la URL que nos aparece y le damos a copiar (Control+C)
Ahora volvemos al AppInventor y en las Propiedades de nuestra FirebaseDB, en el campo FirebaseURL le pegamos la URL que hemos obtenido (Control+V).
Ya tenemos nuestra base de datos online configurada!
Para cada pantalla que necesitemos usarla, deberemos añadir de nuevo una FirebaseDB y ponerle la FirebaseURL que hemos obtenido.
Para cada pantalla que necesitemos usarla, deberemos añadir de nuevo una FirebaseDB y ponerle la FirebaseURL que hemos obtenido.
Cuidado de compartir esa URL solo con vuestro equipo, sino otras personas podrían tener acceso a ella!
2) Estructura de FirebaseDB
FirebaseDB funciona parecido a la TinyDB, en el sentido que también usa Etiquetas y Valores.
En este caso, llevaremos un poco más lejos el poder de las etiquetas, usándolas para crear rutas.
El sistema de rutas en las etiquetas es el mismo que usan las URL de las páginas web.
Por ejemplo en Youtube, si quiero ver los videos del canal de Imagine Dragons, la URL es https://www.youtube.com/user/ImagineDragons/videos
Si os fijáis, primero está la página principal (www.youtube.com/), pero luego, separado por /barras está la ruta en concreto:
- user/ImagineDragons/videos
Si quiero ahora ver los videos de otra persona, por ejemplo del usuario Willyrex, la URL es https://www.youtube.com/user/Willyrex/videos y cumple la misma ruta que antes:
- user/Willyrex/videos
Y si quiero ver sus Playlists, la ruta será:
- user/Willyrex/playlists
Lo único que cambia es el nombre de usuario, pero la estructura de la ruta (etiqueta) es siempre la misma!
De esta misma manera organizaremos nuestra base de datos.
Si queremos crear un nuevo usuario y guardar su email y password usaremos las etiquetas:
- usuario/nombre/email
- usuario/nombre/password
3) Cómo usar FirebaseDB
Como hemos visto antes, debemos añadir el componente FirebaseDB a cada pantalla donde la queramos usar, y poner la misma FirebaseURL que hemos creado.
Los bloques son los mismos que con TinyDB.
Para guardar usaremos .GuardarValor
Y para obtener usaremos .ObtenerValor
4) Guardar Datos en FirebaseDB
Seguiremos con la creación de usuario de la pantalla de registro. En este caso el objetivo añadido será guardar en nuestra base de datos online cada nuevo usuario que se registre en nuestra aplicación.
Esto nos servirá para:
- En caso que el usuario elimine la app y la vuelva a instalar, podrá recuperar su cuenta haciendo Iniciar Sesión (si hemos creado la pantalla) en vez de registrar una nueva cuenta.
- Podremos ver cuántos usuarios tenemos y sus e-mails (quizás para mandarles información por correo).
- Permitir a usuarios encontrarse entre sí (en caso que sea una aplicación social).
Esta es la pantalla de registro básica con usuario, email y contraseña.
Cuando apriete el botón de Registro, guardaremos la información en Firebase con el bloque .GuardarValor.
Vamos a pensar primero nuestra Etiqueta. En este caso ya no nos vale usar como etiqueta "usuario", pues necesitamos pensar un sistema que funcione para muchos usuarios (como hemos visto antes con Youtube). Por lo tanto, copiándoles su idea, podemos crear las siguientes etiquetas:
- usuario/NombreDeUsuario/email
- usuario/NombreDeUsuario/password
En bloque, para el email, quedaría de la siguiente manera:
Como vemos, el NombreDeUsuario no es fijo, para que cada usuario cree el suyo y genere una etiqueta distinta:
usuario/alex/email, usuario/maria/email, usuario/marta/email, usuario/laura/email, etc.
Lo unimos al bloque de .GuardarValor y ponemos como valor lo que el usuario haya puesto en el CampoDeTexto para el Email:
Hacemos lo mismo para el password y lo ponemos todo en el botón .Click del botón de Registro:
Probamos nuestra aplicación con la app de "MIT AI2 Companion", rellenamos los campos y le damos a Registro.
Vamos de nuevo a nuestro proyecto de Firebase, entramos en Database y el usuario que acabamos de crear debería aparecer!
A medida que más personas vayan creando usuarios en la aplicación, se irán añadiendo uno detrás de otro.
Con esto, junto a lo que hemos visto anteriormente con TinyDB y los cambios de pantalla, ya tendríamos la parte de Registro de nuestra app terminada.
4) Leer datos en FirebaseDB
Si más adelante queremos leer algún dato guardado en FirebaseDB, va a ser un poco distinto que con TinyDB.
Con TinyDB usamos el bloque .ObtenerValor e instantáneamente nos da el Valor que hay en la Etiqueta porque está guardado en el móvil.
Con FirebaseDB usaremos igual su bloque .ObtenerValor pero tendremos que esperarnos para obtener el valor, pues tiene que conectarse a internet para recuperarlo.
Una vez hayamos usado el bloque .ObtenerValor, FirebaseDB nos dará el valor el siguiente bloque:
Para poner un ejemplo más complejo, si quisiéramos recuperar el Email del usuario en FirebaseDB, por ejemplo para mostrarlo en su perfil, tendríamos que reconstruir la Etiqueta que contenía el nombre de usuario:
Recordemos*: usuario/nombredeusuario/email
*Es una buena técnica apuntarse aparte (en una libreta) todas las etiquetas que usamos, pues deben se siempre las mismas para .GuardarValor y .ObtenerValor o no va a funcionar.
En este caso no tenemos un CampoDeTexto donde el usuario vaya a poner su nombre de usuario. Para obtenerlo usaremos la TinyDB que creamos y donde sí guardamos el nombre de usuario bajo la etiqueta usuario.
Quedaría de la siguiente forma:
Y ya podremos usarlo como queramos, por ejemplo, mostrándolo en un texto:
Recordemos*: usuario/nombredeusuario/email
*Es una buena técnica apuntarse aparte (en una libreta) todas las etiquetas que usamos, pues deben se siempre las mismas para .GuardarValor y .ObtenerValor o no va a funcionar.
En este caso no tenemos un CampoDeTexto donde el usuario vaya a poner su nombre de usuario. Para obtenerlo usaremos la TinyDB que creamos y donde sí guardamos el nombre de usuario bajo la etiqueta usuario.
Quedaría de la siguiente forma:
Y finalmente el valor lo recibiríamos en el bloque amarillo "cuando FirebaseDB .ObtenerValor".
# Próximos Pasos
Hasta aquí hemos visto un uso básico de FirebaseDB. Ahora nos queda pensar si nuestra aplicación necesita guardar más datos en la nube.
Una técnica para decidir esto es pensar si otros usuarios de la app deben ver el contenido guardado por el usuario. De ser así, guardaremos y obtendremos los valores con FirebaseDB, sino usaremos TinyDB o nada.
En resumen, FirebaseDB permite a los usuarios conectarse e interactuar entre sí.
Como cambio las reglas? Hacer que sean privadas en una aplicación desarrollada en app inventor
ReplyDelete{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}
Hola Aristobulo,
DeletePara AppInventor es mejor dejar lecturas y escrituras abiertas.
Si quieres investigar más, lo que necesitás es autenticar el usuario con Firebase Authentication (hay plugin para el AppInventor) y modificar las normas para permitir uso solo a los usuarios con token.
hola, y si necesito por ejemplo que se cree una lista de imagenes q salgan de Firebase,
ReplyDeleteosea, que si la persona por ejemplo esta buscando comida "hamburguesa", y le salga toda una galeria de fotos de las diferentes opciones que estan en firebase
Hola Daniel, puedes guardar un listado de las url de la imagen en Firebase con el nombre de la búsqueda, ejemplo:
Delete"hamburguesa": "https://cocina-casera.com/wp-content/uploads/2016/11/hamburguesa-queso-receta.jpg", "www.hamburguesa.com/burguer.png".
Hola, cuando envío datos booleanos desde el app inventor a firebase me los escribe como: ‘true’ o ‘false’ (osea entre comillas lo pone) y cuando pasa esto no me logra el led puesto que se enciende con un true o false sin comillas. Cómo puedo solucionarlo?
ReplyDeleteNo me logra encender el led
DeleteHola Mechatronic98,
DeleteEn firebase sólo puedes guardar texto (Strings), cuando los recibas en el código de App Inventor puedes usar los bloques de comparación de texto para ver si lo que recibes == "true" o es == "false". Esto genera un booleano que puedes usar para encender el LED.
Hola. Uso App inventor 2 para montar una apk. Mi intención es que mi base de datos esté en la nube para que mis usuarios usen mi app con los datos que yo escribo y guardo, pero no me interesa que tengan acceso a la base de datos. Buscando llegué hasta este tutorial, sin embargo, me encuentro aquí que para mi intención no hace falta usar firebase sino solamente tinybd. Entonces, ¿puedo usar firebase sin que mis usuarios tengan acceso a mi base de datos?, o bien, ¿cómo puedo usar tinybd en la nube y que mis usuarios usen mi app con mis datos?
ReplyDeleteHola Superindus,
DeleteTinyDB es una base de datos local (solo vive en el propio teléfono) con lo cual *no está en la nube* ni puedes cambiar los datos como comentas.
Debes usar Firebase, los usuarios han de tener acceso para poder LEER los datos que tú escribes, lo que no tienen es permiso de ESCRITURA, así que puedes usarla sin problemas.
Gracias Alex por tu respuesta. Me aclaró bastante. ¿Hay algo parecido para CloudDB? Gracias. Saludos.
DeleteCloudDB es otra base de datos en la nube, su uso es exactamente igual que Firebase.
DeleteTe recomiendo Firebase porque puedes también acceder desde tu navegador web y ver los datos más fácilmente.
Hola de nuevo. Estoy probando programar apk con pequeñas bases de datos en Realtime Database según tus instrucciones, ingresando y guardando los datos a través de la Consola de Firebase
ReplyDeletePues me ocurre lo siguiente:
Cuando trato de probar mi apk en el móvil con MIT AI Companion, se vuelve loca, parece como si la app se reiniciase constantemente y no da tiempo a nada. (Estoy usando AI2Offline)
Nunca me da el Firebase Token, ni usando una propia base ni usando DEFAULT
He activado el modo de comienzo de bloqueo y también Persist
La apk es sencilla, al inicializarse Obtener datos y un botón para presentarlos en etiquetas.
Si elimino la base de datos la app funciona sin problemas.
Por favor, me gustaría alguna pista o ayuda.
Muchas gracias por tu disposición. Saludos.
Hola. Descubrí que con AI2Offline en el localhost:8888 no funciona firebase.
DeleteCuando trabajo en la web ai2.inventor... todo va bien.
Dejo a criterio del admin mantener o borrar mis mensajes.
Saludos.
hola, soy nuevo con app inventor y estoy desarrollando una app donde se busca crear una cuanta de usuario y tener una ficha de perfil, el problema que he tenido es que no se como crear una ficha de perfil de usuario donde se pueda mostrar la información que se guarda en firebase. existirá alguna manera de hacer visible esta información sin necesidad de tener que buscarla cada vez para que sea visible? ejemplo: mi app pretende crear un registro de mascotas y quiero que una vez llenado un formulario la información ingresada así como la imagen que se cargue se presente en una pagina nueva a forma de ficha con la información proporcionada.
ReplyDeleteagradezco de antemano la atencion brindada, saludos
DeleteHola GeoStriker,
DeletePara mostrar información de Firebase debes siempre primero buscarla en Firebase.
Si esa información no va a cambiar, una vez el usuario ha llenado el formulario, guarda los datos también en TinyDB (que se guarda en local, en el dispositivo) y muestras el perfil usando TinyDB. De esta manera te ahorras tener que consultar cada vez a Firebase
Hola!
ReplyDeleteEstoy haciendo una app con app inventor con Firebase y tengo un problema que no consigo resolver.
Tengo una pantalla con varios botones que todos ellos dirigen a la misma pantalla y la información que se muestra varia en función del botón pulsado, pero al poner los bloques un segundo botón me da error. Por ejemplo, la pantalla1 tiene el Boton1, Boton2 y Boton3. Si pulso el Botón 2 la app me lleva a la pantalla2 con la información correspondiente al Botón2.
¿Tienes alguna idea de como podría hacerlo?
Gracias