Az elmúlt két évben a Work & Co-nál dolgozó csapatommal teszteltük és fokozatosan integráltuk az olyan mesterséges intelligencia kódoló eszközöket, mint a Copilot, a Cursor, a Claude és a ChatGPT, hogy segítsenek nekünk a tömegek által használt webes élmények szállításában. El kell ismerni, hogy némi kezdeti szkepticizmus és néhány aha pillanat után a különféle mesterséges intelligencia eszközök utat találtak a mindennapi használatomba. Idővel bővülni kezdett azoknak az alkalmazásoknak a listája, amelyekben indokoltnak találtuk, hogy átvegyük az AI-t, ezért úgy döntöttem, hogy megosztok néhány gyakorlati példát az általam „felelős fejlesztőnek” nevezett AI-eszközökhöz. Mit értek felelős fejlesztő alatt? Gondoskodnunk kell arról, hogy az érdekelt feleink és ügyfeleink által elvárt minőségi kódot biztosítsunk. Hozzájárulásaink (azaz a lehívási kérések) ne váljanak teherré a kollégáink számára, akiknek felül kell vizsgálniuk és tesztelniük kell munkánkat. Továbbá, ha Ön egy cégnél dolgozik: Az általunk használt eszközöket a munkáltatónknak jóvá kell hagynia. Az olyan kényes szempontokat, mint a biztonság és az adatvédelem megfelelően kell kezelni: Ne illesszen be titkokat, ügyféladatokat (PII) vagy saját kódot az eszközökbe a szabályzat jóváhagyása nélkül. Kezelje úgy, mint egy idegentől származó kódot az interneten. Mindig tesztelje és ellenőrizze. Megjegyzés: Ez a cikk alapvető ismereteket feltételez az AI kódoló eszközökről, mint például a Copilot a VSCode-on vagy a Cursoron belül. Ha mindez teljesen újnak és ismeretlennek tűnik számodra, a Github Copilot oktatóvideója fantasztikus kiindulópont lehet számodra.
Az AI kódoló eszközök hasznos alkalmazásai Megjegyzés: A következő példák elsősorban a JavaScript-alapú webalkalmazásokban, például a React, a Vue, a Svelte vagy az Angular használatára összpontosítanak. Egy ismeretlen kódbázis megértése Nem ritka, hogy bevált kódbázisokon dolgozunk, és egy nagy örökölt kódbázishoz való csatlakozás megfélemlítő lehet. Egyszerűen nyissa meg projektjét és AI-ügynökét (az én esetemben a Copilot Chatet a VSCode-ban), és kezdjen el kérdéseket feltenni, ahogy azt egy kollégájának tenné fel. Általában szeretek bármely mesterséges intelligencia ügynökkel beszélgetni, ugyanúgy, mint egy embertársammal. Íme egy finomabb példa: "Adjon nekem egy magas szintű architektúra áttekintést: belépési pontok, útválasztás, hitelesítés, adatréteg, összeállítási eszközök. Ezután soroljon fel 5 fájlt, amelyeket el kell olvasni. Kezelje a magyarázatokat hipotézisekként, és erősítse meg a hivatkozott fájlokra ugrással."
Folyamatosan feltehet további kérdéseket, például „Hogyan működik az útválasztás részletesen?” vagy „Beszéld át a hitelesítési folyamatot és módszereket”, és hasznos útmutatásokhoz vezet, amelyek segítségével fényt vethetsz egy ismeretlen kódbázis sötétjébe. Az áttörő változások kipróbálása a függőségek frissítése során Az npm-csomagok frissítése, különösen, ha törést okozó változásokat tartalmaz, fárasztó és időigényes munka lehet, és jókora regressziós hibakeresést tesz lehetővé. Nemrég frissítenem kellett a plotly.js adatvizualizációs könyvtárat egy nagyobb kiadással a 2-es verzióról a 3-ra, és ennek következtében egyes grafikonokon leállt a tengelycímkézés. Megkérdeztem a ChatGPT-t: "Frissítettem a Plotlyt használó Angular projektemet. Frissítettem a plotly.js-t – a dist csomagot a 2.35.2-es verzióról a 3.1.0-s verzióra –, és most eltűntek az x és y tengely címkéi. Mi történt?"
Az ügynök azonnal visszatért a megoldással (lásd alább). Megjegyzés: A javítás elküldése előtt még mindig ellenőriztem a magyarázatot a hivatalos migrációs útmutató alapján.
Refaktorok biztonságos replikálása fájlok között A növekvő kódbázisok minden bizonnyal feltárják a kódkonszolidáció lehetőségeit. Például kódduplázódást észlel a fájlok között, amelyek egyetlen funkcióba vagy összetevőbe bonthatók ki. Ennek eredményeként úgy dönt, hogy létrehoz egy megosztott komponenst, amely helyette beilleszthető, és végrehajtja ezt az átalakítást egy fájlban. Most ahelyett, hogy manuálisan hajtaná végre ezeket a változtatásokat a fennmaradó fájlokon, kérje meg az ügynököt, hogy helyezze üzembe a refaktort. Az ügynökök lehetővé teszik több fájl kiválasztását kontextusként. Amint az egyik fájl átalakítása megtörtént, mind az újrafaktorált, mind az érintetlen fájlokat hozzáadhatom a kontextushoz, és megkérhetem az ügynököt, hogy hajtsa végre a módosításokat más fájlokon, így: „Másolja az A fájlban végrehajtott módosításokat a B fájlba is”. Jellemzők megvalósítása ismeretlen technológiákban A mesterséges intelligencia kódoló eszközeivel az egyik kedvenc aha-pillanatom az volt, amikor segített létrehozni egy meglehetősen összetett animált színátmenet-animációt GLSL-ben, egy olyan nyelven, amelyet meglehetősen ismeretlenül ismertem. Egy közelmúltbeli projekt során tervezőink animált színátmenettel álltak elő a 3D objektum betöltési állapotaként. Nagyon tetszett a koncepció, és valami egyedit és izgalmasat szerettem volna átadni ügyfeleinknek. Aprobléma: csak két napom volt a megvalósításra, és a GLSL meglehetősen meredek tanulási görbével rendelkezik. Ismét jól jött egy mesterséges intelligencia eszköz (jelen esetben a ChatGPT), és elkezdtem egyszerűen felszólítani, hogy hozzon létre egy önálló HTML-fájlt számomra, amely egy vásznat és egy nagyon egyszerű animált színátmenetet jelenít meg. Lépésről lépésre felszólítottam az AI-t, hogy finomítsa azt, amíg megfelelő eredményre nem jutottam, hogy elkezdhessem integrálni a shadert a tényleges kódbázisomba. A végeredmény: Ügyfeleink rendkívül elégedettek voltak, és az AI-nak köszönhetően rövid idő alatt egy összetett funkciót szállítottunk. Tesztek írása Tapasztalataim szerint a projekteken ritkán jut elég idő a megfelelő egység- és integrációs tesztek folyamatos írására és karbantartására, ráadásul sok fejlesztő nem igazán élvezi a tesztek írását. Teljesen lehetséges, és rövid időn belül megkérheti a mesterséges intelligencia segítőjét, hogy állítson be és írjon teszteket. Természetesen Önnek, mint fejlesztőnek továbbra is meg kell győződnie arról, hogy a tesztjei valóban átnézik az alkalmazás kritikus részeit, és ésszerű tesztelési elveket követnek, de a tesztek megírását „kiszervezheti” AI segítőnknek. Példa prompt: "Írjon egységteszteket ehhez a függvényhez a Jest segítségével. Fedezze fel a boldog utat, a szélső eseteket és a meghibásodási módokat. Magyarázza el, miért léteznek az egyes tesztek."
Akár az alábbi tesztguru Kent C. Dodds tesztelési bevált gyakorlatait is átadhatja ügynökének irányelvként:
Belső Szerszámozás A korábban említett shader példához hasonlóan nemrégiben azt a feladatot kaptam, hogy elemezzem a kódduplikációt egy kódbázisban, és hasonlítsam össze a refaktor előtt és után. Természetesen nem triviális feladat, ha nem akarja a fájlok manuális összehasonlításának időigényes útját járni. A Copilot segítségével létrehoztam egy szkriptet, amely a kódduplikációt elemezte számomra, a kimenetet táblázatba rendezte és rendezte, majd Excelbe exportáltam. Aztán egy lépéssel tovább léptem. Amikor elkészült a kódrefaktorunk, megkértem az ügynököt, hogy vegye alapul a meglévő Excel-lapot, adja hozzá külön oszlopokban a duplikáció aktuális állapotát, és számítsa ki a deltát. A régen írt kód frissítése Nemrég megütött egy régi ügyfelem, mivel az idő múlásával néhány funkció már nem működött megfelelően a webhelyén. A bökkenő: A webhely majdnem tíz éve készült, és a JavaScript és az SCSS meglehetősen régi fordítóeszközöket használt, például a requestJS-t, és a beállításhoz a Node.js régebbi verziójára volt szükség, amely nem is futott a 2025-ös MacBookomon. A teljes összeállítási folyamat kézi frissítése napokba telt volna, ezért úgy döntöttem, hogy megkérdezem az AI-ügynököt: „Frissítheti a JS és SCSS összeállítási folyamatot egy karcsú 2025-ös veremre, mint a Vite?” Az biztos, hogy sikerült, és az ügynökkel való egy órás finomítás után az SCSS és JS buildemet Vite-ra váltottam, és a tényleges hibajavításra tudtam koncentrálni. Csak győződjön meg arról, hogy megfelelően érvényesíti a kimenetet és a lefordított fájlokat, amikor ilyen integrált változtatásokat hajt végre az összeállítási folyamaton. Összegzés és megfogalmazás Szeretné összefoglalni az összes legutóbbi kódmódosítást egy mondatban egy véglegesítési üzenethez, vagy hosszú listát szeretne a véglegesítésekről, és szeretné ezeket három pontban összefoglalni? Semmi gond, hagyja, hogy a mesterséges intelligencia gondoskodjon róla, de kérjük, feltétlenül olvassa el a korrektúrát. Egy példakérdés olyan egyszerű, mint egy embertársnak üzenni: „Kérjük, foglalja össze a legutóbbi változásaimat tömör pontokban”. Azt tanácsolom, hogy óvatosan használja a GPT-t az íráshoz, és mint a kód esetében, kérjük, ellenőrizze a kimenetet elküldés vagy beküldés előtt. Ajánlások és legjobb gyakorlatok Felszólítás A mesterséges intelligencia használatának egyik nem túl nyilvánvaló előnye, hogy minél konkrétabbak és személyre szabottabbak az utasítások, annál jobb a kimenet. Az AI-ügynök felszólításának folyamata arra kényszerít bennünket, hogy a lehető legpontosabban fogalmazzuk meg követelményeinket, mielőtt írunk és kódolunk. Ezért általános szabályként azt javaslom, hogy a lehető legpontosabb legyen a felszólítás. Ryan Florence, a Remix társszerzője egy egyszerű, de hatékony módszert javasol ennek a folyamatnak a javítására azáltal, hogy a kezdeti felszólítást a következő mondattal fejezi be: – Mielőtt elkezdenénk, van valami kérdése hozzám?
Ezen a ponton a mesterséges intelligencia általában hasznos kérdésekkel tér vissza, ahol tisztázhatja konkrét szándékát, és irányítja az ügynököt, hogy személyre szabottabb megközelítést biztosítson a feladatához.
Használja a verzióvezérlést, és dolgozzon emészthető darabokban A verziókezelés, például a git használata nemcsak akkor hasznos, ha egyetlen kódbázison dolgozunk csapatként, hanem akkor is, haegyéni közreműködő stabil pontokkal, akikhez vészhelyzet esetén vissza lehet fordulni. Nem determinisztikus természete miatt a mesterséges intelligencia néha szélhámoskodhat, és olyan változtatásokat hajthat végre, amelyek egyszerűen nem segítik az Ön által elérni kívánt célt, és végül helyrehozhatatlanul eltörik a dolgokat. Munkájának több véglegesítésre való felosztása segít stabil pontok létrehozásában, amelyekhez visszatérhet, ha a dolgok oldalra fordulnak. És a csapattársai is hálásak lesznek, mivel könnyebben áttekinthetik a kódot, ha szemantikailag jól strukturált darabokra van felosztva. Tekintse át alaposan Ez inkább egy általános bevált gyakorlat, de véleményem szerint még fontosabbá válik, ha AI-eszközöket használunk a fejlesztési munkához: Legyen Ön a kódja első kritikus felülvizsgálója. Szánjon egy kis időt a módosítások soronkénti áttanulmányozására, akárcsak valaki más kódját, és csak akkor küldje be a munkáját, ha az átment a saját önellenőrzésén. „Jelenleg két dolog igaz rám: az AI-ügynökök elképesztőek, és óriási mértékben növelik a termelékenységet. Hatalmas rongyos gépek is, ha kikapcsolod az agyad, és teljesen elengeded.” – Armin Ronacher Agent Psychosis: Megőrülünk?
Következtetések és kritikai gondolatok Véleményem szerint az AI kódoló eszközök napi szinten javíthatják fejlesztői termelékenységünket, és felszabadíthatják a mentális kapacitást a több tervezéshez és a magasabb szintű gondolkodáshoz. Arra kényszerítenek bennünket, hogy aprólékos részletekkel fogalmazzuk meg a kívánt eredményt. Bármely mesterséges intelligencia időnként hallucinálhat, ami lényegében azt jelenti, hogy magabiztos hangnemben rejlik. Ezért kérjük, ellenőrizze és tesztelje, különösen, ha kétségei vannak. A mesterséges intelligencia nem egy ezüstgolyó, és úgy gondolom, hogy a kiválóság és a fejlesztői problémák megoldásának képessége soha nem megy ki a divatból. A karrierjüket csak most kezdő fejlesztők számára ezek az eszközök nagyon csábítóak lehetnek, hogy a munka nagy részét helyettük végezzék el. Ami itt elveszhet, az a gyakran kimerítő és fájdalmas munka a hibákon és olyan problémákon keresztül, amelyeket nehéz hibakeresni és megoldani, más néven „a darálás”. Még a Cursor AI sajátja, Lee Robinson is megkérdőjelezi ezt egyik bejegyzésében:
Az AI kódoló eszközök gyors ütemben fejlődnek, és izgatottan várom, mi fog következni. Remélem, hasznosnak találta ezt a cikket és a benne található tippeket, és izgatottan várja, hogy Ön is kipróbáljon néhányat ezek közül.
