index_firebase.html creates the form and shows the data on a web page.
<!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>
The script.js file contains the execution code.
Contains three events 'child_add', 'child_removed' and 'child_changed'
The events cause the data to be refreshed on the web page.
When we press the "Store user" button, the .addValue part is executed
When we press the "Delete user" button, the .deleteValue part is executed
// 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;
}
Why have I put the user "-" with calle:Math.random?
App Inventor Firebase.DataChanged block detects when we add data and when we modify it, but it doesn't detect when we delete it.
I have created the user "-", so that every time a data is deleted, the calle is modified with a random numerical value, in this way the Firebase.DataChanged will detect that there has been a change when we delete any user.
oooooooooooooooooooooooooooooooooooooooooooooo
This code can work with the files in a folder on your PC or by uploading them to a hosting, here I have uploaded them to a hosting for testing:
