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 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 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 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 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 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 awaitjs.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 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
Pushnotificaties vanaf je thuisserver: zo werkt ntfy
© ID.nl
Huis

Pushnotificaties vanaf je thuisserver: zo werkt ntfy

Als je services op je eigen thuisserver draait, wil je daar ook eenvoudig meldingen van kunnen ontvangen. Ntfy stelt je in staat om eenvoudig pushnotificaties naar je telefoon of computer te sturen. Bovendien kun je ntfy op je eigen thuisserver draaien, zodat je alles in eigen handen hebt. In dit artikel gaan we ermee aan de slag.

Dit gaan we doen

In dit artikel zetten we een ntfy-server op die je zelf beheert. We regelen eerst de randvoorwaarden: hoe je server van buitenaf bereikbaar wordt (bijvoorbeeld via vpn of portforwarding) en hoe je https netjes afhandelt met een reverse proxy en een certificaat van Let's Encrypt. Daarna bouwen we de basis: configuratiebestand, opslagmappen en een draaiende container met Docker.

Vervolgens maken we gebruikers en rechten aan, zodat niet iedereen zomaar kan publiceren of meelezen. Je test met de webinterface en met de mobiele app, zodat je zeker weet dat meldingen ook echt binnenkomen. Tot slot koppel je ntfy aan je eigen tools: eerst met een simpele curl-oproep vanuit een shellscript, daarna met extra's zoals titel, prioriteit en tags. Als je wilt, breid je dat uit naar meldingen met bijlagen, acties (doorklikken naar een url) en integratie vanuit Python. 

Lees ook: Je oude Windows-pc als thuisserver: zo zet je Jellyfin en Syncthing op

Netwerkmonitoringsoftware, een programma dat je Docker-containers bijwerkt, een smarthomecontroller, back-upsoftware, ze hebben allemaal één ding gemeen: ze moeten je meldingen kunnen sturen als er iets gebeurt. Dat kan op verschillende manieren: via e-mail, instant messaging of pushnotificaties naar je telefoon. Dat laatste verloopt doorgaans via een gecentraliseerde dienst zoals Firebase Cloud Messaging (voorheen Google Cloud Messaging) of Apple Push Notification service.

Pushnotificaties zijn handig omdat ze bijna onmiddellijk aankomen en omdat zowel Android als iOS toestaan om in te stellen hoe je ervan op de hoogte wordt gebracht. Wil je pushnotificaties kunnen ontvangen zonder een server onder controle van een partij zoals Google of Apple, dan moet je ook hiervoor je eigen service installeren. Een opensource-project dat dit implementeert, is ntfy.

Werking van ntfy

Je ntfy-server ontvangt meldingen van je programma's via http over een REST-API en zet deze om in pushnotificaties voor de bijbehorende Android- of iOS-app of voor een webpagina op je computer. De API is in de documentatie van het project beschreven, zodat je ook je eigen software met ntfy kunt laten praten. Het project heeft ook een command-line-interface, zodat je bijvoorbeeld shellscripts op je Linux-server eenvoudig pushnotificaties kunt laten verzenden.

Ntfy gebruikt het bekende publish/subscribe-patroon. Een zender publiceert notificaties op een specifiek onderwerp door data te sturen naar een url via een http POST- of PUT-aanvraag. Het onderwerp wordt gedefinieerd door een segment van de url dat volgt op de domeinnaam. Een ontvanger kan zich dan abonneren op dit onderwerp. Elke keer dat de zender daarna een notificatie op dit onderwerp publiceert, stuurt ntfy de data naar alle ontvangers die zich op dit onderwerp hebben geabonneerd. Door ntfy op je eigen server te installeren, heb je de volledige controle over deze notificaties.

Met ntfy kun je services pushnotificaties laten verzenden naar je telefoon of computer.

Serververeisten

De mobiele app van ntfy moet met je server kunnen communiceren om te vragen of er notificaties zijn. Als je ntfy op een server in je lokale netwerk installeert, moet die dus van buitenaf bereikbaar zijn. Dat kun je met portforwarding in je modem regelen of door je telefoon buitenshuis automatisch met een VPN-server op je lokale netwerk te laten verbinden. Heeft je internetaansluiting thuis geen vast ip-adres, dan moet je ook een DynDNS-updater te draaien.

Een andere optie is om ntfy op een VPS (Virtual Private Server) te installeren. Hierop draai je dan ook een reverse proxy voor https-toegang, die een TLS-certificaat van Let's Encrypt opvraagt. Je hebt dan een domein nodig, waarvoor je een DNS A-record naar het ip-adres van je server laat verwijzen. In de rest van dit artikel gaan we uit van een installatie van ntfy op een lokale server met Debian 13 ("trixie") met behulp van Docker Compose.

Basisconfiguratie

Creëer eerst enkele directory's voor ntfy:

$ mkdir -p containers/ntfy/{cache,etc,lib}

Creëer dan het bestand containers/ntfy/etc/server.yml met de volgende configuratie voor ntfy:

base-url: "https://ntfy.example.com"

cache-file: "/var/cache/ntfy/cache.db"

attachment-cache-dir: "/var/cache/ntfy/attachments"

auth-file: "/var/lib/ntfy/user.db"

auth-default-access: "deny-all"

Vervang het domein achter base-url door het domein waarop je ntfy-server draait. Als je gebruikmaakt van een reverse proxy, dan moet dit de url zijn die door de proxy naar ntfy wordt doorgestuurd. Bovendien moet je dan ook een regel behind-proxy: true toevoegen. In de documentatie van ntfy staan voorbeeldconfiguraties voor nginx, Apache2 en Caddy.

Met auth-default-access: "deny-all" tot slot heeft standaard niemand toegang tot onderwerpen. Elke toegang moet dus expliciet worden toegestaan.

Account bij ntfy.sh

De ontwikkelaar van ntfy draait een publiek beschikbare ntfy-server op ntfy.sh. De webinterface daarvan is bereikbaar op https://ntfy.sh/app. Die kun je gratis gebruiken, bijvoorbeeld om ntfy uit te proberen, maar dat komt met beperkingen. Zo kun je geen onderwerpen reserveren en is er een maximum van 250 notificaties per dag en 2 MB per bijlage. Verder is er geen enkele vorm van authenticatie. De enige manier van beveiliging ligt dus in het geheimhouden van je onderwerpen. Die beperkingen heb je niet als je ntfy zelf installeert. Maar als je liever niet zelf een installatie onderhoudt, kun je een betaald plan nemen. Daarmee ondersteun je ook de ontwikkeling van het opensource-project. Dat begint met een Supporter-plan van 5 dollar per maand (circa 5 euro), waarmee je drie onderwerpen kunt reserveren en 2.500 notificaties mag sturen met maximum 25 MB per bijlage.

Betaal voor gebruik van de publieke ntfy-server en ondersteuning van het opensource-project.

Docker Compose

Definieer nu de container in het bestand docker-compose.yaml:

services:

  ntfy:

    image: binwiederhier/ntfy

    container_name: ntfy

    command: serve

    restart: always

    environment:

      - TZ=Europe/Amsterdam

    volumes:

      - ./containers/ntfy/cache:/var/cache/ntfy

      - ./containers/ntfy/etc:/etc/ntfy

      - ./containers/ntfy/lib:/var/lib/ntfy

    ports:

      - 80:80

Ga je voor de aanpak met een reverse proxy, dan definieer je in ditzelfde bestand ook een container voor die reverse proxy.

Start daarna de container met:

$ docker-compose up -d

Als alles goed gaat, is de webinterface van ntfy daarna bereikbaar op het ingestelde domein of ip-adres. Bovenaan links zie je een melding Notifications are disabled. Klik op Grant now om notificaties in je webbrowser toe te staan, en bevestig dit daarna in het dialoogvenster dat je webbrowser toont.

Sta notificaties in je webbrowser toe.

Lees ook: Docker op je NAS: zo draai je Plex, Home Assistant en meer

Notificaties testen

Omdat je ntfy zo geconfigureerd hebt dat alle toegang standaard wordt geblokkeerd, kun je nog niets doen in de webinterface. Je dient dus eerst gebruikers aan te maken en die de toelating te geven om op specifieke onderwerpen te publiceren of zich te abonneren. Open daarvoor een shell in de container van ntfy met de opdracht docker exec -ti ntfy /bin/sh. Als je daarna ntfy user list intypt, krijg je te zien dat anonieme, niet geauthenticeerde gebruikers geen enkele permissies hebben. Met de opdracht ntfy user add --role=admin admin voeg je dan een admin-gebruiker met de naam admin toe. Gebruikers met de rol admin kunnen op alle onderwerpen publiceren en zich erop abonneren. Geef de gebruiker een wachtwoord en bevestig.

Klik nu in de webinterface van ntfy links op Settings en dan onder Manage users op Add user. Vul de url van je ntfy-server in, de gebruikersnaam admin en het wachtwoord dat je zojuist hebt ingesteld. Klik dan links op Subscribe to topic. Kies een naam of klik op Generate name om ntfy een willekeurige naam te laten kiezen en abonneer je dan op het onderwerp met Subscribe. Klik dan op Publish notification en vul hetzelfde onderwerp in. Voer ook een titel en een bericht voor je notificatie in en klik op Send. Als alles goed gaat, verschijnt je testbericht nu in een 'conversatie' met de naam van het onderwerp, en wijst je webbrowser je op een notificatie.

Publiceer notificaties in je webbrowser.

Gebruikersrechten

De webapplicatie is leuk voor een test, maar een mobiele app is vaak handiger. De app van Ntfy voor Android en iOS stelt je in staat om op je telefoon je te abonneren op onderwerpen (publiceren is niet mogelijk) en daarvoor notificaties te ontvangen. Als je de Android-app via F-Droid installeert, is dat zonder ondersteuning voor Firebase; de versie op Google Play gebruikt wél de servers van Google. Je maakt voor je app bij voorkeur een gebruiker aan die alle onderwerpen alleen kan lezen. Dat doe je weer in de shell van de container van ntfy met ntfy user add android om de gebruiker android aan te maken (voer een wachtwoord in) en dan ntfy access android "*" read-only voor de leesrechten.

Open daarna de Android-app en tik op de drie stippen rechtsboven. Kies Settings en stel dan Default server in op het domein van je ntfy-server. Tik daarna op Manage users en Add new user en vul de url van je ntfy-server in, de gebruikersnaam android en het bijbehorende wachtwoord. Tik dan op Add user. Keer dan terug naar het hoofdscherm van de app en klik op het plusicoontje rechtsonder. Voer het onderwerp in dat je tijdens de test in stap 5 hebt gebruikt en tik op Subscribe om je erop te abonneren. Vanaf nu zal de app voor elk ontvangen bericht op dit onderwerp een notificatie tonen. Je krijgt zelfs de al verzonden berichten te zien. Overigens toont de app twee waarschuwingen. Voor betrouwbare notificaties volg je de suggesties om batterijoptimalisaties uit te schakelen en naar WebSockets over te schakelen in plaats van een http-stream.

De Android-app ontvangt een notificatie voor elk bericht dat op een geabonneerd onderwerp wordt verstuurd.

Shellscripts

Nu je hebt getest dat je ntfy-server werkt, is het tijd om je eigen services notificaties te laten uitsturen. Hoe je dat precies configureert, hangt van de service af. Maar je zult altijd eerst een gebruiker met schrijfpermissies voor een specifiek onderwerp moeten aanmaken. Voor een back-upproces dat je op de hoogte moet houden van de status van je back-ups, maak je bijvoorbeeld een gebruiker aan met de opdracht ntfy user add backup in de container van ntfy. Geef die dan schrijfrechten op het onderwerp backup met ntfy access backup backup write-only.

Het publiceren van een bericht op een specifiek onderwerp behelst niet meer dan het sturen van een http POST-aanvraag naar de webserver. Dat kan bijvoorbeeld in een shellscript op je Linux-server met de opdracht curl:

curl -u backup:password -d "Backup successful" ntfy.example.com/backup

Als je in de ntfy-app op je telefoon je op dit onderwerp abonneert, ontvang je deze notificatie nadat het back-upscript is uitgevoerd. Op deze manier is het heel eenvoudig om je eigen shellscripts notificaties te laten verzenden.

Berichten met extra's

Ntfy ondersteunt talloze extra functies om je berichten te laten opvallen of om hun gedrag aan te passen. Je gebruikt deze allemaal door een http-header aan je aanvraag toe te voegen. Zo kun je aan de notificaties van je back-upscript een titel, prioriteit en tags toevoegen. De tags worden als pictogrammen getoond door de mobiele app. Een voorbeeld:

curl -u backup:password -H "Title: Backup failure" -H "Priority: urgent" -H "Tags: warning,skull" -d "Backup unsuccessful" ntfy.example.com/backup

Als de Android-app een bericht met standaardprioriteit ontvangt, doet ze je telefoon kort vibreren en speelt ze een kort geluidje af. Door de prioriteit op urgent te zetten, wordt het standaardnotificatiegeluidje vergezeld van een langer getril van je telefoon, waardoor je onmiddellijk merkt dat dit dringend je aandacht vereist.

Een ntfy-bericht met een titel, prioriteit en pictogrammen.

Plaatjes en lay-out

Ntfy kan ook plaatjes sturen, bijvoorbeeld een foto van een ip-camera die beweging detecteert, maar niet in combinatie met een tekstbericht. Om een bestand naar ntfy te uploaden met curl in een http PUT-aanvraag gebruik je de optie -T en de bestandsnaam. Met de header Filename voeg je de bestandsnaam toe die de ntfy-app je moet tonen. Dat ziet er dan als volgt uit:

curl -u admin:password -T foto.jpg -H "Filename: beweging.jpg" -H "Title: Beweging voordeur" -H "Tags: boom" ntfy.example.com/beweging

Als je een tekstbericht als Markdown opmaakt, kun je wel plaatjes in een tekst opnemen, maar dan moet je naar het bestand linken. Alleen ntfy's webinterface ondersteunt dit; de mobiele app toont gewoon de Markdown-brontekst. Een Markdown-bericht stuur je door de header Markdown: yes of Content-Type: text/markdown aan je http POST-aanvraag toe te voegen. Ntfy ondersteunt overigens alleen beperkte Markdown-functies, zoals vette en schuine tekst, lijsten, links en afbeeldingen.

Je services kunnen ook plaatjes naar ntfy sturen.

Acties

Je ontvangt de notificaties van ntfy in de app in een 'conversatie' per onderwerp. Wanneer je op een notificatie tikt, kopieert dit standaard gewoon de tekst van het bericht naar het klembord. Als je de header Click: URL toevoegt, opent de app die url wanneer je op de notificatie tikt. Zo kun je in een notificatie van je back-upscript bijvoorbeeld een link naar de webinterface van je back-upserver opnemen om het gemelde probleem snel te onderzoeken.

Je kunt ook tot drie 'actieknoppen' definiëren, die dan onderaan een notificatie verschijnen. Door op een van die knoppen te tikken, open je een website of app, activeer je een Android broadcast intent waarop andere apps dan weer kunnen reageren, of zend je een http POST-, PUT- of GET-aanvraag. De manier om dit alles te definiëren is wat omslachtig, maar wordt volledig in de documentatie van ntfy uitgelegd.

Klik op een van de knoppen van het bericht in ntfy om een actie uit te voeren.

Python-code

Curl is natuurlijk niet de enige tool waarmee je notificaties naar je ntfy-server kunt sturen. Sommige tools bieden rechtstreeks ondersteuning voor notificaties via ntfy. Dan hoef je alleen maar het domein van je server, het onderwerp, de gebruikersnaam en het bijbehorende wachtwoord in te vullen. Maar ook in je eigen Python-scripts kun je eenvoudig ondersteuning voor ntfy inbouwen. Dat gaat via het pakket Requests, waarmee je http POST-aanvragen naar de server stuurt. Een eenvoudig voorbeeld ziet er als volgt uit:

import requests

requests.post("http://ntfy.example.com/backup",

    data="Backup unsuccessful",

    headers={

        "Authorization": "Basic Z2VicnVpa2Vyc25hYW06d2FjaHR3b29yZA==",

        "Title": "Backup failure",

        "Priority": "urgent",

        "Tags": "warning,skull"

    })

Met de header Authorization stel je http Basic-authenticatie in. De tekenreeks die na Basic komt, is een Base64-codering van de gebruikersnaam en het wachtwoord met een dubbele punt ertussen. Je creëert die codering op je Linux-systeem met de opdracht echo "Basic $(echo -n 'gebruikersnaam:wachtwoord' | base64)".

Sssssssssschattig

Speciaal voor de kleinste Python-fans

En verder

Ntfy biedt een betrouwbare manier om notificaties van allerlei services te centraliseren, terwijl je zelf de volledige controle behoudt. Het programma blinkt uit in flexibiliteit om het overal in te integreren. Als een service bijvoorbeeld geen http POST-aanvragen ondersteunt, kun je ook http GET-aanvragen doen. En als een service je niet de mogelijkheid geeft om de headers aan te passen, laat ntfy je toe om de berichten inclusief headers in JSON-formaat door te sturen. En als een service webhooks ondersteunt maar daarvoor zijn eigen JSON-formaat gebruikt, kan ntfy die met berichtsjablonen omzetten naar leesbare berichten.

Ook via e-mail is ntfy te integreren. Je kunt bijvoorbeeld berichten die op je ntfy-server aankomen automatisch laten doorsturen naar een SMTP-server om ze ook als e-mail te ontvangen. Maar ook de andere richting is voorzien: ntfy kan dan zelf een ingebouwde SMTP-server draaien, handig voor services die alleen maar notificaties via e-mail ondersteunen. Elk onderwerp op de ntfy-server heeft dan een bijbehorend e-mailadres op je domein. De service hoeft dan alleen maar een e-mail naar dat adres te sturen om berichten op dat onderwerp te publiceren op je ntfy-server. Deze en andere geavanceerde functies zijn uitgebreid gedocumenteerd op de website van ntfy.

De documentatie van ntfy is uitgebreid en praktisch. 

▼ Volgende artikel
Nieuwe FromSoftware-game The Duskbloods komt echt alleen naar Switch 2
Huis

Nieuwe FromSoftware-game The Duskbloods komt echt alleen naar Switch 2

The Duskbloods, de nieuwe game van Elden Ring- en Dark Souls-ontwikkelaar FromSoftware, zal echt alleen op Nintendo Switch 2 uitkomen.

Dat heeft de ontwikkelaar benadrukt bij het bekendmaken van zijn kwartaalcijfers (via VGC). Daarbij werd ook nog eens benadrukt dat The Duskbloods nog altijd gepland staat om ergens dit jaar uit te komen, net zoals de Switch 2-versie van Elden Ring.

Over de exclusieve Switch 2-release van The Duskbloods: "Het wordt verkocht via een samenwerking met Nintendo, met verkoopverantwoordelijkheden verdeeld per regio. De game komt alleen voor Nintendo Switch 2 beschikbaar." Daarmee is dus duidelijk gemaakt dat Nintendo een nauwe samenwerking met FromSoftware is aangegaan voor de game en dat het spel niet zomaar op andere platforms uit zal komen.

Over The Duskbloods

The Duskbloods werd begin vorig jaar aangekondigd in een speciale Nintendo Direct waarin de eerste Switch 2-games werden getoond, maar sindsdien zijn er geen nieuwe beelden van het spel uitgebracht. Zoals gezegd is de game ontwikkeld door FromSoftware, het Japanse bedrijf dat naam voor zichzelf heeft gemaakt met enorm uitdagende spellen, waaronder de Dark Souls-serie en Bloodborne. Met de openwereldgame Elden Ring scoorde de ontwikkelaar enkele jaren geleden nog een megahit.

Watch on YouTube

The Duskbloods wordt een PvPvE-game, waarbij spelers het dus tegen elkaar en tegen computergestuurde vijanden opnemen. Maximaal acht spelers doen aan potjes mee. Na het kiezen van een personage in een hub-gebied wordt men naar een gebied getransporteerd waar er met andere spelers en vijanden gevochten wordt, al kan men soms ook samenwerken om vijanden te verslaan.

Spelers besturen een 'Bloodsworn', wezens die dankzij een speciaal bloed dat in hun lichaam zit meer krachten tot hun beschikking hebben dan reguliere mensen. Ondertussen is het einde van de mensheid nabij, en bestaat de wereld uit verschillende tijdperken, wat voor een mengelmoes van stijlen zorgt.