Tutorial 6 - Ins Netz stellen!¶
Neben mobilen Plattformen unterstützt das Toga-Widget-Toolkit auch das Web! Mit derselben API, die Sie für die Bereitstellung Ihrer Desktop- und Mobilanwendungen verwendet haben, können Sie Ihre Anwendung als Single-Page-Web-App bereitstellen.
Proof of Concept
Das Toga-Web-Backend ist das am wenigsten ausgereifte aller Toga-Backends. Es ist zwar ausgereift genug, um einige Funktionen zu demonstrieren, aber es ist wahrscheinlich fehlerhaft und es fehlen viele der Widgets, die auf anderen Plattformen verfügbar sind. Zum jetzigen Zeitpunkt sollte die Web-Bereitstellung als „Proof of Concept“ betrachtet werden – ausreichend, um zu zeigen, was möglich ist, aber nicht ausreichend, um sich bei ernsthaften Entwicklungsprojekten darauf zu verlassen.
Wenn Sie Probleme mit diesem Schritt des Tutorials haben, können Sie zur nächsten Seite springen.
Als Webanwendung bereitstellen¶
Der Prozess der Bereitstellung als Single-Page-Web-App folgt dem gleichen bekannten Muster: Sie erstellen die Anwendung, bauen sie dann und führen sie anschließend aus. Briefcase kann jedoch etwas intelligenter sein: Wenn Sie versuchen, eine Anwendung auszuführen, und Briefcase feststellt, dass sie nicht für die Zielplattform erstellt oder gebaut wurde, führt es die Schritte zum Erstellen und Bauen für Sie aus. Da wir die App zum ersten Mal für das Web ausführen, können wir alle drei Schritte mit einem einzigen Befehl ausführen:
(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)...
===========================================================================
(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)...
===========================================================================
(beeware-venv) C:\...>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)...
===========================================================================
Dadurch wird ein Webbrowser geöffnet, der auf
Wenn Sie Ihren Namen eingeben und auf die Schaltfläche klicken, wird ein Dialogfeld angezeigt.
Wie funktioniert das?¶
Diese Webanwendung ist eine statische Website - eine einzelne HTML-Quellseite
mit einigen CSS- und anderen Ressourcen. Briefcase hat einen lokalen Webserver
gestartet, um diese Seite bereitzustellen, damit Ihr Browser die Seite anzeigen
kann. Wenn Sie diese Webseite in Produktion geben möchten, können Sie den Inhalt
des Ordners www auf einen beliebigen Webserver kopieren, der statische Inhalte
bereitstellen kann.
Aber wenn Sie die Taste drücken, führen Sie Python-Code aus… wie funktioniert das? Toga verwendet PyScript, um einen Python-Interpreter im Browser bereitzustellen. Briefcase verpackt den Code Ihrer Anwendung als Rädchen, die PyScript im Browser laden kann. Wenn die Seite geladen wird, läuft der Anwendungscode im Browser und baut die Benutzeroberfläche mit Hilfe des Browser-DOMs auf. Wenn Sie auf eine Schaltfläche klicken, führt diese Schaltfläche den Code zur Ereignisbehandlung im Browser aus.
Veröffentlichung der Web-App¶
Wenn Sie möchten, können Sie diese Web-App auch mit dem PythonAnywhere Briefcase Plugin im Internet veröffentlichen. Das Tutorial für dieses Plugin knüpft an diese Seite an und führt Sie durch die Paketierung und Veröffentlichung auf PythonAnywhere.
Nächste Schritte¶
Obwohl wir diese App jetzt auf dem Desktop, auf dem Handy und im Web bereitgestellt haben, ist die App recht einfach und enthält keine Bibliotheken von Drittanbietern. Können wir Bibliotheken aus dem Python Package Index (PyPI) in unsere App einbinden? Schauen Sie sich Tutorial 7 an, um das herauszufinden…