Appsemble wordt het vaakst ingezet voor formulieren, registraties en processen bij gemeenten en andere organisaties. Daar is het platform sterk in, maar het is niet de grens ervan. Om te onderzoeken hoe ver we komen met vormgeving, offline werken en hardware, bouwden we Rooster: een app om een nachtlampje in de kinderkamer te bedienen.
Wat Rooster doet
Rooster bedient een Fisher-Price Lumalou (GLD09) rechtstreeks over Bluetooth. Je voegt een lamp toe, geeft hem de naam van de kamer en bedient hem daarna vanaf een dashboard: nachtlicht, geluid, dutjes met een eigen duur, opgeslagen scenes en een slaaptrainer die laat zien wanneer het bedtijd is en wanneer het weer tijd is om op te staan.
Daarnaast stel je per dag een routine samen uit stappen als tanden poetsen, aankleden, voorlezen en opruimen. Een ingerichte dag kopieer je in een keer naar de weekdagen die je aanvinkt, zodat je niet zeven keer hetzelfde invult.
Twee dingen zitten er bewust niet in: een account en een cloud. Er is geen server die je lamp of je kind kent. De app praat rechtstreeks met de lamp via Web Bluetooth in de browser en bewaart de instellingen in IndexedDB op het apparaat zelf. Ben je niet in de buurt van de lamp, dan kun je je instellingen alsnog aanpassen. Ze staan dan klaar en worden geactiveerd zodra de lamp weer in bereik is.
De lamp waarvoor we dit bouwden werkt zelf nog prima. Alleen de app van de fabrikant is verdwenen, en dat is een verhaal op zich: als de app verdwijnt, wordt werkende hardware afval.
Hoe het gebouwd is
Rooster is een gewone Appsemble-app: een app-definitie in YAML, met pagina’s die uit blokken zijn opgebouwd. Het grootste deel komt uit het platform zelf, met blokken als markdown, button-list, html, form, list, tiles en detail-viewer. Twee blokken zijn nieuw en specifiek voor deze app: een blok voor de lampenplank op het startscherm en een blok dat de lamp zelf toont, inclusief de gloed die bij de gekozen stand hoort.
De Bluetooth-logica zit in de app-controller. Dat is een stuk TypeScript dat bij de app hoort en zijn eigen acties aanbiedt aan de blokken, net zoals de ingebouwde acties dat doen. De blokken weten daardoor niets van Bluetooth of van het protocol van de lamp: ze roepen een actie aan en tonen het resultaat. Opslag loopt via de gewone storage.read en storage.write acties.
Het uiterlijk komt volledig uit het thema: een donker palet in themavariabelen, twee eigen lettertypen en per blok een eigen stylesheet. Er is geen los framework aan te pas gekomen.
Wat het platform eraan overhoudt
Een app die goed werkt maar er niet uitziet, wordt minder gebruikt. Daarom is Rooster voor ons vooral een aanleiding om de vormgevingskant van het platform verder te brengen. Wat we hier uitvinden, landt in de blokken die iedereen gebruikt: ruimere maatvoering voor afbeeldingen, een footer-blok om een pagina mee af te sluiten, een markdown-veld met instelbare hoogte en pagina’s met een grid-indeling die meebeweegt met de schermbreedte.
Dat geldt ook de andere kant op. De offline-afhandeling van Rooster, waarbij wijzigingen bewaard blijven tot het apparaat weer bereikbaar is, is precies het patroon dat een inspectie- of registratie-app in het veld nodig heeft.
Waar het nog niet werkt
Web Bluetooth zit niet in elke browser. Chrome op Android en op desktop werkt; op Linux moet je Web Bluetooth eerst aanzetten via een browservlag. Firefox en Safari ondersteunen het niet. Op iPhone en iPad open je Rooster daarom in Bluefy, een browser die Web Bluetooth wel aanbiedt. Rooster controleert dat vooraf en laat zien wat er nodig is in plaats van stilletjes niets te doen.
Zelf iets bouwen dat niet op een formulier lijkt
Rooster is een uiterste, maar het laat zien waar de ruimte zit: een app die met dezelfde bouwstenen is gemaakt als een aanvraagformulier, maar er in niets op lijkt. Wil je sparren over wat er voor jouw organisatie mogelijk is, neem dan contact met ons op.
