|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
____________________________
8L.- FirebaseDB. Base de datos.
 p8L_firebaseDB_basedatos.aia
- Entramos en FireBaseDB, pulsamos en "Ir a la consola"
- Agregamos un proyecto. Actuaremos en los lugares marcados.
- Vamos a Descripción general / Configuración de proyecto / General.
- En Realtime Database / Datos, obtendremos la dirección de la base.
- Vamos a crear mediante una aplicación esta base de datos.
- Para trabajar con la información JSON utilizaré la extensión: 299G_extension_Decodifica_Json.htm
______________________________
- Diseño.
- En Diseño, agregamos un componente Firebase y en FirebaseURL escribimos la dirección de nuestro proyecto añadiendo base_datos, en mi caso:
https://kio4_3c204.firebaseio.com/base_datos
______________________________
- Bloques.
- A los usuarios (nombre) los creamos mediante FirebaseDB.ProjectBucket
- Así rellenamos cada registro de nombre:
- La lista de nombres la obtenemos mediante GetTaglist.
- Get register por nombre. Find ciudad y provincia.
- Con el bloque "FirebaseDB.GetValue " vamos a realizar dos operaciones: "get_register" y "find"
-
get_register" obtiene un registro del nombre indicado..
-
"find" obtiene all_data_base, es decir, toda la base de datos en una lista. [tag = / ]
- Luego mediante un bucle buscamos los nombres en donde coincide ciudad y provincia.
- El dato obtenido viene en este formato, por eso he puesto en los CamposDeTextos:
["\" y \""]
______________________________
2.- FirebaseDB. Base de datos. Simplificado.
p8L_firebaseDB_basedatos_2.aia
- Este ejemplo es similar al anterior pero más simplificado. Un cambio es que al introducir un nuevo usario se actualiza la lista de usuarios registrados mediante el bloque Firebase.DataChanged.
- Para obtener un usuario o toda la base es necesario pulsar previamente el botón "Get list of nombres".
______________________________
- Diseño.
______________________________
- Bloques.
______________________________
3.- FirebaseDB. Los datos desde una página web.
p8L_firebaseDB_basedatos_2.aia (es el mismo proyecto que hemos visto anteriormente)
firebase_kio4.zip
- Vamos a añadir, modificar y borrar usuarios desde una página web.
- Podremos añadir, editar y borrar datos en la misma base_datos desde la aplicación de App Inventor y desde una página web.
- Seguiremos este tutorial, pero con muchas modificaciones:
http://time2hack.com/2015/03/intro-to-firebase-with-javascript-and-jquery.html
- El código lo realizaremos con dos archivos, el primero es una página web que muestra un formulario y en la parte id=usuarios, se mostrarán los datos de los usuarios.
- Tendrá dos botones, uno para añadir y modificar usuarios y otro para borrarlos.
- Esta página cargará a los scripts: script.js y firebase.js
- El archivo CSS es: bootstrap.min.css
index_firebase.html |
<!DOCTYPE html>
<html lang="es">
<!-- Modificado por Juan A. Villalpando - KIO4.COM -->
<!-- http://kio4.com/appinventor/8L_firebaseDB_basedatos.htm -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Firebase - JavaScript - jQuery</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style type="text/css">
#usuarios p,
#usuarios p.lead{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h3>Guardar información de usuarios.</h3>
<div class="row">
<div class="col-md-6">
<form method="post" name="Formulario">
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" id="nombre" required placeholder="Escriba su nombre.">
</div>
<div class="form-group">
<label for="calle">Calle</label>
<input type="text" class="form-control" id="calle" placeholder="Nombre de su calle.">
</div>
<div class="form-group">
<label for="ciudad">Ciudad</label>
<input type="text" class="form-control" id="ciudad" placeholder="Nombre de su ciudad.">
</div>
<div class="form-group">
<label for="provincia">Provincia</label>
<input type="text" class="form-control" id="provincia" placeholder="Escriba su provincia.">
</div>
<button type="submit" class="btn btn-primary addValue">Guardar / Store usuario</button>
<button type="submit" class="btn btn-primary deleteValue">Borrar / Delete usuario</button>
</form>
</div>
<div class="col-md-6">
<ul id="usuarios" class="list-group">
<!-- En esta parte de la página web se mostrarán los usuarios. -->
</ul>
</div>
</div>
</div>
<script src="firebase.js"></script>
<script src="script.js"></script>
</body></html>
|
- El archivo script.js contiene el código de ejecución.
- Contiene tres eventos 'child_add', 'child_removed' y 'child_changed'
- Los eventos provocan el refresco de los datos en la página web.
- Cuando pulsamos el botón "Guardar usuario", se ejecuta la parte .addValue
- Cuando pulsamos el botón "Borrar usuario", se ejecuta la parte .deleteValue
script.js |
// Modificado por Juan A. Villalpando
// http://kio4.com/appinventor/8L_firebaseDB_basedatos.htm
var dbRef = new Firebase("https://kio4-3c240.firebaseio.com/");
var base_datosRef = dbRef.child('base_datos')
// Evento cuando añade un elemento. Carga los usuarios viejos y el recién añadido.
base_datosRef.on("child_added", function(snap) {
document.querySelector('#usuarios').innerHTML += (contactHtmlFromObject(snap.key(),snap.val()));
});
/////////////////////////////////////////////////////////////////////////////////////////
// Evento cuando borra un elemento.
base_datosRef.on("child_removed", function(snap) {
window.location="index_firebase.html";
});
/////////////////////////////////////////////////////////////////////////////////////////
// Evento cuando edita un elemento.
base_datosRef.on("child_changed", function(snap) {
window.location="index_firebase.html";
});
/////////////////////////////////////////////////////////////////////////////////////////
// Añade usuario. ADD.
document.querySelector('.addValue').addEventListener("click", function( event ) {
event.preventDefault();
if (document.querySelector('#nombre').value != '') {
var nombre = document.querySelector('#nombre').value;
var calle = document.querySelector('#calle').value;
var ciudad = document.querySelector('#ciudad').value;
var provincia = document.querySelector('#provincia').value;
var userRegister = base_datosRef.child(nombre);
userRegister.set({calle:calle, ciudad:ciudad, provincia:provincia });
Formulario.reset();
} else {
alert('Escriba el nombre del usuario.');
}
}, false);
/////////////////////////////////////////////////////////////////////////////////////////
// Borrar usuarios. DELETE.
document.querySelector('.deleteValue').addEventListener("click", function( event ) {
if (document.querySelector('#nombre').value != '') {
var nombre = document.querySelector('#nombre').value;
var userDelete = base_datosRef.child(nombre);
userDelete.remove();
var userRegister = base_datosRef.child("-");
userRegister.set({calle:Math.random(), ciudad:"", provincia:"" });
} else {
alert('Escriba el nombre del usuario a borrar.');
}
}, false);
/////////////////////////////////////////////////////////////////////////////////////////
// Muestra los datos en la página Web HTML.
function contactHtmlFromObject(nombre, values){
var html = '';
html += '<li class="list-group usuarios"><div>';
html += '<p class="lead">'+nombre+'</p>';
html += '<p><small >'+values.calle+', '+values.ciudad+', '+values.provincia+'</small></p>';
html += '</div></li>';
return html;
}
|
- ¿Para qué he puesto el usuario "-" con calle:Math.random?
- Resulta que el bloque de App Inventor Firebase.DataChanged, detecta cuando agregamos un dato y cuando lo modificamos, pero no detecta cuando lo borramos.
- He creado al usuario "-", para que cada vez que se borre un dato, se modifique la calle con un valor numérico aleatorio, de esta forma el Firebase.DataChanged detectará que ha habido algún cambio cuando borremos a cualquier usuario.
- Estos son los archivos necesarios, para ejecutarlos descomprime el archivo firebase_kio4.zip en tu ordenador y abre con un navegador el index_firebase.html, contiene los datos de mi configuración, se amable y respeta el trabajo.
__________________________________
|
