ChatGPT-4 в помощь: используем AI в доработке простого iOS-приложения

5c23e6e19ed923d9142692eb9d62ce01.png

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

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

Для наглядности буду демонстрировать всё на открытом pet-проекте, чтобы вы видели работу новых функций GPT-4 в действии.

Подготовка ChatGPT-4 к работе

Для начала покажу полезные функции GPT-4, которые облегчают работу с ним. Одна из ключевых — «Индивидуальные инструкции».

8ad3f1e33dd36a0ab4750de010078b44.png

Они позволяют задать дефолтный контекст для работы ChatGPT-4. При создании запросов вам не придётся каждый раз указывать одинаковые параметры. Это сократит объём промптов и улучшит точность ответов.

58c8701f4632dcca5538e27bde60ab2a.png

В первом окне можно указать, например, следующие инструкции: «Меня интересует техническое решение задач, связанных с программированием на языке Swift. Ответы должны быть лаконичными и содержать краткое объяснение того или иного решения». 

Во втором окне лучше уточнить формат ответов: «Мне нужны примеры реализации задач или объяснение предоставленных кусков кода. Тон должен быть дружественным. Ответ должен объяснять принятое решение. Обращайся ко мне как Марк. У ChatGPT может быть свое мнение по поводу различных тем».

Не пренебрегайте разделом «Настройки и бета-версия». Он открывает ранний доступ к функциональности, которая находится в бета-тестировании и может оказаться крайне полезной в работе.

e774f4383d7afc0f134883010751cb21.png

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

Возможности GPT-4 я покажу на популярном открытом pet-проекте с GitHub, который использует API от newsapi.org: это приложение для iOS, которое отображает ленту новостей. Все дальнейшие примеры в этой статье будут основаны на нём: https://github.com/dkhamsing/news.

afbba9d035a23e31331da3fa0eadf2b3.png

Работа с терминалом

ChatGPT-4 неплохо справляется с базовыми задачами в терминале. Для начала я попробовал установить с его помощью CocoaPods и подключить библиотеку SnapKit для оптимизации вёрстки UI-элементов. Попросил GPT расписать все шаги:

30369bef36d2d8f6935d2c5322952a78.png136d58e7640524d9c4f6aa1656569ffc.png

Я использовал эту инструкцию и успешно добавил нужную библиотеку в проект. Теперь нужно убедиться, что все зависимости функционируют как положено и что с нашим проектом всё в порядке.

7538f4c379df026e4eb0c6b402889f3e.png

Чат-бот сгенерировал правильные терминальные команды, чтобы убедиться в корректной работе всех зависимостей:  

xcodebuild -workspace TheNews.xcworkspace -scheme TheNews -destination 'platform=iOS Simulator,name=iPhone 12' clean build, 

Теперь проект готов к дальнейшей разработке.

В заключение хочу подчеркнуть, что это только вершина айсберга. Возможности GPT-4 по работе в терминале этим не ограничиваются. Для iOS-разработчика он также может быть полезным в вопросах установки и обновления Ruby, управления файлами, взаимодействия с REST API, мониторинга сетевых соединений, генерации и проверки SSL-сертификатов и для решения многих других задач.

Анализ модулей и исправление ui

Давайте пойдем дальше и воспользуемся ранее подключенной нами функцией «Расширенный анализ данных». Поскольку проект не очень объёмный, выделим основные файлы приложения, загрузим их в GPT-4 и попросим его провести ревью кода.

Для этого перейдём во вкладку Explore на главной странице.

a74ba7a10e6be09a5ad0222b00dcdc84.png

В появившемся списке выберем Data Analysis. Данный модуль позволит нам одновременно загрузить в GPT-4 не более 10 файлов для анализа кода, хранящегося в них.

e26ddd4f877ea14ec2dc816f87dc61c1.png

После загрузки и анализа данных мы получаем следующий ответ от GPT-4:

4c97349363e9b44ff1f8f6f570e968d7.png

Неплохо для начала. Мы сами ещё не изучали проект, но ChatGPT уже подсказывает основные моменты, на которые стоит обратить внимание. 

Одно из самых верных замечаний — это необходимость разгрузить вью-контроллер и передать часть выполняемой логики во вью-модель. Я остался в том же чате и передал запрос GPT-4 с просьбой разгрузить контроллер, но искусственный интеллект путался в ответах и предоставлял нерабочие блоки кода. 

Одно из возможных решений в такой ситуации — создание нового чата и передача в него точного контекста для решения задачи. Передадим GPT файлы NewsViewController и NewsViewModel и добавим конкретный запрос.

4b3598916111f7a4721f876943e3a452.png

После общения с чатом и отправки порядка 5–7 уточняющих или корректирующих запросов удалось добиться следующего решения:

98197aea010a1b84abbe0fa32cb995eb.png

Мне удалось разгрузить NewsViewController, вынеся порядка 80–90 строк кода, отвечающих за логику обновления, в NewsViewModel. Сразу же можно подметить, что в решении реализация хранится просто в расширении к вью-модели, хотя можно было бы сделать, например, протокол, отвечающий за реализацию методов обновления таблицы и коллекции. Также методы setTableHandler и setCollectionHandler выглядят как братья-близнецы, и их можно было бы объединить в один вспомогательный метод. 

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

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

5002846c46218d4a5534afef6e51b3fd.png

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

e29cf9904d04d7ea2a1e4524e72647e1.png

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

9d7820c29da3074ea9c7708cf56bae3c.pnga3bf68828f004aee3e65251d3087b319.png

Далее GPT-4 предоставляет код, который позволяет добиться следующего эффекта:

04bcaa74d4589d87b85179241a2089be.png

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

Разработка новой фичи с помощью GPT-4

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

d0c43a2458a9368678c0a8b9819bcc82.png

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

Важно предоставить только необходимый контекст. Я не загружал ChatGPT лишней информацией, а сфокусировался на тех участках кода, которые действительно требуют модификации. Я понимал, что мне понадобится создать новый экран и обработать его в SceneDelegate (поскольку приложение использует именно его, а не AppDelegate). К тому же потребуются стандартные методы для работы с tableView. По этой причине я включил в запрос код класса NewsTableHandler, который специализируется на работе со стандартными методами таблиц. 

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

На конкретный вопрос мы получили вполне конкретный ответ:

2eb4ff879dd26802dfaf7071adc875cc.png

В этот раз от GPT мы не получили финальной рабочей реализации. Я создал как минимум шесть уточняющих запросов с различными просьбами. Например, просил «создать FavoritesViewController и написать его реализацию», «предоставить рабочую реализацию для NewsTableHandler», «использовать contextMenuConfigurationForItemAt», а также исправить краш на определённой строке кода. В конечном итоге от GPT мне удалось получить базовую реализацию таббара и отдельного экрана для списка понравившихся новостей.

b386eb3800c483f454e18ae5caf4d212.png

Попробуем добавить функцию добавления новости в Favorites путём долгого тапа на соответствующей новостной ячейке, а также возможность удаления новости из этого списка. Кроме того, открывать страницы новостей будем не в браузере, а в отдельной webView. Я дал ChatGPT конкретные инструкции и буквально через четыре-пять запросов смог добиться от GPT нужной реализации функционала.

bec1c432344698ee885ea5709b85de69.png8fde91afb87393f8b88a129cbcf19833.png

Для достижения результата потребовалось изменить всего два файла: SceneDelegate и NewsTableHandler, а также создать один новый файл — FavoritesViewController.

c3c186d2fa200d81da30bd21b39be701.pnge511b72390eae47b62a531986af0a9eb.pngc7ecc55b9621126dc50d3ef7778ac707.png

В целом, представленный код — хороший стартовый пункт для iOS-приложения, но есть области для улучшения. Основные замечания, которые сразу бросаются в глаза:

  •  дублирование кода при инициализации контроллеров,  

  • использование UserDefaults для хранения данных, что неэффективно для больших объёмов данных,  

  •  отсутствие разделения ответственностей в FavoritesViewController. 

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

Напрашивается вывод: ChatGPT без конкретного контекста предлагает нам решение «в лоб». Чтобы улучшить его, потребуется большее количество запросов и предоставление более полного контекста. 

Исправление вёрстки

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

Основной контроллер в проекте, NewsViewController, использует NSLayoutConstraint для вёрстки. Из-за этого запись получается довольно объёмной. SnapKit позволит оптимизировать данный аспект. Мы предоставим чату только код, связанный с констрейнтами, и попросим его отказаться от использования NSLayoutConstraint в пользу SnapKit. Также мы попросим сделать это максимально лаконично. 

Сейчас вёрстка находится в двух методах — таблицы и коллекции — и выглядит следующим образом.

P.S. Код, связанный с вёрсткой, выделен в красную рамку для удобства.

f8f92020a42fae4673d8e4aed1f98f40.png

В конечном счёте мы получаем довольно неплохой результат: констрейнты для таблицы и коллекции записаны в одну строчку соответственно.

445e6577c9be9eca0c3635da0d75cccd.png

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

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

02cdb913254738423e6827df96bf995a.png

Возвращает уже исправленный метод, использующий библиотеку SnapKit.

cb8eca506ce76fe86a96b9d00c552962.png

Запись выглядит довольно лаконично и воспринимается гораздо проще, чем раньше. Плюсы, которые мы приобретаем — мы можем подвергнуть рефакторингу констрейнты, не особо погружаясь в их реализацию. Это возможно при одном условии: если сложность вёрстки не слишком высокая. Это ускоряет и упрощает работу.

Тем не менее этого мало, и давайте протестируем GPT-4 на ещё более сложной задаче. В приложении используется ячейка AppleNewsCell, и всё с ней хорошо, кроме одного момента. При использовании данной ячейки в консоль Xcode прилетают ошибки каждый раз, когда ячейка переиспользуется в таблице.

59d2c323d7275b5e9a15fc9e34b8b833.png

Хранение данных об ошибках в консоли — не слишком хорошая практика, поэтому я попросил ChatGPT избавиться от этих ошибок. Как и в прошлый раз, передал ему код, связанный с вёрсткой, а также текст ошибки из консоли. 

Прошу GPT исправить эти ошибки и перевести вёрстку на добавленный фреймворк, и в итоге получаю код, который корректно отрисовывает ячейки, но выводит ошибки в консоль.

f673765a84bd5ee69aec67c05d25a2f9.pngbef4b3b6eb6e54f085e5ccc8ca4a2b17.png

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

37381b09dd1168fcc5516319a454da73.png

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

87032d449ee35c00da9b14f92c2f39d0.png

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

6e963a55851a8f347da3ab7cc78e7492.png

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

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

Но, глядя на ответы GPT-4, в голову приходят мысли о том, что AI может стать новым инструментом разработчика. Было бы неплохо начать осваивать его уже сейчас и находить способы полезного взаимодействия с ним.

Мой опыт: возможности и ограничения GPT-4 в разработке

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

Хотя ChatGPT и предлагает «решения в лоб» при реализации той или иной функциональности, такое поведение обусловлено контекстом, с которым работает GPT-4. Если мы декомпозируем задачу и будем предоставлять искусственному интеллекту небольшие и чётко сформулированные запросы с необходимыми для реализации задачи кусками кода, то шансы на успех сильно увеличатся. Также это помогает в решении багов или их диагностировании.

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

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

Если сравнивать персональные ощущения от работы с GPT-3.5 и GPT-4, то «четвёрка» гораздо быстрее и лучше улавливает контекст. Хотя главным отличием я бы всё-таки отметил возможности, связанные с заранее обозначенным дополнительным контекстом и более широким инструментарием «четвёрки». Этот аспект мы разбирали в главе «Подготовка GPT-4 к работе».

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

Заключение

В данный момент GPT-4 остаётся некой «чёрной коробкой», которую продолжают изучать пользователи. Никаких инструкций и очевидных прикладных решений по использованию ChatGPT нет, но это не мешает энтузиастам изучать и делать самые смелые предположения о том, как лучше применить его в своей работе. В этой статье я поделился с вами наблюдениями по взаимодействию iOS-разработчика и GPT-4; надеюсь, вы нашли полезные идеи и для себя!

© Habrahabr.ru