Uwaga! Trwają prace nad nową wersją serwisu. Mogą występować przejściowe problemy z jego funkcjonowaniem. Przepraszam za niedogodności!

🔥 Zgarnij PŁATNY STAŻ w 3 edycji kursu programowania front end (zapisy do 22.01) 🔥

ChatGPT w nauce programowania

Sztuczna inteligencja pomaga zdobywać wiedzę

Sztuczna inteligencja nie zastąpi człowieka, ale może pomóc Ci szybciej uzyskać odpowiedź na nurtujące Cię pytania, wyjaśnić trudne do zrozumienia programistyczne pojęcia, wytłumaczyć kod, a nawet znaleźć błędy czy wykonać prosty code review (przegląd kodu).

Spis treści

 Jak zrozumieć zagadnienia z programowania z pomocą AI

Załóżmy, że dopiero zaczynasz naukę front endu. Stykasz się z wieloma pojęciami, których nie znasz. Możesz więc rozpocząć rozmowę z ChatGPT. Jeżeli będziesz kontynuować ją w jednym wątku, sztuczna inteligencja zacznie korzystać z kontekstu konwersacji, dzięki czemu otrzymasz lepsze, bardziej adekwatne odpowiedzi.

Przykładowa rozmowa mogłaby wyglądać tak:

Uczę się front endu. Jestem początkujący. Dlaczego HTML nie jest uznawany za język programowania?

HTML, czyli HyperText Markup Language, nie jest uznawany za język programowania, ponieważ jego głównym celem jest strukturalne oznaczanie treści na stronach internetowych, a nie programowanie dynamicznych funkcji. HTML jest językiem znaczników, który opisuje strukturę i semantykę dokumentu, definiuje elementy i ich relacje. Natomiast języki programowania, takie jak JavaScript, służą do tworzenia interaktywnych i dynamicznych aplikacji, manipulowania danymi, logiki i sterowania przebiegiem programu. HTML jest kluczowym elementem w budowie stron internetowych, ale nie spełnia wszystkich kryteriów, aby zostać uznany za pełnoprawny język programowania.

Jak mam rozumieć "strukturalne oznaczanie treści"? Czy możesz wyjaśnić to krótko na jakimś przykładzie?

Oczywiście! "Strukturalne oznaczanie treści" w przypadku HTML oznacza nadawanie znaczenia i struktury różnym elementom na stronie internetowej. HTML używa specjalnych znaczników, które określają rodzaj zawartości, na przykład czy jest to nagłówek, paragraf, lista, obraz itp.

Na przykład, jeśli chciałbyś utworzyć nagłówek pierwszego poziomu na stronie, użyłbyś znacznika <h1>:

<h1>To jest nagłówek pierwszego poziomu</h1>

Jeśli chciałbyś utworzyć paragraf, użyłbyś znacznika <p>:

<p>To jest paragraf z pewnym tekstem.</p>

W ten sposób HTML pozwala na ustalenie struktury i znaczenia poszczególnych elementów na stronie, co jest przydatne dla przeglądarek internetowych i innych narzędzi, aby właściwie interpretować i wyświetlać te elementy.

 ChatGPT wyjaśnia kod i podpowiada dobre praktyki

Podczas programowania często szukamy rozwiązań w sieci i natykamy się na kod, którego nie rozumiemy. Załóżmy, że trafiliśmy na jakiś dziwnie wyglądający selektor w CSS. Zapytajmy:

Co oznacza ten selektor CSS: .panel>a[href*="login"]

Ten selektor CSS oznacza, że wybrane zostaną wszystkie elementy <a> będące bezpośrednimi potomkami elementów o klasie "panel" (np. <div class="panel">) i zawierające atrybut href z wartością, która zawiera fragment "login".Na przykład, dla HTML:

<div class="panel">
  <a href="/login">Login</a>
  <a href="/signup">Sign up</a>
</div>

Selektor .panel>a[href*="login"] odniesie się tylko do pierwszego elementu <a> o wartości href="/login".

Czy stosowanie takiego selektora jest dobrą praktyką?

Stosowanie selektorów CSS, takich jak .panel>a[href*="login"], może być korzystne w niektórych przypadkach, ale warto rozważyć pewne czynniki przed zastosowaniem ich w projekcie.

Oto kilka punktów do rozważenia:

  1. Czytelność kodu: Skomplikowane selektory mogą być trudne do zrozumienia dla innych programistów. Ważne jest, aby utrzymywać czytelność kodu, szczególnie w większych projektach, aby inni członkowie zespołu mogli łatwo zrozumieć i utrzymywać kod.
  2. Elastyczność i skalowalność: Skomplikowane selektory mogą utrudniać zmiany w kodzie lub dodawanie nowych elementów. Jeśli struktura HTML ulega zmianie lub dodawane są nowe elementy, selektory mogą przestać działać poprawnie.
  3. Wydajność: Złożone selektory mogą mieć wpływ na wydajność renderowania strony, szczególnie w przypadku dużych dokumentów HTML. Zbyt wiele zagnieżdżonych i złożonych selektorów może spowolnić przeglądarkę.

Dlatego zalecam stosowanie selektorów, które są czytelne, elastyczne i mają minimalny wpływ na wydajność. Jeśli możliwe, należy dążyć do prostszych selektorów, które są łatwe do zrozumienia i utrzymania. Jeśli selektor jest zbyt specyficzny i zbyt zależny od struktury HTML, może być bardziej podatny na łamanie się w wyniku zmian w kodzie lub strukturze strony.

Super, ChatGPT podał przykład kodu i podpowiedział, na co zwrócić uwagę przy stosowaniu takich selektorów. Pamiętaj, że jeżeli nadal nie rozumiesz jakiejś koncepcji, możesz w tym samym wątku poprosić o więcej przykładów lub wyjaśnienie nieznanych Ci pojęć.

 Refaktoryzacja kodu z pomocą ChatGPT

Kiedy uczymy się JavaScriptu lub innego języka programowania, skupiamy się na tworzeniu kodu, który działa. Dopiero na późniejszym etapie nauki dbamy o to, aby był bardziej optymalny czy reużywalny i aby dobrze się go czytało.

Weźmy np. długą instrukcję if-else z artykułu „Mniej instrukcji warunkowych”, w której sprawdzamy, czy zgadza się kolor wskazanego produktu (czy np. banan naprawdę jest koloru żółtego). Słyszeliśmy już, że takie długie instrukcje warto upraszczać. Nie wiemy tylko jak. Zapytajmy ChatGPT:

Ulepsz poniższy kod:

function isProductCorrect(color, product) {
    if (color === 'red' && (product === 'cranberry' || product === 'cherry')) {
        alert('Hurray!');
    } else if (
        color === 'yellow' &&
        (product === 'banana' || product === 'melon')
    ) {
        alert('Hurray!');
    } else if (
        color === 'green' &&
        (product === 'cucumber' || product === 'avocado')
    ) {
        alert('Hurray!');
    } else {
        alert('Wrong answer');
    }
}

Poniżej przedstawiam ulepszony kod:

function isProductCorrect(color, product) {
    const colorProductMap = {
        red: ['cranberry', 'cherry'],
        yellow: ['banana', 'melon'],
        green: ['cucumber', 'avocado']
    };

    if (colorProductMap[color] && colorProductMap[color].includes(product)) {
        alert('Hurray!');
    } else {
        alert('Wrong answer');
    }
}

W ulepszonym kodzie zastosowano mapę colorProductMap, która przechowuje poprawne kombinacje kolorów i produktów. Dzięki temu eliminuje się potrzebę powtarzania warunków dla różnych kombinacji kolorów i produktów.

W pierwszym warunku sprawdzane jest, czy colorProductMap zawiera klucz color, a następnie sprawdzane jest, czy product znajduje się w tablicy wartości dla tego klucza. Jeśli tak, wywoływane jest powiadomienie 'Hurray!'. W przeciwnym razie wywoływane jest powiadomienie 'Wrong answer'.

Ten ulepszony kod jest bardziej czytelny, bardziej modularny i łatwiejszy do utrzymania, ponieważ pozwala na łatwe dodawanie lub usuwanie kombinacji kolorów i produktów.

UWAGA: Sztuczna inteligencja nie zawsze wie, o co nam chodzi. Czasem trzeba wypróbować różne prompty. Przykładowo, gdy pytałam „Czy da się skrócić poniższą instrukcję warunkową?”, otrzymywałam niezbyt czytelny kod:

function isProductCorrect(color, product) {
    if (
        (color === 'red' && (product === 'cranberry' || product === 'cherry')) ||
        (color === 'yellow' && (product === 'banana' || product === 'melon')) ||
        (color === 'green' && (product === 'cucumber' || product === 'avocado'))
    ) {
        alert('Hurray!');
    } else {
        alert('Wrong answer');
    }
}

 Debugowanie z ChatGPT – gdzie jest błąd?

Zawsze warto dokładnie czytać komunikaty w konsoli i sprawdzać podany numer linii błędu w kodzie. Czasem jednak nie od razu naprowadza nas to na rozwiązanie – zwłaszcza jeśli uczymy się już kilka godzin i ślepniemy na błędy 😉

Załóżmy, że coś jest nie tak z naszym wyszukiwaniem przycisku.

To mój kod HTML:

<button id="myButton" style="color: green">Click me</button>

A to kod JS:

const button = document.querySelector('myButton');
button.addEventListener('click', () => console.log('Hello world'));

Dlaczego otrzymuję błąd: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"

Otrzymujesz błąd "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" dlatego, że w kodzie JS używasz metody querySelector do znalezienia elementu o id "myButton", ale nie podajesz odpowiedniego selektora CSS.

Poprawny kod JS powinien wyglądać następująco:

const button = document.querySelector('#myButton');
button.addEventListener('click', () => console.log('Hello world'));

W powyższym kodzie dodajemy znak "#" przed "myButton" w selektorze CSS (#myButton), aby wskazać, że chcemy znaleźć element o id "myButton". Bez tego znaku "#" metoda querySelector próbowałaby znaleźć element o nazwie "myButton", a nie o id "myButton". Poprawiając ten błąd, kod JS powinien działać poprawnie i zarejestrować zdarzenie click dla przycisku.

 Code review z komentarzami do kodu

Tutaj należy uważać – ChatGPT czasem nieprawidłowo interpretuje nasz kod, dlatego warto mu podrzucać krótkie fragmenty i dokładniej opisywać kontekst.

Uczę się programowania. Wykonaj code review mojego rozwiązania i zostaw komentarze bezpośrednio w kodzie (poniżej zobaczysz, że tej prośby ChatGPT „nie zrozumiał”, ale czasem daje radę). Czy mogę coś ulepszyć? Czy stosuję dobre praktyki programowania?

const fruits = ["APPLE", "BANANA", "LEMON", "ORANGE", "PEAR"];

for (var fruit of fruits) {
 const lowercasedFruit = fruit.toLowerCase(); 
console.log(lowercasedFruit);
}

Oto recenzja Twojego kodu:

Kod wygląda ogólnie dobrze i realizuje zamierzone zadanie. Jednakże, mam kilka uwag dotyczących praktyk programowania:

  1. Zalecam używanie let lub const zamiast var do deklarowania zmiennych. W tym przypadku, zamiast var fruit of fruits, lepiej byłoby użyć let fruit of fruits, ponieważ w większości przypadków preferuje się blokowy zakres zmiennych.
  2. Dobre praktyki programowania obejmują nazewnictwo zmiennych w sposób, który jest czytelny i opisowy. W przypadku lowercasedFruit, jest to akceptowalne, ale sugeruję bardziej opisowe nazwy, które jasno wskazują, co zawiera ta zmienna, np. lowercasedFruitName.
  3. Ważne jest, aby stosować jednolite wcięcia i formatowanie kodu dla lepszej czytelności. W przypadku Twojego kodu, druga linia powinna być wcięta o jedną jednostkę wewnątrz pętli for.

W powyższej odpowiedzi ChatGPT przesłał mi też ulepszoną wersję kodu, jednak nie zwrócił uwagi na nazwę lowercasedFruit, która lepiej wyglądałaby zapisana w całości camelCase’em (lowerCasedFruit) jak adekwatna metoda .toLowerCase().

Sztuczna inteligencja staje się coraz lepsza i powyższe problemy z code review za jakiś czas mogą nie mieć miejsca. Warto jednak pozostać czujnym i nie wierzyć we wszystko, co sugeruje AI.

 Sztuczna inteligencja tworzy kod

Jeżeli umiemy już programować, znamy składnię języka i nie zastanawiamy się zbyt długo, jakiego znacznika, selektora czy jakiej metody JS użyć, możemy za pomocą AI generować sobie fragmenty kodu. (Nie rób tego jednak na początku nauki! Tracisz w ten sposób okazję do przyswojenia zasad języka).

W edytorze kodu VS Code dzięki wtyczce dostępny jest już GitHub Copilot od Microsoftu, natomiast ChatGPT też może nam co nieco podpowiedzieć.

Przykładowo cały kod CSS w grze losującej szczęśliwy numer (omawiam na jej podstawie refaktoryzację długich funkcji JavaScript) został wygenerowany przez ChatGPT.

 

Narzędzia sztucznej inteligencji już nas nie opuszczą, dlatego warto zacząć je stosować od razu na początku nauki programowania. Nie tylko ułatwią nam przyswajanie wiedzy, ale w przyszłości będą atutem podczas szukania pracy w IT. Junior umiejący korzystać z ChatGPT czy GitHub Copilota w krótszym czasie zacznie dostarczać wartość firmie i będzie popełniał mniej błędów. Udanej zabawy z AI!

Udostępnij ten artykuł:

Mentoring to efektywna nauka pod okiem doświadczonej osoby, która:

  • przekazuje Ci swoją wiedzę i nadzoruje Twoje postępy w zdobywaniu umiejętności,
  • uczy Cię dobrych praktyk i wyłapuje złe nawyki,
  • wspiera Twój rozwój i zwiększa zaangażowanie w naukę.

Mam coś dla Ciebie!

W każdy piątek rozsyłam motywujący do nauki programowania newsletter!

Dodatkowo od razu otrzymasz ode mnie e-book o wartości 39 zł. To ponad 40 stron konkretów o nauce programowania i pracy w IT.

PS Zazwyczaj wysyłam 1-2 wiadomości na tydzień. Nikomu nie będę udostępniał Twojego adresu e-mail.