Создать сайт и приложение без кода: обзор инструментов

Инструменты no code сейчас используются как для создания MVP так и для полноценных продуктов и стоят во много раз дешевле команды разработчиков. Основатель Code breakers Аня Радзиевская и основатель академии #безкода Никита Наумов рассказали Паше Хегай что можно делать на no code и с помощью каких инструментов.

Ребята на вебинаре сообщества Heg.ai дали небольшой гайд по no code инструментам:

  • Как развивался no code и в каких случаях его использовать
  • Инструменты для создания прототипов
  • На чем создавать чат-ботов, лендинги и веб-приложения
  • Как автоматизировать процессы и работать в базами данных
  • В каких сервисах создавать свои полноценные приложения
  • Когда можно переходить в no code инструментов на написание кода

Что такое No-code?

No-code – это способ создания приложений с помощью специальных платформ, использующих методы drag and drop и визуального моделирования вместо написания кода. При этом код все равно существует, но вы с ним не взаимодействуете, а работаете только с визуальными элементами.

Создать сайт и приложение без кода: обзор инструментов

Чтобы освоить No-code вам не нужно быть разработчиком или иметь техническое образование, но нужно понимать как устроены IT продукты.

С точки зрения front-end нужно продумать логику интерфейса и дизайн. С точки зрения back-end нужно быть хорошим аналитиком, чтобы понимать бизнес-логику, внутренние процессы, и как все интегрируется. А также при создании сложных продуктов и работе с такими инструментами, как Bubble или Airtable, желательно понимать, что такое архитектура базы данных.

Развитие No-code движения

Понятие No-code появилось сравнительно недавно, но по факту он начал развиваться еще в конце 90-х, начале 2000-х годах с CMS (системы управления сайтами), например Wordpress — платформа для создания блогов, или Shopify — для создания интернет-магазинов. Причиной послужила большая потребность бизнеса самостоятельно вносить микроизменения в сайт, не обращаясь каждый раз к разработчикам.

По данным Product Hunt, за полгода 2020-го на рынке появилось в два раза больше продуктов, связанных с no-code разработкой, чем за весь 2019-й. Однако нужно учитывать, что сейчас на рынок выходит очень много продуктов, которые добавляют в свое название или описание no-code просто потому, что это модно.

Если посмотреть на сделки, которые происходят на венчурном рынке последние три-четыре года по данным Crunchbase, то можно заметить, что многие популярные no-code продукты занимают прочную позицию на рынке. Например всем известный Airtable поднял $170 миллионов долларов за 5 раундов инвестиций.

Что можно делать на no-code

При помощи no-code вы можете собрать большой спектр разных продуктов, например:

  • Полноценные маркетплейсы
  • E-commerce
  • SaaS’ы, несмотря на их сложность, но с ограничениями пока
  • Социальные сети
  • Мессенджеры
  • CRM и так далее

Кому нужен No-code?

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

Для стартап-проекта потратить 3 миллиона рублей на команду разработчиков – очень большая сумма.

Инструменты no-code стоят от 0$ в начале до 100-200$ в месяц в сложных случаях. При самостоятельной разработке на No-code, вы можете собрать полноценный маркетплейс за 60 долларов, или заказать проект всего за несколько тысяч долларов.

На конструкторах вы можете собрать практически все, что вам нужно. Продукт будет меняться, он должен пройти этапы эволюции, под каждый из которых можно найти удобный no-code инструмент.

Начинать стоит с создания прототипа

Прототип – это имитация взаимодействия с продуктом, проще говоря — это экран, который можно прокликать.

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

Figma и Marvel — для создания прототипа

Создать сайт и приложение без кода: обзор инструментов
  • Самый простой инструмент прототипирования для тех, кто далек от дизайна
  • Позволяет собрать полноценный customer journey map, который можно прокликать из готовых элементов
  • Провести коридорные исследования
  • Дает возможность делать прототипы под разные операционки от телевизора и ноутбука до телефона или Apple Watch
Создать сайт и приложение без кода: обзор инструментов
  • Имеет гораздо большую функциональность, чем Marvel, но прототипировать сложнее
  • Имеются свои классные уроки по работе в Figma

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

Создание лендинга: Tilda

Tilda – это очень просто и быстро:

  • Куча готовых блоков
  • CRM
  • Куча интеграций
  • Аналитика
  • Есть возможность даже дописывать код
  • Есть личный кабинет. Это не тот личный кабинет, который покажет вам историю заказов, но он дает доступ к контенту.

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

Создать сайт и приложение без кода: обзор инструментов

Система авторизации, смены пароля, отправки пароля на почту — все сделано за вас.

Если вы планируете делать веб-приложение, то задумайтесь над использованием чат-ботов на стадии MVP.

Чат-бот — порой хорошая замена мобильному приложению на стадии MVP

С точки зрения техники, чат-бот — это просто набор API в конкретном мессенджере, чтобы вы могли получать и отправлять данные пользователя.

Вам не нужно создавать идеальное мобильное приложение, чтобы раздавать заказы или получать лиды. Вы можете вполне использовать чат-бот в Telegram или других мессенджерах. Вариантов чат-ботов масса:

  • В мессенджерах
  • В чатах на сайте
  • Квизы — стали очень популярны на сайтах последние два года. Они увеличивают конверсию входящего трафика в лиды или покупки.

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

Автоматизация процессов

Все собранные через лендинг на Tilda или чат-бота заявки отправляются в другие инструменты и формируют базу данных.

Есть несколько платформ, которые позволяют интегрировать сервисы и продукты, которыми пользуются ваша команда и ваши клиенты, в единый сценарий. Три самые популярные платформы:

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

Создать сайт и приложение без кода: обзор инструментов

Можно интегрировать:

  • Лендинги
  • CRM-системы
  • Отправлять рассылки
  • Сохранять входящие файлы и так далее.

Все это в визуальном интерфейсе, в базовом тарифе стоит 9 баксов в месяц.

Простой и легкий сервис, который позволяет в красивом интерфейсе делать несколько шагов в сценарии.

Создать сайт и приложение без кода: обзор инструментов

Zapier не очень подходит для серьезной автоматизации, потому что стоит больших денег. Тот же самый сценарий, который будет стоить 9 баксов в месяц в Integromat, в Zapier будет стоить 69 баксов.

Этот сервис подходит для личного использования.

Создать сайт и приложение без кода: обзор инструментов

Там есть большое количество готовых сценариев, которые позволяют вам автоматизировать личное дело, например, чтобы фотографии из iPhone сохранялись в определенную папку на Google-диске. Или интеграции с системой умный дом, например, зажги мне лампочку в прихожей, когда приезжает Uber.

Базы данных: Airtable

AirTable – это конструктор простых визуальных баз данных. Скорее всего, он не заменит для вас полноценную базу данных, но поможет работать с данными во всех остальных случаях. Это серьезный конкурент Excel и Google Sheets. Он позволяет хранить данные в табличном виде и переделывать их по одному клику мышки в канбан и другие представления. Что он позволяет делать?

Создать сайт и приложение без кода: обзор инструментов
  • Может заменить CRM или хранилище данных, например, со склада
  • Может использоваться как полноценная база данных для простого продукта в некоторых случаях, например, подключая такую базу к Bubble (о нем речь пойдет чуть ниже)
  • Использовать преимущества реляционной базы данных без знания SQL.

Реляционная база данных — от слова «relation» («связь»). Внутри базы разные таблички, можно соединять друг с другом с помощью relation, например, увидеть все заказы вашего клиента в интернет-магазине.

Мобильные приложения

Есть два вида приложений. Первый сегмент, наиболее простой — это PWA, которые не скачиваются из магазина приложений, а добавляются иконкой на рабочий стол прямо с сайта (Progressive Web Application). И второй - это стандартные приложения из App Store или Google Play.

PWA, Progressive Web Application

Это приложения, которые вы устанавливаете при помощи QR-кода или ссылки. Если у вас - магазин по доставке еды или какая-то кафешка, вы можете напечатать QR код, чтобы посетители могли его отсканировать. Им откроется в браузере ваш сайт и они смогут сохранить его у себя на десктопе. Будет такая же иконка, как все остальные приложения.

Из-за комиссии и повышенных требований, которые выставляют сторы, многие переключаются на PWA, чтобы обойти это все.

Glide — конструктор веб-приложений

На конструкторе Glide вы можете уже сегодня собрать первое приложение. Какой у него функционал?

Создать сайт и приложение без кода: обзор инструментов
  • Вся его база данных сделана на Google Docs.
  • Вы можете передавать его при помощи ссылки или QR-кода
  • Можно собрать разные сервисы, например, доставку еды или кофе
  • Идеально подходит как MVP
  • В нем пользователь сможет создать заказ и отправить его, если сделать интеграцию с CRM-системой.

Adalo — конструктор мобильных приложений

Вторая часть приложений – те, которые скачиваются из сторов — App Store или Google Play. Они делаются немного сложнее, потому что существует много требований со стороны самих сторов, но даже для них есть свои конструкторы.

Один из них — Adalo.

Создать сайт и приложение без кода: обзор инструментов
  • Он позволяет создать back-end, базу данных и front-end.
  • Создав один раз приложение, вы можете загрузить его сразу и в один, и в другой store.
  • Базу можно подключать как внутреннюю, так и внешнюю.
  • Есть встроенная платежная система — Stripe. Многие инструменты, которые пришли к нам из США, имеют именно эту платежную систему.

После всех проверок и тестов, когда вы пришли к пониманию продукта, можно переходить на более сложные инструменты, например, Bubble.

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

  • Bubble - это full stack no-code платформа, в которой вы можете реализовать и front, и back, и базу данных.
  • Есть возможность расширять функциональность при помощи HTML или JavaScript.
  • У Bubble - огромное число плагинов из-за того, что разработчики, которые пользуются Bubble, сами добавляют ему функциональность. Они его расширяют и развивают.
Создать сайт и приложение без кода: обзор инструментов

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

Когда переходить с no-code на код?

Давайте резюмируем.

  • В первую очередь, хорошо сформулируйте гипотезу и создайте бизнес-процесс.
  • После этого сделайте прототип и проведите коридорные исследования, чтобы понять, какие инструменты вы могли бы использовать.
  • Затем, когда вы уже провели тесты, поработали с одной версией продукта и появилось понимание, какой у вас продукт и как его покупают — тогда переходите к более сложным инструментам
  • После того, как вы поняли, что условный Bubble не выдерживает нагрузку, постарайтесь использовать другие инструменты для увеличения сервера (например, подключить внешнюю базу данных)
  • После того, как вам и этого уже недостаточно, переходите к разработке.
  • Переход на код могут себе позволить далеко не все стартапы. Основной вопрос, прежде чем вы подумаете, чтобы перейти на код – действительно ли отсутствие кода что-то тормозит в ключевых и важных вопросах, которые влияют на прибыль компании? И зарабатывает ли ваш бизнес достаточно, чтобы себе это позволить?

И всегда задумывайтесь, для чего вы делаете те или иные действия. Не делайте разработку ради самой разработки. Всегда отталкивайтесь именно от задач. Разработка или no-code – это инструмент решения задачи, но не сама задача.

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

Никита Наумов — основатель академии #безкода . Они обучили уже около 300 человек. Также Никита создал стартап-школу, где учится уже больше 3000 человек и автоматизировал процессы скоринга заявок и документооборота в HSE INC. Создал одного из лидеров рынка чат-ботов в СНГ Chatforma в роли CPO. И запустил без бюджета два собственных стартапа Sound Funding и Sound Target.

Специализируется на автоматизациях в Integromat, создании чего угодно на Tilda и работе с данными в AirTable.

Никита Наумов
Никита Наумов

Аня Радзиевская — основатель Code breakers, направленный на развитие No-code в России: обучение, консалтинг, разработка. Также со-основатель проекта HeyAlex.online по прокачке разговорного английского с носителями.

Специализируется на маркетплейсных моделях бизнеса и запуске MVP продуктов, в особенности на No-code (Bubble, Tilda, Glide, Google Sheets, Airtable и др). В прошлом директор по продукту в Blizkie.ru, продакт менеджер в Qlean и Яндекс. Работала в США, где сейчас и живет, принося лучшие практики No-code с западного рынка.

Анна Радзиевская
Анна Радзиевская

Больше статей по стартаперской тематике от участников сообщества читайте в нашей колонке на vc.ru. А также тема нетворкинга, инвестиций и развития продуктов раскрывается в наших блогах в Инстаграм и Телеграм.

3131
32 комментария

Если честно, статья чушь и перечень платформ. Никак не решает вопросы стартапов.

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

Такое ощущение, что массово начали продвигать какую-то хрень и неправильное видение MVP. Массово стали писать о CMS, хотя они не имеют к этому отношения.

С некоторой натяжкой в ИТ проектах можно использовать CMS, но где в вашей статье главное?? Я говорю о минимальном продукте, который хоть что то делает. Лендинг со счётчиком это не минимальный продукт. Прочитайте определение MVP.
В чем решение проблем клиентов?? В чем функционал??

И уж тем более я не говорю про другие сектора экономик. Сделать лендинг для нового лекарства от короновирусу это не MVP. Сделать лендинг магазина для покупки нового беспилотника это не MVP.

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

5

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

2

Я не автор статьи, но один из ведущих этого эфира, так что попробую обьяснить свою точку зрения. Начнём с интерпретации материала:

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

Теперь, то, что MVP - это не про использование CMS, это вроде бы очевидно. MVP - это выполнение главного JTBD-сценария клиента (решение его боли) любым путём: хоть руками за красивой обёрткой лендинга, хоть с небольшой долей его (сценария) автоматизации, все зависит от конкретного случая, идеальной формулы MVP нет, согласны? Наличие навыков работы с различными no-code инструментами помогает человеку в среднем по больнице быстрее и дешевле запустить MVP, чем тому, у кого их нет (разработчиков исключаем из выборки, хотя они тоже ходят к нам учиться). Именно эту мысль мы хотим донести на таких эфирах и прочих выступлениях, а как делать именно свой MVP каждый участник уже решает сам 🙂

1

Если вдруг закроются перечисленные сервисы, вашему консалтингу тоже каюк.

2

Как и сотням тысяч, если не миллионам других продуктов, мы в хорошей компании 🙂

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

2