Я «навайбкодил» приложение расписания для конференции и сэкономил организаторам сотни тысяч на разработке. И вот как это было…
Привет, висичане! В этой статье я поделюсь опытом создания приложения расписания для конференции AHA!25 через ИИ, которое заменило привычный гуглщит, выдержало более тысячи пользователей, а стоило всего 20$.
Еще раз здрасте! Я — Саша, руковожу студией div block studio, где мы небольшой командой делаем маркетинговые сайты на Webflow для стартапов.
История началась с того, что Алексей, организатор конференций AHA и Матемаркетинг на одном из созвонов пожаловался: расписание, которое уже несколько лет висело в Google-таблицах, мягко говоря не нравилось ни ему, ни команде, ни участникам конференций.
А не нравилось то, как ощущается и выглядит этот гугл-щит. Не скажу, что прям “караул” как плохо, но пространство для улучшений явно было.
Вот, посмотрите, как выглядела та самая таблица с расписанием в гугле:
Хотелось что-то удобное: с админкой для управления докладами, с кайфовым таймлайном, с возможностью добавлять доклады в избранное, и с человеческой мобильной версией.
Какие варианты я рассматривал
- Кастомный шаблон на Webflow. Красиво, брендово — да. Но команде всё равно пришлось бы сначала собирать сетку расписания в Google Sheets, а потом передавать нам для переноса в Webflow. Вариант, на первый взгляд, лучше таблиц - но по итогу требовал слишком много ресурсов на поддержание. Копаем дальше.
- Найм full-stack разработчика. С нуля написать приложение, которое полностью бы отвечало всем требованиям — идеально. Правда это встало бы в несколько сотен тысяч а то и больше, плюс заняло бы пару месяцев разработки. Нам такое не подходило ни по бюджету, ни по срокам.
- Собрать MVP через ИИ. Как-то раз мне на глаза попался пост, где человек собрал какой-то проект через ИИ типа Cursor. Я не помню, что это конкретно был за инструмент, но он меня сильно вдохновил на то, чтобы тоже попробовать этот подход. Ну а почему нет?
Алексею я не говорил, что собираюсь попробовать собрать расписание через ИИ, чтобы не сесть в лужу, как говорится 😀…Тихонечко стал изучать тему: разбираться как все работает, какие есть инструменты, как составить грамотно запрос, и тд.
План был сделать готовую версию и уже ее показать, если все получится. Спойлер — все получилось (иначе бы я статью не писал).
Выбор инструмента
Ох, ребята… этих инструментов просто какое-то невероятное количество. Я же взял на тест Lovable, Bolt, v0, Cursor, и в итоге остановился на малоизвестном Adaptive AI.
Далее я объясню почему Adaptive, а пока вот что мне не понравилось в остальных:
- Устаревший UI. Это субъективно, но интерфейсы у остальных инструментов ощущались слабыми. Кнопки, переключалки, карточки спикеров, “нарезка” таймлайна, админские панели и другие элементы выглядели даже не “нейтрально”.
- Сломаный таймлайн. Абсолютно все тестируемые инструменты (кроме adaptive) криво сверстанный таймлайн. Не выровненные подписи времени ячеек, сами ячейки разъехавшиеся, по горизонтали скролл сцен не работал.
- Отсутствие части функционала. Например, отсутствовала админка (хотя в промте она была). То есть CRUD операции на доклады, сцены и дни были проигнорированы ИИ.
- Галлюцинации. Ну это уже классика. Добавление лишнего функционала когда не просят, и невозможность поправить существующий по 5-10 раз.
- Токены. Абсолютно все инструменты “сжирали” бесплатные токены буквально за 3-4 запроса. Bolt вообще один раз все токены за один запрос израсходовал. Это не давало нормально разобраться подходит ли инструмент или нет.
После недавнего обновления инструментов на Sonnet 4.5 - результаты стали в разы лучше у всех инструментов. И по визуалу и по функционалу. К сожалению, у меня не сохранились скриншоты изначальных вариантов, но поверьте на слово - там даже не было смысла дотягивать результаты.
А вот что зацепило в Adaptive AI:
- Отличный дизайн из коробки: у Adaptive AI дизайн сразу выглядел очень аккуратно и практически не требовал подгонок. Он вышел достаточно нейтральный - но это скорее плюс, чем минус. Дизайн не должен отвлекать.
- Админка под капотом: одним запросом Adaptive AI сгенерировал экраны и нужные состояния для управления сессиями, спикерами, сценами и днями — и всё работало. Ни у одного другого сервиса такого и рядом не получилось.
- Точность: Adaptive прекрасно отрабатывает запросы! Я очень-очень редко сталкивался с галлюцинациями у Adaptive, и не важно - надо ли поправить что-то в дизайне или добавить новый функционал.
Собственно, по совокупности дизайн + функционал + готовность + галлюцинации — Adaptive обошел для меня все сервисы. Плюс еще внутреннее ощущение, что да, вот тут я смогу докрутить все так, как мне нужно.
Как создавалось приложение
- Составление запроса. С помощью ChatGPT я подготовил бриф, в котором перечислил: какие экраны и состояния нужны, какие функции, что нужна мобильная адаптация, и тд. А еще приложил скриншот похожего инструмента, чтобы наверняка!
- Итеративная доработка. Скормив бриф Adaptive AI - на выходе получился очень близкий к финальному вариант. И это уже на первом этапе! Оставалось только чуть поправить там и сям, и добавить пару фич: возможность добавлять доклады в избранное и админский доступ. Это решилось за несколько запросов, без каких-либо серьезных проблем и косяков.
- Тестирование. Выпускать в прод неоттестированое приложение - самоубийство, поэтому я попросил Adaptive дать мне список тест-кейсов, и вручную все протыкал, а потом еще попросил его самого прогнать их. Неприятным сюрпризом стало то, что за неделю до старта, мы обнаружили, что приложение в России не открывается без оп (блокировка по гео, привет). Тогда я побежал за помощью в Discord Adaptive AI. К счастью, инструмент пока малоизвестный, и у меня получилось достучаться до обоих фаундеров, которые за пару дней решили проблему с блокировкой буквально за пару дней до конференции.
- Запуск. Как только все было пофикшено и протестировано - пришло время самого главного — самого расписания. Надо было добавить все доклады, всех спикеров, и правильно все расставить на таймлайне. Тут проблем не было, просто много ручной работы по “вбиванию” и сортировке докладов).
В итоге в дни конференции приложением попользовалось тысяча человек как минимум (вот аналитику-то я прикрутить не подумал. Исправлю в след версии) без вылетов, багов и другой ерунды!
Ключевые элементы приложения
Доступ администратора: Изобретать велосипед очень не хотелось, поэтому я использовал решение с авторизацией по инвайт-коду. Это позволило раздать доступы ответственным людям, а им без заморочек авторизовываться и менять доклады, спикеров, дни и сцены.
Редактор описания доклада: Хотелось дать организаторам максимум свободы при описании докладов, но создавать сложный редактор не хотелось. Поэтому в поле описание доклада добавили поддержку markup - он закрыл все потребности: заголовки, картинки, ссылки и т. п. Просто и элегантно!
Добавление в избранное: Участник жмакает на иконку сердечка рядом с докладом, и доклад попадает в личный список избранного на отдельной странице. А на самой странице “избранное” добавленные доклады автоматически выстраиваются по дням и времени. Работает это все без всяких регистраций и СМС - спасибо localstorage.
Динамический таймлайн: Карточки докладов отображаются ровно в тех ячейках, где они должны быть по времени. Взглянул - и понял, кто, где и во сколько выступает.
Адаптивный дизайн: Так как, почти все участники заходили бы с мобильных устройств. И тут Adaptive AI не оплошал - автоматически подстраивал таймлайн, карточки докладов и модальные окна под любой размер экрана. Что на ноуте, что на айпаде, что на мобилке. Кайф!
Темная и светлая темы: приложение автоматически подстраивается под системные настройки темы на устройстве пользователя. Я не знаю, как оно работает. Аdaptive добавил эту фичу без спроса - заботушка! :)
Модальные окна с деталями доклада: Клик по карточке доклада открывает оверлей-окно со всей информацией о докладе: саммари, спикерах, времени и зале. Участнику не нужно переходить на другую страницу - всё отображается прямо в контексте расписания.
Валидация докладов: Не супер очевидная, но полезная штука, когда заполняешь сетку расписания: приложение выдаёт ошибку, если время начала или конца доклада пересекается с уже созданным в том же треке.
Поиск по спикерам: На конференциях AHA и Матемаркетинг выступают около 100 спикеров, и чтобы ребятам было чуточку проще собирать сетку расписания, я добавил поиск по спикерам в форму добавления доклада. Просто вводишь имя/фамилию спикера и выбираешь его из списка, без всяких долгих поисков из списка. Мелочь, а хорошо так экономит время тем, кто составляет расписание.
Итого:
- Отзывы участников: На AHA!25, между докладами, я выцепил парочку человек и быстренько опросил их. Да, понятно, что на вопрос: “как вам расписание?” я слышал только положительный фидбэк, но был и действительно полезный: например, ребятам особенно понравилась функция избранного, потому что “составили список докладов, и по ним ходим”. Так же еще был комментарий, что хотелось бы чтобы приложение переключало таб дня конференции на текущий автоматически (уже сделали, кстати).
- Имидж: Возможно это моя догадка, но кажется, что для организатора любая мелочь и деталь имеет большое значение. Начиная от качества докладов, до бейджиков, того как вас встречают, вкусняшек, звука и расписания…
- Экономия: Вместо того чтобы привлекать дизайнера, разработчика и PM на несколько недель - один человек, немножечко вникший в ИИ (то есть я), сделал всё за пару недель. Не знаю, сколько бы стоила подобная штука в разработке, но думаю - не мало.
- Тестирование крайне важно: Если бы мы не проверили заранее, то приложение просто не запустилось в самый последний момент у ребят без спец. приложений. К счастью, команда Adaptive AI оперативно помогла снять все блокировки. Ну и на тестирование сценариев тоже не надо забивать, ведь отвалиться может то, что вы даже и не трогали. Adaptive хорошо сам себя тестирует, по моим наблюдениям.
- Чёткий запрос — это всё: Чем четче ваши запросы, тем точнее выйдет приложение. Ничего нового. Я писал все промты на английском, простым человеческим языком. В сложных случаях прогонял через ChatGPT чтобы переписать запрос как для разработчика. Тут все как в жизни: “без внятного ТЗ — результат ХЗ”.
- AI can do things: Я в ноукоде достаточно давно, но до сих пор удивлен, что получилось просто словами создать действительно рабочий инструмент. Да, все это с разными оговорками, но тем не менее в одиночку теперь можно делать целые продукты, на которые раньше требовались разные роли.
- Вендорлок: некоторые инструменты (Adaptive в их числе) хостят приложения у себя, что СИЛЬНО повышает риски. Ведь если что-то упадет у инструмента — у вас скорей всего тоже что-то отвалится… Это надо иметь ввиду. С другой стороны фронт, бэк и БД в одном месте и связываются проще.
- Разработка: Чем лучше вы понимаете, как строится классическая разработка - тем выше шанс, что на выходе получится хороший продукт. Важно хотя бы базово понимать как работает бэкенд, как фронт, API, и тд. Как минимум это важно для грамотного составления запросов.
Кстати, 20-21 Ноября будет проходить еще одна большущая конференция Матемаркетинг - для аналитиков, продактов и перворманс-маркетологов, так что если это то, чем вы интересуетесь/занимаетесь - приходите)
Фух, вот и все! Спасибо, что дочитали.
Надеюсь вам понравилась эта заметка, а может даже вдохновила пойти “повайбкодить” что-то для себя.
Если есть вопросы — пишите тут или мне в ТГ, с удовольствием отвечу и побеседую.
Ну и заходите ко мне на тг канальчик телеграм — там я пишу про дизайн и разработку сайтов/MVP с Webflow и ИИ, и делюсь моментами из жизни студии. А в нашем чатике отличная тусовка креативщиков, ребят с разработческим бэкграундом, и предпринимателей! И исполнителей найти можно, и кофаундеров (если сильно захотеть) :)