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 04
liste di dati e salvare con realm

React Native: liste di dati e salvare con Realm

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

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.

Development Category (English)728x90

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

React Native lista dati

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:

ios simulator hardware keyboard tastiera

Il risultato che otteniamo è il seguente su iOS:

React Native textInput

React Native salvare con Realm

Per quanto riguarda Android:

Android TextInput ReactNative

Android React Native Realm

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:

  • 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: cos’è Firebase e setup iniziale

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