Свой агрегатор новостей с преферансом и дамами.
Привет, Кадабра!
Оффтоп про то, как я писал кривой код и пилил агрегатор новостей. Если интересно, как это было и что из этого вышло - прошу под кат.
Если материал вообще не годится для кадабры - ногами не пинать, просто проголосуйте в опросе, и я удалю пост.
Ссылка на результат года трудов и кучи бессонных выходных - в конце.
Пару лет назад мне было стало просто лень каждый день заходить на одни и те же 5-10 сайтов перед сном и вспоминать, что я читал утром, а что нет. Кроме того интересные сайты с нерегулярным обновлением моментально забывались. Выхода было 3:
1) RSS. Минусы: не совсем понятно как быть с мобильными устройствами и не все сайты поддерживают RSS, да и технология устаревшая.
2) Ленты соц сетей - неплохое решение, но контент в основном "быстрый", да и популярные паблики однотипны. "Серьезного" контента крайне мало. Кроме того, испытываю некоторое отторжение и не люблю пользоваться соц. сетями.
3) Агрегаторы новостей. Минус - не совсем гибкая настройка. Можно выбрать только тематику, а остальное за тебя решат. [UP: оказывается anews.ru теперь тоже предлагает выбор именно конкретных источников и теперь не требуется регистрация, но просмотр все еще не очень удобен]
В итоге было решено подключить свои школьные навыки программирования на turbo pascal и в свободное время запилить свой ресурс :) Мысль эта отлеживалась, но 12 месяцев назад я собрал сопли в кулак, и, закончив прокрастинировать, приступил.
Как это обычно бывает, реальный dev процесс оказался гораздо интересней первоначальных планов и затянулся на целый год вместо пары месяцев.
Как это было
1) Выбор дизайна.
В разработку, что бы было веселее, обещаниями миллионной аудитории и золотых гор от рекламы был заманен друг :). Было решено брать готовый велосипед, а не изобретать свой, так как навыки дизайнеров позволяли сделать только что то подобное:
.
Из подборки шаблонов ( http://blog.zizaza.com/design-news/369-responsive-psd-web-templates-25-free-templates ) выбрали несколько вариантов, а после остановились на Zeni: http://luiszuno.com/themes/zeni/
Так как принцип работы планировался максимально простым, решили не использовать вордпресс, а сделать одну страницу со скриптом, без всяких регистраций и пр.
2) Настройки.
Идея предполагала выбор сайтов для отображения и для этого требовалась панель с настройками. Идею кнопок нагло стырили у яндекс диска:
.
Когда дизайн был допилен под наши нужды я перешел к, непосредственно, написанию скриптов загрузки материалов с выбранных сайтов. И сразу же начались трудности.
3) Трудности.
.
Сначала оказалось, что современные браузеры содержат довольно строгие требования к безопасности и нельзя просто так взять и загрузить код другой страницы через javasript.
Решение этой проблемы заняло несколько дней. Результатом стал php-скрипт в который передается url, и который возращает html код страницы.
С некоторыми сайтами были проблемы с кирилицей из-за кодировки. На перевод всего в UTF-8 ушло еще несколько дней.
После того, как мы получили html код нужных страниц, из него нужно было получить отдельные новости и отобразить их на странице, упорядочив по дате/времени.
Для того, что бы обработать html код я стал записывать его в iframe'ы, откуда уже брал только материалы по заданным условиям. Кстати условия пришлось делать индивидуальные для каждого сайта, но сам алгоритм получился почти универсальным.
Неразрешимая проблема была только с vk.com - получаемая по php страница содержала очень мало постов, так как их загрузка происходит динамически. С горечью на душе, было решено забить на пацанские паблики.
Пример условий для поиска постов.
html код страниц до обработки пришлось немного править, так как скрипты сайтов вешали страницу, а путь к картинкам часто был не абсолютным а относительным и они не грузились.
Примерно через 4-6 месяцев после начала работ на главной странице уже кое как выводились материалы из выбранных источников.
Тут возникла новая проблема: как упорядочить их по дате, если время указывается не всегда, и в разных форматах?
Совершенно случайно, через пару недель, друг натолкнул на гениальную мысль - брать с сервера дату изменения титульной картинки в новости. Способ оказался применим для 80% источников и выдавал унифицированные результаты, с точностью до секунды. Было всего пара недостатков:
- кое где (например, на youtube) картинки генерировались динамически и дата изменения всегда совпадала с текущим временем;
- Загрузка информации о 100 постах (10 сайтов) занимала около 10 секунд. Ждать приходилось при каждой загрузке страницы;
На том этапе было решено не заморачиваться с этим и двигаться дальше, ведь 80% результата достигаются за 20% времени ;)
Оставался последний шаг на пути к работоспособной альфа-версии. Хотелось сделать не просто коллекцию ссылок с картинками, а полноценный ресурс, на котором все материалы будут открываться в всплывающем окне, без перехода на новую вкладку.
И как всегда - новая проблема. Некоторые популярные сайты (например пикабу) запрещают загрузку в ifame, поэтому пришлось использовать уже готовый php-скрипт загрузки сайтов, с последующей дополнительной обработкой html кода, что бы страница была похожа на оригинал.
Такой способ оказался даже более удобным, так как страницы загружались быстрее и были менее требовательны к ресурсам, так как все скрипты на них удалялись.
Через 8-10 месяцев первый этап был завершен, но все еще оставалась куча дел: дизайн требовал доработки, были большие проблемы с производительностью и нагрузкой на сервер из-за php-скриптов, работа сайта на мобильных устройствах была просто ужасной.
4) Оптимизация.
Первой проблемой была долгая загрузка агрегатора из-за запросов даты/времени каждого поста с серверов. Решение было простым, как молоток: даты загруженных новостей и их url надо было сохранять в локальное хранилище и при следующей загрузке получать дату/время только для новых материалов. При ежедневных посещениях это в несколько раз сокращает скорость загрузки агрегатора. Кроме того, такая информация позволила отмечать просмотренные материалы и загруженные в первый раз, что увеличило удобство.
Второй проблемой была производительность. На десктопе все работало более-менее сносно, но вот время загрузки на, все еще актуальном, Ipad 2 составляло от 30 до 60 секунд! В какой то момент, когда я уже свыкся с мыслью о переходе на Air 2, случайно натолкнулся в сети на эксперементальную фишку под названием DOMParser() https://developer.mozilla.org/en-US/Add-ons/Code_snippets/HTML_to_DOM . Она позволяет обработать голый html код и выбрать из него нужные обьекты без использования iframe'ов, прямо на лету. Ее применение сократило время загрузки страницы на ipad 2 c 45 секунд, до 15. В 3 раза! Это был epic win!
Но все еще ставались проблемы с вылетами на моб. устройствах из-за нехватки оперативной памяти. Обнуление переменных после выполнения каждой итерации цикла, там где это было возможным, помогло и дополнительно сократило время загрузки на 20-30%. Видимо, встроенный сборщик мусора в js, который должен освобождать память от ненужных данных, работает так себе.
В итоге после всех оптимизаций работать на ipad 2 сайт стал очень прилично.
5) Вконтакте.
Все первостепенные задачи, кроме одной, были решены. Не получалось получить данные с vk. Поиски привели к vk api и методу wall.get http://vk.com/dev/wall.get . Результатом выполнения запроса была xml строка, которую удалось преобразовать в обьект и выбрать из нее нужные элементы, включая ссылки на картинки. Кроме того в обьекте содержалась дата/время в удобном формате, а скорость загрузки и обработки xml была просто моментальной.
Победа над vk позволила добавить кучу топовых пабликов на сайт всего за один вечер, так как нужно было менять всего пару параметров обработки: лого паблика, его название и ссылку.
Выбирал из топовых групп, на основе данных с http://borgi.ru/stat/ . Спустя 9 лет с момента запуска, я, наконец, открыл для себя дно интернета :) И оказалось, что контент там бывает очень даже неплохим.
Вот до чего доводит неправильное хобби
После успеха с вк, я перевел часть сайтов на загрузку данных по RSS (там не требовалась получение даты) и за один вечер прикрутил facebook. Facebook, кстати, имеет очень простую front-end архитектуру - чувствуется, что он писался гораздо раньше vk.
Что в итоге
Я на 146% реализовал свои задумки, и они даже неплохо работают на мобильном железе. Особенно приятно расслабится после трудового дня и прочитать материалы со всех сайтов, просто листая их стрелками на клавиатуре.
За время разработки очень сильно втянулся в написание кода. Это шикарная разминка для ума, которая неплохо доставляет при нахождении элегантного решения проблемы или достижении поставленных целей.
Так как сайт сделан для личного пользования, то никакой рекламы, комментариев, лайков и регистрации.
Пришлось вложить на порядок больше времени и сил, но оно того стоило. Теперь хочется поделится плодом бессонных ночей с социумом и выбор пал на вас, Кадабра :)
Буду признателен за комментарии, а так же за ссылки на интересные ресурсы, для добавления в агрегатор.
А вот и он: http://i-c-a.su
Оффтоп про то, как я писал кривой код и пилил агрегатор новостей. Если интересно, как это было и что из этого вышло - прошу под кат.
Если материал вообще не годится для кадабры - ногами не пинать, просто проголосуйте в опросе, и я удалю пост.
Ссылка на результат года трудов и кучи бессонных выходных - в конце.
Пару лет назад мне было стало просто лень каждый день заходить на одни и те же 5-10 сайтов перед сном и вспоминать, что я читал утром, а что нет. Кроме того интересные сайты с нерегулярным обновлением моментально забывались. Выхода было 3:
1) RSS. Минусы: не совсем понятно как быть с мобильными устройствами и не все сайты поддерживают RSS, да и технология устаревшая.
2) Ленты соц сетей - неплохое решение, но контент в основном "быстрый", да и популярные паблики однотипны. "Серьезного" контента крайне мало. Кроме того, испытываю некоторое отторжение и не люблю пользоваться соц. сетями.
3) Агрегаторы новостей. Минус - не совсем гибкая настройка. Можно выбрать только тематику, а остальное за тебя решат. [UP: оказывается anews.ru теперь тоже предлагает выбор именно конкретных источников и теперь не требуется регистрация, но просмотр все еще не очень удобен]
В итоге было решено подключить свои школьные навыки программирования на turbo pascal и в свободное время запилить свой ресурс :) Мысль эта отлеживалась, но 12 месяцев назад я собрал сопли в кулак, и, закончив прокрастинировать, приступил.
Как это обычно бывает, реальный dev процесс оказался гораздо интересней первоначальных планов и затянулся на целый год вместо пары месяцев.
Как это было
1) Выбор дизайна.
В разработку, что бы было веселее, обещаниями миллионной аудитории и золотых гор от рекламы был заманен друг :). Было решено брать готовый велосипед, а не изобретать свой, так как навыки дизайнеров позволяли сделать только что то подобное:
.
Из подборки шаблонов ( http://blog.zizaza.com/design-news/369-responsive-psd-web-templates-25-free-templates ) выбрали несколько вариантов, а после остановились на Zeni: http://luiszuno.com/themes/zeni/
Так как принцип работы планировался максимально простым, решили не использовать вордпресс, а сделать одну страницу со скриптом, без всяких регистраций и пр.
2) Настройки.
Идея предполагала выбор сайтов для отображения и для этого требовалась панель с настройками. Идею кнопок нагло стырили у яндекс диска:
.
Когда дизайн был допилен под наши нужды я перешел к, непосредственно, написанию скриптов загрузки материалов с выбранных сайтов. И сразу же начались трудности.
3) Трудности.
.
Сначала оказалось, что современные браузеры содержат довольно строгие требования к безопасности и нельзя просто так взять и загрузить код другой страницы через javasript.
Решение этой проблемы заняло несколько дней. Результатом стал php-скрипт в который передается url, и который возращает html код страницы.
С некоторыми сайтами были проблемы с кирилицей из-за кодировки. На перевод всего в UTF-8 ушло еще несколько дней.
После того, как мы получили html код нужных страниц, из него нужно было получить отдельные новости и отобразить их на странице, упорядочив по дате/времени.
Для того, что бы обработать html код я стал записывать его в iframe'ы, откуда уже брал только материалы по заданным условиям. Кстати условия пришлось делать индивидуальные для каждого сайта, но сам алгоритм получился почти универсальным.
Неразрешимая проблема была только с vk.com - получаемая по php страница содержала очень мало постов, так как их загрузка происходит динамически. С горечью на душе, было решено забить на пацанские паблики.
Пример условий для поиска постов.
html код страниц до обработки пришлось немного править, так как скрипты сайтов вешали страницу, а путь к картинкам часто был не абсолютным а относительным и они не грузились.
Примерно через 4-6 месяцев после начала работ на главной странице уже кое как выводились материалы из выбранных источников.
Тут возникла новая проблема: как упорядочить их по дате, если время указывается не всегда, и в разных форматах?
Совершенно случайно, через пару недель, друг натолкнул на гениальную мысль - брать с сервера дату изменения титульной картинки в новости. Способ оказался применим для 80% источников и выдавал унифицированные результаты, с точностью до секунды. Было всего пара недостатков:
- кое где (например, на youtube) картинки генерировались динамически и дата изменения всегда совпадала с текущим временем;
- Загрузка информации о 100 постах (10 сайтов) занимала около 10 секунд. Ждать приходилось при каждой загрузке страницы;
На том этапе было решено не заморачиваться с этим и двигаться дальше, ведь 80% результата достигаются за 20% времени ;)
Оставался последний шаг на пути к работоспособной альфа-версии. Хотелось сделать не просто коллекцию ссылок с картинками, а полноценный ресурс, на котором все материалы будут открываться в всплывающем окне, без перехода на новую вкладку.
И как всегда - новая проблема. Некоторые популярные сайты (например пикабу) запрещают загрузку в ifame, поэтому пришлось использовать уже готовый php-скрипт загрузки сайтов, с последующей дополнительной обработкой html кода, что бы страница была похожа на оригинал.
Такой способ оказался даже более удобным, так как страницы загружались быстрее и были менее требовательны к ресурсам, так как все скрипты на них удалялись.
Через 8-10 месяцев первый этап был завершен, но все еще оставалась куча дел: дизайн требовал доработки, были большие проблемы с производительностью и нагрузкой на сервер из-за php-скриптов, работа сайта на мобильных устройствах была просто ужасной.
4) Оптимизация.
Первой проблемой была долгая загрузка агрегатора из-за запросов даты/времени каждого поста с серверов. Решение было простым, как молоток: даты загруженных новостей и их url надо было сохранять в локальное хранилище и при следующей загрузке получать дату/время только для новых материалов. При ежедневных посещениях это в несколько раз сокращает скорость загрузки агрегатора. Кроме того, такая информация позволила отмечать просмотренные материалы и загруженные в первый раз, что увеличило удобство.
Второй проблемой была производительность. На десктопе все работало более-менее сносно, но вот время загрузки на, все еще актуальном, Ipad 2 составляло от 30 до 60 секунд! В какой то момент, когда я уже свыкся с мыслью о переходе на Air 2, случайно натолкнулся в сети на эксперементальную фишку под названием DOMParser() https://developer.mozilla.org/en-US/Add-ons/Code_snippets/HTML_to_DOM . Она позволяет обработать голый html код и выбрать из него нужные обьекты без использования iframe'ов, прямо на лету. Ее применение сократило время загрузки страницы на ipad 2 c 45 секунд, до 15. В 3 раза! Это был epic win!
Но все еще ставались проблемы с вылетами на моб. устройствах из-за нехватки оперативной памяти. Обнуление переменных после выполнения каждой итерации цикла, там где это было возможным, помогло и дополнительно сократило время загрузки на 20-30%. Видимо, встроенный сборщик мусора в js, который должен освобождать память от ненужных данных, работает так себе.
В итоге после всех оптимизаций работать на ipad 2 сайт стал очень прилично.
5) Вконтакте.
Все первостепенные задачи, кроме одной, были решены. Не получалось получить данные с vk. Поиски привели к vk api и методу wall.get http://vk.com/dev/wall.get . Результатом выполнения запроса была xml строка, которую удалось преобразовать в обьект и выбрать из нее нужные элементы, включая ссылки на картинки. Кроме того в обьекте содержалась дата/время в удобном формате, а скорость загрузки и обработки xml была просто моментальной.
Победа над vk позволила добавить кучу топовых пабликов на сайт всего за один вечер, так как нужно было менять всего пару параметров обработки: лого паблика, его название и ссылку.
Выбирал из топовых групп, на основе данных с http://borgi.ru/stat/ . Спустя 9 лет с момента запуска, я, наконец, открыл для себя дно интернета :) И оказалось, что контент там бывает очень даже неплохим.
Вот до чего доводит неправильное хобби
После успеха с вк, я перевел часть сайтов на загрузку данных по RSS (там не требовалась получение даты) и за один вечер прикрутил facebook. Facebook, кстати, имеет очень простую front-end архитектуру - чувствуется, что он писался гораздо раньше vk.
Что в итоге
Я на 146% реализовал свои задумки, и они даже неплохо работают на мобильном железе. Особенно приятно расслабится после трудового дня и прочитать материалы со всех сайтов, просто листая их стрелками на клавиатуре.
За время разработки очень сильно втянулся в написание кода. Это шикарная разминка для ума, которая неплохо доставляет при нахождении элегантного решения проблемы или достижении поставленных целей.
Так как сайт сделан для личного пользования, то никакой рекламы, комментариев, лайков и регистрации.
Пришлось вложить на порядок больше времени и сил, но оно того стоило. Теперь хочется поделится плодом бессонных ночей с социумом и выбор пал на вас, Кадабра :)
Буду признателен за комментарии, а так же за ссылки на интересные ресурсы, для добавления в агрегатор.
А вот и он: http://i-c-a.su
Удалить пост?
Удаляй! кг/ам и оффтоп! Это не для уютненькой.
3
14.3%
Бывало и хуже, можно оставить.
18
85.7%
проголосовал 21 пользователь
При повторной загрузке появится, но будет прочитанным. Что бы пропал при повторной загрузке совсем сделал опцию "Скрывать просмотренные".
а в авто - жж сообщество ручп
Заметил, что в РУ_ЧП не отображаются посты, где видео из ютуба встроенное, а не прикреплено к посту. Хорошо что таких постов мало ;) В течении дня попробую поправить ;)
Warning: file_get_contents(http://https:) [function.file-get-contents]: failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /home/x/xtrime/i-c-a.su/public_html/shit_coding/loader.php on line 36
2) за 3 столбика я бы на костре сжигал
3) остальное вроде не сильно бросается в глаза
MAC OS:
WIN 7:
В винде, действительно, как то не очень, попробую поправить. Особо не обращал внимание, так как сижу на маке )
Из всего, что есть в настройках, иногда просматриваю Фишки и все. Там можно ввести свой собственный ресурс? если нет - смысла не вижу.
Спасибо за созидание, молодец! :)
Факт добавления новых постов можно проверять по данным в столбце "обновлен".
Щас пришла одна мысль: можно же сделать сервисный аккаунт для агрегатора, а php вроде как может передавать логин и пароль на сервер: http://www.electrictoolbox.com/php-file-get-contents-sending-username-password/ , если все так просто, как написано по ссылке то уютненькую можно будет добавить без особых проблем в течении пары дней.
пользователю придется знать азы html разметки, так как для добавления ресурса нужно указать путь до каждого элемента статей: класс статьи, заголовок, картинка, ссылка и тд. в таком виде:
Вторая проблема - сохранение настроек, так как я ненавижу регистрации, то придется добавлять свои ресурсы на каждом своем устройстве отдельно (компьютер, планшет и тд).
Самое простое решение - скинуть сюда список ресурсов, которые интересны именно вам и я их добавлю, обычно на добавление 1 ресурса уходит от 30 секунд до 10 мин.
PS. На anews тоже нельзя добавить свои ресурсы, но там каталог ресурсов внушительный.
По поводу анимаций - они есть только у загруженных в первый раз материалов, при повторной загрузке анимаций нет.
Инструкцию справа тоже планирую убирать вообще и, соответственно, настройки растянутся во весь экран.
Ну за дизайн ниче сказать не могу - как получилось, так получилось, изначально тема была бело-розовая)
Загрузка страницы - наверное все же оставлю. Люблю я блур и бегущие символы )
А по поводу времени могу сказать, что за 2 месяца использования время проводимое в интернете даже немного сократилось, но используется более интенсивно.
Свой агрегатор делал по 2 причинам: 1) хотелось сделать :) 2) anews не всем устраивает.
Сам для своих целей пользуюсь inoreader, для сайтов без rss/atom использую feed43.
По сути вопроса: написать публичный проект - это всегда круто.
2. На сайте в статьях шрифт замылен адово.
1. Как минимум в группах vk и facebook нет RSS. На пикабу тоже. Если же ограничиваться только новостными сайтами, то, безусловно, RSS удобен. Для сайтов без РСС на выручку может придти feedly, но я о нем недавно узнал, понятия не имею удобно ли им пользоваться. Кстати следующим делом напишу возможность самостоятельно добавлять любые RSS и группы vk и fb, вот тогда можно будет сказать, что ресурс чем то выделяется от остальных агрегатов.
2. Если я правильно понял, то шрифт мылится вот тут:
Это происходит из за того, что сайты без адаптивной верстки надо сжимать в размерах, для того что бы они помещались на экране. Можно либо расширить окно, что бы сайты помещались без сжатия, либо выбрать "Не масштабировать статьи", но тогда нужно будет скроллить.
За последние пол года я продвинулся от версии 1.2.6 до 1.5.0. Кроме того, месяц назад, мой пост про сайт (аналогичный этому посту) вышел в горячее на пикабу, что добавило мотивации.
Что изменилось:
1) Долгожданный нормальный одноколоночный вид (лента). Теперь картинки в одноколоночном режиме отображаются в полном размере, а их высота ничем не ограничена. Не сравнить со старым убожеством :) (дизайн предложил один из коментаторов на пикабу, спасибо ему).
2) Есть возможность добавлять свои группы vk и ленты RSS. Группы fb тоже можно, но c ними появились проблемы. (о них ниже).
3) Переключение между плиточным видом и лентой теперь - одним нажатием на большую иконку, без перезагрузки.
4) Так как по умолчанию прочитанные посты скрываются, то сделал быстрый доступ к просмотренным материалам (кнопка рядом с кнопкой переключения вида.)
5) Ускорение и повышение стабильности загрузки.
Пояснения для it-шников: Благодаря волшебной функции .detach() при загрузке и просмотре материалов из html кода удаляются все новости, что должно снижать нагрузку на ЦП и оперативу. Как только просмотр новостей/загрузка закончены, материалы возвращаются в код из переменной. Все манипуляции с dom элементами при загрузке теперь так же происходят внутри переменной, а не в html коде. Так же добавлен интервал 50мс между загрузкой источников, благодаря этому источники теперь загружаются стабильнее. Исключение составляют fishki_net и zr_ru - периодически с их загрузкой возникают проблемы (причина на их стороне, возможно со временем проблемы исчезнут)
6) Оптимизации при просмотре.
Пояснения для it-шников: Решены проблемы с просмотром материалов на IOS (скакал скролл, моргало и глючило окно с материалом...). На помощь пришла высота iframe в px и другие css ухищрения.
Известные проблемы:
1) facebook периодически показывает капчу вместо материалов, для стабильной работы придется регестрироваться в facebook, и использовать api.
2) Периодически перезагружается на IOS. Вероятно, переполняется оперативная память, жду новых версий IOS.
К сожалению, у меня нет устройств на android, так что проверить работоспособность в мобильном хроме не могу, если есть проблемы - пишите, поправлю.
Выпустил версию 1.6.0:
1) "Яндекс Новости": Добавил раздел со ссылками на 5 свежих новостей и котировками валют и нефти. (На яндекс часто захожу ради этого раздела, так что добавил для удобства);
2) Дизайн: удалил все тени, сделал дизайн максимально плоским.
3) Фейсбук: наконец зарегестрировал приложение и получил доступ к api. Теперь никаких капч и других проблем с отображением материалов из групп facebook.
4) Гифки на 9gag.com: так и не дождался пока рукожопы из 9gag поправят отображение гифок на IOS и поправил сам ;)
Что впереди:
В выходные приступаю к раскрутке сайта. Планирую прикупить рекламы на ютубе и в пабликах вк... Если тут есть знающие люди, то буду признателен за советы по раскрутке...
ну и ссылку оставлю: http://i-c-a.su/
Сегодня и вчера доделывал найденные после обновления недочеты, так что может сейчас проблема пропадет...
Refused to display 'http://lenta.ru/articles/2016/02/29/olegivanovich/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Вот как у меня происходит: (гифка 7 мегабайт...):