Így készíts egyszerű jelentkezési űrlapot GitHub Copilottal

Sorold fel, milyen mezőkre van szüksége az űrlapnak

Nyiss meg bármilyen jegyzetelőt — papírt, a telefonod vagy egy sima szövegfájlt — és írd le, milyen kérdéseket akarsz feltenni. A legtöbb esemény-jelentkezéshez négy-hat mező elég: teljes név, e-mail cím, vendégek száma, étkezési vagy akadálymentesítési igények, és egy szabad szöveges megjegyzésmező. Maradj rövid; minden extra mező csökkenti a kitöltők számát. Ha az eseményednek több időpontja vagy jegytípusa van, inkább egyetlen „időpont" mezőt tegyél be egy kisebb választékkal, ne pedig több külön dobozt.

Következő lépés ↓

Hozd létre a mappát és a HTML fájlt

Készíts egy új mappát a projekthez — nevezd el EventForm-nak, és tedd az Asztalra vagy a Dokumentumok közé. A mappában hozz létre egy új üres szövegfájlt, és nevezd át signup.html-re. A .html végződés jelenti a gépednek, hogy „ez egy weboldal". Az, hogyan készítesz üres fájlt, rendszerenként más: Windowson keresd valami ilyesmit, hogy jobb klikk → Új → Szöveges dokumentum, aztán nevezd át; Macen nyisd meg a TextEditet, válassz valami olyasmit, hogy File → New, aztán File → Save As, és a formátumot állítsd sima szövegre. A pontos menüpontok verziónként eltérhetnek — keresd azt, amivel üres szövegfájlt tudsz csinálni.

Nyisd meg a signup.html-t a VS Code-ban úgy, hogy ráhúzod az ablakra, vagy használd a File → Open Folder menüt, és válaszd az EventForm mappát.

Következő lépés ↓

Adj hozzá egy alap HTML-vázat

A megnyitott üres fájlba írj egy kis vázat. Minden sor egy címke — egy olyan jelölő, ami megmondja a böngészőnek, mi van a nyitó és a záró változata között. A <title> címke a böngészőfül nevét adja, a <body> címke tartja azt, amit a látogató lát, az pedig, hogy <!-- … -->, egy megjegyzés — egy láthatatlan jegyzet, amit a böngésző figyelmen kívül hagy. Ez a váz tiszta helyet ad a Copilotnak, ahová beírhatja az űrlapot, úgyhogy gépeld be gondosan és pontosan úgy, ahogy itt látod.

<!DOCTYPE html>
<html>
<head><title>Sign-up</title></head>
<body>
<!-- form goes here -->
</body>
</html>

Következő lépés ↓

Kapcsold be a Copilotot a VS Code-ban

A VS Code-ban keresd meg a Copilot ikont a bal oldali sávban (úgy néz ki, mint két egymást fedő zárójel, vagy a Copilot felirat áll rajta). Kattints rá, és nyílik a Copilot panel. Ha még nem vagy bejelentkezve, megjelenik egy ablak, ami a GitHub-fiókoddal való bejelentkezést kéri — kattints a gombra a csatlakozáshoz; megnyílik egy böngészőfül, és ott erősítsd meg a GitHub-fiókkal, amelyiknek van Copilot-hozzáférése. Fogadd el azokat az engedélyeket, amiket a felugró ablak kér.

Következő lépés ↓

Kérd meg a Copilotot, hogy töltse ki az űrlapot

Kattints a kurzorral a <body> címkék közötti üres sorra — arra, amelyiken a <!-- form goes here --> áll. Ebbe a sorba írj egy rövid megjegyzést sima magyarul, amiben leírod az eseményt és a listádon szereplő összes mezőt, plusz egy Submit gombot. Várj nagyjából két másodpercet anélkül, hogy gépelnél. A Copilotnak ilyenkor egy világosszürke kódblokkot kellene javasolnia; nyomd meg a Tab billentyűt az elfogadáshoz, vagy kattints az Accept gombra, ha megjelenik. Ha az első javaslat nem olyan, amilyet szeretnél, töröld ki, fogalmazd át a megjegyzést érthetőbbre, és várj újra. Maga a megjegyzés 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.

Következő lépés ↓

Olvasd át, mit írt a Copilot

Olvasd végig a kódot sorrol sorra, lassan. Nem kell minden jelet megértened — csak azt ellenőrizd, hogy a mezőnevek, a dobozok melletti címkék és a submit gomb mind megfelelnek-e annak, amit kértél. Ha egy mező hiányzik, kattints egy új üres sorra a formon belül, írj egy újabb rövid megjegyzést, amiben kéred, várj, és fogadd el az új javaslatot. Ha egy címke olyasmit mond, amit nem szeretnél, csak szerkeszd át a szöveget az idézőjelek között. Gondolj az AI-ra úgy, mint egy segítőkész asszisztensre: gyors első vázlatot ad, de a te szemed az utolsó ellenőrzés.

Következő lépés ↓

Mentsd el és nyisd meg az űrlapot a böngésződben

Mentsd el a fájlt a Windowsos Ctrl+S vagy a Mac-es Cmd+S billentyűkombinációval (vagy a File → Save menüponttal). Most menj az EventForm mappádba, és dupla kattintással nyisd meg a signup.html-t. Az alapértelmezett böngésződ megnyitja, és pontosan úgy látod az űrlapot, ahogy egy látogató is. Kattints bele minden dobozba, írj valamit, és próbáld ki a Submit gombot — ha megnyomod, egyelőre nem küldi el sehova az adatokat, és ez teljesen normális, mert az űrlap még nincs összekötve egy szerverrel. Ez a lépés csak arra szolgál, hogy meggyőződj róla: amit a képernyőn látsz, az megfelel annak, amit kértél.