Простая разработка сложных решений на вашем сайте: open source no-code инструменты на Drupal

Главные вкладки

Аватар пользователя Drupal Coder Drupal Coder 20 апреля 2023 в 19:23
1

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

Мы в Initlab активно осваиваем фишки no-code, внедряем их на свои проекты и на проекты наших клиентов.

В этой статье мы расскажем о no-code инструментах 

Drupal, их преимуществах и недостатках. Она будет полезна владельцам сайтов, разработчикам, и тем, кто хочет запустить масштабный проект со сложным функционалом, но пока не нашёл подходящей CMS.

Немного про no-code

Отметим важное: всё описанное будет полезно для масштабных проектов со сложным функционалом и перспективой развития. Большие интернет-магазины, новостные порталы, сайты с множеством личных кабинетов и т.д. Стандартные небольшие сайты могут попросту не нуждаться в том, что предлагает Drupal.

No-code — это подход, при котором задача решается визуальным  конструктором алгоритмов, процессов, обработчиков событий без написания кода. No-code инструменты в административной панели Drupal помогают решать сложные задачи без участия программиста. С готовыми шаблонами можно работать мышкой, не написав при этом ни строчки кода.  

И речь идёт не о готовых блоках для сайта, как в популярных конструкторах. No-code на Drupal — это отклик профессионального сообщества на потребность именно в сложном функционале. 

Как любое универсальное решение, no-code хорош для быстрого и недорогого результата. Он может медленно работать на проектах с большой нагрузкой или большим объёмом данных. Для подобного, как прежде, хорош опытный программист, который напишет индивидуальное, оптимизированное под конкретный проект, решение.

Но всё же, для большинства задач, no-code Drupal — отличная подмога.

Хотя у нас хватает грамотных специалистов, которые могут собрать кодом что угодно, мы всё же стараемся чаще пользоваться инструментами Drupal. Не мы одни идём этим путём — всё IT-сообщество так развивается, стараясь переиспользовать код и не изобретать велосипед. Готовые модули не нужно кодить и поддерживать, они ускоряют разработку и, самое главное, благодаря open source, весь труд, основанный на готовом коде, никуда не денется.

No-code, как правило — это арендуемые инструменты, работа с которыми проходит в облаке и в готовом виде передаётся со стороннего сервера к нам на сайт. Если завтра разработчик софта поднимет цены или решит уйти из России, деваться будет некуда — придётся доплачивать или прощаться. А фишка инструментов на open source в том, что вы полностью владеете результатами работы.

В недавней статье Дриса Байтаерта — создателя Drupal — звучит эта же мысль: пользователи и бизнесы должны иметь возможность владеть своими данными и кодом своих сайтов. Open source позволяет собирать решения из кирпичиков, которые у тебя никто не отнимет.

No-code инструменты Drupal и принцип их работы

ECA (Event — Condition — Action)

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

ECA — движок правил для Drupal 9+. Если вы работали с конструкторами чат-ботов или настраивали события в CRM вроде Битрикс24, скорее всего, вам знаком принцип работы ECA.

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

Пример конструктора чат-бота

ECA довольно новый инструмент. Мы распробовали его при создании собственного хелпдеска и остались настолько довольны, что начали понемногу внедрять на проекты наших клиентов.

ECA — панель управления

У ECA три профита: 

  • делать ECA-правила проще, чем кодить —  достаточно знать алгоритмы, а не программирование;
  • готовые алгоритмы надёжнее, потому что ты не работаешь с самописным кодом, где из-за одной ошибки всё может развалиться вплоть до падения сайта — как максимум написанное не сработает и нужно будет искать, как его запустить;
  • заказчик самостоятельно может конструировать акции, управлять доступами к материалам, настраивать рассылки и многое другое.

Операция в виде кода VS та же операция в ECA

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

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

Чтобы схема слева не превратилась в схему справа Smile

Итог. Самый очевидный плюс — лёгкость в управлении даже при помощи специалиста невысокого уровня. А это экономия и простота проверки гипотез. У инструмента есть сайт, который поможет обучиться премудростям работы с ним.

Views 

Для чего нужен: сконструировать запрос в базу данных, настроить фильтры по запросам, сортировать данные, конструировать отчёты.

Views — это конструктор запросов в базу данных. База данных (БД) — это место, где в таблицах хранятся (вот сюрприз) данные: статьи, товары в каталоге, отзывы, записи форума — то, чего могут быть тысячи экземпляров.

У каждой записи в таблице есть свои характеристики: у товара — артикул, цена, раздел каталога, у статьи — заголовок, дата публикации, автор. Всё это — ячейки в БД.

И вот я, как владелец сайта, формирую запрос: покажи мне товары из этого раздела каталога по вот этой цене. Views формирует запрос и отправляет мне нужные данные.

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

С помощью Views можно настроить динамический каталог, когда отображаются товары из раздела, в котором сейчас находится пользователь. И уже их можно фильтровать по нужным характеристикам. Это касается любых данных, которые есть в Drupal: статьи, новости, сообщения — что угодно.

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

Во Views есть удобный инструмент массовых операций с сущностями. Когда нам нужно снять условную сотню публикаций с сайта или перенести тысячу товаров с одного склада на другой, можно отфильтровать сущности по нужным нам свойствам, выделить их в выдаче и сделать что нужно — удалить/переместить/скрыть и т.д. 

Например, у нашего клиента 50 типов товаров, у каждого из которых 10 характеристик. Если сразу сделать для менеджера страницу для управления с готовыми фильтрами, на странице их будет 500 штук, чего не потянет ни один браузер.

Если сейчас нам нужно отобрать товары по производителю и по цвету, как сделать так, чтобы на странице были только они? Как построить такой интерфейс? Можно просто обучить менеджера пользоваться Views.

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

Если программировать для такой задачи специальный инструмент, на это уйдут сотни часов. А тут мы за 10 минут собираем Views, полчаса обучаем менеджера и готово.

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

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

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

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

Сбор каталогов или новостных колонок с помощью Views далеко не новинка — мы пользуемся этим ещё с Drupal 6.

Итог. Программировать подобное — сотни часов: интерфейс взаимодействия пользователя с каталогом, отображение отчётности и т.д. Ведь настраивать нужно не просто «выведи товары», а выведи картинку, заголовок, цену, кнопку «в корзину», расположи их в сеточку/табличку/списком. Благодаря Views это делается мышкой. 

ECK (Entity Construction Kit)

Для чего нужен: создавать типы сущностей с пользовательскими свойствами и управлять ими.

Звучит сложно, давайте разбираться.

Любые данные, которые в большом количестве «плодятся» в Drupal — страницы, товары, комментарии, пользователи — это сущности. А есть типы сущностей — то, как система Drupal «понимает», что за вид данных перед ней.

Условно говоря, описание товара, новость или статья — это всё текст с картинкой. Но поля и отображение в них совершенно разные. Именно для того, чтобы система их отличала друг от друга и нужна заморочка с типами сущностей.

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

При создании интернет-магазина, мы ставим модуль Commerce, и у нас появляются два новых типа сущностей: «продукт» и «вариация продукта». Инструмент ECK нужен, чтобы дополнять этот список.

С помощью ECK (Entity Construction Kit), конструктора сущностей, мы можем создать новый тип сущности, наделить его свойствами и дальше с этими сущностями взаимодействовать.

У типов сущностей есть набор характеристик и, как правило, страница, при посещении которой ты видишь сущность. То есть конкретный url, введя который в браузер ты попадаешь, допустим, на статью с типом сущности «статья». У неё есть поля «заголовок», «содержимое», «автор». Бывает так, что нам сущность нужна, а страница от неё — нет.

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

Что происходит благодаря этому:

  • в описание каждой ткани можно вносить информацию про цвет, материал, страну-производитель и любые другие данные;
  • в описании товара теперь можно просто выбрать готовую ткань из списка, а не дописывать информацию о каждой;
  • теперь мы можем отфильтровать каталог не просто по тканям, а по их свойствам: пользователь сможет увидеть вещи из турецких или китайских тканей.

То есть нам не нужна страница с описанием ткани, куда можно зайти и почитать, что «испокон веку вещи из хлопка символ мудрости и изящества» — ткань интересна нам только как набор свойств.

Ещё один пример. На сайте есть пользователи, в анкете которых есть поля: «город», «страна», «номер телефона», «опыт работы» и т.д. Каждое поле может содержать одно значение. И вот у нас задача — добавить поле «мессенджер», с двумя полями — тип мессенджера и логин, или вообще тремя — «должность», например. И мы создаём такую сущность через ECK, которая выглядит уже вот так:

И таких в мессенджере может быть сколько угодно, каждая из них — ECK сущность. 

Расширяем пример. Каждый пользователь на сайте — это профиль компании, допустим, туристической. Здесь у нас гиды, переводчики, транспортные компании, отели, магазины и т.д. И мы добавляем в профиле пользователя оказываемые услуги:

 

Жмём кнопку «Добавить» и заполняем доступные поля. Можно внести сколько угодно любой из сущностей, в каждой из которых будет свой набор полей.

  • Модуль ECK в Drupal автоматически создаёт в базе данных таблицы, нужные для хранения сущности и её полей, позволяет создавать, редактировать, отображать и удалять экземпляры сущности без написания кода программистом.
  • Сущности поддерживают мультиязычность и версионность.
  • Drupal позволяет гибко настраивать права доступа пользователей различных ролей к сущностям.
  • Все сущности Drupal легко доступны через веб-сервис, например, если вам понадобится интегрировать сайт с внешней системой для импорта данных, отдавать данные в мобильное приложение и т.д.
  • Модуль Views позволяет строить отчеты по любым сущностям и их полям.

И все это без написания кода!

Итог. Разумеется, кодить сущности и типы сущностей дольше, чем накидать мышкой в готовом инструменте. Благодаря ECK можно ускорить и упростить работу с сайтом.

Layout Builder

Для чего нужен: построить сетку/разметку любой страницы. 

Например, у нас есть страница товара: заголовок, картинка, описание, цена. Мы хотим видеть красоту: чтоб сверху заголовок, картинка и характеристика в две колонки, снизу описание по ширине, и ещё ниже — отзывы. По умолчанию всё это выводится в одну колонку-простыню, которую нужно раскидать по странице в соответствии с правильной сеткой.

Layout Builder помогает сделать грамотную вёрстку из 2-3-4-х колонок, внутри которых мы расположим нужные элементы. При этом Layout Builder уже позаботился об адаптивности — страница будет хорошо смотреться и с компьютера, и с телефона.

Этот инструмент доступен начиная с Drupal 8. Там есть шаблоны на уже упомянутые 2-3-4 колонки, соотношение которых прописано в процентах. Если по какой-то причине вас не устраивает распределение ширины-высоты, его можно перенастроить. Но большинству подходят готовые варианты.

Layout Builder может выводить любые блоки Drupal, в том числе динамически формируемые, из базы данных с помощью Views, а также блоки сущностей ECK.

Ещё один пример из нашего хелпдеска: страница проекта. Вот так легко можно собрать её внешний вид при помощи Layout Builder

Итог. Строить такую разметку вручную по HTML непросто: нужно следить, чтобы она не разъезжалась при масштабировании окна. Здесь всё посчитано, адаптивно и работает стабильно.

Кто может с этим работать?

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

В более сложных вещах, вроде ECA, начинающий разработчик или опытный пользователь Drupal способен освоиться, но при одном условии: человек должен понимать, что происходит «под капотом».

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

Преимущества no-code инструментов

Многие плюсы уже звучали в статье, но давайте соберём их в одном месте.

Проще. Сложный функционал, который раньше требовал десятки тысяч часов на разработку, отладку и тестирование, теперь доступен по нескольким кликам.

Безопаснее. Инструмент, в который упакован опыт Drupal-разработчиков со всего мира, более надёжен и менее уязвим, чем самописный код.

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

Недостатки

Код проще отладить. На текущий момент, есть куда больше инструментов для контроля качества кода и его исправления. Когда что-то идёт не так в no-code, порой непонятно, где искать проблему. Но мы не унываем: за каждым описанным инструментом стоит по команде, которая работает над развитием, ведёт поддержку своих детищ и помогает разобраться всем, кто столкнулся со сложностями. Постепенно весь новый опыт перекочует в инструкции и функционал самих инструментов.

Нет на старых версиях Drupal. Не будем перечислять поочерёдно, что где есть и где отсутствует. Чем новее Drupal, тем лучше. Девятка, а в идеале десятка, с радостью поработает с любым из этих инструментов. 

Не всесильно. Всегда можно выдумать что-нибудь эдакое, чего эти инструменты не могут и нужен будет старый-добрый код. Комбинаций человеческих хотелок — великое множество, а здесь всё-таки речь об универсальности и удобстве, которых, в большинстве случаев, достаточно. 

Заключение

No-code — закономерная ветвь эволюции системы управления контентом (CMF). В Drupal есть уникальные инструменты с открытым кодом, аналогов которых пока не наблюдается на других платформах. 

Если вы планируете громадный проект со сложной архитектурой и вам требуется высокая скорость прототипирования, добавления нового функционала для быстрой  проверки гипотез — от души рекомендуем вам Drupal. И совсем не потому, что команда Initlab может в нём что угодно, а с новыми фишками — ещё быстрее, чем раньше.

 

Комментарии

Аватар пользователя chelwolf chelwolf 30 мая 2023 в 14:36
1

Логичным развитием темы no-code была бы визуализация сборщика пакетов Composer, чтобы можно было делать все через интерфейс Drupal, в том числе редактировать фал Composer.json при необходимости.

Аватар пользователя VasyOK VasyOK 26 июля 2023 в 12:57

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

Аватар пользователя cosmos cosmos 6 сентября 2023 в 12:04

Не советую связываться с этим инструментом, как то убил день чтобы настроить выполнение задачи по крону + отправка письма. Доверие в стабильность работы каких то блок схем не очень,
один раз поймал зацикливание действий, не знаю что может быть если в этой цепочке что то не так пойдет. Там есть 2 GUI так вот с помощью стандартного так и не смог настроить хз не пашет и все,
только с помощью схем но такой вариант мне не понравился.
Потом еще самое главное в этих схемах мало настроек для акшенов и проверок,
для реальных задач этого мало.
Для обычного редактора настройка таких схем тоже не простая задача накосячить легко можно.
Потому не советую.