Esercitazione 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:

macOSLinuxWindows

(beeware-venv) $ briefcase run web

[helloworld] Generazione del modello dell'applicazione...
Utilizzo del modello dell'app: https://github.com/beeware/briefcase-web-static-template.git, ramo v0.3.18
...

[helloworld] Installazione del pacchetto di supporto...
Nessun pacchetto di supporto richiesto.

[helloworld] Installazione del codice dell'applicazione...
Installazione di src/helloworld... completata

[helloworld] Installazione dei requisiti...
Scrittura del file dei requisiti... fatto

[helloworld] Installazione delle risorse dell'applicazione...
...

[helloworld] Rimozione dei contenuti non necessari dell'app...
Rimozione dei contenuti non necessari del bundle dell'app... fatto

[helloworld] Creato build/helloworld/web/static

[helloworld] Compilazione del progetto web...
...

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

[helloworld] Avvio del server web...
Server web aperto su http://127.0.0.1:8080

[helloworld] Output del log del server web (digitare CTRL-C per interrompere il log)...
===========================================================================

(beeware-venv) $ briefcase run web

[helloworld] Generazione del modello dell'applicazione...
Utilizzo del modello dell'app: https://github.com/beeware/briefcase-web-static-template.git, ramo v0.3.18
...

[helloworld] Installazione del pacchetto di supporto...
Nessun pacchetto di supporto richiesto.

[helloworld] Installazione del codice dell'applicazione...
Installazione di src/helloworld... completata

[helloworld] Installazione dei requisiti...
Scrittura del file dei requisiti... fatto

[helloworld] Installazione delle risorse dell'applicazione...
...

[helloworld] Rimozione dei contenuti non necessari dell'app...
Rimozione dei contenuti non necessari del bundle dell'app... fatto

[helloworld] Creato build/helloworld/web/static

[helloworld] Compilazione del progetto web...
...

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

[helloworld] Avvio del server web...
Server web aperto su http://127.0.0.1:8080

[helloworld] Output del log del server web (digitare CTRL-C per interrompere il log)...
===========================================================================

(beeware-venv) C:\...>briefcase run web

[helloworld] Generazione del modello dell'applicazione...
Utilizzo del modello dell'app: https://github.com/beeware/briefcase-web-static-template.git, ramo v0.3.18
...

[helloworld] Installazione del pacchetto di supporto...
Nessun pacchetto di supporto richiesto.

[helloworld] Installazione del codice dell'applicazione...
Installazione di src/helloworld... completata

[helloworld] Installazione dei requisiti...
Scrittura del file dei requisiti... fatto

[helloworld] Installazione delle risorse dell'applicazione...
...

[helloworld] Rimozione dei contenuti non necessari dell'app...
Rimozione dei contenuti non necessari del bundle dell'app... fatto

[helloworld] Creato build\helloworld\web\static

[helloworld] Compilazione del progetto web...
...

[helloworld] Compilato build\helloworld\web\static\www\index.html

[helloworld] Avvio del server web...
Server web aperto su http://127.0.0.1:8080

[helloworld] Output del log del server web (digitare CTRL-C per interrompere il log)...
===========================================================================

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

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.

Pubblicazione dell'applicazione web

Se lo desideri, puoi anche provare a pubblicare questa applicazione web su Internet utilizzando il PythonAnywhere Briefcase Plugin. Il tutorial per quel plugin riprende da dove questa pagina si interrompe e ti guida attraverso il processo di impacchettamento e pubblicazione su PythonAnywhere.

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…