Всем привет! Ни для кого не секрет, что ChatGPT, получившая развитие в прошлом году, уже активно внедряется в обиход разработчиков. Во время новогодних каникул я решил испытать новинку, и попробовать разработать совместно с ботом небольшое веб-приложение на базе Angular 17, учитывая, что сам фреймворк я до этого практически не изучал. Что из этого вышло, читайте далее.
1. Киллер-фича ChatGPT (GPT-4)
На написание данной статьи меня вдохновил следующий момент: возможность ChatGPT4 выдавать дизайн по небольшому скетчу. Изначально я ещё не знал, как будет выглядеть моё приложение, но нацарапал небольшой набросок желаемого на бумаге:
Далее я скормил его чат-боту, после чего он превратил эту наскальную живопись в следующую страницу:
Забавно, что надписи были заменены на иконки, тем не менее, бот прекрасно уловил суть и сам предложил стек: использовать React + Tailwind CSS. Однако, я транслировал данный код в TypeScript для Angular, т.к. собирался писать на нём. Начало было положено.
2. Идея для приложения
На днях мне на глаза попался бумажный каталог фотоаппаратуры. Подобные каталоги начали выпускаться сотни лет назад, в момент появления бумажной почты. И закончили своё существование примерно лет 10-15 назад, так как перекочевали в интернет-пространство (хотя, возможно, некоторые ещё выпускаются). Вот пример подобного каталога, который нашёлся у меня, и датировался 2014 годом:
В моём же случае, я решил сделать каталог товаров воображаемого предприятия, торгующего различной сантехнической и водопроводной оснасткой.
3. Генерируем тестовые данные
Для генерации тестовых данных ранее мне приходилось искать различные картинки и фото при помощи поисковых систем. Теперь же я попросил ChatGPT предоставить мне, для начала, 32 различных предмета, связанных с водопроводной тематикой.
Далее я использовал Stable Diffusion (UI Automatic1111) для генерации папки с изображениями для данных предметов. Можно также использовать встроенный генератор (DALL-E) в ChatGPT, но этот вариант показался мне забавнее. Для генерации использовано расширение "Dynamic Prompts". Оно позволяет выдать набор картинок по заданному списку. Результат:
Забавно, что сантехнический трос (Plumber's Snake) нейросеть отобразила в виде стальной змеи. Да и остальные предметы, скорее, напоминают гравицапу из фильма "Кин-дза-дза". Однако, примеры выглядят правдоподобно, красочно, поэтому я решил использовать их в дизайне.
4. Архитектура приложения
Архитектура задуманного мною приложения проста до безобразия, поэтому я схематически в вольной форме изобразил её на листе бумаги. У нас будет несколько страниц с переходами.
Приложение урезано - не имеет системы регистрации/авторизации, только лишь сам каталог, корзину и форму для отправки заказа. Сделано это ввиду того, что целью является не конкретное решение, а демонстрация процесса разработки такого приложения.
Как конечный продукт работы нашей программы мы должны получить накладную: кому из покупателей, сколько и чего требуется отгрузить из предлагаемых товаров.
5. Создаём страницы приложения и модели
В качестве дизайнера было решено положиться целиком и полностью на ChatGPT. Делается это подобным запросом в чат:
После чего собираем полученные кусочки. Я проделал данную процедуру для всех требуемых страниц. Либо можно использовать скетчи, как в пункте 1 статьи, если хочется порисовать.
Далее я запросил два data transfer object: для предмета из каталога и для заказа. Сеть выдала подходящие шаблоны, которые остаётся только скопировать и вставить:
6. Дизайн и презентация
Обычно при веб-дизайне сначала верстаются определённые отображения, затем на их основе пишется код. В нашем случае, мы тоже создадим файл с дизайном в Figma. Однако, мы сделаем наоборот: предложенный дизайн преобразуем в кадры. Делается это с помощью плагина html.to.design.
Плагин захватывает снапшоты веб-страницы из памяти отладчика, после чего сам расставляет элементы. Таким образом, готовый дизайн нашего будущего приложения выглядит примерно так:
Это первоначальный вариант дизайна. В ходе разработки некоторые элементы были расширены или переработаны. В итоге мы получаем .fig файл проекта.
7. Создаём тестовый каталог товаров
В данном случае нам, опять же, ассистирует ChatGPT. Я предложил каждому товару присвоить случайную цену от 1 до 100. После чего получил Excel CSV файл с товарами. Для тестов я преобразовал его в json-объект, чтобы имитировать ответ, поступивший с сервера в результате запроса GET /items:
Делается это на основании модели dto, предоставленного ботом ранее.
8. Пишем приложение Angular
Как известно, в последних версиях Angular (16, 17) модули были преобразованы в отдельные компоненты. А ChatGPT рекомендует код для старого формата. Поэтому в данном случае возникли некоторые затруднения, однако, решились они подгугливанием некоторых моментов в документации Angular. В целом, данный этап занял у меня больше всего времени, однако, значительно меньше по сравнению с работой в обычном поисковике. Вот пример того, как это происходило. Начал я с создания проекта, генерации шаблонов компонентов и сервисов. Это можно сделать и без ChatGPT:
После чего перешёл, непосредственно, к реализации сервисов и логики приложения:
В целом, когда я закончил разработку, в архиве чата остались следующие запросы от меня:
Как можно видеть, я уточнял некоторые моменты касательно отображения элементов. А также запрашивал шаблоны или заготовки для компонентов, которые мне нужны.
Я могу сравнить работу ChatGPT, скорее, с ассистентом - неким "Доктором Ватсоном". Он не знает контекст, однако, обладает эрудицией, и способен если не решить мою проблему сразу, то натолкнуть на мысль о том, как можно это сделать.
Также мне был предоставлен шаблон для накладной клиента, выполненный на обычных <td><tr>, тем не менее, имеющий опрятный вид благодаря дизайну от GPT.
9. Просим приложение Express для проверки сервисов
Для того, чтобы проверить своё приложение, я сделал запрос кода 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 включать в этот запрос не нужно, но я не стал делать отдельную модель для заказанных предметов ради экономии времени).
10. Выводы
Приложение, которое получилось сверстать с помощью ChatGPT 4, хоть и не идеально в плане дизайна, однако прекрасно справляется с возложенными на него задачами. В дополнение я русифицировал приложение, с этим не возникло никаких проблем.
Я могу заключить, что использование бота при вёрстке действительно сокращает время написания кода, позволяет избавить процесс от мест, когда приходится сидеть 3-4 часа в поисках одной какой-то функции из неизвестного ранее фреймворка.
Исходный код получившегося приложения можете посмотреть у меня на github:
Ссылка на репозиторий: https://github.com/ritsudo/gpt-generated-shop
Писал ritsudo, 4 января 2024 года специально для habr.com
