Мы разработали новый сайт для Биомолекулы — самого популярного в России журнала по молекулярной биологии и современным биотехнологиям.
Проект был запущен в 2007 году моим сокурсником Антоном Чугуновым. За это время вокруг журнала сформировалась лояльная аудитория, появились партнерские связи с крупными компаниями (например, «Инвитро», «Ди-а-Эм»), настроен регулярный поток качественного научного контента.
«Биомолекула» — это устоявшееся сообщество людей, которые интересуются естественными науками или занимаются ими профессионально. В РФ нет специалистов в области естественных наук, которые бы не читали этот журнал.
В начале 2015 Антон обратился ко мне за помощью — нужно было обновить сайт, так как он уже не справлялся со своими задачами.
При всем этом технологическая составляющая сайта уже в 2015 году устарела и мешала развитию:
Прежде всего, важно было понять, что заказчик хочет поменять в продукте и зачем. Я провел интервью с заказчиком и изучил текущую ситуацию проекта. Подготовил бриф и прототип. Бриф объяснял, что и почему я предлагаю, а прототип объяснял, как я предлагаю. Во многом опирался на данные гугл-аналитики проекта. На это ушел месяц.
1. Разработать новую информационную структуру, которая предусмотрит навигацию по двум тысячам материалов на сайте, оставив в том или ином виде все существующие на сайте рубрики.
2. Разработать формулу ранжирования статей в «Популярном» по рейтингу. На рейтинг влияло несколько факторов:
3. Разработать современный дизайн, который повысит удобство чтения материалов на разных устройствах.
4. Разработать надежную техническую платформу: высокий uptime, доступность для устройств и поисковых роботов. Сайт должен стабильно работать при нагрузке 60 тысяч просмотров страниц в сутки. При этом скорость отдачи страниц должна быть в пределах 300-500 мс.
5. Созданная платформа не должна иметь ограничений, которые затруднят ее развитие в будущем.
Мы начали работать с действующим бизнесом, и, что именно надо сделать, владельцу было понятно. Это идеальный случай, когда бизнес-модель обкатана и не надо ничего придумывать — надо просто задать побольше вопросов, собрать побольше ограничений и сделать ТЗ.
Конечно, лучше работать с бизнесом, которому 10 лет, чем со стартапом, где основатель не знает, как и почему все это будет работать, зачем ему это надо. Бизнесу это нужно, он будет ехать вас по срокам, стартапер забьет и мотивация платить пропадет — будете бегать за ним просить принять работу — такое бывает.
Тестовая версия проекта была развернута на сервере DigitalOcean. Было настроено Continuous Integration и Continuous Deployment. При каждом изменении в проекте автоматически происходила сборка проекта, выполнялись автоматические тесты и статический анализ кода. Настроена отправка статусов сборки проекта в GitHub так, чтобы изменение кода можно было принять только в случае успешной сборки. Для CI/CD использовался сервис TeamCity.
Сценарии автоматического развертывания проекта были написаны с использованием fabric. Для развертывания проекта в окружении разработчика использовался Vagrant, и Packer для сборки базовых образов системы. Production сервер был настроен при помощи автоматических сценариев, написанных на fabric.
Настроили автоматическое развертывание новых версий с помощью TeamCity. По проекту написаны функциональные тесты для автоматической проверки работы в реальных сценариях использования. Для написания функциональных тестов использовался Selenium и Python 3.
Для создания и редактирования статей был реализован WYSIWYG-редактор со следующими возможностями:
Для каждой статьи собирается статистика количества полных прочтений статьи. Используя количество прочтений, добавлений в избранное и цитирование статьи вычисляется рейтинг статьи.
Самым трудным было создать макет страницы статьи. Антон хотел много разных стилей, которые я не встречал на других медиа. Было трудно сделать всю эту систему. В итоге сейчас в статью можно добавить такие элементы:
И разные комбинации этих элементов — пример статьи с элементами разных стилей.
«Биомолекула» ежегодно проводит собственный конкурс на лучшую научно-популярную публикацию в области современной биологии. Это важный и популярный конкурс среди студентов и научных работников в сфере естественных наук.
Мы создали отдельную страницу для конкурса, которой можно управлять в админ-панели редактора. Специальный раздел, в котором можно управлять всей информацией о жюри конкурса, спонсорах, авторах, темах и условиях участия. Запуск конкурса, прием работ и завершение конкурса также определяются разными статусами в админ-панели.
Кроме этого, большой работой был перенос данных в новый софт. Если с пользователями все было просто, то со статьями, которых было пару тысяч, все было иначе. Мы писали конвертеры для обновления html-разметки, переносили и проверяли результат. Эту процедуру повторили 5 раз, пока большинство статей не «встало» как надо.
Многие материалы заказчику пришлось частично исправлять вручную, так как не все поддавалось автоматизации. Антон и его команда выполнили огромную ручную работу, без которой проект не смотрелся бы так классно, как сейчас. Аккуратности и трудолюбия этой команде не занимать.
Мы детально прорабатывали информационную архитектуру сайта. Так как это журнал — у него своя специфика. Важно продумать все разделы, рубрики и подрубрики так, чтобы пользователям было удобно ходить по сайту.
В итоге сейчас на сайте есть следующие форматы: статья, обзор, дайджест, новости, объявления и спецпроекты.
Помимо форматов материалов, у всех материалов есть темы. Каждый материал ранжируется по популярности и рейтингу, как было изначально заявлено в требованиях ТЗ.
Поиск по этому огромному количеству контента был реализован с использованием возможностей СУБД PostgreSQL.
Сделали пуш-уведомления о новых статьях. Для комментариев к статьям используется сервис Disqus для которого была сделана интеграция с пользователями сайта.
Блок похожих по теме статей создается с использованием вероятностного метода Монте-Карло.
percentile = 0.1
normalized_rating = (rating * (1 – percentile * 2))/max_rating + percentile
Берется случайное число от 0 до 1. Если рейтинг статьи больше или равен этому числу, статья попадает в рекомендованные. Параметр percentile можно увеличить, чтобы уменьшить влияние рейтинга на попадание в рекомендованные. percentile = 0 — самая рейтинговая статья всегда попадает в рекомендованные; percentile = 0.5 — рейтинг не влияет на вероятность попадания в рекомендованные.
Для вспомогательного финансирования сделана интеграция с Яндекс.Деньгами — пользователи могут отправлять донаты.
Административный интерфейс системы был настроен с использованием фреймворка Django и кастомизирован под требования заказчика. Для реализации бизнес-потребностей проекта мы сделали задание очереди рекламных баннеров в разных форматах и на разных страницах сайта.
Кроме этого, заказчик попросил сделать в админке управление страницами ошибок 404 и 500 — это деталь, о которой многие владельцы сайтов не думают.
Как и во всех разработанных нами админках, всеми сущностями меню можно гибко управлять (CRED).
Мы сделали новый дизайн и брендинг проекта. Этот этап занял полгода. Дизайнер делал макеты в Sketch. Скриншоты макетов мы выгрузили в веб, чтобы команда могла понимать, как происходит навигация по сайту (Marvel тогда еще не слишком использовали).
Над проектом работали 6 разработчиков, 1 QA специалист и менеджер проекта. В общей сложности проект занял около 2,5 лет.
Важным для меня итогом стало то, что Биомолекула сильно поднялась в рейтинге SimilarWeb. Если сравнить последние 3 года с 3 годами до запуска нового софта, можно увидеть двукратный прирост пользователей и сессий.
Основная заслуга в этом Антона и его команды, которая сумела выстроить редакторские процессы так, что контента стало еще больше. Но я горжусь, что моя команды стала частью этого проекта.
Мы продолжаем разработку, на очереди — новые доработки по функционалу сайта, в том числе возможность «пожертвований». Пользователи смогут голосовать за определенную статью или интересную им тему, платить за нее, и она будет выходить. Таким образом пользователи сами выбирают для себя полезный и интересный им контент.
Узнайте, сколько стоила разработка сайта для научно-популярного журнала в WB—Tech.
Никакого спама, только анонсы новых статей
asdf s,dn aksnkasn daksnld lkas
ИП Гришанин Кирилл Олегович
ИНН 774313842609
Б. Новодмитровская ул., 36, стр. 12, вход 6,
Москва, Россия, 127015
Ahad Ha'am 54,Tel Aviv-Yafo,Израиль