Lekce 3 - VS Code a Copilot

V minulé lekci, Využití umělé inteligence při studiu programování, jsme si ukázali, jak využívat umělou inteligenci při studiu programování.

V dnešním JavaScript tutoriálu si nainstalujeme Visual Studio Code, vytvoříme základní projekt se soubory index.html a script.js, ukážeme si zálohování pomocí Dropboxu a zprovozníme GitHub Copilot jako AI pomocníka při psaní a kontrole kódu.

Co dělat, když se zasekneš

Naše kurzy pravidelně aktualizujeme, technologie se ale rychle mění a s ní i použité nástroje a příkazy v lekcích. Někdy ti něco nemusí fungovat i proto, že máš třeba jinou verzi nástroje nebo operačního systému. Pokud narazíš v jakékoli lekci na problém a studuješ u nás rekvalifikační kurz, můžeš využít široké možnosti podpory:

• často je řešení problému zmíněno v diskuzi pod lekcí, zejména, pokud se problém projeví více lidem
• v lekci o AI si ukážeme, že v případě problémů často stačí problém napsat ChatGPT a on ti poradí, stejně nám prosím ale o problému řekni
• pokud ani jedno z toho nepomohlo, jde o něco vážnějšího, zavolej svému studijnímu referentovi a domluv si konzultaci s lektorem, který ti pomůže
• nic si nedělej z toho, že ti úplně všechno nefunguje nebo úplně všemu nerozumíš, běž vždy dál a nenech se odradit, máš na to!

Příprava pro práci s JavaScriptem

Než začneme vytvářet javascriptové skripty, připravíme si editor, projektovou složku a zálohování práce. Budeme tak mít prostředí, ve kterém můžeme přehledně vytvářet a upravovat soubory projektu.

Instalace Visual Studio Code

Pro psaní javascriptového kódu použijeme Visual Studio Code. Jde o editor kódu, který nabízí například zvýraznění syntaxe, doplňování kódu, ladicí nástroje a práci s celou projektovou složkou.

Visual Studio Code je zdarma a podporuje Windows, macOS a Linux. Stáhneme si verzi určenou pro svůj operační systém a nainstalujeme ji.

Název Visual Studio Code se často zkracuje jako VS Code.

Pokročilejší uživatelé mohou použít placený profesionální editor, jako například Web­Storm.

Zálohování projektu pomocí Dropboxu

Kromě editoru potřebujeme nástroj, který bude zálohovat a verzovat naši práci. Nemůžeme se spolehnout na to, že stránku prostě budeme ukládat, protože jsme lidé, a ne stroje. Lidé dělají chyby, a když přijdeme o několikadenní, nebo dokonce několikatýdenní práci, může to zabolet. Je dobré naučit se na toto myslet hned od začátku. Velmi doporučujeme program Dropbox, který je extrémně jednoduchý a sám soubory verzuje (tedy zachovává změny v čase a je možné se vrátit ke starším verzím projektu) a zároveň synchronizuje s webovým úložištěm. I kdybychom si projekt omylem smazali, přepsali, zkolaboval nám pevný disk či nám ukradli notebook, data zůstanou v bezpečí. Dropbox také umožňuje sdílet jeden projekt mezi více vývojáři. Více o Dropboxu si můžeme přečíst v článku Dropbox - Sen všech ajťáků. Článek obsahuje zároveň pozvánku do Dropboxu s 0,5 GB prostoru navíc.

Jako další verzovací nástroj se hojně používá Git, jeho nastavení ale vydá na samostatný kurz a Dropbox zatím pro naše účely bohatě postačuje.

Vytvoření JavaScript projektu

Nyní si vytvoříme jednoduchý projekt. Založíme pracovní složku, například ITnetwork/, a otevřeme ji ve Visual Studio Code pomocí File -> Open Folder..., a potvrdíme tlačítkem Select folder:

Následně vytvoříme nový soubor do kterého budeme psát náš kód. Volbou v menu File -> New File... vyvoláme okno, kde zadáme jméno nového souboru script.js.

Stejným způsobem vytvoříme soubor index.html. Otevřeme ho a na první řádek napíšeme znak !. Visual Studio Code nám nabídne zkratku Emmet pro vytvoření základní HTML struktury. Nabídnutou zkratku potvrdíme klávesou Enter:

Emmet je ve Visual Studio Code vestavěný, takže kvůli této funkci nemusíme instalovat žádné další rozšíření.

Před ukončovací značku </body> vložíme element <script>, který připojí soubor script.js:

<script src="script.js"></script>

Atribut src obsahuje cestu k souboru s JavaScriptem. Protože se oba naše soubory nacházejí ve stejné složce, stačí uvést pouze název script.js.

Výsledný soubor index.html bude obsahovat základní strukturu HTML stránky a připojení našeho javascriptového souboru:

GitHub Copilot – Pomocník přímo ve tvém IDE

GitHub Copilot je AI asistent vyvinutý společnostmi GitHub a OpenAI určený pro práci se zdrojovým kódem. Je součástí standardní instalace Visual Studia Code, a to konkrétně v podobě vestavěného rozšíření GitHub Copilot Chat. Dokáže například navrhovat doplnění rozepsaného kódu, vysvětlovat existující kód, generovat nové části programu nebo pomáhat při hledání chyb.

Copilot využívá různé AI modely. Konkrétní dostupné modely se mohou měnit podle tarifu a nastavení služby, proto se nebudeme vázat na jeden konkrétní model nebo jeho poskytovatele.

Je ale důležité počítat s tím, že Copilot není neomylný. Navržený kód může obsahovat chyby, nemusí vždy odpovídat zadání a někdy doporučí i nevhodné řešení. Proto je potřeba jeho návrhy průběžně kontrolovat a přemýšlet nad nimi.

Vytvoření účtu na GitHubu

Pro použití GitHub Copilotu potřebujeme účet na GitHubu. V případě, že účet na GitHubu ještě nemáme, založíme si ho dle postupu v lekci Lekce 31 - Verzovací nástroj Git a Visual Studio Code.

Přihlášení do GitHub Copilot

Do GitHub Copilota se přihlásíme kliknutím na modré tlačítko Sign In:

Dále zvolíme způsob přihlášení pomocí GitHub kliknutím na Continue with GitHub:

Otevře se stránka GitHubu v prohlížeči, kde se přihlásíme k našemu GitHub účtu:

Na následující stránce potvrdíme autorizaci kliknutím na tlačítko Continue:

Pokud se objeví v prohlížeči vyskakovací okno, potvrdíme akci kliknutím na tlačítko Open Visual Studio Code:

Práce s GitHub Copilotem

Jakmile je Copilot aktivní, začne v reálném čase generovat návrhy k doplnění kódu. Pokud začneme psát metodu, Copilot se pokusí navrhnout její logiku. Při práci s třídami nebo cykly dokáže generovat celé bloky kódu. Umí se dokonce učit z našeho stylu kódování a přizpůsobit mu své návrhy.

Otevřeme soubor script.js a začneme psát jednoduchý kód. Pokud se zobrazí vhodný návrh, přijmeme ho klávesou Tab:

Inline Chat

Pro rychlou úpravu nebo vysvětlení kódu můžeme použít Inline Chat. Umožňuje pokládat dotazy, získávat vysvětlení ke kódu nebo generovat celé bloky kódu na základě zadání. Toto malé chatovací okno se nám otevře přímo v kódu po zmáčknutí klávesové zkratky Ctrl + i:

Chat view

Pro delší konverzaci použijeme Chat view. Je umítněn v pravé části obrazovky, případně je chat dostupný po kliknutí na ikonu Toggle Chat v horním panelu nebo přes klávesovou zkratku Ctrl + Alt + i.

Do chatu můžeme zadat prompt, například pro vygenerování třídy s funkcí pro výpočet kvadratické rovnice:

Po odeslání promptu nám GitHub Copilot poskytne hotový kód, který lze pomocí tlačítek nad výstupem buď zkopírovat, nebo rovnou vložit do otevřeného souboru:

Pomocí asistenta můžeme rovněž pracovat s aktuálně otevřeným souborem, například můžeme zadat prompt pro nalezení chyb v našem kódu:

Shrnutí lekce

Visual Studio Code je integrované vývojářské prostředí, které budeme používat pro psaní našich JavaScriptových kódů. Ukázali jsme si, jak svou práci zálohovat, například pomocí Dropboxu, abychom o ni při chybě nebo poruše nepřišli. Nakonec jsme zprovoznili GitHub Copilot a vyzkoušeli jeho doplňování, generování i kontrolu kódu. Návrhy AI vždy průběžně ověřujeme, protože mohou obsahovat chyby nebo nemusí přesně odpovídat našemu zadání.

V příští lekci, Proměnné v JavaScriptu, se naučíme deklarovat proměnné a provádět s nimi základní operace.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.