Mijn werkwijze

Zo bouw ik apps

Van idee tot werkende app op internet, zonder zelf code te typen en zonder eigen server. Ik beschrijf wat ik wil, Claude Code schrijft de code, GitHub bewaart alles en Cloudflare laat het draaien.

Het schema

Drie zones: waar ik bouw, waar de app draait en de buitenwereld. Kies een route en loop de stappen door. Klik op een blok voor uitleg.

Veeg opzij om het hele schema te zien →

Schema van de app-opbouw Links bouwen: Jij geeft opdrachten aan Claude Code, dat de code in GitHub bewaart en op Cloudflare live zet. Midden Cloudflare: de Worker draait de app en gebruikt Secrets, de D1-database en R2-opslag. Rechts de buitenwereld: bezoekers, OpenAI en ElevenLabs. BOUWEN mijn werkplek CLOUDFLARE waar de app draait BUITENWERELD bezoekers en AI-diensten opdracht commit + push API-sleutels deploy vraag ⇄antwoord sleutel tekst stem gegevens bestanden Jij idee in gewone taal Claude Code schrijft de code GitHub bewaart elke versie Secrets kluis met API-sleutels Worker hier draait de app D1 database R2 bestanden Bezoeker browser of telefoon OpenAI · GPT AI voor tekst ElevenLabs AI voor stemmen

De onderdelen

Elk blok uit het schema, in gewone woorden. Wie het liever in beelden hoort: zie het als een restaurant.

Claude Code

AI-programmeur
Wat het doet

Schrijft alle code op basis van mijn uitleg in gewone taal. Test, verbetert, maakt de database en opslag aan en zet de app live. Kan zelf API-sleutels gebruiken, bijvoorbeeld van OpenAI (GPT) en ElevenLabs, om tijdens het bouwen te testen.

In restauranttermen

De chef-kok. Schrijft de recepten en probeert ze eerst uit in de proefkeuken.

Technisch

Werkt in de terminal of app, leest en schrijft de hele repo.

GitHub

Codearchief
Wat het doet

De hele app staat hier als repository (repo). Elke wijziging is een opgeslagen versie, dus ik kan altijd terug naar hoe het gisteren was.

In restauranttermen

Het receptenboek. Met elke oude versie van elk recept erbij.

Technisch

git commit legt vast, git push stuurt naar GitHub.

Cloudflare Worker

Hosting
Wat het doet

Hier draait de app. De code staat klaar in datacenters over de hele wereld en start pas als iemand iets vraagt. Er is geen server die ik zelf moet bijhouden.

In restauranttermen

De keuken. Neemt bestellingen aan en maakt ze klaar.

Technisch

wrangler deploy zet een nieuwe versie live, op een eigen domein.

D1

Database
Wat het doet

SQL-database voor gegevens in tabellen: gebruikers, instellingen, wat er wanneer is gemaakt.

In restauranttermen

Het bestelboek. De administratie van wie wat heeft besteld.

Technisch

env.DB.prepare("SELECT …")

R2

Bestandsopslag
Wat het doet

Bewaart bestanden in een bucket: foto's, audio, pdf's, uploads. Je betaalt voor opslag, niet voor het dataverkeer als bezoekers bestanden downloaden.

In restauranttermen

De voorraadkelder. Alles wat bewaard moet worden, op de plank.

Technisch

env.FILES.put("audio/123.mp3", …)

Secrets

Sleutelkluis
Wat het doet

Versleutelde plek voor API-sleutels van externe partijen. Alleen de Worker kan ze lezen. Ze staan nooit in GitHub en nooit in de browser van de bezoeker.

In restauranttermen

De kluis. Met de klantpasjes van de leveranciers erin.

Technisch

wrangler secret put OPENAI_API_KEY

Externe API's

Ingehuurde AI
Wat het doet

Diensten van andere bedrijven die de app via internet inschakelt (een API). De app meldt zich aan met een API-sleutel: een soort wachtwoord dat ook bepaalt wie de rekening krijgt. Bijvoorbeeld GPT van OpenAI voor tekst en ElevenLabs voor stemmen. Je betaalt per gebruik, rechtstreeks aan die partij.

In restauranttermen

De leveranciers. Zoals een banketbakker die de taarten levert. Je betaalt per bestelling.

Technisch

De Worker roept ze aan met fetch() en de sleutel uit Secrets.

Andere manieren om een app te maken

Een website of app kun je op meerdere manieren maken en hosten. Zo verhoudt mijn aanpak zich tot de bekende routes.

AanpakWie maakt hetServer bijhoudenVrijheidKosten bij de start
WebsitebouwerWix, Squarespace, Webflow Jij, door te klikken en te slepen Nee Beperkt tot wat het platform biedt Maandabonnement
WordPress bij een hosterklassieke webhosting Jij met thema's en plugins, of een webbouwer Deels: updates van WordPress en plugins Gemiddeld Hostingpakket per maand of jaar
Eigen server (VPS)bijvoorbeeld Hetzner, DigitalOcean Een programmeur Ja: updates, beveiliging en back-ups zelf Volledig Vast bedrag per maand
Hostingplatform voor ontwikkelaarsVercel, Netlify Een programmeur Nee Groot Gratis instap
Mijn aanpakClaude Code + GitHub + Cloudflare Claude Code, op mijn aanwijzing Nee Volledig: eigen code, eigen data Claude-abonnement; hosting gratis, bij veel gebruik $5 per maand

Wat kost het?

Cloudflare heeft een gratis plan met daglimieten. Het betaalde Workers-plan kost minimaal $5 per maand per account en dekt alle apps samen.

OnderdeelGratis planWorkers Paid ($5/mnd)
Workerverzoeken en rekentijd 100.000 verzoeken per dag
10 ms rekentijd per verzoek
10 miljoen verzoeken per maand inbegrepen
daarna $0,30 per miljoen
D1database 5 miljoen rijen lezen per dag
100.000 rijen schrijven per dag
5 GB opslag
25 miljard rijen lezen per maand
50 miljoen rijen schrijven per maand
5 GB inbegrepen
R2bestanden, eigen gratis tegoed 10 GB opslag per maand
1 miljoen schrijfacties, 10 miljoen leesacties
uitgaand verkeer gratis
valt niet onder de $5; daarboven
$0,015 per GB per maand
$4,50 / $0,36 per miljoen schrijf- / leesacties
Buiten Cloudflareeigen rekeningen OpenAI en ElevenLabs rekenen per gebruik. GitHub is gratis voor privé-repo's. Claude Code loopt via een Claude-abonnement.

Bedragen in USD, stand oktober 2026. Bron: developers.cloudflare.com (Workers, D1 en R2 pricing).

Waarom zo, en waar let ik op

Waarom het werkt

  • Geen server om bij te houden. Cloudflare regelt de machines, updates en schaal.
  • Snel voor iedereen. De app draait dicht bij de bezoeker, waar die ook zit.
  • Sleutels blijven geheim. Ze staan niet in de code of in GitHub, en de bezoeker ziet ze nooit.
  • Code terug te draaien. Elke versie van de code staat in GitHub.
  • Hosting kost bijna niets. Veel apps passen in het gratis plan van Cloudflare.

Om op te letten

  • Afhankelijk van Cloudflare. De code blijft wel van mij en staat in GitHub.
  • AI kost per gebruik. Zet een bestedingslimiet in je OpenAI- en ElevenLabs-account.
  • Daglimieten op het gratis plan. Bij veel bezoekers is $5 per maand nodig.
  • Zelf blijven testen. Claude Code schrijft de code, ik controleer of het doet wat ik wil.

Onder de motorkap

Voor wie de code wil zien. Eén configuratiebestand koppelt de onderdelen aan elkaar. De Worker krijgt de database, de opslag en de sleutels binnen via env. Vereenvoudigd voorbeeld van de voorleesapp uit het schema.

wrangler.jsonc
{
  "name": "voorleesapp",
  "main": "src/index.js",
  "compatibility_date": "2026-10-01",
  "routes": [
    { "pattern": "voorlees.mijndomein.nl", "custom_domain": true }
  ],
  "d1_databases": [
    { "binding": "DB", "database_name": "voorlees-db", "database_id": "…" }
  ],
  "r2_buckets": [
    { "binding": "FILES", "bucket_name": "voorlees-audio" }
  ]
  // API-sleutels staan hier bewust NIET in.
  // Die gaan in Secrets:
  //   wrangler secret put OPENAI_API_KEY
  //   wrangler secret put ELEVENLABS_API_KEY
}
src/index.js
export default {
  async fetch(request, env) {
    const { tekst } = await request.json();

    // 1. GPT vat samen, met de sleutel uit Secrets
    const samenvatting = await vraagGPT(tekst, env.OPENAI_API_KEY);

    // 2. ElevenLabs maakt er spraak van
    const mp3 = await maakStem(samenvatting, env.ELEVENLABS_API_KEY);

    // 3. Audio in R2, registratie in D1
    const id = crypto.randomUUID();
    await env.FILES.put(`audio/${id}.mp3`, mp3);
    await env.DB
      .prepare("INSERT INTO voorlezingen (id, samenvatting) VALUES (?, ?)")
      .bind(id, samenvatting)
      .run();

    // 4. Antwoord terug naar de bezoeker
    return Response.json({ id, samenvatting });
  },
};