Single Page Application con Django

Simgle Page Application Django
Tempo di lettura: 5 minuti

In questo tutorial ti mostrerò come Creare una Single Page Application con Django (SPA).

Single Page Application con Django,  Impostazione del progetto

Prima di iniziare un progetto Django dovresti avere installato Django sul tuo computer / ambiente di sviluppo.

Per installare Django esegui il comando seguente nel terminale o nel tuo ambiente di sviluppo.

 pip install django 

Per avviare il progetto Django

 django-admin startproject mysite 

Questo comando genererà la struttura del progetto con parecchie directory e gli script python che saranno organizzati in questo modo

├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
├── manage.py

Per approfondire l’argomento fai riferimento alla documentazione ufficiale: Writing your first Django app, part 1.

Per procedere nella realizzazione della Single Page Application, dopo aver creato il progetto, hai bisogno di creare un’applicazione – Django app.

Ogni progetto Django ha bisogno di almeno una applicazione

Entra nella directory che contiene il file manage.py.


cd mysite

Lancia il comando:


python manage.py startapp singlepage

Questo comando creerà l’applicazione singlepage nel progetto.

La directory del progetto apparirà così:

├── db.sqlite3
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
├── manage.py
└── singlepage
  ├── __init__.py
  ├── admin.py
  ├── apps.py
  ├── migrations/
  ├── models.py
  ├── tests.py
  └── views.py

Carica l’applicazione single page nel file settings del progetto Django

Dopo aver creato la nostra prima applicazione nel progetto, c’è bisogno di avvisare Django che c’è una nuova applicazione di nome singlepage, che deve essere caricata.

Apri il file settings.py, presente nella directory del progetto, nel nostro caso mysite, raggiungi la sezione applicazioni installate (INSTALLED_APPS)

 
INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
]

Aggiungi la nuova app, singlepage, alla lista delle applicazioni installate.

 
INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'singlepage',               # down here
]

Creiamo la View

Quello che stiamo facendo è creare delle function-based views. Una view in Django è una funzione che riceve una chiamata e fornisce una risposta.

Apri la tua singlepage/views.py ed inserisci il codice qui sotto.

(Tutti i codici sono presenti nell’archivio zip linkato alla fine dell’articolo)

views.py  

 
from django.shortcuts import render
from django.http import HttpResponse, Http404


# Create your views here.
def index(request):
  return render(request, "singlepage/index.html")


texts = [
    "Lorem ipsum",
    "dolor sit amet",
    "consectetur adipiscing elit",
]

def section(request, num):
  if 1 <= num <= 3:
    return HttpResponse(texts[num-1])
  else:
    raise Http404("No such section")

La variabile texts è una lista di tre stupidi testi. Possono rappresentare dati caricati dinamicamente dal database o un elenco impaginato di articoli caricati dal blog.

Le funzioni index e section sono delle views di Django. La view index esegue semplicemente l’HTML presente nel file index.html che creeremo fra poco.

La view section, invece, è richiamata per inviare una richiesta per estrapolare la stringa corrispondente nella lista.

Creiamo le URLs

Dopo aver creato le views c’è bisogno di creare le URLs che fanno corrispondere ad ogni chiamata la view corrispondente.

Crea un file urls.py nella directory dell’applicazione singlepage ed aggiungi il seguente codice.

singlepage/urls.py 

from django.urls import path
from . import views

urlpatterns = [
  path("", views.index, name='index'),
  path("sections/<int:num>", views.section, name='section'),
]

La riga sections/<int:num> equivale a richiedere un’url che ha bisogno di un ulteriore argomento di tipo numerico integer.
Per esempio: section/2

Per approfondire l’argomento relativo alle URLs fai riferimento alla documentazione ufficiale del progetto Django URL dispatcher (https://docs.djangoproject.com/en/dev/topics/http/urls/)

È necessario aggiungere queste URLs specifiche al progetto principale. Occorre modificare il file mysite/urls.py come indicato qui.

mysite/urls.py 

from django.contrib import admin

urlpatterns = [
  path('admin/', admin.site.urls),
]

Per includere le URLs inserite nell’applicazione singlepage, modifica il file come indicato sotto.

from django.contrib import admin
from django.urls import path, include    # new

urlpatterns = [
  path('admin/', admin.site.urls),
  path("", include("singlepage.urls")),   # new
]

In questo modo le richieste relative alle singlepage saranno gestite direttamente dal file urls.py  presente nella applicazione singlepage/urls.py.

Creiamo il Template

Django permette di gestire il codice HTML separatamente dalla views e da altro codice python. Ora creiamo la struttura di directory che ospiterà i file del template.

Per prima cosa accedi alla directory singlepage e crea una directory chiamata templates.
Poi nella directory appena creata inserisci una nuova directory denominata singlepageil nome dell’applicazione che la ospita.
Infine in questa sotto directory crea il file html denominato index.html.

├── db.sqlite3
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
├── manage.py
└── singlepage
  ├── __init__.py
  ├── admin.py
  ├── apps.py
  ├── migrations 
  ├── templates         # new directory
    ├── singlepage      # new directory
      ├── index.html    # new HTML file
  ├── models.py
  ├── tests.py
  └── views.py

Ora apri il file index.html ed inserisci il seguente codice

templates/singlepage/index.html

<!DOCTYPE html>
  <html>
    <head>
      <title>Single Page</title>
      <script>

      // This function communicates with django (backend)

      function showSection(section) {
        fetch(`/sections/${section}`)
          .then(response => response.text())
          .then(text => {
            console.log(text);
            document.querySelector('#content').innerHTML = text;
         });
      }

      document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('button').forEach(button => {
          button.onclick = function() {
            showSection(this.dataset.section)
          }
        })
      });

      </script>
    </head>
  <body>
    <h1>Hello</h1>
    <button data-section="1">Section 1</button>
    <button data-section="2">Section 2</button>
    <button data-section="3">Section 3</button>

    <!-- Contents loaded from server is inserted here by javascript -->
    <div id="content">

    </div>

  </body>
</html>

A questo punto dal terminale puoi eseguire il server di sviluppo locale.

python manage.py runserver

Apri il tuo browser preferito alla URL http://127.0.0.1:8000/ e se tutto ha funzionato correttamente dovresti vedere qualcosa di simile.

Simgle Page Application Django

Cliccando su uno dei bottoni viene caricato il testo, corrispondente alla sezione, della variabile texts dall’applicazione di Django. Il testo è caricato  direttamente nel contenuto senza ricaricare la pagina.

La variazione a schermo avviene praticamente immediatamente perché stai lavorando sul server locale.

Se si lavora su un server remoto, caricando contenuti più grandi, probabilmente i tempi di risposta saranno maggiori.

Il flusso che permette di caricare nuovi contenuti, senza ricaricare la pagina, fa del progetto una Single Page Application con Django

Questa tutorial mostra solo una semplice implementazione di simple Page Application con Django e con JavaScript fetch API.

Pensa che i testi che vengono caricati dal backend di Django potrebbero essere una lista di articoli del Blog o altri dati estrapolati dal database con complesse query, o qualsiasi altra cosa.

L’importante è comprendere il funzionamento delle parti.

Chiediti qual’è la parte di Django, l’esempio elabora semplicemente una variabile di tipo lista – list – che conserva tre testi. Cosa accadrebbe se i testi fossero memorizzati in un database?

Chiediti qual’è la parte di Javascript, in particolare soffermati sulle Fetch API. Vengono elaborate richieste asincrone (AJAX)?

Che cos’è PIP?

Come viene gestita la versione di python (VENV)?

Codice del progetto

Puoi trovare il codice dell’intero progetto qui.

Approfondimenti

Tra i tanti argomenti da approfondire riporto qui una breve lista:

  • Server di sviluppo per Django;
  • Sviluppo di una applicazione Django;
  • Creazione ed utilizzo di Ambienti Virtuali in Python con VENV;
  • Javascript Fetch API – chiamate asincrone;
  • Editor di sviluppo per Python;
  • etc.
Fonte: pythonstacks.com

 

Un commento su “Single Page Application con Django”

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.