fix: update supabase lessons to make them a bit simpler
This commit is contained in:
Tim Rijkse
@@ -1,4 +1,4 @@
|
||||
# Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
|
||||
# Les 10: Project Setup & Repository Structure
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
@@ -11,144 +11,208 @@
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Leer dingen automatiseren met Supabase cron jobs die AI agents triggeren voor intelligente workflows.
|
||||
Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Automatiseren?
|
||||
- Verminder manual werk
|
||||
- Consistente executie
|
||||
- Scale zonder effort
|
||||
- 24/7 beschikbaarheid
|
||||
### Waarom Project Structure Belangrijk Is
|
||||
- AI tools werken beter met duidelijke structuur
|
||||
- Makkelijker samenwerken
|
||||
- Sneller nieuwe features toevoegen
|
||||
- Professionele uitstraling
|
||||
|
||||
### Types van Automation
|
||||
- Scheduled tasks (cron jobs)
|
||||
- Event-driven (webhooks)
|
||||
- AI-powered workflows
|
||||
### Ideale Folder Structuur
|
||||
|
||||
### Supabase Edge Functions voor Automation
|
||||
- Deno runtime
|
||||
- TypeScript
|
||||
- Serverless at edge
|
||||
```
|
||||
project/
|
||||
├── .cursor/
|
||||
│ └── rules/ # Cursor instructies
|
||||
│ ├── general.mdc # Algemene project regels
|
||||
│ └── components.mdc # Component-specifieke regels
|
||||
├── docs/
|
||||
│ ├── PROMPT-LOG.md # Belangrijke AI prompts
|
||||
│ ├── AI-DECISIONS.md # Architectuur beslissingen
|
||||
│ └── PROJECT-BRIEF.md # Project beschrijving
|
||||
├── src/
|
||||
│ ├── app/ # Next.js App Router
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # Basis UI components
|
||||
│ │ └── features/ # Feature-specifieke components
|
||||
│ ├── lib/ # Utilities en helpers
|
||||
│ └── types/ # TypeScript types
|
||||
├── .env.local # Environment variables
|
||||
├── .env.example # Template voor env vars
|
||||
├── .gitignore
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### Scheduled Edge Functions (Cron Jobs)
|
||||
- Timing configuratie
|
||||
- Use cases
|
||||
### .cursorrules Files
|
||||
|
||||
### Webhook Edge Functions
|
||||
- Getriggerd door database changes
|
||||
**Wat zijn .cursorrules?**
|
||||
- Markdown files met instructies voor Cursor
|
||||
- Project-specifieke regels en conventies
|
||||
- Worden automatisch meegenomen in context
|
||||
|
||||
### AI Integratie in Edge Functions
|
||||
- Call OpenAI/Anthropic APIs
|
||||
- Process data met AI
|
||||
**Voorbeeld `general.mdc`:**
|
||||
```markdown
|
||||
# Project Rules
|
||||
|
||||
### Supabase Cron Jobs
|
||||
- pg_cron extension
|
||||
- Schedule taken in Postgres
|
||||
## Tech Stack
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript (strict mode)
|
||||
- Tailwind CSS voor styling
|
||||
- Supabase voor backend
|
||||
|
||||
### Database Webhooks
|
||||
- Supabase Realtime broadcasts
|
||||
- INSERT/UPDATE/DELETE triggers
|
||||
## Code Conventies
|
||||
- Gebruik functionele components
|
||||
- Prefer named exports
|
||||
- Destructure props
|
||||
- Gebruik async/await (geen .then())
|
||||
|
||||
### Edge Functions Chainen
|
||||
webhook → Edge Function → AI → actie
|
||||
## Styling
|
||||
- Tailwind classes, geen inline styles
|
||||
- Mobile-first approach
|
||||
- Gebruik design tokens waar mogelijk
|
||||
```
|
||||
|
||||
### AI Automation Workflow Patterns
|
||||
- Nieuwe user → AI onboarding email
|
||||
- Content → AI moderatie → approve/reject
|
||||
- Dagelijks → data → AI summary → email
|
||||
### docs/ Folder
|
||||
|
||||
### AI Agents in Automation
|
||||
- Monitoring agents
|
||||
- Data verrijking agents
|
||||
**PROMPT-LOG.md**
|
||||
- Log van belangrijke prompts die tot goede code leidden
|
||||
- Minimaal 10 prompts documenteren
|
||||
- Format: doel → prompt → resultaat
|
||||
|
||||
**AI-DECISIONS.md**
|
||||
- Architectuur beslissingen gemaakt met AI hulp
|
||||
- Waarom bepaalde keuzes gemaakt
|
||||
- Trade-offs en alternatieven
|
||||
|
||||
**PROJECT-BRIEF.md**
|
||||
- Wat doet het project?
|
||||
- Wie is de doelgroep?
|
||||
- Welke features zijn er?
|
||||
|
||||
### Environment Variables
|
||||
|
||||
**.env.example** (commit naar Git):
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
OPENAI_API_KEY=your-openai-key
|
||||
```
|
||||
|
||||
**.env.local** (NOOIT committen):
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
|
||||
OPENAI_API_KEY=sk-...
|
||||
```
|
||||
|
||||
### README.md Best Practices
|
||||
- Project titel en korte beschrijving
|
||||
- Screenshots of demo GIF
|
||||
- Installatie instructies
|
||||
- Environment variables uitleg
|
||||
- Beschikbare scripts (`npm run dev`, etc.)
|
||||
|
||||
### Git Best Practices
|
||||
- Kleine, focused commits
|
||||
- Duidelijke commit messages
|
||||
- Feature branches
|
||||
- `.gitignore` correct ingesteld
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Supabase (Edge Functions, pg_cron)
|
||||
- Claude API / OpenAI API
|
||||
- Resend / SendGrid (email)
|
||||
- Cursor
|
||||
- Git & GitHub
|
||||
- Next.js
|
||||
- VS Code / WebStorm
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
Bouw 2 automation workflows: 1 scheduled + 1 event-driven met AI.
|
||||
### Richt je Eindproject Repository In
|
||||
|
||||
### Deel 1: Scheduled - Daily Summary Email (1 uur)
|
||||
**Deel 1: Repository Setup (30 min)**
|
||||
- Maak nieuwe GitHub repository
|
||||
- Clone lokaal
|
||||
- Run `npx create-next-app@latest` met TypeScript + Tailwind
|
||||
- Push initial commit
|
||||
|
||||
**Flow:**
|
||||
```
|
||||
Supabase cron (dagelijks 9:00)
|
||||
→ Edge Function
|
||||
→ Haal gisteren's data op
|
||||
→ Claude API voor intelligente samenvatting
|
||||
→ Email via Resend/SendGrid
|
||||
```
|
||||
**Deel 2: Folder Structuur (30 min)**
|
||||
- Maak `docs/` folder met:
|
||||
- `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
|
||||
- `PROMPT-LOG.md` (lege template)
|
||||
- `AI-DECISIONS.md` (lege template)
|
||||
- Maak `.cursor/rules/` folder met:
|
||||
- `general.mdc` (project regels)
|
||||
- Reorganiseer `src/` folder
|
||||
|
||||
- Implementatie
|
||||
- Test
|
||||
- Documentatie
|
||||
**Deel 3: Environment Setup (20 min)**
|
||||
- Maak `.env.example` met alle benodigde variabelen
|
||||
- Maak `.env.local` met echte waarden
|
||||
- Controleer `.gitignore` (env files moeten erin staan!)
|
||||
|
||||
### Deel 2: Event-Driven - AI Content Moderation (1 uur)
|
||||
**Deel 4: README & Git (40 min)**
|
||||
- Schrijf complete README.md
|
||||
- Maak eerste feature branch
|
||||
- Commit alle changes met goede messages
|
||||
- Push en maak PR (voor jezelf)
|
||||
|
||||
**Trigger:** Webhook bij nieuwe todo
|
||||
|
||||
**Flow:**
|
||||
```
|
||||
INSERT
|
||||
→ Webhook
|
||||
→ Edge Function
|
||||
→ Claude API moderatie check
|
||||
→ Flag if problematisch
|
||||
→ Enrich if clean (tags, effort estimate, subtask suggestions)
|
||||
→ Save to database
|
||||
```
|
||||
|
||||
- Implementatie
|
||||
- Test
|
||||
- Documentatie
|
||||
### Deliverable
|
||||
- GitHub repository met complete structuur
|
||||
- Alle docs files aanwezig
|
||||
- .cursorrules file geschreven
|
||||
- README compleet
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Deel 1: Intelligente Notificaties (1 uur)
|
||||
### Verfijn je Project Setup
|
||||
|
||||
**Cron 8:00:**
|
||||
- Haal due todos op
|
||||
- Per user: Claude genereert gepersonaliseerd motiverend bericht
|
||||
- Email met AI message + todo lijst
|
||||
**Deel 1: .cursorrules Uitbreiden (45 min)**
|
||||
- Voeg `components.mdc` toe met component conventies
|
||||
- Voeg `api.mdc` toe met API/Supabase regels
|
||||
- Test of Cursor de regels oppikt
|
||||
|
||||
### Deel 2: AI Task Breakdown Agent (1 uur)
|
||||
**Deel 2: Documentatie (45 min)**
|
||||
- Vul `PROJECT-BRIEF.md` volledig in:
|
||||
- Projectnaam en tagline
|
||||
- Probleem dat je oplost
|
||||
- Target audience
|
||||
- Core features (3-5)
|
||||
- Nice-to-have features
|
||||
- Tech stack keuzes
|
||||
- Start `AI-DECISIONS.md` met eerste beslissing
|
||||
|
||||
**Webhook op INSERT:**
|
||||
- Als todo lang/complex → automatisch Claude aanroepen
|
||||
- Suggestie 3-5 subtaken
|
||||
- Auto-create in database
|
||||
**Deel 3: Basis Components (30 min)**
|
||||
- Maak `src/components/ui/` met basic components:
|
||||
- Button.tsx
|
||||
- Card.tsx
|
||||
- Input.tsx
|
||||
- Gebruik Cursor met je nieuwe .cursorrules
|
||||
|
||||
**Test met complex todo**
|
||||
|
||||
### Deliverables
|
||||
- 4 werkende automations
|
||||
- Documentatie
|
||||
- Reflectie (300 woorden):
|
||||
- Kracht van automation?
|
||||
- Wat nog meer automatiseren?
|
||||
- Gebruik in echte projecten?
|
||||
### Deliverable
|
||||
- Uitgebreide .cursorrules (minimaal 2 files)
|
||||
- Volledig ingevulde PROJECT-BRIEF.md
|
||||
- Basis UI components gemaakt met Cursor
|
||||
- Screenshot van Cursor die je rules gebruikt
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Supabase Edge Functions schrijven en deployen
|
||||
- Cron jobs configureren met pg_cron
|
||||
- Webhooks triggeren op database changes
|
||||
- AI APIs integreren in Edge Functions
|
||||
- Scheduled en event-driven workflows bouwen
|
||||
- Praktische AI automation patterns implementeren
|
||||
- Een professionele project structuur opzetten
|
||||
- .cursorrules files schrijven voor project-specifieke AI instructies
|
||||
- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
|
||||
- Environment variables correct beheren
|
||||
- Git best practices toepassen
|
||||
- Een README schrijven die anderen kunnen volgen
|
||||
|
||||
Reference in New Issue
Block a user