Створіть свій перший корисний застосунок з AI

Крок 1: Опишіть проблему своїми словами

По покупки ходить майже кожен, тому це ідеальний перший проєкт. Щоб зрозуміти, чи працює список покупок, не потрібно розумітися на програмуванні: ви вводите хліб, молоко та яйця, бачите загальну суму й позначаєте товари, щойно їх купили. У результаті вийде те, чим ви справді зможете користуватися вже цього тижня.

Перш ніж відкрити будь-який AI-інструмент, допишіть ці три речення на папері або в нотатці. Це найважливіша навичка програмування в усій книзі: перетворювати побажання на конкретні правила.

1. Мені потрібно записувати… (наприклад: кожен товар, скільки штук мені потрібно і ціну однієї штуки).
2. Я хочу, щоб програма обчислювала… (наприклад: вартість кожного рядка і загальну суму всіх покупок).
3. Я знатиму, що програма працює, коли… (наприклад: два товари по 25 дають 50, а позначка товару як купленого не змінює загальну суму).

Крок 2: Створіть першу невелику версію

Перша версія — це один файл, який відкривається у вебраузері. Не треба встановлювати середовище програмування, немає ні сервера, ні входу в систему. Скопіюйте промпт нижче у свого AI-асистента (Claude, ChatGPT або подібного) точно так, як він є.

Допоможи мені створити мій перший простий застосунок. Я цілковитий початківець.

Створи список покупок в одному файлі з назвою pokupky.html, який я зможу відкрити у своєму вебраузері. Помісти всі стилі й увесь JavaScript у цей один файл, без зовнішніх бібліотек.

Я хочу вводити назву товару, кількість і ціну однієї штуки. Кнопкою товар додається до списку. Показуй вартість кожного рядка, а внизу загальну суму всіх покупок. Дай мені змогу видалити товар і позначити його як куплений. Позначка товару як купленого не повинна змінювати загальну суму.

Відхиляй порожню назву, некоректні числа, від'ємну ціну та кількість, що дорівнює нулю або менша. Приймай у ціні як десяткову кому, так і десяткову крапку.

Спершу коротко поясни план. Потім напиши повний код і точні кроки, як зберегти й відкрити файл. Поки що не додавай жодних інших функцій.

1. Скопіюйте код. Скористайтеся кнопкою копіювання у відповіді AI, щоб отримати весь код, від першого рядка до останнього.
2. Збережіть його як pokupky.html. Відкрийте простий текстовий редактор (Notepad у Windows, TextEdit у режимі простого тексту на Mac), вставте код і збережіть його як pokupky.html. Як тип файлу виберіть «Усі файли», а не «Текстовий документ».
3. Відкрийте його в браузері. Двічі клацніть файл або перетягніть його у вікно браузера. Ви маєте побачити свій список покупок, а не сторінку, повну коду.

Крок 3: Перевірте, що це не просто гарна картинка

Застосунок, який виглядає правильно, — це не те саме, що застосунок, який працює. Пройдіть цю таблицю рядок за рядком і порівняйте те, що бачите, з правильним результатом. Це ваш перший справжній тест.

Якщо якийсь рядок не проходить, поки що не виправляйте код вручну. Скажіть AI, який саме рядок не пройшов, що ви ввели і що побачили натомість, і попросіть виправити лише цю проблему.

Крок 4: Внесіть одну зміну самостійно

Тепер внесіть першу зміну, не доручаючи AI писати її за вас. Запитайте AI: «Де в моєму коді заголовок застосунку?» Він вкаже на рядок, який виглядає приблизно так: <h1>Список покупок</h1>.

1. Знайдіть заголовок. Відкрийте pokupky.html у текстовому редакторі й знайдіть рядок, на який вказав AI.
2. Змініть текст. Замініть слова між <h1> і </h1> власним заголовком, наприклад «Покупки на суботу». Не видаляйте кутові дужки.
3. Збережіть і оновіть. Збережіть файл, поверніться до браузера й оновіть сторінку. Має з'явитися ваш новий заголовок.

Потім попросіть AI пояснити ваш власний файл у трьох частинах, використовуючи ваш код як приклад. Ви побачите, що кожен вебзастосунок складається з тих самих трьох шарів:

Крок 5: Навчіть застосунок новому вмінню

Справжні програми ростуть невеликими кроками. Додайте одну нову функцію, а потім знову протестуйте. Надішліть AI це продовження в тій самій розмові:

Додай до мого списку покупок бюджет. Дай мені ввести суму, яку я хочу витратити. Показуй, скільки залишилося. Якщо загальна сума перевищує бюджет, показуй зрозуміле попередження із сумою, на яку я його перевищив. Усе інше має працювати точно так, як раніше, і покажи мені повний оновлений файл.

Ви створили, запустили, протестували й змінили справжній застосунок. Це ще не все програмування, але це цикл, який ви повторюватимете в кожному наступному уроці: чітко описати, дати AI згенерувати, перевірити за очікуваними результатами й змінювати по одній речі за раз.