Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Gen 03

React Native: Cos’è Realm e setup iniziale

  • 03/01/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • app, app smartphone, react, react native

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.

Development Category (English)728x90

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.

Deep Learning Specialization on Coursera

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.

React Native Debug JS remotely

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:

lista di dati Realm

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:

Realm Studio 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!).

Prossimo articolo della guida: React Native: liste di dati e salvare con Realm

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • React Native: come salvare le foto su Firebase Storage10/01/2018
  • React Native: come modificare lo schema Realm10/01/2018
  • React Native: Come scattare foto con react-native-camera09/01/2018
  • React Native: Salvare i dati con Firebase08/01/2018

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...