Javascript, HTML, CSS e... !
0 commenti

Database in realtime

Connettersi al Database di Firebase con Google Apps Script

Firebase è un servizio di Google che supporta gli sviluppatori web e mobile integrando una serie di strumenti di sviluppo di backend fondamentali, tra i quali, appunto, il database.
Si tratta di un database cloud NoSQL fornito da Google per l'archiviazione e la sincronizzazione dei dati. Il servizio è gratuito (fino ad una certa soglia, Firebase Pricing) e scalabile su tutte le piattaforme in circolazione, ovvero è possibile utilizzare lo stesso database di Firebase per progetti Web ma anche Android e iOS.

Lo scopo di questo tutorial è quello di mostrare, tramite un semplice esempio, come poter scrivere e leggere dati in Firebase da Google Apps Script.

Percorrendo rapidamente i passi iniziali per soddisfare i requisiti di piattaforma in modo da poter procedere con la stesura del nostro codice, è necessario in prima istanza creare un progetto in Firebase dalla relativa console: Firebase Console.
All'interno di tale area aggiungere un nuovo progetto cliccando su "Aggiungi progetto" e andando ad inserire, nella modal che si aprirà, il nome del progetto e l'area geografica della tua organizzazione/azienda prima di confermare con il click sul bottone "CREA PROGETTO", Fig. 1.



nuovo progetto firebase

Fig. 1 - Nuovo Progetto Firebase


All'interno del progetto appena creato, nella barra laterale sinistra, selezionare la voce di menu 'Database' presente nella sezione espandibile 'DEVELOP' e nel corpo della pagina cliccare sul bottone "INIZIA" all'interno del box relativo al Realtime Database in modo da avviare la procedura di inizializzazione del database (occorreranno pochi secondi).

A questo punto è possibile iniziare a lavorare con il nostro database, la schermata che avremo di fronte sarà quella relativa alla tab "DATI" dove è facile notare che il database non contiene alcun dato (null).
Da questa pagina è necessario annotarsi l'indirizzo web del database, nel caso specifico dell'esempio: https://apps-script-test-d8d80.firebaseio.com/ (Fig. 2), in quanto servirà utilizzarlo successivamente per poter interrogare il database, in scrittura e lettura, lato Apps Script.



indirizzo web del database di firebase nel tab dati

Fig. 2 - Indirizzo Web del Database di Firebase nel tab DATI


Le regole di sicurezza predefinite, come visualizzabile dalla tab "REGOLE", richiedono che gli utenti siano autenticati al fine di garantire l'accesso completo in lettura (.read) e scrittura (.write). Le regole sono modificabili, se valorizzate con 'true' renderebbero accessibile il database a chiunque (operazione utile sicuramente per le fase di test), tuttavia il codice di esempio di questo tutorial, per completezza di informazione, baserà il suo funzionamento sulle regole di autenticazione predefinite, ossia le seguenti:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Per poter soddisfare la richiesta di autenticazione è necessario disporre di una chiave di sicurezza che si trova selezionando: l'icona dell'ingranaggio >> Impostazioni progetto >> Account di servizio >>  Database secret, come mostrato nell'immagine seguente:



dove recuperare il database secret di firebase

Fig. 3 - Dove recuperare il database secret di Firebase


Nota: nel caso in cui si tenti di scrivere su Firebase da Apps Script e venga restituito l'errore 'ERROR: Error: Could not parse auth token.' significa che la chiave utilizzata non è quella giusta, ovvero non sono stati seguiti i passaggi descritti sopra per recuperarla (può capitare seguendo vecchi tutorial in quanto la chiave secret, per modifiche da parte di Google all'interfaccia di Firebase, era raggiungibile in precedenza in un'altra locazione ed è facile, per questo motivo, confondersi con altri tipi di chiave, una tra tutti quella delle API web).

Possiamo passare adesso alle lavorazioni lato Apps Script.

La prima fase è sicuramente l'aggiunta della libreria per Google Apps Script, basata sulle REST API di Firebase, che fornisce l'accesso al Realtime Database di Firebase.
Dall'editor di script di Google Apps Script selezionare la voce di menu Risorse >> Librerie... e nella modal che si aprirà inserire la seguente chiave di progetto per poi cliccare su "Aggiungi":

MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l

Selezionare l'ultima versione rilasciata (al momento della stesura di questo tutorial è la 26) e confermare cliccando su "Salva", Fig. 4:



inserimento della libreria di google apps script per firebase

Fig. 4 - Inserimento della Libreria di Google Apps Script per Firebase


A questo punto è possibile utilizzare i metodi della libraria e realizzare il nostro progetto che prevederà l'inserimento di dati in Firebase tramite submit di un form e la successiva lettura e visualizzazione del JSON risultante.
Di seguito i codici del nostro script di esempio, successivamente descritti:

File main.js

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

// Autenticazione
var firebaseUrl = "https://apps-script-test-d8d80.firebaseio.com/";
var secret = "dZj7XGo..................";
var base = FirebaseApp.getDatabaseByUrl(firebaseUrl, secret);

// Scrivi in Firebase
function writeInFirebase(form) {
  var name = form.name;
  var surname = form.surname;
  var email = form.email;
  var phone = form.phone;
  var country = form.country;
  
  var password_crypted = ''
  var message = "";  
  var email_appoggio, user_getted;
  var bln_user_invalid = false;
  
  var dataToImport = {};
  dataToImport = { email:email, phone:phone, country:country } 
  base.setData('users/' + name+'-'+surname, dataToImport);
}

// Leggi da Firebase
function readFromFirebase() {
  var list = "";
  var data = base.getData();
  if (data == undefined) { return list;}
  list = JSON.stringify(data.users);
  return list;
}

File index.html

<html>
    <head>
        <title>Connettersi ad un Database Firebase con Google Apps Script</title>
        <base target="_top">
    </head>

    <body>
        <form>
            <input type="text" name="name" value="" placeholder="il tuo nome" /><br />
            <input type="text" name="surname" value="" placeholder="il tuo cognome" /><br />
            <input type="text" name="email" value="" placeholder="il tuo indirizzo mail" /><br />
            <input type="text" name="phone" value="" placeholder="il tuo numero di telefono" /><br />
            <input type="text" name="country" value="" placeholder="il tuo paese" /><br />
            <input type="button" onClick="formSubmit()" value="Invia" />
        </form>
        <br />
        <div id="output1" style="margin-top: 10px;"></div>
        <div id="output2" style="margin-top: 10px;font-size:12px;width:600px"></div>
    </body>

    <script type="text/javascript">
        function onFailure(error) {
                var div = document.getElementById('output1');
                div.innerHTML = "ERROR: " + error.message;
        }
        function showUsersList(result) {
                var div = document.getElementById('output2');
                div.innerHTML = result;
        } 
        function onSuccess(result) {
                var div = document.getElementById('output1');
                div.innerHTML = 'Utente inserito con successo!<br />Guarda di seguito il JSON con la lista degli utenti inseriti nel database';
                google.script.run
                  .withFailureHandler(onFailure)
                  .withSuccessHandler(showUsersList)
                  .readFromFirebase();
        }
        function formSubmit() {
            google.script.run
                  .withFailureHandler(onFailure)
                  .withSuccessHandler(onSuccess)
                  .writeInFirebase(document.forms[0]);
        }
        google.script.run
              .withFailureHandler(onFailure)
              .withSuccessHandler(showUsersList)
              .readFromFirebase();
    </script>

</html>


Salta subito all'occhio l'utilizzo del metodo getDatabaseByUrl per connettersi, previa indicazione della secret key, al database indicato dall'URL passato al metodo stesso:

var base = FirebaseApp.getDatabaseByUrl(firebaseUrl, secret);

Tale riferimento al database servirà per poter dialogare con esso in scrittura e lettura.
Compilando i campi del form e confermandone l'invio (per maggiori informazioni sul recupero dei valori inseriti nei campi di un form rimando al tutorial "Recuperare i valori dei campi di input in un Form in Google Apps Script") viene popolato un oggetto JSON, chiamato nel caso specifico dataToImport, che sarà inviato a Firebase tramite il metodo setData al fine di essere inserito nel database:

dataToImport = { email:email, phone:phone, country:country }
base.setData('users/' + name+'-'+surname, dataToImport);

Il codice appena mostrato inserirà nel database un nodo, sotto l'albero 'users', il cui nome è costituito dal contenuto dei campi 'nome' e 'cognome' (separati da un trattino) del form. I figli di questo nodo corrispondono agli elementi dell'oggetto dataToImport che nel caso specifico sono rappresentati dalle altre informazioni richieste nel form ossia, paese, email e numero di telefono.

Provando ad inserire l'ipotetico utente 'Mario Rossi' e relative informazioni segute dall'inserimento dell'ipotetico utente 'Lugi Bianchi' e poi 'Giuseppe Verdi', anch'essi corredati del resto delle informazioni richieste, il risultato all'interno del database di Firebase (così come gestito dal codice dello script di esempio del presente tutorial) sarà il seguente (Fig. 5):



esempio di contenuto di un database di firebase

Fig. 5 - Esempio di contenuto di un database di Firebase


La funzione personalizzata di ritorno dopo l'inserimento dei dati nel database, chiamata nel caso specifico readFromFirebase, non fa altro che interrogare il database, tramite il suo riferimento, con il metodo getData per recuperare tutte le informazioni in esso presenti.
Il risultato, mostrato in un div del file index.html, è un JSON corrispondente a tutto il contenuto del nodo 'users' nel database di Firebase, Fig. 6:



esempio del risultato in JSON del contenuto di un database di Firebase

Fig. 6 - Esempio del risultato in JSON del contenuto di un database di Firebase


Utilizzando altri metodi disponibili è possibile effettuare altre operazioni sul database quali ad esempio, recuperare una singola informazione anziché tutto il db:

var country = base.getData("users/Mario-Rossi/country");

Oppure aggiornare i dati esistenti:

base.setData("users/Mario-Rossi/country", "England");

O anche, eseguire query ad hoc utilizzando una chiave secondaria arbitraria (per maggiori informazioni rimando alla documentazione ufficiale: Indexing Your Data).

Attenzione che, nel caso in cui la chiave utilizzata fosse già presente nel database (ad esempio: users/Mario-Rossi) e compilassimo il form con nuove informazioni per questo stesso utente, i nuovi dati andrebbero a sovrascrivere i precedenti.


Alcuni errori che possono comparire quando si tenta di scrivere dati in Firebase sono i seguenti:

ERROR: Error: Invalid data; couldn't parse key beginning at 1:2. Key value can't be empty or contain $ # [ ] / or .
Viene restituito quando la chiave del JSON contiene uno o più dei caratteri indicati ($ # [ ] / oppure .).

ERROR: Error: No data supplied.
Viene restituito quando si tenta di scrivere un dato nel db in un formato non corretto (nel caso di Firebase quando il formato non è un JSON).

 

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web