Vibe coding tanároknak – így született a „JelenVagyok” visszajelző app

Közzétéve: 2025. november 7. · ~6 perc olvasás

A vibe coding egy új szemlélet: nem kódolni kell megtanulni, hanem másképp gondolkodni. Ugyanaz a készség, amit ma a diákoktól is várunk: merj kísérletezni, gondolkodj rendszerszinten, és lásd meg a mintázatokat a technológia mögött. Ez az igazi 21. századi skill – a digitális alkotói gondolkodás.

Mi az a vibe coding?

A vibe coding lényege, hogy közérthetően írod le, mit szeretnél, az AI pedig lefordítja működő kódra. A tanár így nem programozóként, hanem tervezőként gondolkodik:

• megfogalmazza az ötletet,
• az AI generálja a működést,
• ő pedig hangolja a ritmust, a felhasználói élményt.

Ez a folyamat fejlesztés helyett inkább digitális alkotás. A „vibe” itt a ritmus, az áramlás: az ötletből percek alatt születik valami, ami használható.

A kiindulás – egy tanórai pillanat

A tanórák végén gyakran elhangzik a kérdés: „Mindenkinek érthető volt?” Erre sokszor csak csend a válasz. Innen jött az ötlet:

„Mi lenne, ha a diákok névtelenül, egyetlen kattintással jelezhetnék, hogy értik-e az anyagot?”

Ez lett a JelenVagyok – egy 2 perces visszajelző webapp.

Az első prompt (így kezdődött)

Szeretnék egy egyszerű webalkalmazást:
- A diák három képfájlból (zöld, sárga, piros) választhat.
- A diák kap egy „Köszönöm 🙂” visszajelzést.
- A tanár egy külön oldalon látja összesítve: hány zöld, sárga, piros jelzés érkezett.
- Reset gombbal újrakezdhető.
- Ne kelljen bejelentkezni.

Ez a néhány sor leírás elég volt ahhoz, hogy a ChatGPT működő rendszert generáljon: 4 PHP fájl, 3 képfájl, és kész is volt az első verzió.

A diák oldala (részlet)

<div id="buttons">
  <img src="img/green.png" onclick="vote('yes')">
  <img src="img/jellow.png" onclick="vote('maybe')">
  <img src="img/red.png" onclick="vote('no')">
</div>

<script>
async function vote(val){
  await fetch('send.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'valasz='+val});
  document.getElementById('buttons').style.display='none';
  document.getElementById('msg').textContent='Köszönöm 🙂';
}
</script>

Tanári összesítés

<?php
$data = json_decode(file_get_contents('votes.json'), true);
?>
<table>
  <tr><th>Zöld</th><td><?= $data['yes'] ?></td></tr>
  <tr><th>Sárga</th><td><?= $data['maybe'] ?></td></tr>
  <tr><th>Piros</th><td><?= $data['no'] ?></td></tr>
</table>
<a href="reset.php">Reset</a>

A rendszer működik, egyszerű, átlátható. És ami fontos: nem fejlesztő készítette, hanem tanári logika szülte.

Miért tanároknak való?

• A tanár eleve tudja, milyen visszajelzésre van szüksége.
• Nem kell technikai tudás, csak világos cél.
• Az AI elvégzi a kódolási részt, a tanár az élményt formálja.

A vibe coding nem informatikai tudás – hanem az oktatásban hasznosítható digitális gondolkodásmód.

Ha érdekel a vibe coding

A „JelenVagyok” csak egy példa. Ugyanezzel a módszerrel lehetne kvízappot, online értékelőlapot, sőt osztályprojekthez kapcsolódó eszközt is készíteni.

Ha tanárként érdekel, hogyan tudnál ChatGPT-vel tanórai segédeszközt készíteni, szívesen segítek az első lépésekben.
info@webspirit.hu

Írj, és nézzük meg, mit tudunk együtt megvalósítani.