В этой статье я поделюсь своим опытом разработки в Replit - AI-тулзе для так называемого вайбкодинга. Расскажу, кому стоит пробовать эту платформу, и дам несколько советов, которые упростят вам разработку и сэкономят много денег и нервов.

“Build a working prototype of a feature that helps remote teams feel more connected. You have 45 minutes.”

Я работаю продакт менеджером в банках, темой вайбкодинга занялся из шкурного интереса. Можете почитать про кейс из Google на Medium. Мысль в том, что для тех же продакт менеджеров умение работать с AI-коробкой для решения продуктовых задач скоро станет таким же обычным требованием к вакансии, как знание SQL-запросов для аналитики или базовое понимание, как работать в Figma.

На рынке уже много софта для самостоятельной разработки продукта, у меня на слуху следующие: Replit, Cursor, Lovable. Я знал, что Replit предлагает разработку под ключ, поэтому решил попробовать именно его. До этого уже был опыт относительно успешной "разработки" телеграм-чат бота с ChatGPT4, поэтому +- я представлял, на какие костыли я могу наткнуться.

Как формулировать требования

Replit стоит $25 в месяц, но фишка в том, что вы очень быстро потратите внутренние токены и вам придется доплачивать за разработку сверх подписки. Обычное такое случается, когда вы начинаете работать с Replit в "творческом" режиме: сделай мне это, а теперь сделай мне то. С таким подходом далеко пойти не получится, и придется много платить.

Чтобы Replit начал отрабатывать свои деньги, нужно в буквальном смысле проработать с ним бизнес требования: подавать ему на вход ТЗ и архитектуру приложения. Очень похоже на то, как во времена системной аналитики я продумывал требования для разработчиков. В случае с AI рекомендую связку ChatGPT - коробку от OpenAI нужно просить:

• Расписать требования и постановку для back-end и в целом серверной части. Чем больше вы засунете деталей в GPT про ваши хотелки (в идеале - User Story Mapping, USM), тем лучше GPT справится с задачей проработки архитектуры приложения и, в частности, базы данных. Это сэкономит вам минимум несколько десятков $ в будущем.

• Расписать требования по accesability и нефункциональные требования.

• Расписать требования к дизайну, сгенерировать макеты (картинки) и на базе этих артефактов поставить технические требования для front-end. Говорят, Replit хорошо работает с макетами в Figma, но я не пробовал.

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

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

Вместе с тем из Youtube я стащил противоположный совет: сначала сгенерировать с AI UI/UX, который работает на данных-заглушках: нет никакого сервера, нет никаких реальных данных. Только экранные формы и ui-элемененты. Затем, когда целевой внешний вид будет готов, уже просить AI сгененировать архитектуру под него. 

С Replit я такое упражнение не пробовал, но, в целом, это тоже похоже на проработку продукта в реальной жизни: сначала вы работаете с дизайном над макетами, а потом приходите к разработке и шокируете ее своими хотелками. Однако в случае с Replit мне больше нравится подход из пункта 2, базирующийся на USM. В таком случае процесс разработки легче разбить на итерации и контролировать сроки/цену разработки.

Кстати, я приучил себя рассказывать разработчикам про наши с дизайнером discovery-процессы и показывать прототипы задолго до разработки, что в конечном итоге сильно помогало контролировать те же сроки. Про пользу вовлечения разработки можно почитать в Empowered Марти Кагана.

Если видите пользу в этой статье, подписывайтесь на канал автора в ТГ — «Сделай удобно», чтобы не пропустить другие материалы по теме.

Сколько это стоит

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

Оформляя подписку за $25, будьте готовы, что за эти деньги вы внедрите в апп +- 3 фичи, которые будут неплохо работать. 

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

При этом будьте готовы к галлюцинациям и багам: может пройти 4-5 итераций разработки, прежде чем вы получите результат. А за каждую итерацию, напомню, вы платите.

Например, я убил ~10$ просто на то, чтобы правильно работала кнопка Sign Out, которая должна убивать текущую сессию пользователя и обновлять экран.

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

Более-менее рабочий апп, который не просто прототип, а продукт с серверной частью, готовый к выкладке в стор и первой пачке юзеров, обойдется от 300$.

Replit - очень не user friendly для нетехнических специалистов. Вам придется работать с консолью разработчика в вашем браузере, чтобы читать логи (Console и Network вкладки) и разбираться в ошибках. 

Например:

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

• Мусорные запросы - фронт шлет на сервер по четыре одинаковых запроса, пока вы не отловите это вручную.

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

• Вам надо будет подключать аутентификацию и авторизацию и проверять, что у юзера_1 нет доступа к персональным данным юзера_2. В моем случае нашлась большая дырыща в безопасности.

• Если хотите, чтобы ваш пользователь загружал файлы/картинки в апп, придется самому поковыряться с так называемыми "бакетами". Но это не проблема, благо есть Chat GPT и Google-платформа для настроек.

• Вам надо будет тщательно провалидировать весь код на "информационно-безопасные" дыры. Делать это можно в связке с Chat GPT, запрашивая у того требования.

Чтобы сэкономить деньги, внедряя фичу, сразу просите логировать все клики / действия на экране. Это сэкономит вам время во время тестирования: если увидите ошибку или, напротив, не увидите никакого действия, у вас будет строчка в Console, объясняющая AI-разрабу, что произошло на фронте во время клика. 

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

Кому подойдет конкретно Replit

1. Вы готовы выделить на свой MVP/рабочий прототип от 300$. При этом вы понимаете, что код, написанный Replit, придется рефакторить после релиза и при масштабировании. Реального разработчика эта AI-штука не заменит.

2. У вас есть какие-то тех. навыки или вы очень хотите их приобрести.

3. Вы не кодер и вы хотите разработку под ключ и готовы пострадать.

Если статья оказалась для вас полезной — подписывайтесь на канал автора в ТГ — «Сделай удобно», чтобы не пропустить другие материалы по теме.