📱 Разработка app в Replit (часть 1).

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

“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, поэтому +- я представлял, на какие костыли я могу наткнуться.

Вот первая пачка советов с моей стороны:

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

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

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

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

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

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

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

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

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

👍 - интересно, продолжай

#вайбкодинг #ai

📱 Разработка app в Replit (часть 2).

Это серия постов про вайб-кодинг, где я дам несколько советов, которые упростят вам разработку и сэкономят много десятков баксов. Вот здесь часть 1.

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

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

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

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

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

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

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

Более-менее

рабочий апп

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

от 300$

.

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

Например:

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

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

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

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

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

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

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

Итого, кому подойдет конкретно Replit:

1. Вы готовы выделить на свой MVP/рабочий прототип от 300$.
2. У вас есть какие-то тех. навыки или вы очень хотите их приобрести.
3. Вы не кодер и вы хотите разработку под ключ и готовы пострадать.

В следующий раз расскажу про инфраструктурные особенности: сборку для iOS, релиз в стор и так далее. Кроме того, нужно попробовать подключить Replit к Figma - такая опция есть, но я еще не пользовался.
Вот моя реферальная ссылка, есть вдруг надумаете что-то делать с Replit.

👍 - интересно, продолжай

Бустануть канал для разнообразных реакций.
#вайбкодинг #ai

🤨 Периодически заглядываю в канал Дена про продукты и метрики.

1 - Почитываю про собеседования на позицию продакта: какие компании что требуют от кандидатов; 2 - последить за мыслями молодого IT-поколения (мне таки почти 33).

Например, вот в этом материале про интервью в Plata Card Ден рассказывает про реджект на фоне отсутствия опыта АБ-тестов. Одна из рекомендаций - быть готовым рассказать о том, что у тебя уже есть такая-то верхнеуровневая база и ты готов во всем разобраться вместе с опытным коллегой на реальных задачках.

В Plata говорят, что лучше нанять умного и голодного джуна, чем опытного мидла.

🤨 Также Ден часто делится инсайтами со своих интервью. Вот тут, к примеру, про кусочек собеса с проверкой project-скиллов. Могу подтвердить, что на таких интервью нанимающему важнее проверить гибкость ума и вариативность решений кандидата, в том числе под давлением.

#взаимопиар