fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,155 +1,320 @@
|
||||
# Les 8: Claude Code - Agentic Coding Mode
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les08-Slide-Overzicht.md
|
||||
> - Les08-Lesplan.md
|
||||
> - Les08-Bijlage-A-Lesopdracht.md
|
||||
> - Les08-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 8: Supabase Basics
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
|
||||
Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Je bouwt je eerste full-stack app met data die persistent is.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat is Claude Code?
|
||||
- Agentic coding mode
|
||||
- AI neemt initiatief
|
||||
- Plant multi-step changes
|
||||
- Bewerkt multiple files autonoom
|
||||
### Wat is Supabase?
|
||||
|
||||
### Verschil met Chat-Based Coding
|
||||
- Jij beschrijft WAT
|
||||
- Claude Code figured out HOE en doet het
|
||||
**Supabase = Database + Auth in één**
|
||||
- PostgreSQL database (gratis tier: 500MB)
|
||||
- Ingebouwde authenticatie
|
||||
- Real-time subscriptions
|
||||
- File storage
|
||||
- Auto-generated API
|
||||
|
||||
### Claude Desktop Modes
|
||||
- Chat
|
||||
- Projects
|
||||
- Cowork
|
||||
- Code
|
||||
**Waarom Supabase voor beginners:**
|
||||
- Geen eigen server nodig
|
||||
- Visuele Table Editor (geen SQL kennis nodig)
|
||||
- Simpele JavaScript SDK
|
||||
- Gratis tier is ruim voldoende
|
||||
|
||||
### Wanneer Claude Code Gebruiken
|
||||
- Nieuwe features
|
||||
- Grote refactoring
|
||||
- Complexe bugs
|
||||
- Test generation
|
||||
---
|
||||
|
||||
### Hoe Claude Code Werkt
|
||||
1. High-level instructie
|
||||
2. Claude analyseert
|
||||
3. Maakt plan
|
||||
4. Bewerkt files
|
||||
5. Runt tests
|
||||
6. Itereert
|
||||
### Supabase Project Aanmaken
|
||||
|
||||
### Skills in Claude Code
|
||||
- Automatisch toegepast
|
||||
**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account
|
||||
|
||||
### Best Practices
|
||||
- Geef duidelijke high-level doelen
|
||||
- Laat autonoom werken
|
||||
- Review changes zorgvuldig
|
||||
**Stap 2:** Klik "New Project"
|
||||
- Naam: `todo-app`
|
||||
- Database Password: (bewaar deze!)
|
||||
- Region: `West EU (Frankfurt)` (dichtst bij NL)
|
||||
|
||||
### Vergelijking
|
||||
| Tool | Aanpak |
|
||||
|------|--------|
|
||||
| OpenCode/WebStorm | Step-by-step guidance |
|
||||
| Claude Code | Autonome agent |
|
||||
**Stap 3:** Wacht ~2 minuten tot project klaar is
|
||||
|
||||
**Stap 4:** Ga naar Settings → API en kopieer:
|
||||
- `Project URL`
|
||||
- `anon public` key
|
||||
|
||||
---
|
||||
|
||||
### Tabel Maken via Table Editor
|
||||
|
||||
**In Supabase Dashboard:**
|
||||
|
||||
1. Ga naar "Table Editor"
|
||||
2. Klik "New Table"
|
||||
3. Naam: `todos`
|
||||
4. Kolommen:
|
||||
|
||||
| Name | Type | Default | Primary |
|
||||
|------|------|---------|---------|
|
||||
| id | int8 | - | ✓ (auto) |
|
||||
| title | text | - | |
|
||||
| completed | bool | false | |
|
||||
| created_at | timestamptz | now() | |
|
||||
|
||||
5. Klik "Save"
|
||||
|
||||
**Test:** Voeg een paar rijen toe via de UI om te zien dat het werkt.
|
||||
|
||||
---
|
||||
|
||||
### Environment Variables
|
||||
|
||||
**Wat zijn environment variables?**
|
||||
- Configuratie die NIET in je code hoort
|
||||
- API keys, database URLs, secrets
|
||||
- Verschillend per omgeving (lokaal vs productie)
|
||||
|
||||
**Maak `.env.local` in je project root:**
|
||||
```bash
|
||||
# .env.local - NOOIT committen naar Git!
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||
```
|
||||
|
||||
**Maak ook `.env.example` (WEL committen):**
|
||||
```bash
|
||||
# .env.example - template voor anderen
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
```
|
||||
|
||||
**Check `.gitignore` bevat:**
|
||||
```
|
||||
.env*.local
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Supabase SDK Installeren
|
||||
|
||||
```bash
|
||||
npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
**Maak `src/lib/supabase.ts`:**
|
||||
```typescript
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
|
||||
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### CRUD Operaties
|
||||
|
||||
**C - Create (toevoegen):**
|
||||
```typescript
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.insert({ title: 'Nieuwe taak' })
|
||||
```
|
||||
|
||||
**R - Read (ophalen):**
|
||||
```typescript
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false })
|
||||
```
|
||||
|
||||
**U - Update (wijzigen):**
|
||||
```typescript
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.update({ completed: true })
|
||||
.eq('id', todoId)
|
||||
```
|
||||
|
||||
**D - Delete (verwijderen):**
|
||||
```typescript
|
||||
const { error } = await supabase
|
||||
.from('todos')
|
||||
.delete()
|
||||
.eq('id', todoId)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Authenticatie met Auth UI
|
||||
|
||||
**Installeer auth packages:**
|
||||
```bash
|
||||
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
|
||||
```
|
||||
|
||||
**Login component:**
|
||||
```tsx
|
||||
import { Auth } from '@supabase/auth-ui-react'
|
||||
import { ThemeSupa } from '@supabase/auth-ui-shared'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
|
||||
export function LoginForm() {
|
||||
return (
|
||||
<Auth
|
||||
supabaseClient={supabase}
|
||||
appearance={{ theme: ThemeSupa }}
|
||||
providers={[]}
|
||||
magicLink={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Huidige user checken:**
|
||||
```typescript
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
|
||||
if (user) {
|
||||
// User is ingelogd
|
||||
console.log('Logged in as:', user.email)
|
||||
} else {
|
||||
// Redirect naar login
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Deployment naar Vercel
|
||||
|
||||
**Stap 1: Push naar GitHub**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add Supabase integration"
|
||||
git push
|
||||
```
|
||||
|
||||
**Stap 2: Deploy op Vercel**
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repo
|
||||
4. **BELANGRIJK:** Voeg Environment Variables toe!
|
||||
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
5. Klik "Deploy"
|
||||
|
||||
**Stap 3: Supabase Redirect URLs**
|
||||
1. Ga naar Supabase → Authentication → URL Configuration
|
||||
2. Voeg toe bij "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
|
||||
---
|
||||
|
||||
### Lokaal vs Productie
|
||||
|
||||
| Aspect | Lokaal | Productie |
|
||||
|--------|--------|-----------|
|
||||
| URL | `localhost:3000` | `jouw-app.vercel.app` |
|
||||
| Env vars | `.env.local` | Vercel Dashboard |
|
||||
| Database | Supabase (zelfde) | Supabase (zelfde) |
|
||||
| Command | `npm run dev` | Automatisch via Vercel |
|
||||
|
||||
**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor echte projecten zou je aparte databases hebben.
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Claude Desktop (Code mode)
|
||||
- Skills.sh
|
||||
- Supabase
|
||||
- Next.js
|
||||
- OpenCode/WebStorm
|
||||
- Vercel
|
||||
- Git
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deel 1: Claude Code Verkenning (30 min)
|
||||
### Bouw een Todo App met Supabase
|
||||
|
||||
**Setup:**
|
||||
- Open Claude Desktop
|
||||
- Navigeer naar Code mode
|
||||
- Installeer relevante Skills eerst
|
||||
**Deel 1: Supabase Setup (30 min)**
|
||||
|
||||
**Complexe Taak:**
|
||||
> "Bouw multi-step form wizard: 3 stappen (personal info, company details, preferences), progress indicator, validatie per step, data in useState, animations tussen steps, TypeScript, Shadcn components."
|
||||
1. Maak Supabase account en project
|
||||
2. Maak `todos` tabel via Table Editor
|
||||
3. Kopieer credentials
|
||||
4. Installeer `@supabase/supabase-js`
|
||||
5. Maak `src/lib/supabase.ts`
|
||||
6. Configureer `.env.local`
|
||||
|
||||
- Laat Claude Code autonoom werken
|
||||
- Kijk hoe het plant en uitvoert
|
||||
- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
|
||||
Test: `npm run dev` werkt zonder errors
|
||||
|
||||
### Deel 2: Autonome Feature Development (1u 30min)
|
||||
**Deel 2: CRUD Interface (1 uur)**
|
||||
|
||||
**Bouw User Dashboard met Stats:**
|
||||
Bouw UI voor todos:
|
||||
1. Lijst van todos tonen
|
||||
2. Form om nieuwe todo toe te voegen
|
||||
3. Checkbox om todo af te vinken
|
||||
4. Delete button per todo
|
||||
|
||||
Requirements:
|
||||
- Haal user data uit Supabase
|
||||
- Toon profile info
|
||||
- 4 stat cards
|
||||
- Activity feed
|
||||
- Charts met recharts
|
||||
- Alles responsive
|
||||
- Loading states
|
||||
- Error handling
|
||||
Gebruik AI hulp voor de components!
|
||||
|
||||
**Process:**
|
||||
- Geef high-level beschrijving
|
||||
- Relevante context files (@mentions)
|
||||
- Laat autonoom werken
|
||||
**Deel 3: Authenticatie (30 min)**
|
||||
|
||||
**Track:**
|
||||
- Hoeveel iteraties?
|
||||
- Manual fixes nodig?
|
||||
- Vergelijk tijd vs handmatig bouwen
|
||||
1. Installeer auth packages
|
||||
2. Maak login pagina met Auth UI
|
||||
3. Toon alleen app voor ingelogde users
|
||||
4. Test: login met magic link
|
||||
|
||||
### Deliverable
|
||||
- Werkende Todo app lokaal
|
||||
- GitHub repository met code
|
||||
- Screenshot van werkende app
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Deel 1: Complexe Refactoring (1 uur)
|
||||
### Deploy naar Productie + Uitbreiden
|
||||
|
||||
**Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:**
|
||||
**Deel 1: Deployment (30 min)**
|
||||
|
||||
> "Extract alle Supabase queries naar aparte queries.ts file met proper error handling en TypeScript types. Update alle components om nieuwe query functions te gebruiken."
|
||||
1. Push naar GitHub
|
||||
2. Deploy naar Vercel
|
||||
3. Configureer env vars in Vercel
|
||||
4. Voeg Vercel URL toe aan Supabase Redirect URLs
|
||||
5. Test: app werkt op productie URL!
|
||||
|
||||
- Laat autonoom handlen
|
||||
- Verifieer dat alles werkt
|
||||
- Documenteer: hoe goed handelde Claude Code het?
|
||||
**Deel 2: Features Uitbreiden (1 uur)**
|
||||
|
||||
### Deel 2: Comparison Essay (1 uur)
|
||||
Voeg toe:
|
||||
1. Filter buttons: Alle / Actief / Voltooid
|
||||
2. Sorteer op datum (nieuwste eerst)
|
||||
3. Loading state tijdens data ophalen
|
||||
4. Error state bij problemen
|
||||
5. Empty state: "Geen todos gevonden"
|
||||
|
||||
**Schrijf vergelijkings essay (500 woorden):**
|
||||
**Deel 3: Polish (30 min)**
|
||||
|
||||
OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
|
||||
1. Styling verbeteren met Tailwind
|
||||
2. Responsive design (mobile friendly)
|
||||
3. Kleine animaties (fade in/out)
|
||||
|
||||
**Vergelijk op:**
|
||||
- Autonomie niveau
|
||||
- Snelheid
|
||||
- Accuratesse
|
||||
- Wanneer welke gebruiken
|
||||
|
||||
**Include:** Concrete voorbeelden
|
||||
|
||||
**Final verdict:** Tool voorkeur going forward?
|
||||
### Deliverable
|
||||
- Deployed app op Vercel (werkende URL!)
|
||||
- Alle features werken in productie
|
||||
- Screenshot van productie app
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Claude Code (agentic mode) activeren en gebruiken
|
||||
- Het verschil uitleggen tussen chat-based en agentic coding
|
||||
- High-level instructies geven voor autonome development
|
||||
- Multi-file changes laten plannen en uitvoeren door Claude Code
|
||||
- De juiste tool kiezen (OpenCode vs Claude Code) per situatie
|
||||
- Een Supabase project aanmaken en configureren
|
||||
- Tabellen maken via de Table Editor (zonder SQL)
|
||||
- Environment variables correct beheren
|
||||
- De Supabase client installeren en configureren
|
||||
- CRUD operaties uitvoeren met de Supabase SDK
|
||||
- Authenticatie implementeren met Auth UI
|
||||
- Deployen naar Vercel met environment variables
|
||||
- Het verschil tussen lokale en productie omgeving begrijpen
|
||||
|
||||
Reference in New Issue
Block a user