Python gebruiken in HTML is tegenwoordig nog makkelijker met PyScript. De webdevelopment wereld blijft niet stilzitten en dat is met de komst van dit interessante framework ook weer te merken. In dit artikel ga je lezen wat PyScript is en leer je met voorbeelden zelf Python gebruiken in HTML met PyScript. Lees snel verder!
Wat is PyScript?
PyScript is een framework waarmee het mogelijk is om op een makkelijke manier Python applications in de browser te maken. Het framework maakt het gebruik van Python in HTML makkelijk.
Python developers kunnen op deze manier makkelijker hun Python code uitvoeren in de browser. Je kan onder andere met het framework veel populaire Python packages gebruiken en met JavaScript communiceren.
Hoe kan een browser dan Python code uitvoeren? PyScript is gebouwd op Pyodide. Pyodide kan Python code compileren naar WebAssembly. Moderne browsers kunnen WebAssembly uitvoeren.
Op het moment van schrijven is PyScript nog volop in ontwikkeling. Er kunnen daarom nog problemen optreden als je met het framework aan de slag gaat. Het is zeker interessant om uit te proberen, maar nog niet geschikt voor productie.
Op de website van PyScript lees je meer over PyScript. De missie van PyScript is om programmeren voor iedereen toegankelijk te maken. Dat sluit mooi aan op de missie van ProgrammeerPlaats.
Hello World! voorbeeld
Laten we beginnen met een simpel Hello World! voorbeeld. Maak een HTML bestand en doe ook lekker mee. Heb je nog nooit een HTML bestand gemaakt en/of wil je eerst meer over HTML leren? Lees dan eerst “Hello World! HTML”.
Het Hello World! voorbeeld ziet er zo uit:
<!DOCTYPE html>
<html>
<head>
<title>Hello World! PyScript</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>print("Hello World!")</py-script>
</body>
</html>
Belangrijk is om eerst regel 5 en 6 toe te voegen, anders werkt de Python code niet in je HTML bestand. Tussen <py-script> en </py-script> kan je Python code schrijven.
In dit geval schrijven we een print() function die Hello World! naar het scherm print. Test in de browser eens of de code werkt!
Je kan het HTML bestand ook gebruiken voor de andere voorbeelden of per voorbeeld een nieuw HTML bestand aanmaken, die keus is aan jou.
Package gebruiken voorbeeld
In dit voorbeeld gebruiken we Matplotlib. Het voorbeeld waarin we de package gebruiken ziet er zo uit:
<!DOCTYPE html>
<html>
<head>
<title>Package gebruiken PyScript</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
</py-env>
</head>
<body>
<div id="plot"></div>
<py-script output="plot">
import matplotlib.pyplot as plt
sizes = [10, 50, 20, 20]
labels = ["Utrecht", "Amsterdam", "Rotterdam", "Den Haag"]
fig, ax = plt.subplots()
ax.pie(sizes, labels = labels)
fig
</py-script>
</body>
</html>
Tussen <py-env> en </py-env> zet je de packages die je nodig hebt, in dit geval Matplotlib, zoals je in regel 8 ziet. Het resultaat van de Python code tussen <py-script> en </py-script> komt in <div id="plot"></div> te staan.
Wil je Matplotlib beter begrijpen? Dan is het interessant om de website van Matplotlib eens door te nemen. Het is zeker interessant om in deze library te duiken, mocht je geïnteresseerd zijn in het visualiseren van data.
Let er wel op bij de Python code tussen <py-script> en </py-script> dat je geen gebruik maakt van inspringregels en het tegen de zijkant van het HTML bestand staat, anders werkt het niet.
Ga je veel Python code schrijven? Dan is het netter om het in een apart Python bestand te doen. Op deze manier verwijs je ernaar in je HTML bestand: <py-script scr="/voorbeeld.py"></py-script>.
Python code editor voorbeeld
Een Python code editor in je webpagina zetten is eenvoudig met PyScript. Het Python code editor voorbeeld ziet er zo uit:
<!DOCTYPE html>
<html>
<head>
<title>PyScript REPL</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div>
<py-repl id="my-repl" auto-generate="true"></py-repl>
</div>
</body>
</html>
Je hoeft alleen maar regel 10 tussen <div> en </div> te zetten. Op GitHub zie je meer REPL voorbeelden en andere voorbeelden van PyScript.
Leer meer over Python
Hopelijk ben je enthousiast geraakt en ga je ook Python gebruiken in HTML met PyScript. Het is leuk en interessant om mee te experimenteren.
Wil je meer over Python leren? Dan is het artikel “Python leren” interessant om te lezen. Python leren is niet lastig en je hebt mooie mogelijkheden.
Er is zelfs een tekort aan goede Python developers en bedrijven snakken naar de juiste mensen. Als Python je interessant lijkt, is het zeker goed om er dieper in te duiken.
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.