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

Шаг 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: Научите приложение новому умению

Настоящие программы растут небольшими шагами. Добавьте одну новую функцию и снова протестируйте. Отправьте ИИ это продолжение в том же разговоре:

Добавь в мой список покупок бюджет. Дай мне ввести сумму, которую я хочу потратить. Показывай, сколько осталось. Если итоговая сумма превышает бюджет, показывай понятное предупреждение с суммой, на которую я его превысил. Всё остальное должно работать в точности как раньше, и покажи мне полный обновлённый файл.

Вы создали, запустили, протестировали и изменили настоящее приложение. Это ещё не всё программирование, но это цикл, который вы будете повторять в каждом следующем уроке: чётко описать, дать ИИ сгенерировать, проверить по ожидаемым результатам и менять по одному за раз.