Liferay.ru

Liferay и Camunda

2025-12-07T09:47:45Z

На прошедшей недавно Liferay DevCon 2025 были проведены две живые демонстрации, посвящённые совершенно новому партнёрству Liferay и Camunda, и они действительно впечатлили. В демонстрациях были показаны не только точки технической интеграции, но и то, как оркестрация процессов с использованием искусственного интеллекта может изменить процесс адаптации, обслуживание клиентов, финансовые рабочие процессы и многое другое.

Во время сессий получилось сделать несколько фотографий. Они не самого лучшего качества (освещение на конференции + камера телефона = заранее прошу прощения!), но я надеюсь, что они всё же помогут передать суть. Обе презентации были записаны, так что, если вы их пропустили, у вас будет возможность посмотреть их (скорее всего, с гораздо более качественным видео).

Демонстрация 1 — Camunda + Liferay в действии

Представлено: Стефаном Визе, старшим техническим менеджером-партнером Camunda

Из серии «Хаос в корпоративной среде…»

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

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

…к чистой, упорядоченной архитектуре с использованием Camunda

Следующий слайд был контрастным. На этом изображении Camunda становится дирижёром с поддержкой искусственного интеллекта, обеспечивающим:

Никаких запутанных потоков данных
Централизованный контроль
Мониторинг в реальном времени
Простое управление изменениями
Четкое и логичное перемещение данных

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

Новые коннекторы Liferay

В основе партнёрства Liferay и Camunda лежит внедрение двух новых коннекторов Liferay в Camunda Marketplace:

Входящий коннектор — Liferay → Camunda (запуск процессов Camunda)
Исходящий коннектор — Camunda ↔ Liferay (чтение и обновление данных Liferay через безголовые API)

Исходящий коннектор особенно эффективен, поскольку он позволяет процессам Camunda изменять данные Liferay в процессе, превращая Liferay в полноценного участника корпоративной автоматизации.

Чат-бот с искусственным интеллектом на базе Camunda

Затем Стефан продемонстрировал нечто действительно выдающееся: веб-сайт на базе Liferay с чат-ботом с искусственным интеллектом, только этот чат-бот был не просто разговорным, он был ориентирован на процессы

Это был не обычный бот, который «задает вопрос → получает ответ».
Это был бот, который «задает вопрос → запускает бизнес-процесс → выполняет реальные действия → обновляет системы».

Он представил два сценария:

a. Подача заявки на автокредит

Стефан сказал чат-боту, что хочет взять автокредит на 15 000 евро.
Вот что произошло:

Liferay отправила сообщение в Camunda через входящий коннектор
Camunda AI перенаправила его в процесс выдачи кредита
Для процесса требовалось больше информации, поэтому Camunda использовала исходящий коннектор, чтобы попросить Liferay запросить данные у пользователя
После того как пользователь ответил, Camunda использовала данные и историю аккаунта для предварительного одобрения кредита
В Liferay было отправлено последнее сообщение: «Кредит одобрен, документы для электронной подписи уже в пути».

Все полностью автоматизировано.

b. Сообщение о краже кредитной карты

Затем Стефан сообщил боту, что у него украли кредитную карту.
Camunda:

Направил запрос в отдел обработки кредитных карт
Заблокировал карту
Выдал новую
Отправлены два обновления статуса для пользователя в Liferay

Реальные действия. Реальные обновления системы. Все через безголовые API.

Лучшие практики для PO&A

На последнем слайде Стефан поделился лучшими практиками внедрения PO&A (оркестровки и автоматизации процессов).

Мои выводы из демоверсии 1

Это была очень убедительная демонстрация. Если ваша организация уже использует Camunda, эти коннекторы позволят Liferay полноценно участвовать в сложных корпоративных процессах: либо в качестве триггера процесса, либо в качестве поставщика/потребителя данных внутри потока.

Демонстрация 2 — интеграция со стороны Liferay

Представлено: Давиде Микунько, инженер по продажам в Liferay

Вторая демонстрация прекрасно дополнила первую. На этот раз основное внимание было уделено тому, как разработчики Liferay создают решения, которые напрямую подключаются к процессам Camunda.

Сценарий

Игровая компания набирает разработчиков. Кандидаты подают заявки на сайте.

Ход действий:

Заявка создана в Liferay
ИИ проводит предварительную проверку
Если заявка слабая → отклонить
Если заявка хорошая → HR
Если заявка исключительная → менеджер по подбору персонала
HR или менеджер по подбору персонала могут одобрить или отклонить заявку

Все это дерево решений находится в Camunda.

Сведения о реализации в Liferay

Объект Liferay + действие с объектом → веб-перехватчик

Форма заявки на работу поддерживается объектом Liferay.

Действие после добавления отправляет веб-перехватчик в Camunda.
Это запускает бизнес-процесс в Camunda.

Camunda → Liferay через Headless API

По мере продолжения процесса Camunda использует исходящий коннектор для:

Обновить статус заявки
Установить флаги и состояния рабочего процесса
Отразить решения, принятые ИИ, отделом кадров или менеджером по подбору персонала

Когда Дэвид открыл средство просмотра объектов приложений Liferay, вы могли ясно видеть:

Отклоненные заявки
Заявки на рассмотрении
Одобренные заявки
Все данные автоматически обновляются Camunda

Это был момент «Ага!»

Ключевая идея заключается в следующем:

Liferay не просто запускает процесс в Camunda, Camunda может управлять Liferay.

Это создает мощную модель интеграции с обратной связью.

Что я узнал из обеих демонстраций

Эти демонстрации показывают, как на самом деле выглядит интеграция Liferay и Camunda:

1. Liferay → Camunda

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

Действия с объектами
Рабочий процесс Liferay
Клиентские расширения
События в сфере коммерции
Пользовательские триггеры
Все, что может вызывать конечную точку HTTP

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

2. Camunda ↔ Liferay (двунаправленное взаимодействие)

Исходящий коннектор Liferay позволяет Camunda:

Получение данных из Liferay
Обновление записей
Реализация бизнес-логики в DXP
Вынесение решений на информационные панели и в пользовательские интерфейсы
Завершение цикла автоматизации

Благодаря безголовым API-интерфейсам Liferay и оркестрации процессов Camunda становится возможным многое.

Заключительные мысли

Интеграция Liferay и Camunda открывает новые горизонты по использование бизнес-процессов в порталах. Стоит отметить что в Incomand эта задача давно решена за счет интеграции с Flowable (который, как и Camunda является форком проекта Activiti и предоставляет аналогичный функционал). При этом интеграция выполнена нативно, не требуется установки каких-либо дополнительных серверов или коннекторов.

Использование Liferay JS Global в локальной среде разработки/тестирования JS

2025-11-29T09:06:02Z

Сегодня на Liferay DevCon кто-то задал мне отличный вопрос:

«Как разработать и протестировать локальный пользовательский элемент (стандартный веб-компонент) при этом используя Liferay глобальный объект JS?»

Мы всё обсудили, и я намекнул, что напишу об этом в блоге. Поскольку я уверен, что другие столкнутся с той же проблемой… вот и всё.

Хорошая новость: это проще, чем вы думаете.

Всё, что вам действительно нужно, — это упрощённая версия объекта Liferay (с достаточным количеством API-интерфейсов, на которые опирается ваш пользовательский элемент), которую можно импортировать во время локальной разработки.

Ниже приведён простой файл Liferay.js, который я использую:

const Liferay = window.Liferay || {
 Язык: {
 get: (key) => {
 return key;
 },
 },
 OAuth2: {
 getAuthorizeURL: () => '',
 getBuiltInRedirectURL: () => '',
 getIntrospectURL: () => '',
 getTokenURL: () => '',
 getUserAgentApplication: (_serviceName) => {},
 },
 OAuth2Client: {
 FromParameters: (_options) => {
 return {};
 },
 FromUserAgentApplication: (_userAgentApplicationId) => {
 return {};
 },
 fetch: (_url, _options = {}) => {},
 },
 ThemeDisplay: {
 getCompanyGroupId: () => 20119, 
 getPathThemeImages: () => ", 
 getPortalURL: () => 'http://localhost:8080', 
 getScopeGroupId: () => 20117, 
 getSiteGroupId: () => 20117, 
 isSignedIn: () => false, 
}, 
 authToken: ", 
 вкл.: (_event, _callback) => {}, 
 запуск: (_event, _data) => {}, 
};

По умолчанию используется Liferay.

This is not the complete Liferay global object; Liferay’s real runtime includes many more fields and service APIs, but this stub is perfect for local development and testing for the component I was working on at the time.

I included only the pieces I needed:

Liferay.Language.get()
Liferay.ThemeDisplay fields for companyId, groupId, portal URL, etc.
Liferay.OAuth2 + Liferay.OAuth2Client
Event helpers (on, fire)
authToken

Если бы завтра мне понадобилось что-то вроде Liferay.Session.extend(), я бы просто добавил ещё одну заглушку в тот же файл.

Версия машинописного текста

Если вы используете TypeScript, вот версия, которую можно вставить в liferay.ts:

interface LiferayType {
 Language: {
 get: (key: string) => string;
 };
 OAuth2: {
 getAuthorizeURL: () => string;
 getBuiltInRedirectURL: () => string;
 getIntrospectURL: () => string;
 getTokenURL: () => string;
 getUserAgentApplication: (serviceName: string) => unknown;
 };
 OAuth2Client: {
 FromParameters: (options: Record<string, unknown>) => 
 unknown;
 FromUserAgentApplication: (userAgentApplicationId: string) 
 => unknown;
 fetch: (url: string, options?: Record<string, unknown>) => 
 unknown;
 };
 ThemeDisplay: {
 getCompanyGroupId: () => number;
 getPathThemeImages: () => string;
 getPortalURL: () => string;
 getScopeGroupId: () => number;
 getSiteGroupId: () => number;
 isSignedIn: () => boolean;
 };
 authToken: string;
 on: (событие: строка, обратный вызов: (...args: unknown[]) => void) 
 => void;
 fire: (событие: строка, данные?: unknown) => void;
}

const Liferay: LiferayType =
 (окно как любое другое).Liferay ||
 ({
 Язык: {
 get: (key: string) => key,
 },
 OAuth2: {
 getAuthorizeURL: () => '',
 getBuiltInRedirectURL: () => '',
 getIntrospectURL: () => '',
 getTokenURL: () => '',
 getUserAgentApplication: (_serviceName: string) => {},
 },
 OAuth2Client: {
 FromParameters: (_options: Record<string, unknown>) => 
 ({}),
 FromUserAgentApplication: (_id: string) => ({}),
 fetch: (_url: string, _options?: Record<string, unknown>)
 => {},
 },
 ThemeDisplay: {
 getCompanyGroupId: () => 20119, 
 getPathThemeImages: () => ", 
 getPortalURL: () => 'http://localhost:8080', 
 getScopeGroupId: () => 20117, 
 getSiteGroupId: () => 20117, 
 isSignedIn: () => false, 
}, 
 authToken: ", 
 on: (_event: строка, _callback: (...аргументы: неизвестны[]) => 
 void) => {}, 
 запуск: (_event: строка, _data?: неизвестно) => {}, 
 } как LiferayType);

По умолчанию используется Liferay.

Он окажется для вас очень полезным, поскольку содержит типобезопасное определение объекта среды выполнения, которого в Liferay нет.

Добавление недостающих заглушек в версию на TypeScript требует немного больше усилий.

Поскольку TypeScript обеспечивает соблюдение структуры, вам нужно убедиться, что ваш интерфейс соответствует реальному глобальному объекту Liferay или, по крайней мере, тем его частям, которые фактически использует ваш компонент. Это означает:

Соответствующие сигнатуры методов (например, какие параметры Liferay.OAuth2Client.fetch() ожидает)
Совпадающие возвращаемые типы
Включая все вложенные сервисы или пространства имён ваш компонент зависит от

Если вы допустите ошибку, ваш компонент может пройти локальную проверку типов, но при развертывании в Liferay будут возникать ошибки.

Так где же найти настоящие определения? Самый простой способ, который я нашёл, — использовать консоль браузера: Открыть DevTools → ввести Liferay → развернуть. Я знаю, это может показаться странным, но если посмотреть на исходный код Liferay, то можно увидеть, что JS-код разбросан по всему коду и объединяется во время выполнения, поэтому бывает сложно найти нужные фрагменты.

Вам не нужно копировать весь объект, достаточно того, что ваш компонент будет работать локально с соблюдением типобезопасности.

Подведение Итогов

Этот небольшой шаблон, простая заглушка Liferay.js (или liferay.ts) оказалась невероятно полезной для меня при создании локальных пользовательских элементов, которые зависят от глобального объекта Liferay.

Это позволяет мне:

Разрабатывайте и тестируйте локально на полной скорости
Не создавайте портал каждый раз заново
Используйте синтаксис ||, чтобы моя заглушка работала локально, но при развёртывании автоматически ссылалась на реальную window.Liferay заглушку

Кратко и ясно, но очень практично.

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

Адаптивная навигация в Liferay

2025-11-29T09:04:32Z

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

Сведения о Сеансе

Название: Адаптивная навигация в Liferay: мастер-класс по использованию адаптивных фрагментов меню

Когда: среда, 19 ноября, 13:50 по центральноевропейскому времени

Где: Главная сцена

Полную программу мероприятия можно посмотреть здесь:

https://events.liferay.com/event/DEVCON2025/agenda

Что охватывает Сессия

На занятии основное внимание уделяется рекомендациям, которые вы можете сразу же применить в своих проектах на Liferay:

1. Установка адаптивных фрагментов меню

Как получить их на торговой площадке Liferay и подготовить свою среду.

2. Интеграция меню в мастер-страницы

Настройка фрагментов для единообразной навигации по страницам и макетам.

3. Настройка поведения и внешнего вида

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

4. Доступность и удобство использования на мобильных устройствах

Навигация с помощью клавиатуры, рекомендации по использованию ARIA и шаблоны для корректной работы на маленьких экранах.

Почему адаптивные меню так важны

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

Ресурсы для Сеанса

Практическая рабочая тетрадь

Упражнения, использованные во время занятия

https://github.com/peterrichards-lr/devcon2025-a-мастер-класс-по-использованию-фрагментов-адаптивного-меню

Liferay Marketplace — адаптивные фрагменты меню

Предварительно установите фрагменты в свой экземпляр

https://marketplace.liferay.com/p/responsive-menu-fragments

Исходный код

Пример реализации этих и других фрагментов

https://github.com/peterrichards-lr/liferay-fragments/tree/main/responsive-menus

Присоединяйтесь ко мне на DEVCON 2025

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

Я с нетерпением жду встречи с вами в среду в 13:50 по центральноевропейскому времени на главной сцене.