Linting z AI

https://aie24.pl/

Lintery to narzędzia, które oznaczają błędy programowania, usterki i problemy ze stylem. Techniczna nazwa zadania wykonywanego przez lintery to statyczna analiza kodu. Statyczna część statycznej analizy kodu odnosi się do faktu, że te narzędzia sprawdzają kod bez kompilowania lub uruchamiania go. Korzystanie z lintera może pomóc w poprawie jakości kodu. Ponieważ większość narzędzi GenAI nie jest (w momencie pisania tego tekstu) w stanie skompilować i uruchomić napisanego przez Ciebie kodu, za każdym razem, gdy poprosisz model uczenia maszynowego o sprawdzenie błędów lub złego stylu w Twoim kodzie, używasz go jako lintera.

Adaptacja do nowej składni

https://aie24.pl/

Podobnie jak funkcje podpowiedzi kodu w środowiskach IDE, GenAI może pomóc Ci nauczyć się lub zapamiętać składnię funkcji lub metod. Na przykład Copilot będzie Ci dawał podpowiedzi podczas pisania; możesz je zignorować, kontynuując pisanie lub zaakceptować, naciskając klawisz Tab. Na przykład mam problem z zapamiętaniem kolejności argumentów przekazywanych do metody Array.reduce. Rysunek  przedstawia podpowiedź Copilot dotyczącą uruchamiania metody.

Możesz również użyć interfejsów czatu GenAI, aby dowiedzieć się o nowej składni. Pamiętaj jednak, że używany przez Ciebie model mógł zostać wytrenowany na danych sprzed istnienia funkcji lub metody, w przypadku której szukasz pomocy. Na przykład data odcięcia danych treningowych GPT-3 to wrzesień 2021 r., więc model nie ma wiedzy o wydarzeniach ani technologiach opracowanych po tej dacie. Rysunek  pokazuje, co się stało, gdy zapytałem GPT-3 o funkcję JavaScript wprowadzoną w 2022 r.

Z drugiej strony GPT-4 ma nowszy punkt odcięcia danych treningowych i może również przeszukiwać sieć. Rysunek  pokazuje odpowiedź ChatGPT na to samo pytanie, ale z modelem ustawionym na GPT-4.

Pamiętaj również, że w odpowiedzi na zapytanie model GenAI może po prostu wymyślić coś, co brzmi wiarygodnie, ale jest niepoprawne. Tendencja ChatGPT do zmyślania faktów i ludzi jest legendarna. Jednak w przypadkach, gdy coś jest tak oparte na regułach, jak język komputerowy, zwykle podaje fakty poprawnie. Z reguły należy zachować pewną dozę nieufności wobec każdego kodu generowanego przez AI. Zawsze weryfikuj. Rysunek  pokazuje odpowiedź ChatGPT 3.5 na moje pytanie o nieistniejącą metodę JavaScript.

Wskazówki dotyczące opanowania kodu

https://aie24.pl/

Jedną z najstarszych form kodowania wspomaganego komputerowo jest uzupełnianie kodu. Firma Microsoft wprowadziła swoją implementację uzupełniania kodu, IntelliSense, w programie Visual Studio w 1996 r. Tego typu narzędzia działają poprzez sugerowanie funkcji i metod, które częściowo pasują do czegoś, co zacząłeś pisać, jak pokazano na rysunku.

Tradycyjna funkcjonalność uzupełniania kodu nie wykorzystuje GenAI, a jej sugestie mogą być często frustrująco niepoprawne. Jeśli jednak potrzebujesz pomocy ze składnią lub pisownią (lub nie chcesz wpisywać pełnych nazw funkcji), uzupełnianie kodu jest przydatne.

Generative AI przenosi uzupełnianie kodu na wyższy poziom, oferując sugestie oparte na swoim szkoleniu. Po zintegrowaniu z IDE narzędzia takie jak Copilot GitHub lub CodeWhisperer Amazon mogą sugerować całe instrukcje lub funkcje, a nie tylko pojedyncze wywołania funkcji. Modele GenAI trenowane na dużych zestawach danych kodu mogą oferować wiele sugestii opartych na tym, co napisali inni programiści; biblioteki, klasy i funkcje zaimportowane do bieżącego pliku; a nawet inne pliki otwarte w IDE lub w repozytorium kodu. Rysunek  przedstawia sugestię od Copilot opartą na fakcie, że nazwałem mój plik validatePhoneNumber.js.

Niestety, w tym przypadku sugerowana funkcja jest dla większości ludzi bardziej niż bezużyteczna, ponieważ zwraca wartość true tylko po podaniu numeru telefonu zaczynającego się od 98, co jest kodem kraju dla Iranu. Jednak większy kontekst może nakłonić model do zwrócenia lepszej odpowiedzi. Kiedy podałem komentarz opisujący to, co próbowałem zrobić, model zwrócił o wiele lepszą sugestię, jak pokazano na rysunku . Chociaż nie jest idealna i zdecydowanie zbyt rozwlekła, przynajmniej ta sugestia przybliża mnie do tego, czego szukam.

Przestań pamiętać trywialne szczegóły

https://aie24.pl/

Kiedy uczę programowania, moi uczniowie często zadają mi pytania o składnię i interfejsy API, a nie o to, jak coś działa. Kiedy dostaję pytanie o składnię, odpowiadam na nie, jeśli mogę, bez szukania; w przeciwnym razie zachęcam uczniów do „wyszukania w Google”. Z czasem i doświadczeniem zapamiętywanie składni po prostu zaczyna się pojawiać. Podczas pisania oprogramowania jedną z najlepszych umiejętności jest wiedza, jak i gdzie szukać odpowiedzi. A najczęściej najlepszym miejscem jest wyszukiwarka. Ponieważ wyszukiwarki wykorzystują uczenie maszynowe do określania najlepszych wyników do wyświetlenia w odpowiedzi na zapytania, od jakiegoś czasu używamy AI do kodowania.

Pomoc w składni

https://aie24.pl/

Duża część pracy związanej z programowaniem komputerowym polega po prostu na zapamiętywaniu lub wyszukiwaniu reguł definiujących strukturę języka programowania, zwanych również jego składnią. Każdy język lub biblioteka kodu ma swój własny sposób robienia rzeczy. Gdy już poznasz podstawy działania języka programowania (takie jak tworzenie funkcji, używanie podstawowych operatorów i pisanie pętli), musisz wiedzieć, jakie wbudowane funkcje są dostępne w Twoim środowisku (czy to przeglądarka, czy mobilny system operacyjny) oraz jakie parametry i typy danych oczekują. To dużo do zapamiętania i żaden programista, jakiego kiedykolwiek spotkałem, nie jest w stanie zapamiętać wszystkiego, co jest do zapamiętania o jednym języku programowania, a co dopiero o kilku językach programowania. Za pomocą narzędzi GenAI możesz mieć natychmiastowy dostęp do zebranej wiedzy milionów programistów. W tym momencie możesz zadać sobie pytanie: „Ale czy etyczne jest dla AI zbieranie kodu wszystkich w ten sposób?”. Ten temat jest gorąco dyskutowany i jest przedmiotem co najmniej jednego pozwu.

Tworzenie CRUD za pomocą AI

https://aie24.pl/

Jednym z najczęstszych zadań w dowolnym programie komputerowym jest dostęp do źródła danych i pisanie funkcji do wykonywania operacji na źródle danych. Podstawowe operacje, które możesz wykonać na dowolnym źródle danych, to tworzenie rekordu, odczytywanie rekordu, aktualizowanie rekordu i usuwanie rekordu. Zbiorcza nazwa kodu, który umożliwia te operacje, to cudownie sugestywny akronim CRUD. Większość ludzi nie lubi pisać CRUD. W tej sekcji użyjesz generatywnej AI, aby zmniejszyć ilość pracy potrzebnej do wygenerowania CRUD. Aby rozpocząć to ćwiczenie, musisz mieć dostęp do interfejsu do czatowania z generatywnym modelem AI, takim jak ChatGPT, Google Bard lub Microsoft Bing. Jeśli jeszcze nie masz konta w żadnej z tych usług, postępuj zgodnie z instrukcjami , aby zarejestrować się w ChatGPT. Następnie, gdy zobaczysz przed sobą okno czatu, zacznij od krótkiego żądania do generatywnego modelu, aby zobaczyć, co zrobi. Jeśli usługa, z której korzystasz, nie spełni lub nie będzie w stanie spełnić Twojego żądania, nie stracisz wiele czasu na stworzenie szczegółowego monitu. Na przykład, gdy poprosiłem Binga o wygenerowanie CRUD, zaczął to robić, ale potem kazał mi zapytać o coś innego, jak pokazano na rysunku

Teraz określ, czy odpowiedź jest obiecująca. Jeśli nie otrzymałeś odpowiedzi, spróbuj użyć innego generatywnego modelu AI. Oto początek odpowiedzi, którą otrzymałem na mój początkowy monit („Napisz funkcje JavaScript do wykonywania operacji CRUD dla tabeli bazy danych o nazwie todo-list”) od ChatGPT przy użyciu modelu GPT-3.5:

// Simulated in-memory database for the todo-list

const todoListDB = [];

// Function to Create a new todo item

function createTodoItem(title, description) {

const newItem = {

id: todoListDB.length + 1,

title,

description,

completed: false,

};

todoListDB.push(newItem);

return newItem;

}

Odpowiedź jest odpowiednia, ale ponieważ nie podałem wystarczających informacji o pożądanej aplikacji, ChatGPT użył tablicy, jakby była bazą danych, co raczej nie jest tutaj potrzebne. Jeśli otrzymasz obiecującą odpowiedź na swój początkowy monit, podaj modelowi dodatkowe szczegóły. Na przykład, moim następnym krokiem byłoby poinformowanie ChatGPT, że jest to aplikacja Node.js, która będzie działać z bazą danych MongoDB i że powinna używać Mongoose. Proces udoskonalania instrukcji do modelu GenAI i dostarczania kontekstu i przykładów nazywa się inżynierią monitów.  Rysunek  pokazuje mój drugi monit.

Tym razem ChatGPT odpowiedział kompletną aplikacją Node.js, która łączy się z lokalną bazą danych i może wykonywać operacje CRUD. Listing  pokazuje zregenerowany kod.

const mongoose = require(‘mongoose’);

// Connect to MongoDB

mongoose.connect(‘mongodb://localhost/todo-list’, {

useNewUrlParser: true,

useUnifiedTopology: true,

});

// Define a TodoItem schema

const todoItemSchema = new mongoose.Schema({

title: String,

description: String,

completed: Boolean,

});

// Create a TodoItem model

const TodoItem = mongoose.model(‘TodoItem’, todoItemSchema);

// Function to Create a new todo item

async function createTodoItem(title, description) {

const newItem = new TodoItem({

title,

description,

completed: false,

});

try {

await newItem.save();

return newItem;

} catch (error) {

throw error;

}

}

// Function to Read all todo items

async function getAllTodoItems() {

try {

const todoItems = await TodoItem.find();

return todoItems;

} catch (error) {

throw error;

}

}

// Function to Read a specific todo item by ID

async function getTodoItemById(id) {

try {

const todoItem = await TodoItem.findById(id);

return todoItem || null;

} catch (error) {

throw error;

}

}

// Function to Update a todo item by ID

async function updateTodoItem(id, updatedData) {

try {

const updatedItem = await TodoItem.findByIdAndUpdate(id,

updatedData, { new: true });

return updatedItem;

} catch (error) {

throw error;

}

}

// Function to Delete a todo item by ID

async function deleteTodoItem(id) {

try {

const deletedItem = await TodoItem.findByIdAndRemove(id);

return deletedItem || null;

} catch (error) {

throw error;

}

To wcale nie jest złe. Podoba mi się, że ChatGPT (w większości) używa najnowszej składni JavaScript, prawidłowo obsługuje błędy, które mogą się zdarzyć, i pisze dobre komentarze. Widziałem kod napisany przez ludzi, który jest o wiele gorszy. Prawdziwym testem jest jednak to, czy kod działa. Po wygenerowaniu funkcji CRUD ChatGPT udostępnił kilka przykładów, jak można ich używać. Przykłady te są pokazane w Listingu 2.

Przykładowy kod użycia z ChatGPT

// Example usage:

(async () => {

try {

const newItem = await createTodoItem(“Buy groceries”, “Milk,

eggs, and bread”);

console.log(“Created item:”, newItem);

const allItems = await getAllTodoItems();

console.log(“All items:”, allItems);

const itemToUpdate = await getTodoItemById(newItem._id);

if (itemToUpdate) {

const updatedItem = await updateTodoItem(itemToUpdate._id,

{ completed: true });

console.log(“Updated item:”, updatedItem);

}

const deletedItem = await deleteTodoItem(newItem._id);

console.log(“Deleted item:”, deletedItem);

} catch (error) {

console.error(“Error:”, error);

} finally {

mongoose.disconnect();

}})();

}

Jeśli na komputerze deweloperskim zainstalowano Node.js i MongoDB, możesz wypróbować ten kod, kopiując Listingi 1 i 2 do pliku i zapisując go z rozszerzeniem .js. Przed uruchomieniem aplikacji musisz zainicjować katalog zawierający plik .js jako pakiet Node, wpisując następujące polecenie w oknie terminala:

npm init -y

Następnie zainstaluj Mongoose, wpisując następujące polecenie:

npm install mongoose

Następnie uruchom program, wpisując node, a następnie nazwę pliku, w następujący sposób:

node listing0102.js

Rysunek  pokazuje, co się stało, gdy uruchomiłem ten program.

Aby sprawdzić, czy kod ChatGPT działa, zakomentowałem kod, który usuwa utworzony rekord, ponownie uruchomiłem aplikację Node.js, a następnie uruchomiłem powłokę Mongo i przyjrzałem się zawartości kolekcji todo-list, jak pokazano na rysunku .

Pozwolenie AI na napisanie szablonu

https://aie24.pl/

Możesz zminimalizować pracę wymaganą do wygenerowania prostego szablonu HTML na wiele sposobów, na przykład używając fragmentu kodu lub przeszukując sieć w poszukiwaniu przykładu. Jednak jeśli chcesz utworzyć niestandardowy szablon, który zawiera pewną strukturę i daje dobry początek w projektowaniu przyszłej witryny, możesz po prostu zapytać swoją AI. Na przykład wysłałem do ChatGPT następujące żądanie:

Proszę wygenerować szablon HTML z elementem stylu, który wykorzystuje flexbox do utworzenia układu trzykolumnowego z przykładowym górnym paskiem nawigacyjnym i stopką.

A oto kod wygenerowany przez ChatGPT:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width,

initial-scale=1.0″>

<title>Three Column Layout</title>

<style>

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

}

.container {

display: flex;

flex-direction: column;

min-height: 100vh;

}

header {

background-color: #333;

color: #fff;

padding: 10px 0;

text-align: center;

}

nav {

background-color: #444;

color: #fff;

padding: 10px 0;

text-align: center;

}

.main-content {

flex: 1;

display: flex;

justify-content: space-between;

padding: 20px;

}

.sidebar {

flex-basis: 20%;

background-color: #f0f0f0;

padding: 20px;

}

.content {

flex-basis: 60%;

background-color: #fff;

padding: 20px;

}

.aside {

flex-basis: 20%;

background-color: #f0f0f0;

padding: 20px;

}

footer {

background-color: #333;

color: #fff;

padding: 10px 0;

text-align: center;

}

</style>

</head>

<body>

<div class=”container”>

<header>

<h1>Top Navigation Bar</h1>

</header>

<nav>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</nav>

<div class=”main-content”>

<div class=”sidebar”>

<h2>Sidebar</h2>

<p>This is the sidebar content.</p>

</div>

<div class=”content”>

<h2>Main Content</h2>

<p>This is the main content area.</p>

</div>

<div class=”aside”>

<h2>Aside</h2>

<p>This is the aside content.</p>

</div>

</div>

<footer>

<p>Footer</p>

</footer>

</div>

</body>

</html>

Wynikowy kod HTML wygenerowany przez moje żądanie (znany również jako monit) dość dobrze pasował do tego, co zrobiłbym, gdybym napisał go ręcznie. Rysunek  pokazuje wynikową stronę internetową, gdy zapiszę wygenerowany znacznik HTML w pliku i otworzę go w przeglądarce bez modyfikowania.

Wykrywanie nudnych zadań

https://aie24.pl/

Aby zidentyfikować zadania, które można zautomatyzować za pomocą sztucznej inteligencji, pomyśl o zadaniach, które wykonujesz wielokrotnie w wielu projektach. Programiści JavaScript mogą wybrać element w oknie przeglądarki, taki jak przycisk, i dołączyć do niego nasłuchiwacz zdarzeń, aby wykonać jakąś czynność, gdy użytkownik wchodzi w interakcję z tym elementem. Mogą też zrobić coś bardziej złożonego, takiego jak napisanie kodu dla aplikacji opartej na bazie danych, która obsługuje zadania tworzenia, odczytywania, aktualizowania i usuwania (CRUD).Dla programistów i projektantów stron internetowych prostym przykładem szablonowego kodu, który można zautomatyzować, jest podstawowa struktura strony HTML. Każda prawidłowa strona HTML zaczyna się od deklaracji typu dokumentu, po której następuje element HTML, a następnie element head (w tym kilka elementów wewnętrznych, takich jak title i meta tagi), a następnie element body.

Wygnanie nudnych zadań

https://aie24.pl/

Jedną z najbardziej podstawowych i przydatnych rzeczy, które możesz zrobić z obecnymi modelami generatywnej sztucznej inteligencji, jest wykorzystanie ich do generowania typów kodu, które programiści pieszczotliwie nazywają kodem szablonowym. Termin „kod szablonowy” pochodzi z XIX wieku, kiedy to stalowe płyty były używane jako szablony do produkcji kotłów parowych. Kod szablonowy to coś, co jest takie samo lub prawie takie samo w każdym pliku lub projekcie. Nikt nie lubi pisać kodu szablonowego, ale musimy to robić, ponieważ kod, który chcemy napisać (te zabawne rzeczy) nie będzie działał bez kodu szablonowego.

Jak kodowanie korzysta z AI

https://aie24.pl/

Jeśli jesteś programistą lub uczysz się programować, generatywna sztuczna inteligencja (znana również jako GenAI) może pomóc Ci być bardziej produktywnym, popełniać mniej błędów i szybciej uczyć się nowych umiejętności i języków. W trakcie tego procesu pracujesz z niektórymi narzędziami, aby zapoznać się z tym, co jest dostępne. Chociaż możesz być w stanie użyć AI do generowania działających programów komputerowych bez znajomości kodowania, zdecydowanie odradzam Ci to — zwłaszcza jeśli planujesz wdrożyć cokolwiek, co wygenerujesz. Generatywna AI nie wie,jak programować. Jeśli nie wiesz również, jak kodować, istnieje duże prawdopodobieństwo, że kod, który stworzysz za pomocą AI, będzie miał poważne problemy z bezpieczeństwem, problemy z funkcjonalnością lub gorsze.