Fórum:AI/Vibe Coding

Návod pro studenty

Cíl

Vytvořit jednoduchou webovou aplikaci pomocí AI asistenta a publikovat ji online tak, aby měla vlastní veřejnou URL adresu.

---

Varianta A

(Nejjednodušší, bez databáze, 100 % zdarma)

1. Instalace nástrojů

• Nainstalujte si VS Code – https://code.visualstudio.com/
• Nainstalujte si Node.js (LTS verzi) – https://nodejs.org/
• Vytvořte si účet na:
  • GitHub – https://github.com/
  • Vercel – https://vercel.com/

---

2. Vytvoření projektu pomocí AI

Otevřete AI asistenta (např. ChatGPT, Claude, Gemini) a použijte tento prompt:

Vytvoř mi webovou aplikaci v Next.js (App Router) s názvem StudyChecklist.
Funkce: přidat úkol (název, předmět, deadline), označit jako hotové, filtrovat hotové/nehotové.
UI jednoduché, responzivní, české popisky.
Přidej instrukce, jak aplikaci spustit lokálně a jak ji nasadit na Vercel.

---

3. Vygenerování projektu

1. V počítači vytvořte novou složku (např. study-checklist).
2. Otevřete ji ve VS Code.
3. Postupujte podle instrukcí, které vám AI poskytne.
4. Spusťte v terminálu:

npm install
npm run dev

1. Otevřete prohlížeč na adrese:

http://localhost:3000

---

4. Testování aplikace

• Přidejte několik úkolů.
• Označte některé jako hotové.
• Ověřte, že filtrování funguje.

---

5. Vylepšování pomocí AI

Zadejte AI další úpravy, například:

• „Přidej vyhledávání.“
• „Přidej řazení podle deadlinu.“
• „Zlepši design pomocí moderního stylu.“

---

6. Nahrání projektu na GitHub

1. Vytvořte nový repozitář na GitHubu.
2. Ve VS Code spusťte:

git init
git add .
git commit -m "První verze aplikace"

1. Propojte projekt s GitHub repozitářem podle instrukcí GitHubu.
2. Nahrajte projekt pomocí:

git push

---

7. Nasazení aplikace na Vercel

1. Přihlaste se do Vercel (https://vercel.com/).
2. Klikněte na New Project.
3. Propojte GitHub účet.
4. Vyberte svůj repozitář.
5. Klikněte na Deploy.

Po dokončení získáte veřejnou URL adresu své aplikace.

---

Varianta B

(Pokročilejší, s databází Supabase)

1. Založení databáze

• Vytvořte účet na https://supabase.com/
• Založte nový projekt (Free plán).
• Vytvořte tabulku (např. tasks).

---

2. Úprava aplikace pomocí AI

Použijte prompt:

Uprav aplikaci tak, aby používala Supabase jako databázi.
Data se mají ukládat trvale.
Přidej instrukce pro nastavení SUPABASE_URL a SUPABASE_ANON_KEY.

---

3. Nastavení proměnných prostředí

Ve Vercel přidejte do Environment Variables:

• SUPABASE_URL
• SUPABASE_ANON_KEY

---

4. Opětovný deploy

Po uložení proměnných spusťte nový deploy.

---

Výstup

Každý student by měl mít:

• Funkční webovou aplikaci
• Veřejnou URL adresu
• GitHub repozitář s projektem
• Zkušenost s iterativním vývojem pomocí AI

---

Reflexe

Odpovězte si:

• Co AI vytvořila správně?
• Kde bylo potřeba opravit chyby?
• Jak přesné musí být zadání?
• Jaké jsou limity AI při programování?