AI WORLD HQKészíts egyszerű jelentkezési űrlapot eseményedhez a GitHub Copilottal
Gondold át, milyen mezőkre van szükséged, aztán kérd meg a Copilotot, hogy készítsen egy letisztult HTML űrlapot, amit bármilyen böngészőban megnyithatsz.
Röviden: A GitHub Copilot akkor tud alap HTML-jelentkezési űrlapot készíteni, ha közérthetően leírod a mezőket. A végén egy mentett fájlt kapsz, amit bármilyen böngészőben megnyithatsz — a válaszok online gyűjtése egy külön, későbbi lépés.
Egy workshophoz, klubtalálkozóhoz oder csapatkiránduláshoz a jelentkezési űrlap sokkal jobb, mint a válaszok hajszolása csetcsatornákon keresztül. A GitHub Copilot egy mesterséges intelligenciás kódolási segéd, amely gépelés közben kódot javasol — leírod közérthető szavakkal, mit szeretnél, ő pedig megírja helyetted az űrlapot. Ez az útmutató szervezőknek szól, akik szívesebben nem kódolnak kézzel, de szeretnének egy egyszerű, érthető és később szerkeszthető űrlapot.
💡 Tipp: kattints egy lépés számára, ha kész vagy — zöld pipa jelenik meg, és a böngésződ megjegyzi, meddig jutottál.
Mielőtt belevágsz
- Egy ingyenes GitHub-fiók (regisztrálj a github.com oldalon, ha még nincs).
- Egy GitHub Copilot-előfizetés — van ingyenes csomag korlátozott funkciókkal és fizetős csomagok több lehetőséggel; nézd meg a GitHub árkalkulációs oldalán, melyik passzol hozzád most.
- Visual Studio Code (VS Code) telepítve — egy ingyenes kódszerkesztő a Microsofttól, és a legegyszerűbb hely a Copilot használatához.
- Körülbelül 20–30 perc az első próbálkozáshoz. A későbbi űrlapok sokkal gyorsabban mennek.
- Egy őszinte korlát: ez az útmutató egy böngészőben megnyitható mentett fájlig vezet. Még nem küldi el a válaszokat sehova — a jelentkezések online gyűjtése egy külön lépés.
Sorold fel az űrlap szükséges mezőit
Nyiss meg bármilyen jegyzetfüzetet — papírt, a telefonod oder egy egyszerű szövegfájlt — és írd le a kérdéseket, amelyeket fel szeretnél tenni. A legtöbb esemény-jelentkezéshez négy-hat mező elegendő: teljes név, e-mail-cím, vendégek száma, étkezési oder akadálymentességi igények, és egy szabad szöveges megjegyzésmező. Legyen rövid; minden extra mező csökkenti a kitöltők számát. Ha az eseményednek több ülése oder jegytípusa van, tegyél be egy „ülés" mezőt néhány opcióval, ne pedig több külön dobozt.
Akkor csináltad jól, ha egy barátod elolvassa a listát, és azonnal megérti, kiknek szól az űrlap.
Hozz létre egy mappát és a HTML-fájlt
Készíts egy új mappát a projekthez — nevezd el EventForm néven, és tedd az Asztalra oder a Dokumentumok közé. Belül hozz létre egy új üres szövegfájlt, és nevezd át signup.html névre. A .html végződés jelenti a számítógépnek, hogy „ez egy weboldal". Az üres fájl léktöse a rendszeredtől függ: Windowson keresd valami ilyesmit: jobb kattintás → Új → Szövegfájl, aztán nevezd át; Macen nyisd meg a TextEditet, válaszd valami ilyesmit: Fájl → Új, aztán Fájl → Mentés másként, és a formátum legyen egyszerű szöveg. A pontos menüpontok verziónként változnak — keresd meg, bármi is készít üres szövegfájlt.
Nyisd meg a signup.html fájlt a VS Code-ban, ha ráhúzod az ablakra, oder használd a Fájl → Mappa megnyitása opciót, és válaszd az EventForm mappát.
Akkor csináltad jól, ha a signup.html megjelenik fülként a VS Code tetején, és a mappa neve látszik a bal oldali sávon.
Adj hozzá egy alap HTML-vázat
Az üres fájl megnyitása után írj bele egy kis vázat. Minden sor egy címke — egy megjelölt jelölő, amely megmondja a böngészőnek, mi van a nyitó és záró változat között. A <title> címke nevezi el a böngészőfület, a <body> címke tartja azt, amit a látogató lát, az <!-- … --> pedig egy megjegyzés — egy láthatatlan jegyzet, amelyet a böngésző figyelmen kívül hagy. Ez a váz tiszta helyet ad a Copilotnak, hogy kitöltse az űrlapodat, ezért gépeld gondosan és pontosan úgy, ahogy lent látható.
<html>
<head><title>Sign-up</title></head>
<body>
<!-- form goes here -->
</body>
</html>
Akkor csináltad jól, ha a VS Code különböző árnyalatokra színezi a címkéket, és az alsó előnézeti sávon a „Sign-up" felirat olvasható.
Kapcsold be a Copilotot a VS Code-ban
A VS Code-ban keresd meg a bal oldali sávon a Bővítmények ikont (négy kisebb négyzetből álló négyzet, néha Extensions felirattal). Kattints rá, írd be a Copilot szót a keresőmezőbe, és válaszd ki a hivatalos GitHub Copilot bővítményt a találatokból. Kattints a Telepítés gombra, aztán indítsd újra a VS Code-ot, amikor kéri. Az újraindítás után megjelenik egy bejelentkezési ablak — kattints a gombra a fiókod összekapcsolásához; megnyílik egy böngészőfül, és megerősíted a GitHub-fiókkal, amelyhez Copilot-hozzáférés tartozik. Fogadd el a kért engedélyeket. Ha az oldalsáv ikonja másképp néz ki, nyisd meg a Bővítmények panelt a Nézet menüből.
Akkor csináltad jól, ha látsz egy Copilot-ikont valahol a VS Code ablakában (gyakran alul ül), és a Nézet menüből oder egy oldalsáv-gombbal megnyithatsz egy Copilot csevegőpanelt.
Kérd meg a Copilotot az űrlap kitöltésére
Kattints a kurzoroddal a <body> címkék közötti üres sorra — arra, amelyiken a <!-- form goes here --> áll. Ezen a soron írj egy rövid megjegyzést közérthető angolsággal (oder magyarul) az eseményről és a listád minden mezőjéről, plusz egy Küldés gombot. Várj körülbelül két másodpercet gépelés nélk. A Copilotnak egy világosszürke kódblokkot kell javasolnia; nyomd meg a Tab billentyűt az elfogadáshoz, oder kattints egy Elfogadás gombra, ha megjelenik. Ha az első javaslat nem az, amit szerettél volna, töröld ki, fogalmazd át a megjegyzést érthetőbben, és várj újra. A megjegyzés maga láthatatlan marad a böngészőben — csak a javasolt kód válik láthatóvá a látogatók számára.
Akkor csináltad jól, ha a fájl tartalmaz egy <form> blokkot címkézett dobozokkal és egy küldés gombbal, és minden címke illeszkedik a listád egyik mezőjéhez.
Olvasd el, mit írt a Copilot
Olvasd el a kódot soronként, lassan. Nem kell minden szimbólumot értened — csak ellenőrizd, hogy a mezőnevek, a dobozok melletti címkék és a küldés gomb egyeznek-e azzal, amit kértél. Ha hiányzik egy mező, kattints egy új üres sorra az űrlap területén belül, írj egy másik rövid megjegyzést, amelyben kéred, várj, és fogadd el az új javaslatot. Ha egy címke olyasmit mond, amit nem szeretnél, csak szerkeszd át a szavakat az idézőjelek között. Kezeld a mesterséges intelligenciát úgy, mint egy segítőkész asszisztenst: gyors első vázlatot ad, de a szemed a végső ellenőrzés.
Akkor csináltad jól, ha minden címkét hangosan fel tudsz olvasni, és olyasmi, amit egy valódi látogató is megértene.
Mentsd el és nyisd meg az űrlapot a böngésződben
Mentsd el a fájlt Windows Ctrl+S billentyűkombinációval oder Macen Cmd+S billentyűkombinációval (oder használd a Fájl → Mentés opciót). Most menj az EventForm mappádba, és kattints duplán a signup.html fájlra. Megnyílik az alapértelmezett böngésződben, és pontosan úgy látod az űrlapot, ahogy egy látogató. Kattints minden dobozba, írj be valamit, és próbáld ki a Küldés gombot — megnyomásakor még nem küld semmit sehova, és ez így is van rendjén, mert az űrlap nincs összekötve egy szerverrel. Ez a lépés kizárólag arra szolgál, hogy megerősítsd: amit a képernyőn látsz, megfelel annak, amit kértél.
Akkor csináltad jól, ha az űrlap tisztán néz ki a böngészőben, minden doboz elfogadja a gépelést, és a Küldés gombra kattintás nem mutat hibát.
- Elfogadod a Copilot első javaslatát anélkül, hogy elolvasnád. A mesterséges intelligencia néha hangzatos, de nem odaillő mezőneveket talál ki — olvasd fel hangosan a címkéket, és javítsd a szöveget mentés előtt.
- Elmented a fájlt a
.htmlvégződés nélkül. A „signup" nevű fájl a.htmlvégződés nélkül nem nyílik meg weboldalként. Duplán ellenőrizd a fájl nevét a mappában, mielőtt duplán rákattintasz. - Túl sok mezőt kérsz az első próbálkozásra. Kezdd öttel-hatossal — a hosszú űrlapok elveszítik a jelentkezőket. Később adj hozzá többet, ha tényleg szükséges.
Mit jelent ez számodra
- A mindennapokban: Amikor egy kis csoportnak neveket oder preferenciákat kell összegyűjtenie — gyerekzsúr, szomszédi vacsora, könyvklub-találkozó — kevesebb mint fél óra alatt készíthetsz egy letisztult jelentkezési űrlapot, kódolás tanulása nélkül.
- Munkád vagy vállalkozásod számára: Workshopok, képzések, vásárlói előrendelések, belső csapat-események — ugyanaz a sablon skálázható. Te irányítod a szöveget, a mezőket és a megjelenést, és másodpercek alatt magad is módosíthatod.
- Ha most kezded: Tekints erre mint egy homokozóra. Az első űrlapod durva lesz; a második már gyors. A valódi készség az, hogy megtanuld elég világosan leírni, mit szeretnél, hogy a Copilot meg tudja írni helyetted.
Próbáld ki most
Nyisd meg a jegyzettömböd, és írj fel négy mezőt egy eseményhez, amelyet tényleg megrendeznél — ebéd, tanóra, játszóház — aztán készíts egy új mappát az Asztalodon, hozz létre egy signup.html fájlt a vázzal, nyisd meg a VS Code-ban, és kérd a Copilottól pontosan ezt a négy mezőt. Húsz perc múlva lesz egy működő jelentkezési űrlapod az asztalodon, amit megmutathatsz egy barátodnak.
❓ Gyors kérdések
Mennyi időt vesz igénybe?
Kb. 6 perc — az útmutató 7 lépésből áll, és mindegyiket ki tudod pipálni, ahogy haladsz.
Milyen eszköz kell hozzá?
Ez az útmutató a(z) GitHub Copilot eszközt használja — de a módszer nagyon hasonlóan működik más AI-asszisztensekben is.
Milyen hibákat kerüljek el?
- Elfogadod a Copilot első javaslatát anélkül, hogy elolvasnád. A mesterséges intelligencia néha hangzatos, de nem odaillő mezőneveket talál ki — olvasd fel hangosan a címkéket, és javítsd a szöveget mentés előtt.
- Elmented a fájlt a
.htmlvégződés nélkül. A „signup" nevű fájl a.htmlvégződés nélkül nem nyílik meg weboldalként. Duplán ellenőrizd a fájl nevét a mappában, mielőtt duplán rákattintasz. - Túl sok mezőt kérsz az első próbálkozásra. Kezdd öttel-hatossal — a hosszú űrlapok elveszítik a jelentkezőket. Később adj hozzá többet, ha tényleg szükséges.
Olvass tovább
✦ Az AI World HQ AI-szerkesztőségének eredeti, lépésről lépésre útmutatója. Közérthetően írva, pontosságra ellenőrizve.
← Vissza a hírekhez