Долгое время, когда я только начинал учиться программировать, я чему-то учился, а потом думал: «Боже, как бы мне хотелось применить то, что я только что узнал, но я понятия не имею, что я мог бы построить. Мне не нужно приложение todo. Все приложения, которые, как мне кажется, мне хотелось бы иметь, уже были сделаны другими лучше».

У меня есть еще одна статья, которую я хочу написать о том, почему глупо не делать приложение только потому, что кто-то уже сделал это, так что давайте пока пропустим эту часть.

Я нашел проект для работы, когда разговаривал со своей женой. Мы оба с энтузиазмом использовали Google Reader и были очень разочарованы, когда Google закрыл его в 2015 году. Мы перешли на Feedly, и по большей части все было в порядке.

Тем не менее, она в основном использует Feedly на своем Kindle Fire DX (боже, помоги мне, я никогда не могу уследить за названиями моделей Kindle Fire в своей голове), а приложение Feedly на ее Kindle довольно нестабильно и часто падает.

Бум. Была моя идея. Я создам программу для чтения RSS-каналов, используя Feedly API, для своей жены. Это позволяет мне использовать то, что я знаю о React, а также позволяет мне изучать React Native.

Эта идея является хорошим проектом для меня в других отношениях. Я очень хорошо знаком с болевым синдромом, характерным для пользователей приложений для чтения RSS. Я глубоко ненавижу усеченные каналы, которые заставляют вас щелкать, чтобы прочитать контент, и, таким образом, требуют, чтобы вы оставили приятное чтение своего приложения и вошли в забитый рекламой хаос собственного веб-сайта источника.

Если бы был только способ как-то «неправильно прочитать» ленту таким образом, чтобы пропустить «Нажмите здесь, чтобы прочитать больше…» и вместо этого позволить вам прочитать всю статью как обычно…

Поэтому я работаю над приложением, которое я называю Misreader. Это не самое большое имя, но мое. Я бы солгал, если бы сказал, что не решил использовать это имя, потому что это также была самоуничижительная шутка о моих навыках кодирования: «О да, это неправильно прочитало ленту, потому что я неправильно закодировал приложение, ха-ха, понял. я плохой”

Ключевые особенности и характеристики неправильного чтения

  • Менее аварийный, чем Feedly на Kindle Fire
  • Нет усеченных фидов
  • Изображения и видео являются гражданами первого класса
  • Приятный опыт чтения

Я немного поясню эти ключевые моменты.

Менее аварийно

Вроде очевидно, но приложение должно позволять вам читать материал без сбоев после каждой статьи. Я достаточно уверен, что окончательный результат удовлетворит этому условию просто в результате использования современного кода. Я думаю, что в последний раз приложение Feedly для Kindle обновлялось в 2015 году. Я даже не могу найти страницу приложения. Когда вы ищете его, нет недостатка в жалобах на то, что он часто дает сбои, и если вы выйдете из системы, вы не сможете снова войти в Google.

Я думаю, что должно быть возможно разрешить вход в Google, несмотря на отсутствие приложений Google на Kindle. Теоретически вы можете просто использовать веб-версию входа в Google и представить ее в веб-просмотре. Я еще не начал работать над этой частью, поэтому, если кто-то, кто читает это, уже знает, что это не сработает, я был бы рад услышать об этом раньше, чем позже.

Нет усеченных фидов

Раньше я использовал приложение для чтения прессы на своем телефоне Android. В нем была функция, которая использовала службу Readability, которая каким-то образом делала статьи более приятными для чтения, даже в уже приятной среде самого приложения.

Позже я узнал больше о том, что это за услуга и как она работает. Очевидно, это было сделано Postlight, и, к сожалению, они давно закрыли сервис. Однако у них есть замена: парсер Mercury. Вы даете ему ссылку на веб-страницу, он анализирует ее только для содержимого статьи, а затем возвращает это содержимое вам в виде строки HTML.

Я потратил много времени на просмотр документации Feedly API, и мне не потребовалось много времени, чтобы обнаружить конкретное поле под названием «partial» в конечной точке Subscriptions. Это логическое значение, и поле появляется в ответе только тогда, когда данный канал усекается.

Прохладный! Я проверю это поле, и если оно там, я возьму исходный URL-адрес статьи, передам URL-адрес службе парсера Mercury, а затем отобразлю ответ Mercury вместо частичного резюме исходной статьи!

Я написал эту часть кода в первую очередь, так как устранение усеченных каналов было для меня одной из самых важных частей приложения. Я хотел посмотреть, возможно ли это, прежде чем делать что-то еще. Это полностью сработало, поэтому я начал работать над способом запрашивать целый поток статей из Feedly, а затем автоматически отправлять их парсеру Mercury в фоновом режиме, чтобы у вас была защита от усечения без необходимости запрашивать ее каждый раз, когда вы хотите прочитать отдельную статью.

Оказывается, это противоречит условиям обслуживания парсера Mercury. Никакой пакетный перевод и отправка запроса в сервис не должны были каждый раз быть прямым преднамеренным результатом действия пользователя. Сосать. Хорошо, я могу справиться с этим как-нибудь. Просто чтобы быть уверенным, что я правильно интерпретировал TOS, я отправил Postlight электронное письмо с некоторыми вопросами. Однако я так и не получил ответа.

И вот однажды, когда я что-то строил, моя тестовая статья перестала загружаться. Вместо этого я получил ошибку 403. Похоже, они отозвали доступ моего токена к сервису. Двойной отсос. Я точно не превысил их запрошенные пределы скорости. Я делал по нему около 20 звонков в день.

Ясно, что я не мог полагаться на то, что синтаксический анализатор Mercury всегда будет доступен; Я должен был бы найти другой способ сделать это. Мне еще предстоит найти замену, но я веду список потенциальных инструментов. Я бы предпочел обрабатывать статьи пакетно на самом устройстве, а не делать это по одному HTTP-запросу за раз.

В Mozilla есть служба читабельности, но она зависит от DOM. Я думаю, что все еще мог бы заставить это работать, запустив Node в самом приложении, используя Сам узел в моем приложении, но я чувствую, что, вероятно, уже существуют инструменты, которые, вероятно, будут работать лучше. Я не против использования нативной библиотеки, которая может это сделать, но я бы предпочел по возможности избегать работы с Java. Java кажется покрытым коркой кошмаром, особенно когда копаешься в Android Studio.

Изображения и видео являются гражданами первого класса

Когда приложение Feedly на Kindle Fire работает, оно по-прежнему не очень хорошо справляется с воспроизведением видео. Некоторые другие приложения для чтения каналов не отображают изображения так, как мне хотелось бы. Одна из важных вещей, для которых я использую программу для чтения каналов, — это отслеживание нескольких веб-комиксов, и если комикс не отображается прямо в приложении или мне нужно щелкнуть, чтобы показать всю картинку, это просто не поможет.

Для отображения любого RSS-канала в приложении требуется взять экранированный HTML и отобразить его с помощью собственных представлений, поэтому вам нужен анализатор html. Mercury делает это, очевидно, но я никогда не собирался строить свое полное приложение на HTTP-запросах к внешней службе.

Я экспериментировал со многими библиотеками синтаксического анализа html, но лучшей на данный момент является react-native-render-html, а react-native-htmlview идет вторым. React-native-render-html отображает видео и изображения почти идеально. У него есть странная проблема, которая, я думаю, вероятно, связана с библиотекой htmlparser2, которую он использует под капотом, которая неправильно считывает ширину и высоту определенных изображений, поэтому они в конечном итоге отображаются в полном размере и уходят с экрана. Надо продолжать играть с этим.

Приятный опыт чтения

Я думаю, что приложение должно не только включать функцию темы темного режима, но и должно пойти еще дальше и предложить ночной режим. Темный режим будет представлять собой белый текст на черном фоне, но ночной режим будет придавать оранжевый оттенок всему, что не является сплошным черным, чтобы уменьшить или устранить как можно больше синего света.

Насмешливый неверный читатель

Я люблю Balsamiq и Figma. Я не сохранил каркасы, которые сделал при планировании приложения, но у меня все еще есть файлы Figma для макетов. Вот как я себе представлял приложение в каждой из трех тем:

Легкий режим

Темный режим

Ночной режим

Не буду врать, я почти уверен, что скопировал цветовую схему ночного режима с ноутбука HP Spectre/360 с отделкой Dark Ash Silver with Copper Luxe. Это великолепная машина, и мне очень грустно, что я не получил ее некоторое время назад, когда искал новый компьютер, и я говорю это как человек, который исторически считал HP компьютерной маркой мусора. Я действительно копаю этот медный люкс, хотя.

Так или иначе! Я уже знаю, что «домашняя» страница, показывающая категории и связанные с ними каналы, не будет выглядеть так. Это был экран, в который я вкладывал меньше всего работы при создании этих макетов.

Итак, это история о том, как я нашел проект для работы, и немного о мыслительном процессе, стоящем за тем, как он будет работать и как он может выглядеть. Я хочу написать больше о проблемах, с которыми мне пришлось столкнуться, пытаясь понять, как организовать данные приложения, особенно данные, поступающие от Feedly API, но я оставлю это для другой статьи.