Доброго времени суток, уважаемые читатели, рад вновь видеть вас в своём блоге.
Подходит к концу разработка первой версии моего запланированного справочного сайта для мобильных приложение (а может и не только) с мультиязычностью.
Смотреть актуальную версию сайта
Содержание цикла статей:
- Справочный сайт на Laravel + React. Публикация версии 1.0
Введение
Я потратил около месяца на разработку Backend (с админ панелью) и Frontend для отображения справочной информации о приложении. И сейчас мои усилия подходят к концу (хотя правильнее сказать, что заканчивается первая итерация) и можно сказать, что уже готова первая версия этой системы.
Я занимался тем, что покупал VPS и пытался установить туда со всеми зависимостями бек и фронт, разделив его на одном домене. В очередной раз столкнулся с кучей проблем с зависимостями от версий. И также изучил много нового в области серверных технологий.
В этой статье я расскажу о последнем этапе работы над Frontend, возможно, упомяну финальные штрихи на Backend.
API-запросы на сервер
Основу пользовательского интерфейса я заложил в первую очередь. Началось всё с проектирования макета, который и был взят за основу, после чего в процессе несколько раз изменялся.
Для запросов создал отдельный файл, назвал его Api.js, в нём описаны все необходимые функции, позволяющие получить ответ от сервера и обработать его при помощи передаваемой функции handle в зависимости от целей запроса.
В конструкторе корневого класса задается также полный путь до API со стороны сервера. На фронт не попадают любые объекты со статусом не активно, это удобно, если вы ещё не до конца закончили содержимое для языка/категории/статьи и не хотите показывать сырой текст.
На данный момент есть три запроса к API:
- Запрос на информацию о языках доступных (для отображения в списке выбора языка)
- Запрос на получение корневых категорий, которые отображаются блоками на главной странице
- Запрос на получение всех дочерних статей и категорий для корневой категории.
Кешинг запросов
Некоторые запросы могут быть очень объемными из-за большого количества категорий, статей в них и для всего этого передаются также свои переводы для каждого активного языка.
Основную проблему предположительно будет доставлять 3 запрос, на получение всей информации об отдельной корневой категории. Поэтому для этого запроса я добавил кеширование на стороне пользователя, путём сохранения информации о запросе в переменной. И в момент запроса на новые данные, если в переменной нет этого запроса, то отправляется новый. Иначе страница подгружается значительно быстрее.
Довожу Frontend до ума
Вы можете посмотреть в прошлых статьях, на каком этапе была закончена работа над frontend, освежу вам память изображениями:
Стоит упомянуть, что я добавил зависимости bootstrap 4 в проект, что позволило без особых усилий сделать большинство красивых вещей. От меня потребовалось лишь отшлифовать стили.
Посмотреть актуальную версию сайты вы можете по ссылке, а вот как выглядит сайт сейчас (в Русском и Английском переводе):
Поиск по категории
Одним из важным моментов, которые нужно было реализовать на стороне frontend — поиск по содержимому статей и категорий. Собственно отправлять новый запрос для каждого поиска на сервер я посчитал чрезмерным.
Поэтому просто обходил все дочерние элементы для открытой категории и скал вхождение словосочетания из поиска.
Немного трудно было сделать красивый вывод найденной информации, так как я хотел подсвечивать в тексте искомое словосочетание, и нужно было мудрить с обрезанием текста. Ещё одним моментом стало то, что статьи хранятся со всеми тегами и от них перед поиском я избавлялся при помощи регулярного выражения. Вот как выглядят результаты поиска:
Поиск происходит исключительно по выбранному языку и на данный момент регистрозависим, но думаю перейти к поиску в котором не будет учитываться регистр.
Форма обратной связи
Ещё одной из функций, которые нужно было добавить — форма обратной связи, чтобы пользователи всегда могли написать разработчику и задать свои вопросы или сделать предложения по сайту/приложению.
На стороне сервера сделал API для приёма запросов с формы и отправкой на почту администратора. А на стороне frontend при помощи bootstrap добавил всплывающее окно и кнопку справа внизу на всех страницах (позже увидел, что кнопка часто мешает просмотру содержимого, поэтому сделал так, чтобы она скрывалась при прокрутке вниз и при прокрутке вверх вновь появлялась):
Локализация интерфейса
Ещё одним из важных аспектов было сделать перевод для всех статических текстов на сайте, вроде названия кнопок. Для этого выделил отдельную папку, в которой хранятся перевод в формате JSON в парах Ключ -> Значение. Для каждого языка свой файл. И файл Localization.js, который управляет вызовом нужного файла и отображением нужного значения в указанном месте.
Само собой React позволяет сделать перевод буквально мгновенным в момент смены его в выпадающем списке, причем для всего сайта сразу. Вот как это выглядит:
Помимо всего вышеперечисленного было исправлено множество багов, добавлены другие функции, вроде парсинга url для перехода к конкретной статьей/категории и кнопки копирующие эти url. Но если расписывать всё, то статья станет ещё больше, а читать вы как я понял не очень любите (статистика так говори).
Backend финальные изменения
На стороне бекэнда я также значительно поработал перед релизом, были протестированы различные функции, исправлены баги. Добавлены новые возможности, в основном для разницы развертывания на продакшене и при локальной разработке. Автоматизировал некоторые процессы так сказать, вроде создания аккаунта администратора.
Добавил фильтр
Основным добавлением на backend стала пагинация и фильтр для статей, так как именно их скорее всего может быть большое количество и было бы удобно по ним проводить поиск.
Я просто добавил форму фильтра со всеми параметрами и средствами Laravel выбираю только те статьи, которые подходят.
Была некоторая проблема с пагинацией с параметрами фильтра, но я решил это передачей их в качестве GET-параметров и проверкой при пагинации.
Итоги
Собственно результат моих трудов уже сейчас можно наблюдать на сайте https://sms-forwarder.com/support/.
Пока что там есть только перевод на Английский и Русский, но планирую добавить в ближайшее время ещё на несколько языков. А также добавить раздел FAQ. Подготовка материалов для наполнения очень однообразна и не интересна, но её приходится делать. А ещё хочу добавить Яндекс.Метрика к React и уже есть мыслишка как это сделать, чтобы отслеживать деятельность пользователей на сайте.
Буду вам искренне признателен, если зайдете на сайт, посмотрите его, протестируете в меру своих возможностей и сообщите обо всех найденных багах и проблемах. Или оставите свои идеи в комментариях к этой статье, что ещё можно добавить/изменить.
Не забывайте ставить лайки, пишите комментарии, если статья вам понравилась, делитесь ей с друзьями и конечно подписывайте на мой блог и группу вк (все ссылки есть на странице блога).
