Firebase - Guida rapida

Come da documentazione ufficiale di Firebase -

Firebase può alimentare il back-end della tua app, inclusi l'archiviazione dei dati, l'autenticazione dell'utente, l'hosting statico e altro ancora. Concentrati sulla creazione di esperienze utente straordinarie. Ci occuperemo del resto. Crea app per dispositivi mobili e web native multipiattaforma con i nostri SDK per Android, iOS e JavaScript. Puoi anche connettere Firebase al tuo backend esistente utilizzando le nostre librerie lato server o la nostra API REST.

Funzionalità Firebase

Real-time Database - Firebase supporta i dati JSON e tutti gli utenti ad esso collegati ricevono aggiornamenti in tempo reale dopo ogni modifica.
Authentication - Possiamo utilizzare autenticazioni sociali anonime, password o diverse.
Hosting - Le applicazioni possono essere distribuite tramite connessione protetta ai server Firebase.

Vantaggi di Firebase

È semplice e facile da usare. Non è necessaria una configurazione complicata.
I dati sono in tempo reale, il che significa che ogni modifica aggiornerà automaticamente i client connessi.
Firebase offre una semplice dashboard di controllo.
Ci sono una serie di servizi utili tra cui scegliere.

Limitazioni di Firebase

Il piano gratuito di Firebase è limitato a 50 connessioni e 100 MB di spazio di archiviazione.

Nel prossimo capitolo, discuteremo la configurazione dell'ambiente di Firebase.

In questo capitolo, ti mostreremo come aggiungere Firebase all'applicazione esistente. Avremo bisognoNodeJS. Controlla il collegamento dalla tabella seguente, se non lo hai già.

Sr.No.	Software e descrizione
1	NodeJS and NPM NodeJS è la piattaforma necessaria per lo sviluppo di Firebase. Controlla la nostra configurazione dell'ambiente NodeJS .

Passaggio 1: crea un account Firebase

Puoi creare un account Firebase qui .

Passaggio 2: crea l'app Firebase

Puoi creare una nuova app dalla pagina del dashboard. L'immagine seguente mostra l'app che abbiamo creato. Possiamo fare clic suManage App per accedere all'app.

Passaggio 3a: creare un'app HTML / js di base

Devi solo creare una cartella in cui verrà posizionata la tua app. All'interno di quella cartella, avremo bisogno diindex.html e index.jsFile. Aggiungeremo Firebase all'intestazione della nostra app.

index.html

<html>
   <head>
      <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
      <script type = "text/javascript" src = "index.js"></script>
   </head>
	
   <body>

   </body>
</html>

Passaggio 3b: utilizzare NPM o Bower

Se desideri utilizzare la tua app esistente, puoi utilizzare i pacchetti Firebase NPM o Bowers. Esegui uno dei seguenti comandi dalla cartella principale delle app.

npm install firebase --save

bower install firebase

I dati Firebase rappresentano oggetti JSON. Se apri la tua app dalla dashboard di Firebase, puoi aggiungere i dati manualmente facendo clic su+ cartello.

Creeremo una semplice struttura dati. Puoi controllare l'immagine qui sotto.

Nel capitolo precedente, abbiamo collegato Firebase alla nostra app. Ora possiamo accedere a Firebase sulla console.

console.log(firebase)

Possiamo creare un riferimento alla collezione del nostro giocatore.

var ref = firebase.database().ref('players');

console.log(ref);

Possiamo vedere il seguente risultato nella console.

Questo capitolo spiegherà la rappresentazione Firebase degli array. Useremo gli stessi dati del capitolo precedente.

Potremmo creare questi dati inviando il seguente albero JSON alla raccolta del giocatore.

['john', 'amanda']

Questo perché Firebase non supporta direttamente gli array, ma crea un elenco di oggetti con numeri interi come nomi di chiavi.

Il motivo per non utilizzare gli array è perché Firebase funge da database in tempo reale e se un paio di utenti dovessero manipolare gli array allo stesso tempo, il risultato potrebbe essere problematico poiché gli indici degli array cambiano costantemente.

Nel modo in cui Firebase lo gestisce, le chiavi (indici) rimarranno sempre le stesse. Potremmo cancellarejohn e amanda avrebbe ancora la chiave (indice) 1.

In questo capitolo, ti mostreremo come salvare i tuoi dati su Firebase.

Impostato

Il setil metodo scriverà o sostituirà i dati su un percorso specificato. Creiamo un riferimento alla collezione del giocatore e impostiamo due giocatori.

var playersRef = firebase.database().ref("players/");

playersRef.set ({
   John: {
      number: 1,
      age: 30
   },
	
   Amanda: {
      number: 2,
      age: 20
   }
});

Vedremo il seguente risultato.

Aggiornare

Possiamo aggiornare i dati di Firebase in modo simile. Nota come stiamo usando ilplayers/john sentiero.

var johnRef = firebase.database().ref("players/John");

johnRef.update ({
   "number": 10
});

Quando aggiorniamo la nostra app, possiamo vedere che i dati di Firebase si stanno aggiornando.

Nel nostro ultimo capitolo, ti abbiamo mostrato come scrivere dati in Firebase. A volte è necessario disporre di un identificatore univoco per i dati. Quando si desidera creare identificatori univoci per i dati, è necessario utilizzare il metodo push anziché il metodo set.

Il metodo push

Il push()il metodo creerà un ID univoco quando i dati vengono inviati. Se vogliamo creare i nostri giocatori dai capitoli precedenti con un ID univoco, potremmo usare lo snippet di codice fornito di seguito.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");
playersRef.push ({
   name: "John",
   number: 1,
   age: 30
});

playersRef.push ({
   name: "Amanda",
   number: 2,
   age: 20
});

Ora i nostri dati avranno un aspetto diverso. Il nome sarà solo una coppia nome / valore come il resto delle proprietà.

Il metodo chiave

Possiamo ottenere qualsiasi chiave da Firebase utilizzando il key()metodo. Ad esempio, se vogliamo ottenere il nome della nostra raccolta, potremmo usare il seguente frammento.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");

var playersKey = playersRef.key();
console.log(playersKey);

La console registrerà il nome della nostra raccolta (giocatori).

Maggiori informazioni su questo nei prossimi capitoli.

I dati transazionali vengono utilizzati quando è necessario restituire alcuni dati dal database, quindi eseguire alcuni calcoli e memorizzarli.

Supponiamo di avere un giocatore nella nostra lista giocatori.

Vogliamo recuperare la proprietà, aggiungere un anno di età e restituirla a Firebase.

Il amandaRefsta recuperando l'età dalla raccolta e quindi possiamo utilizzare il metodo di transazione. Otterremo l'età attuale, aggiungeremo un anno e aggiorneremo la collezione.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var amandaAgeRef = ref.child("players").child("-KGb1Ls-gEErWbAMMnZC").child('age');

amandaAgeRef.transaction(function(currentAge) {
   return currentAge + 1;
});

Se eseguiamo questo codice, possiamo vedere che il valore dell'età viene aggiornato a 21.

In questo capitolo, ti mostreremo come leggere i dati di Firebase. L'immagine seguente mostra i dati che vogliamo leggere.

Possiamo usare il file on()metodo per recuperare i dati. Questo metodo sta prendendo il tipo di evento come"value" e quindi recupera il file snapshotdei dati. Quando aggiungiamoval() allo snapshot, otterremo la rappresentazione JavaScript dei dati.

Esempio

Consideriamo il seguente esempio.

var ref = firebase.database().ref();

ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});

Se eseguiamo il codice seguente, la nostra console mostrerà i dati.

Nel prossimo capitolo, spiegheremo altri tipi di eventi che puoi usare per leggere i dati.

Firebase offre diversi tipi di eventi per la lettura dei dati. Alcuni di quelli più comunemente usati sono descritti di seguito.

valore

Il primo tipo di evento è value. Vi abbiamo mostrato come usare il valore nel nostro ultimo capitolo. Questo tipo di evento verrà attivato ogni volta che i dati cambiano e recupererà tutti i dati inclusi i bambini.

child_added

Questo tipo di evento verrà attivato una volta per ogni giocatore e ogni volta che un nuovo giocatore viene aggiunto ai nostri dati. È utile per leggere i dati dell'elenco perché otteniamo l'accesso del giocatore aggiunto e del giocatore precedente dall'elenco.

Esempio

Consideriamo il seguente esempio.

var playersRef = firebase.database().ref("players/");

playersRef.on("child_added", function(data, prevChildKey) {
   var newPlayer = data.val();
   console.log("name: " + newPlayer.name);
   console.log("age: " + newPlayer.age);
   console.log("number: " + newPlayer.number);
   console.log("Previous Player: " + prevChildKey);
});

Otterremo il seguente risultato.

Se aggiungiamo un nuovo giocatore chiamato Bob, otterremo i dati aggiornati.

child_changed

Questo tipo di evento viene attivato quando i dati vengono modificati.

Esempio

Consideriamo il seguente esempio.

var playersRef = firebase.database().ref("players/");

playersRef.on("child_changed", function(data) {
   var player = data.val();
   console.log("The updated player name is " + player.name);
});

Possiamo cambiare Bob per Maria in Firebase per ottenere l'aggiornamento.

child_removed

Se vogliamo avere accesso ai dati cancellati, possiamo usare child_removed Tipo di evento.

Esempio

var playersRef = firebase.database().ref("players/");

playersRef.on("child_removed", function(data) {
   var deletedPlayer = data.val();
   console.log(deletedPlayer.name + " has been deleted");
});

Ora possiamo eliminare Maria da Firebase per ricevere notifiche.

Questo capitolo ti mostrerà come scollegare i callback in Firebase.

Scollega richiamata per tipo di evento

Supponiamo di voler scollegare un callback per una funzione con value Tipo di evento.

Esempio

var playersRef = firebase.database().ref("players/");

ref.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

Dobbiamo usare off()metodo. Questo rimuoverà tutti i callback convalue Tipo di evento.

playersRef.off("value");

Scollega tutte le richiamate

Quando vogliamo scollegare tutti i callback, possiamo usare -

playersRef.off();

Firebase offre vari modi per ordinare i dati. In questo capitolo, mostreremo semplici esempi di query. Useremo gli stessi dati dei nostri capitoli precedenti.

Ordina per bambino

Per ordinare i dati in base al nome, possiamo utilizzare il seguente codice.

Esempio

Consideriamo il seguente esempio.

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").on("child_added", function(data) {
   console.log(data.val().name);
});

Vedremo i nomi in ordine alfabetico.

Ordina per chiave

Possiamo ordinare i dati per chiave in modo simile.

Esempio

Consideriamo il seguente esempio.

var playersRef = firebase.database().ref("players/");

playersRef.orderByKey().on("child_added", function(data) {
   console.log(data.key);
});

L'output sarà come mostrato di seguito.

Ordina per valore

Possiamo anche ordinare i dati in base al valore. Aggiungiamo la raccolta di valutazioni in Firebase.

Ora possiamo ordinare i dati in base al valore per ogni giocatore.

Esempio

Consideriamo il seguente esempio.

var ratingRef = firebase.database().ref("ratings/");

ratingRef.orderByValue().on("value", function(data) {
   
   data.forEach(function(data) {
      console.log("The " + data.key + " rating is " + data.val());
   });
   
});

L'output sarà come mostrato di seguito.

Firebase offre diversi modi per filtrare i dati.

Limita al primo e all'ultimo

Cerchiamo di capire qual è il limite del primo e dell'ultimo.

limitToFirst restituisce il numero di elementi specificato a partire dal primo.
limitToLast restituisce un numero specificato di elementi a partire dall'ultimo.

Il nostro esempio mostra come funziona. Poiché abbiamo solo due giocatori nel database, limiteremo le query a un giocatore.

Esempio

Consideriamo il seguente esempio.

var firstPlayerRef = firebase.database().ref("players/").limitToFirst(1);

var lastPlayerRef = firebase.database().ref('players/').limitToLast(1);

firstPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

lastPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

La nostra console registrerà il primo giocatore dalla prima query e l'ultimo giocatore dalla seconda query.

Altri filtri

Possiamo anche utilizzare altri metodi di filtraggio Firebase. IlstartAt(), endAt() e il equalTo()può essere combinato con i metodi di ordinazione. Nel nostro esempio, lo combineremo con il fileorderByChild() metodo.

Esempio

Consideriamo il seguente esempio.

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").startAt("Amanda").on("child_added", function(data) {
   console.log("Start at filter: " + data.val().name);
});

playersRef.orderByChild("name").endAt("Amanda").on("child_added", function(data) {
   console.log("End at filter: " + data.val().name);
});

playersRef.orderByChild("name").equalTo("John").on("child_added", function(data) {
   console.log("Equal to filter: " + data.val().name);
});

playersRef.orderByChild("age").startAt(20).on("child_added", function(data) {
   console.log("Age filter: " + data.val().name);
});

La prima query ordinerà gli elementi per nome e filtrerà dal giocatore con il nome Amanda. La console registrerà entrambi i giocatori. La seconda query registrerà "Amanda" poiché terminiamo la query con questo nome. Il terzo registrerà "John" poiché stiamo cercando un giocatore con quel nome.

Il quarto esempio mostra come possiamo combinare i filtri con il valore "età". Invece di string, stiamo passando il numero all'interno delstartAt() metodo poiché l'età è rappresentata da un valore numerico.

In questo capitolo, esamineremo le migliori pratiche di Firebase.

Evita di annidare i dati

Quando recuperi i dati da Firebase, otterrai tutti i nodi figlio. Questo è il motivo per cui la nidificazione profonda non è considerata la migliore pratica.

Denormalizza i dati

Quando hai bisogno di funzionalità di annidamento profondo, considera l'aggiunta di un paio di raccolte diverse; anche quando è necessario aggiungere una duplicazione di dati e utilizzare più di una richiesta per recuperare ciò di cui si ha bisogno.

In questo capitolo, ti mostreremo come utilizzare l'autenticazione Email / Password di Firebase.

Creare un utente

Per autenticare un utente, possiamo utilizzare il createUserWithEmailAndPassword(email, password) metodo.

Esempio

Consideriamo il seguente esempio.

var email = "[email protected]";
var password = "mypassword";

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

Possiamo controllare la dashboard di Firebase e vedere che l'utente è stato creato.

Registrati

Il processo di accesso è quasi lo stesso. Stiamo usando ilsignInWithEmailAndPassword(email, password) per accedere all'utente.

Esempio

Consideriamo il seguente esempio.

var email = "[email protected]";
var password = "mypassword";

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

Disconnessione

E finalmente possiamo disconnettere l'utente con il signOut() metodo.

Esempio

Consideriamo il seguente esempio.

firebase.auth().signOut().then(function() {
   console.log("Logged out!")
}, function(error) {
   console.log(error.code);
   console.log(error.message);
});

In questo capitolo, ti mostreremo come impostare l'autenticazione di Google in Firebase.

Passaggio 1: abilita l'autenticazione di Google

Apri la dashboard di Firebase e fai clic su Authnel menu a sinistra. Per aprire l'elenco dei metodi disponibili, è necessario fare clic suSIGN_IN_METHODS nel menu a schede.

Adesso puoi scegliere Google dalla lista, abilitalo e salvalo.

Passaggio 2: creare pulsanti

All'interno del nostro index.html, aggiungeremo due pulsanti.

index.html

<button onclick = "googleSignin()">Google Signin</button>
<button onclick = "googleSignout()">Google Signout</button>

Passaggio 3: accesso e esclusione

In questo passaggio, creeremo le funzioni Signin e Signout. Noi useremosignInWithPopup() e signOut() metodi.

Esempio

Consideriamo il seguente esempio.

var provider = new firebase.auth.GoogleAuthProvider();

function googleSignin() {
   firebase.auth()
   
   .signInWithPopup(provider).then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function googleSignout() {
   firebase.auth().signOut()
	
   .then(function() {
      console.log('Signout Succesfull')
   }, function(error) {
      console.log('Signout Failed')  
   });
}

Dopo aver aggiornato la pagina, possiamo fare clic sul file Google Signinpulsante per attivare il popup di Google. Se l'accesso ha esito positivo, la console per sviluppatori accederà al nostro utente.

Possiamo anche fare clic sul file Google Signoutpulsante per disconnettersi dall'app. La console confermerà che il logout è riuscito.

In questo capitolo, autenticheremo gli utenti con l'autenticazione Facebook di Firebase.

Passaggio 1: abilita l'autenticazione di Facebook

Dobbiamo aprire la dashboard di Firebase e fare clic Authnel menu laterale. Successivamente, dobbiamo scegliereSIGN-IN-METHODnella barra delle schede. Abiliteremo l'autenticazione di Facebook e lo lasceremo aperto poiché dobbiamo aggiungereApp ID e App Secret quando finiamo il passaggio 2.

Passaggio 2: crea l'app Facebook

Per abilitare l'autenticazione di Facebook, dobbiamo creare l'app Facebook. Fare clic su questo collegamento per iniziare. Una volta creata l'app, dobbiamo copiareApp ID e App Secret alla pagina Firebase, che abbiamo lasciato aperta nel passaggio 1. Dobbiamo anche copiare OAuth Redirect URIda questa finestra nell'app di Facebook. Potete trovare+ Add Product all'interno del menu laterale della dashboard dell'app Facebook.

Scegliere Facebook Logine apparirà nel menu laterale. Troverai il campo di immissioneValid OAuth redirect URIs dove devi copiare il file OAuth Redirect URI da Firebase.

Passaggio 3: connettersi a Facebook SDK

Copia il codice seguente all'inizio del file body tag in index.html. Assicurati di sostituire il file'APP_ID' all'ID della tua app dalla dashboard di Facebook.

Esempio

Consideriamo il seguente esempio.

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

Passaggio 4: creazione di pulsanti

Abbiamo impostato tutto nei primi tre passaggi, ora possiamo creare due pulsanti per il login e il logout.

index.html

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

Passaggio 5: creazione di funzioni di autenticazione

Questo è l'ultimo passaggio. Apertoindex.js e copia il codice seguente.

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

In questo capitolo spiegheremo come utilizzare l'autenticazione di Twitter.

Passaggio 1: crea l'app Twitter

Puoi creare un'app Twitter su questo link . Una volta creata la tua app, fai clic suKeys and Access Tokens dove puoi trovare API Key e API Secret. Ti servirà nel passaggio 2.

Passaggio 2: abilitare l'autenticazione di Twitter

Nel menu laterale della dashboard di Firebase, devi fare clic Auth. Quindi apriSIGN-IN-METHODtab. Fare clic su Twitter per abilitarlo. Devi aggiungereAPI Key e API Secret dal passaggio 1.

Quindi dovresti copiare il file callback URLe incollalo nella tua app Twitter. Puoi trovare l'URL di richiamata della tua app Twitter quando fai clic suSettings tab.

Passaggio 3: aggiungere pulsanti

In questo passaggio, aggiungeremo due pulsanti all'interno del file body tag di index.html.

index.html

<button onclick = "twitterSignin()">Twitter Signin</button>
<button onclick = "twitterSignout()">Twitter Signout</button>

Passaggio 4: funzioni di autenticazione

Ora possiamo creare funzioni per l'autenticazione di Twitter.

index.js

var provider = new firebase.auth.TwitterAuthProvider();

function twitterSignin() {
   firebase.auth().signInWithPopup(provider)
    
  .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code)
      console.log(error.message)
   });
}

function twitterSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed!')
   });
}

Quando avviamo la nostra app, possiamo sigin o terminare facendo clic sui due pulsanti. La console confermerà che l'autenticazione è riuscita.

In questo capitolo, ti mostreremo come autenticare gli utenti utilizzando l'API GitHub.

Passaggio 1: abilita l'autenticazione GitHub

Apri la dashboard di Firebase e fai clic su Auth dal menu laterale e poi SIGN-IN-METHODnella barra delle schede. È necessario abilitare l'autenticazione GitHub e copiare il fileCallback URL. Ti servirà nel passaggio 2. Puoi lasciare questa scheda aperta poiché dovrai aggiungereClient ID e Client Secret una volta terminato il passaggio 2.

Passaggio 2: crea l'app Github

Segui questo collegamento per creare l'app GitHub. Devi copiare il fileCallback URL da Firebase al file Authorization callback URLcampo. Una volta creata la tua app, devi copiare il fileClient Key e il Client Secret dall'app GitHub a Firebase.

Passaggio 3: creazione di pulsanti

Aggiungeremo due pulsanti nel file body etichetta.

index.html

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

Passaggio 4: creare funzioni di autenticazione

Creeremo funzioni per signin e signout all'interno del file index.js file.

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

Ora possiamo fare clic sui pulsanti per attivare l'autenticazione. La console mostrerà che l'autenticazione è riuscita.

In questo capitolo, autenticheremo gli utenti in modo anonimo.

Passaggio 1: abilita l'autenticazione anonima

Questo è lo stesso processo dei nostri capitoli precedenti. Devi aprire la dashboard di Firebase, fare clic suAuth dal menu laterale e SIGN-IN-METHODall'interno della barra delle schede. Devi abilitare l'autenticazione anonima.

Passaggio 2: funzione di accesso

Possiamo usare signInAnonymously() metodo per questa autenticazione.

Esempio

Consideriamo il seguente esempio.

firebase.auth().signInAnonymously()
.then(function() {
   console.log('Logged in as Anonymous!')
   
   }).catch(function(error) {
   var errorCode = error.code;
   var errorMessage = error.message;
   console.log(errorCode);
   console.log(errorMessage);
});

In questo capitolo, ti mostreremo come gestire lo stato di connessione di Firebase.

Verifica connessione

Possiamo verificare il valore della connessione utilizzando il codice seguente.

index.js

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
   if (snap.val() === true) {
      alert("connected");
   } else {
      alert("not connected");
   }
});

Quando eseguiamo l'app, il popup ci informerà sulla connessione.

Utilizzando la funzione sopra indicata, puoi tenere traccia dello stato della connessione e aggiornare la tua app di conseguenza.

La sicurezza in Firebase viene gestita impostando l'oggetto simile a JSON all'interno delle regole di sicurezza. Le regole di sicurezza possono essere trovate quando si fa clic suDatabase all'interno del menu laterale e poi RULES nella barra delle schede.

In questo capitolo, esamineremo un paio di semplici esempi per mostrarti come proteggere i dati di Firebase.

Leggere e scrivere

Il seguente snippet di codice definito all'interno delle regole di sicurezza di Firebase consentirà l'accesso in scrittura a /users/'$uid'/ per l'utente autenticato con lo stesso uid, ma tutti potrebbero leggerlo.

Esempio

Consideriamo il seguente esempio.

{
   "rules": {
      "users": {
         
         "$uid": {
            ".write": "$uid === auth.uid",
            ".read": true
         }
         
      }
   }
}

Convalidare

Possiamo applicare i dati alla stringa utilizzando il seguente esempio.

Esempio

{
   "rules": {
      
      "foo": {
         ".validate": "newData.isString()"
      }
      
   }
}

Questo capitolo ha solo afferrato la superficie delle regole di sicurezza di Firebase. L'importante è capire come funzionano queste regole, in modo da poterle combinare all'interno dell'app.

In questo capitolo, ti mostreremo come ospitare la tua app sul server Firebase.

Prima di iniziare, aggiungiamo solo del testo a index.htmltag del corpo. In questo esempio, aggiungeremo il testo seguente.

<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>

Passaggio 1: installa gli strumenti Firebase

Dobbiamo installare gli strumenti Firebase a livello globale nel command prompt finestra.

npm install -g firebase-tools

Passaggio 2: inizializza l'app Firebase

Per prima cosa dobbiamo accedere a Firebase nel file command prompt.

firebase login

Apri la cartella principale della tua app nel file command prompt ed esegui il seguente comando.

firebase init

Questo comando inizializzerà la tua app.

NOTE - Se hai utilizzato una configurazione predefinita, il file public verrà creata la cartella e il file index.htmlall'interno di questa cartella sarà il punto di partenza della tua app. Puoi copiare il file dell'app all'interno della cartella pubblica come soluzione alternativa.

Passaggio 3: distribuisci l'app Firebase

Questa è l'ultima fase di questo capitolo. Eseguire il comando seguente dal filecommand prompt per distribuire la tua app.

firebase deploy

Dopo questo passaggio, la console registrerà l'URL di Firebase delle tue app. Nel nostro caso, si chiamahttps://tutorialsfirebase.firebaseapp.com. Possiamo eseguire questo collegamento nel browser per vedere la nostra app.

↰ Previous page

Firebase - Guida rapida

Funzionalità Firebase

Vantaggi di Firebase

Limitazioni di Firebase

Passaggio 1: crea un account Firebase

Passaggio 2: crea l'app Firebase

Passaggio 3a: creare un'app HTML / js di base

index.html

Passaggio 3b: utilizzare NPM o Bower

Impostato

Aggiornare

Il metodo push

Il metodo chiave

Esempio

valore

child_added

Esempio

child_changed

Esempio

child_removed

Esempio

Scollega richiamata per tipo di evento

Esempio

Scollega tutte le richiamate

Ordina per bambino

Esempio

Ordina per chiave

Esempio

Ordina per valore

Esempio

Limita al primo e all'ultimo

Esempio

Altri filtri

Esempio

Evita di annidare i dati

Denormalizza i dati

Creare un utente

Esempio

Registrati

Esempio

Disconnessione

Esempio

Passaggio 1: abilita l'autenticazione di Google

Passaggio 2: creare pulsanti

index.html

Passaggio 3: accesso e esclusione

Esempio

Passaggio 1: abilita l'autenticazione di Facebook

Passaggio 2: crea l'app Facebook

Passaggio 3: connettersi a Facebook SDK

Esempio

Passaggio 4: creazione di pulsanti

index.html

Passaggio 5: creazione di funzioni di autenticazione

index.js

Passaggio 1: crea l'app Twitter

Passaggio 2: abilitare l'autenticazione di Twitter

Passaggio 3: aggiungere pulsanti

index.html

Passaggio 4: funzioni di autenticazione

index.js

Passaggio 1: abilita l'autenticazione GitHub

Passaggio 2: crea l'app Github

Passaggio 3: creazione di pulsanti

index.html

Passaggio 4: creare funzioni di autenticazione

index.js

Passaggio 1: abilita l'autenticazione anonima

Passaggio 2: funzione di accesso

Esempio

Verifica connessione

index.js

Leggere e scrivere

Esempio

Convalidare

Esempio

Passaggio 1: installa gli strumenti Firebase

Passaggio 2: inizializza l'app Firebase

Passaggio 3: distribuisci l'app Firebase

Tutorial Firebase