Начало
Началось всё в новогодние праздники, когда отдыхать уже надоело, а до начала рабочих будней оставалось ещё достаточно много времени. В голову, как обычно, лезли различные идеи и одну из них мне захотелось реализовать. И не так, чтобы набросать концепт и забросить (мне уже сложно сосчитать количество таких начинаний), а так, чтобы пройти весь путь с нуля и до запуска, не откладывая это в долгий ящик.
Идея рейтингового новостного агрегатора не нова. В сети есть как успешные проекты, так и не очень. Все со своими плюсами и минусами. Я люблю читать новости, люблю читать их свежими, поэтому я часто пользовался подобными проектами и постепенно формировалось видение того, как бы я реализовал эту идею сам. И я начал.
Первым делом я пообещал себе, что не буду затягивать разработку, как это часто бывает с side-проектами и запущу рабочий прототип в максимально сжатые сроки. Для этого было необходимо использовать максимально знакомый стек технологий, чтобы не тратить время на «вхождение». На тот момент это были PHP + Phalcon Framework в качестве backend, MySQL в качестве БД, Beanstalkd в качестве менеджера очередей.
Начал я с разработки плана архитектуры приложения. В итоге оно представляло из себя 4 практически независимые друг от друга части:
- Web-сервер. Конечная точка, с которой взаимодействуют пользователи. Он должен быть максимально лёгким и выполнять лишь самые необходимые функции, а точнее одну функцию — отдавать контент. При необходимости таких серверов может быть несколько.
- Воркеры. Эта часть приложения отвечает за сбор и первичный анализ новостей и рейтингов. Воркеры должны легко масштабироваться для увеличения объёма обрабатываемой информации.
- База данных, планировщик задач и основной обработчик данных. Это сердце приложения. Оно управляет состоянием системы, планирует задачи для воркеров и подготавливает данные для Web-сервера.
- Панель администрирования. Часть приложения предназначенная для управления системой.
Все эти части взаимодействуют друг с другом через менеджер очередей Beanstalkd и объединены в единую виртуальную сеть через OpenVPN.
Процесс пошёл
В первый же день работы над скриптами меня постигло первое разочарование. Я столкнулся с серьёзными проблемами с производительностью и утечками памяти, на казалось бы простых операциях разбора RSS-лент, парсинга HTML и некоторых сопутствующих задачах. Как оказалось, многие (даже популярные) сторонние библиотеки всё ещё не готовы к работе в режиме демона. Когда скрипт работает по схеме: запустился, отработал, отдал контент и умер — всё хорошо. Но при долгой работе утечки памяти и внезапные падения начинают проявлять себя. Тут я понял, что если начну разбираться со всем этим — увязну на долго, а времени на это нет и я расчехлил свой node.js.
У меня был довольно большой опыт работы с node.js, но так вышло, что к тому времени я не писал на нём уже чуть больше полугода, поэтому нужно было вернуться «в тему». Вопреки моим опасениям, через два дня я снова полностью проникся его атмосферой, как будто и не было этого перерыва и дело завертелось с новыми оборотами.
Дизайн
Дизайн мне даётся очень нелегко, т.к. дизайнером я не являюсь. Я считаю, что у меня есть неплохое чувство вкуса, я могу отличить хороший интерфейс от плохого, люблю, когда всё сделано красиво, и даже где-то в глубине головы вижу «как должно быть». Но вот вынос этого видения за пределы головы даётся мне с большим трудом. Но дизайн нужно было сделать и сделать его хотелось хорошим. Я потратил достаточно много времени стараясь создать «лайтовый» приятный интерфейс. И на тот момент мне он даже казался красивым. Но сейчас я уже с ужасом вспоминаю его. Выглядела первая версия так:
Уже после запуска первой версии, когда голова немного остыла, я ещё раз взглянул на «это» и осознал, что выглядит оно ужасно и пользоваться этим не стал бы даже я сам. И я начал с начала. Не знаю, как так вышло, но то что получилось мне понравилось и нравится до сих пор. Сайт получил новое лицо и сейчас именно оно встречает посетителей.
Первая рабочая версия
Около полутора месяцев у меня ушло на создание первой рабочей версии, которую уже можно было тихонько выпустить на свет. К тому времени у меня уже был куплен домен и был свободный хостинг, как я думал, подходящей мощности. После развёртывания системы и сбора первичной информации, я приступил к отладке. Ещё около двух недель потребовалось на выявление самых крупных подводных камней, отладку алгоритмов и сбор источников данных.
Сайт начал работать, но мощностей стало быстро не хватать. VPS с 4Gb памяти и 4 ядрами CPU очевидно уже не справлялся со своей задачей. И я встал перед выбором: оптимизировать или добавлять мощностей. Оптимизация — процесс долгий, трудозатратный и не всегда предсказуемый по времени. Забегаю вперёд скажу, что оптимизацией я всё же занялся и занимаюсь до сих пор. В итоге удалось сильно снизить общую нагрузку на систему, но того сервера всё равно бы не хватило, поэтому тогда я принял решение — нужно больше
Переезд
Цены на сервера с нужными мне характеристиками на тот момент мне казались не оправдывающими себя. Простыми словами: столько мне было платить жалко и я начал искать выход из ситуации.
Поскольку основную нагрузку на сервер создавала база данных и часть системы, отвечающая за основные вычисления и планирование задач, я решил вынести её на сервер к себе домой. У меня на тот момент был MacBook Air 2013 с Core i7 и 8Gb памяти на борту, который я не использовал по причине перехода на MacBook Pro Retina. Я развернул на нём сервер и подключил по VPN к остальной сети. К счастью дома у меня был стабильный интернет, скорости которого хватало для нормального выполнения задач. MacBook Air, во многом благодаря своему быстрому SSD, стал отлично справляться с поставленной задачей.
Вносить изменения в структуру БД, которая к тому моменту уже выросла за несколько гигабайт, стало не так больно, ну и в целом физический доступ к серверу добавил удобств, в том числе более быстрое создание бекапов. Так сайт проработал около месяца, потихоньку допиливаясь и улучшаясь. Увеличение объёма обрабатываемых данных привело к тому, что нагрузка на MacBook Air значительно выросла. Он по прежнему без проблем с ней справлялся, но стал греться и соответственно шуметь вентилятором. Мне стало его жалко, всё таки он не предназначен для подобных задач, хоть и с достоинством их выдержал.
В этот момент я принял решение перенести сервер на машину более подходящую для этих целей. Был соблазн купить мощное десктопное железо, но боязнь перебоев электричества привела меня к покупки мощного ноутбука. Выбор пал на ноутбук фирмы DNS. Эти ноутбуки не могут похвастаться хорошим экстерьером: экран, клавиатура, корпус оставляют желать лучшего, но соотношение цена/начинка у них очень хорошее. Я взял модель с 4-х ядерным Core i7 и 8Gb памяти. Память я сразу расширил до 16Gb и вставил SSD Kingston KC300 на 180Gb. Обошлось мне это в 35000 рублей, что после падения рубля уже казалось довольно бюджетным решением.
Сервер исправно работает уже около четырёх месяцев в режиме 24х7 и полностью справляется со своей задачей. Чтобы немного охладить систему я установил его между колонок, так чтобы под днищем ноутбука мог свободно циркулировать воздух и немного снизил частоту процессора. В таком режиме даже летом температура процессора не поднимается выше 65 градусов, что вполне хороший показатель.
За это время я сталкивался с несколькими кратковременными отключениями электричества и интернета, но поскольку работа сайта не зависит напрямую от данного сервера, посетителям это сильно не мешает. Проявляется это лишь в том, что данные перестают обновляться на время простоя, что на коротких интервалах не очень критично и на данном этапе с этим можно жить.
Полёт нормальный
На данный момент сервис мониторит публикации в 28 странах. Интерфейс переведён на 10 языков, язык выбирается на основе настроек браузера. Дизайн сайта адаптивный, он одинаково хорошо выглядит на настольном компьютере, планшете и мобильном телефоне. Для мобильных устройств есть возможность сохранить ярлык, чтобы сайт работал в режиме приложения. Данные на сайте обновляются сами в режиме реального времени, а интерфейс реализован на AngularJS.
Сервис стал участником программы BizSpark от Microsoft. Хостинг Azure, предоставленный в рамках программы, очень помог и продолжает помогать в развитии проекта, за что я очень благодарен компании Microsoft. BizSpark — это действительно ценный вклад в развитие начинающих проектов.
Аудитория
Самый первый анонс сайта был опубликован в рубрике Сайт дня портала Ferra.ru. Так же я несколько раз выкладывал ссылку на Reddit, HackerNews, Twitter и воспользовался Трибуной проекта Цукерберг Позвонит. Там сервис приняли довольно неплохо и дали несколько ценных советов. На данный момент это всё продвижение сайта. Со временем появилось несколько обзоров сайта на зарубежных ресурсах и оттуда пришли первые постоянные посетители не из России. Несколько дней назад ссылка на сайт попала в топ портала DesignerNews.
В целом аналитика показывает, что проект нравится посетителям. За последние месяцы средняя длительность сеанса пребывания пользователя на сайте составила 30 минут, показатель отказов колеблется в районе 10-12%, а количество вернувшихся пользователей 65-70%. При этом 55% трафика — прямой, 35% — ссылки из обзоров и блогов. Остальные 20% — социальные сети и поиск. Заинтересованные пользователи возвращаются на сайт и превращаются в постоянных посетителей, что очень радует. Хотя в абсолютных цифрах посетителей пока меньше, чем хотелось бы.
Планы
Планов по улучшению функционала много и я потихоньку их реализовываю, к сожалению не так быстро, как хотелось бы, т.к. проектом я занимаюсь в свободное от основной работы время.
По внутренней архитектуре мне в первую очередь хочется перевести всю систему на использование Docker-контейнеров, отрефакторить части кода, которые перестали меня устраивать, настроить централизованный сбор логов со всех рабочих частей проекта и конечно же улучшить алгоритм ранжирования и его скорость.
Из видимых изменений я планирую ввести категории или теги, чтобы можно было ориентироваться по тематикам новостей, добавить возможность подписки на дайджесты новостей, окончательно решить проблему битых и дублирующихся ссылок и попробовать ввести возможность комментирования.
С последним сложнее всего придумать, как эту возможность контролировать, чтобы тролли и прочие неадекваты не устроили там очередное место для срача.
В мечтах есть научиться объединять новости одной тематики в сюжеты, но пока это отложено до лучших времён.
Мобильные приложения в планах и появятся они как только возникнет очевидная в них потребность у аудитории.
Я заметил, что скорость развития проекта прямо пропорциональна обратной связи от пользователей. Каждый раз, когда я вижу ссылку на сайт в чём-то блоге, обзор на новостном ресурсе или даже письмо от довольного пользователя на почте — работа начинает двигаться с новой скоростью. Обратная связь — это действительно очень важный мотивирующий фактор.
Заключение
Буду краток, т.к. статья и так получилась больше, чем я ожидал. Спасибо всем, кто дочитал. Постараюсь ответить на все вопросы в комментариях, у кого нет такой возможности, могут смело писать на почту mail@top.st. Ну и добро пожаловать.
Комментарии (38)
vshemarov
03.06.2015 12:44Я так понял, что считается какой-то рейтинг новостей. А принцип какой?
BVadim Автор
03.06.2015 12:47За основу для рейтинга берутся шейры и лайки публикаций в социальных сетях + характеристики источника. Дальше по формуле вычисляется рейтинг статьи.
xSomeonEx
03.06.2015 15:21+1Получился частичный аналог mediametrics.ru
BVadim Автор
03.06.2015 15:30Медиаметрикс берёт данные счётчиков LiveInternet и ограничен ресурсами, которые используют этот счётчик. У них есть преимущества в готовой категоризации, готовой информации о пользователях и регионах. У меня нет возможности получать эту информацию в таком удобном виде, но некоторые из этих проблем решить удалось. Как бонус — мониторинг новостей практически по любому региону, где пользуются социальными сетями. Большая часть активных пользователей сервиса до сегодняшнего дня была за пределами РФ.
Так же я старался сделать интерфейс, которым будет пользоваться приятнее, чем конкурирующими сервисами. Например, на современных мобильных устройствах всё работает так же гладко, как и на компьютере. Медиаметрикс этим похвастаться не может, для мобильных там сильно упрощенная версия. Конечно момент спорный является ли это киллер-фичей. Но есть те, кто любит, чтобы было красиво. Я среди них.
fuCtor
03.06.2015 13:08+1Дизайн приятный, домен крутой, но вот пересортировка в момент обновления убивает. Все куда-то летит, меняется, в итоге теряешься где ты вообще читал и что.
BVadim Автор
03.06.2015 13:14В первой версии дизайна была кнопка паузы. В новую версию она пока не перешла, т.к. нет чёткого понимания, как взаимодействие с ней можно было бы организовать правильно. Само её наличие может привести к случайным нажатиям у пользователей, которые изначально не поняли её назначения и у них новости просто перестанут обновляться сами. Точно так же можно просто забыть её отжать. Но я согласен с тем, что иногда новости «улетают» во время чтения. Пока у меня нет чёткого представления, как решить эту проблему, не создав другую. Была идея сделать возможность помечать новости для последующего прочтения: прошёлся быстро по списку, отметил интересные, потом спокойно можно их прочитать.
Suntechnic
04.06.2015 00:04Хедер не должен уезжать при прокрутке страницы, а должен прилепляться к верху и становится чуть уже. Типа как тут: nash-krym.info/news
А кнопка должна быть переключателем в этом хедере типа как в админке битрикса переключатель режима редактирования, с явным положением Пауза/Плей.
Состояние кнопки запоминать в сессионных куках чтобы была отжата при следующем входе. Или другой вариант — переключатель имеет три положения Предохранитель/Одиночные/Очередь^W Автообновление/Пауза на 1 минуту/Пауза.
1 минута в данном контексте может так же являтся одним кликом на источник например.
ange007
03.06.2015 13:56Однозначно нужны 3 вещи:
— Групировка одинаковых новостей ( можно по процентному соотношению одинаковых слов в названии для начала, и в идеале нужно склонение слов при проверке ).
— Обновление новостей по тому-же принципу как сделано здесь ( в комментариях ) — просто кнопка «дозагрузить новости» со счётчиком сколько появилось новых новостей, а не постоянное обновление.
— Возможность регистрации ( через соц. сети ) и выбора/исключения источников ( хотя можно и в LocalStorage держать источники, и просто не выводить если что ).
А так интересно, хотя и не хватает «изображения» и «краткой новости», как на новостных сайтах.BVadim Автор
03.06.2015 14:15Группировку по простому сделать не получится, будет сильно глючить. Тут как минимум машинное обучение и разбор полного текста статьи для поиска похожих. Только по заголовку ошибок будет больше, чем профита, тем более если просто сравнивать похожие слова.
По поводу обновления не уверен, они появляются сильно быстрее, чем комментарии, нажимать каждый раз будет не удобно, да и теряется вау-эффект от реалтаймовости.
К регистрации и кастомизации скорее всего рано или поздно сервис придёт, вместе с возможность комментирования.
Изображения и текст не вводил, чтобы не нарушать авторских прав на контент. Договариваться с каждым источником пока возможностей нет.ange007
03.06.2015 14:451. Опять таки смотря что за группировка и как она будет производиться.
Если в реальном времени, то действительно не очень, хотя если изначально каждый пункт будет представлять из себя группу ( но не всегда активную ), со счётчиком количества, и возможностью раскрытия ( в которую просто добавляются другие статьи с таким-же заголовком, с учётом что при загрузке страницы статьи уже сгруппированы ) — то должно быть нормально.
2. Почему по заголовку будет много ошибок? Опять таки, если сильно об этом волнуетесь — можно добавить пользовательскую модерацию (с возможностью проставления оценок того подходит сюда эта статья или нет, хотя сильно конечно зависит от количества пользователей и реализации)
3. Насчёт обновлений — сейчас видно — что реалтаймовое обновление в том виде что сейчас не удобно для повседневного использования. Слишком много мельтешения и «непоняток», особенно при большом количестве одинаковых статей.
Так что очень было бы желательно — хотя-бы переключение режимов работы.
Например текущий режим + режим который описан мной ( то-есть та-же ваша «пауза», только с уведомлением о том что появились новые новости, и их можно обновить ).BVadim Автор
03.06.2015 15:09Режим паузы со счётчиком и умным обновлением скорее всего добавлю. Хорошая идея — спасибо.
По поводу группировки, согласен что это нужно. Но должно быть сделано хорошо, например, как это делает Яндекс.Новости. Хотя даже он иногда ошибается. Тут ещё проблема в том, что нужно уметь это делать на разных языках. В общем — это задача глобальная, пока я сосредоточись на более выполнимых в разумные сроки вещах.ange007
03.06.2015 17:11Ну по поводу группировки — смотря о каких языках идёт речь.
Ведь можно ведь и тестировать на нескольких языках ( русский, украинский, белорусский ) ( правила склонения вроде как не сильно отличаются ) для начала.
dannyzubarev
03.06.2015 14:37+1MacBook Air дома в качестве сервера базы данных – это, конечно, жестко. :)
Но работает очень классно. Всегда хотелось сделать что-то подобное, но не хватало времени чтобы получить готовый продукт. Удачи в вашем начинании!BVadim Автор
03.06.2015 14:43Спасибо, терпения и времени действительно понадобилось много. А MacBook Air показал себя в этой роли на удивление хорошо. Скорость чтения записи на SSD там в районе 700-720 Мб/с, поэтому с базой данных он работал ну очень быстро. Если бы не возросшая нагрузка на CPU так бы наверное и работал в этой роли. CPU кстати вполне справлялся, но не хотелось постоянно заставлять его работать вентилятором.
Invision70
03.06.2015 14:50www.google.com/s2/favicons?domain=habrahabr.ru
Не знал про сервис гугла для получения favicon в png, пригодится, спасибо :)BVadim Автор
03.06.2015 14:55У многих поисковиков есть подобные сервисы. Яндекс в том числе. Но они не документированы и могут в любой момент поменяться. Поэтому используем на свой страх и риск. Ну и обычно ограничения есть на большое количество запросов подряд. Для использования на странице одним пользователем проблем быть не должно.
ange007
03.06.2015 17:05А почему бы не кешировать иконки раз в день например, и отдавать со статики?
Ведь так действительно могут вообще отрезать от данного функционала по Referer`у.
Или Вы на данный момент исходите из того что-бы минимально нагружать сервер, но максимально нагружать клиент?BVadim Автор
03.06.2015 17:29Пока необходимости в этом не видел. Если вдруг что случиться — поменять не сложно. Альтернативы есть. Поэтому времени на это не тратил.
Dromok
03.06.2015 17:25А зачем он начинает передвигать новости, пока я их читаю? Какой в этом смысл? Из-за этого пользоваться невозможно! Я считаю, что пока сам пользователь не инициирует обновление новостей, то ничего делать не нужно. И надо помечать уже прочитанные новости, имхо надо реализовать по типу как в rss читалках (пример tinyrss.ru), то есть листаешь, а всё что выше помечается прочитанным.
BVadim Автор
03.06.2015 17:31По поводу движения новостей, в комментарии выше подсказали хорошую идею с паузой и возможностью подгрузить новое. Её внедрю через некоторое время. Можно будет выбрать режим, который больше нравится. Ещё думал цветом немного отличать новые новости от старых, но пока не пришел к хорошему решению. Сейчас отмечаются цветом только те на которые кликнули.
vershov
03.06.2015 18:18Живу в Германии, сайт показывает новости на финском, хочу читать на русском про Россию. :-)
BVadim Автор
03.06.2015 18:24Нет проблем. Кликаем на страну, открывается список. Выбираем нужную.
Первоначально место выбирается по GeoIP, он может ошибаться.vershov
04.06.2015 10:50Я к тому и веду, что проблема есть, кликал на текущую страну — ничего не происходило. (ff 38.0, ubuntu lts). Сегодня «победил» проблему: кликать надо не на страну, а на пустое место под ней.
BVadim Автор
04.06.2015 11:24Вот это странно. Второй репорт об этой проблеме, у меня пока повторить не получилось. Буду разбираться.
podust
03.06.2015 19:17С год назад, в качестве учебного приложения, я запилил что-то похожее: mc.hertzbeat.ru, но без рейтингов. Просто отобрал заведомо хорошие источники. Реализовал автоматическое теггирование и вычисление трендовых тегов. Но дальше дело не пошло, забросил. А жаль. Хотел еще добавить интересную статистику (типа там графиков корреляции количества самоубийств и популярности Internet Explorer), систему фильтров (по тегам, источникам, ключевым словам и т.д.) — надо все-таки вернуться к теме в ближайшее время.
IgaIst
04.06.2015 02:23Когда, и если, будете делать группировку новостей или персонализацию, то мультиязычность вашего проекта выйдет вам боком. Обработка текста часто требует склонение слов, наличия списка стоп-слов, выделение фактов в тексте — это всё будет новая объёмная задача для каждого языка.
Немного косяков:
В Opera(12.16) ваш агрегатор заболевшим выглядит:
скрин
BVadim Автор
04.06.2015 02:42Группировка и многоязычность уже не раз снились мне в страшных снах. Поэтому пока не занимался. Там нужно очень серьёзно к этому подходить. Для всех языков вредил получится сделать. Появится по мере возможности.
В старой опере всё так выглядит потому-что она не поддерживает FlexBox, который применён в вёрстке. Благо все современные браузеры его уже поддерживают, поэтому от поддержки старых версий было решено отказаться, в угоду функционалу.
В Firefox я проблем не наблюдаю, тестировал на MacOS, Windows, Ubuntu в относительно свежих версиях Firefox, начиная от января 2015 года. В какой версии проблема воспроизводится?
Assorium
10.06.2015 11:52Лайки и Шеры ничего не определяют, в топ выходят «более» раскрученные в соцсетях СМИ, но не более полезные. Все уже давным давно научились пользоваться ботами и биржами, чтобы продвигаться в соцсетях.
Поэтому могу Вас поздравить, Вы молодец, Вы сделали свой сервис и это реально круто, я всегда так делаю, но не ждите аудиторию.BVadim Автор
10.06.2015 15:11Ну во первых, в рейтинг добавляются только трастовые сайты, у них есть более важные занятия, чем заниматься накруткой лайков. Более раскрученные СМИ получают больше лайков, да, но это не всегда проблема, они не даром более раскрученные, они могут позволить себе подавать более качественный контент и пользователей в основном это устраивает.
Во вторых, метрики говорят, что аудитории проект нравится: средняя длительность сеансов около 40 минут, показатель отказов 13-15%. Те кому не понравилось в основном уходят сразу, остальные задерживаются на долго. Так что я всё же подожду =)
feedborg
Из существенных минусов:
— дублирование одних и тех же новостей. Я, конечно, могу ошибаться, но в данном случае контент намного важнее оформления.
— говноновасти от РТ, вот бы была возможность банить показ информации от некоторых новостных агентств
— просмотренное мной остается в списке. Вот прочитал я выборку, потом захожу позже и вижу, что часть просто пересортирована, что-то может и есть новое, но непонятно где. Мне кажется, эти 30 минут, которые вы написали, люди проводят, пытаясь понять, что там нового, а что уже было
BVadim Автор
Если Вы про одинаковые новости из разных источников, то да, такое есть, и пока объединять их в сюжеты сервис не умеет. Я писал об этом в планах, но до внятной реализации пока далеко.
По поводу источников новостей. Тут у всех свои вкусы. Самые жёлтые источники я постарался убрать. Кастомизации источников под пользователя нет. Появится ли — будет зависеть от спроса.
Просмотренные ссылки меняют цвет. Полностью не исчезают, это вполне обычное поведение.