React Native: app Android e iOS in JavaScript - Introduzione

React Native Logo
React Native è un framework sviluppato da Facebook per la creazione di applicazioni mobile tramite l'utilizzo del linguaggio JavaScript.

Consente di impacchettare le applicazioni per installarle sia su Android che su iOS, condividendo la stragrande maggioranza del codice tra le due versioni.

Una caratteristica importante di questo Framework è la capacità di mappare i componenti grafici javascript (bottoni, textbox, ecc..) con i componenti nativi del sistema operativo. In questo modo utilizzeremo javascript solo per la definizione dell'interfaccia grafica e per l'esecuzione della logica del programma, mentre lasceremo al sistema operativo il compito di gestire in modo ottimale e fluido la parte grafica. Il risultato è una web-application che ha una reattività comparabile con le applicazioni native. Questa caratteristica lo differenzia da tutti i framework di web-applications concorrenti, che fanno normalmente girare la parte grafica su una web-view, risulta in una esperienza lenta e "laggosa".

Questa guida vi aiuterà ad installare i componenti necessari ad iniziare lo sviluppo di applicazioni React Native su un sistema operativo basato su kernel linux (nello specifico: Ubuntu o derivate). Nel mio caso, sto usando la versione 18.3 della distribuzione Linux Mint, rilasciata recentemente.

Installazione

Per prima cosa è necessario installare Node.js e NPM (Node Package Manager). Questo perché React-Native si basa proprio su questa tecnologia. Il modo più semplice, se siamo su ubuntu o derivate, è eseguire i comandi:
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs npm

È necessario installare la versione 4 di npm e 7 di Node.js, poiché le versioni successive non sono ancora completamente compatibili con React Native.
Installiamo adesso una command-line utiliy di React Native che ci permette di creare un progetto vuoto oltre che di eseguire il server di debug e sviluppo:
sudo npm install -g create-react-native-app

NB: variante per sistema operativo non supportato

Se il vostro sistema operativo non è tra quelli indicati come compatibili all'interno del file setup_7.x, verrà visualizzato un messaggio di errore. È possibile tentare di ovviare al problema scaricando il file https://deb.nodesource.com/setup_7.x e inserendo manualmente la entry per il vostro sistema operativo. Nel mio caso, poiché sto lavorando sull'ultima versione di Linux Mint (rilasciata solo qualche giorno fa), ho dovuto aggiungere manualmente nel file la riga:
check_alt "Linux Mint" "sylvia" "Ubuntu" "xenial"
Ho cioè copiato la riga dalla versione 18.2 di Linux Mint (sonya) cambiando il codename in "sylvia".
Ovviamente questo non può dare una garanzia sul corretto funzionamento, ma nel caso specifico le differenze tra le due versioni sono minime essendo entrambe basate sulla medesima versione di Ubuntu.

Dopo questo fix dobbiamo aggiungere i permessi di esecuzione al file di setup scaricato, per poi eseguirlo. Supponendo di aver scaricato il file di setup nella cartella Downloads della home,basterà eseguire:
cd ~/Downloads
chmod +x setup_7.x
sudo ./setup_7.x

Creare una nuova App con React Native

Per prima cosa dobbiamo creare un nuovo progetto/applicazione eseguendo da terminale:
create-react-native-app NomeDelMioProgetto
Quest'ultimo comando andrà a creare una cartella in cui verranno inseriti tutti i file necessari di React Native oltre che i file sorgenti di una applicazionevuota. La prima volta che viene eseguito potrebbe essere installare automaticamente alcune dipendenze mancanti di npm. Una volta terminato il processo, potremo navigare all'interno della cartella e far partire il server di sviluppo:
cd NomeDelMioProgetto
npm start

L'ultimo comando potrebbe generare un errore, ma ci verranno fornite anche due possibili e semplici soluzioni, cioè installare il programma watchman, oppure eseguire i comandi:
sudo sysctl -w fs.inotify.max_user_instances=1024
sudo sysctl -w fs.inotify.max_user_watches=12288

per poi ri-eseguire npm start.

Vedremo comparire la schermata del server di sviluppo react-native, che si presenta come nell'immagine qua a fianco.

Questo server invia on-demand l'applicazione javascript ad un client android o iOS che si connette al server stesso. Il client dovrà poi essere in grado di eseguire l'applicazione javascript incapsulata. Per questo scopo esiste una applciazione sul Play Store Android e sull'Apple Store di iPhone per connettersi al server di sviluppo ed eseguire l'applicazione React Native: Expo (Play StoreApp Store).

Una volta installata l'applicazione sul proprio telefono sarà possibile scansionare il QR-Code apparso sul terminale per connettersi rapidamente al server di debug, ricevere e quindi eseguire direttamente sul telefono l'applicazione scritta con React-Native. Ovviamente dovrete essere connessi sulla stessa rete locale (a meno che il server di sviluppo non abbia un IP pubblico, ma è un caso abbastanza atipico).

Nel caso aveste ancora problemi, potrebbe essere il firewall del vostro sistema operativo che impedisce allo smartphone di conenttersi al server. In tal caso, dobbiamo creare una nuova regola sul firewall del computer per abilitare le connessioni di ingresso verso le porte 19000 e 19001. Se siete su Ubuntu o derivate, cercate firewall tra i programmi installati ed aggiungete una regola cliccando sul pulsante +. Qua di seguito possiamo vedere uno screenshot con i parametri usati per impostare il firewall. Ricordate che dovete inserire due regole: una per la porta 19000 e una per la porta 19001.

Aggiugnere porta

 

Hello World

A questo punto possiamo andare a modificare l'applicazione aprendo la cartella del nostro progetto:

Il file App.js è il punto di ingresso per la nostra app, possiamo modificarlo per cambiare il contenuto e la logica dell'app. Modifichiamo l'app a nostro piacimento, ad esempio inserendo un pulsante e richiamando una delle funzioni native del sistema operativo Android (il "Toast Message").

Salvate il file e in pochi secondi il server di sviluppo rileverà la modifica e la invierà al client sul telefono.
Ovviamente, poiché stiamo richiamando una funzione nativa di Android, questo codice potrebbe non funzionare su iOS. In fase di sviluppo di una vera e propria applicazione, dovremo effettuare dei controlli sul sistema operativo ed utilizzare i componenti giusti, oppure creare due versioni del software che differiscono solo in pochi punti, cioè dove decidiamo quali componentiusare.

Entriamo nei dettagli del codice:

  • Per ogni applicazione abbiamo un unico punto di ingresso: una classe con un nome qualsiasi (in questo caso MyAppEntryClass) definita in App.js, che devovrebbe estendere la classe React.Component. Dobbiamo segnalare che tale classe è il nostro entry point per il file App.js utilizzando la keywords export default.
  • In certi casi dovremo aggiungere in fondo ad App.js la stringa: AppRegistry.registerComponent('MyAppName', () =>MyAppEntryClass); per specificare la classe di ingresso.
  • Il metodo render della classe di ingresso restituisce un singolo componente o contenitore di componenti, lo usiamo quindi per definire quali componenti dovranno essere inseriti nell'applicazione (in questo caso una View che contiene una textbox e un bottone).

Props e State

Per ogni componente, ci sono due tipologie di dati che possiamo controllare: le proprietà (props) e lo stato (state).
La differenza fondamentale tra i due è che i props, al contrario degli state, sono immutabili: una volta assegnato, il valore non può essere modificato.

Facciamo un esempio di un componente personalizzato che utilizza state:

È da notare che i componenti di presentazione dovrebbero prendere tutti i parametri attraverso props e non utilizzare gli states. Infatti, solo i componenti contenitori dovrebbero avere uno stato.

Utilizzeremo quindi un contenitore che gestisce lo stato (attraverso state) e che passa le proprietà adeguate (props) ai componenti grafici, a seconda dello stato corrente. Introduciamo anche l'uso di due file separati: uno conterrà il componente grafico personalizzato, l'altro (il principale, che è anche il punto di ingresso della applicazione) conterrà solamente il contenitore.

NB: una sintassi del tutto equivalente del  per il VisualComponent utilizzando EcmaScript 6

Vediamo due screenshot del programma di esempio inesecuzione:

Layout e Stile

React Native utilizza un sottoinsieme del CSS standard per applicare lo stile ai componenti visivi (come possiamo notare dai precedenti esempi).

Posso creare uno style richiamando il metodo create della classe StyleSheet, il quale prende come argomento una sorta di foglio di stile CSS. Ad ogni componente posso associare uno stile assegnando alla proprietà style del componente stesso, uno degli id creati all'interno del CSS:

Per posizionare i componenti all'interno dello schermo viene utilizzato il FlexBox layout. A questo link possiamo trovare un buon riferimento. Da notare che, rispetto al CSS standard, i nomi delle proprietà contenenti più parole usano la notazione camel case invece di utilizzare il separatore - (ad esempio, margin-top di CSS standard diventa margnTop in React Native).

Cenni sui componenti aggiuntivi

Uno dei punti di forza di React (e quindi di React Native) è la facilità con cui è possibile creare, condividere ed integrare componenti aggiuntivi. Esiste una grande comunità online che sviluppa componenti open source che possono essere riutilizzati nei nostri progetti (ovviamente seguendo i criteri della eventuale licenza open source).
A questo link possiamo trovare una lista di componenti open source creati per React Native e presenti su github.
Un progetto molto famoso ed utile è React-Native-Material-Kit, che contiene un grande numero di componenti visuali con stile material design.

È da notare che esistono due categorie ben distinte di componenti aggiuntivi. Definiamo in forma del tutto non ufficiale alcuni termini, per pura comodità:

  • Componenti Nativi: mappano codice javascript in codice nativo per iOS o per Android (o ancora meglio, per entrambi).
  • Componenti Javascript: utilizzano solo codice javascript, non contengono codice nativo.

Diciamo inoltre che un componente è standard se è definito nella libreria originale di React Native, cioè se posso utilizzarlo senza installare componenti aggiuntivi.
Potremmo allora dividere i componenti Javascript in altre due categorie: Puri e Impuri.

  • Un componente Javascript è Impuro se dipende (direttamente o indirettamente) da un componente Nativo non standard (ovvero se, per poterlo utilizzare, è necessario installare un componento Nativo)
  • Un componente Javascript è Puro se non è Impuro (ovvero: se dipendere solo da altri componenti Javascript Puri o da componenti Nativi standard).

I componenti Javascript Puri sono sono più portabili: per poterli utilizzare è sufficiente installare il componente javascript nella cartella di progetto con il comando npm install [nome-componente], ed eventualmente gli altri componenti javascript dai quali dipendono.

Per utilizzare i componenti Nativi non standard, invece, sono necessarie alcune modifiche (più o meno invasive) al codice nativo. Sarà necessario utilizzare la react-native-cli invece di create-react-native-app, in modo che venga creata una app-contenitore nativa (Java per Android e Objective-C per iOS) che effettua l'embedding della nostra app Javascript. Dovremo quindi modificare il codice di questa app-contenitore. Spesso sarà molto facile effettuare queste modifiche per componenti reperibili sul web: basterà eseguire il comando react-native link, ed uno script farà per noi tutte le modifiche necessarie.

Conclusioni

In questo articolo abbiamo utilizzando la utility create-react-native-app e non la react-native-cli, motivo per il quale non possiamo con questa app di esempio usare componenti aggiuntivi se non quelli Javascript Puri. Non andiamo infatti a creare l'applicazione contenitore nativa che incapsula il nostro codice javascript, ma facciamo affidamento unicamente su Expo: un contenitore generico per applicazioni React Native. Su Expo possiamo però far girare solamente componenti nativi standard di React Native o componenti aggiuntivi Javascript Puri. Non abbiamo infatti accesso al codice nativo dell'app contenitore.

Anche utilizzando i soli componenti base di React Native ed i componenti Javascript Puri, siamo in grado di creare applicazioni molto interessanti. Andando poi ad utilizzare i Componenti Nativi aggiuntivi, non c'è limite a ciò che possiamo fare: possiamo mappare qualsiasi funzionalità nativa dei due OS in codice javascript da riutilizzare in qualsiasi web-application.

Questa guida vuole essere solo una breve introduzione a questo fantastico strumento. Non ci resta che augurarvi una fruttuosa ricerca di componenti che facciano al caso vostro, sperando che possiate in futuro crearene di nuovi ed interessanti da condividere con la comunità online. Noi ci rivediamo sempre qua con nuovi articoli su ReactNative! Come sempre per qualsiasi cosa, non esitate a scriverci nei commenti!

Happy Hacking!

Incontra il C a cavallo tra i 13 e 14 anni, si innamora della OOP a 16 e studia i design pattern a 20. A causa di una scelta di vita erronea, è attualmente costretto a programmare con linguaggi non tipizzati. È convinto di essere un PhD student in machine learning.

React Native: app Android e iOS in JavaScript - Introduzione ultima modifica: 2017-12-07T13:08:22+00:00 da Riccardo Del Chiaro


Advertisment ad adsense adlogger