Firebase create realtime database. PathJson extension. Firebase from web page

- Create a database in Firebase realtime.
Search for items. Using the JsonPath extension.

  • To facilitate the use of Json we will use the JsonPath extension:

oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

- Source file.

- p8L_firebaseDB_basedatos.aia (570.8 KB)

  • We are going to create, with an app, this database in Firebase realtime:

  • Look:
  • base_datos is a child of kio4-3c240, to create it, we put in FirebaseURL:

firebasepathjson2

  • antonio, carlos, luis, pedro, ricardo,... we will create them using ProjectBucket.

firebasepathjson5

4 Likes
  • Here Store users (nombre) and GetTagList of nombres.

["carlos","luis","antonio","pedro","ricardo"]

1 Like

- Screenshot.

1 Like

- Get register by nombre. Find ciudad and provincia.

  • With block "FirebaseDB.GetValue" we are going to perform two operations : "get_register" and "find"

  • "get_register" gets the data from a nombre.

  • "find", gets all_data_base in a list. [tag = / ]

Then through a loop it checks the users who have the required ciudad and provincia in their TextBox.
firebasepathjson11

  • The Json has this format:

firebasepathjson12

that's why I added ["\" \""] to the TextBox.

2 Likes

2.- The same example more simplified.

p8L_firebaseDB_basedatos_2.aia (569.8 KB)

3.- Add, edit and delete user from a web page. JavaScript.

We will follow this tutorial, with modifications.

From a web page, on our PC, we will modify the Firebase database.

  • We will use these 4 files:
    firebasepathjson23

  • 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:

http://kio4.com/firebase/firebase_kio4/index_firebase.html

1 Like