1С: Элемент – не только для витрин и кабинетов

Меня зовут Александр Волков, я технический архитектор.

• Опыт в 1СV8 – 10 лет,

• Опыт на 1С: Элемент – 3 месяца,

• Практикующий разработчик,

• Всегда ищу нестандартные решения стандартных проблем,

• Люблю технологии и все, что с этим связано.

Совокупность всех этих факторов привела к тому, что я получил доступ к 1С:Элемент еще на этапе бета-тестирования. Хочу поделиться нашим опытом погружения в технологию: как мы, как разработчики, ее осваивали и как интегрировали в бизнес. Про техническую часть особенно говорить не будем – статья скорее про наш опыт, полученные результаты и выводы.

Немного о нашей компании, чтобы была понятна проблематика и специфика: IN.DIGITAL – ИТ-подразделение Группы компаний «Инструмент», которая занимается производством и поставкой промышленного инструмента и техоснастки. Мы не франчайзи и не интеграторы, мы занимаемся inhouse разработкой, именно поэтому весь наш опыт построен вокруг производства.

Что такое 1С:Элемент с точки зрения фирмы «1С»

Цитата с официального ресурса:

«1С:Предприятие.Элемент - это облачная технология low-code разработки веб-кабинетов, порталов, браузерных и мобильных приложений. Встроенные механизмы технологии помогут легко управлять тысячами приложений. Используйте готовые решения часто встречающихся задач без написания большого объема кода.

Технология «1С:Предприятие.Элемент» расширяет границы применения системы «1С:Предприятие». В частности, она позволяет создавать приложения, ориентированные не только на бизнес-пользователей, но и на конечных клиентов (консьюмерские приложения)».

Это классическое демо-приложение (демо-CRM), знакомое каждому разработчику на 1С:Элемент. Внешне оно напоминает 1С: слева – стандартная панель разделов, справа – рабочая область.

О плюсах и минусах технологии

По нашему опыту, 1С:Элемент имеет такие преимущества, как:

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

• Минимальный порог вхождения для специалиста V8. Специалист, который может писать на V8, сможет легко начать писать на 1С:Элемент.

• Разработка корпоративных приложений. 1С:Элемент удобен не только для консьюмерских приложений, но и для полноценных корпоративных – inhouse. Яркий пример – «Кабинет сотрудника» на 45 000 пользователей.

• Удобство администрирования и разработки. 1С:Элемент включает в себя отдельные решения для администрирования. У вас все находится в одном месте – там вы делаете копии приложений, администрируете СУБД, создаете новые приложения и так далее.

• Модульная разработка и переиспользование компонент. Вы один раз пишете какой-то компонент, а дальше просто переносите его из формы в форму.

• Строгая типизация, которая делает код более прозрачным для разработчиков. Не нужно лезть в сам 1С:Элемент, чтобы понять, что произойдет – на входе и на выходе вы получаете типы, которые заранее определены. Также это помощь IDE, которая будет подсказывать возможные ошибки в процессе написания кода.

• Работа с GIT из коробки. Никаких хранилищ и захватов объектов. В консоли можно вести задачи – использовать панель администрирования как таск-трекер. На основе этих задач удобно создавать отдельные ветки в Git: под каждую фичу – своя ветка. Управление Git при этом полностью осуществляется прямо из консоли.

• Модульные компоненты и возможность написания библиотек.

• Адаптивный интерфейс. Не нужно писать отдельные версии под мобильные и десктопные устройства – технология сама адаптирует интерфейс.

К минусам 1С:Элемент на момент внедрения могут быть отнесены:

• Тарификация. Непонятна финальная стоимость владения технологиями.

• Отсутствие обратной связи с JS-компонентами. В 6-й версии эту проблему исправили – появилась возможность выполнять JS-код внутри компонентов и получать обратную связь. Но на момент начала внедрения это было серьезным ограничением.

• Ограничения стандартных компонентов – функциональные и дизайнерские. Многие отмечают, что дизайн в 1С выглядит довольно своеобразно. На самом деле его формируют разработчики и дизайнеры самой платформы – именно они задают, каким должно быть приложение. С одной стороны, это обеспечивает единообразие, с другой – заметно ограничивает простор для творчества.

• Документация. Многие примеры не раскрыты, некоторые листинги неправильные. Но в целом документация довольно полная.

Наш опыт погружения в разработку на 1С:Элемент

Курсы Учебного центра 1С. Курс «Разработка на технологии 1С:Предприятие.Элемент». Состоит из двух блоков – базовый и профильный. Дает минимальный базис для старта, длится около шести дней.

Курсы DevCon

Книга «1С:Предприятие.Элемент» (автор: Хрусталева). В ней описаны:

• Синтаксис и особенности языка,

• Сравнение методов платформы: для каждого элемента показано, как он реализован в 1С:v8 и как выглядит в Элементе,

• Практические примеры перехода с классической платформы на новую технологию.

Боевая задача №1. Присвоить штрих-коды всему парку техники и назначить ответственных. Ранее такой учет отсутствовал, поэтому задача была предельно простой.

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

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

Боевая задача №2. На производстве были две ключевые проблемы: во-первых, большое количество бумажной документации, а во-вторых – необходимость для операторов отходить от станка, чтобы, например, посмотреть чертежи или технологический процесс.

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

Возник вопрос с авторизацией: планшет работает в неавторизованном режиме, и к нему в теории может подойти кто угодно. Мы пришли к решению, что нам нужен свой «Кабинет сотрудника» и написали небольшой аналог такого кабинета на мобильной платформе.

Что было реализовано за первый месяц разработки:

• Обмен ключевыми справочниками с основной учетной системой: Сотрудники, Номенклатура, Ресурсные спецификации, Рабочие станции, виды рабочих центров;

• Интерфейс администратора с возможностью гибкой настройки, чтобы было легче управлять приложением;

• Интерфейс основного окна приложения;

• Прототип ролевой модели для авторизованных пользователей;

• Авторизация через второе приложение;

• Открытие техпроцесса изготовления,

• Универсальные компоненты (изменение картинки, меню, панель пользователя, прочее);

• Внутренний сервис баг-репорта;

• Бесконечный рефакторинг.

Универсальные компоненты в десктопном, планшетном и мобильном приложении

На рисунке показан интерфейс десктоп-приложения. Он состоит из нескольких ключевых элементов:

• Меню,

• Панель пользователя (ФИО, аватарка),

• Админ-панель.

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

Панель администрирования – это часть интерфейса, доступная только администраторам. Она предназначена для отладки и управления данными приложения. Интерфейс этой панели включает ряд кнопок. Все они – одинаковые по структуре: мы не рисовали каждую кнопку вручную. Вместо этого реализовали один компонент-кнопку, в который можно передавать параметры – название, картинку, описание. Технология сама рисует нужный вариант на основе этих данных.

Чтобы не обновлять приложение при добавлении кнопок, мы реализовали справочник «Команды разработчика». Он позволяет управлять кнопками из пользовательского интерфейса. На рисунке – форма динамического списка этого справочника. Элемент справочника выглядит вот так:

Каждый элемент – отдельная кнопка. В Элементе указывается ее название, изображение, порядок отображения и краткое описание для пользователя. Таким образом, при разработке нового справочника мы из пользовательского режима можем выдать, например, доступ к форме списка этого справочника.

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

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

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

Планшетное приложение нужно для того, чтобы оператор станка ЧПУ мог просматривать техпроцессы, чертежи и задачи, связанные с конкретным станком.

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

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

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

Как вы могли заметить, форма интерфейса идентична десктопной версии приложения за счет переиспользования компонентов. Мы отдельно написали:

• Меню,

• Форму панели пользователя,

• Представление пользователя.

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

На рисунке ниже – форма меню. В неавторизованном режиме пользователю доступна только команда «Войти». После нажатия на нее запускается процесс авторизации через наше мобильное приложение.

У пользователя есть 15 секунд, чтобы отсканировать код – либо телефоном, либо через наше же мобильное приложение-аналог «Кабинета сотрудника». После сканирования требуется подтверждение, и пользователь считается авторизованным.

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

Маршрутная карта – это бумажная печатная форма. При ее сканировании открывается электронная маршрутная карта.

Здесь оператор может:

• Посмотреть чертеж (раздвинуть пальцами, увеличить),

• Просмотреть технологию изготовления,

• Ознакомиться с ГОСТ, по которому изготавливается то или иное изделие,

• Посмотреть инструкцию по изготовлению, по переналадке станка.

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

Сообщение попадает к нам, может быть передано в Jira или другой трекер, и мы реагируем на инцидент.

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

• Главное меню с той же панелью пользователя (не переписывалась, используется тот же компонент);

• Авторизация и сканирование кодов;

• Форма подтверждения, на каком станке работает пользователь;

• Просмотр зарплаты, остатков отпусков и другой персональной информации;

• Настройки, где можно, например, поменять аватар (снова используется универсальный компонент изображения).

Проблемы, с которыми мы столкнулись

Отсутствие fullscreen-форм

В 1С:Элемент все формы по умолчанию открываются модально, с крестиком закрытия, без возможности развернуть их на весь экран – как это привычно в десктопных приложениях.

Решение этой проблемы оказалось довольно простым. В рамках платформы есть объект метаданных – клиентское приложение. Это, по сути, отдельный интерфейс. Мы начали под каждую форму, которую хотим отображать в полноэкранном режиме, создавать свое клиентское приложение. Таким образом мы получили не только красивое открытие форм, но и чистые ссылки с параметрами, без привязки к «автоматическим» формам, как это бывает по умолчанию.

Реактивность

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

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

Компоненты

Для разных приложений мы реализовывали одни и те же элементы. Например, панель пользователя – мы ее сделали для нескольких приложений. ли прелоадер – он нужен из приложения в приложение, вы сделаете его один раз, как внешний компонент, и переиспользуете.

Библиотеки

Это плюс-минус те же компоненты, которые могут кочевать из проекта в проект, аналог библиотекам в Java и Python. Библиотеки помогают решить очень много проблем.

Так, в нескольких приложениях один и тот же сервис общается с центральной базой – это наш «Кабинет сотрудника» и «Мобильный киоск». Они общаются по одному и тому же интерфейсу. Можно написать библиотеку, которая будет выполнять подключение и получение данных. Например, партнеры, номенклатура – те справочники, которые вам нужны практически в каждом приложении. Сделайте их в виде библиотек и просто подключайте.

Параметры сеанса

Мы столкнулись с тем, что в 1С:Элемент отсутствует привычный параметр сеанса. Есть параметры пользователя на панели администрирования, но вы ими не можете управлять. Вы можете получить только email, телефон и наименование (имя), а вам хотелось бы добавить пол, дату рождения и другие реквизиты.

Решение есть: создаете структуру «ПараметрыСеанса», описываете и кидаете из приложения в приложение.

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

Используйте «ПараметрыСеанса», «ПараметрыПриложения» и «ПараметрыПользователя» отдельно – это очень помогает.

Организация хранения

В 1С:Элемент нет предопределенного дерева метаданных. Если в «восьмерке» все структурировано – справочники, документы, регистры – то здесь вас встречает чистый лист, и организация хранения метаданных полностью ложится на разработчика.

Первое, с чем мы столкнулись – это отсутствие вложенных подсистем. Подсистемы есть, но вложенных – нет. Как оказалось, их можно заменить пакетами. Причем пакеты можно вкладывать друг в друга, создавая иерархию. Это и есть аналог вложенных подсистем: решение нестандартное, но рабочее.

Отдельный вопрос – структурирование метаданных. Здесь нет четкого понимания, как именно все организовывать. Мы пришли к тому, что удобно использовать паттерн MVC. Многие говорят, что 1С:Элемент – это веб-технология, в ней можно организовывать паттерны программирования. Если не знакомы с MVC, почитайте и попробуйте реализовать.

Ограничения нативных компонент

Как уже упоминалось, в 1С:Элемент есть ограничения нативных компонент. Один из ярких примеров – масштабирование изображений. Вы видели на одном из рисунков, как пользователь может увеличить изображение двумя пальцами. Однако в базовой поставке 1С:Элемент такой функциональности нет, даже в мобильном клиенте. Хотя для большинства это привычное поведение: открыл картинку – увеличил пальцами.

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

Пользователи

Очень полезное нововведение – списки пользователей. Раньше, когда вы создавали информационные базы в 1С, приходилось отдельно заводить пользователей в каждой базе: в первой, второй, третьей и так далее. Особенно это касалось служебных пользователей, таких как «Обмен», ExchangeBot, Bot и прочих – у всех одинаковые имена, но каждая база держала их локально.

Теперь все проще. Вы создаете, например, список «Служебные пользователи», добавляете туда ExchangeBot с нужным логином, паролем и токеном для REST-обмена. А затем подключаете этот список в любое приложение. То же самое и с обычными пользователями: можно создать список «Пользователи организации» и использовать его при разработке новых решений. Один раз настроили – и больше не нужно вручную создавать пользователей в каждой базе.

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

Невозможность определить тип клиента

Отдельным открытием для нас стала невозможность определить, работает пользователь через веб или мобильный интерфейс. Решили эту проблему просто: написали функцию, которая определяет тип клиентского приложения, опираясь на то, что мобильный клиент работает через определенный объект метаданных – клиентское приложение. Если это, к примеру, планшетное клиентское приложение, значит, используется мобильный клиент.

Что в итоге

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

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

Кроссплатформенность

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

• После разработки десктопной версии мобильная версия собирается в два клика – без переписывания интерфейса или изменений в дизайне.

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

Ускорение разработки новых функций

• Благодаря переиспользованию компонентов дальнейшая разработка становится быстрее.

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

Удобство администрирования

• Администрирование возможно даже с телефона: обновление кода, создание бэкапов и другие операции доступны из мобильной версии.

• Современный интерфейс, соответствующий стандартам.

К недостаткам технологии относятся:

• Непредсказуемая стоимость владения (размытая тарификация).

• Необходимость обучать новых разработчиков (хотя освоение технологии, на наш взгляд, не составляет большого труда).

• Отсутствие на рынке готовых специалистов: если вы используете эту технологию, придется обучать своих разработчиков.

Дополнительные материалы

Тем, кто хочет начать разработку, будет очень полезно посмотреть видео Александра Бабинока. Он бесплатно выкладывает массу обучающих роликов, и у него есть отдельная рубрика – «Повтори интерфейс», где он пробует воссоздать интерфейсы таких сервисов, как Ozon, Яндекс и другие.

Также рекомендую официальную Telegram-группу по 1С:Элемент и OpenSource-группу. Если вам понадобится компонент для масштабирования изображения (скейла), заходите на наш GitFlic – там есть наш компонент, он работает в любом проекте, и вы можете свободно его использовать.

*************

Статья написана по итогам доклада (видео), прочитанного на конференции INFOSTART TECH EVENT.