fix: add v2 lessons for next class
This commit is contained in:
Tim Rijkse
163
v2/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
Normal file
163
v2/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,163 @@
|
||||
# Les 2 - Huiswerkopdracht
|
||||
|
||||
**Deadline:** Voor les 3
|
||||
|
||||
---
|
||||
|
||||
## Opdracht 1: Nieuw Project vanaf Scratch (2 uur)
|
||||
|
||||
In de les heb je een bestaand project uitgebreid. Nu ga je een **nieuw project** maken met OpenCode.
|
||||
|
||||
### Stap 1: Maak een nieuw React project
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest mijn-nieuwe-project
|
||||
cd mijn-nieuwe-project
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Kies bij de prompts:
|
||||
- TypeScript: Yes
|
||||
- Tailwind CSS: Yes
|
||||
- App Router: Yes
|
||||
|
||||
### Stap 2: Configureer OpenCode Desktop App
|
||||
|
||||
1. Open de Desktop App
|
||||
2. Open je projectfolder
|
||||
3. Selecteer OpenCode Zen → Kimi K2.5 Free (gratis)
|
||||
|
||||
### Stap 3: Bouw minimaal 3 componenten
|
||||
|
||||
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
||||
|
||||
**⚠️ BELANGRIJK: Eén prompt per taak!**
|
||||
|
||||
Maak niet één grote prompt voor alles. Verdeel je werk:
|
||||
- Prompt 1: "Maak een Header component met logo en navigatie"
|
||||
- Prompt 2: "Voeg een mobile hamburger menu toe aan de Header"
|
||||
- Prompt 3: "Maak een Hero section met headline en buttons"
|
||||
- etc.
|
||||
|
||||
**Houd je prompts bij!** Je moet ze inleveren (zie Opdracht 2).
|
||||
|
||||
**Verplichte componenten:**
|
||||
|
||||
#### 1. Header/Navbar
|
||||
- Logo
|
||||
- Navigatie links
|
||||
- CTA button
|
||||
- Mobile hamburger menu (werkend!)
|
||||
|
||||
#### 2. Hero Section
|
||||
- Headline
|
||||
- Subtitle
|
||||
- 1-2 buttons
|
||||
- Achtergrond (gradient of afbeelding)
|
||||
|
||||
#### 3. Kies één:
|
||||
|
||||
**Optie A: Feature Cards**
|
||||
- Minimaal 3 cards
|
||||
- Icon, titel, beschrijving per card
|
||||
- Responsive grid
|
||||
|
||||
**Optie B: Testimonials**
|
||||
- Minimaal 2 testimonials
|
||||
- Quote, naam, foto placeholder
|
||||
- Mooie styling
|
||||
|
||||
**Optie C: Pricing Table**
|
||||
- 3 pricing tiers
|
||||
- Features per tier
|
||||
- Highlight recommended
|
||||
|
||||
### Stap 4: Push naar GitHub
|
||||
|
||||
**Anders dan bij v0!** Bij v0 was Vercel automatisch gekoppeld. Nu moet je dit handmatig doen.
|
||||
|
||||
#### 4a. Maak GitHub repository
|
||||
|
||||
1. Ga naar github.com
|
||||
2. Klik "+" → "New repository"
|
||||
3. Naam: bijvoorbeeld `mijn-nieuwe-project`
|
||||
4. **Public** aanvinken
|
||||
5. Klik "Create repository"
|
||||
|
||||
#### 4b. Push je code
|
||||
|
||||
GitHub toont instructies. Voer uit in je projectmap:
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/JOUW-USERNAME/mijn-nieuwe-project.git
|
||||
git branch -M main
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
**Of met GitHub Desktop:**
|
||||
1. File → Add Local Repository
|
||||
2. Selecteer je projectmap
|
||||
3. Publish repository
|
||||
|
||||
---
|
||||
|
||||
### Stap 5: Koppel aan Vercel
|
||||
|
||||
1. Ga naar vercel.com (log in met GitHub)
|
||||
2. Klik "Add New..." → "Project"
|
||||
3. "Import Git Repository"
|
||||
4. Selecteer je nieuwe repo
|
||||
5. Framework: Next.js (automatisch gedetecteerd)
|
||||
6. Klik "Deploy"
|
||||
|
||||
**Na ~1 minuut:** Je website is live!
|
||||
|
||||
**Tip:** Elke volgende `git push` wordt automatisch gedeployed.
|
||||
|
||||
---
|
||||
|
||||
## Opdracht 2: Houd je Prompts Bij!
|
||||
|
||||
**Belangrijk:** Houd tijdens het bouwen een lijst bij van alle prompts die je gebruikt.
|
||||
|
||||
**Voorbeeld format:**
|
||||
```
|
||||
1. [Plan] "Analyseer dit project en beschrijf de folder structuur"
|
||||
2. [Build] "Maak een Header component met logo links en navigatie rechts"
|
||||
3. [Build] "Voeg een hamburger menu toe voor mobile"
|
||||
4. [Build] "Maak een Hero section met grote headline en gradient achtergrond"
|
||||
5. [Build] "Voeg twee buttons toe aan de Hero: primair en secundair"
|
||||
6. [Build] "Maak een Features sectie met 3 cards in een grid"
|
||||
...
|
||||
```
|
||||
|
||||
**Waarom?**
|
||||
- In Les 3 gaan we iedereen langs
|
||||
- We bespreken hoeveel prompts je hebt gebruikt
|
||||
- En of je het werk goed hebt opgesplitst (één prompt per taak)
|
||||
|
||||
**Dit hoef je niet in te leveren**, maar zorg dat je het kunt laten zien in de les!
|
||||
|
||||
---
|
||||
|
||||
## Inleveren via Teams (voor Les 3)
|
||||
|
||||
Post in Teams:
|
||||
1. **Link naar Vercel** (je live website)
|
||||
2. **Link naar GitHub** (je repository)
|
||||
|
||||
Dat is alles! In Les 3 gaan we kort iedereen langs:
|
||||
- Bekijken wat je hebt gemaakt
|
||||
- Bespreken hoeveel prompts je hebt gebruikt
|
||||
- Delen wat goed werkte en wat niet
|
||||
|
||||
**💡 Tip:** Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les!
|
||||
|
||||
---
|
||||
|
||||
## Hulp nodig?
|
||||
|
||||
- Check de OpenCode documentatie: opencode.ai/docs
|
||||
- Bekijk de les slides nogmaals
|
||||
- Stel vragen in Teams
|
||||
- Stel vragen in Teams
|
||||
Reference in New Issue
Block a user