164 lines
3.8 KiB
Markdown
164 lines
3.8 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 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
|