Welke competenties heeft een leraar nodig voor vibecoding van wegwerpapplicaties?

De aanleiding

Eigenlijk was ik op zoek naar voorbeelden van het gebruik van AI Studio voor het maken van eenvoudige webapplicaties. Die kwam ik niet tegen. Wel heel veel video’s over andere zaken rond het ontwikkelen van webapplicaties met AI, zoals deze hieronder.

Toegegeven, het resultaat is een stuk complexer dan de scriptjes/HTML-pagina’s die ik tot nu toe laat maken. Maar complexiteit is geen doel op zich. En als het doel is om een leraar of docent in staat te stellen eenvoudige wegwerpapplicaties te maken, dan wil je niet van die leraar een volwaardige programmeur maken. Ik wilde het voor mezelf op een rij zetten aan de hand van een concreet voorbeeld.

Weefgetouw Digitale Geletterdheid

Het was er zo eentje van de grote stapel “als ik er nog eens tijd voor heb”: het Weefgetouw Digitale Geletterdheid. Een instrument dat samen met iXperiumpartners ontwikkeld is en dat helpt bij het inzichtelijk maken van de mate waarin een onderwijsinstelling (nu al) aandacht besteedt aan digitale geletterdheid. Gericht op het primair onderwijs en al een aantal keer ingezet, o.a. tijdens de Masterclass Digitale Geletterdheid. Het instrument wordt door de deelnemers erg gewaardeerd, maar heeft door de technische uitvoering een paar ‘beperkingen’. De tool is gemaakt in Miro, een samenwerkingsplatform met heel veel mogelijkheden, die je lang niet allemaal nodig hebt voor de tool zelf. Elke keer als je het weefgetouw wilt invullen, dan moet je een nieuwe kopie maken van het werkblad. Daarvoor moet je sowieso een lege kopie bewaren omdat er geen eenvoudige manier is om alle kaartjes weer op de oorspronkelijke plek te leggen.
Het ontwikkelen van een aparte applicatie was tot nu toe niet echt een optie omdat het qua ontwikkelkosten al snel in de papieren loopt en als je zo’n toepassing op basis van een serverapplicatie met database maakt, dan moet je hosting en beheer regelen.
De Miro-toepassing wordt gedeeld onder een Naamsvermelding-NietCommercieel 4.0 Internationaal Creative Commons licentie gedeeld, dus een afgeleid product maken (met naamsvermelding) is toegestaan.

AI Studio to the rescue

Ik had al de nodige ervaring met het maken van “wegwerpapplicaties” met AI Studio, dus wilde ik dat hier ook proberen. Hieronder leg ik de stappen uit in een video, lees je liever, onder de video gaat het verder. Na het opnemen van de video heb ik een paar tweaks toegepast om de toepassing responsief te maken.

Het eindresultaat live uitproberen: HTML Weefgetouw Digitale Geletterdheid

Poging 0: was een simpele prompt met link naar https://miro.com/app/board/uXjVKZwpNJU=/
AI Studio blijkt niet zelf de inhoud van een Miro werkblad te kunnen bekijken, AI Studio gaf de HTML van een generieke versie gebouwd op mijn beschrijving. Die heb ik niet eens opgeslagen,

Poging 1: Daarop heb ik een schermfilmpje gemaakt waarin ik de Miro door liep en toelichting gaf bij de tool.
Resultaat: poging-1.html – leek er nog niet echt op

Poging 2: Ik heb daarop een screenshot toegevoegd en wat uitleg dat het nog niet werkt.
Resultaat: poging-2.html – niet veel beter

Poging 3: Ik heb daarop een schermfilmpje toegevoegd om te laten zien dat het nog niet werkte.
Resultaat: poging-3.html – nog steeds niet

Poging 4: Aangegeven dat het nog steeds niet werkt, ook geen foutmelding.
Resultaat: een volledig herschreven versie – die het nog steeds niet deed.

Poging 5: Ik begon te twijfelen of het zou gaan lukken, soms komt ook AI-studio er niet uit. Niet veel nieuwe info gegeven, alleen dat het nog steeds niet werkte. Het leek een trigger te zijn voor AI studio om het nóg anders aan te pakken.
Resultaat: versie-5-werkend.html – succes!

Versie 6: Nu ik een werkende versie had, kon ik functionaliteit gaan uitbreiden. De tool is pas nuttig als ik het resultaat kan opslaan en openen vanaf schijf, want één keer refreshen van het scherm en je bent je resultaat kwijt. Dus beschreven als extra feature. Gelukkig ging dat meteen goed.
Resultaat: – versie-6-save.html – nice!

Versie 7: Alle leerdoelen toevoegen.
Ik had nu een werkende basis, de mogelijkheid om inhoud op te slaan en weer te openen, maar nog lang niet alle leerdoelen zaten erin. Helaas bleek de manier waarop de tabel in Miro opgebouwd was nogal een uitdaging. Ik kon de inhoud van de Miro naar CSV exporteren maar dan nog bleef de gelaagde structuur van inhoudslijn, subdomein, label en competenties per fase niet goed behouden.
Uiteindelijk heb ik de verschillende onderdelen, één voor één gekopieerd vanuit Miro naar een Excel waarbij ik die structuur herhaalde op een manier waarop ik er vanuit ging dat AI studio dat kon begrijpen.
Ik heb er eerst een paar gedaan, toen geprobeerd of de conversie door AI Studio lukte – dat deed het.
Daarna heb ik de hele tabel overgezet – alle 268 leerdoelen.

Dat ging goed, maar het werd wel heel erg veel aan de linkerkant. Dus vroeg ik AI Studio om de subdomeinen en labels inklapbaar te maken. Helaas ging het de eerste keer mis, AI Studio had een syntax-fout geïntroduceerd in de json. Daarna ging het goed.
Resultaat: versie-8-inklappen.html – nice!

Versie 9: Printen naar PDF
Tijd voor wat optimalisatie: ik wil de tabel ook kunnen printen, lees: als PDF opslaan. Kan dat?
Jazeker!
Resultaat: versie-9-print-pdf.html

Versie 10: Wie niet weg is, is gezien.
Toch bedacht dat het handiger is om de json met de inhoudslijnen buiten de html op te slaan, dus gevraagd voor aangepaste versie.
Resultaat:  versie-10-json-extern.html en  inhoudslijnen.json
Het voordeel is dat ik deze json kan aanpassen in notepad++ en dan leesbare json kan genereren in plaats van het compacte, maar tamelijk onleesbare format van AI Studio zelf.

En daarmee zijn we voor nu aan het einde van deze sessie gekomen. Tien versies voordat het resultaat er was, maar ja, ook geen simpele klus en nu een app die deelbaar is zonder afhankelijk te zijn van toegang tot Miro. Grappige functionaliteit is o.a. dat als je in het save-bestand bv alleen leerjaar 4 t/m leerjaar 8 opneemt, dit na laden er ook voor zorgt dat in de interface je alleen die leerjaren ziet.
Zo kun je ook de ‘vakken’ aanpassen in ofwel de html ofwel het save-bestand. Dus een versie voor onderbouw VO is ook zo gemaakt. En natuurlijk kun je de inhoudslijnen ook eenvoudig wijzigen. Niet slecht toch voor een no-code applicatie?

Versie 11 t/m 16: Responsiviteit.
Ik kon het niet laten. Op mijn laptop zag het er allemaal nog net niet goed genoeg uit. Daarom heb ik, in een paar stappen, responsiviteit aan de interface toe laten voegen. De knoppen staan nu in de balk boven bij de titel en blijven daar staan, de kolomkoppen voor de jaren en de rijkoppen voor de vakken blijven nu staan waar ze zichtbaar blijven en de niveaus binnen de inhoudslijnen zijn compacter geworden.

Het resultaat delen

Ik heb het resultaat op mijn server gezet: HTML Weefgetouw Digitale Geletterdheid
Geen database nodig, het is een HTML-document en een json-bestand. Die kun je dus op heel veel verschillende plekken draaien. Ik heb de bestanden ook gedeeld via Github.com.
Als je er mee aan de slag wilt, dan kun je dat op een paar verschillende manier doen:
#1 Gewoon vanaf mijn server: Er wordt geen data op mijn server opgeslagen, je kunt je eigen kopie van de indeling opslaan en weer openen. Ik hoef er niets voor te doen, ideaal dus.
#2 Door de bestanden van github te downloaden en dan zelf te hosten. Dan weet je helemaal 100% zeker dat je het kunt blijven gebruiken zonder afhankelijk te zijn van het in de lucht zijn van mijn server. Door de externe json werkt het bestand niet zomaar meer vanuit een lokale map, ik zal nog kijken of ik dat aangepast krijg maar zo cruciaal vind ik dat niet.

Wil je ondersteuning bij het gebruik van het Weefgetouw? Mail dat met mijn collega’s Carolien van Rens of Nieske Coetsier. Die helpen je graag verder op weg. Zij kunnen ook sessies begeleiden met je team, al kan dat (uiteraard) niet gratis.

Benodigde competenties van een leraar / docent

Terugkijkend op dit ontwerpproces, is het zeker niet zo dat een leraar helemaal niets hoeft te weten van het ontwikkelen van webapplicaties. Om inzichtelijk te maken welke competenties nodig zijn, maak ik hieronder gebruik van het Digital Competence Framework for Educators (DigCompEdu), inclusief het AI-supplement en natuurlijk het Raamwerk docentcompetenties onderwijs met ict.

 DigCompEdu competenties (+ AI-supplement) nodig voor het ontwikkelen van een HTML-versie van het Weefgetouw Digitale Geletterdheid

De basisversie van DigCompEdu heeft geen datageletterdheid, computational thinking en ethisch gebruik van AI, terwijl dat in dit geval toch echt wel relevante competenties zijn. DigCompEdu maakt onderscheid in 6 niveaus (A1, A2, B1, B2, C1, C2) van competenties. Het veronderstelde niveau van de genoemde competenties is niet heel hoog, zeker niet op strategisch niveau of heel innovatief. Maar wel betekenisvol gebruik en nieuwsgierigheid. 

Competenties uit het Raamwerk Docentcompetenties Onderwijs met ict nodig voor het ontwikkelen van een HTML-versie van het Weefgetouw Digitale Geletterdheid

Het Raamwerk Docentcompetenties kent geen niveaus, maar heeft wel standaard (ook zonder AI-bijlage) al zaken als informatie-, data- en mediageletterdheid en computational thinking in het raamwerk. De dimensie Onderwijs ontwerpen, uitvoeren en evalueren in het raamwerk is breder dan alleen het onderwijs zelf ontwerpen. Het evalueren en (waar nodig) bijstellen van het onderwijs (doel van het weefgetouw), het begeleiden van de ontwikkeling van een nieuwe digital bron (hulpmiddel), horen hier ook bij. Het daadwerkelijk ontwikkelen van de HTML-versie, maar ook het gebruik ervan met collega’s valt absoluut onder het innoveren met ict, communiceren en samenwerken én de lerende professional.
Je zou de aandacht voor de digitale geletterdheid van de leerling hier ook nog bij kunnen zetten, maar dat is echt voornamelijk het einddoel van het inzetten van de tool, minder van het ontwikkelen ervan. Maar goed, het is ook niet echt een keiharde vergelijking.

Conclusie: ook het kunnen maken van wegwerpapplicaties die niet veel onderhoud gaan krijgen, niet business critical zijn en “slechts” met prompts in AI-studio gemaakt worden, vraagt het nodige van een leraar. Ben jij leraar en vind je dat je deze competenties hebt? Doe je al aan vibecoding van wegwerpapplicaties? Laat het hieronder weten!

Disclaimer

Deze versie van het weefgetouw is een proof of concept, geen officieel iXperium-product. Ik heb het gebruikt om voor mezelf op een rij te zetten welke competenties een leraar nodig heeft.