Приветствую всех, дорогие читатели. Пишу статьи не часто, потому что нужно когда-то заниматься разработками, а написание статей этому не способствует. Надеюсь, что у меня ещё остались верные читатели =)
В новой статье хочу рассказать, какое обновление я сделал для своей самописной CMS для создания справочных сайтов (ориентированных на данный момент на мои мобильные приложения).
По разработке этой CMS я написал целую серию статей, ссылка на первую из них.
Введение
По традиции небольшое введение по причинам обновления CMS. После её создания она была вполне полноценной, со своими проблемами и необходимостью в доработке, но всё равно рабочая версия и можно было бы оставить её такой.
Как вы можете знать из цикла статей по разработке я планировал продавать своё решение другим разработчикам мобильных приложений, но пока руки не дошли сделать грамотную рекламную-компанию. Но я не отказался от этой идеи. В дополнение к этому я разработал новое мобильное приложение (скоро в блоге выйдет цикл статей посвященных его разработке от появления идеи до получения первых денег), которое также требует справочный сайт и к его выходу было бы неплохо дополнить CMS новыми функциями.
Список нововведений
Для выставления задач я использую Trello, записывая туда все появившиеся в разные моменты времени мысли по новшествам, поэтому просто приведу пример того, что у меня получилось для обновления:
Сами формулировки задач могут быть непонятными для вас, но достаточно того, что я сам понимаю, что закладывал в эти задачи.
Отдельно по изменениям
Сейчас я пройдусь по некоторым добавленным функциям, описывая с какими трудностями я столкнулся при их разработке и продемонстрирую скриншоты.
Процесс загрузки данных
Это изменение коснулось frontend'a, если говорить терминами разработчиков.
Вкратце о том, как это работает: пользователь открывает страницу сайта, происходит загрузка содержимого странницы, после этого отправляется асинхронный запрос на сервер (backend), после того, как ответ получен - отображаются данные на странице (без её перезагрузки).
Раньше в момент, когда отправлялся запрос, после загрузки страницы уже отображалось название сайта, выпадающее поле, ссылка на приложение и где-то в центре страницы отображался кружок загрузки данных. Мне показалось это не достаточно очевидным для пользователя, поэтому я решил заменить процесс загрузки.
Изменения коснулись внешнего вида загрузки и когда она происходит. Ещё на этапе отображения содержимого страницы (до отправки запроса на сервер) показывается только загрузочный компонент с просьбой подождать, а когда данные получены отображается уже готовая страница. Для компонента загрузки использовал один из существующих модулей React.js (react-loader-spinner). Вот как это выглядит теперь:
Добавил в GET запрос информацию об языке
Речь идёт о том, чтобы была возможность указать ссылку на конкретную статью и категорию в React.js и чтобы она открывалась с определенным переводом.
Ранее я уже сделал это для выбора статьи или категории. Теперь добавил параметр language в GET запрос. Например, для перехода сразу к статье "Доступное время - что это?" на одном из моих сайтов можно получить ссылку вида:
https://audiofiletotext.com/support/?category=1&articleChild=4
Ссылка автоматически формируется и добавляется в буффер обмена, если нажать на иконку замочка справа от названия статьи/категории. Теперь, если мы хотим иметь ссылку на эту статью и определенный язык, например итальянский, то ссылка будет выглядеть так:
https://audiofiletotext.com/support/?category=1&articleChild=4&language=it
Остальные изменения на frontend стороне CMS больше касаются внутренних изменений и почти никак не меняют жизнь для пользователей, перейдем к backend стороне.
Порядок элементов и другие новые атрибуты сущностей
С постепенным ростом проекта я понял, что было бы неплохо иметь возможность задавать последовательность статей, категорий и языков, как они будут отображаться пользователю. Например, в отдельной статье наиболее важный вопрос ставить первым и т.д. Ранее это решалось добавлением категорий и статей в их необходимом порядке. Но при добавлении новых статей в будущем контролировать порядок становится крайней затруднительно.
Поэтому всем сущностям (Категория, язык, статья) были добавлено новое поле "Порядок" которое представляет из себя число и чем оно больше, тем дальше будет стоять сущность.
Для изменений и контроля этого атрибута было добавлено поле в списки сущностей и если происходило изменение, то появляется кнопка "Принять изменения", после чего данные обновляются. За дизайн не ругайте, это административная панель и дизайн тут пока не главное:
Кроме этого для категории было добавлено поле, позволяющее определить цвет фона на главной странице справочного сайта.
А для языка на backend вынесено json представление перевода интерфейса сайта. Таким образом вы можете добавить новый язык, после чего для него отредактировать перевод интерфейса, либо изменить его в уже существующих. Для отображения JSON на backend я использовал готовое решение (JSON Editor). И вот как теперь выглядит окно редактирования языка:
Скажу честно, что данное представление очень упрощает работу с JSON, а если есть необходимость, можно всегда переключиться на режим кода и посмотреть на реальный JSON код.
Конфигурационный файл для frontend
Есть некоторые переменные, которые используются на frontend, но было бы здорово иметь возможность их менять на backend для всего сайта, без необходимости рыться в коде frontend (тем более что он собирается в минимизированные chunks и найти там и изменить что-то очень проблематично). Речь, например, про e-mail поддержки в подвале, ссылку на Google Play и другое.
Помимо этого для будущих возможных пользователей этой CMS я добавил возможность изменить логин/пароль к административной панели, чтобы они могли сами это менять при необходимости. Всё это реализовал на главной странице административной панели (для конфигурации всё также использую удобный JSON):
Выводы
Традиционная рубрика моих статей, где я делаю итог и какие-то заключительные мысли. В статье сложно указать на все инструменты и проблемы, с которыми я столкнулся, они у меня и так всегда получаются довольно громоздкими (и как я считаю с большим количеством воды).
Новая версия больше подготовлена для того, чтобы предлагать её потенциальным пользователям, хотя всегда есть пространство для улучшения и это есть в планах. Она уже приносит мне много полезно и реализована на двух моих сайтах:
На них вы можете оценить разницу, если я не успею обновить и первый сайт до новой версии.
На обоих сайтах стоит Яндекс.Метрика и количество посетителей фиксируется, что позволяет мне сделать вывод, что такие справочные сайты для сложных приложений очень востребованы и помогают разработчику ответить на наиболее популярные вопросы.
А вам всем добра, счастья, не болейте в это сложное время. Пишите ваши комментарии, мысли, идеи, я стараюсь отвечать на все комментарии. Подписывайтесь на блог, будет ещё очень много не очень интересных, но технических статей про мои проекты.