AI WORLD HQÍgy készíts egyszerű véleményező űrlapot a vállalkozásodhoz a GitHub Copilottal
Bírd meg az AI-t, hogy megírja helyetted a HTML-t, a CSS-t és a JavaScriptet – nem kell hozzá programozói tudás, nagyjából 20 perc alatt kész is leszel
Röviden: A GitHub Copilot körülbelül 15 perc alatt megírja neked a „Hagyj véleményt” űrlapot (HTML, CSS és JavaScript) egy ingyenes böngészős szerkesztőben. Azonban egy ingyenes szolgáltatásra (például Formspree) is szükséged lesz, hogy a vélemények ténylegesen eljussanak a postaládádba – a sima HTML önmagában nem tud adatokat elmenteni.
Ha kis boltot, kávézót vagy helyi szolgáltatást üzemeltetsz, már pontosan tudod, mennyit ér néhány őszinte vélemény. Valószínűleg azt is tudod, hogy egy fejlesztő felbérelése egy „Hagyj véleményt” űrlap megépítésére többe kerülhet, mint amennyit szívesen költenél rá. Ez az útmutató lépésről lépésre végigvezet rajta, hogyan íratod meg ezt az űrlapot a GitHub Copilottal – és közben érthetően elmagyarázza, hogy mit tud és mit nem.
💡 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ágnál
- Egy ingyenes GitHub-fiók (regisztrálj a github.com oldalon – csak egy e-mail cím kell hozzá).
- Egy modern böngésző, például Chrome, Edge vagy Firefox.
- Körülbelül 15–20 perc nyugalom.
- Egy rövid lista arról a 3 mezőről, amit szeretnél látni az űrlapon (a legtöbb véleményező űrlapnak ennyi is elég: vásárló neve, csillagos értékelés, megjegyzés mező).
- Fontos tudni: a GitHub Copilotnak van ingyenes csomagja, de a csevegés funkcióra havi üzenetlimit vonatkozik. Ha sokat használod, előfordulhat, hogy át kell térned a fizetős csomagra – a pontos díjakról indulás előtt nézd meg a GitHub árképzési oldalát.
Nyiss egy ingyen Codespace-t (a felhőben futó kódszerkesztőd)
Jelentkezz be a github.com oldalon, majd menj a github.com/codespaces címre, és kattints a zöld „New codespace” gombra. Válaszd a „Blank” sablont, és válassz egy kisebb gépet (2 mag bőven elég egy apró űrlaphoz). Egy új lapon megnyílik egy teljes kódszerkesztő – nagyon hasonlít a VS Code-ra, de a böngésződben fut. Körülbelül 30 másodpercet adj neki, amíg betölt. Ha nehezen találod a Codespaces gombot, előbb hozz létre egy új üres tárolót (kattints a jobb felső sarokban lévő „+” ikonra, majd az „New repository” opcióra), aztán kattints a zöld „Code” gombra, és válaszd a „Codespaces” fület. Akkor tudod, hogy sikerült, ha megjelenik egy sötét szerkesztőfelület, bal oldalon egy fájllistával, alul pedig egy kis terminálablakkal.
Hozz létre egy új fájlt az űrlaphoz
A bal oldali fájllistában keresd meg azt az ikont, ami úgy néz ki, mint egy papírlap behajtott sarkokkal – ez a „New File” gomb. Kattints rá, írd be a fájlnévnek az index.html-t, majd nyomd meg az Entert. A képernyő közepén megnyílik egy üres fehér szerkesztő – itt fog lakozni az űrlapod.
Ha nem ott találod a gombot, ahol számítasz rá, kattints jobb gombbal a fájllista üres részére, és a felugró menüből válaszd a „New File” opciót.
Akkor tudod, hogy sikerült, ha az index.html megjelenik a bal oldali panelen, és a középső szerkesztő üres, a bal szélén pedig az 1-es sorszám látszik.
Kérd meg a Copilotot, hogy építse meg az űrlapot
Keress rá a Copilot Chat ikonra a bal oldali sávban – általában úgy néz ki, mint egy kis beszélgetőbuborék vagy egy csillag ✨. Kattints rá. A jobb oldalon előcsúszik egy csevegőpanel. Az alsó szövegdobozba írd be a kérésedet hétköznapi angolul. Légy konkrét a három kívánt mezőt illetően. Ha nem látsz csevegőikont, próbáld ki a billentyűkombinációt: Ctrl + Shift + I Windowson/Linuxon, vagy Cmd + Shift + I Macen – ez ugyanazt a panelt nyitja meg.
Akkor tudod, hogy sikerült, ha a Copilot egy blokk HTML kóddal válaszol a csevegésben, és mellette megjelenik egy kis „Apply” vagy „Copy” gomb.
Illeszd be a kódot a fájlodba, és mentsd el
Kattints az üres index.html fájlodba, hogy a kurzor oda kerüljön. Ezután nyomd meg a Ctrl + V billentyűkombinációt (vagy Cmd + V-t Macen), hogy beillessd a kódot a csevegésből. Ha megjelenik egy kis felugró ablak, ahol jóvá kell hagynod valamit, kattints az „Accept” gombra. Mentsd el a fájlt a Ctrl + S (vagy Cmd + S) billentyűkombinációval.
Ha a billentyűparancsok nem működnek nálad, a felső menüsorban keresd a File → Save opciót – minden kódszerkesztőben megtalálható.
Akkor tudod, hogy sikerült, ha a fájlnév mellett már nem látsz pöttyöt a bal oldali panelen (a pöttyök a mentetlen módosításokat jelzik). A fülön felül az index.html felirat mellett nem szabad csillagnak lennie.
Kérd meg a Copilotot, hogy stílusozza is meg
Most tedd széppé. Menj vissza a Copilot Chat panelbe, és írj egy ehhez hasonló folytatást. A Copilot CSS-sel válaszol – ez felel a színekért, a távolságokért és a betűtípusokért. Kattints az „Apply” gombra, ha megjelenik; ha nincs, kattints a „Copy” gombra, és illeszd be a CSS-t a fájlod legelejére, közvetlenül a nyitó <head> címke után.
Ha az „Apply” nem látszik, keresd a „Insert at cursor” feliratú kis linket a kódblokk közelében – a legtöbb szerkesztő kínál ilyet.
Akkor tudod, hogy sikerült, ha a fájlodban új sorok jelennek meg, amelyek <style> kezdettel és </style> zárással végződnek, és a kódon belül olyan szavak szerepelnek, mint a color, a padding vagy a border-radius.
Gondoskodj róla, hogy a vélemény ténylegesen eljusson hozzád
Egy űrlap, ami csak úgy magában áll egy oldalon, a böngészőben össze tudja gyűjteni az adatokat, de egy kis plusz lépés kell ahhoz, hogy e-mailben is megkapd az eredményt. Az őszinte megoldás: a Copilot meg tudja írni az előteret (amit a látogatók látnak), de ahhoz, hogy a vélemények a postaládádba érkezzenek, szükséged lesz egy ingyenes űrlapkezelő szolgáltatásra. A Formspree ingyenes csomagja jól működik erre – regisztrálj, szerezz egy űrlapvégpontot (egy hosszú webcímet), aztán kérd meg a Copilotot, hogy irányítsa át oda az űrlapodat.
A csevegésben írj valami ilyesmit. A Copilot átírja a <form> címkét úgy, hogy az adatok a Formspree-hez menjenek, amely aztán továbbítja őket az e-mailedbe.
Ha a Formspree beállítása zavarosnak tűnik, kérdezd inkább a Copilotot: „Change the submit button so it opens the user's email app with the review already filled in.” Ez a gyors megoldás egy mailto: linket használ, és harmadik féltől származó szolgáltatás nélkül működik.
Akkor tudod, hogy sikerült, ha az előnézetben a Submit gombra kattintva vagy (a) a Formspree köszönőoldala jelenik meg, vagy (b) megnyílik az e-mail alkalmazásod a vélemény szövegével készen a küldésre.
Nézd meg előnézetben, és finomhangolj, ami nem tetszik
Kattints jobb gombbal az index.html fájlodra a bal oldali panelen, és válaszd az „Open in browser” opciót (vagy keresd a fájl füle mellett fent egy kis böngészőikont). Egy új lapon megnyílik az űrlapod. Próbáld ki, töltsd ki és küldd el, hogy lásd, hogyan viselkedik.
Ha az „Open in browser” nem jelenik meg, nézd meg a szerkesztő jobb alsó sarkát, hátha ott van egy kis „Go Live” vagy „Live Preview” ikon – a Codespaces oda néha elrejti.
Akkor tudod, hogy sikerült, ha az űrlapod elfogadhatóan néz ki a képernyőn, a mezők könnyen kattinthatók, és a küldéskor nem jelenik meg hibaüzenet. Ha valami nem stimmel, menj vissza a Copilot Chatbe, és egyszerű szavakkal írd le a problémát – például: „The submit button is too small on phones — make it bigger.”
- Visszamásolod a kódot a csevegésbe a fájl helyett. Sok kezdő a Copilot válaszát a csevegésbe illeszti vissza, és ezzel végtelen hurkot hoz létre. A megoldás: kattints az üres szerkesztőfelületre, mielőtt beillesztenél, majd mentsd el a Ctrl+S billentyűkombinációval.
- Elfelejted elmenteni. A Codespaces gyakran automatikusan ment, de nem mindig. A megoldás: pillants a fájl fülére – ha pötty vagy csillag van a fájlnév mellett, még nincs elmentve. A biztonság kedvéért nyomd meg a Ctrl+S-t.
- Minden sort vakon elfogadsz, amit a Copilot ír. A Copilot hasznos, de hibázik – kitalálhat mezőneveket, kihagyhat záró tageket, vagy elavult HTML-t használhat. A megoldás: olvasd el a javasolt kódot, futtasd le az előnézetet, és kérd meg a Copilotot, hogy javítson ki bármi furcsát ahelyett, hogy csak bemásolnád és közzétennéd.
Mit jelent ez számodra?
- A mindennapokban: a példaként használt utasítást az oldaladon lévő bármilyen apróságra lecserélheted – kapcsolatfelvételi űrlap, „Asztalfoglalás” gomb, GYIK szekció –, és a Copilot ugyanazt a feladatot elvégzi. Ha egyszer már megcsináltad, a második űrlap feleennyi idő alatt kész lesz.
- A vállalkozásod vagy munkád szempontjából: egy egyszerű, általad felügyelt véleményező űrlap (harmadik féltől származó eszköz havidíja nélkül) kis, de valódi előrelépés. A kód a tiéd, bármikor módosíthatod, és ha kinövöd, később átadhatod egy fejlesztőnek.
- Ha most kezdesz hozzá: a legegyszerűbb első lépés pontosan az, amit az 1. lépés mond – nyiss egy Codespace-t, nevezd el
review-form-nak, és írd be a promptodat a csevegésbe. Húsz perc múlva már egy működő oldalad lesz.
Próbáld ki most
Nyisd meg a github.com/codespaces oldalt, indíts egy üres Codespace-t, és másold be pontosan ezt a promptot a Copilot Chatbe: „Make me a clean, friendly HTML page with a 'Leave a review' form. Fields: name, star rating 1–5, and a comment box. Add a 'Submit review' button and simple warm styling.” Mentsd el a fájlt, nyomd meg az előnézetet, és nézd meg, mit ad neked a Copilot kevesebb mint egy perc alatt.
❓ Gyors kérdések
Mennyi időt vesz igénybe?
Kb. 7 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 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?
- Visszamásolod a kódot a csevegésbe a fájl helyett. Sok kezdő a Copilot válaszát a csevegésbe illeszti vissza, és ezzel végtelen hurkot hoz létre. A megoldás: kattints az üres szerkesztőfelületre, mielőtt beillesztenél, majd mentsd el a Ctrl+S billentyűkombinációval.
- Elfelejted elmenteni. A Codespaces gyakran automatikusan ment, de nem mindig. A megoldás: pillants a fájl fülére – ha pötty vagy csillag van a fájlnév mellett, még nincs elmentve. A biztonság kedvéért nyomd meg a Ctrl+S-t.
- Minden sort vakon elfogadsz, amit a Copilot ír. A Copilot hasznos, de hibázik – kitalálhat mezőneveket, kihagyhat záró tageket, vagy elavult HTML-t használhat. A megoldás: olvasd el a javasolt kódot, futtasd le az előnézetet, és kérd meg a Copilotot, hogy javítson ki bármi furcsát ahelyett, hogy csak bemásolnád és közzétennéd.
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