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.

Pozor: AI je dobrý pomocník, ale zlý pán! Tato lekce ti ukáže, jak ti AI najde chybu ve tvém kódu nebo jednoduché úlohy vyřeší zcela za tebe. Prvně ale musíš nad úlohou přemýšlet a zkoušet ji sám, než požádáš o pomoc AI. Nebudeš jinak schopný v zaměstnání řešit komplexnější úlohy, se kterými ti AI nepomůže, protože ji nemůžeš poslat celý firemní projekt. Ve svém vlastním zájmu používej AI jen jako pomocníka, když nevíš, jak dál, a již jsi vyplýtval všechny možnosti.

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 Visual Studio Code je k dispozici jako rozšíření, které je schopné navrhovat doplnění v našem kódu, generovat kód dle zadání či hledat a opravovat chyby.

Pozor: Nepoužívej nástroj Copilot ve svém IDE, protože bez důkladného zvládnutí základů programování se nenaučíš samostatně vytvářet funkční kód a v zaměstnání budeš snadno nahraditelný.

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.