Создаём ИИ-приложение с помощью Lovable.dev и Supabase (всё на ваших глазах)

Для бизнеса всегда круто сделать MVP быстро, качественно и недорого. Но часто это проблемная задача. Программисты задерживают сроки, ломят цену, и кажется, что пройти путь от идеи до результата очень сложно. Но сейчас есть инструмент, который позволяет делать это максимально быстро, качественно и недорого, так ещё и без знания программирования. И этот инструмент называется lavable. В этом видео я пошагово покажу, как мы клонируем полнофункциональное веб-приложение, добавим в него AI функции и настроим вход для пользователей и опубликуем его в интернете с бесплатным доменом. Итак, что такое Lavable? Представьте, что вы просто описываете свою идею на обычном языке, и она на ваших глазах превращается в работающее приложение. Этот опыт пользователи называют vibe codдинг. И первое впечатление, честно говоря, безумные и невероятные. Главная магия и суперсила Lavable - это его способность генерировать невероятно красивый, современный и качественные пользовательские интерфейсы, используя под капотом популярные технологии, такие как React. Неудивительно, что этот стартап растёт с космической скоростью и оценивается уже в миллиарды долларов. Но прежде, чем мы погрузимся в процесс, я должен быть с вами честен. Это не волшебная палочка. У этой магии есть и обратная сторона. Lavable испытывает реально серьёзные трудности с реализацией сложной ээнд-логики, особенно с настройкой входа и регистрации пользователей. Многие пользователи жалуются на так называемый цикл ошибки сборки. Когда вы пытаетесь что-то исправить, а оно ломается ещё больше, сжигая ваше время и платные кредиты. Поэтому важно понимать, Lavable - это революционный инструмент для быстрого создания прототипов MVP и несложных сайтов. Но для создания сложных систем производственного уровня он пока не готов. Зная это, давайте посмотрим, как выжать из него максимум. Хватит теории. Переходим к практике. Наша сегодняшняя цель амбициозная. Мы попробуем клонировать известный AI-сервис для генерации голоса Eleven Labs. Посмотрим, насколько близко у нас получится подойти к оригиналу. Первым делом открываем браузер и идём на lavable. de Здесь всё просто. Нажимаем Signup и заходим через свой Google аккаунт. Итак, я уже сделал скриншот главной страницы 11 Labs. Теперь я просто перетаскиваю файл с картинкой прямо в интерфейс Lavable. Чтобы AI понял нас максимально точно, мы не будем писать запрос с нуля, используем небольшой лайфхак. Я иду в чат GPT и прошу его: "Ты эксперт по промтам для Lavable, помоги мне составить идеальное описание для создания приложения, которое является клоном 11 Labs. Оно должно сгенерировать речь из текста". Чат пти задаёт мне пару уточняющих вопросов и выдаёт подробный структурированный промт. Я просто копирую этот промт. Возвращаемся в lavable, вставляем наш прот и нажимаем generate. И вот оно начинается то самое vibe coding. Lavable анализирует скриншот и промт и пишет код. И через пару минут вуаля перед нами интерфейс, который выглядит практически идентичный 11 Labs. Это действительно впечатляет. Выглядит отлично, но пока это просто красивая картинка. Кнопки не работают. Давайте это исправлять. Lavable предлагает нам нативно подключить Supase. Это сервис, который даст нашему приложению базу данных и backend. Нажимаем Connect Superbase. Он перекидывает нас на сайт Supase. Если у вас нет аккаунта, он предложит создать его через GitHub. Далее создадим новую организацию, называем её там как наш новый проект и нашу базу данных. Готово. Lavable всё это видит. И теперь наше приложение связано с бэкэндом. Для генерации голоса мы будем использовать апи от Open AI. Я иду на сайт Open AI в свой аккаунт и создаю новый секретный ключ. Копирую его. Теперь в интерфейсе Lavable я нажимаю Add AP и вставляю ключ. Нажимаю Submit. Lavable безопасно сохранит этот ключ в базе данных Superbase, и он не будет виден в публичном коде. Пришло время проверить. Ввожу текст. Привет, мир. Э, выбираю голос и нажимаю generate. И да, голос сгенерировался, его можно прослушать и скачать. — Привет, мир. — Наше приложение теперь полностью функционально. Теперь добавим недостающие части. Страница истории. Я просто пишу в чат la lable. Создай страницу истории, где будут отображаться все сгенерированные аудиофайлы, сохраняя их в Superabbase. А он понимает, пишет SQL команды, и

через минуту у нас есть рабочая страница истории. Теперь аутентификация. Просим добавь страницу входа и регистрации для пользователя. Lavable добавляет страницы и мы можем проверить, что регистрация работает. А данные нового пользоваться появляются в нашей базе данных Superbase. Аналогично просим добавить посадочную страницу, точечное редактирование. Допустим, мне не нравится цвет кнопки. Я нажимаю на иконку edit. Кликаю на кнопку и пишу в чате: "Сделай эту кнопку оранжевой". И она тут же меняется. Это функция Select and Edit. Невероятно удобная для тонкой настройки дизайна. Далее финальный аккорд. Аэ, нажимаем кнопку publish. Lavable предоставляет нам бесплатный домен. И нажимаем publish. Ещё раз. Готово. Наш клон 11 Labs опубликован и доступен в интернете. Отлично, наш клон работает. Но что это значит для реального бизнеса? Давайте разберём два самых популярных сценария использования этого инструмента. То, что мы только что сделали, это и есть идеальный пример создания MVP или минимально жизнеспособного продукта. Для основателя стартапа это просто бесценно. Вместо того, чтобы тратить месяцы и огромные бюджеты на команду разработчиков, можно за один вечер проверить свою гипотезу, создав рабочий прототип и показав его первым пользователям или инвесторам. Рекомендация: используйте Lavable, чтобы максимально быстро запустить продукт. Но будьте готовы либо сохранить простоту приложения, оставаясь в рамках его надёжных возможностей, либо заранее закладывать в бюджет услуги профессиональных разработчиков, которые потом доработают сложные функции и укрепят безопасность вашего MVP. А теперь давайте представим, что вы не IT-стартап, а владелец уютной кофейни в центре города. Вам не нужен сложный клон, вам нужен стильный сайт для привлечения клиентов. Давайте сделаем это прямо сейчас в качестве вдохновения возьмём дизайн сайта кофейни. Нам даже не нужен скриншот. Мы просто чётко описываем задачу lavable. Создай стильный, современный и минималистичный сайт для городской кофейни. Например, с названием Urman Beans. Главная страница должна иметь большой качественный баннер с фотографией чашки кофе, заголовок Свежий кофе, яркие эмоции и кнопка Посмотреть меню. Ниже добавь три секции. А нас наше меню с четырьмя-пятью позициями и ценами, а также контакты с картой, адресом и часами работы. Нажимаем Generate. Lavable создаёт нам красивый сайт, который выглядит так, будто над ним работало дорогое дизайнаагентство. Но, конечно, нам нужно добавить свои детали. С помощью функции Select and Edit. Я кликаю на фото и загружаю изображение своего интерьера. Кликаю на пункты меню и вписываю свои позиции и цены. Кликаю на карту и вожу свой реальный адрес. Весь процесс занимает меньше часа. Снова нажимаем паблиш и сайт нашей кофейни готов принимать первых посетителей онлайн. Этот кейс идеально демонстрирует главную силу lavable. Он даёт малому бизнесу доступ к дизайну и технологиям высочайшего уровня за минимальные деньги и время. Итак, Lavable - это абсолютно революционный инструмент, который блестяще справляется с генерацией UI и созданием MVP. Он действительно демократизирует разработку и позволяет воплощать идеи в жизнь с невероятной скоростью. Однако его претензия название AI инженера полного стека пока остаётся амбицией. Платформа слаба в сложной логике, и её модель оплаты может быть дорогостоящей при отладке. Lavable - это лучший в мире инструмент первого шага, но он пока не может пробежать за вас весь марафон до финиша. Если Lavable сможет решить проблему надёжности последних 10%, он действительно может переопределить будущее разработки ПО. Надеюсь, этот разбор был для вас полезен. Если вам интересно, что можно ещё создать также без программирования, посмотрите наш ролик на канале, где мы создали Telegramбота для создания контента и подробно разобрали, как работает эта технология. M.