https://aie24.pl/
W tej sekcji użyjesz Copilota, aby pomóc Ci zbudować grę quizową, która wyświetla jedno pytanie wielokrotnego wyboru na raz, a następnie losowo wybiera nowe pytanie, gdy użytkownik wybierze odpowiedź. Pomyśl o strukturze aplikacji, którą chcesz zbudować. Jakie inne szczegóły, Twoim zdaniem, będą ważne, aby upewnić się, że Copilot oferuje użyteczne wybory? W poniższych krokach zobaczysz, jak przebiegło ćwiczenie w moim przypadku. Twoje doświadczenie będzie inne:
- Utwórz plik o nazwie index.html i wpisz komentarz HTML. Oto komentarz, który napisałem:
<!– Strona główna gry quizowej o uczeniu maszynowym –>
W odpowiedzi na ten monit Copilot sugeruje deklarację DOCTYPE dla pliku HTML5, co jest poprawne.
- Naciśnij klawisz Tab, aby zaakceptować sugestię Copilot, a następnie naciśnij Enter, aby przejść do następnego wiersza i ocenić kolejną sugestię.
- Kontynuuj akceptowanie sugestii Copilot, aż pojawi się taka, której nie chcesz.
Copilot zasugerował podstawowy szablon HTML zawierający formularz, który przesyła się do skryptu PHP. To nie jest to, co sobie wyobrażałem, więc muszę podać dodatkowe informacje w moim początkowym monicie. Zmieniłem mój monit w następujący sposób
<!–
Strona główna gry quizowej o uczeniu maszynowym.
Ta gra wyświetli jedno pytanie wielokrotnego wyboru na raz, używając JavaScript, który pobiera dane z data/trivia.js.
Możliwe odpowiedzi będą wyświetlane z przyciskami radiowymi po lewej stronie. Po kliknięciu przycisku radiowego użytkownikowi zostanie wyświetlone nowe losowe pytanie.
–>
Dzięki dodatkowemu kontekstowi Copilot był w stanie stworzyć coś, co znacznie bardziej przypominało moją wizję
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Machine Learning Trivia</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”container”>
<header>
<h1>Machine Learning Trivia</h1>
</header>
<main>
<div id=”question”></div>
<div id=”answers”></div>
<div id=”score”></div>
</main>
<footer>
<p>© Chris Minnick</p>
</footer>
</div>
<script src=”js/trivia.js”></script>
</html>
- Dodaj type=”module” do znacznika <script>, aby poinformować Copilot, że użyjesz instrukcji import w pliku trivia.js.
- Utwórz trzy foldery o nazwach js, css i data.
- W folderze data utwórz plik o nazwie triviaQuestions.js.
- Napisz komentarz na początku pliku triviaQuestions.js, który opisuje, co powinien zawierać plik.
Oto, co napisałem:
// Moduł zawierający tablicę 10 obiektów
// zawierających pytania i odpowiedzi quizowe.
- Jeśli Twój monit, podobnie jak mój, nie wygenerował oczekiwanej zawartości, wykonaj następujące czynności:
- Kliknij ikonę czatu w lewym panelu kodu programu Visual Studio, aby otworzyć interfejs czatu Copilot. Możesz również użyć ChatGPT w tym kroku.
- W interfejsie czatu wprowadź następujący monit:
Podaj mi tablicę JavaScript zawierającą 10 pytań wielokrotnego wyboru dotyczących uczenia maszynowego
W odpowiedzi na ten monit Copilot Chat dał mi odpowiednio sformatowany i odpowiedni zestaw pytań i odpowiedzi. Oto kilka pierwszych pytań:
const triviaQuestions = [
{
question: “What is the name of the algorithm that is
commonly used for supervised learning?”,
choices: [“Decision Tree”, “K-Means”, “Naive Bayes”,
“Random Forest”],
answer: “Decision Tree”
},
{
question: “What is the name of the algorithm that is
commonly used for unsupervised learning?”,
choices: [“K-Means”, “Decision Tree”, “Naive Bayes”,
“Random Forest”],
answer: “K-Means”
},
{
question: “What is the name of the algorithm that is
commonly used for reinforcement learning?”,
choices: [“Q-Learning”, “K-Means”, “Naive Bayes”,
“Random Forest”],
answer: “Q-Learning”
},
…
];
- Skopiuj wygenerowaną tablicę i wklej ją do pliku danych.
- Będziesz importować tablicę do pliku JavaScript, więc dodaj słowo kluczowe export przed const, w ten sposób:
export const triviaQuestions = [
- Utwórz nowy plik w folderze js o nazwie trivia.js. Upewnij się, że masz otwarte pliki triviaQuestions.js i index.html podczas pracy nad trivia.js. Copilot używa plików, które masz otwarte jako kontekst dla pliku, nad którym pracujesz.
- Napisz komentarz na początku pliku trivia.js, opisując, co powinien on robić. Oto komentarz, który napisałem:
/* JavaScript dla gry Trivia.
Ten skrypt jest ładowany przez plik index.html i wyświetli pytania i możliwe odpowiedzi, z których użytkownicy mogą wybierać. Gra wyświetli nowe losowe pytanie, gdy użytkownik kliknie przycisk radiowy, aby wybrać odpowiedź i śledzić wynik użytkownika. */
- Bezpośrednio po komentarzu rozpocznij instrukcję importu JavaScript, aby zaimportować dane pytania. Niezależnie od tego, czy Copilot zorientuje się, co robisz i Ci pomoże, czy nie, instrukcja importu powinna wyglądać następująco:
import {triviaQuestions} from ‘../data/triviaQuestions.js’;
- Naciśnij Enter i zaakceptuj zmienne sugerowane przez Copilot.
Ostatecznie Copilot zasugeruje funkcję. Nie akceptuj sugerowanej funkcji od razu. Jeśli Copilot nie podaje żadnych sugestii, spróbuj wstawić pustą linię. Następnie spójrz na ikonę Copilot w prawym dolnym rogu. Powinna zacząć się obracać, a po kilku sekundach zobaczysz sugestię, jak zacząć pisać kod.
15. Najedź kursorem myszy na sugestię funkcji, aby wyświetlić menu Copilot, które może zawierać wiele możliwych sugestii, jak pokazano na rysunku .
- Jeśli podoba Ci się jedna z sugestii, zaakceptuj ją. Jeśli nie, spróbuj dopracować swój komentarz, aby podać więcej informacji o tym, czego chcesz.
- Kontynuuj ten proces akceptowania sugestii, pisania kodu i używania komentarzy, aby zapewnić kontekst, aż znajdziesz coś, co może zadziałać.
Teraz czas na podgląd Twojej aplikacji:
- Kliknij ikonę rozszerzeń po lewej stronie VSCode i użyj pola wyszukiwania, aby znaleźć rozszerzenie Live Server.
- Kliknij przycisk Instaluj pod rozszerzeniem Live Server. To rozszerzenie otwiera pliki HTML za pomocą serwera deweloperskiego.
- W Eksploratorze plików programu Visual Studio Code kliknij prawym przyciskiem myszy plik index.html i wybierz opcję Otwórz za pomocą Live Server. Twoja aplikacja zostanie otwarta w domyślnej przeglądarce internetowej.
Rysunek przedstawia (szorstką i niegotową) grę, którą stworzyłem z pomocą Copilota. Proces ten zajął mi około 20 minut przy drugiej próbie.
Jeśli Twoja aplikacja nie działa, spróbuj debugowania za pomocą Copilot Chat. Niezależnie od tego, czy skończyłeś z użyteczną — lub nawet dobrą — aplikacją, zadaj sobie następujące pytania:
*Czy programowanie w parach z AI było łatwiejsze czy trudniejsze niż programowanie w parach z innym programistą?
*Czy byłeś zaskoczony (pozytywnie lub negatywnie) sugestiami oferowanymi przez Copilot?
* Jak zmieniłbyś swoje podejście do programowania w parach z AI, gdybyś miał powtórzyć to ćwiczenie?
