В этой статье расскажу про веб-приложение «Создатель кроссвордов» (Crossword Maker), которое позволяет рисовать кроссворды (сканворды), заполнять из в ручном или автоматическом режиме, разгадывать онлайн или распечатать на принтере.
«Создатель кроссвордов» разработан на декларативном фреймворке Evado, в котором сущности приложения и их взаимосвязи, вместо программирования, определяются через веб-интерфейс. От вас нужна только идея, все остальное уже готово!
Одно из удобств фреймворка Evado, в том, что вы сразу получаете единый веб-интерфейс для разработки, эксплуатации и администрирования приложения. В тоже время, API обеспечивает дальнейшую кастомизацию, как с помощью новых модулей, так и через взаимодействие с независимыми FRONT-приложениями.
На главной странице отображены ссылки на основные модули приложения:
- В модуле «Студия» создаются метаданные, то есть описывается, что такое Слово, Подсказка, Кроссворд, Тема, и как они связаны между собой.
- В модуле «Офис», на основе метаданных, рисуются кроссворды, добавляются слова и темы, редактируются подсказки.
- В модуле «Администрирование» сосредоточено управление приложением. Здесь найдёте пользователей, безопасность, задачи, логи и многое другое.
- В модуле «Портал» можно разгадывать кроссворды.
Метаданные
Далее расскажу только о некоторых особенностях метаданных «Crossword Maker». Для подробностей о декларативной разработке смотрите статью «Создание веб-приложения без программирования».
Слово
Базовая сущность - это конечно Слово. Она определяется в классе с кодовым именем word. Слово хранит ссылку на язык (language), к которому относиться, и имеет обратные ссылки на подсказки (clues) и темы (themes), так как может быть связано с несколькими из них.
Атрибут value хранит значение слова. К нему добавлены несколько валидаторов, чтобы проверять значение:
- проверка допустимой длины слова;
- проверка уникальности слова в данном языке;
- проверка слова по шаблону языка.
Подсказка
Подсказка определяется в классе clue. Она напрямую связана только с одним слово через атрибут word. А вот тем (themes), к которым относится подсказка, может быть несколько.
Сетка кроссворда
Сетка кроссворда хранится в классе puzzle в атрибуте grid в формате JSON. Кроме координат блоков, там могут быть сохранены слова и ссылки на подсказки.
Слова хранятся по значению, потому что их изменение приведёт к нарушению кроссворда. А вот подсказки хранятся по ссылке, так что в кроссворде всегда будет их актуальная версия.
Темы кроссвордов
Каждое слово и подсказка могут быть привязаны к одной или нескольким темам, что позволяет легко создавать тематические кроссворды.
Связи между словом и темой, подсказкой и темой, сделаны как отдельные сущности - классы wordToTheme и clueToTheme. Это требует некоторых дополнительных затрат по сравнению с хранением связи внутри ссылочного атрибута. Однако даёт значительное преимущество в производительности при выборках из базы объектов по заданной теме.
Другой пример промежуточной связи можно найти в демонстрационном приложении Evado.
Динамическая навигация
Приложение «Создатель кроссвордов» допускает множество языков для слов и подсказок. Но данные на разных языках никак не пересекаются между собой, поэтому практично разделить их на уровне меню, чтобы пользователь мог легко переключаться между ними.
Для этого служит динамическая навигация, которая формирует меню не из метаданных, а из самих данных приложения. В данном случае, для каждого языка будет создан отдельный пункт меню.
Дополнительную информацию по навигации можно найти в статье «Готовим динамическое меню из категорий».
Создание кроссвордов
В модуле «Офис» создаются и редактируются данные на основе тех метаданных, что были созданы в модуле «Студия». В нашем случае здесь рисуются кроссворды, редактируются слова, подсказки и темы.
Импорт слов и подсказок
Текущая база содержит несколько десятков тысяч слов на русском и английском языках.
Через стандартный интерфейс слова можно добавлять и изменять только по одному за раз. Для массового импорта новых слов (или привязки слов к теме) имеется утилита importWords. Она позволяет за раз добавить тысячи слов вместе с подсказками.
Слова для клиента
Чтобы улучшить производительность при заполнении кроссвордов, слова экспортируются для клиентской стороны. Это позволяет избежать множества запросов к базе данных. Экспорт реализован в утилите ExportWords.
Представление кроссворда
Данные, описывающие сетку кроссворда, хранятся в формате JSON. Во фреймворке для него есть стандартное представление. Однако намного удобнее создавать и редактировать сетку более наглядным образом. Для этого создан шаблон представления для атрибута grid класса puzzle, который заменяет стандартный.
Для подключения шаблона достаточно разместить файл EJS в приложении в переопределённом модуле «Офис». Подробнее о пользовательских шаблона смотри статью «Точечная кастомизация пользовательского интерфейса».
Кроме шаблонов, в переопределённом модуле могут подключаться и дополнительные ресурсы необходимые на клиентской стороне - шрифты, скрипты, стили.
Автозаполнение
В представлении кроссворда реализовано автозаполнение пустых блоков подходящими словами. Время этого процесса зависит от сложности сетки и может быть весьма длительным.
Автозаполнение выполняется в отдельном потоке браузера и не влияет на работу приложения. Текущее состояние подобранных слов отражается на сетке. Вы может прервать заполнение в любой момент.
Выбор подсказок
На отдельной вкладке представления кроссворда доступно управление подсказками. При наличии выбора, подсказку для слова можно выбрать явно. В ином случае она будет выбрана автоматически с учётом ID кроссворда и темы.
Печатная копия
Для распечатки кроссворд нужно экспортировать в PDF. В модуле «Офис» для этого используется утилита createPuzzlePdf, которая реализует дополнительные настройки для клиентского класса PdfExport.
Портальный модуль
Портальный модуль - это место, где можно решать кроссворды. Все кроссворды отмеченные как опубликованные доступны здесь для просмотра.
Портал не является частью декларативного фреймворка Evado. Серверная часть подключается как отдельный модуль, а клиентская часть написана на VueJS. Общение с приложением происходит через универсальный AJAX API. Подобное взаимодействие позволяет создавать полностью независимые пользовательские интерфейсы, для которых приложение будет просто удаленным сервером.
Вход в портальный модуль не требует авторизации. Для того, чтобы анонимные пользователи получили доступ к данным приложения, необходимы разрешения для гостевой роли. Подробнее о безопасности данных рассказано в статье «Особенности прав доступа для метаданных».
По умолчанию состояние кроссворда сохраняется в локальном хранилище браузера. Пользователь может перейти к другому кроссворду или даже закрыть страницу, а после вернуться и продолжить решение.
В портальном модуле экспорт в PDF осуществляется с настройками по умолчанию.
Установка и запуск
Приложение «Crossword Maker» доступно в открытом репозитории. Его можно запустить либо через Docker, либо в окружении Node.js и MongoDB. Для запуска через Docker достаточно скопировать репозиторий в папку /app. И выполнить команды:
cd /app
docker-compose up -d mongo
docker-compose up --build installer
docker-compose up -d server
Приложение станет доступно по адресу http://localhost:3000.
