LHabr: RELOADED. Теперь это удобнее, чем браузер

в 22:05, , рубрики: ihabr, iOS, ipad, iphone, клиент, приложение, разработка под iOS, хабр на телефоне, Хабрахабр API, читалка, метки: , , , , , , ,

Вы не пользовались мобильными клиентами для хабра потому, что все они не предлагают никаких преимуществ по сравнению с браузером? Потому, что нельзя голосовать, писать коменты, читать свою ленту?

Тогда сейчас — самое время попробовать.

LHabr: RELOADED. Теперь это удобнее, чем браузер LHabr: RELOADED. Теперь это удобнее, чем браузер

Предыстория

Вообще, все началось уже относительно давно. Был убогий iHabr (автор удалил приложение из стора), я сделал не менее убогий, но бесплатный LHabr, и люди потянулись. Понемногу, но, раз это кому-то нужно, я решил сделать все по уму.

На данный момент во всем AppStore нет другого клиента для HabraHabr (их вообще мало), а таких, чтобы было удобнее, я в природе не видел (у меня был Nexus 3, не нашел). Почему все именно так — очевидно: у сайта пока нет API, хотя в посте про предновогоднее обновление результат опроса показал, что все ждут API и мобильное приложение.

Но мы не ищем легких путей, и решение было найдено. На данный момент я все еще добавляю фичи, а в этой версии уже есть самые востребованные: умное кеширование, возможность авторизации, писать коменты, голосовать за них, отвечать на них, голосовать за статью. Можно выкачать заданное количество статей или скачать избранное. Поиск и все разделы (добавляю потихоньку). Верстка без лишних деталей, но без вырезания нужного. Дальше я постараюсь подробно рассказать обо всем этом и почему это удобнее, чем бразуер.

Ах, да. Это бесплатно. До тех пор, пока будет время и мотивация. Так что либо всегда будет бесплатно, либо не будет вообще.

Так почему это удобнее?

На самом деле причин, конечно, несколько. Опишу их со скришотами.

Прекрасная верстка статей

Для начала предлагаю взглянуть на отображение статей в приложении. Ничего лишнего: нет боковых панелей, нет верхних панелей. Открывая статью, открываем только ее: дата, заголовок, текст, который выглядит также, как и на сайте: стиль и оформление соответствует. Панель информации о статье и комментарии — под статьей. (Позже сделаю их не внутри страницы, а отдельно, чтобы было удобнее)

LHabr: RELOADED. Теперь это удобнее, чем браузер

LHabr: RELOADED. Теперь это удобнее, чем браузер LHabr: RELOADED. Теперь это удобнее, чем браузер

LHabr: RELOADED. Теперь это удобнее, чем браузер LHabr: RELOADED. Теперь это удобнее, чем браузер

Таким образом, кстати, сокращается потребление трафика: мало того, что списки статей грузят только код страницы (без баннеров, без картинок), так еще и статьи грузят только свои картинки. Реклама тоже вырезана и, я надеюсь, НЛО меня пощадит за такую наглость. Без нее на телефоне удобнее :)

Разделы сайта

У сайта много разделов, в приложении будут они все, но пока доступен один, самый главный, полностью: статьи. В каждом разделе у сайта есть подразделы, эдакие разные ленты — агрегаторы + если вы имеете аккаунт, можете читать свою персональную ленту. В приложении все это доступно:

LHabr: RELOADED. Теперь это удобнее, чем браузер

Хочу отметить, что если аккаунта у вас нет, вам доступны все разделы, кроме «Лента». По умолчанию при запуске открывается персональная лента для которой нужен аккаунт, но вы всегда можете изменить ее на общую в настройках:

LHabr: RELOADED. Теперь это удобнее, чем браузер

В любом случае, вы всегда можете выбрать любой из доступных.

Авторизация и все, что с этим связано

Ура! Теперь можно авторизовываться. Это выглядит так:

LHabr: RELOADED. Теперь это удобнее, чем браузер

Доступа к паролю и иным данным у приложения нет, оно только получает кукисы. Кстати, они кончаются через 2 недели и тогда вас попросят авторизоваться еще раз.
После того, как вы авторизовались, вы получаете возможность голосовать за статьи и комментарии, а также писать эти самые комментарии. Нет необходимости приводить скриншоты, так как это просто функционал сайта. Позже будет внедрено в приложение. И само собой, сможете читать свою личную ленту, настроенную здесь, на сайте. Если вы хотите использовать другую учетку, можете разлогиниться в настройках. (Скриншот будет ниже)

Открыть в Safari, скопировать ссылку и т.д.

Ничего необычного, а пользователям LHabr уже знакомое меню со знакомыми функциями:

LHabr: RELOADED. Теперь это удобнее, чем браузер

Стоит отметить, что синяя кнопка добавит статью в т.н. локальное избранное. Добавить в избранное на сайте можно звездочкой под статьей (собственно, функционал сайта же)
Позже конечно совмещу функции.

Система статусов и кэширования

Ну и конечно, раз мы заговорили о локальном, приведу такой скриншот со статусами статей и их легенду:

LHabr: RELOADED. Теперь это удобнее, чем браузер

Итак, изначально все статьи — зеленые.

Зеленый — не прочитано, отсутствует на устройстве.
Синий — выполнена предзагрузка, присутствует на устройстве, но еще НЕ прочитана.
Серый — прочитано, присутствует на устройстве.
Оранжевый — прочитано, присутствует на устройстве, хранится в отдельной секции «Избранное» для быстрого доступа.

Есть еще белый светодиод — если статья прямо сейчас загружается. Как такое может быть, расскажу ниже.

Ну что ж, с легендой разобрались, теперь к кэшированию и функционалу списка. Список как список, но если у вас худо с интернетом — сделайте двойной тап, и вы увидите хабракат. Само собой, список подгружается постранично с сайта, автоматически. Pull down to update и все такое тоже присутствует во всех списках и в теле статьи.

И уникальная фича — ПРЕДзагрузка статей. Сидите утром за чашечкой горячего кофЭ и некогда читать, а в метро нечем заняться — интернет нестабилен? А может, у вас iPad без 3G? А может, у вас iPod Touch?
Вкушайте свой кофе и скачивайте статьи выборочно: прочитали хабракат, понравилось — подержите палец на заголовке и раз — огонек стал белым, статья скачивается. Как только загрузится — станет синей. При этом ничто не мешает вам листать список дальше и читать другие статьи или открывать хабракаты, перемещаться по разделам.

Слабо так в браузере?

А может, вам лень отбирать себе чтиво, может вы просто хотите выкачать пару сотен статей утром из вашей ленты? А может, хотите скачать топ-50 статей из лучшего? Или пяток лучших на этой неделе? Да не вопрос:

LHabr: RELOADED. Теперь это удобнее, чем браузер LHabr: RELOADED. Теперь это удобнее, чем браузер

LHabr: RELOADED. Теперь это удобнее, чем браузер

Такие статьи отметятся синим.

Постойте — ка, у вас наверняка есть избранное на сайте, верно? Статьи, к которым вы точно захотите вернуться, так почему бы не иметь их у себя на устройстве? Ваша правда. Нажмите кнопку загрузки, введите логин (без пароля, можете чужой логин указать даже) и дождитесь загрузки. Статьи будут помещены в папку Избранное на устройстве.

LHabr: RELOADED. Теперь это удобнее, чем браузер LHabr: RELOADED. Теперь это удобнее, чем браузер

LHabr: RELOADED. Теперь это удобнее, чем браузер

По-моему, круто :3 естественно.
А как прочитать статьи, которые я скачал? Для этого есть целый раздел Сохраненные. По умолчанию там открываются прочитанные и непрочитанные статьи (серые и синие), непрочитанные сверху:

LHabr: RELOADED. Теперь это удобнее, чем браузер

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

LHabr: RELOADED. Теперь это удобнее, чем браузер LHabr: RELOADED. Теперь это удобнее, чем браузер

Как уже видели, отсюда же можно вызвать меню скачки статей пачками.
Я не знаю такого браузера (или другого средства), где можно было бы так же удобно пользоваться сайтом на iOS.

Списки сохраненного подгружаются динамически и рано или поздно они начнут подтормаживать от объема статей. Более того, я как — то выкачал 2 гига статей (sic! хранится только текст и стили, картинки нет, сейчас поймете почему), и это начало приносить неудобство, мне не нужно столько прочитанных. Для этого я сделал такую штуку:

LHabr: RELOADED. Теперь это удобнее, чем браузер

Картинки локально не хранятся, так как база данных кэшируется iCloud, и так были проблемы с реджектом в Apple. Зато было удобно, когда я купил новый аппарат и восстановил его из копии старого — ничего качать заново не надо, все в таком же виде как и на старом девайсе.

Поиск

Казалось бы, простая функция, но ее нет ни в одном мобильном приложении, насколько я помню. Вы можете искать онлайн по сайту и в сохраненных. Для каждого раздела своя поисковая строка. Скриншотов не привожу, на экземплярах выше поисковые строки засветились, ничего необычного тут нет, это просто удобно. Все жесты в списках также действуют и в результатах поиска, конечно.

Навигация по ссылкам

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

Разные устройства

Люди просили сделать версию для iPad. Я выполнил просьбу.
Так или иначе, список поддерживаемых устройств:

  • iPod: gen >= 3
  • iPhone: gen >= 3gs
  • iPad: gen >= 1

Версия системы должна быть не ниже 5.0, мне кажется, большинство уже на ней.
Адаптировано для iPhone 5.

Функционал версии для iPad и iPhone/iPod совпадает на все 100, но скрины приводил в основном с телефонного симулятора, т.к. они размерами меньше.

Кстати говоря: версия для iPad была спорным моментом, так как были люди, которые ее хотели, и были люди, которые считали что уж на планшете-то можно почитать и в браузере. как показывает практика использования — преимущество приложения на планшете перед браузером даже БОЛЬШЕ чем это преимущество на телефоне. Просто оказалось, что в ландшафтной ориентации читать статьи удобно, а переключаться между ними (когда они все у тебя под пальцем, не нужно открывать кучу вкладок или ходить туда-сюда по ссылкам) еще удобнее. Ну и кэширование и предзагрузка конечно тоже делают свое дело + меньше трафика. Я тоже раньше склонялся к мнению, что на планшете можно и браузером, но теперь читаю только в приложении.

Поддержка

В этой версии много мелочей(и не совсем мелочей), которые пока не сделаны. Но я уже работаю над ними и впереди пользователей ждут обновления, так что скоро появятся и более удобные комментарии, и трекер, и баги поправлю, и небо станет чище, а трава заленеекогда будет API, переведу появившиеся функции на API. Хотя конечно первые версии API будут нескоро и не такими уж функциональными.

Дел много и все потихоньку делаю. Если вы хотите помочь и или возмутиться, лучше не срите в AppStore, просто напишите мне письмо, я отвечаю всем. (ну кроме может парочки писем, которые я когда-то пропустил). Хотите фичу — тоже пишите.

Я люблю НЛО

А НЛО на меня пофиг (что логично и разумно), поэтому когда сайт меняет верстку, приложение может лишиться части функционала. Обычно люди ставят в таких случаях колы и говорят что я им все сломал. А когда я быстренько выпускают апдейт — кол не убирают. Славные люди :3

Благодарности

Хочется поблагодарить моих коллег и просто замечательных людей, которые помогали мне в этом проекте.
Первый, без которого не было бы и в помине такой распрекрасной верстки и которой я так горжусь — Максим Денисов, global_max.
Второй, который помогал в проектировании, дизайне, да и вообще во всем по чуть-чуть(еще бы, наш PM) — Алексей Шеин, alextos. Леша, кстати, read-only и тоже хочет инвайт.

Помощь

В прошлый раз я просил о помощи и получил достаточно желающих, но растерял контакты. Я так понимаю, дизайн опять отвратителен, так что если кто-то может перерисовать его — буду только рад, да и все остальные скажут спасибо. За мной указание авторства в AppStore (юзеры знают, что всех авторов я подписывал в апдейтах).
Также хочу напомнить, что приложение бесплатно, а лучшей помощью рядовых юзеров будут письма о багах и предложениях и оценки в AppStore, это сильно мотивирует.

Скачать

Пользователи уже наверное обновились, а для вас я предлагаю ссылки. Напомню, приложение БЕСПЛАТНО.

Скачать в AppStore: LHabr 2.0.0

А можете просто в поиске набрать «Хабр» — оно пока единственное на весь магазин, и надеюсь, всегда будет лучшим.

LHabr: RELOADED. Теперь это удобнее, чем браузер

Полезная штука?

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

Проголосовало 4 человека. Воздержавшихся нет.

Автор: plasm

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js