Сайт онлайн-бібліотеки
Про проєкт і завдання
Наш довгостроковий і масштабний проєкт FoxBooks є онлайн-бібліотекою з широким функціоналом, величезною базою книг і можливістю парсити твори з інших книжкових сервісів. І нехай зараз знайомство з клієнтом перетворилося на спойлер результату, наш новий кейс не перестане вас дивувати.
Читайте про те, як ми розробили дизайн і фронтенд, реалізували інтелектуальний пошук, вбудували читалку та аудіоплеєр, зібрали зручну адмінку та фактично створили книжкову соціальну мережу: з лайками, коментарями та рецензіями в режимі реального часу.
Дизайн і навігація
Команда дизайнерів Webnauts розробила привабливий і зручний інтерфейс у кілька етапів:
- вивчила потреби клієнта та провела конкурентний і візуальний аналіз;
- розробила логотип і фірмові кольори;
- спроектувала прототипи та дизайн-концепцію сайту.
Так, дизайн електронної бібліотеки вийшов акуратним і простим, наголошуючи на функціональності та зручності читання. І попри змістовність сервісу (а це більш ніж 3000 книг), нам вдалося розробити інтуїтивно зрозумілий і мінімалістичний інтерфейс, в якому дуже складно заблукати.
Головна сторінка
Перший екран складається з лаконічного меню з полем пошуку та швидкою фільтрацією книг за алфавітом і жанрами. Окремим блоком представлена найактуальніша інформація: книжкові новинки та слайдер із банерами.
Далі представлені найгарячіші оновлення зі зручним фільтром пошуку:
Для любителів книжкових добірок і аудіокниг ми підготували відповідні блоки у вигляді компактних фотослайдерів із короткими описами кожної статті чи аудіодоріжки відповідно:
Нижче ми помістили слайдер з рецензіями користувачів, блок 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 стала для своїх читачів і затишним пристановищем, і зручною програмою — з розумною навігацією, вбудованим аудіоплеєром і функціональним рідером. Користувачі гідно оцінять сучасний дизайн, величезну базу книг і при цьому — високу швидкість завантаження сторінок. Під капотом сайту: зручна адмін-панель управління та парсер для автоматичного збору книг з інших вебресурсів.
