Tutorial 6 - Ins Netz stellen!#

Das Toga Widget Toolkit unterstützt nicht nur mobile Plattformen, sondern auch das Web! Mit der gleichen API, die Sie für die Bereitstellung Ihrer Desktop- und mobilen Anwendungen verwendet haben, können Sie Ihre Anwendung als einseitige Webanwendung bereitstellen.

Proof of Concept

Das Toga Web Backend ist das am wenigsten ausgereifte von allen Toga Backends. Es ist ausgereift genug, um ein paar Funktionen zu zeigen, aber es wird wahrscheinlich fehlerhaft sein und viele der Widgets, die auf anderen Plattformen verfügbar sind, fehlen. Zum jetzigen Zeitpunkt sollte Web Deployment als „Proof of Concept“ betrachtet werden - genug, um zu demonstrieren, was getan werden kann, aber nicht genug, um sich auf eine ernsthafte Entwicklung zu verlassen.

Wenn Sie Probleme mit diesem Schritt des Tutorials haben, können Sie zur nächsten Seite wechseln.

Als Webanwendung bereitstellen#

Der Prozess der Bereitstellung als einseitige Webanwendung folgt dem gleichen bekannten Muster - Sie erstellen die Anwendung, bauen die Anwendung und führen sie dann aus. Wenn Sie versuchen, eine Anwendung auszuführen und Briefcase feststellt, dass sie nicht für die angestrebte Plattform erstellt oder gebaut wurde, führt es die Schritte zum Erstellen und Bauen für Sie aus. Da wir die Anwendung zum ersten Mal für das Web ausführen, können wir alle drei Schritte mit einem 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.14
...

[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 http://127.0.0.1:8080 verweist:

Hello World Tutorial 6 Dialog, in einem Browser

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.

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…