Всем привет! Ни для кого не секрет, что ChatGPT, получившая развитие в прошлом году, уже активно внедряется в обиход разработчиков. Во время новогодних каникул я решил испытать новинку, и попробовать разработать совместно с ботом небольшое веб-приложение на базе Angular 17, учитывая, что сам фреймворк я до этого практически не изучал. Что из этого вышло, читайте далее.
На написание данной статьи меня вдохновил следующий момент: возможность ChatGPT4 выдавать дизайн по небольшому скетчу. Изначально я ещё не знал, как будет выглядеть моё приложение, но нацарапал небольшой набросок желаемого на бумаге:
Далее я скормил его чат-боту, после чего он превратил эту наскальную живопись в следующую страницу:
Забавно, что надписи были заменены на иконки, тем не менее, бот прекрасно уловил суть и сам предложил стек: использовать React + Tailwind CSS. Однако, я транслировал данный код в TypeScript для Angular, т.к. собирался писать на нём. Начало было положено.
На днях мне на глаза попался бумажный каталог фотоаппаратуры. Подобные каталоги начали выпускаться сотни лет назад, в момент появления бумажной почты. И закончили своё существование примерно лет 10-15 назад, так как перекочевали в интернет-пространство (хотя, возможно, некоторые ещё выпускаются). Вот пример подобного каталога, который нашёлся у меня, и датировался 2014 годом:
В моём же случае, я решил сделать каталог товаров воображаемого предприятия, торгующего различной сантехнической и водопроводной оснасткой.
Для генерации тестовых данных ранее мне приходилось искать различные картинки и фото при помощи поисковых систем. Теперь же я попросил ChatGPT предоставить мне, для начала, 32 различных предмета, связанных с водопроводной тематикой.
Далее я использовал Stable Diffusion (UI Automatic1111) для генерации папки с изображениями для данных предметов. Можно также использовать встроенный генератор (DALL-E) в ChatGPT, но этот вариант показался мне забавнее. Для генерации использовано расширение "Dynamic Prompts". Оно позволяет выдать набор картинок по заданному списку. Результат:
Забавно, что сантехнический трос (Plumber's Snake) нейросеть отобразила в виде стальной змеи. Да и остальные предметы, скорее, напоминают гравицапу из фильма "Кин-дза-дза". Однако, примеры выглядят правдоподобно, красочно, поэтому я решил использовать их в дизайне.
Архитектура задуманного мною приложения проста до безобразия, поэтому я схематически в вольной форме изобразил её на листе бумаги. У нас будет несколько страниц с переходами.
Приложение урезано - не имеет системы регистрации/авторизации, только лишь сам каталог, корзину и форму для отправки заказа. Сделано это ввиду того, что целью является не конкретное решение, а демонстрация процесса разработки такого приложения.
Как конечный продукт работы нашей программы мы должны получить накладную: кому из покупателей, сколько и чего требуется отгрузить из предлагаемых товаров.
В качестве дизайнера было решено положиться целиком и полностью на ChatGPT. Делается это подобным запросом в чат:
После чего собираем полученные кусочки. Я проделал данную процедуру для всех требуемых страниц. Либо можно использовать скетчи, как в пункте 1 статьи, если хочется порисовать.
Далее я запросил два data transfer object: для предмета из каталога и для заказа. Сеть выдала подходящие шаблоны, которые остаётся только скопировать и вставить:
Обычно при веб-дизайне сначала верстаются определённые отображения, затем на их основе пишется код. В нашем случае, мы тоже создадим файл с дизайном в Figma. Однако, мы сделаем наоборот: предложенный дизайн преобразуем в кадры. Делается это с помощью плагина html.to.design.
Плагин захватывает снапшоты веб-страницы из памяти отладчика, после чего сам расставляет элементы. Таким образом, готовый дизайн нашего будущего приложения выглядит примерно так:
Это первоначальный вариант дизайна. В ходе разработки некоторые элементы были расширены или переработаны. В итоге мы получаем .fig файл проекта.
В данном случае нам, опять же, ассистирует ChatGPT. Я предложил каждому товару присвоить случайную цену от 1 до 100. После чего получил Excel CSV файл с товарами. Для тестов я преобразовал его в json-объект, чтобы имитировать ответ, поступивший с сервера в результате запроса GET /items:
Делается это на основании модели dto, предоставленного ботом ранее.
Как известно, в последних версиях Angular (16, 17) модули были преобразованы в отдельные компоненты. А ChatGPT рекомендует код для старого формата. Поэтому в данном случае возникли некоторые затруднения, однако, решились они подгугливанием некоторых моментов в документации Angular. В целом, данный этап занял у меня больше всего времени, однако, значительно меньше по сравнению с работой в обычном поисковике. Вот пример того, как это происходило. Начал я с создания проекта, генерации шаблонов компонентов и сервисов. Это можно сделать и без ChatGPT:
После чего перешёл, непосредственно, к реализации сервисов и логики приложения:
В целом, когда я закончил разработку, в архиве чата остались следующие запросы от меня:
Как можно видеть, я уточнял некоторые моменты касательно отображения элементов. А также запрашивал шаблоны или заготовки для компонентов, которые мне нужны.
Я могу сравнить работу ChatGPT, скорее, с ассистентом - неким "Доктором Ватсоном". Он не знает контекст, однако, обладает эрудицией, и способен если не решить мою проблему сразу, то натолкнуть на мысль о том, как можно это сделать.
Также мне был предоставлен шаблон для накладной клиента, выполненный на обычных <td><tr>, тем не менее, имеющий опрятный вид благодаря дизайну от GPT.
Для того, чтобы проверить своё приложение, я сделал запрос кода Node JS. Выглядел он так: "Create a simple Node JS Express app that handles any upcoming POST requests and logs their body to the console"
После чего мне был предоставлен готовый проект. Я запустил сервер (предварительно попросив ChatGPT добавить туда поддержку CORS), после чего мои заказы стали отображаться в консоли сервера:
Таким образом, обработав этот запрос на стороне Back-End мы можем наладить поставки товаров. На основе модели от ChatGPT нам приходит массив с товарами, их количеством, и данные клиента (конечно, imageUrl включать в этот запрос не нужно, но я не стал делать отдельную модель для заказанных предметов ради экономии времени).
Приложение, которое получилось сверстать с помощью ChatGPT 4, хоть и не идеально в плане дизайна, однако прекрасно справляется с возложенными на него задачами. В дополнение я русифицировал приложение, с этим не возникло никаких проблем.
Я могу заключить, что использование бота при вёрстке действительно сокращает время написания кода, позволяет избавить процесс от мест, когда приходится сидеть 3-4 часа в поисках одной какой-то функции из неизвестного ранее фреймворка.
Исходный код получившегося приложения можете посмотреть у меня на github:
Ссылка на репозиторий: https://github.com/ritsudo/gpt-generated-shop
Писал Kekovsky (ritsudo), 4 января 2024 года специально для habr.com