In questa guida ti spiego cos’è Realm e vediamo insieme come fare il setup all’interno di un’applicazione React Native. Niente di complicato, quindi siediti tranquillo e seguimi così da poter capire al meglio come funziona Realm e come integrarlo in una applicazione creata con React Native.
Se non hai idea di cosa sia React Native o vuoi imparare a creare la tua prima applicazione con React Native devi sapere che questo articolo fa parte di una guida ben più ampia che puoi trovare a questo indirizzo. Se invece sei interessato a ReactJS trovi una guida quì.
Cos’è Realm?
Realm, di cui puoi leggerne di più direttamente dal sito ufficiale a questo indirizzo, si auto-definisce come una piattaforma mobile di nuova generazione e serve per avere un livello dell’architettura della tua app in grado di comunicare facilmente con un database.
Realm ha infatti il suo punto di forza nella Realm Platform che è a sua volta costituita dal Realm Database e dal Realm Object Server.
Vediamo come funziona nel caso di React Native senza dilungarci troppo su altro.
Realm non è un ORM, né utilizza SQLite. E’ stato costruito un vero e proprio database che nel caso di Realm per React Native può essere interpellato utilizzando oggetti JavaScript che sono mappati con un “database engine”. Ciò vuol dire che non si tratta solo di oggetti chiave / valore, bensì di oggetti parlanti. Questo comporta che è possibile usare delle API ed allo stesso tempo mantenere delle ottime performance.
Detto proprio in sintesi? Utilizzeremo un database molto veloce e delle API facili da imparare, il tutto scrivendo JavaScript!
Che vantaggio!
Hai capito cos’è Realm, ma per capirlo ancora più a fondo vediamo i vantaggi!
- Per prima cosa viene dichiarato che tutte le app che hanno abbandonato SQLite per passare a Realm sono diventate più rapide.
- C’è una grande community a darti supporto.
- Le aziende che lo adottano sono del calibro di: Google, Amazon, Adidas, BBC, IBM e tante altre di cui puoi leggere sul sito ufficiale di Realm.
- Scrivi il codice una volta in JavaScript ed il tuo database funziona sia su iOS che su Android (per essere precisi funziona ovunque!).
- Non sei obbligato a creare strati immensi della tua applicazione dedicati al database ed alle API perché Realm ha già le API integrate.
- Puoi scrivere query di ogni tipo e creare lo schema del tuo database rapidamente.
- Realm per React Native è costruito sopra Realm Java, Objective-C e Swift.
Guarda nel dettaglio quanto è semplice usarlo dando un’occhiata direttamente sul Realm Blog.
Setup
Se hai capito cos’è Realm e quanto è conveniente utilizzarlo allora iniziamo a fare il setup all’interno dell’app creata con React Native.
Per prima cosa posizionati con il terminale nella root della tua app, per chi segue la guida è “paoloApp”. Dunque digita:
npm install --save realm
A questo punto è necessario effettuare il link di Realm:
react-native link
Tramite quest’ultimo comando stai chiedendo a React Native di integrare la libreria di terze parti all’interno del progetto iOS e del progetto Android relativo alla tua app.
I File
Hai capito cos’è Realm, lo hai installato ed è quindi una dipendenza del tuo progetto, infine hai dichiarato che è una libreria di terze parti che deve essere integrata da iOS e Android.
Ora vediamo un po’ come funziona. All’interno della cartella “src” crea la cartella “common” ed al suo interno la cartella “database”. Questa cartella conterrà per primo il file database.js:
import Realm from 'realm';
let repository = new Realm({
schema: [
{
name: 'People',
primaryKey: 'id',
properties: {
id: {type: 'string', indexed: true},
name: 'string',
surname: 'string'
}
}
]
});
let Database = {
getRepository: function(){
console.log("db path: ", repository.path);
return repository;
}
};
module.exports = Database;
In ordine stiamo:
- Importando Realm
- Creando il repository Realm al quale passiamo un oggetto contenente la proprietà “schema”
- La proprietà schema è un array di oggetti che rappresentano le entità del nostro database.
In questo caso abbiamo solo “People” che ha le proprietà id, name e surname e la chiave primaria sull’id. - Infine il nostro Database avrà la funzione getRepository che sarà in grado di darci il repository Realm
Dunque quello che dobbiamo fare è creare un aiutante del database. Per esempio creiamo sempre nella stessa cartella il file databaseHelper.js:
let DatabaseHelper = {
guid: function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
};
module.exports = DatabaseHelper;
Il nostro aiutante sa generarci un guid al momento. Questo è necessario perché ancora non c’è una funzionalità in Realm per React Native che ci aiuta a generare gli id automaticamente.
A questo punto abbiamo la necessità di creare un modello della nostra entità “People”. Creiamo quindi la cartella “people” dentro alla cartella “database” dove ci troviamo e quindi creiamo il file peopleModel.js:
import DatabaseHelper from '../databaseHelper';
class PeopleModel {
constructor(name, surname) {
this.id = DatabaseHelper.guid();
this.name = name;
this.surname = surname;
}
}
module.exports = PeopleModel;
Semplicemente:
- Importiamo il DatabaseHelper appena creato
- Creiamo la classe PeopleModel che ha un costruttore in grado di prendere le proprietà name e surname.
Al suo interno l’id viene impostato aiutandoci con la funzionalità “guid” del DatabaseHelper.
Per concludere ci è necessario avere un servizio che verrà utilizzato da tutto il resto della app. Creiamo quindi, sempre nella cartella “people”, il file peopleService.js:
import Database from './../database';
import PeopleModel from './peopleModel';
let repository = Database.getRepository();
let PeopleService = {
findAll: function(sortBy) {
if (!sortBy) sortBy = [['name', false], ['surname', true]];
return repository.objects('People').sorted(sortBy);
},
save: function(person) {
if (repository.objects('People').filtered("surname = '" + person.surname + "'").length) return;
repository.write(() => {
repository.create('People', person);
})
},
update: function(callback) {
if (!callback) return;
repository.write(() => {
callback();
});
}
};
PeopleService.save(new PeopleModel("Paolo", "Dell\\'Aguzzo"));
module.exports = PeopleService;
In ordine:
- Importiamo il Database ed il PeopleModel
- Recuperiamo il repository dal Database
- Creiamo PeopleService come un oggetto che contiene le funzioni di ricerca, salvataggio e modifica.
FindAll può ricevere un ordinamento e di default ordina per cognome. Ci ritorna il risultato della chiamata al repository con il metodo Objects, che prende in ingresso il nome dell’entità, il quale viene a sua volta ordinato.
Save riceve una persona, o per essere precisi un’istanza di PeopleModel. Sempre con Objects recuperiamo l’entità “People” e la filtriamo (questa è una query!) cercando qualcuno con lo stesso cognome (è un esempio a caso. Diremo che non si possono avere 2 persone con lo stesso cognome). Se troviamo già qualcuno con lo stesso cognome non lo inseriamo. Altrimenti chiamiamo il metodo write del repository il quale va ad aggiungere una nuova persona a People.
Update riceve una callback, ovvero una funzione. Chiama sempre al suo interno il metodo write del repository, ma al contrario di save vogliamo che sia il chiamante a definire cosa deve accadere (per esempio passo una funzione che fa people.name = this.state.nomeInseritoDaUtente). - Per concludere chiamo subito save di PeopleService andando ad inserire Paolo Dell’Aguzzo come primo elemento di People (ovviamente è solo a scopo dimostrativo)
Il funzionamento
Pian piano stai capendo cos’è Realm, ma come tutte le cose di questa vita è quando vedi che funzionano che ti sale un grande entusiasmo.
Allora apri il file home.js che abbiamo creato negli articoli precedenti ed importa il PeopleService. Dunque nel costruttore scrivi a console il risultato della chiamata a findAll. Ecco il codice:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import PeopleService from "../../common/database/people/peopleService";
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class Home extends Component<{}> {
constructor(props){
super(props);
let peopleList = PeopleService.findAll();
console.log("Lista persone:", Array.from(peopleList));
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native da Paolo!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Per vedere i log dell’applicazione devi per prima cosa far partire l’app o con simulatore iOS o con emulatore Android come già abbiamo visto. Devi entrare nel dev menù dell’app e dunque selezionare la voce “Debug JS Remotely”. Se stai usando Android su Mac puoi premere CMD + M per aprire il menù, altrimenti su Windows CTRL + M.
A questo punto si dovrebbe aprire una finestra del tuo browser. Se hai Google Chrome viene scelto automaticamente. Nella finestra che si apre puoi aprire la console tramite tasto destro > ispeziona e visualizzare la nostra lista di persone recuperata dal database dell’app:
Vuoi vedere il database?
Scarica Realm Studio da questo indirizzo.
Seleziona “Open a Local Realm” e dunque seleziona il percorso che è stato stampato in console come “db path”. Con il simulatore iOS su Mac il percorso che mi viene stampato è molto più chiaro e facile da trovare, mentre con Android probabilmente ti conviene usare ADB e cambiare cartella. Quindi una volta trovato il file “default.realm” vedrai in Realm Studio il tuo database:
Conclusioni
Bene! Hai imparato cos’è Realm e sai anche un po’ utilizzarlo ormai! Prossimamente vedremo come creare una bella lista di persone da mostrare e poi procederemo con Firebase. Sono sicuro che ti sta piacendo imparare a creare app, quindi non smettere di seguire la guida!
Su Udemy puoi trovare tanti corsi interessanti nei riguardi di React Native:
- The Complete React Native and Redux Course
- React Native: Advanced Concepts
- Create your first React Native App
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!).
