ID.nl logo
Python: zo bouw  je er webapplicaties mee
© Chaosamran_Studio - stock.adobe.
Huis

Python: zo bouw je er webapplicaties mee

JavaScript is de standaard programmeertaal voor webapplicaties. Maar voor liefhebbers van Python is er goed nieuws: dankzij PyScript kun je ook in je favoriete programmeertaal webapplicaties bouwen. Hierdoor krijg je toegang tot een breed scala aan populaire Python-bibliotheken. Bovendien kun je de Python-code moeiteloos communiceren met JavaScript-code.

In dit artikel gaan we dieper in op de mogelijkheden van PyScript voor het ontwikkelen van webapplicaties. Je leert:

  • Hoe je PyScript in het html-bestand verwerkt
  • Hoe je grafieken kunt plotten
  • Hoe je JavaScript als Python-code kunt laten gedragen

Lees ook deze 10-delige cursus over programmeren in Python: Zo kun je programmeren in Python - Deel 1

Code downloaden In deze workshop worden lange voorbeelden van stukken code gegeven. Omdat overtikken van code erg foutgevoelig is, kun je die code beter downloaden en daarna bekijken of kopiëren. Zie het bestand code-pyscript.txt voor de stukken code die in dit artikel genoemd worden.

Webapplicaties maken doorgaans gebruik van een drie-eenheid van (programmeer)talen: HyperText Markup Language (html), Cascading Style Sheets (css) en JavaScript. Html is een opmaaktaal waarmee je de structuur en inhoud van een webpagina definieert. Met css definieer je stijlen die de vormgeving van de pagina beschrijven. En JavaScript is een programmeertaal waarmee je het gedrag van de pagina bepaalt.

Hoewel JavaScript de dominante programmeertaal is in de wereld van webapplicaties, heeft het erbuiten niet dezelfde populariteit kunnen winnen. Python daarentegen is een populaire programmeertaal in diverse domeinen, onder andere voor data-analyse, machine learning, wetenschappelijke projecten, scripting en de serverkant van webapplicaties. Hoe handig zou het zijn als je jouw kennis van Python ook in de webbrowser kunt toepassen?

1 PyScript

Dat is precies wat PyScript mogelijk maakt: Python-toepassingen ontwikkelen die in de webbrowser werken. Net zoals je JavaScript-code in een html-pagina kunt opnemen, kun je dat dankzij PyScript ook met Python-code doen. Bovendien kunnen Python- en JavaScript-objecten probleemloos met elkaar communiceren, zodat je niet gebonden bent aan PyScript, maar je Python-code kunt combineren met bestaande JavaScript-bibliotheken.

Je kunt met PyScript ook gebruikmaken van heel wat populaire Python-pakketten, zoals Beautiful Soup, Matplotlib, NumPy, Pandas of Scikit-learn. Op die manier kun je dus niet alleen je kennis van de programmeertaal Python meenemen naar je webapplicaties, maar ook die van het uitgebreide Python-ecosysteem. Als je dus vertrouwder bent met Python dan met JavaScript en je webapplicaties wilt bouwen, dan is PyScript een logische keuze.

PyScript laat je toe om webapplicaties te ontwikkelen met Python.

2 Hallo wereld

Een PyScript-webapplicatie heeft drie bestanden nodig. Eerst en vooral een html-bestand, bijvoorbeeld index.html, met de structuur van je webpagina, verwijzingen naar PyScript zelf en je eigen Python-script. Een tweede bestand beschrijft de Python-omgeving waarin je applicatie draait. Hierin geef je bijvoorbeeld aan welke extra Python-pakketten je script gebruikt. Dit bestand heet pyscript.toml of pyscript.json. Tot slot is er je Python-script zelf, dat je in een Python-bestand als main.py opslaat.

Een eenvoudig html-bestand voor een PyScript-applicatie ziet er als volgt uit:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

Je verwijst hier in het element head naar de css-stylesheet en JavaScript-code van PyScript. In het element script van de body verwijs je dan naar je Python-script.

3 Python-script

In de body van de html-pagina vind je het element button met een attribuut py-click dat de waarde "generate_text" heeft. Hiermee geef je aan dat bij een klik op die knop de Python-functie generate_text wordt aangeroepen. In het element script verwijs je vervolgens naar je Python-script main.py. Met type="py" geef je aan dat het om een Python-script gaat in plaats van een JavaScript-bestand. En met het attribuut config verwijs je naar het configuratiebestand waarin je definieert welke Python-pakketten PyScript voor je applicatie moet installeren. Als je bijvoorbeeld het pakket lorem-text wilt gebruiken, dan ziet het bestand pyscript.toml er als volgt uit:

packages = ["lorem-text"]

Het Python-script main.py heeft de volgende inhoud:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We importeren hier dus de module lorem uit lorem-text, het pakket dat we hebben geïnstalleerd. Vervolgens importeren we ook document uit PyScript. In de functie generate_text, die wordt aangeroepen wanneer je in de webpagina op de knop klikt, krijg je via document toegang tot het volledige Document Object Model (DOM) van de webpagina. Hiermee selecteer je het element met de id output. De functie roept dan lorem.paragraph() aan om een alinea met willekeurige tekst te genereren en kent die toe aan de tekst van het geselecteerde element.

PyScript geeft je toegang tot het ecosysteem van de Python Package Index (PyPI).

Onder de motorkap Standaard draai je Python in de volledige omgeving van je besturingssysteem. Deze versie van Python, de officiële Python dus, heet CPython. Om Python in de ingeperkte omgeving van je webbrowser te laten draaien, maakt PyScript gebruik van Pyodide. Dit project is op zijn beurt gebaseerd op WebAssembly, dat een virtuele machine biedt om willekeurige software in de omgeving van je webbrowser te laten draaien. Software die voor WebAssembly is gecompileerd, heeft volledige toegang tot alle functionaliteit van je webbrowser en dezelfde web-API’s (application programming interfaces) die voor JavaScript toegankelijk zijn. Pyodide compileert CPython naar WebAssembly. Op die manier slaagt PyScript er dus in om een volwaardig alternatief voor JavaScript te bieden voor webapplicaties.

4 Webserver

Je PyScript-applicatie is nu klaar, maar je kunt het html-bestand niet gewoonweg in je webbrowser openen als een lokaal bestand. Je moet het bestand via een webserver aanbieden. Als je Python lokaal (op je computer) hebt geïnstalleerd, kun je eenvoudig de ingebouwde webserver van Python opstarten. Navigeer in een terminalvenster of opdrachtprompt naar de directory waarin je PyScript-bestanden staan en voer de volgende opdracht uit:

python -m http.server

Dit start een webserver op poort 8000 die de inhoud van de huidige directory aanbiedt. Bezoek vervolgens in je webbrowser de url http://127.0.0.1:8000/, die verwijst naar poort 8000 op je computer zelf. Je krijgt nu een webpagina te zien met als titel Hallo wereld en een knop met als label Lorem ipsum.

Wacht even tot de hele PyScript-omgeving is ingeladen. Klik dan op de knop wanneer die niet meer grijs is. Eronder verschijnt vervolgens een alinea met willekeurige tekst. Elke keer dat je op de knop drukt, verschijnt er een nieuwe tekst omdat de functie generate_text weer wordt aangeroepen.

Eén druk op de knop roept een Python-functie op die willekeurige tekst genereert.

5 Grafieken plotten

Nu kun je ook in je webapplicaties gebruikmaken van het krachtige ecosysteem van Python-pakketten voor bijvoorbeeld datavisualisatie, zoals Matplotlib. Het principe is hetzelfde als het eerste voorbeeld met de lorem ipsum-tekst: je creëert een html-bestand met de structuur van je webpagina, een bestand met de Python-pakketten die je nodig hebt, en uiteindelijk een bestand met je Python-code. Het bestand met de afhankelijkheden, pyscript.toml, vermeldt eenvoudigweg het pakket Matplotlib:

packages = ["matplotlib"]

Het html-bestand index.html ziet er als volgt uit:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

In dit voorbeeld laten we de gebruiker een amplitude en periode kiezen, om vervolgens een grafiek van de sinusfunctie met die ingestelde amplitude en periode te plotten.

Matplotlib is dé Python-bibliotheek voor visualisaties.

6 Schuifbalken

In de html-code definiëren we twee elementen input van het type range. Je webbrowser toont die als schuifbalken. We stellen voor elk element een minimum en maximum in, een stap (de waarde waarmee de schuifbalk per eenheid wordt verschoven) en een standaardwaarde. We geven beide elementen ook een label, met diezelfde standaardwaarde, zodat de gebruiker niet alleen een bolletje op een schuifbalk ziet, maar ernaast ook de waarde die daardoor wordt ingesteld.

Eronder plaatsen we dan een element div waarin de grafiek komt. We definiëren hier ook een script dat naar het Python-bestand en de configuratie met de te installeren pakketten verwijst. In de elementen input verwijzen we ook naar de in dit Python-bestand gedefinieerde functie plot_sine die wordt uitgevoerd bij elke wijziging van de invoer in het element. De webapplicatie roept de functie daardoor aan telkens als je aan de schuifbalk sleept.

7 Sinus plotten

Dan volgt uiteindelijk de code in main.py om de sinusfunctie te plotten:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

De functie plot_sine haalt allereerst de waarde op van het element met de id amplitude en wijzigt de tekst van het label voor dat element naar die waarde. Daarna doet de functie hetzelfde voor het element met de id period. Deze eerste regels code synchroniseren dus elke keer de getoonde waarde met de ingestelde waarde, zodat de gebruiker onmiddellijk feedback krijgt bij het schuiven.

Daarna creëren we met NumPy’s functie arange een reeks x-waarden en vervolgens berekenen we voor elk van die x-waarden de sinusfunctie met NumPy’s functie sin. Door het argument van de sinusfunctie te vermenigvuldigen met 2π en te delen door de periode, berekenen we de sinus met de gewenste periode: de kromme wordt zo breder of smaller geplot. Door het resultaat van de sinusfunctie met de amplitude te vermenigvuldigen, wordt de kromme hoger of lager geplot.

Uiteindelijk maken we de huidige figuur leeg, plotten we de x- en y-waardes in het blauw, voegen we een raster toe en stellen we het bereik voor de x- en y-as in. Daarna tonen we de plot in het target sine, dat verwijst naar de id van het desbetreffende element div in het html-bestand. Helemaal op het einde van het Python-bestand roepen we de functie ook expliciet op. Zo wordt de grafiek ook getoond nadat de pagina is geladen, zonder dat de gebruiker eerst met een van de schuifbalken moet schuiven.

Deze grafiek plotten we in Python dankzij Matplotlib.

8 JavaScript in Python aanroepen

Er bestaat uiteraard al een heel ecosysteem van JavaScript-bibliotheken voor webapplicaties. Je hoeft het wiel niet opnieuw uit te vinden in Python of een Python-alternatief te zoeken als je er al een in JavaScript bij de hand hebt. Zoals we eerder al schreven, biedt PyScript volledige interoperabiliteit tussen Python- en JavaScript-code in je webapplicaties. Om JavaScript-functies in je Python-code aan te roepen, importeer je de globale JavaScript-namespace met:

import js

Daarna gedraagt js zich in je Python-code als een Python-module en kun je alle globale JavaScript-functies aanroepen met js.naamvanfunctie.

Als je asynchrone JavaScript-functies wilt aanroepen, moet je ook de module asyncio in je Python-code importeren en de functies aanroepen met await ervoor.

9 Alles in één

Laten we dit eens illustreren met een eenvoudig voorbeeld dat de JavaScript Fetch API gebruikt om je publieke ip-adres via de website ipify op te vragen. We tonen meteen een alternatieve manier om PyScript te gebruiken door de Python-code rechtstreeks in het html-bestand te plaatsen in plaats van een afzonderlijk Python-bestand. Zo heeft onze webapplicatie maar één bestand nodig, het html-bestand:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We creëren hier in de body een element py-script met daarin de Python-code. Merk op dat dit element een attribuut async heeft, omdat we in de Python-code een asynchrone functie met await aanroepen. Zonder het attribuut async zou de code niet werken.

De JavaScript Fetch API biedt een eenvoudige manier aan om http-aanroepen in je webapplicatie te doen.

10 Webpagina ophalen

De code roept de globale JavaScript-functie fetch aan met als argument de url van de API van ipify. Dit is een asynchrone JavaScript-functie, vandaar dat we die aanroepen met await js.fetch(url). Van het resultaat vragen we de tekst op. Omdat dit ook een asynchrone JavaScript-functie is, moeten we dit in onze Python-code ook met await aanroepen.

Als dit succesvol is, bevat de variabele public_ip het antwoord van de webserver van ipify, namelijk je publieke ip-adres. We creëren dan een f-string met de boodschap “Mijn publieke IP-adres:” gevolgd door het betreffende ip-adres. Met de functie display (die je niet mag vergeten te importeren uit de module pyscript) toon je deze string in het html-element waarin deze Python-code wordt uitgevoerd, namelijk het paragraaf-element p. En zo krijg je wanneer je deze webpagina laadt na een korte pauze je ip-adres te zien.

11 Python REPL

Met PyScript kun je zelfs een Python REPL (read-eval-print loop) in je webpagina toevoegen: een terminalvenster waarin je Python-opdrachten uitvoert, volledig client-side in je webbrowser. De html-code hiervoor ziet er als volgt uit:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

De attributen terminal en worker voor het element script zijn hier belangrijk. Het eerste attribuut toont een terminal waarin de uitvoer van de Python-functie print komt, en het tweede attribuut maakt de terminal interactief (bijvoorbeeld om de gebruiker invoer te vragen met de Python-functie input).

Als je deze webapplicatie zo zou uitvoeren, zou je in de JavaScript-console een foutmelding krijgen: “Error: Unable to use SharedArrayBuffer due insecure environment.” Om je webpagina in een veilige context te plaatsen, moet je de HTTP-headers Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy en Cross-Origin-Resource-Policy instellen.

De eenvoudige ingebouwde webserver van Python die we in dit artikel gebruiken, doet dat niet. Maar als je het bestand mini-coi.js via deze GitHub-pagina downloadt en in dezelfde directory als je html-bestand opslaat, en in het element head van je html-pagina vóór alle scripts, links en styles hiernaar verwijst met <script src="./mini-coi.js" scope="./"></script>, werkt dit wel. Laad de pagina, wacht even tot de Python-omgeving is opgestart, en je kunt aan de slag in je interactieve Python-terminal.

Een volledige Python-terminal in je webapplicatie? Dat is maar enkele regels PyScript-code.

Fouten in je code oplossen Als je Python-code een syntaxisfout bevat, zal PyScript die in een rood tekstveld tonen zodra je webapplicatie de Python-code laadt. Helaas betekenen de regelnummers die je te zien krijgt niets, maar je krijgt wel de inhoud van de regel code te zien waar het misgaat. Voor niet al te grote programma’s zul je de bron van de fout wel snel vinden. Het gebruik van een code-editor voor je Python-code zal je ook al wel helpen om fouten te vinden. Het is dan ook een nadeel als je Python-code rechtstreeks in je html-bestand opneemt in een element py-script: je kunt dan niet profiteren van syntax highlighting of andere handigheidjes van een Python-ontwikkelomgeving.

Nog een tip: met de Python-functie print kun je informatie in de JavaScript-console van je webbrowser tonen, wat handig is tijdens het testen van je code.

Watch on YouTube
▼ Volgende artikel
Op zoek naar het ideale Vaderdag-cadeau? Maak kans op een Ninja-airfryer!
© Ninja
Huis

Op zoek naar het ideale Vaderdag-cadeau? Maak kans op een Ninja-airfryer!

Wie regelmatig in de keuken staat, weet hoe prettig het is als een apparaat meerdere taken aankan zonder in te leveren op kwaliteit. De Ninja Foodi MAX Dual Zone Airfryer AF400EU is daar een goed voorbeeld van. Hij frituurt zonder olie, bakt zonder oven en kookt sneller dan je gewend bent. En dankzij de twee gescheiden kookzones is hij ook nog eens razend efficiënt. Speciaal voor Vaderdag mogen we bovendien vier exemplaren weggeven!

De Ninja Foodi MAX Dual Zone Airfryer AF400EU is niet zomaar een airfryer, maar een serieus keukentalent met twee volledig gescheiden kookladen van elk 4,75 liter. Dat betekent dat je moeiteloos een complete maaltijd tegelijk kunt bereiden: bijvoorbeeld een portie kippetjes aan de ene kant en frietjes aan de andere. Dankzij de Sync-functie zijn beide gerechten tegelijk klaar, dus geen lauwe friet meer terwijl het vlees nog moet garen.

En met de Match-functie zet je eenvoudig dezelfde instellingen op beide zones als je juist voor een grotere hoeveelheid van één gerecht gaat. Dat klinkt technisch, maar het komt erop neer dat je minder hoeft na te denken en toch meer op tafel zet. Zelfs vaders die normaal gesproken hun ei nog laten aanbranden krijgen hierdoor ineens vleugels in de keuken.

Lees hier onze review van de Ninja Foodi MAX Dual Zone Airfryer AF400EU

©Ninja

Veelzijdig koken met één apparaat

De meeste keukenapparaten hebben gebruiksaanwijzingen van het formaat boekwerk, maar de bediening van deze airfryer is lekker overzichtelijk. Het digitale display is intuïtief, de knoppen spreken voor zich en de zes vooraf ingestelde functies maken het kiezen makkelijk. Airfryen, bakken, roosteren, opwarmen, drogen of de Max Crisp-stand gebruiken? Alles kan, zonder gedoe met temperatuurinstellingen of baktijden opzoeken. En ja, ook voor de vader die denkt dat een quiche een soort Pokémon is, wordt koken hiermee opeens iets wat hij kan – en misschien zelfs leuk gaat vinden.

Nog een groot voordeel: de Ninja AF400EU is niet alleen sneller dan een oven, hij zorgt ook voor gezonder voedsel. Je gebruikt tot 75 procent minder vet, zonder in te leveren op smaak of crunch. Snacks blijven krokant, kip wordt sappig en groenten behouden hun bite. En als het dan eindelijk tijd is om op te ruimen, blijken ook daar geen excuses meer nodig: de kookladen en de bijbehorende roosters mogen gewoon in de vaatwasser. Geen geschrob, geen gezucht, geen smoesjes.

Vaderdagactie: win een Ninja Foodi MAX Dual Zone Airfryer AF400EU!

Speciaal voor Vaderdag mogen we vier exemplaren van de Ninja Foodi MAX Dual Zone Airfryer AF400EU weggeven. Wil jij er één winnen? Doe dan mee aan onze prijsvraag!

De vraag luidt: Wat is de totale capaciteit van de Ninja Foodi MAX Dual Zone Airfryer AF400EU?

Meedoen is eenvoudig: Stuur je antwoord vóór 10 juni 2025 naar winnen@id.nl met als onderwerp Vaderdagactie. ‼️Vergeet niet je naam en adresgegevens te vermelden‼️ De winnaars krijgen op 16 juni persoonlijk bericht.

▼ Volgende artikel
Van powerbank tot adapter: dit zijn de handigste accessoires voor je laptop
© Daisy Daisy
Huis

Van powerbank tot adapter: dit zijn de handigste accessoires voor je laptop

Wil je het maximale halen uit je laptop? Dan kom je al snel uit bij een reeks accessoires die nét dat beetje extra bieden. Natuurlijk denk je dan aan een goede tas, een losse muis of een extern scherm. Maar er zijn ook minder voor de hand liggende hulpmiddelen die het werken, reizen of ontspannen met je laptop makkelijker en handiger maken.

Meer uit je laptop halen met slimme aanvullingen

Slimme accessoires zorgen voor gemak, comfort en betere prestaties. Ze maken het verschil tussen 'gewoon' werken en écht prettig werken. Van extra aansluitmogelijkheden tot handige tools voor onderweg – er is veel mogelijk. Denk aan: 💻 Accessoires die mobiel werken makkelijker maken 💻 extra aansluitmogelijkheden voor kabels, schermen en netwerken 💻 uitbreidingen voor meer opslag of ergonomisch gemak

Lees ook: Op zoek naar een nieuwe laptop? Dit is waar je op moet letten!

Laptopstandaard: comfortabeler en koeler werken

Een laptopstandaard tilt je scherm op tot een prettig kijkniveau. Dat werkt een stuk prettiger voor je nek en schouders. Ideaal voor aan een bureau, maar ook op de bank geeft het meer stabiliteit. Sommige modellen hebben zelfs een ingebouwde ventilator om de temperatuur van je laptop omlaag te brengen. Minder warmte betekent minder slijtage en een langere levensduur van je laptop.

Powerbank: altijd stroom bij de hand

Onderweg of op reis heb je niet altijd een stopcontact in de buurt. Een krachtige powerbank is dan onmisbaar. Kies er een met voldoende capaciteit – minimaal 20.000 mAh – én voldoende vermogen. Veel laptops hebben minstens 60 watt nodig, sommige lichtere modellen kunnen met 30 watt toe. Varianten met een klein zonnepaneel laden ook op via zonlicht, al gaat dat vrij traag. Handig als extra, maar niet als hoofdbron.

©doucefleur

☀️ + 🔋= 🧑‍💻

Solar powerbanks

Wereldstekker: handig voor op reis

In het buitenland zijn stopcontacten lang niet altijd zoals in Nederland. Met een universele reisstekker (ook wel reisadapter of wereldstekker genoemd) kun je overal terecht. Ook hier is het, net als bij je keuze voor een powerbank, weer belangrijk om erop te letten dat het wattage toereikend is voor je laptop.

Usb-naar-internetadapter: stabiel bekabeld internet

Een wifi-verbinding is de standaard voor laptops, maar zo'n draadloze verbinding is helaas niet altijd stabiel. Vooral op drukke netwerken of in gebouwen met dikke muren kan een kabel betrouwbaarder zijn. Veel moderne laptops hebben geen netwerkaansluiting meer. Met een losse adapter los je dat probleem eenvoudig op. Ga op zoek naar een usb-naar-RJ45-adapter (ook wel ethernetadapter genoemd). Die zijn al te vinden voor minder dan 10 euro. Op veel adapters zitten bovendien extra usb-poorten – altijd handig!

Kaartlezer: bestanden overzetten in één keer

Draadloos bestanden overzetten of gewoon al je foto's in de cloud opslaan werkt over het algemeen prima. Maar een losse kaartlezer kan ook handig zijn. Zeker als je liever werkt met fysieke opslag dan met de cloud. Universele kaartlezers zijn goedkoop, compact en plug-and-play.. Voor een paar euro koop je al een universele kaartlezer, met aansluitingen voor bijvoorbeeld microSD, SDHC en UHS-I.

©Karter13

Een vleugje nostalgie: dvd's en blu-rays afspelen

Dvd-spelers zijn verdwenen uit bijna alle laptops. Heb je nog schijfjes met films, software of back-ups? Dan is een externe speler de oplossing. Voor weinig geld sluit je hem aan via usb en speel je alles alsnog probleemloos af.

Externe harde schijf: ruimte maken en back-ups bewaren

Als de opslagruimte op je laptop volloopt, is een externe harde schijf een logische stap. Je bewaart je bestanden fysiek én hebt een back-up bij de hand. Liever niet afhankelijk van de cloud? Dan is dit een betrouwbare manier om je data veilig te stellen.

Docking station: alles aangesloten in één keer

Met een docking station sluit je met één handeling je laptop aan op meerdere schermen, een toetsenbord, netwerk en andere randapparatuur. Alles via één centrale hub. Ideaal voor vaste werkplekken of als je regelmatig wisselt tussen kantoor en thuis. Sommige modellen hebben ook een ingebouwde laptopstandaard of oplader.