Bolt.new: Een praktische gids voor het maken van apps zonder coderen

Wijzigingen aanvragen voor de app

Het idee achter deze tekst-naar-app AI-tools is dat we ideeën tot leven kunnen brengen zonder te kunnen coderen, simpelweg door met de AI te chatten en wijzigingen te vragen.

Om die vibe-coding-claim te testen, vraag ik om elke oefening uit meerdere sets te laten bestaan.

Bolt.new paste dingen aan; maar toen het de app opnieuw probeerde te renderen, liep het tegen een fout aan.

De interface is zich bewust van de fout en biedt de mogelijkheid om automatisch een herstelpoging te doen.

Soms kan het de fout direct identificeren en zichzelf herstellen. In dit geval kwamen er echter bij de nieuwe wijzigingen andere fouten naar voren:

Na een paar rondes foutherstel hadden we een werkende versie, waarbij elke trainingssessie meerdere oefeningen had, elk met meerdere sets (aantal herhalingen). Voor elke set kunnen we bijhouden hoeveel herhalingen we deden en vervolgens feedback geven over de ervaren moeilijkheid.

De feedbackdata zou gebruikt moeten worden om toekomstige sessies te plannen. Ik wilde chatten om te vragen hoe die data precies wordt gebruikt, maar tegen die tijd waren mijn credits voor de dag op. 

Een van de problemen die ik vaak tegenkom bij het bouwen van dit soort applicaties, is dat we weinig controle hebben over wat er onder de motorkap gebeurt. We kunnen het zien door te experimenteren en de app te gebruiken, maar dat is niet altijd genoeg om volledig te begrijpen hoe dingen zijn geïmplementeerd.

Kijken naar de Bolt.new-code

Als je kunt programmeren, kun je begrijpen hoe de app werkt door naar de code te kijken. In tegenstelling tot Lovable maakt Bolt.new het heel eenvoudig om de code direct in de webinterface te bekijken.

Door de code-editor te openen zien we alle projectbestanden, en door op een bestand te klikken gaat het open in de editor. Zo kun je zien hoe het werkt en direct in de browser wijzigingen aanbrengen. 

Daar zag ik een bestand genaamd workoutGenerator.ts, waarvan de naam aangeeft dat het de logica voor het genereren van nieuwe workouts bevat.

Omdat mijn credits op waren, heb ik de code gekopieerd en in ChatGPT geplakt en gevraagd om uitleg. Dit is een samenvatting van hoe het werkt:

De app maakt elke dag een nieuwe workout voor je door te kijken naar wat je al hebt gedaan. Hij houdt bij hoeveel workouts je hebt voltooid en roteert door verschillende types, zoals bovenlichaam, onderlichaam of full body, zodat je spieren over tijd een gebalanceerde routine krijgen. Voor elk work-outtype kiest hij willekeurig een aantal oefeningen die bij de juiste spiergroepen passen, zodat je niet steeds dezelfde moves doet.

Hij let ook op hoe goed je eerdere workouts gingen. Als een oefening makkelijk aanvoelde en je vaak succesvol was, verhoogt hij het gewicht of voegt wat herhalingen toe om je uit te dagen. Als een oefening te zwaar is, verlaagt hij het gewicht om het haalbaar te maken. Zo past de workout zich aan je vooruitgang aan en help hij je in het juiste tempo verbeteren zonder te overdrijven. Dat lijkt me redelijk, zeker voor een eerste versie van het product.

De Bolt.new-app publiceren

Klik op de knop "Publish" rechtsboven om de applicatie te publiceren.

Zodra hij is gepubliceerd, krijgen we een URL in de chat waar we de app kunnen openen.

We kunnen hem in de browser gebruiken en delen met anderen. We kunnen hem ook op de telefoon installeren. Maar omdat het een webapplicatie is, installeren we hem niet via de appstore; we doen het vanuit de browser door:

1. Open de link op de telefoon.
2. Klik op het optiemenu in de browser.
3. Klik op de optie "Add to Home screen".

Helaas maakte Bolt.new de applicatie niet meteen tot een progressive web app (PWA). Dat betekent dat wanneer we hem op de telefoon installeren, zoals net uitgelegd, er simpelweg een link op het startscherm wordt aangemaakt, waardoor de ervaring niet veel verschilt van gebruik in de browser.

Ik vroeg om de applicatie om te zetten naar een PWA zodat hij zich gedraagt als een native app, maar dat ging niet erg goed. Bolt.new begon goed met het genereren van de nodige bestanden, maar een vereiste voor een PWA is het hebben van afbeeldingslogo’s. Helaas probeerde Bolt.new die te genereren door de image-bytes te schrijven, wat waarschijnlijk nietszeggende afbeeldingen opleverde én alle tokens verbruikte.

Een eigen domein instellen

De URL die we voor de app kregen, werd automatisch gegenereerd en is niet ideaal voor productie. Voor een echt product zouden we een eigen domein moeten kopen en configureren. Dit kan op de pagina "Domains & Hosting" in de projectinstellingen.

De huidige versie van de app slaat data niet op in een database. Als we de app op onze computer openen en daarna op onze telefoon, zien we dus niet dezelfde data. Er is lokale datapersistente op het apparaat, dus als je hetzelfde apparaat gebruikt, wordt de data lokaal opgeslagen. Daarom verliezen we bij het verversen van de app het huidige trainingsplan en eerdere workouts niet.

Dit is oké voor een prototype, maar absoluut niet geschikt voor een commercieel product. Op dit moment zijn authenticatie en databases nog in bèta. Je kunt er toegang toe krijgen door je aan te melden voor hun private bèta.

Conclusie

Ik denk dat Bolt.new een geweldige tool is om snel een prototype op te zetten en een productidee te valideren. De AI neigt er echter toe om features oppervlakkig te implementeren, wat betekent dat substantiële applicaties veel iteratie vereisen. 

Zelfs met een gedetailleerde initiële prompt raakt het resultaat slechts de oppervlakte van de volledige specificatie, en de tokenlimieten van de gratis tier maken het bijna onmogelijk om zonder abonnement iets betekenisvols te bouwen.

Bovendien, omdat essentiële diensten zoals authenticatie en database-ondersteuning nog in bèta zijn, raad ik aan om te wachten op de volledige release voordat je probeert een productie-klare applicatie te bouwen. 

Over het geheel genomen werkt Bolt.new vergelijkbaar met zijn concurrenten, maar de uitblinker is de mogelijkheid om de broncode direct in de webinterface te bekijken en te bewerken; een cruciaal voordeel dat een van de grootste frustraties wegneemt die ik ervoer bij platforms zoals Lovable.