Bisher hatten Webseiten und Python-Scripts wenig gemeinsam. In Python entwickelte man im Unterricht Programme, die die Schüler auf ihrem eigenen Rechner laufen lassen konnten. Programme auszutauschen, war meist recht mühsam oder aufwendig.
Auf der anderen Seite haben viele im Unterricht gezeigt, wie man Webseiten entwickeln und mit HTML und CSS auch gestalten kann. Die meisten werden wohl einen grossen Bogen um Interaktivität gemacht haben, da die Einführung in JavaScript für viele Schülerinnen und Schüler eine grosse Hürde bedeutet.
Mit der Eintwicklung von PyScript ändert sich dies nun radikal: Das Framework ermöglicht es auf ganz einfache Weise, Python-Scripts in HTML-Seiten laufen zu lassen. PyScript ist noch im Alpha-Stadium und mach noch viele Fehler. Aber zum Ausprobieren und Experimentieren ist es allemal gut genug.
Der neue html-Tag <py-script>
Die Einbindung von Python-Code auf einer Webseite ist denkbar einfach. Es gibt ab sofort den neuen HTML-Tag <py-script>. Er kann irgendwo im HTML-File platziert werden. Aller Code innerhalb des Tags wird direkt im Browser ausgeführt.
Damit der Browser weiss, wie er den Python-Code ausführen soll, müssen lediglich im <head>-Tag die beiden folgenden Zeilen eingefügt werden:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Ein Hello-Welt-Beispiel sieht so aus:
<!DOCTYPE html>
<html>
<head>
<title>PyScript TEST</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
#Python-Code hier
print("Hallo Welt!")
</py-script>
</body>
</html>Dieses File kann auf einem Webserver abgelegt werden, wo es über das Internet aufgerufen werden kann. Das Resultat sieht dann so aus:
PyScript ist noch sehr in der Alpha-Phase. Deshalb erzeugt bereits dieses kleine Script sehr oft einen Fehler, den ich bisher nicht recht habe nachvollziehen können. Es ist deshalb besser, wenn dem <py-script>-Tag sagt, dass er den Output in einen bestimmten <div>-Tag schreiben soll.
Das angepasste File sieht dann so aus:
<!DOCTYPE html>
<html>
<head>
<title>PyScript TEST</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div id="out"></div>
<py-script output="out">
#Python-Code hier
print("Hallo Welt!")
</py-script>
</body>
</html>
Code im Browser ausprobieren
Mit einem einfachen Kniff wird eine Webseite sogar zu einer Python-Konsole. Fügt man den Tag <py-repl auto-generate="true"> </py-repl> dazu, erscheint auf der Webseite eine Konsolen-Zeile, in der Code eingetippt und mit „Shift+Enter“ direkt ausprobiert werden kann.
Ein enstsprechendes HTML-File würde so aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>REPL</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1><b>pyscript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell
<br>
<py-repl id="my_repl" auto-generate="true"> </py-repl>
</body>
</html>
Wie die Seite funktioniert kann hier ausprobiert werden: https://pyscript.net/examples/repl.html
Externe Files laden
Eigentlich gäbe es auch die Möglichkeit, eine externes Python-File im HTML zu laden und dann auszuführen. Allerdings ist es mir selbst nicht gelungen, dies zu tun. Es sieht so aus, dass in der Alpha-Version noch ein Fehler vorhanden ist, der es verunmöglicht, eine Python-Script zu laden.
Im Prinzip würde es ganz einfach funktionieren. Man fügt dem <py-script>-Tag ein src-Attribut hinzu und gibt den Pfad auf das Python-Script an. Ein entsprechendes File sähe dann so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>TEST</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div id="out"></div>
<py-script src="./test.py" output="out" >
</py-script>
</body>
</html>Python Libraries stehen zur Verfügung
Python ist sehr oft verwendet für Data-Science, Machine Learning und Data Reresentation. Dafür gibt es unzählige sehr, sehr nützliche Libraries. Auch diese können mit PyScript einfach eingebunden in einer Webseite benützt werden.
Dazu müssen die Libraries im <head>-Tag geladen werden. Dies sieht so aus, wenn man das Package „numpy“ benützen möchte:
<py-env>
- numpy
</py-env>Weite Informationen
PyScript gibt es erst seit wenigen Wochen. Deshalb ist die Verfügbarkeit von Anleitungen noch sehr gering. Gute Informationsquellen findet man hier:
- https://www.anaconda.com/blog/pyscript-python-in-the-browser: Informationen der Entwickler bei Anaconda
- https://pyscript.net/: Das Zuhause von PyScript
- https://github.com/pyscript/pyscript: Hier findet man Code und Beispiele
- https://pyscript.net/examples/: Lauffähige Beispiele. Den Code der Beispiele findet man auf GitHub (Link oben)
- https://www.jhanley.com/pyscript-loading-python-code-in-the-browser/: Gute Anleitung, wie man mit PyScript Python-Code auf Webseiten laufen lassen kann.
Viel Spass beim experimentieren!
Posts, die sie interessieren könnten:
- replit.com: Team-Programmieren im Informatikunterricht
- Schüler programmieren eigene Smartphone-App
- Einstieg ins Programmieren mit Python
- Pfannenfertige Unterrichtseinheiten zur Digitalisierung
- CS Field Guide: Interaktive Beispiele für den Informatik-Unterricht