In questo articolo ti voglio far vedere quanto è facile mostrare i dati salvati in un database Realm e quanto è facile anche aggiungere dei dati. Abbiamo visto cos’è Realm in questo articolo e nel caso in cui vuoi imparare a creare liste di dati e salvare con Realm ti ricordo che quanto stai leggendo è parte di una guida più ampia che ti insegna a creare la tua prima app con React Native (puoi partire da quì).

Vediamo insieme come mostrare i dati e come salvare con Realm.

Liste di Dati e Salvare con Realm

Per prima cosa se stai leggendo questo articolo senza seguire la guida completa ti consiglio di leggere l’articolo su Realm dove già ti faccio vedere come scrivere dati sul database Realm.

Ricapitolando abbiamo un’app che mostra un messaggio banale nella sua prima schermata che abbiamo chiamato Home e poi mostra la scritta “Informazioni.” nella schermata Infos. Abbiamo introdotto la navigazione tra più schermate in questo articolo e abbiamo creato un database Realm che contiene delle persone che devono essere univoche per cognome. Al momento andiamo a scrivere un log che possiamo vedere attivando il debug remoto su browser come spiegato in questo articolo.

Ora mostriamo i dati nella nostra app ed impariamo anche a salvarli.

Liste di Dati

Per creare una lista di persone non utilizzeremo qualcosa di già pronto. Online puoi trovare comunque liste che si ordinano, liste con stili particolari, liste con checkbox e tanto altro.

Per prima cosa posizionati all’interno della cartella Home e crea un file chiamato peopleList.js che avrà il compito di mostrare la lista di persone. Ecco il codice:

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

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

  getPeopleList(){
    var listView = (<View></View>);

    if(this.props.peopleList.length > 0){
      listView = this.props.peopleList.map(function(elem){
          return (
            <View key = {elem.id} style={{marginBottom:10, marginTop:10}}>
              <Text key = {elem.id} style={{fontSize:20, textAlign:'center'}}>
              {elem.name.replace("\\", "") + " " + elem.surname.replace("\\", "")}
              </Text>
            </View>
          );
        });
    }

    return listView;
  }

  render() {
    var peopleList = this.getPeopleList();

    return (
      <View style={{flex: 1, marginLeft: 10, marginRight: 10}}>
        {peopleList}
      </View>
    );
  }
}

In ordine stiamo:

Importando React, Component e tutto quello che ci serve
Dichiarando la nostra classe
Creando il costruttore
Definendo la funzione che ci sa ritornare la lista di elementi di People.
Ogni elemento è una View contenente del testo (Text). Il testo è dato da nome e cognome separati da uno spazio ai quali vengono rimpiazzati eventuali “\” con una stringa vuota. Come puoi vedere anche con React Native possiamo applicare gli stili in linea.
Infine creiamo il metodo render

Per ottenere il risultato nell’immagine quì sotto è necessario modificare anche il file home.js, ma facciamo un passo alla volta.

Deep Learning Specialization on Coursera

Salvare con Realm

Abbiamo visto come mostrare liste di dati ed ora vedremo come salvare con Realm. Quello che vogliamo fare è che l’utente possa scrivere in un input un nome e cognome e che venga quindi aggiunta una persona nella lista.

Crea sempre nella cartella home il file peopleInput.js:

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.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'}} 
                          placeholder='Aggiungi: Nome e Cognome' 
                          blurOnSubmit={false} 
                          value={this.state.person} 
                          onSubmitEditing={this.onKeyPress} 
                          onChange={this.onChange}>
	        </TextInput>
		);
	}
}

In ordine:

Importiamo il necessario.
Definiamo la classe PeopleInput.
Creiamo un costruttore che in questo caso ha uno state contenente “person”.
Person sarà una stringa del tipo Nome [spazio] Cognome.
Creiamo onChange che come sei già abituato riceve un “event”.
In questo caso troviamo il valore del TextInput entrando in event.nativeEvent.text ed andiamo ad impostare lo stato.
La funzione onKeyPress invece ci serve per controllare l’evento di “Invio”.
Se “person” nello state non è più undefined facciamo uno split della stringa per spazio. Se ci sono almeno 2 parti allora andiamo a creare un PeopleModel (il costruttore vuole nome e cognome), chiamiamo il metodo save di PeopleService che scrive sul nostro database Realm, impostiamo “person” in state al suo valore originale e quindi chiamiamo la funzione di update della list definita del componente padre (che sarà Home).
Infine facciamo il render del TextInput che ha un suo stile, un placeholder, il valore e la gestione dei vari eventi.

Quindi per vedere le liste di dati e salvare con Realm non ci resta che modificare il componente 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";

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

    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}/>
        <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,
  }
});

Ora il componente Home ha nello state la lista di persone che viene recuperata tramite il metodo findAll di PeopleService. Al posto delle istruzioni renderizziamo un titolo, “Lista Persone”, e poi i nuovi componenti. PeopleInput riceverà come props la funzione updateList che semplicemente rilegge dal database la lista di persone. PeopleList riceve la lista di persone.

Fai partire la tua app con “react-native run-ios” o “react-native run-android” con le modalità che abbiamo già affrontato negli articoli precedenti. E’ possibile che tu debba mappare la tastiera o fisica o virtuale per poter far leggere l’invio del TextInput. Nel simulatore iOS su Mac puoi fare:

Il risultato che otteniamo è il seguente su iOS:

Per quanto riguarda Android:

P.S. Nel caso in cui l’input sia troppo piccolo su Android prova a dargli una larghezza (proprietà width) nello stile. Magari prova con un valore pari a 200.

Precisazioni

Ovviamente sono consapevole del fatto che ci sono persone con cognomi separati da spazi, più cognomi, più nomi, ecc. Questo è solo un esempio, anzi ti dirò di più. Invece di leggere i dati ogni volta dal database potrebbe essere più conveniente aggiungerli nella lista che mostriamo senza fare troppe operazioni di lettura dal database.

In ogni caso hai imparato a gestire liste di dati e salvare con Realm, non male!

Questo esempio di applicazione, per quanto banale, ti sta insegnando le basi per imparare a creare un’app ben più corposa.

Conclusioni

Sono contento che hai imparato a gestire liste di dati e salvare con Realm. Nei prossimi articoli andremo avanti nel vedere cos’è Firebase così da poter mantenere una copia dei dati anche al di fuori della memoria dello smartphone. In questo modo l’utente non consuma troppa rete perché legge i dati sempre dal database dell’app ed allo stesso tempo un eventuale amministratore può vedere i dati di tutti gli utenti tramite una dashboard online. Non è detto che questo serva sempre o meno, ma è un buon motivo per farti vedere anche Firebase.

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