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
Review Tefal AeroSteam – Zuigfunctie maakt stomen makkelijker
© AK | ID.nl
Gezond leven

Review Tefal AeroSteam – Zuigfunctie maakt stomen makkelijker

Bij gewone kledingstomers moet je de stof met één hand straktrekken terwijl je met de andere hand stoomt. Dat betekent dat je kleding ergens moet ophangen – aan een deur, haak of kastknop. De Tefal AeroSteam werkt anders: dankzij de verstelbare zuigkracht wordt de stof automatisch strak getrokken. Hierdoor kun je hem overal gebruiken, ook op plekken waar niets is om je kleding aan op te hangen. Tijd voor een test.

Uitstekend
Conclusie

De Tefal AeroSteam hoort met zijn adviesprijs van 129,99 euro bij de duurdere kledingstomers. Zijn snelle opwarmtijd, drie verschillende standen, lange snoer en de zuigkracht maken de hogere prijs begrijpelijk. Over het algemeen haalt hij kreukels inderdaad snel en makkelijk weg, maar bij sommige stoffen, zoals linnen structuur, is het resultaat wat minder. Hij is erg makkelijk in gebruik; wel is het jammer dat het waterreservoir snel leeg is en dat je hem niet horizontaal kunt gebruiken.

Plus- en minpunten
  • Drie standen
  • Zuigfunctie
  • Gebruiksgemak
  • Erg snel opgewarmd
  • Lang snoer
  • Inhoud waterreservoir
  • Niet horizontaal te gebruiken

Wanneer grijp je naar een kledingstomer? Meestal is dat als je snel van de kreukels af wilt. Wat dat betreft verrast de Tefal AeroSteam met zijn opwarmtijd: heb je het waterreservoir gevuld en zet je hem aan, dan is hij in 30 seconden gebruiksklaar. Dat zie je (aan het blauwe lichtje dat niet meer knippert) en dat hoor je door een duidelijk geluidssignaal.

Gebruiksgemak

Op het apparaat zitten naast de aan-/uitknop nog twee knoppen: eentje die je indrukt om te beginnen met stomen en eentje waarmee je tussen de drie verschillende standen schakelt: alleen stoom, stoom met zachte zuigkracht en stoom met turbo zuigkracht. Op die zuigkracht komen we verderop nog terug.

Wat betreft de standen is de vuistregel dat hoe delicater de stof, hoe lager de stand die je kiest. Maar dat blijft een beetje uitproberen. Op ons testmateriaal (een kantoenen hemdje, een T-shirt, een overhemd en een linnen blouse) werkte de middelste stand (stoom + zachte zuigkracht) over het algemeen het meest effectief. Alleen bij de linnen blouse hebben we teruggeschakeld naar alleen stomen; doordat de stof van nature ongelijk is (linnenstructuur) vonden we de zuigkracht juist niet handig.

Erg fijn vonden we het lange snoer (2,6 meter), waardoor we genoeg bewegingsvrijheid hadden. Ook het gewicht (1,4 kilo) is prima: het is niet zo dat je na één kledingstuk al een lamme arm hebt van alleen het apparaat omhooghouden. De driehoekige vorm van de zoolplaat is ook prettig: dat maakt het makkelijk om bijvoorbeeld langs knoopjes te stomen.

©AK | ID.nl

Door de vorm van de zoolplaat kun je overal makkelijk bij.

Zuigkracht

Zoals gezegd is de Tefal AeroSteam uitgerust met zuigkracht. Schakel je een van de twee standen waarop dit werkt, dan hoef je in principe zelf de kleding niet meer strak te trekken; dat doet het apparaat dan automatisch. Daar komt wel wat geluid bij kijken, geluid dat in de verte – niet heel vreemd – aan een stofzuiger doet denken. Staat de zuigstand aan, dan zie je inderdaad hoe de stof tegen de zoolplaat wordt gezogen.

Voor het beste resultaat houd je in je vrije hand een hanger met het te stomen kledingstuk erop. Dat geeft je meer vrijheid dan wanneer het kledingstuk aan een hangertje aan de kast hangt. In principe werkt dit goed: je kunt het kledingstuk zo makkelijker draaien of even meer in het licht gaan staan om te kijken of de kreukels overal uit gaan. Daarbij wel een kleine kanttekening: dat geldt vooral voor kleding die niet te zwaar is, zoals een shirtje of een overhemd. Bij het stomen van een spijkerjasje vonden we het zelf toch makkelijker om de jas op de kapstok te laten hangen. Maar dat kan ook gelegen hebben aan ons gebrek aan spierballen…

©AK | ID.nl

Je schakelt makkelijk tussen de verschillende standen.

Resultaat

In totaal hebben we vijf kledingstukken aan de stoomtest onderwerpen: een katoenen hemdje, een dun T-shirt, een wat zwaarder overhemd, een linnen blouse en een spijkerjasje. De beste resultaten bereikten we op het hemdje en op het overhemd. De hardnekkige kreukels die daar in zaten, waren in een mum van tijd verdwenen. Het dunne T-shirt knapte ook behoorlijk op, maar de zuigstand veroorzaakte daar af en toe juist nieuwe kreukels (net zoals dat weleens gebeurt wanneer je aan het strijken bent). Het lukte ons niet om de linnen blouse kreukvrij te krijgen, maar dat heeft vooral te maken met de bobbelige structuur van de stof. Ook met een gewoon strijkijzer zou dit ons niet gelukt zijn.

Aangenaam verrast waren we over de resultaten op het spijkerjasje. Daar hoefden geen kreukels uit, maar omdat het veel gedragen wordt, kon het wel een opfrisbeurt gebruiken. Dat lukte prima, met de turbostand. Na afloop rook het jasje aanmerkelijk frisser dan vóór de behandeling.

©AK | ID.nl

Kleine minpuntjes

Een waterreservoir met een inhoud van 100 milliliter is redelijk gangbaar bij kledingstomers, maar er zijn er ook behoorlijk wat waarin je zo'n 200 milliliter kwijt kunt. Een voorbeeld daarvan is de Philips GC810/20), die qua prijs ongeveer een tientje meer kost dan de AeroSteam. Tefal heeft zelf ook 200 ml-modellen in het assortiment. Wij vinden het daarom jammer dat er bij de AeroSteam is gekozen voor een capaciteit van 100 milliliter. Dat zou volgens Tefal zelf genoeg moeten zijn voor het stomen van ongeveer drie overhemden of vier T-shirts, maar in onze test haalden wij dat niet. We moesten echt een paar keer bijvullen. Nu is het natuurlijk wel zo dat je in het dagelijks gebruik niet je hele was wilt wegwerken (daar heb je je strijkijzer voor), maar waarschijnlijk alleen net dat ene shirtje of jasje kreukvrij wilt maken; dan heb je er wel voldoende aan. Dat bijvullen gaat overigens heel makkelijk en het dopje sluit het reservoir vervolgens lekvrij af.

©AK | ID.nl

Het waterreservoir had wat ons betreft wel wat meer inhoud mogen hebben.

Ook hadden we het fijn gevonden als de AeroSteam ook horizontaal te gebruiken zou zijn (dat maakt het wegwerken van een kreukel soms net wat gemakkelijker), maar dit kan niet. Sterker nog: in de handleiding wordt zelfs expliciet benadrukt dat je de stomer nooit horizontaal mag gebruiken. Maar goed: het is dan ook geen strijkijzer, dus ook hier kunnen we overheen stappen.

Tefal AeroSteam kopen?

Al met al is de Tefal AeroSteam een prima kledingstomer, een mening die ook naar voren komt uit tientallen gebruikersreviews op Kieskeurig.nl.  Zijn snelle opwarmtijd, drie verschillende standen, lange snoer, de zuigkracht en het gebruiksgemak zijn echte pluspunten. Over het algemeen haalt hij kreukels inderdaad snel en makkelijk weg, hoewel bij sommige stoffen, zoals linnen structuur, het resultaat wat minder is. Enige minpunten zijn eigenlijk het feit dat het waterreservoir snel leeg is en dat je hem niet horizontaal kunt gebruiken. Maar dat weegt niet op tegen het gemak waarmee je er snel even een kledingstuk netjes mee maakt of opfrist.

▼ Volgende artikel
Hoe werkt een Quooker eigenlijk?
© Quooker
Huis

Hoe werkt een Quooker eigenlijk?

Een Quooker lijkt op het eerste gezicht een gewone kraan, maar wie zo'n systeem eenmaal in huis heeft, wil vaak niet meer zonder. Met één draai of druk komt er direct kokend water uit de kraan. Ideaal voor thee, koken of schoonmaken. Maar hoe werkt zo'n Quooker eigenlijk precies? En wat gebeurt er allemaal onder het aanrecht? In dit artikel lees je er alles over.

Wat is een Quooker?

De naam Quooker is een samentrekking van 'quick cooker' – een snelle manier om kokend water te krijgen. In de basis bestaat het systeem uit twee onderdelen: een speciale kraan op het aanrecht en een reservoir dat onder het aanrecht wordt geplaatst. Sommige modellen leveren naast kokend water ook warm, koud, bruisend of gekoeld water.

Hoewel Quooker een merknaam is, wordt de term vaak gebruikt als soortnaam voor kokendwaterkranen. Toch is het een gepatenteerd systeem dat op een andere manier werkt dan veel van de goedkopere alternatieven.

Het hart van het systeem: het reservoir

Onder het aanrecht bevindt zich het reservoir, dat meestal in een keukenkastje wordt geplaatst. Hierin wordt een voorraad water continu op 110°C gehouden onder druk. Omdat het reservoir is geïsoleerd, blijft de warmte behouden zonder dat er voortdurend veel energie nodig is. Je kunt het vergelijken met een thermosfles, maar dan geavanceerder en onder druk.

Doordat het water boven het kookpunt zit en onder druk wordt bewaard, kookt het pas als het uit de kraan komt. Dat voorkomt borrelend water in het reservoir zelf en maakt het systeem veiliger. Pas zodra je de kraan opent, ontsnapt de druk en wordt het water omgezet in 'echt' kokend water (100 °C).

Zo komt het water uit de kraan

De kraan op het aanrecht is speciaal ontworpen om kokend water veilig te kunnen doseren. Afhankelijk van het model moet je een draai-, druk- of duwbeweging maken, vaak met een extra beveiliging zoals een dubbele druk- en draaibeweging om per ongeluk gebruik te voorkomen. Zodra je de kraan opent, stroomt er direct kokend water uit.

Bij modellen met meerdere functies, zoals de Fusion of Flex, komt koud, warm en kokend water allemaal uit één kraan. Bij een Nordic-model zijn er aparte kranen: één voor gewoon water en één voor kokend water.

©Quooker

Veiligheid voorop

Veiligheid is een belangrijk aandachtspunt bij kokendwaterkranen. De Quooker-kraan heeft een vernevelde straal, waardoor de kans op ernstige brandwonden klein is. De buitenkant van de kraan wordt bovendien niet heet, ook niet bij veelvuldig gebruik. Daarnaast is de kraan vast gemonteerd; hij kan dus niet omvallen. En omdat het water constant op 110°C  gehouden wordt, is er ook geen kans op legionella. Tot slot zorgt de bediening (drukken en draaien) ervoor dat de kans dat iemand per ongeluk kokend water aftapt, klein is. En waar we 'iemand' zeggen, bedoelen we natuurlijk ook kinderen! Ook zie je aan de gekleurde ring of je met kokend water te maken hebt: rood = heet!

©Quooker | Inga Powilleit

Energieverbruik en efficiëntie

Op het eerste gezicht lijkt het energieverslindend om continu water op 110°C te houden. Maar door de goede isolatie verbruikt het reservoir verrassend weinig stroom: gemiddeld zo'n 10 watt in stand-by. Daarmee is het systeem zuiniger dan het meerdere keren per dag aanzetten van een waterkoker, zeker in huishoudens waar veel gebruik wordt gemaakt van heet water. Ter vergelijking: een Quooker verbruikt in 170 minuten stand-by ongeveer evenveel energie als een waterkoker in 1 minuut. Het totale jaarverbruik ligt op ongeveer 511 kWh voor een gemiddeld gezin; naast het verbruik in stand-by moet je natuurlijk ook rekening houden met de stroom die nodig is om steeds nieuw water op te warmen.

Bij sommige modellen kun je een Quooker ook combineren met een zogenaamde COMBI of COMBI+ boiler. Daarmee levert het systeem niet alleen kokend water, maar ook direct warm water voor bijvoorbeeld de keukenkraan. Dat voorkomt wachttijd en verspilling van water terwijl je wacht op warm water uit de cv-ketel.

Ook bruisend en gekoeld water

Wil je naast kokend water ook gekoeld en/of bruisend water uit de kraan, dan kun je het systeem uitbreiden met de Quooker CUBE. Dit is een aparte koelunit die naast het reservoir wordt geplaatst. Hierin zit ook een CO₂-cilinder waarmee je zelf bruiswater kunt tappen. De CUBE koelt het water tot ongeveer 5°C.

Samenvattend

Een Quooker werkt op basis van een drukreservoir waarin water op 110°C wordt gehouden. Zodra je de kraan opent, ontsnapt de druk en krijg je direct kokend water. Dankzij goede isolatie is het energieverbruik laag. De bediening is kindveilig en de straal is verneveld om brandwonden te voorkomen. Met extra opties zoals de COMBI-boiler of de CUBE-unit kun je het systeem uitbreiden voor warm, gekoeld en bruisend water. Je hebt dus veel mogelijkheden; laat je daarom goed voorlichten in de winkel waar je een Quooker wilt kopen.