Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Привет, VC! Меня зовут Евгений Болотин, я co-founder 2T и приглашенный эксперт направления «Высшее образование» школы IT-профессий Skillfactory. И хочу поговорить о нейросетях. Снова. Хайп вокруг искусственного интеллекта от Open AI не стихает и переходит в практическую плоскость, и теперь исследователи наконец-то сосредоточились на практическом использовании ChatGPT в разных сферах знаний.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Мы с командой Skillfactory задали вопрос, а можно ли с помощью ИИ создать веб-приложение, не имея абсолютно никаких знаний? При этом потратить на задачу меньше времени, чем среднестатистический программист? Вместе с одним из студентов совместной с МФТИ онлайн-магистратурой «Наука о данных» мы провели такой эксперимент, зафиксировали весь процесс коммуникации с нейросетью и задокументировали результаты, выдаваемые ChatGPT. Результат нас приятно удивил! Почему? Читайте в статье.

Устанавливаем исходные данные

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

В качестве подопытного ИИ берем ChatGPT 3.5. Как утверждают его создатели, он гораздо лучше обрабатывает запросы по написанию кода, чем предыдущая версия.

Не так давно мы уже запускали подобный эксперимент. Но это было в узком кругу на воркшопе для студентов Skillfactory совместной с МФТИ онлайн-магистратуры «Науки о данных». На таких занятиях мы обычно разбираем самые свежие технологии и пытаемся применить их для реальных задач.

Тогда мы смогли в прямом эфире добиться хороших результатов, а сейчас я решил повторить опыт, используя схожие запросы к ИИ с минимальными изменениями и уточнениями.

Тут важно понимать, что эффективность ChatGPT крайне сильно зависит от формулировки запросов. А еще, даже на один и тот же вопрос искусственный интеллект может отреагировать по-разному.

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

Важно! Я предложил повторить сценарий хакатона одному из студентов Skillfactory с минимальным опытом в веб-разработке. Поэтому идея приложения, его фичи, архитектура, выбор технологий разработки и языка программирования полностью зависят от ИИ.

Заряжаем ChatGPT и поехали!

Сначала нужно задать нейросети контекст и разработать идейную составляющую будущего чата для владельцев экзотических животных. Поэтому первый запрос выглядит так:

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Сначала ИИ решил выдать что-то вроде гибрида социальной сети и Discord-сервера для общения. В целом, это тоже неплохой вариант, но мы попросили ChatGPT предоставить более развернутое описание особенностей.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

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

Теперь важный момент. Мы решили поинтересоваться у нейросети, сможет ли fullstack-разработчик создать MVP такого чата за 3 дня. Тут ИИ решил налить немного воды, но в общем ответил что-то вроде «сложно, но можно».

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Если быть честным, то одного спеца и три дня действительно маловато для MVP подобного проекта. Один только пользовательский интерфейс займет больше времени, если делать его на совесть, а не как попало. Чисто технически там нет ничего особо сложного, но для одного человека это все равно большой кусок работы.

Но это если писать его полностью вручную или искать на GitHub или Stack Overflow. Мы же с помощью ChatGPT постараемся справиться быстрее.

Самая большая проблема ChatGPT в контексте разработки и отладки кода — это ограниченный размер контекста. Для GPT 3.5 это 4000 токенов, а для GPT 4 — 8000 токенов. Это соответствует примерно 8000 и 16000 знаков текста соответственно.

Физически не получится загрузить в чат весь код проекта и попросить его отладить, провести рефакторинг или исправить баги. Но никто не мешает разделить код на составные части и провести все это для каждого отдельного блока.

С идеей и фичами вроде разобрались. В принципе информации от ИИ вполне достаточно, чтобы прикинуть, каким будет функционал готового чата.

Процесс разработки: ИИ чудит и кодит

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

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Здесь уже более подробный и конкретный ответ. Комбинация HTML/CSS и JavaScript для фронтенда — это классика, здесь даже комментировать нечего.

Для бэкенда тоже вполне неплохие советы. JavaScript с фреймворком Node.js, Python с Django и Flask или Ruby тоже активно используют в веб-разработке. AJAX и Websocket — тоже нужные технологии, которые позволяют отображать новые сообщения в чате без перезагрузки страницы.

Единственное, нейросеть не дала конкретного совета насчет БД. «Вы можете выбрать базу данных в зависимости от ваших предпочтений и требований» — так себе совет для человека, который ничего в этом не понимает. Впрочем, в условиях мы не просили, чтобы ИИ объяснял все этапы как для новичка, поэтому это можно опустить.

В целом, стек вполне неплохой. Хорошо, что ИИ добавляет объяснения, почему выбирает определенный язык или технологию. Для человека без опыта в разработке это будет полезным.

Итак, приступим к разработке. По советам нейросети формируем ТЗ, по которому нужно создать приложение. Тестировать код будем в среде разработки PyCharm.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Код есть, он работает. ИИ даже пишет комментарии к коду. Это полезно, если нужно разобраться в нем без знаний языка программирования.

Но в результате получилось немного не то, что нам нужно. Код не выводит сообщения пользователей в том же окне. А без этого приложение в принципе нельзя назвать чатом.

Попробуем исправить. Указываем на недостаток и получаем обновленный код.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Интересно то, что в этот раз нейросеть действительно прописала отображение сообщений в реальном времени, но при этом забыла сформировать само окно чата. Подобные ошибки делают ChatGPT довольно нестабильным инструментом для написания кода. Особенно, если его используют новички, которые не могут заметить ошибку и определить ее характер.

Да, по комментариям в теории можно разобраться, но это требует хотя бы минимального опыта работы с кодом. Для человека без знаний это будет сложно.

Сообщаем нейросети, что окна чата нет.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

В этот раз кажется, что все неплохо. Основной функционал есть, но во время тестирования проявилась еще одна проблема. Отправленные сообщения в чате не отображались.

Мы спросили об этом, и тут произошла магия.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

ChatGPT нашел ошибку, которую сам же сделал в прошлом сообщении, и исправил ее.

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

Наконец, нужно создать сервер, на котором будет работать наш чат. По рекомендациям нейросети, просим ChatGPT создать его на Python с использованием библиотеки Flask на порту 8080 – по-прежнему повторяем точь-в-точь за хакатоном.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Все готово. На этот раз без ошибок. Конечно, чтобы развернуть сервер и заставить все работать вместе, нужны кое-какие знания, но после часа работы мы уже смогли получить более-менее рабочий MVP нашего чата для владельцев экзотических животных.

В конце еще попытались добавить в наш чат звуковое оповещение о новых сообщениях. Этого не было на воркшопе, но нам захотелось немного разнообразить ТЗ.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Прошли по шагам, которые посоветовала нейросеть, — и все получилось с первого раза.

Пишем веб-приложение без минимальных знаний программирования вместе с ChatGPT

Вместо выводов: что я думаю об эксперименте

Эксперимент получился удачным, и у меня есть что сказать по этому поводу. Как самостоятельный и независимый инструмент разработки ChatGPT пока еще сыроват. Сейчас он больше похож на начитанного Junior-специалиста. Он уже умеет многое, но часто ошибается, иногда путает версии библиотек и придумывает несуществующие референсы. Он чаще кодит неправильно или не полностью, чем то, что нужно. Но при этом он эрудирован и вполне может решать даже комплексные задачи.

На данном этапе развития нейросетей специалисту, который работает с ChatGPT, все еще необходимы навыки программирования, чтобы увидеть ошибку в коде и правильно описать ее чат-боту для исправления. Нужен хотя бы уровень Middle или сильный Junior. Для человека, который совсем не разбирается в программировании, успешно выполненная комплексная задача будет скорее исключением, чем правилом.

С другой стороны, нейросеть уже можно считать отличным помощником для разработчика. Грамотный fullstack-программист может с помощью ChatGPT в несколько раз сократить количество времени и усилий, потраченных на чтение документации, проработку структуры кода или выполнение несложной рутинной работы. А это уже крайне перспективно. Студенты Skillfactory уже проверили это на хакатоне и на практических занятиях — анализу ChatGPT уделяем достаточно времени.

С помощью нейросети мы все-таки смогли сделать минимальную рабочую версию чата для владельцев экзотических животных — в тестовой среде все заработало. Остались более чем довольны и будем тестировать инструмент уже для реальных задач в любых сферах программирования и на любых языках.

Впрочем, хоть отрасль нейросетей и ИИ развивается огромными темпами, программисты могут спать спокойно. По крайней мере, в обозримом будущем.

А пока давайте обсудим наш эксперимент в комментариях. Ответим на все вопросы, спрашивайте!

3131
14 комментариев

В субботу в 18-00 провожу онлайн мастер-класс на тему "как написать приложение из говна и палок без кодинга, шмодинга и прочей хероты". Регистрация платная. Ченам профсоюза и детям - скидка. Сотрудникам полиции, так как они могут быть приравнены к детям - тоже скидка. Беременным противопоказано.

4

Ты сначала ремонт провала сделай!

Комментарий удалён модератором

Где кавычки, блеать? Уволю ))

а есть запись самого хакатона? любопытно, можно ли развернуть сервер с помощью чатгпт

Я так понимаю, весь процесс занял около часа-двух?