Создание веб-приложения без программирования

24 June

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

  • Администратор создает проекты и заводит новых сотрудников - менеджеров или исполнителей.
  • Менеджер создает задачу, в которой описывает найденную в проекте ошибку и назначает исполнителя, который отвечает за её устранение.
  • Исполнитель решает задачу и отдает ее на проверку.
  • Менеджер проверяет решение и, если дефект устранен, то закрывает задачу, иначе возвращает ее в работу.

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

Унифицированный интерфейс фреймворка Evado
Унифицированный интерфейс фреймворка Evado
Унифицированный интерфейс фреймворка Evado

Еще одним плюсом фреймворка Evado является открытое и бесплатное окружение. Для серверной части - это платформа Node.js и базы данных MongoDB. Клиентская часть выполняется в браузере.

Установка окружения и шаблона приложения

Переходим в репозиторий шаблона приложения Evado. Использовать шаблон можно создав собственной репозиторий в гитхабе или просто скопировав файлы к себе на диск. Скачиваем ZIP-архив шаблона приложения и распаковываем в папку /app.

Устанавливаем необходимое окружение - это Node.js (14-й версии) и база данных MongoDB (4-й версии). Для правки конфигурации и запуска приложения можно использовать IDE VisualStudio Code.

Переходим в папку приложения и выполняем установку зависимостей: npm install

Открываем папку с приложением /app (в дальнейшем пути указываются относительно нее). Находим папку config. Здесь находятся файлы конфигурации приложения.

Конфигурация будет выбираться в зависимости от значения переменной окружения NODE_ENV. Например config/development или config/production, которые наследуют настройки из config/default.
Конфигурация приложения
Конфигурация приложения
Конфигурация приложения

Открываем файл config/default и заменяем название приложения, базы данных и ключи подписи сесcии. Включаем русский язык интерфейса.
Затем открываем файл класса приложения
Application.js и меняем название на BugsApplication. Все! Основная настройка закончена.

Инициализация и запуск

Типовые скрипты различных действий находятся в папке console. Запускать их можно через командную строку или IDE. Для VisualStudio Code существуют две предзаданные конфигурации запуска:

  • Install app - установка и начальная инициализация.
  • Start app - запуск сервера приложения.
В режиме development происходит подробное логирование действий, что упрощает разработку и отладку, однако потребляет больше ресурсов сервера.

Выполняем Install App, а затем Start App. После запуска сервера веб-интерфейс доступен по адресу http://localhost:3000.

Приступаем к работе
Приступаем к работе
Приступаем к работе

Фреймворк Evado состоит из нескольких базовых модулей:

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

Модуль Студия

Первым делом нужно описать сущности приложения. Перейдем в модуль Студия. Для продолжения требуется выполнить вход в систему. При начальной установке был создан единственный пользователь Адам (конфигурация пользователей config/default-users и безопасности config/default-security), который наделен правами администратора. Авторизуемся под ним.

Класс Проект

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

Список классов приложения
Список классов приложения
Список классов приложения

Создаем атрибут Название, тип - строка, для имени проекта. Тип атрибута отвечает за тип данных, которые будут в нем храниться. Устанавливаем флажки Обязательный и Уникальный. Это значит, что значение не может быть пустым и должно быть уникальным среди других значений атрибута в данном классе.

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

На вкладке Главная указываем Шаблон заголовка, который отвечает за строковое представление объекта класса. Если шаблон не указан, то по умолчанию будет использован идентификатор объекта. Строковое представление проекта - это его название.

Класс Сотрудник

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

Создаем атрибут Пользователь. Указываем для него тип - системный пользователь. Устанавливаем флажки Обязательный и Уникальный. Сотрудник должен быть привязан к системному пользователю и только один сотрудник может ссылаться на одного и того же пользователя.

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

Класс Задача

Класс Задача описывает ошибку найденную в проекте, а также все сопутствующие данные об ее исправлении.

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

Создание связи между задачей и проектом.
Создание связи между задачей и проектом.
Создание связи между задачей и проектом.

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

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

После сохранения атрибута на вкладке Перечисления создаем допустимые значения приоритета:

  • Низкий
  • Средний
  • Высокий
  • Критический

Создаем ссылочный атрибут Исполнитель. Это ссылка на сотрудника, который назначен для решения задачи. Включаем команды Добавить и Убрать, чтобы можно было выбирать и убирать исполнителя из задачи.

Создаем ссылочный атрибут Автор. Это ссылка на сотрудника, который является автором задачи. Автор задается по умолчанию при создании задача и не может быть изменен в дальнейшем. Для этого ставим флажок
Только для чтения. Сохраняем атрибут и добавляем Значением по умолчанию сотрудника, который привязан к текущему системному пользователю: $user.meta.base.employee.

Создадим ссылочный атрибут
Документы. К задаче можно приложить множество документов. Для это ставим флажок Множественная связь. Указываем команды Добавить, Убрать, Создать, Редактировать.

Класс Документ

Класс Документ описывает файлы прикладываемые к задаче.

Создаем обязательный атрибут Файл, который будет хранить ссылку на ресурс в файловом хранилище. Создаем обязательный строковый атрибут Название для имени файла. Создаем текстовый атрибут Описание для описания файла.

Чтобы класс
Документ умел работать с файловым хранилищем нужно добавить соответствующее поведение. Переходим на вкладку Поведения.
Создаем новое поведение с типом
Файл. Ниже можно задать дополнительные параметры загрузки файлов. Указываем ограничение на максимальный размер 10 мегабайт. А также выбираем атрибут Название, в который будет автоматически записываться имя загружаемого файла.

Класс Комментарий

Для обмена сообщениями внутри задачи необходим класс Комментарий.

Первым делом создаем ссылочный атрибут Задача, ссылающийся на задачу, которой принадлежит комментарий. Атрибут обязательный и только для чтения. Значение по умолчанию можно не указывать, так как для ссылочного типа оно будет автоматически проставляться на объект из которого создается комментарий (при соответствующем ссылочном классе).

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

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

Класс Работа

Класс Работа отвечает за учет времени, потраченного на задачу.

Создаем обязательный ссылочный атрибут
Задача, который ссылается на задачу, к которой относится проделанная работа.

Затем создаем обязательный атрибут Длительность, который определяет в минутах количество затраченного времени. Тип атрибута - Целое. Также добавим правило проверки, ограничивающее допустимые значения длительности. Переходим на вкладку Валидация и добавляем валидатор Число - минимальное значение одна минута, максимальное 10000.

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

Обратные ссылки

Обратная ссылка - это значение связи, которое не хранится в самом атрибуте в отличие от cсылки, а выбирается по указанным значениям Ссылочного класса и Ссылочного атрибута.

Переходим в класс Проект и создаем атрибут Задачи, тип - обратная ссылка. Для того, чтобы найти по обратной ссылке все задачи относящиеся к проекту, укажем ссылочный класс Задача и ссылочный атрибут Проект, находящийся в задаче. Установим флажок Множественная связь, потому что результатом связи может быть множество задач, связанных с проектом.

Для класса
Задача создадим обратные ссылки на Комментарии и Работы.

Состояния

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

Список состояний задачи
Список состояний задачи
Список состояний задачи

В классе Задача переходим на вкладку Состояния. Создаем состояние Новое, это когда задача ожидает решения. Ставим флажок По умолчанию. Это значит, что при создании задаче будет назначено данное состояние.

Создаем состояние В процессе решения, это когда задача взята в работу исполнителем.

Создаем состояние Сделано, это когда задача решена исполнителем, но еще не проверена автором (менеджером).

Создаем состояние Закрыто - задача решена и проверена. Ставим флажок Режим только для чтения. Это означает, что объект в данном состоянии недоступен для изменений.

Для отображения текущего состояния задачи создадим атрибут Состояние. Этот атрибут дает доступ к служебному значению объекта. Кодовое имя служебных атрибутов начинается с подчеркивания.

Переходы

Переходы определяют пути смены состояний объекта и отражают бизнес-процессы приложения.

В классе Задача переходим на вкладку Переходы. Создаем переход Начать работу для начала работы исполнителя на задачей. Укажем начальные состояния - Новое и Сделано. Конечное состояние - В процессе решения. Также добавим условие доступности перехода - наличие у задачи исполнителя.

Создаем переход Завершить для окончания работы над задачей. Начальное состояние - В процессе решения. Конечное состояние - Сделано.

Создаем переход Остановить работу для прекращение работы над задачей. Начальное состояние - В процессе решения. Конечное состояние - Новое.

Создаем переход Отклонить решение для отклонения сделанного решения задачи. Начальное состояние - Сделано. Конечное состояние - Новое.

Создаем переход Закрыть для решенной и проверенной задачи. Начальное состояние - Сделано. Конечное состояние - Закрыто.

Создаем переход
Переоткрыть для возврата уже закрытых задач в работу. Начальное состояние - Закрыто. Конечное состояние - Новое.

Меню навигации

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

Добавляем пункт Проекты для вывода всех объектов класса Проект. Добавляем пункт Сотрудники для вывода всех объектов класса Сотрудник. Добавляем пункт Задачи для вывода всех объектов класса Задача.

Итак, все сущности созданы. Экспортируем метаданные в приложение через верхнее меню
Мета -> Экспортировать. Обратите внимание, что экспортировать можно в любое местоположение, но загружаться в приложение данные будут только из metadata/app.

Модуль Администрирование

Фреймворк Evado реализует систему управления доступом на основе ролей. Каждому пользователю может быть назначена одна или несколько ролей. Каждая роль имеет определенные разрешения на выполнение тех или иных действий. Каждое разрешение может иметь правило, определяющее доступно ли разрешение в данной ситуации (например с текущим пользователем).

Переходим в Безопасность -> Роли. Создаем роль Сотрудник. Добавляем ему разрешения доступ к модулю Офис и к загрузке файлов. Создаем роль Менеджер для сотрудников создающих и проверяющих задачи. Создаем роль Исполнитель для сотрудников решающих задачи.

Разрешения метаданных

Далее переходим в Разрешения метаданных. Здесь определяется доступ к сущностям приложения.

Список разрешений доступа к метаданным
Список разрешений доступа к метаданным
Список разрешений доступа к метаданным

Первым делом даем доступ сотруднику читать все данные. Разрешаем сотруднику создавать Комментарии, Документы и Работы.

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

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

Запрещаем сотруднику изменять состояние задачи.
Разрешаем менеджеру создавать задачи.
Разрешаем менеджеру изменять состояние собственных задач, добавляя правило
Автор.
Запрещаем менеджеру начинать, останавливать и завершать работу над задачей - это право исполнителя.
Разрешаем исполнителю изменять состояние назначенных ему задач, добавляя правило
Исполнитель.
Запрещаем исполнителю отклонять, закрывать и переоткрывать задачу - это право менеджера.

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

Далее переходим к Пользователям. Создаем нового пользователя - Сара. Ставим флажок Проверен и добавляем роли Сотрудник и Менеджер. Создаем нового пользователя - Боб. Ставим флажок Проверен и добавляем роли Сотрудник и Исполнитель.

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

Модуль Офис

Заходим под администратором в Офис и создаем сотрудников Боба и Сару, привязывая к соответствующим системным пользователям.

Выходим Адамом из системы и авторизуемся под Сарой. Сара имеет права сотрудника и менеджера. Для менеджера проекты и сотрудники доступны только для чтения. Переходим в Задачи и создаем новую задачу. Назначаем исполнителем Боба. Видим, что автором автоматически назначен текущий сотрудник.

Выходим Сарой из системы и авторизуемся под Бобом. Боб имеет права сотрудника и исполнителя. Открываем задачу и видим, что форма в режиме чтения и доступен переход
Начать в работу. Начинаем работу и видим, что изменилось состояние задачи. Кроме того становятся доступны переходы Завершить и Остановить работу. Завершаем работу, переводя задачу в состояние Сделано.

Выходим Бобом и снова авторизуемся под Сарой. У менеджера в сделанной задаче доступны переходы Отклонить или Закрыть. Проверяем решение и закрываем задачу.

Готовое приложение опубликовано на гитхабе и доступно для свободного запуска, изучения и модификаций.