In questo articolo vedremo come salvare i dati con Firebase. Utilizziamo la libreria di Firebase installata tramite NPM quindi questo articolo può essere facilmente compreso da tutti anche se nel particolare lavoreremo su una applicazione React Native. Prima di partire con questo articolo dovresti capire cos’è Firebase e come fare il setup iniziale.

Sei interessato a React Native? Ti ricordo che questo articolo fa parte di una guida ben più grande che ti farà imparare React Native.

Salvare i dati con Firebase

In questo articolo dò per scontato che hai capito cos’è Firebase e che hai fatto il setup (è rapido e ti ho spiegato quì cosa devi fare).

Adesso entra all’interno della tua app e precisamente crea una cartella all’interno di “common” dal nome “firebase”. All’interno di questa nuova cartella crea il file firebase.js. Questo file conterrà il codice relativo alla comunicazione tra l’applicazione e Firebase e per questo esempio sarà oltre che molto semplice anche un po’ più disordinato, ma non ti preoccupare.

Apri il file firebase.js e scrivi questo codice al suo interno:

import * as firebase from 'firebase';

const firebaseConfig = {
  	apiKey: "***-***",
    authDomain: "paolo****.firebaseapp.com",
    databaseURL: "https://****.firebaseio.com",
    projectId: "paol****",
    storageBucket: "paol*****.appspot.com",
    messagingSenderId: "*****"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

export default class Firebase{

  constructor(){

    firebaseApp.auth().onAuthStateChanged(function(user) {
      if (user) {
        //Fai qualcosa..
      } else {
        this.auth();
      }
    }.bind(this));
  }

  auth(){
    firebase.auth().signInWithEmailAndPassword("pippo@pluto.com", "****").catch(function(error) {
      console.error("Errore durante l'autenticazione..", error.code, error.message);
    });
  }

  print(refValue){
    console.log("RefValue print: ", refValue);

    this.itemsRef = firebaseApp.database().ref(refValue);
    console.log("Ecco la reference: ", this.itemsRef);

    this.itemsRef.on('value', function(elem){
      console.log("elem: ", elem);

      elem.forEach(function(e){
        console.log("e.val() ", e.val());
        console.log("e.val().name ", e.val().name);
        console.log("e.key ", e.key);
      });
    });
  }

  save(refValue, newDataItem){
    console.log("RefValue save: ", refValue);

    firebaseApp.database().ref(refValue + newDataItem.id).set(newDataItem).then(function(result){
        console.log("Salvato con successo..!");
      }.bind(this), function(error){
        console.error("Errore durante il salvataggio..");
      }.bind(this));
  }
}

In ordine stiamo:

Importando Firebase
Creando la configurazione di Firebase
Inizializzando Firebase con la configurazione
Dichiarando la classe
Dichiarando il costruttore
Il costruttore al suo interno registra un observer che ascolta eventuali cambi dell’autenticazione (cambio password da un altro sistema, token scaduto e simili). Puoi leggere più nel dettaglio a questo indirizzo.
Se Firebase non ha un utente autenticato allora viene chiamato il metodo auth
Auth effettua l’accesso a Firebase con mail e password
Print sa come stampare nei log la lista di dati che ha salvato l’utente.
Recuperiamo una reference che ci interessa nel nostro database (utilizzeremo “/people” per recuperare le persone che inseriamo) e su questa reference andiamo ad attaccare un listener. Il contenuto del database verrà scritto nella console quando viene chiamata “print” per la prima volta e da lì in poi ogni volta che il database subirà una modifica (per esempio attaccheremo un listener su “/people” che andrà a scrivere i log quando apriamo l’app e quando aggiungiamo una persona).
Infine creiamo il metodo save che richiede sempre una reference ed il dato da inserire.
Sulla reference (la chiameremo con “people/” più il guid generato dal peopleModel) andiamo a chiamare il metodo set che si aspetta un oggetto e dunque scriviamo a console il risultato dell’interazione con Firebase.

Nota Bene: Ovviamente ci sono delle imprecisioni. Non vengono gestiti gli errori con messaggi opportuni per l’utente. Inoltre l’utente non viene re-indirizzato ad una pagina di login, ma l’observer prova sempre a ri-autenticarsi.

Inserisci i tuoi dati

Come vedi la configurazione e l’autenticazione sono coperte da asterischi.

Devi andare a sostituire la configurazione con quella della tua app prima di imparare a salvare i dati con Firebase. Quindi:

Deep Learning Specialization on Coursera

Entra nel tuo progetto Firebase
Clicca nella rotellina delle impostazioni
Seleziona “Impostazioni Progetto”

Ora puoi prendere la configurazione relativa alla tua app cliccando su “Aggiungi Firebase all’applicazione web”:

Nella modale che si apre copia il contenuto presente nella variabile config ed inseriscilo al posto delle proprietà che hai messo nel file firebase.js.

Crea un utente Firebase

Non manca molto per imparare a salvare dati con Firebase. Ora è necessario creare un utente con cui fare il login:

Clicca su “Authentication” nel menù laterale sinistro
Clicca su “Metodo di Accesso” nel tab in alto
Seleziona tra i provider di accesso “Email/password”
Nella modale che si apre clicca su “Abilita” e poi su “Salva”
Torna nel tab “Utenti” selezionando dal tab in alto (lo stesso che hai usato per entrare in “Metodo Di Accesso”)
Clicca su “Aggiungi Utente”
Inserisci email e password (possono essere anche farlocchi)

Questo sarà l’utente che devi andare ad inserire nel metodo di autenticazione del file firebase.js.

Mostriamo i dati nella console

Stai per imparare a salvare i dati con Firebase, prima però andiamo in ordine nella modifica dei file partendo dalla home.

Apri il file home.js e:

Importa Firebase da firebase.js
Crea un’istanza di Firebase nel costruttore
Sempre nel costruttore chiama il metodo “print”
Passa Firebase come prop di PeopleInput (ci servirà a breve)

Ecco il codice completo della home:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import PeopleList from "./peopleList";
import PeopleInput from "./peopleInput";

import PeopleService from "../../common/database/people/peopleService";
import Firebase from "../../common/firebase/firebase";

export default class Home extends Component<{}> {
  constructor(props){
    super(props);

    this.firebase = new Firebase();

    this.firebase.print("/people");

    this.state = {
      peopleList: PeopleService.findAll()
    }

    this.updateList = this.updateList.bind(this);
  }

  updateList(){
    this.setState({peopleList:PeopleService.findAll()});
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Lista Persone
        </Text>
        <PeopleInput updateList = {this.updateList} firebase = {this.firebase}/>
        <PeopleList peopleList = {Array.from(this.state.peopleList)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop:20
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

Dunque al momento il database è vuoto. Andiamo subito ad implementare l’aggiunta di elementi nel database di Firebase. Per salvare i dati con Firebase apri il file peopleInput.js e modificalo con questo codice:

import React, {
  Component
} from "react";

import PeopleModel from "../../common/database/people/peopleModel";
import PeopleService from "../../common/database/people/peopleService";

import {
  TextInput
} from "react-native";

export default class PeopleInput extends Component < {} > {
  constructor(props) {
    super(props);

    this.state = {
      person: undefined
    };

    this.onChange = this.onChange.bind(this);
    this.onKeyPress = this.onKeyPress.bind(this);
  }

  onChange(event) {
    var person = event.nativeEvent.text;

    this.setState({
      person: person
    });
  }

  onKeyPress(event) {
    if (this.state.person) {
      var splittedNameSurname = this.state.person.split(" ");

      if (splittedNameSurname.length > 1) {
        var personModel = new PeopleModel(splittedNameSurname[0], splittedNameSurname[1]);

        PeopleService.save(personModel);

        this.props.firebase.save("people/", personModel);

        this.setState({
          person: undefined
        });

        this.props.updateList();
      }
    }
  }

  render() {
    return ( 
      < TextInput style = { { height: 36, padding: 4, marginBottom: 0, fontSize: 16, borderWidth: 1, borderColor: '#eee', borderRadius: 8, backgroundColor: '#fff', width: 200 } } placeholder = 'Aggiungi: Nome e Cognome' blurOnSubmit = { false } value = { this.state.person } onSubmitEditing = { this.onKeyPress } onChange = { this.onChange } >
      < /TextInput>
    );
  }
}

L’unica riga che abbiamo aggiunto è all’interno di “onKeyPress” e chiama il metodo save di Firebase inviando come ref “people/” e come oggetto da salvare un PeopleModel.

Il Risultato

Ora fai partire la tua app ed entra in modalità debug per controllare che hai imparato a salvare i dati con Firebase.

Ogni volta che aggiungi qualche persona vedrai dei log di debug (ogni volta viene scritta tutta la lista di persone salvate ed il messaggio “Salvato con successo..!”):

Per vedere il risultato su Firebase puoi entrare in “Database”:

Infine puoi osservare i dati:

Conclusioni

Hai imparato a salvare i dati con Firebase ed anche a leggerli, non male! A perfezionare le cose, scrivere i test e gestire gli errori ci devi pensare tu se ti va 🙂 . Questa guida ti insegna rapidamente ad operare, ma spesso non bada troppo a gestire eccezioni, scrivere codice pulito ed alle buone prassi da seguire.

Su Udemy puoi trovare tanti corsi interessanti nei riguardi di React Native:

Non ti perdere quindi la guida salvandoti il link alla guida per imparare React Native.

Se sei interessato continua a seguirmi, magari iscriviti alla newsletter così da non dimenticarti di questa guida. Nel caso in cui ancora non ti senti pronto con React puoi sempre seguire questa guida e poi potrai imparare React Native.

Se vuoi rimanere aggiornato sul continuo di questa guida ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?

Per dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).