Модуль 3.

Возможности Tilda как

конструктора простых IT продуктов.
Тема 1. Для создания каких сервисов подходит Tilda.
Возможности, ограничения и сравнение с другими
конструкторами.
Модуль 3. Что будет в этом Модуле?

Для создания каких сервисов подходит

1 Tilda. Возможности, ограничения и
сравнение с другими конструкторами.

2 Личный кабинет в Tilda. Настройка,

возможности и ограничения.

3 Управление базой данных в Tilda. Кейсы

использования, настройка, ограничения.

4
Интеграция Тильды с другими сервисами.
Сценарии и возможности. Кейсы запуска
MVP продуктов с результатами.
Урок 3.1. Что будет в этом Уроке?

1 Обзор конструктора Tilda. Как он заменяет

код и обычную разработку по структуре.

2 Краткое сравнение Tilda c другими

конструкторами сайтов и веб приложений.

3 Преимущества и ограничения конструктора

Tilda.

4 Для реализации каких сервисов подойдет

Tilda?
О спикере
Кирилл Петров
Основатель агентства разработки без кода
«Cyberband» и No-code сообщества в
Telegram @cyberband_agency.

Ex Product owner в «Умназия», запустил

продукты «Финансовая грамотность»,
«Эмоциональный интеллект», «Умназия
Репетиторы».

Ex Стратегический консультант в «IBM»,

проекты в сфере банкинга и
энергетического сектора.
Часть 1
Часть 1. Обзор конструктора Tilda. Как он
заменяет код и обычную разработку по
структуре.
Почему важно понимать архитектуру сервиса?

1. Любой IT продукт это не только то, что мы

видим. От наших глаз скрыта логика работы
и движение данных. И нам нужно будет это
настраивать.

1. Без понимания технических основ сложно

создавать продукт даже без кода.

1. После подтверждения ценности MVP

придется пойти к разработчикам.
Архитектура IT продукта
Frontend:
● UI - пользовательский
интерфейс, дизайн
● Логика работы на
стороне клиента

Backend:
● БД. База данных
● Управление БД
● Админ. Панель
● Хостинг
● Безопасность
Frontend. Пользовательский интерфейс.

Структура и контент

Стиль и красота

Реагирование интерфейса
на действия пользователей
Пользовательский интерфейс в Tilda
Хэдер
Добавляем и переставляем блоки, +
формируя структуру / HTML Главный блок

+
Настройки Контент
“Настройки” блока = настройки
стилей / CSS

Текст 1 Текст 2 Текст 3

В “Контенте” блока заполняем +
текст + настраиваем логику Блок №7
переходов / HTML & JS +
Футэр
Zero blocks в Tilda
Для нешаблонных решений, главного блока, анимации можно использовать Zero
blocks, которые дают широкие возможности с точки зрения дизайна. Но нужно
настраивать адаптивные версии.
Пример
Пример. Реализация настройки frontend
части в конструкторе Tilda.
Backend. База данных и СУБД.
СУБД - совокупность языковых и программных средств, которая осуществляет доступ
к данным, позволяет их создавать, менять и удалять, обеспечивает безопасность
данных.
Прием данных в БД

База данных
Форма заявки

Форма заявки New № Имя Тел Цель

+ 1
Отправить заявку
2

4
Отправить заявку
5
Single page site. Возврат данных.
Single page site имеет один скелет структуры и дизайн страницы, куда подтягиваются
разные данные из БД в зависимости от запроса пользователя.

База данных Структура и дизайн стандартных Пользовательский интерфейс

повторяющихся карточек

Отдает данные Запрос данных

на фронт из БД
База данных и СУБД в Tilda
В конструкторе Tilda есть 4 варианта взаимодействия с Базой данных.

1. Tilda CRM. Прием заявок и заказов во

внутреннюю или внешнюю базу данных.
2. Личный кабинет. Регистрация и авторизация
пользователей в личном кабинете.
3. СУБД “Потоки”. Система управления базой
данных, предназначенная для ведения блога.
4. СУБД “Каталог товаров”. Система управления
базой данных, предназначенная для карточек
товаров.
Ограничения Tilda
Tilda может принимать данные во внешнюю Базу данных, но не может их оттуда
автоматизировано возвращать. Tilda может возвращать данные на фронт из
ограниченных БД, но не может их туда автоматизировано принимать.

Прием данных в БД Возврат данных на фронт

CSV
Пример
Пример. Базы данных и СУБД в Tilda.
API
API (Application Programming Interface) - программный интерфейс приложения,
позволяет связывать один сервис с другими.
API простым языком
API - это контракт, который предоставляет программа. «Ко мне можно обращаться
так и так, я обязуюсь делать то и это».

Обязуюсь: Условие Обязуюсь:

перевести деньги в передать машину
качестве покупки новому владельцу
машины

Обязуюсь: Условие Обязуюсь:

прислать данные отправить письмо
заявки с емейлом на указанный email
Кастомный API в Tilda
Кастомные интеграции настраиваются напрямую внутри платформы Tilda в
“Настройках сайта” и не требует дополнительных прослоек в виде сервисов
интеграции.
Кастомный API в Tilda
Настройка кастомной Письмо в Mailchimp
Форма на лендинге Тильда интеграции Tilda и Mailchimp
(в настройках Tilda)
Интеграция с помощью доп. сервиса
В качестве дополнительного сервиса для интеграции Tilda с другими платформами
можно использовать один из сервисов интеграции Integromat, Zapier, Albato.
Пример
Пример. Интеграция Tilda с другими
сервисами через API. Простой и сложный
пример.
Часть 2
Часть 2. Краткое сравнение Tilda c другими
конструкторами сайтов и веб приложений.
Конструкторы веб сервисов
Tilda - одна из самых простых реализаций MVP IT продукта.

1 Шаблонные блоки и ограниченные возможности

использования собственной базы данных.

2 Имеют большие возможности использования своих

внутренних БД и взаимодействия с внешними

3
Самый продвинутый конструктор: база данных,
гибкая настройка дизайна и фронтенда, настройка
логики работы сервиса.
Single page site
Single page site имеет один скелет структуры и дизайн страницы, куда подтягиваются
разные данные из БД в зависимости от запроса пользователя.

База данных Структура и дизайн стандартных Пользовательский интерфейс

повторяющихся карточек

Отдает данные Запрос данных

на фронт из БД
Сравнение

Дизайн Работа с Настройка Модули Русификация Легкость

базой данных логики работы интеграция изучения
сервиса

Шаблонные 4 ограниченные Максимально Кастомные.

простые и Да Легко
решения, но есть БД. Только прием Внешние - лучше
и zero блоки данных шаблонные через Webhook

Внутренние БД, Продвинутые, но Хороший модуль

Почти нет ограниченные Wix - да Средний
прием и возврат интеграции в
шаблонов, гибкая Webflow - нет уровень
данных на фронт Zapier и Integromat
настройка

Гибкая настройка с Внутренняя БД, Широкие Хороший модуль

Нет Очень
чистого листа, прием и возврат возможности интеграции в
сложно
долго и сложно данных на фронт настройки Zapier и Integromat
действий
Webflow. Frontend.
Структура / HTML Repeating Group Логика работы / JS Стили / CSS
Webflow. Управление Базой данных.

Webflow имеет хорошую

внутреннюю БД, в которую
можно принимать данные
и возвращать их обратно
на фронт.
Webflow. Интеграция.
У Webflow есть хорошие модули интеграции в Zapier и Integromat.
Webflow. Frontend, Airtable. База данных. Mailchimp, отправка
поступление заявки Получение данных email о принятии заявки

Сценарий в Integromat.
Отправка формы и возврат
данных на фронт

Возврат обновленного списка

заявок на фронт в Webflow
Wix. Repeating Group и БД.
Bubble
Bubble - самый продвинутый конструктор: база данных, гибкая настройка дизайна и
фронтенда, настройка логики работы сервиса. Для него нужно делать прототип.
База данных Логика работы Дизайн
Пример
Пример. Как устроен Wix, Webflow, Bubble.
Вывод
Для выбора платформы, постарайтесь ответить на следующие вопросы:

1. За что пользователь будет готов заплатить

вам уже сейчас?

1. Какой реализации будет достаточно для

начала? От какой автоматизации процессов
вы сможете отказаться на старте?

1. Стоит ли выбирать самое продвинутое

решение или вам достаточно функционала
простого конструктора?
Часть 3
Часть 3. Преимущества и ограничения
конструктора Tilda.
Tilda. Frontend.
Tilda дает нам возможность с помощью простых действий создавать фронтенд без
кода:

1. Настраивать структуру блоков и контент

1. Настраивать стили

1. Настраивать логику работы на стороне

клиента
Tilda. Личный кабинет.
База данных и СУБД в Tilda
В конструкторе Tilda есть 4 варианта взаимодействия с Базой данных.

1. Tilda CRM. Прием заявок и заказов во

внутреннюю или внешнюю базу данных.
2. Личный кабинет. Регистрация и авторизация
пользователей в личном кабинете.
3. СУБД “Потоки”. Система управления базой
данных, предназначенная для ведения блога.
4. СУБД “Каталог товаров”. Система управления
базой данных, предназначенная для карточек
товаров.
Ограничения Tilda
Tilda может принимать данные во внешнюю Базу данных, но не может их оттуда
автоматизировано возвращать. Tilda может возвращать данные на фронт из
ограниченных БД, но не может их туда автоматизировано принимать.

Прием данных в БД Возврат данных на фронт

CSV
Tilda. Кастомные интеграции. Часть 1.
У Tilda много кастомных интеграций с российскими сервисами, в чем ее большое
преимущество.
Tilda. Кастомные интеграции. Часть 2.
У Tilda много кастомных интеграций с российскими сервисами, в чем ее большое
преимущество.
Tilda. Сложная автоматизация.

Интересные интеграции с российскими сервисами

1 (например, Почта России, Яндекс.Такси), которые не
найдешь в зарубежных сервисах интеграции.

2 Простой модуль интеграции с самыми известными

мировыми сервисами.

3
Нет модуля интеграции. Интеграция настраивается с
помощью Webhook. Однако, возможности Integromat
позволяют настраивать крутые сценарии.
Tilda. Возможности.
1. Лендинг
2. Добавление в корзину
3. Оплата через сервисы приема
платежей
4. Настройка домена
5. Транзакционные письма (которые
присылаются после оплаты)
6. E-mail отбивки на отправки любых
форм и корзин
7. Личный кабинет с правами доступа
8. Форма регистрации и авторизации
9. Ограничение доступа к конкретным
страницам только авторизованным
пользователям
10. Прием данных во внутреннюю CRM
11. Передача данных во внешнюю базу
данных или CRM систему
12. Настройка СУБД для блога
13. Настройка СУБД для товаров
14. Подключение аналитики
15. Создание анимаций в дизайне
16. Мобильная адаптивная версия
продукта
Tilda. Плюсы и минусы.

Простая для обучения и сборки благодаря шаблонным блокам

Простая в части настройки баз данных, интеграций, личного кабинета.

Много кастомных интеграций с российскими и зарубежными системами платежей, аналитики,

отправки писем, базами данных, CRM системами.

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

На Тильде можно реализовать личный кабинет, собрать простые IT продукты для теста

Тильда не может автоматизировано возвращать или подтягивать данные обратно на фронт

Добавлять новые позиции в маркетплейс придется не автоматизировано.

Tilda. Стоимость.

500-750 руб/месяц
по ценам на 2020 год

*Есть бесплатный доступ с ограниченной

функциональностью
Часть 4
Часть 4. Для реализации каких сервисов
подойдет Tilda?
Что можно собрать на Tilda?

1. Визуально красивый лендинг (а

автоматизация и сам сервис на другой
платформе)

1. Онлайн магазин или e-commerce сайт

1. Простая образовательная платформа с

доступом в личный кабинет и оплатой

1. Упрощенный полуавтоматизированный
маркетплейс
Пример. Тест продуктов в Умназии.

Кейс: тест новых продуктов для

передачи уже подтвержденных бизнес
кейсов в разработку.

Стэк: Tilda, Google Sheets, Mailchimp,

CloudPayments

Доп-но: Bitrix, Gtm, GA, Amplitude,

Rick.ai, Google Optimize
Пример. Продукт “Умназия репетиторы”.

Кейс: запуск нового продукта в

момент старта самоизоляции и
перегрузки команды разработки.
Автоматизация для 3 ролей:
менеджеры, репетиторы, ученики.

Стэк: Tilda, Google Sheets, Mailchimp,

CloudPayments, Zoom, Google Optimize

Доп-но: Airtable, Integromat, Webhook,

SendGrid (Gmail), Gtm, GA, Amplitude,
Rick.ai
Пример. Маркетплейс Nogaps.

Кейс: MVP маркетплейса для

экономии времени и денег перед
подтверждением бизнес кейса.

Стэк: Tilda, Google Sheets, Unisender,

Тинькофф эквайринг, Reg.ru

Доп-но: Airtable, Zapier, Яндекс почта,

Telegram, YM
Пример. Стартап школа HSE Inc и Билайн.

Кейс: запуск продукта с партнером в

условиях ограниченности времени и
необходимости гибкости в части
внесения правок.

Стэк: Tilda, Airtable, Gmail,

CloudPayments, CloudKassir

Доп-но: Airtable, Integromat, Webhook,

Gtm, GA, Google Data Studio
Пример. Корпоративные челленджы.

Кейс: MVP нового продукта для

крупной компании для
подтверждения бизнес гипотезы.

Стэк: Tilda, Airtable, Integromat,

Webhook, Gmail, Chatfroma, Яндекс
почта, Reg.ru

Доп-но: YM, Mailchimp, Google Sheets

Что мы узнали?

1 Как Tilda заменяет код и обычную

разработку по структуре.

2 Cравнили Tilda c другими конструкторами

сайтов и веб приложений.

3 Составили список преимуществв и

ограничений конструктора Tilda.

4
Поняли, для реализации каких сервисов
подойдет Tilda, и рассмотрели несколько
примеров
Задание №1
Задание: Придумайте идею простого
сервиса, для которого нужен будет ЛК и
формат маркетплейса.

Опишите: а) что это за сервис, б) как он будет

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

Для создания каких сервисов подходит

1 Tilda. Возможности, ограничения и
сравнение с другими конструкторами.

2 Личный кабинет в Tilda. Настройка,

возможности и ограничения.

3 Управление базой данных в Tilda. Кейсы

использования, настройка, ограничения.

4
Интеграция Тильды с другими сервисами.
Сценарии и возможности. Кейсы запуска
MVP продуктов с результатами.
До встречи на
следующем уроке!