Sviluppare App Mobile con Django Rest Framework e React Native

In passato, quando i browser avevano molte meno funzionalità di oggi e le prestazioni di JavaScript erano scarse, ogni comunicazione tra server e client avveniva trasferendo l’intera pagina ad ogni richiesta del client e la business logic delle applicazioni risiedeva esclusivamente lato server.

Con l’aumentare delle funzionalità del browser e delle prestazioni di javascript sono stati realizzati framework javascript più moderni e l’approccio alla realizzazione di frontend e backend è cambiato di conseguenza, semplificando il lavoro degli sviluppatori grazie alla maggiore scalabilità.

Le applicazioni più moderne vengono infatti realizzate come Single Page Application attraverso l’utilizzo dei nuovi framework, approcciando diversamente la comunicazione tra client e server. Le risorse statiche (HTML, CSS, JavaScript) vengono caricate una sola volta all’avvio dell’applicazione e le successive comunicazioni tra client e server trasferiscono solo piccole quantità di dati (generalmente in formato JSON) necessarie ad aggiornare la pagina piuttosto che a ricaricarla completamente.

L’introduzione di soluzioni come React ed Angular hanno apportato cambiamenti significativi nella costruzione di applicazioni web. Il processo di interazione utente-server si è evoluto e la business logic si è spostata in parte verso il frontend.

Efficienza della combinazione React + Django (Python)

Una delle combinazioni più utilizzate per la realizzazione di moderne applicazioni web è sicuramente quella tra Python assieme al più popolare framework Django per la parte di backend e React per il frontend.

Le motivazioni che spingono molti utenti verso questa soluzione sono molteplici, sia lato backend che lato frontend:

• alta popolarità e rapida curva di apprendimento sia di Python che di Django, vasta comunità e buon set di strumenti integrati come ORM o facilmente integrabili come ad esempio Django Rest Framework per la costruzione di Web APIs
• alta velocità di rendering di React, rapida curva di apprendimento e facile integrazione con Django

Backend – Django e Django Rest Framework

Prima di partire con la realizzazione del backend e dell’installazione di Django abbiamo bisogno di avere python e pip3 installati sulla nostra macchina.

Per creare il nostro progetto andremo a creare un virtual environment. Per fare ciò abbiamo bisogno del tool virtualenv per la creazione di environment di Python. Il tool è installabile attraverso il seguente comando: 

$ pip install virtualenv

$ virtualenv env

$ source/bin/activate

$ pip3 install django djangorestframework django-filter django-cors-headers

$ pip3 freeze > requirements.txt

Progetto Django

Un progetto Django è una collezione di app dove ciascuna di esse è una componente del progetto con uno scopo specifico. Con la creazione del progetto, Django crea anche una app con lo stesso nome.

Procediamo quindi alla creazione del nostro progetto attraverso il seguente comando:

$ django-admin startproject backend

Esplorando la cartella backend creata dal precedente comando ci accorgiamo del fatto che Django abbia creato un’app backend con lo stesso nome del progetto.

Insieme all’app, il progetto contiene anche il file manage.py che è una utility da linea di comando attraverso cui poter interagire con l'intero progetto.

Avviamo a questo punto il server di sviluppo di Django per verificare che il nostro progetto funzioni correttamente attraverso il seguente comando:

$ python manage.py runserver

L’output sarà simile al seguente:

Apriamo il browser all’indirizzo http://127.0.0.1:8000/ indicato nell’output e verifichiamo che la pagina visualizzata sia simile alla seguente:

Django e le migrazioni

I più attenti avranno notato che l’esecuzione del server di sviluppo di Django ha mostrato un warning nell’output stesso riguardante le migrazioni presenti ma non ancora applicate. Cosa sono le migrazioni? Come possiamo risolvere il problema?

Django, come detto in precedenza, ha al suo interno un set di strumenti utili tra i quali un proprio ORM (Object-relational mapping) che ci permette di interagire con i vari DBMS senza dover scrivere comandi SQL. Quando creiamo un nuovo progetto Django crea automaticamente un database SQLite (il DBMS è modificabile attraverso la configurazione del progetto) e tutte le istruzioni che servono alla creazione, modifica, eliminazione di tabelle e di record all’interno delle tabelle vengono definiti come oggetti all’interno delle migrazioni del progetto. Le classi che rappresentano le tabelle del database sono chiamate models.

Quando creiamo o modifichiamo un model dobbiamo quindi creare i comandi SQL da eseguire per applicare le modifiche sul DB. Questo processo viene chiamato migration.

Una migration è quindi un processo a 2 step:

• creazione della migration
• applicazione della migration

Il primo step può essere effettuato attraverso il seguente comando:

$ python manage.py makemigrations

mentre il secondo può essere effettuato attraverso il seguente comando:

$ python manage.py migrate

La creazione del progetto Django porta con sé la creazione di vari models e delle relative migrations. Tuttavia, queste migrations non vengono applicate automaticamente da Django e per questo motivo viene visualizzato il warning quando viene avviato il server. Procediamo quindi con l’applicazione delle migrations fermando il server attraverso il comando Ctrl + C ed eseguendo il comando $ python manage.py migrate.

Rilanciando nuovamente il server attraverso il comando $ python manage.py runserver vedremo che i warning relativi alle migration non saranno più visualizzati.

Applicazione Django

Possiamo a questo punto creare la nostra app Django eseguendo i seguenti comandi:

$ cd backend

$ django-admin startapp api

Affinché la nostra applicazione possa essere utilizzata all’interno del nostro progetto dobbiamo aggiungerla al file delle impostazioni dell’app generata automaticamente da Django nel momento in cui è stato creato il progetto. Apriamo quindi il file setting.py presente nell’app backend ed aggiungiamo la nostra app tra le app installate come nell’immagine seguente:

Esplorando la cartella dell’app api creata possiamo notare che sono presenti diversi file oltre alla cartella migrations (di cui abbiamo parlato nel precedente paragrafo). I file ai quali dovremo fare particolare attenzione per questo tutorial sono 2:

• models.py – contenitore dei models della nostra applicazione
• views.py – contenitore delle funzioni che verranno eseguite nel momento in cui verranno effettuate delle richieste agli endpoint definiti nel file urls.py dell’app backend
• admin.py – file per la gestione della sezione di amministrazione del sito

Apriamo quindi il nostro file models.py ed andiamo a creare due models:

• Movie per la gestione dei film
• Rating per la gestione delle valutazioni dei film da parte degli utenti che hanno accesso alle api

Procediamo quindi alla creazione delle migrations attraverso il comando $ python manage.py makemigrations

ed all’applicazione delle migrations create tramite il comando $ python manage.py migrate

Django Admin Site

Una delle parti più potenti ed utili di Django è l’interfaccia di amministrazione automatica. Questa parte è stata concepita per permettere la gestione interna da parte dell’amministratore dell’applicazione. Il suo funzionamento è tanto semplice quanto potente: legge i metadati dai modelli e fornisce un’interfaccia per la gestione dei contenuti del sito. Questa interfaccia è raggiungibile aggiungendo il path /admin all’url visualizzato in fase di avvio del server e quindi nel nostro caso l’url completo per aprire la sezione di admin del sito sarà http://127.0.0.1:8000/admin e la pagina visualizzata sarà simile alla seguente:

Per poter accedere avremo però bisogno di una username ed una password che possono essere generati sempre attraverso un comando django. Nello specifico il comando da eseguire sarà il seguente:

$ python manage.py createsuperuser

Inseriamo come username admin e come password admin lasciando vuoto l’indirizzo email e digitando y alla richiesta di bypassare la validazione della password (operazioni sconsigliate per un’applicazione in ambiente di produzione ma comode per questo tutorial).

A questo punto è possibile effettuare il login alla sezione di admin di Django con username e password inseriti:

Come facciamo però ad inserire i Movie ed i Rating definiti precedentemente nei models?

Per fare ciò è necessario aggiungere al file admin.py i modelli che vogliamo gestire attraverso la sezione di amministrazione, come segue:

Ricaricando la pagina di admin noteremo che sarà presente una nuova sezione relativa alla nostra app api con la possibilità di andare a gestire i Movie e Rating definiti all’interno dei nostri models.

Inseriamo pure qualche Movie e qualche Rating che ci tornerà utile per il test delle API che andremo a realizzare successivamente.

Django Rest Framework - Introduzione

Il framework REST di Django è un toolkit potente e flessibile per la creazione di API Web.
Le principali caratteristiche di Django Rest Framework sono:

• Serializzazione con supporto sia ai dati ORM che ai dati non-ORM
• API navigabili da interfaccia web
• Molti criteri di autenticazione tra i quali OAuth1 e OAuth2
• Alta possibilità di personalizzazione
• Ampia documentazione ed ottimo supporto della comunità

Dopo aver installato il framework insieme a Django è necessario aggiungerlo alle app installate così come abbiamo fatto per la nostra app api nel file settings.py all’interno della directory dell’app backend. Oltre all’app api aggiungiamo alle INSTALLED_APPS anche l’app corsheaders che ci servirà per poter richiamare le api dal frontend. Il nuovo contenuto della sezione INSTALLED_APPS sarà quindi il seguente:

Completiamo la configurazione dell’app corsheaders aggiungendo il middleware corsheaders.middleware.CorsMiddleware insieme alla CORS_ALLOWED_ORIGINS contenente tutti i domini che possono accedere alle nostre api che nel nostro caso sarà http://localhost:3000.

Django Rest Framework – Serializers

La prima cosa di cui abbiamo bisogno per lo sviluppo delle nostre API è fornire un modo per serializzare e deserializzare la risposta in formato json. Django Rest Framework ci permette di ottenere questo risultato attraverso l’uso dei serializzatori. Per fare ciò iniziamo creando un file serializers.py nella directory api con il seguente contenuto:

Per poter utilizzare i serializers precedentemente creati andiamo a creare una view per ciascun serializer. Aggiungiamo quindi il seguente codice al file views.py:

Per completare il lavoro dobbiamo definire le url per esporre le nostre API all’interno del file urls.py. Creiamo quindi il file all’interno dell’app api con il seguente contenuto

e includiamo le url relative alle nostre API nel file urls.py dell’app backend del nostro progetto come segue:

Django Rest Framework – Navigazione web delle API

Una delle principali caratteristiche di Django Rest Framework riguarda la possibilità di navigazione su web delle API gestite all’interno del progetto. Per fare ciò colleghiamoci quindi alla url definita nel progetto http://127.0.0.1:8000/api/ ed otterremo una pagina simile alla seguente:

In questa pagina possiamo verificare che le nostre due API definite in precedenza e relative a movies e rating siano presenti. E’ possibile inoltre cliccare sui link di ciascuna API per entrare nel dettaglio ed eseguire operazioni come GET e POST sulla singola API.

Django Rest Framework – Autenticazione

Django Rest Framework fornisce una serie di schemi di autenticazione pronti all’uso ma consente anche l’implementazione di schemi di autenticazione personalizzati.

Uno degli schemi messi a disposizione è il TokenAuthentication e utilizza un semplice schema di autenticazione HTTP basato su token. Questo tipo di autenticazione è appropriato per configurazioni client-server.

Per configurare questo tipo di autenticazione è necessario aggiungere rest_framework.authtoken alla lista delle INSTALLED_APPS ed eseguire il comando $ python manage.py migrate per applicare le migrations previste per questo tipo di autenticazione.

La configurazione di questo tipo di autenticazione ci mette a disposizione, nella sezione di admin, una nuova sezione per la generazione e la visualizzazione dei token associati a ciascun utente.

Aggiungiamo nel file urls.py l’endpoint per eseguire l’autenticazione ed ottenere il token associato al proprio utente. Questa url dovrà essere richiamata in post con i parametri username e password valorizzati e restituirà il token di autenticazione da utilizzare per le successive chiamate alle API. Il token dovrà essere passato negli headers delle richieste come Authorization: Token [token].

L’ultimo step che rimane da fare per completare la configurazione dell’autenticazione è l’aggiunta al file settings.py della politica di autorizzazione per consentire l’accesso ai soli utenti autenticati:

In questo modo è possibile restringere l’accesso alle API impostando nelle rispettive view la direttiva authentication_classes = (TokenAuthentication,). Così facendo solo le richieste che hanno l’header Authorization: Token [token] avranno accesso alle API mentre le altre richieste riceveranno una risposta di tipo HTTP 401 – Unauthorized.

Django Rest Framework – Personalizzazione

La possibilità di personalizzazione delle API è un’altra caratteristica molto utile di Django Rest Framework.

Con quanto fatto fino ad ora, infatti, abbiamo due API per la visualizzazione, modifica, inserimento ed eliminazione dei movie e dei rating come entità separate una dall’altra.

Nel nostro caso possiamo quindi personalizzare la nostra API dei movie aggiungendo ad esempio il numero dei rating e la media dei rating per ciascun movie. Per ottenere queste due nuove informazioni dobbiamo definire due nuove funzioni nel modello Movie che restituiscano rispettivamente il numero e la media dei rating del movie. Il modello Movie risulterà quindi come nell’immagine seguente:

Successivamente è necessario indicare al serializer dei movie di restituire nella risposta i due nuovi fields corrispondenti alle funzioni definite nel model. Il serializer MovieSerializer sarà quindi come nell’immagine seguente:

Completiamo il lavoro di personalizzazione delle nostre API consentendo l’aggiunta di un rating ad uno specifico movie e bloccando l’inserimento e la modifica di un rating attraverso la specifica API. Per ottenere queste funzionalità è necessario modificare il file views.py come nell’immagine seguente:

Frontend – React

React è un framework JavaScript per la realizzazione di interfacce utente ed è stato sviluppato da Facebook.

Al momento React è anche il framework più popolari ed utilizzati: React, oltre alla grande popolarità ed al continuo supporto ha il vantaggio di integrarsi alla perfezione con Django Rest Framework soprattutto per la realizzazione delle più moderne Single Page Application.

Prima di partire con la realizzazione del frontend e dell’installazione di React dobbiamo avere installati nella nostra macchina Node.js (runtime di javascript open source e multipiattaforma) e npm (Node Package Manager).

App React

Esistono diverse modalità di creazione di un’app React e la migliore per la creazione di una Single Page Application è sicuramente quella che viene eseguita attraverso il comando $ npx create-react-app [nome-app].

Eseguiamo quindi il comando $ npx create-react-app frontend nella directory in cui vogliamo creare la nostra app. In questo modo npm provvederà a creare la directory frontend ed a scaricare tutte le dipendenze necessarie alla nostra app.

Al termine della creazione verrà visualizzato nell’output del comando un messaggio di avvenuta creazione oltre ad un elenco di comandi che possono essere eseguiti per interagire con l’app appena creata:

Procediamo quindi con l’avvio del server di sviluppo come suggerito nell’output, entrando nella cartella dell’app e lanciando il comando $ npm start.

Se tutto ha funzionato correttamente il comando appena lanciato, oltre ad avviare il server di sviluppo, aprirà il browser all’indirizzo http://localhost:3000 visualizzando la pagina seguente:

La cartella frontend creata dal comando di creazione del progetto React contiene diverse cartelle:

• node_modules – contiene tutte le librerie utilizzate da React
• public – cartella contenente file HTML
• src – cartella contenente i sorgenti dell’app

e diversi file:

• package.json – contiene le informazioni dell’app e tutte le librerie necessarie al funzionamento della stessa
• package-lock.json – file generato automaticamente da npm per ogni operazione in cui npm modifica la cartella node_modules o il file package.json. Descrive quindi l’albero esatto delle dipendenze in modo da poter essere rigenerato in maniera identica nelle installazioni successive o su macchine diverse
• Readme.md – utile alla definizione delle istruzioni per la configurazione, guida all’installazione, file contenuti ecc. ecc.
• .gitignore – contiene i file e le directory che Git deve ignorare

 

App React – Layout

Abbiamo creato la nostra app e quindi possiamo iniziare a realizzare anche il layout che essa dovrà avere. L’idea è quella di avere un layout a due colonne per la visualizzazione dei titoli dei film a destra e le informazioni del film a sinistra.

Procediamo quindi alla modifica del file App.js in modo da avere il contenuto uguale a quello in figura:

e modifichiamo lo stile della nostra app modificando il file App.css come segue:

La pagina web della nostra app viene ricaricata automaticamente ad ogni modifica del codice. Il risultato delle modifiche apportate al layout sarà quindi il seguente:

App React – Fetch API e visualizzazione dei dati

Procediamo a questo punto con la visualizzazione dei Movie nella colonna sinistra del nostro layout.

Per fare ciò faremo uso di diversi aspetti di React:

• Component – permettono di suddividere la User Interface in parti indipendenti e riutilizzabili
• Hook – permettono di “agganciare” funzionalità di React

Per prima cosa creiamo quindi una cartella components all’interno della cartella src dove andremo a memorizzare tutti i nostri componenti. All’interno della cartella components creiamo un nuovo file che chiamiamo movie-list.js e che sarà il nostro primo componente che servirà a visualizzare la lista dei Movie estratti attraverso l’API messa a disposizione dal backend.

Il file movie-list.js conterrà quindi una funzione MovieList che riceve in input un parametro contenente dati sotto forma di una singola “props” e restituisce un elemento React:

Dopo aver creato il nostro componente andiamo a collegarlo alla nostra app attraverso il file App.js. Qui andremo ad utilizzare due degli Hook messi a disposizione da React:

• useState – permette di aggiungere lo state React nei componenti funzione
• useEffect – permette di eseguire side effects nei componenti

ed andremo ad eseguire il fetch dei Movies dalle API del backend da visualizzare nella colonna sinistra del nostro layout. Il file App.js risulterà quindi essere il seguente:

Con queste semplici modifiche siamo riusciti quindi a richiamare l’API del backend e visualizzare la lista dei Movie nel frontend:

App React – Events e visualizzazione dei dettagli

Adesso che abbiamo la nostra lista di film, vogliamo fare in modo che cliccando sul singolo Movie vengano visualizzate le sue informazioni  sulla colonna di destra del layout.

Per ottenere questa funzionalità dobbiamo far ricorso agli Eventi di React. Questo ci permette infatti di rendere interattivo il componente React, rispondendo alle azioni dell’utente e aggiornando l’interfaccia grafica, agendo sullo stato del componente stesso.

Aggiungiamo quindi al tag <h2> del titolo l’attributo onClick al quale associamo la funzione movieClicked() che si occuperà di notificare al suo parent quale evento è stato lanciato. In base all’evento, il parent eseguirà un’azione che nel nostro caso sarà quella di visualizzare il dettaglio del Movie cliccato:

Successivamente creiamo un nuovo componente per la visualizzazione dei dettagli così come fatto per il componente movie-list.js.  All’interno della cartella components creiamo un nuovo file che chiamiamo movie-details.js e che riceverà come parametro il Movie che è stato selezionato e visualizzerà il titolo, la descrizione, il numero e la media dei voti:

Colleghiamo il nuovo componente all’applicazione attraverso il file App.js dove andremo a gestire le notifiche ricevute dal componente movie-list.js ed andremo a richiamare il componente movie-details.js passando il Movie selezionato:

Il risultato delle modifiche sarà visualizzato nella nostra app in questo modo:

MobileApp – React Native

React Native è un framework open-source creato da Facebook per la realizzazione di applicazioni native Android e iOS.

Il principale vantaggio di React Native è sicuramente quello di essere cross-platform. Questo significa che il codice scritto può essere compilato per ottenere applicazioni native sia per Android che per iOS. Questo ci evita quindi di scrivere due applicazioni diverse per le due principali piattaforme mobile più in voga al momento.

Un altro vantaggio è la similitudine con il framework React che abbiamo visto in precedenza. Questo fa sì che la curva di apprendimento risulti molto più veloce se si conosce già React.

MobileApp – Expo

Il modo più semplice per iniziare a sviluppare applicazioni mobile con React Native è sicuramente attraverso l’utilizzo di Expo CLI. Expo è un set di strumenti costruiti per React Native con molte funzionalità tra le quali la possibilità di scrivere applicazioni mobile in pochissimo tempo. Sono solo due i requisiti da rispettare per il corretto funzionamento:

• Node.js
• un dispositivo (Android o iOS) oppure un emulatore

E’ possibile installare Expo CLI attraverso il comando $ npm install -g expo-cli.

Dopo aver installato Expo CLI è possibile creare il progetto React Native attraverso il comando:

$ expo init mobile

Ci verrà data la possibilità di selezionare uno dei template per la nostra applicazione:

Nel nostro caso possiamo scegliere il primo template blank che contiene una versione pulita e minimale dell’app.

Dopo aver creato la nostra applicazione entriamo nella directory mobile dell’applicazione ed apriamo la nostra applicazione nel browser attraverso il comando $ npm start.

Anche se il server è in esecuzione, la nostra applicazione non è ancora in esecuzione su nessun dispositivo mobile. Per poterla vedere in funzione possiamo utilizzare il QR Code visualizzato nella pagina in combinazione con l’applicazione Expo scaricabile direttamente dal Play Store di Android o dall’App Store di Apple. Scansionando il QR Code con l’applicazione Expo, l’applicazione verrà aperta nel dispositivo mobile e ogni modifica al codice dell’applicazione produrrà un refresh dell’applicazione stessa sul dispositivo mobile.

MobileApp – Struttura della directory del progetto

La struttura della directory del progetto ed i file in esso contenuti sono molto simili a quanto già visto per il progetto React. La cartella mobile creata dal comando di creazione del progetto React Native contiene diverse cartelle:

• node_modules – contiene tutte le librerie utilizzate da React Native e dalla nostra applicazione
• assets – cartella contenente gli assets dell’applicazione
• .expo ed .expo-shared – cartelle contenenti informazioni riguardanti Expo

e diversi file:

• package.json – contiene le informazioni dell’app e tutte le librerie necessarie al funzionamento della stessa
• package-lock.json – file generato automaticamente da npm per ogni operazione in cui npm modifica la cartella node_modules o il file package.json. Descrive quindi l’albero esatto delle dipendenze in modo da poter essere rigenerato in maniera identica nelle installazioni successive o su macchine diverse
• .gitignore – contiene i file e le directory che Git deve ignorare
• App.js – file contenente la nostra applicazione
• app.json – file di configurazione della nostra applicazione

MobileApp - Fetch API e visualizzazione dei dati

Iniziamo a questo punto a personalizzare la nostra applicazione in modo da leggere i dati dal backend attraverso le API messe a disposizione. Abbiamo bisogno di creare un nuovo componente list.js che possiamo memorizzare in una nuova cartella components all’interno del progetto. Questo componente ci servirà per visualizzare la lista dei Movies estratti tramite l’apposita API come già fatto nel progetto React:

Dopo aver creato il nostro componente andiamo a collegarlo alla nostra app attraverso il file App.js.

Il risultato sarà quindi il seguente:

 

 

MobileApp – Events e visualizzazione dei dettagli

Adesso che abbiamo la nostra lista di Movie vogliamo fare in modo che facendo tap sul singolo Movie vengano visualizzate le informazioni del Movie selezionato.

Come prima cosa dobbiamo abilitare la navigazione per il nostro progetto. Possiamo attivare questa funzionalità eseguendo i seguenti comandi:

$ npm add react-navigation

$ npm add react-navigation-stack

$ expo install react-native-gesture-handler

Creiamo successivamente il nuovo componente che servirà alla visualizzazione delle informazioni del Movie selezionato. Aggiungiamo quindi il file list.js nella cartella components:

e colleghiamolo alla nostra App.js come segue:

Dopo aver configurato la navigazione per la nostra app procediamo a gestire la gestione degli eventi grazie al componente TouchableOpacity sulla FlatList ed il passaggio dei parametri tra i componenti List e Details.

Aggiungiamo quindi il componente TouchableOpacity al nostro componente list e gestiamo l’evento onPress con il passaggio del Movie selezionato al componente detail

e visualizziamo le informazioni del movie selezionato nel componente detail attraverso la lettura del movie passato:

La nostra app ci permetterà così di fare tap su tutti i movie visualizzati e, per ciascun movie, di visualizzare informazioni come descrizione, numero di voti e media voti.

Conclusioni

Per la realizzazione di backend restful API, front-end web app e mobile apps compatibili sia con Android che con iOS una delle combinazioni più funzionanti è sicuramente quella tra Django, con il framework Django Rest Framework insieme a React per il frontend e React Native per le app mobile grazie alla loro capacità di generare rapidamente app multi piattaforma, facilità di apprendimento e ampio di supporto.