Lekce 4 - Využití umělé inteligence při studiu programování Nové

V předchozím kvízu, Kvíz - Úvod, konzole a proměnné v JavaScriptu, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V tomto tutoriálu se naučíme využívat AI při studiu programování. Ukážeme si, jak pomocí umělé inteligence lépe pochopit složité koncepty a zrychlit řešení úkolů, na kterých běžně trávíme spoustu času.

Využití AI při studiu programování

Učení se programování může být občas náročné. Budeme se setkávat se spoustou nových konceptů a nezvyklých problémů. Dnešní doba nám však poskytuje AI nástroje, které nám práci i studium velmi ulehčí. Stačí se je naučit správně používat. Nerozumíme nějakému tématu? ChatGPT nám danou problematiku na základě našich otázek znovu vysvětlí a pomůže nám si dané téma osvojit. Narazili jsme na problém v nějaké úloze? Nástroj Canvas ji s námi rozebere a v případě potřeby doporučí další postup, opraví chyby a podobně. Strávili jsme hodinu luštěním našeho kódu a nakonec jsme zjistili, že celý problém zapříčinila chybějící závorka? Nejsme první ani poslední – toto je skutečně více než běžné. Když si osvojíme používání AI nástrojů, bude řešení podobných problémů otázkou několika sekund.

AI je nápomocná v mnoha dalších oblastech. Jak ji správně využívat, se učíme v kurzech Umělá inteligence.

Potřebuješ poradit? ChatGPT ti pomůže rychleji než lektor

Skvělým parťákem, a to nejen při studiu, pro nás bude zejména ChatGPT. Srozumitelně nám vysvětlí složitější látku, prodiskutuje s námi náročnější koncepty a dokáže navrhnout i řešení technických problémů v našem počítači. Pro studenty našich rekvalifikačních kurzů jsou samozřejmě k dispozici konzultace s lektory.

Ve většině případů však můžeme náš problém či dotaz vyřešit pomocí ChatGPT mnohem rychleji a stejně efektivně jako s lektorem.

ChatGPT je k dispozici prostřednictvím mobilní aplikace nebo online na adrese chatgpt.com. V řešení problémů umí být opravdu vynalézavý a zeptat se ho můžeme prakticky na cokoli:

Při komunikaci s chatbotem se dozvíme spoustu zajímavých informací a pochopíme i složité koncepty, kterých je v programování mnoho:

Můžeme se například zeptat na látku, která nám není jasná a kterou bychom potřebovali dovysvětlit:

Vysvětli, k čemu slouží v JavaScriptu metoda constructor().

class Osoba {
  constructor(jmeno, vek) {
    this.jmeno = jmeno;
    this.vek = vek;
  }

  pozdrav() {
    console.log(`Ahoj, jmenuji se ${this.jmeno} a je mi ${this.vek} let.`);
  }
}

const clovek = new Osoba('Karel', 30);
clovek.pozdrav(); // Ahoj, jmenuji se Karel a je mi 30 let.

Dále se můžeme také zeptat na praktické využití určitého konceptu, například dědičnosti:

Vysvětli, co je dědičnost v JavaScriptu, k čemu se používá v praxi, a uveď jednoduchý příklad s kódem.

// Nadřazená třída
class Osoba {
  constructor(jmeno) {
    this.jmeno = jmeno;
  }

  pozdrav() {
    console.log(`Ahoj, jmenuji se ${this.jmeno}.`);
  }
}

// Podtřída, která dědí z Osoba
class Student extends Osoba {
  constructor(jmeno, obor) {
    super(jmeno); // Volá konstruktor nadřazené třídy
    this.obor = obor;
  }

  studuj() {
    console.log(`${this.jmeno} studuje obor ${this.obor}.`);
  }
}

// Použití
const student1 = new Student("Anna", "Informatika");

student1.pozdrav();  // Ahoj, jmenuji se Anna.
student1.studuj();   // Anna studuje obor Informatika.

Kvalita odpovědi závisí především na našem dotazu, tzv. promptu. Jak správně strukturovat prompt, se učíme v lekci Vytváříme efektivní prompty pro excelentní výstupy.

Nefunguje ti kód? Vyzkoušej nástroj ChatGPT Canvas

Při práci s ChatGPT lze využít rozšíření Canvas, které nabízí mimo jiné i rozhraní pro interaktivní práci s kódem. Na rozdíl od běžného chatovacího okna umožňuje organizovat odpovědi a návrhy kódu do bloků, což je ideální pro složitější úlohy, jako je návrh architektury aplikace nebo ladění rozsáhlejších projektů. Díky vizuálnímu uspořádání je možné lépe sledovat jednotlivé kroky návrhu, experimentovat s různými přístupy a snadno se vracet k předchozím verzím řešení. Nástroj spustíme tlačítkem Canvas v menu ChatGPT, které se nám otevře po kliknutí na tři tečky v chatovacím okně:

Nyní chatbotu předáme náš kód a začneme na něm pracovat:

let jmeno = prompt("Zadej své jméno:");

if (jmeno.length <= 3 && jmeno.length >= 10) {
    document.write("Normální jméno");
} else {
    document.write("Máš moc krátké nebo moc dlouhé jméno!");
}

Nástroj nám v kódu vyhledá a opraví chyby:

Při správně zadaném promptu můžeme v našem kódu jednoduše doplnit chybějící funkcionalitu:

Přidej do kódu validaci vstupu. Chci, aby nešlo zadat prázdné jméno.

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

GitHub Copilot je AI asistent vyvinutý společnostmi GitHub a OpenAI. V aktuální verzi Visual Studio Code je již součástí integrovaného vývojového prostředí. Pokud používáte starší verzi, je nutné buď aktualizovat Visual Studio Code, nebo Copilota nainstalovat ručně prostřednictvím nabídky Extensions na postranním panelu. Zde stačí vyhledat doplněk GitHub Copilot a spustit jeho instalaci. Pro používání Copilota je nezbytné přihlásit se ke svému GitHub účtu.

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.

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. Navrhovaný kód potvrdíme zmáčknutím klávesy Tab:

Kromě automatického doplňování kódu nabízí GitHub Copilot také chatovací rozhraní, které umožňuje pokládat dotazy, získávat vysvětlení ke kódu nebo generovat celé bloky kódu na základě zadání. Malé chatovací okno se nám otevře přímo v kódu po zmáčknutí klávesové zkratky Ctrl + i:

Případně je chat dostupný po kliknutí na ikonu Toggle Chat v horním panelu. Do otevřeného okna 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:

Claude Artifacts

Chatbotů, jako je ChatGPT, je k dispozici více. Mezi další oblíbené patří Claude. Podobně jako ChatGPT ho můžeme využít jako pomocníka při následujících úkonech:

• programování – generování a oprava kódu, návrhy algoritmů, vysvětlení složitých konceptů,
• psaní a editace textu – pomoc s tvorbou dokumentů, článků nebo e-mailů,
• analýza a shrnutí informací – rychlé zpracování velkého množství textu a jeho převedení do stručné a srozumitelné podoby,
• asistence při rozhodování – pomoc s logickým myšlením, plánováním projektů a brainstormingem.

Princip používání je podobný jako u ChatGPT:

Artifacts jsou potom speciální výstupy, které Claude generuje odděleně od hlavního chatu, aby byly přehledné a snadno dostupné. Nejedná se o plnohodnotný editor, ale spíše o způsob, jak strukturovaně uchovat kód, dokumenty nebo vizualizace bez ztráty v dlouhém průběhu konverzace. Když si například necháme vygenerovat kód, Claude ho automaticky uloží jako Artifact. Můžeme ho pak kdykoli otevřít, sdílet nebo dále rozšířit. Tímto způsobem máme důležité informace vždy na dosah, bez nutnosti se k nim složitě vracet.

AI nástroje dokážou výrazně pomoci při studiu programování – usnadňují pochopení obtížné látky a řešení náročných úloh. Po dohodě se zaměstnavatelem je lze uplatnit i v praxi, kde mohou šetřit čas a zvyšovat produktivitu. Proto je důležité se s nimi naučit efektivně pracovat a využívat jejich potenciál naplno.

V příští lekci, Textové řetězce v JavaScriptu, si popíšeme metody pro práci s textovými řetězci, probereme také používání různých uvozovek a speciální znaky.