Python goes HTML

Bis anhin konnte man Webseiten und einfache Webanwendungen nur mit JavaScript interaktiv machen. Seit einigen Wochen drängt sich nun Python auf. Mit PyScript wird es nun plötzlich möglich, in Webseiten Python-Code auszuführen. Das ist sehr praktisch für den Unterricht, weil die meisten Schüler:innen Python schon beherrschen.

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:

Viel Spass beim experimentieren!

Posts, die sie interessieren könnten:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.