175 lines
3.5 KiB
Markdown
175 lines
3.5 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
opencode
|
|
```
|
|
|
|
Selecteer OpenCode Zen → GLM 4.7 (gratis).
|
|
|
|
### Stap 3: Bouw minimaal 3 componenten
|
|
|
|
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
|
|
|
**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: Reflectie (300 woorden)
|
|
|
|
Schrijf over je OpenCode ervaring.
|
|
|
|
### Beantwoord deze vragen:
|
|
|
|
1. **Les vs Huiswerk**
|
|
- Wat was het verschil tussen werken met een bestaand project (les) en een nieuw project (huiswerk)?
|
|
- Wat vond je makkelijker/moeilijker?
|
|
|
|
2. **Plan vs Build mode**
|
|
- Hoe heb je Plan mode gebruikt?
|
|
- Wanneer switch je naar Build?
|
|
|
|
3. **Vergelijking met v0**
|
|
- Hoe verschilt OpenCode van v0.dev?
|
|
- Wat zijn voor- en nadelen van beide?
|
|
|
|
4. **Workflow**
|
|
- Hoe vaak heb je gepusht naar Vercel?
|
|
- Wat is je ideale workflow geworden?
|
|
|
|
5. **Tips voor jezelf**
|
|
- Welke shortcuts gebruik je het meest?
|
|
- Wat zou je volgende keer anders doen?
|
|
|
|
---
|
|
|
|
## Inleveren via Teams
|
|
|
|
1. **Link naar live website** (Vercel URL)
|
|
2. **Link naar GitHub repository**
|
|
3. **Screenshots** van je 3 componenten (desktop + mobile)
|
|
4. **Reflectie** als tekst of document
|
|
|
|
---
|
|
|
|
## Beoordeling
|
|
|
|
| Onderdeel | Punten |
|
|
|-----------|--------|
|
|
| Header/Navbar compleet + responsive | 2 |
|
|
| Hero Section compleet | 2 |
|
|
| Derde component compleet | 2 |
|
|
| Deployed op Vercel | 1 |
|
|
| Reflectie (inhoud + inzicht) | 3 |
|
|
| **Totaal** | **10** |
|
|
|
|
---
|
|
|
|
## Bonus (optioneel)
|
|
|
|
- [ ] Voeg meer dan 3 componenten toe
|
|
- [ ] Implementeer dark mode
|
|
- [ ] Voeg animaties toe met Framer Motion
|
|
- [ ] Maak meerdere pagina's
|
|
|
|
---
|
|
|
|
## Hulp nodig?
|
|
|
|
- Check de OpenCode documentatie: opencode.ai/docs
|
|
- Bekijk de les slides nogmaals
|
|
- Stel vragen in Teams
|