Как создать веб-приложение с помощью ChatGPT

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

Что может быть лучше, чем проверить это? Мы попросили ChatGPT создать простое веб-приложение с нуля. Вот результат нашего теста и шаги, которые вы можете использовать для создания веб-сайта с нуля с помощью ChatGPT.

Шаг 1. Создание схемы вашего веб-приложения

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

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

После использования подсказки выше, вот результат, который мы получили:

Вам нужно включить плагин «Show Me» в вашей учетной записи ChatGPT, чтобы создать блок-схему, подобную нашей выше. Ты можешь установить и использовать плагины ChatGPT всего за несколько шагов, хотя вам понадобится премиум-подписка.

Без плагина вы получите текстовый план или блок-схему в формате ASCII. Это все еще нормально. Даже без плагина ChatGPT должен предоставить четкий план приложения, как в примере ниже.

Шаг 2: Разделение чертежа на более мелкие модули

Теперь, когда у нас есть общая картина, мы обратились к ChatGPT за помощью в разделении приложения на более мелкие компоненты, которые мы можем разработать отдельно, а затем интегрировать для формирования полного веб-приложения. ChatGPT предложил разбить его на три составляющие:

1. Регистрационный модуль
2. Модуль входа
3. Модуль чата

У нас были и другие идеи, но цель здесь — позволить ChatGPT управлять кадрами.

1. Создание компонента регистрации

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

И вот результат:

Далее мы предложили ChatGPT создать компонент регистрации.

Хотя мы не включили поле пароля в процесс регистрации, ChatGPT поступил правильно, включив его в сгенерированный HTML-код. Мы скопировали код без каких-либо изменений, и вот как он выглядит в браузере.

Далее мы попросили ChatGPT сгенерировать скрипт регистрации PHP. Сначала нам предложили: «Напишите PHP-код для логики на стороне сервера для обработки отправки формы». Хотя сгенерированный скрипт работал нормально, в нем было много уязвимостей.

Не было ни хеширования паролей, ни обработки ошибок, и он был подвержен SQL-инъекциям — ChatGPT делал только самый минимум. Исправить это было относительно легко. Мы просто попросили ChatGPT «выявить все ошибки в только что сгенерированном коде, а затем использовать выявленные точки для оптимизации кода». После этого наш PHP-скрипт регистрации был готов к работе. идти.

Формулировка вашей подсказки имеет значение. Вы должны быть очень четкими и конкретными в том, что вам нужно от ChatGPT. Когда мы просто попросили его «исправить проблему с этим кодом», он не исправил большей части того, на что мы надеялись. Дополнительные рекомендации по написанию подсказок ChatGPT см. здесь. несколько мест, где можно научиться писать эффективные подсказки.

Далее мы попросили ChatGPT «Напишите код SQL для создания базы данных для данных, захваченных в скрипте PHP." Вот результирующий код SQL:

А вот таблица, созданная при выполнении SQL:

С настроенной базой данных мы попробовали нашу первую регистрацию, и она работала без ошибок.

2. Создание компонента входа в систему

Убрав компонент регистрации, мы взялись за компонент входа. Удивительно, но его было проще всего построить, несмотря на дополнительную логику управления сессиями.

Вот сгенерированная страница входа. Ключевым моментом является то, что он использует те же параметры цвета, что и страница регистрации.

После создания файла «server.login.php» в соответствии с инструкциями ChatGPT и добавления сгенерированного PHP-скрипта мы успешно вошли в систему без каких-либо модификаций или отладки.

3. Создание компонента чата

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

Мы запросили у ChatGPT предложения по разделению компонента чата, и он предложил создать три страницы:

1. Чат.php
2. Отправить-messages.php
3. Fetch-messages.php

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

Создание страницы Chat.php

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

После запуска сгенерированного HTML-кода у нас был интерфейс чата без поля ввода сообщения. Чтобы исправить это, мы просто предложили ChatGPT «перепишите код, включив в него поле ввода сообщения и кнопку отправки."Вот как сгенерированный код выглядит в браузере при втором испытании.

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

Создание страниц "send-messages.php" и "Fetch-messages"

Удовлетворившись интерфейсом, мы приступили к созданию скрипта для обработки логики чата. Чтобы иметь возможность отправлять и получать сообщения из базы данных, ChatGPT справедливо подчеркнул, что нам понадобится таблица «сообщения». Мы попросили чат-бота создать SQL для таблицы сообщений.

После создания кода SQL мы попросили чат-бота сгенерировать PHP-скрипт для обработки логики обмена сообщениями.

ChatGPT сгенерировал скрипт как для страниц send-messages.php, так и для страниц fetch-messages.php. Запустив оба скрипта, мы, наконец, получили первую ошибку (что, как ни странно, нас удовлетворило). Зайти так далеко в проект без отладки ни одной строки кода казалось слишком хорошим, чтобы быть правдой, несмотря на его относительную простоту.

Оказывается, ошибка была вызвана тем, что ChatGPT ввел проверку необъявленной переменной сеанса ($_SESSION['user_id']) в наш скрипт. Мы подозреваем, что это было результатом довольно длительного перерыва в проекте, в результате которого ChatGPT забыл некоторые контексты и имена переменных, используемых в проекте.

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

Тем не менее, мы исправили ошибку и развернули код. Мы зарегистрировались, вошли в систему и попробовали функцию чата. Хотя мы могли отправлять сообщения от одного зарегистрированного пользователя другому, цвет и расположение пузырьков сообщений были немного неправильными. Однако для приложения, на создание которого ушло 1 час 23 минуты, мы не будем судить его слишком строго.

ChatGPT: отличный помощник по программированию

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

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