15 ноября 2013 в 16:44

Используя силу JS во всех аспектах веб-проекта

Привет хабр! Хочу представить вам мой проект над которым я работал последние несколько месяцев. Это небольшой пост о том как в одиночку и без денег имея в запасе знание JS разработать небольшой веб проект, плагины для нескольких браузеров и мобильную версию к нему.

image

Предисловие


Меня всегда удручали закладки браузера или любые другие сервисы своей не информативностью. Довольно затруднительно найти нужную ссылку имея только фавиконку и заголовок. А если нужно найти конкретное видео или картинку в разросшейся коллекции закладок?
Одно время я просто сохранял URL-ы в txt файл, вел скрытую группу Вконтакте, делал заметки в Evernote, пользовался кучей сервисов. Все это привело меня к созданию Raindrop.io.

Под катом подробности и немного закулисья.

О проекте

image   image   image
Raindrop.io сохраняет не просто закладки, но и связанный с ними контент в зависимости от типа страницы. Если это статья например с хабра или лента.ру, она будет вырезана и сохранена вместе с закладкой.
Тоже самое касается видео, фото, коуба с Coub.com или презентации например c SlideShare.
Таким образом вы можете организовывать тематические коллекции с разным контентом.
Коллекции можно делать публичными и использовать в ваших приложениях или на сайте с помощью простого API. Мне очень интересно какие коллекции создадите вы! Примеры использования можно посмотреть здесь.

С мобильного вы можете использовать Raindrop например как сервис отложенного чтения статьей. Клиент для iOS доступен в AppStore. Для других платформ в скором времени.

Что скрыто под капотом?



  • На сервере работает Node.js+Express который выдает только статику и данные в JSON, на клиенте AngularJS, а мобильная версия на Appcelerator Titanium. Он позволяет писать нативные кроссплатформенные приложения под iOS, Android, Blackberry и др.
    Никаких проблем с одобрение в AppStore замечено не было. Понадобилась ровно неделя на апрув со стороны Apple.
  • Для парсинга статей модуль Node-Readibility. Изначально использовал открытое API от Readability но не ясно во сколько оно обойдется при большом количестве запросов, т.к открытого прайса у них нет. Есть еще Diffbot. Цены не кусаются, широкое API, возможность кастомизации парсера. Но вот скорость зачастую очень не радует. В среднем на одну страницу 3-5 сек и до бесконечности.
  • Так-же для точного определения типа страницы смотрятся мета-теги Open Graph и Twitter Cards. Они используются довольно часто и несут много полезной информации, например iframe плеера или превью, не говоря уже о заголовке и описание.
  • Написав расширение для Google Chrome очень просто портировать его в Safari. Единственное браузер от Apple не позволяет использовать куки для iframe в всплывающем окне расширения. Он их просто не сохраняет.
    Для оперы можно добавлять расширение от Chrome без изменений.

О каких то других аспектах могу рассказать подробнее в комментариях.

Аналоги

  • Pinterest — социальная сеть, ориентирована преимущественно на картинки, Raindrop же скорее ваша личная копилка любого контента
  • Pocket — сервис отложенного чтения статей, т. е имеет более узкое применение
  • http://kippt.com — похожий функционал, но визуальное отображение по моему мнению не очень удобное. Бесплатная версия с ограничениями.
  • https://icebergs.com — скорее для креативных людей. Имеет более широкий функционал (заметки, файлы). Бесплатная версия с ограничениями.
  • https://springpad.com — вместо коллекций записные книжки. Мне кажется имеет довольно излишний функционал. Кроме контента доступно создание рецептов, списков задач, точек на карте и мн. др.


Буду признателен любой обратной связи! Хочу поблагодарить администрацию Habrahabr за бесплатное предоставление аккаунта компании.
Автор: @exentrich
Raindrop.io
рейтинг 18,38
Компания прекратила активность на сайте
Похожие публикации

Комментарии (80)

  • +1
    Evernote идут по тому же пути, только не картинками отображают закладки, а текстом. Похожий, но более узконаправленный сервис сбора закладок для библиографии — Zotero (у них тоже свой веб-сервис для синхронизации). И про целую группу программ с ориентацией на поддержку научной работы и просто работы со статьями писали когда-то на Хабре. Хотелось бы увидеть более полных обзор (перечисление) аналогов.
    • +1
      Дополнил пост самыми близкими аналогами проекта
  • +1
    Скрытая группа вконтакте, неплохая идея.
  • 0
    Очень неплохо, спасибо. Я вот пользуюсь Pocket, так сложилось, и сложно внести в обиход новый сервис. Но ваш ответ Чемберлену достоин похвал, правда.
  • +1
    Либо я невнимательно читал, либо в статье не написано, есть ли оффлайн доступ к контенту с мобильных устройств?
    • +1
      В оффлайне пока к сожалению нет. На будущие версии запланировано!
  • 0
    Спасибо, понравилось. А где найти приложение для андройда?
    • 0
      Простите пока нет под андройд. В ближайшее время. В иллюстрации указан, чтобы показать, что Appcelerator Titanium позволияет легко писать кроссплатформенные приложения. Поэтому и в моем случае будет не так сложно портировать.
  • 0
    Было бы не плохо если вы добавите возможность входа при помощи аккаунта Google
    • +1
      Спасибо учту!
  • 0
    Очень удобно все выглядит! А есть возможность экспортировать закладки из других систем?
    • 0
      Пока нет. Но все пожелания с хабра реализую в первую очередь!
      • 0
        Даже просто CSV с URL было б отлично.
    • 0
      И очень симпатично
  • 0
    Проект понравился. Пока единственный минус который нашел, нет возможности добавить коллекции группой, хотя это минус заметен только при первоначальной настройке кабинета.
    • 0
      А что вы имеете введу под групповой коллекцией? Создать сразу несколько коллекций?
      • 0
        Да. после регистрации предлагает создать коллекцию, и сразу кидает в созданную коллекцию. Приходится возвращаться и нажимать еще раз новая коллекция, и так несоклько раз пока не забью все нужные мне категории)
        • 0
          Так их же можно создавать по ходу дела, прямо во время добавления страницы (по крайней мере через расширение Хрома). Жмем «добавить» — и тут же создаем новую коллекцию, если нужной еще нет.
        • 0
          Понял вас! Да наверное вы правы… подкоректирую
  • 0
    Интересно. Сам использую Evernote, но тут всё выглядит проще. Зарегистрировался добавил пару статей.
    Предлагаю при наведении на итем статьи в правом верхнем углу показывать крестик для удаления. Сейчас не совсем удобно делать 2 клика, чтобы удалить то, что уже прочитал.
  • 0
    Да, интересный проект — и по содержанию, и по технологиям.
    расскажите, а дизайн вы тоже самостоятельно делали или заказывали?

    и вот еще баг: если при авторизации через контакт нажать отмена, то
    Dump
    Express
    500 VkontakteAuthorizationError: User denied your request
    at Strategy.authenticate (/root/oblako2/node_modules/passport-vkontakte/lib/passport-vkontakte/strategy.js:79:23)
    at attempt (/root/oblako2/node_modules/passport/lib/passport/middleware/authenticate.js:243:16)
    at Passport.authenticate (/root/oblako2/node_modules/passport/lib/passport/middleware/authenticate.js:244:7)
    at callbacks (/root/oblako2/node_modules/express/lib/router/index.js:161:37)
    at param (/root/oblako2/node_modules/express/lib/router/index.js:135:11)
    at pass (/root/oblako2/node_modules/express/lib/router/index.js:142:5)
    at Router._dispatch (/root/oblako2/node_modules/express/lib/router/index.js:170:5)
    at Object.router (/root/oblako2/node_modules/express/lib/router/index.js:33:10)
    at Context.next (/root/oblako2/node_modules/express/node_modules/connect/lib/proto.js:190:15)
    at Context.actions.pass (/root/oblako2/node_modules/passport/lib/passport/context/http/actions.js:77:8)
    • 0
      Окей спасибо исправлю! Да дизайн тоже самостоятельно :) В общем и целом хотелось сделать все своими руками
  • 0
    А почему был выбран Appcelerator, а не PhoneGap можете рассказать?
    • 0
      Appcelerator позволяет делать имеено нативные приложения в противовес просто оберток в окне браузера как у PhoneGap.
  • 0
    Страдаю тем же самым: закладки неудобны, проблема синхронизации между браузерами, в итоге рабочий вариант — html-страница со ссылками, разбитыми по разделам, лежащая в дропбоксе. Спасибо за сервис, с удовольствием тестирую.

    О, кстати: а можно как-нибудь сделать экспорт (в тот же html)? С бэкапом было бы спокойнее, а то обидно было бы потерять нажитую непосильным трудом коллекцию.
    • 0
      Импорт и экспорт будет. Но вы меня навели еще на одну мысль, что если сделать возможность привязки своего дропбокса? Вы бы использовали?
      • 0
        Хм, а в каком виде вы хотите сделать привязку?
        • +1
          Т. е как это делают другие приложения для дропбокс. Будет создаваться отдельная папка и сохранятся ваши закладки. В каком виде еще точно сказать не могу…
          • 0
            Я и не знал, что у дропбокса есть такая возможность, ни разу не встречал таких приложений :)

            Но было бы очень даже неплохо. В каком виде — да хотя бы в виде связанных между собой html-файлов:

            1. Главная страница со списком коллекций
            2. По отдельной странице на каждую коллекцию

            Тут подойдет даже обычный статический html, без излишеств.
  • 0
    Все, повалили? Страница не добавляется, начинает крутиться «Страница обрабатывается», после чего всплывает иконка с крестиком, пропадает, и крутит «Страница обрабатывается» до бесконечности. Добавляю через расширение к Хрому.
  • 0
    Отличный проект.

    Я с удовольствием перетяну туда свою коллекцию рецептов.
    Но очень хочется тэгов, импорт/экспорт.

    И еще, можно запоминать последний выбор. Мне интересно хранить статью (кстати, данные статьи хранятся на сервере?) постоянно, а мне предлагается ссылка.
    • 0
      Да статьи хранятся на сервере! Не всегда можно точно определить является страница статьей или нет, поэтому если вы сами уверены смело выбирайте из выпадающего списка пункт «статья» :)
      А теги, импорт/экспорт будут обязательно!
      • 0
        Так вот и хочется настроечку — хочу, что бы всегда была статья.
    • 0
      Да, тэги — это и у меня на первом месте из желаемого
  • 0
    Редко пишу комментарии. Полтора часа искал модуль для nodejs. Но, похоже, он так и остался вместе со всеми материалами по проекту у партнера, с которым мы более не держим теплых отношений…

    Летом прошлого года я портировал оригинальный браузерный readability.js под nodejs с очень активным использованием парсера cheerio. Получилось даже вполне оперативненько… Три — четыре страницы в секунду любого содержания в один поток на одном ядре, хоть из выдачи ПС. (Компьютер был Атлон 4600 4gb, ssd). Я не анализировал медиа-контент на странице, только статьи. Очень жаль, что не смог найти скриптик. В продакшн проект так и не вышел, и был заброшен в пользу других, более перспективных. Для определения начала статьи в верстке страницы еще часто помогали rss.

    Я считаю, что я дилетант в этом деле, там было куда двигаться в оптимизации. Но если бы я вернулся во времени, и занимался этим проектом снова, думаю, выбрал бы реализацию того же алгоритма readability но на си, чтобы можно было подключить контролы к ноде.
  • 0
    Мне кажется, с сайтами с https не пашет расширение. Выдает 501/302 ошибки. остальные норм
    • 0
      Разумеется, сервер приложения не сможет воспользоваться Вашим ключем для извлечения статьи из приватной страницы.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Прикольная штука, будем потестить
  • –1
    Всё хорошо, но я не могу войти к Вам на проект через соц сеть, так как не использую Facebook, Twitter или Вконтакте. Зато я использую Одноклассники, Mail.ru и Google+, как раз то чего нет :/
    • 0
      1. Зачем после каждого создания коллекции мне предлагают установить расширение для браузера, если оно уже было установлено?
      2. Пришлось подумать как вернуться назад в коллекции после установки расширения. Не сразу поймёшь, где спряталсь кнопка :)
      3. Дизайн красив :)
  • 0
    Пожалуй, еще раз подчеркну что нужно иметь возможность просто слить все из Pocket + Тэги
  • 0
    А удалить как массово? По одной закладке удалять не удобно, надо в карточку заходить. Да и еще это окно дурацкое, я нажимаю кнопку удалить, а мне появляется окно «вы точно хотите удалить?», чёрт побери конечно хочу если я нажимаю на кнопку удалить. Зачем лишние диалоговые окна.
    Также надо проверку на добавленные закладки, одну и туже можно несколько раз добавить в коллекцию. Да и определяется не правильно, даже при указании типа. Еще было бы не плохо, при помощи инструмента выделить область на странице которую хотел бы сохранить (например, несколько картинок в разные коллекции)
    • 0
      Насчёт диалогового окна «вы точно хотите удалить?», есть хорошее решение. Его не выводить, а сразу после удаления клипа, добавить кнопку «отмена удаления».
  • 0
    а что по поводу расширения для огнелиса? планируется?
    • 0
      Конечно! В ближайшее время
  • 0
    а есть буркмарклет для Safari iOS чтобы добавлять в закладки когда браузишь на iPad например? Evernote имеет — но, к сожалению, немного коряво сделано уних.
  • 0
    в настройках коллекции неплохо было бы добавить пункт «указать тип добавления по умолчанию для этой коллекции auto|картинка|статья|…
  • 0
    Внутри коллекции очень не хватает drag-and-drop перетягивания статей для измения порядка их следования

    Например, добавляю я найденные идеи для кухни. Пихаю в коллекцию и бытовые приборы и плитку. Две коллекции делать не хочется, а вот графически потягать туда сюда плитки хочется чтобы облегчить визуально восприятие информации.
  • 0
    Спасибо за статью. Есть ещё похожий и довольно старый сервис zootool.com/
    • 0
      их поломали и они закрыли регистрации. вот что пишут

      Zootool is temporarily closed.
      Please read more about it…

      Our blog is currently offline. The Wordpress installation has been hacked and we are currently looking for a more secure way to run our blog.
      — Bastian, Zootool
      • 0
        Да я в курсе, сервис сейчас в закрытом режиме работает.
        • 0
          К сожалению Zootool закроется 15 марта.
          Очень жаль, мне очень нравился этот сервис.
          • 0
            Да я читал на днях(. Пришлось с грустью выкачивать свой файлик закладок. Жаль, до сих пор не нашел для себя нормально альтернативы, чтобы возможности гибкой сортировки по папка были и нормальные привью страниц. Да и вообщем там было куча плюсов с точки зрения эргономики.
            • 0
              Если вам не сложно перечислите пожалуйста те плюсы которые держали вас на Zootool!
              • 0
                Рустем, можно я вам на почту обширное письмо составлю на неделе с мыслями по поводу «идеального» на мой взгляд сервиса закладок? Просто после прекращения развития zootool, я некоторое время работал над похожим сервисом для личного пользования, но увы я не добился таких успехов в этом направление как вы.
                • 0
                  Конечно давайте! Буду очень признателен
  • +1
    Неверно парсит некоторые страницы, например javascript.ru/php/sprintf
    скрин: docs.google.com/file/d/0B5lnfiQY1B84NDRIQ2g5SmdjeEk/edit?pli=1
    К слову, парсеры, которые я видел, часто криво парсят код. на том же javascript.ru нумерация линий заключена в столбец таблицы, и результат парсинга, например в Clearly Evernote, выглядит довольно уродливо.
    Хотелось бы чтобы подобные сервисы больше затачивались под технарей.
  • 0
    Хм. Очень мотивирует!
  • 0
    Ряд вопросов:
    А какая выгода компании?
    Откуда средства на сервер берутся?
    Бесплатно до какой поры?
    Что насчёт Privacy?
    • 0
      Никакой выгоды! Сервер стоит 5 долларов в месяц, поэтому ни о каких расходах пока речи не идет. Текущий функционал останется бесплатным точно.
      Со временем будет HTTPS и бэкапинг в дропбокс/другое облако. Ваши приватные коллекции доступны только вам.
  • 0
    Сам сделал и веб и приложения?
    • +1
      Весь проект создан в одиночку)
      • 0
        А сколько по времени заняло все?
        • 0
          тоже интересно
        • 0
          Месяцев 5 в расслабленном режиме по вечерам. Не каждый день конечно, с перерывами.
  • 0
    Два дня забивал ссылки, а потом все пропало… Теперь после активации предлагает создать новую коллекцию(( Техподдержка тоже молчит.
    Понимаю, что это только бета, и надежности никто не обещал… но просто обидно за потраченное время(
  • 0
    Очень хотел бы одну возможность, которая некогда была реализована на сервисе clipboard.com (ныне выкуплен компанией Salesforce и закрыт). Эта возможность давала возможность выделения любого div на странице при помощи визуальной рамкки, и при нажатии ЛКМ эта область сохранялась в коллекцию вместе со всеми стилями. Очень мега крутая вещь, когда надо было сохранить картинку или текст или то и другое вместе за один клик, без лишних манипуляций и телодвижений. Эта возможность удерживала меня на сервисе полтора года его использования
  • 0
    Изучаю.

    При добавлении ссылки нельзя добавить ее без указания протокола. (Хорошо бы в таких случаях подставлять http:// автоматически не заставляя пользователя вводить лишние символы.)
  • 0
    В целом производит хорошее впечатление. Спасибо.

    Но по организации большого количества закладок есть к чему стремиться.
    Мне однозначно не хватает группировки элементов и более удобного представления коллекций (в этом плане можно посмотреть в сторону айсбергс с их боковым меню и группировкой).
  • 0
    Почитал ваш лендинг, он сразу отбросил несколько возникших вопросов и поубавил скептицизм. Я думаю штука клёвая. И домен клёвый.
    Желаю удачи вашему проекту.
  • 0
    Расширение для Chrome и Opera полностью переписаны с нуля.
    Теперь страницы добавляются мгновенно, потому что парсинг происходит на стороне клиента.
    Появилась поддержка страниц из Вконтакте и любых других которые может открыть ваш браузер.
  • 0
    Установил, потестировал, нравится. У меня есть идея киллер фичи для сервиса. Нужно добавить возможность сохранять отрывки видео. Часто бывает, что хочется вырезать часть видео из ВК, Youtube и запостить в тот же ВК себе на стену. Обычно это смешные или просто интересные фрагменты по 10-20 секунд.
    Мне пока известен один путь – искать видео на файлопомойках, скачивать, вырезать фрагмент приложением ОС и загружать вручную.
  • 0
    Очень удобно использовать сервис для сохранения объявлений, т.к. видно сразу и текст и картинку.
    Но очень не хватает возможности коллективной работы и открытия доступа по принципу GoogleDocs, хотя бы в варианте «всем пользователям у которых есть ссылка».

    Например, мы с женой смотрим объявления по продаже мото. Каждый выбирает те, которые кажутся интересными. Было бы супер удобно скидывать их в общую коллекцию, а потом вместе сесть и обсудить.

  • 0
    Отличный сервис! Как раз недавно, работая с Закладками от Яндекса подумал о функционале сохранения контента по ссылке.
    Мой небольшой фидбэк:
    1) Экспортировал из закладок Яндекса файлик, при импорте кириллические буквы не распознались (���), папки загрузились, а сами ссылки так и не импортировались. Висит на шаге 3
    2) После пары неудачных попыток импорта не хватило кнопки — удалить несколько папок из коллекции, т.к. папки задублировались
    3) При редактировании имени папки вылезает «Неизвестная ошибка» — невозможно отредактировать название папки со сбитой кодировкой.

    пробовал только из FF27, Win8x64

    Впрочем, буду вручную перекидывать, ибо сервис понравился
  • +1
    Файл с экспортированными из Хрома закладками не может зааплоадиться
  • 0
    было бы здорово иметь возможность закачать закладки для оффлайн просмотра из всех или некоторых коллекций, как в pocket (read it later)
  • 0
    Спасибо за удобный сервис. Хочется узнать, будет поддержка экспорта закладок с вложенными папками?
  • 0
    Ребят, у вас письма кто-то читает? А хоть иногда отвечаете?

    Примерно пол года назад задавал вопрос в саппорт, можно ли как то одну закладку в нескольких папках разместить — ответа не было.

    Сейчас потребовалось сделать подборку страниц определенной тематики, но обнаружилось, что сервис больше не делает скриншоты страниц, как делал раньше (или мне казалось?), а берет картинку со страницы.

    Задал вопрос в саппорт, можно ли делать скриншоты — ответа нет.

    Вы хоть отвечайте однозначо — «Нет, нельзя», а то отсутствие хоть каких либо ответов выглядит так, словно сервис мертв.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка