Bevezetés
Azt vettem észre magamon, hogy amikor magyarázok valamit, vagy tanítok, akkor mindig rajzolok.
Csakhogy nem tudok jól rajzolni…
Arra gondoltam, hogy megkérem a mesterséges intelligenciát, hogy rajzoljon helyettem. Mert ebben (is) jobb nálam. És ha már rajzol akkor ne csak mindenféle ábrák legyenek. Hanem interaktívak is. Legyenek szép színes gombok, amiket lehet nyomkodni. Amik megmutatják, hogy miként is működik az, amiről beszélünk.
Erre pedig van egy nagyon jó program: A Google AI Studio. Itt néhány mondattal leírom, miről is szeretnék beszélni. A program pedig elkészíti.
Mielőtt elkezdjük
Mielőtt belekezdenénk, mindenképpen olvasd el, hogy mi a bánat is az a Google AI Studio, és hogyan lehet benne programot készíteni.
Pár mondatban azért leírjuk, hogy miről is van szó.
A Google AI Studio Build szekcióban programokat tudunk készíteni. De ehhez semmiféle programozási ismeret nem szükséges (de azért jó, ha van). Mi csak beírjuk egy chat ablakba, hogy mit szeretnénk.
A mesterséges intelligencia pedig elkészíti a programot. Ennek a technikának a neve vibe coding.
⭐PixelRita magyarázata⭐
Mi az a vibe coding?
A vibe coding lényege, hogy nem kódot írunk, hanem szavakkal leírjuk, mit szeretnénk, a mesterséges intelligencia pedig ebből készíti el a programot.
+ 1–2 ismeretterjesztő kiegészítés:
A vibe coding során a hangsúly nem a szintaktikán, hanem az ötleteken és a működésen van: olyan, mintha egy fejlesztőnek mesélnénk el az elképzelésünket. Ez különösen hasznos oktatásban, prototípus-készítésnél vagy akkor, amikor gyorsan szeretnénk kipróbálni egy ötletet programozási háttértudás nélkül.
Nem csak a Google AI Studio képes erre:
Vibe coding jellegű fejlesztésre alkalmas többek között a ChatGPT, a GitHub Copilot, a Replit AI, a Cursor vagy az Anthropic Claude is – mindegyik más erősségekkel, de ugyanazzal az alapelvvel: mondd el, mit szeretnél, és az AI megcsinálja helyetted a kód nagy részét.A Google AI Studio ablakában a bal oldalon tudunk a mesterséges intelligenciával beszélgetni. Itt adjuk meg, hogy mit szeretnénk, hogyan működjön a program, hogy nézzen ki, mi mit csináljon, stb…
Jobb oldalt pedig a kész programot láthatjuk. Ez már működik, kipróbálhatjuk, használhatjuk.
Ha pedig valamit szeretnénk változtatni, bővíteni, kivenni, vagy csak nem működik, akkor azt megint a bal oldali chat ablakba tudjuk megtenni.
Az egészet úgy képzeljük el, mintha egy programozó gurunak mondanánk el, hogy milyen applikációt is szeretnénk. A többit pedig ő megoldja.
A Google AI Studio nemcsak arra jó, hogy felhasználói programot készítsünk. Hanem akár kisebb, interaktív programocskákat is. Jelen esetben olyan tanuló programokat, ahol láthatjuk, mi hogyan működik. És ki is lehet próbálni!
Ehhez elegendő csak néhány utasítást adnunk. Mindent a mesterséges intelligencia fog elkészíteni.
A kész programokhoz nem adok linkeket. Az utasítást (prompt) írom le. Ezt másold be, próbáld ki. És látni fogod, hogy milyen könnyen és egyszerűen te magad is elkészítheted a saját programodat.
Egysoros utasítás
Valójában három sor.
Első példánkban azt fogjuk megnézni, hogy már néhány mondatos utasítással is tudunk egy egyszerűbb programot készíteni. Ez egy interaktív bemutató ábra lesz.
Magával a programmal nekünk nem kell foglalkozni. Csak a következőket kell megadni:
- Mit csináljon a program?
- Ki a célcsoport?
- Hogyan nézzen ki?
Mit csináljon a program?
A legfontosabb: mi is a program feladata? Mit kell csinálnia?
Ezt nem is kell túlgondolni. Egyszerűen csak írjuk le, hogy mit szeretnénk látni.
Például: egy látványos interaktív oktató program a víz körforgásáról.
Ennyi bőven elég.
Természetesen részletesen is leírhatjuk, hogyan működjön a program, mit szeretnénk látni stb… Erre később még visszatérünk.
Most a mesterséges intelligenciára hagyjuk, hogy részletesen kidolgozza.
Célcsoport
Mivel tanuló anyagok készítünk, kiemelten fontos a célcsoport. Nem mindegy, hogy ötödik osztályosoknak készül a tananyag, vagy pedig egyetemistáknak.
Kinézet, stílus
Több lehetőségünk is van a program kinézetének meghatározásához.
- Leírhatjuk részletesen, hogyan nézzen ki, mi milyen színű legyen, stb…
- Mellékelhetünk egy képet, vagy egy vázlatot is a programunkról.
- Néhány irányvonalat, szempontot adunk meg, majd ráhagyjuk a mesterséges intelligenciára, hogy dolgozza ki.
- Teljesen a mesterséges intelligenciára bízzuk magunkat.
Később még visszatérünk erre részletesebben. Most elég csak annyi, hogy gyerekbarát kezelőfelületet szeretnénk.
Utasítás
Tehát az első utasításunk legyen egyszerű, lényegretörő!
Másoljuk ki, és illesszük be a A Google AI Studio Build szekcióba.
Készíts egy látványos interaktív oktató programot 14 éves gyerekeknek.
Téma: a víz körforgása.
Kinézet: gyerekbarát kezelőfelület legyen.Néhány perc múlva pedig már készen is van a programunk: egy interaktív ábra a víz körforgásáról.
A tied nem pont ilyen lesz. Mindenki egy kicsit más programot fog kapni. Mivel kevés konkrét dolgot adtunk meg, a hiányzó információkat a mesterséges intelligencia töltötte ki.
Figyeljük meg, hogy ezen a képen extra funkciók jelentek meg: kvíz, beszélgetés a mesterséges intelligenciával. De még a folyamatot is leírja. Pont úgy, ahogyan egy 14 éves gyerek megérti.
Ezen a képen van néhány hiba. Ezeket írjuk le a programnak, hogy javítsa ki!
Összetett program
Ebben a példában részletesen leírjuk, hogy mit csináljon a program, és hogyan működjön.
Ekkor az utasítás ilyen formában lehet:
Készíts egy látványos interaktív oktató programot 14 éves fiúknak.
Téma: atomok, kovalens kötés.
A program működése:
A különböző atomoknak annyi keze legyen, mint ahány kötést képesek létesíteni. Pl. klór 1 kéz, oxigén 2 kéz, nitrogén 3 kéz, stb...
Majd pedig úgy lehessen molekulákat építeni, ahol ezek az atomok összekapaszkodnak.
Legyen egy doboz, ahonnan az atomokat ki lehet venni, meg visszarakni.
Az ELLENŐRZÉS gombra kattintva a program megnézi, hogy minden atom minden "keze" foglalt, vagy van még szabad kapcsolódási lehetőség. A program elmondja azt is, hogy a valóságban mi is ez a molekula, ha tényleg létezik, és néhány tulajdonságot, meg érdekességet mond róla.
Legyen egy Chat felület is, ahol a témáról lehet beszélgetni.Erre az összetett kérésre az alábbi programot kaptuk.
Természetesen ezúttal is minden alkalommal egy kicsit másmilyen programot kaptunk. De mivel az alapvető működést meghatároztuk, nagyjából minden esetben hasonlóan fog működni.
Álljon itt egy másik példa is, ahol az atomok elektronszerkezetét lehet jobban megérteni. Ebben az esetben egy kifejezetten bonyolult, részletes utasítást használtunk:
Készíts egy programot, ami az atomok, elektronok, ionok, kovalens kötések működését lehet interaktívan megérteni és kipróbálni.
A program a következőképpen működik:
1) kiválasztunk egy atomot.
2) Az atom úgy fog kinézni, mint egy több emeletes ház, blokkokból van egymáson.
-a földszint maga az atom, egy négyzet, benne az atom vegyjele (pl. Ca)
-az emeletek az elektron pályák. Minden emelet egy-egy pálya (elektronhéj). És minden emeleten annyi szoba van, ahány alhéj. Minden szobába (alhéjba) annyi elektron fér bele, amennyi a szoba "tulajdonsága". Pl. s szoba= max 2 elektron. p szoba =max 6 elektron.
-ahogy nő az atom rendszáma, nő az elektron szám, több héj és alhéj lesz. Ezzel pedig több emelet, több szoba.
3) Amikor kiválasztottuk az atomot, felépül a ház, és az adott elektron szám szerint feltöltődnek a szobák
4) A cél, hogy minden szoba tele legyen. Ehhez vagy elektront rakunk bele, vagy elveszünk belőle. Amikor minden szoba tele van, akkor írja ki a program, hogy "Stabil" De közben jelenjen meg az is, hogy mi az elektromos állapota (pl. +2)
Legyen ott az atom / ion neve.
5) Így készítünk atomokat, ionokat. Ez az első fül: "Atom gyár". Az így készült atomok-ionok egy dobozba kerülnek bele. Csak a stabilokat lehet berakni.
6) A második ablak az "Ion". Ide az elkészített + és - ionokat tudjuk egymás mellé tenni. Felül kiírja, hogy az össz elektromosság mi. pl. +1 vagy -3 vagy 0.
7) A harmadik ablak a "Kovalens kötés". Itt csak a kovalens "ionok" vehetnek részt. Itt, mint Lego rakjuk össze őket molekulává. Pl. 2 db H és 1 db O = H2O. A kötéseket manuálisan rakjuk össze, vagy szakítjuk meg.
8) Minden esetben, mikor molekulát rakunk össze, legyen "Ellenőrzés" gomb. Ekkor a program megnézi, milyen molekulát raktunk össze. Ellenőrzi, hogy tényleg jól raktuk össze (elektronok száma oké). majd elmondja, hogy ez milyen molekula a valóságban (pl. H2O), mi a hétköznapi neve (pl. víz), és néhány dolog róla. 1-2 érdekesség mindig legyen!
9) Legyen egy chat ablak, ahol segítséget, magyarázatokat, stb. lehet kérni.
A programnak látványos grafikai felülete legyen. 14 éves gyerekeknek készüljön.Ebből az utasításból valami ilyen programot fogunk kapni:
Láthattuk tehát, hogy nagyon részletes utasítást is adhatunk arra, hogyan is működjön az ismeretterjesztő programunk.
A program működésének kidolgozásához kérhetjük a ChatGPT vagy Gemini segítségét is.
Gondolkozzon a program
Előfordulhat, hogy szeretnék készíteni egy tanuló anyagot. De igazándiból nem tudjuk, hogyan is kellene működnie (vagy csak éppen nincs kedvünk/időnk/energiánk kitalálni).
Ebben az esetben megkérjük a mesterséges intelligenciát, hogy dolgozza ki a programot.
Ilyenkor használjuk egy ehhez hasonló utasítást:
Készíts egy látványos interaktív oktató programot 14 éves gyerekek.
Téma: sejtosztódás
Gyerekbarát, érdekes felülete legyen.
Gondold végig, hogyan is lehetne ezt a legjobban bemutatni, tanuló formában. Majd pedig készítsd el a programot!
Mint láthattuk, tényleg néhány egyszerű mondattal komplett, és látványos bemutatókat tudunk készíteni.
Próbálkozzunk további területeken, további programok készítésével!
Legyen stílusunk is!
Oké. Mostanra egészen jól belejöttünk az interaktív oktató anyagok készítésébe.
Ideje, hogy ezek úgy nézzenek ki, hogy a tanulók is kedvet kapjanak a kipróbálásához.
Szerencsére ezt sem kell elbonyolítani. Néhány mondattal máris jobb lesz a hangulat.
Készíts egy látványos interaktív oktató programot 14 éves lányoknak.
A négyszögek típusai legyenek. Minden esetben egy választó felületen lehessen eldönteni, hogy a négyszög mely tulajdonságát specializáljuk: párhuzamos oldalak, szögek, egyforma oldalak, stb... Így jutunk lépésről lépésre a négyzetig.
Ugyanezt visszafele is, a szabályok enyhítésével eljutunk a szabálytalan négyszögig.
Mindegyik síkidomnál legyen leírva:
- neve
- specialitása (pl. párhuzamos oldalak)
- kerület és terület számítása
Stílus: hangulatos gyerekbarát felület póni lovakkalRövid idő múlva megkaptuk a programunkat.
Nem, pónik mégsincsenek…
Oké, a pónik mégsem jelentek meg. De ha kitartóan kérjük az AI Studio-t, akkor végül sikerülni fog!
Ugyanezt az utasítást ha kicsit megváltoztatjuk, máris Pókemberes stílusú lesz a programunk:
Készíts egy látványos interaktív oktató programot 14 éves fiúknak.
A négyszögek típusai legyenek. Minden esetben egy választó felületen lehessen eldönteni, hogy a négyszög mely tulajdonságát specializáljuk: párhuzamos oldalak, szögek, egyforma oldalak, stb... Így jutunk lépésről lépésre a négyzetig.
Ugyanezt visszafele is, a szabályok enyhítésével eljutunk a szabálytalan négyszögig.
Mindegyik síkidomnál legyen leírva:
- neve
- specialitása (pl. párhuzamos oldalak)
- kerület és terület számítása
Stílus: hangulatos gyerekbarát felület Pókemberrel
💡PixelRita tippje💡
„A matek ugyanaz marad. Csak a Pókember közben integet.” 😄
🧠 Fontos üzenet:
A kinézet nem dísz, hanem motivációs eszköz.
Ha belép → tanul.
❓ Közönségkérdés:
„Nektek mi lenne a tanulós stílusotok? Anime? Minecraft? Star Wars?” 🌌🎮Ezekben a példákban az alapszintű, könnyen felépíthető grafikai megjelenéseket néztük meg. Ezeket mind néhány szavas utasítással el tudjuk készíteni.
De ennél sokkal dekoratívabb, összetettebb programunk is lehet. Ahhoz viszont többet kell dolgozni.
Érdemes pl. egy minta képet adni a programnak.
Használhatunk saját képeket is. Vagy a Gemini is tud képeket generálni. A lehetőségeinket csak az határolja be, hogy mennyi időt akarunk tölteni egy-egy program kidolgozásával.
Használjunk képet is
Rószavölgyi János dobott be egy fizikai ábrát a Facebook csoportba. Ez adta az ötletet, hogy az ilyen feladatok könnyebb megértésére is lehetne használni a mesterséges intelligenciát, mégpedig a Google AI Studio-t.
Vegyük például a mozgó-, és álló csigákat. Keressünk (vagy rajzoljunk) egy szemléltető ábrát. A Google-t arra fogjuk megkérni, hogy ebből készítsen egy olyan interaktív programot, ahol ki tudjuk próbálni az erőhatásokat. Egy olyat, ahol lehet változtatni a csigák méretén, a súlyon, és minden máson is.
Így nemcsak egy sima képünk lesz sok-sok mindenfele mutató nyilakkal. Hanem egy olyan, ami tényleg látszik, mi miért történik.
Tehát fogjunk meg egy képet! Ez lesz a minta. Ilyet szeretnénk.
Mellé pedig megírjuk, hogyan is működjön:
Készíts egy látványos interaktív oktató programot 14 éves gyerekek.
Feladat: a program az álló és a mozgó csigák működését mutatja be. Használd a mellékelt képet, és egy ehhez hasonlót készíts. Az interaktív tanuló programban a csigák átmérőjét, a súlyt, stb. lehessen állítani, és így megfigyelni, hogy mi hogyan fog változni.
Gyerekbarát, érdekes felülete legyen.
A kész programunk valahogy így fog kinézni. Nemcsak azt látjuk, hogy milyen erők szerepelnek, hanem ki tudjuk próbálni, mi történik, ha változtatjuk a csigák méretét vagy a súlyt.
Mellé pedig kapunk rövid magyarázó szövegeket is.
Próbáljunk ki egy hasonlót! Ezúttal a lejtő és súrlódás fizikájáról készítsünk egy programot. Az előző utasításban elég csak néhány szót cserélni, hogy új programot kapjunk.
És persze ismét használjunk egy szemléltető ábrát forrásként.
Készíts egy látványos interaktív oktató programot 14 éves gyerekek.
Feladat: az erő és a súrlódás működését mutatja be. Használd a mellékelt képet, és egy ehhez hasonlót készítsél. Az interaktív tanuló programban az erő, súrlódás, tárgy súlyát, stb. lehessen állítani, és így megfigyelni, hogy mi hogyan fog változni.
Gyerekbarát, érdekes felülete legyen.
Láthatjuk, hogy már nagyon pici változás is elég, hogy egy teljesen új programot kapjunk.
Vegyük elő a fizika könyvet, és egymás után készíthetjük az újabb és újabb szemléltető interaktív tanulási anyagot.
Összegzés
Ebben a bejegyzésben összesen 8 olyan mini program van, amelyik a tanulásban segíthet.
Mint láthattuk, az elkészítésükhöz semmilyen programozási ismeret nem szükséges. Nem is valami összetett programot szerettünk volna, hanem csak pár látványos, és hasznos magyarázó ábrát. Ehhez pedig nem szükséges a programozás mélyebb ismerete.
De ne csak iskolás példákra gondoljunk!
Én gyakran használom arra, hogy a mesterséges intelligencia működését, vagy valami teljesen mást szemléltessek.
Elegendő csak néhány átgondolt mondat, hogy pontosan mit is szeretnénk és kinek szeretnénk megmutatni. A többi már a mesterséges intelligencia feladata.
Mindenki próbálkozzon bátran!
Utasítás:
Szeretnék egy interaktív előadás programot készíteni, ami bemutatja, és ki lehet próbálni azt a folyamatot, amikor az MI nyelvi modell (pl. ChatGPT) hogyan "találja ki", hogy mi legyen a válasz a kérdésre, hogyan generálja a válaszokat, és így tovább.
Minden elemet külön-külön szeretnék kezelni. Mint amikor a múzeumban azt lehet megnézni, hogyan működik a motor vagy valamelyik gép.PixelRita
PixelRita te mit gondolsz?
Ha egy dolgot szeretnék, hogy megmaradjon ebből az egészből, akkor ez az: itt nem az MI a főszereplő. Nem az a cél, hogy megtanuljuk, hogyan gondolkodik, hogyan számol, vagy milyen trükkök vannak a motorháztető alatt.
A cél az, hogy tanuló anyagokat készítsünk.
Egyszerűen. Gyorsan. Jól.
Úgy, hogy közben nem kell programozónak lennünk.
Az MI ebben a történetben nem tanár, nem varázsló, nem okosabb nálunk.
Hanem egy eszköz, ami leveszi rólunk azt a terhet, ami eddig útban volt: a rajzolást, az animálást, a programozást, az interaktivitás technikai részét.
Ami marad, az a lényeg:
- mit akarunk megértetni,
- kivel,
- és hogyan tudja kipróbálni, elrontani, újraépíteni.
Ez nem az MI tanulásáról szól.
Ez a tanítás felszabadításáról szól.
Ha egy ötletből pár mondattal működő, kipróbálható tananyag lesz, akkor a technológia végre a helyére került. A háttérbe. Dolgozni.
És innentől nem az a kérdés, hogy „értek-e a programozáshoz?”
Hanem az, hogy:
👉 „Mit mutatnék meg legközelebb?”
Na, ez az a kérdés, amiből igazán jó tanulás születik.
