Създайте първото си полезно приложение с ИИ

Стъпка 1: Опишете проблема със свои думи

Почти всеки пазарува, затова това е идеален първи проект. Не е нужно да разбирате от програмиране, за да прецените дали един списък за пазаруване работи: въвеждате хляб, мляко и яйца, виждате общата сума и отмятате нещата, докато ги купувате. Резултатът е нещо, което наистина можете да използвате още тази седмица.

Преди да отворите който и да е ИИ инструмент, довършете тези три изречения на хартия или в бележка. Това е най-важното програмистко умение в цялата книга: да превърнете желанието в конкретни правила.

1. Трябва да записвам… (например: всеки артикул, колко броя ми трябват и цената на един брой).
2. Искам програмата да изчислява… (например: цената на всеки ред и общата сума за цялото пазаруване).
3. Ще знам, че програмата работи, когато… (например: два артикула по 25 показват 50, а отмятането на артикул не променя общата сума).

Стъпка 2: Създайте първата малка версия

Първата версия е един-единствен файл, който се отваря в уеб браузъра. Не е нужно да инсталирате среда за програмиране, няма сървър и няма вход с парола. Копирайте промпта по-долу в своя ИИ асистент (Claude, ChatGPT или подобен) точно както е.

Помогни ми да създам първото си просто приложение. Пълен начинаещ съм.

Създай списък за пазаруване в един-единствен файл с име pokupki.html, който да мога да отворя в уеб браузъра си. Сложи всички стилове и целия JavaScript в този един файл, без външни библиотеки.

Искам да въвеждам името на артикула, количеството и цената на един брой. С бутон артикулът се добавя в списъка. Покажи цената на всеки ред, а най-долу общата сума за цялото пазаруване. Позволи ми да изтривам артикул и да го отбелязвам като купен. Отбелязването като купен не трябва да променя общата сума.

Отхвърляй празно име, невалидни числа, отрицателна цена и количество нула или по-малко. В цената приемай както десетична запетая, така и десетична точка.

Първо накратко обясни плана. После напиши целия код и точните стъпки как да запазя и отворя файла. Засега не добавяй никакви други функции.

1. Копирайте кода. Използвайте бутона за копиране в отговора на ИИ, за да вземете целия код – от първия до последния ред.
2. Запазете го като pokupki.html. Отворете обикновен текстов редактор (Notepad в Windows, TextEdit в режим на обикновен текст на Mac), поставете кода и го запазете като pokupki.html. Като тип на файла изберете „Всички файлове“, а не „Текстов документ“.
3. Отворете го в браузъра. Щракнете два пъти върху файла или го плъзнете в прозорец на браузъра. Трябва да видите своя списък за пазаруване, а не страница, пълна с код.

Стъпка 3: Проверете, че не е просто красива картинка

Приложение, което изглежда правилно, не е същото като приложение, което работи. Минете през тази таблица ред по ред и сравнете това, което виждате, с правилния резултат. Това е първият ви истински тест.

Ако някой ред не мине, засега не поправяйте кода на ръка. Кажете на ИИ точно кой ред не е минал, какво сте въвели и какво сте видели вместо това, и го помолете да поправи само този проблем.

Стъпка 4: Направете една промяна сами

Сега направете първата си промяна, без ИИ да я пише вместо вас. Попитайте ИИ: „Къде в кода ми е заглавието на приложението?“ Той ще ви посочи ред, който изглежда приблизително така: <h1>Списък за пазаруване</h1>.

1. Намерете заглавието. Отворете pokupki.html в текстовия редактор и намерете реда, който ИИ ви е посочил.
2. Променете текста. Заменете думите между <h1> и </h1> със свое заглавие, например „Пазаруване в събота“. Не изтривайте ъгловите скоби.
3. Запазете и опреснете. Запазете файла, върнете се в браузъра и опреснете страницата. Трябва да се появи новото ви заглавие.

След това помолете ИИ да ви обясни собствения ви файл в три части, като използва вашия код за пример. Ще видите, че всяко уеб приложение е изградено от едни и същи три слоя:

Стъпка 5: Научете приложението на ново умение

Истинските програми растат на малки стъпки. Добавете една нова функция и тествайте отново. Изпратете на ИИ това продължение в същия разговор:

Добави бюджет към списъка ми за пазаруване. Позволи ми да въведа сумата, която искам да похарча. Покажи колко остава. Ако общата сума надхвърли бюджета, покажи ясно предупреждение със сумата, с която съм го надхвърлил. Всичко останало трябва да работи точно както досега, и ми покажи целия обновен файл.

Вече създадохте, пуснахте, тествахте и променихте истинско приложение. Това не е цялото програмиране, но е ритъмът, който ще повтаряте във всеки следващ урок: опишете ясно, оставете ИИ да генерира, проверете спрямо очакваните резултати и променяйте по едно нещо наведнъж.