Tutorial 6 - Mettetelo sul web!

Oltre a supportare le piattaforme mobili, il toolkit di widget Toga supporta anche il Web! Utilizzando la stessa API usata per distribuire le applicazioni desktop e mobili, è possibile distribuire l’applicazione come applicazione web a pagina singola.

Prova di concetto

Il backend di Toga Web è il meno maturo di tutti i backend di Toga. È abbastanza maturo per mostrare alcune funzionalità, ma è probabile che sia pieno di bug e che manchino molti dei widget disponibili su altre piattaforme. In questo momento, l’implementazione del Web dovrebbe essere considerata una «prova di concetto»: sufficiente per dimostrare ciò che si può fare, ma non abbastanza per fare affidamento su uno sviluppo serio.

Se avete problemi con questa fase del tutorial, potete passare alla pagina successiva.

Distribuzione come applicazione web

Il processo di distribuzione come applicazione web a pagina singola segue lo stesso schema familiare: si crea l’applicazione, la si costruisce e la si esegue. Tuttavia, Briefcase può essere un po” intelligente; se si tenta di eseguire un’applicazione e Briefcase determina che non è stata creata o costruita per la piattaforma a cui è destinata, eseguirà le fasi di creazione e costruzione per voi. Poiché questa è la prima volta che eseguiamo l’applicazione per il Web, possiamo eseguire tutti e tre i passaggi con un solo comando:

(beeware-venv) $ briefcase run web

[helloworld] Generating application template...
Using app template: https://github.com/beeware/briefcase-web-static-template.git, branch v0.3.18
...

[helloworld] Installing support package...
No support package required.

[helloworld] Installing application code...
Installing src/helloworld... done

[helloworld] Installing requirements...
Writing requirements file... done

[helloworld] Installing application resources...
...

[helloworld] Removing unneeded app content...
Removing unneeded app bundle content... done

[helloworld] Created build/helloworld/web/static

[helloworld] Building web project...
...

[helloworld] Built build/helloworld/web/static/www/index.html

[helloworld] Starting web server...
Web server open on http://127.0.0.1:8080

[helloworld] Web server log output (type CTRL-C to stop log)...
===========================================================================

Si aprirà un browser web che punta a http://127.0.0.1:8080:

Finestra di dialogo Hello World Tutorial 6, in un browser

Se si inserisce il proprio nome e si fa clic sul pulsante, viene visualizzata una finestra di dialogo.

Come funziona?

Questa applicazione web è un sito web statico - una singola pagina sorgente HTML, con alcuni CSS e altre risorse. Briefcase ha avviato un server web locale per servire questa pagina, in modo che il browser possa visualizzarla. Se si volesse mettere in produzione questa pagina web, si potrebbe copiare il contenuto della cartella www su qualsiasi server web in grado di servire contenuti statici.

Ma quando si preme il pulsante, si esegue codice Python… Come funziona? Toga utilizza PyScript per fornire un interprete Python nel browser. Briefcase impacchetta il codice dell’applicazione come ruote che PyScript può caricare nel browser. Quando la pagina viene caricata, il codice dell’applicazione viene eseguito nel browser, costruendo l’interfaccia utente utilizzando il DOM del browser. Quando si fa clic su un pulsante, questo esegue il codice di gestione degli eventi nel browser.

Prossimi passi

Anche se abbiamo distribuito questa applicazione su desktop, mobile e web, l’applicazione è piuttosto semplice e non coinvolge librerie di terze parti. Possiamo includere nella nostra applicazione le librerie del Python Package Index (PyPI)? Consultate Tutorial 7 per scoprirlo…