Сайт онлайн-библиотеки
О проекте и задаче
Наш долгосрочный и масштабный проект FoxBooks представляет собой онлайн-библиотеку с широким функционалом, огромной базой книг и возможностью парсить произведения с других книжных сервисов. И пусть сейчас знакомство с клиентом превратилось в спойлер результата, наш новый кейс не перестанет вас удивлять.
Читайте о том, как мы разработали дизайн и фронтенд, реализовали интеллектуальный поиск, встроили читалку и аудиоплеер, собрали удобную админку и фактически создали книжную социальную сеть: с лайками, комментариями и рецензиями в режиме реального времени.
Дизайн и навигация
Команда дизайнеров Webnauts разработали привлекательный и удобный интерфейс в несколько этапов:
- изучила потребности клиента и провели конкурентный и визуальный анализ;
- разработала логотип и фирменные цвета;
- спроектировала прототипы и дизайн-концепцию сайта.
Так, дизайн электронной библиотеки вышел аккуратным и простым, с упором на функциональность и удобство чтения. И несмотря на содержательность сервиса (а это более чем 3 000 книг), нам удалось разработать интуитивно понятный и минималистичный интерфейс, в котором очень сложно заблудиться.
Главная страница
Первый экран состоит из лаконичного меню с полем поиска и быстрой фильтрацией книг по алфавиту и жанрам. Отдельным блоком представлена самая актуальная информация: книжные новинки и слайдер с баннерами.
Далее представлены самые горячие обновления с удобным фильтром поиска:
Для любителей книжных подборок и аудиокниг мы подготовили соответствующие блоки в виде компактных фотослайдеров с короткими описаниями каждой статьи или аудиодорожки соответственно:
Ниже мы поместили слайдер с рецензиями пользователей, блок F&Q и суперлаконичный футер:
Почти каждый из блоков главной ведет на отдельную страницу с более расширенной навигацией поиска: категории, новинки, подборки и аудиокниги.
Другие страницы
Книги и Аудиокниги
Страницы оснащены навигацией поиска и постраничной навигацией со всем ассортиментом книг в виде карточек. Поиск реализован в виде меню из горизонтального списка, содержащего теги с литературными жанрами и другими книжными категориями: «Последние поступления», «Популярные», «Бестселлеры» и «Сейчас читают».
Пагинация представлена внизу каждой из страниц:
Подборки
Книжные подборки — полезная страница для пользователей, не знающих, что почитать или послушать. Здесь можно найти «Тематические» и «Регулярные» подборки среди электронных и аудиокниг самых разных жанров: от исторической и современной прозы до психологической и бизнес-литературы:
Новинки
База книг регулярно обновляется и приглашает к знакомству с новыми публикациями в разделе «Новинки». На страницу можно попасть с первого экрана или меню сайта. Отфильтровать новинки можно по типу книг (электронные и аудиокниги) и категориям «Последние поступления» и Популярные»:
Категории
Несмотря на то, что страницы «Книги» и «Аудиокниги» оснащены детальным фильтром поиска, пользователь узнаёт о нём только после того, как перейдёт на одну из них. Поэтому для улучшения ориентации новичков на сайте мы реализовали отдельную страницу «Категории» и поместили её на самом видном месте — в меню сайта:
Сама страница представляет собой 2 списка категорий по типам и жанрам книг. Каждая из категорий — кликабельна и содержит информацию об общем количестве книг на сайте.
Карточка книги
Страница содержит обложку и подробное описание книги / аудиокниги: название, автор, год издания, оценка, количество просмотров, аннотация, издательство / чтец, жанр и кнопка «Читать» / «Слушать»). Зарегистрированные пользователи могут добавить книгу в раздел «Мои книги»:
Проскроллив ниже, мы видим подборки с рекомендациями «Похожие книги» и «Другие книги / Аудиокниги автора». Такие блоки не только помогают читателям выбрать книгу, но и увеличить релевантность страницы в поиске при SEO-продвижении. Например, если читателю не подошла книга, он может перейти на карточку из других книжных рекомендаций, а не просто покинуть страницу:
Фактически, формировать блок «Похожие книги» могут все пользователи сайта. Для этого достаточно отправить свою рекомендацию в виде ссылки на книгу (если она есть на сайте) или указать автора или название книги (если книга на сайте отсутствует):
В силу того, что сайт абсолютно бесплатный, в карточке товара (и не только) мы продумали баннеры для размещения рекламных объявлений:
Режим чтения и прослушивания книги
Читалка
Самая интересная и функциональная страница по версии нашей команды. Это читалка со встроенным редактором, позволяющая настроить интерфейс под себя с максимально комфортными параметрами:
- формат текста (одна или 2 колонки)
- размер шрифта (13 значений)
- яркость (3 светлых и 3 тёмных режима)
- поля (5 величин отступа)
- высота строк (5 значений)
- выравнивание по ширине (с ним или без)
Кроме того, панель редактора содержит следующие элементы управления:
- содержание — разделы книги, между которыми удобно переключаться:
- цитаты — виджет, позволяющий выделять, копировать, делиться и добавлять понравившиеся цитаты из книги. А если книга выдалась богатой на крылатые выражения, можно выполнить поиск среди добавленных цитат:
Выделив цитату и кликнув на кнопку «Поделиться», скопированная ссылка формируется в буфер, перейдя по которой пользователь попадает на соответствующую страницу с выделенной цитатой:
- на весь экран — функция расширения экрана на весь дисплей:
- закладка — элемент, с помощью которого удобно помечать нужные страницы в книге:
В мобильной версии редактор легко вызывается при тапе и по удобству ничем не отличается от десктопной версии:
Аудиоплеер
Для прослушивания аудиокниг мы реализовали удобный аудиоплеер с такими функциями, как:
- перемотка аудиодорожки на 10 секунд:
- регулирование скорости воспроизведения:
- переключение между разделами книги:
- регулирование громкости:
Кроме того, мы реализовали сохранение прогресса прослушивания аудиодорожки, в результате чего читатель может продолжить знакомство с книгой на том месте, где он остановился в прошлый раз.
Личный кабинет и раздел «Мои книги»
Сайт предлагает бесплатную авторизацию двумя способами: путём ручного ввода данных или через социальные сети. Регистрация позволяет читателю попробовать все плюшки сайта:
- возможность добавлять книги и аудиокниги по статусу прочтения / прослушивания: «Хочу прочитать / прослушать», «Читаю / Слушаю», «Прочитано / Прослушано»;
- возможность добавлять и создавать книжные подборки;
- возможность оставлять комментарии и писать рецензии;
- возможность добавлять любимых писателей в избранное.
Таким образом, читатель наполняет собственный раздел сайта «Мои книги»:
Сам личный кабинет позволяет настроить профиль под себя:
Онлайн-уведомления
Этот раздел сайта обозначен привычным значком колокольчика и собирает информацию о новых уведомлениях в режиме реального времени. Например, если кто-то прокомментировал или лайкнул рецензию пользователя, уведомление мгновенно отобразится на экране:
Вёрстка на React.js
Сложный и масштабный проект с огромной базой книг может быть и быстрым, и производительным. Например, с помощью реактивного JavaScript-фреймворка React.js. Именно его мы и применили для создания пользовательского интерфейса при разработке онлайн-библиотеки.
Но как и любая другая технология, она имеет свой минус, в нашем случае — негативно сказывается на SEO. Чтобы нивелировать ситуацию, на базе существующего фреймворка React.js мы использовали ещё один — Next.js. Так, применив инструменты Next.js, мы изменили структуру формирования дерева страниц для отображения friendly URL — адресов страниц, состоящих из понятных слов. Также был создан файл SitemapXML — это XML-карта сайта для быстрого сканирования и индексации всех страниц.
Кроме того, при написании фронтенда мы пустили в ход:
- Redux и Redux Toolkit — стейт менеджеры, или средства управления состоянием приложения;
- React Hook Form и Yup — библиотеки для валидации форм на сайте;
- Websocket — веб-протокол между браузером и веб-сервером для получения push-уведомлений (лайки, комментарии) в реальном режиме времени без перезагрузки страниц;
- Axios — HTTP-клиент для запросов к бэкенду сайта.
Начинка сайта на Laravel
С такой объемной базой данных, как у книжного сервиса FoxBooks (а это 7 млн записей), могут справиться только «взрослые» и проверенные технологии. К таким относится PHP-фреймворк Laravel, который вместе с React.js обеспечивает высокую производительность и скорость загрузки сайта.
Кроме того, при разработке серверной части сайта онлайн-библиотеки мы использовали технологии:
- MySQL — для управления базами данных;
- JS и AJAX— для получения данных от некоторых страниц на панели администратора;
- REST API — для связи бекенда и фронтенда сайта.
Онлайн-уведомления
Если на фронтенде онлайн-уведомления реализованы с помощью Websocket, то на бэкенде — через связку Laravel, серверной среды Node.js и базы данных Redis (NoSQL). Применение дополнительных технологий Node.js и Redis позволило добиться большей производительности приложения в режиме реального времени. Для них мы создали отдельный модуль на сервере.
В реализации онлайн-уведомлений был также использован Pub/Sub (Publish–subscribe pattern) — шаблон для непрямой передачи сообщений между отправителями и получателями. Это промежуточное звено между Laravel, Node.js и клиентом.
Морфологический поиск
Данная функция позволяет искать документы на сайте не только по точно заданному слову, но и с учётом его морфологических форм (род, число, падеж и т. п.). Например, если читатель не помнит точного названия книги, выдача будет включать не только сам запрос, но и его словоформы. Морфологический поиск был реализован с помощью интеграции с поисковым сервером ElasticSearch.
Админка сайта
Онлайн-библиотека в нашем исполнении получилась удобной не только для читателей, но и для администраторов, ведь с помощью панели Laravel Nova управлять сайтом не представляет никакого труда:
Кроме фреймворка Laravel в разработке админ-панели мы применили библиотеку Bootstrap.
Парсинг книг на Python
Парсинг — это автоматический сбор и структурирование данных с других сайтов при помощи парсера. Такая программа выручает при работе с большим объёмом данных (в нашем случае, книг), который систематизировать вручную очень не просто.
При разработке парсера книг и аудиокниг мы применили популярный язык программирования Python, а для реализации админ-панели — Python-фреймворк Django:
При написании парсера мы также использовали технологии:
- Requests — библиотека для выполнения HTTP-запросов в Python.
- Gunicorn — HTTP-сервер интерфейса веб-сервера Python.
- Beautiful Soup — библиотека для анализа HTML и XML-файлов.
Небольшой загвоздкой стало подключение к готовому проекту, базе данных и исправление ошибок в архитектуре. Но в целом разработка парсера была несложной задачей.
Отметим, что парсер был написан для двух основных сайтов-доноров книг.
Для того, чтобы выборочно добавить нужные книги на сайт прямо из админки, мы задействовали PHP-парсер для HTML-документов Simple HTML DOM. При парсинге аудиокниг была использована утилита Mp3Info — средство просмотра технической информации MP3 и редактор тегов ID3.
Результат
Мы проделали немалую работу, чтобы онлайн-библиотека FoxBooks стала для своих читателей и уютным прибежищем, и удобной программой — с умной навигацией, встроенным аудиоплеером и функциональным ридером. Пользователи по достоинству оценят современный дизайн, огромную базу книг и при этом — высокую скорость загрузки страниц. Под капотом сайта: удобная админ-панель управления и парсер для автоматического сбора книг с других веб-ресурсов.
