HabraCitizen — новое android-приложение для Хабрахабра с темной темой и свайп навигацией

в 12:46, , рубрики: android, mobile development, клиент, приложение для android, хабр на телефоне, читалка, метки: , , , , ,

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Здравствуй, читатели. Сегодня ночью в Play Market было выложено мое первое android-приложение — HabraCitizen. Сабж представляет собой новую хабрачиталку со множеством возможностей и фич. Просили удобный хабра-клиент для android-устройств? Встречайте :)

Особенности приложения (из описания в маркете):
— Светлая и темная тема!
— Слайд-меню с возможностью настройки расположения (слева или справа);
— Свайп-навигация!
— Авторизация*;
— Авторизованные пользователи могут видеть количество новых комментариев к постам в списке постов, а также видеть новые комментарии в посте (комментарии подсвечиваются зеленым)*;
— Возможность загрузки постов для чтения в офлайне (с картинками!)*;
— Техника pull-to-refresh для обновления списков — чтобы обновить комментарии или список постов теперь достаточно потянуть сам список, а не нажимать кнопку;
— Полноэкранный режим чтения постов и вопросов;
— Настраиваемый отдельно шрифт в посте и в комментариях;
— Практически все возможные разделы сайта: посты лучшие (за сутки, неделю, месяц, все время), тематические и корпоративные (захабренные, новые, отхабренные), вопросы, события, хабы, профили компаний и пользователей (со списком опубликованных постов, вопросов, ответов и т.д),
лента*, избранное*;
— Полноценный поиск по ресурсу — посты, вопросы, хабы, пользователи, комментарии;
— Поддержка хабраката
— Просмотр полноразмерной версии картинок по тапу (с возможностью ресайза)!
— Запуск youtube-видео в youtube приложении прямо из постов и комментариев;
— Приложение не «теряет» позицию при чтении поста или комментариев при повороте экрана, а также способно восстановить загруженный пост с комментариями или список постов даже если приложение было «убито» в фоне
— Приложение способно «ловить» ссылки, ведущие на домен habrahabr.ru и открывать соответствующий раздел автоматически;

* — авторизация и загрузка постов для чтения в офлайне доступны в полной версии приложения, которую можно разблокировать из приложения. Об этом ниже.

Ссылка на приложение в маркете: play.google.com/store/apps/details?id=com.allesad.HabraCitizen

Заинтересованы? Прошу под кат (осторожно, тонна картинок).

Предыстория

Мне давно была интересна android-платформа и рынок android-приложений. Для подогрева интереса в январе 2012 года был куплен смартфон на андроиде — Incredible S. Была идея взять да и написать что-нибудь эдакое. Но, как водится, наличие устройства и возможность разработки не сгенерировали сами по себе идею какого-либо приложения. Поэтому разработка была отложена в долгий ящик, однако в свободное время я почитывал литературу по андроиду и пытался таки поставить себе хоть какую-нибудь объективную цель.
В это же время я часто и помногу читал Хабр. А так как хотелось иметь возможность читать его не только сидя за монитором, но и в дороге с телефона, то я полез в Android Market в поисках мобильного клиента. Какого же было мое удивление, когда я выяснил, что для крупнейшего русскоязычного ресура IT'шного толка нету ни одного нормального android-приложения.
Имеющиеся в магазине клиенты глючили и имели весьма ограниченный функционал. Из них в лучшую сторону выделялся лишь HabReader, коим я и решил пользоваться. Однако, «выделялся в лучшую сторону» не означало «был идеальным». За время пользования у меня накопилось множество претензий к работе (прошу заметить, что автор поправил многие из проблем в февральском обновлении, но свою разработку я начинал куда раньше):

— Текст в постах не форматировался по ширине экрана, добавляя горизонтальный скролл;
— Не было темной темы;
— Комментарии грузились отдельно и не имели индикатора загрузки (было непонятно, грузятся они или нет);
— Поворот устройства приводил к «сбрасыванию» позиции чтения поста и комментариев;
— Поиск работал только по постам;
— Попытка зайти в раздел «События» приводила к вылету приложения;
и т.д.

Таким образом мне пришла в голову идея «допилить» приложение и залить изменения на гитхаб в созданный автором проект. Так появилась конкретная цель.
Пользуясь случаем, хочу передать автору HabReader огромное спасибо за выкладывание сорцов на гитхабе — не будь их, разработка бы затянулась на неопределенный срок, ведь я практически ничего не знал тогда про android и Java (всякие хэлоуворлды не в счет). А так имеющиеся исходники послужили мне необходимым фундаментом, и, скачав их, я принялся за изучение…

Разработка

Непосредственно разработка началась только в январе 2013 на новогодних каникулах. Устав от пьянок и маясь от безделия я пытался придумать чем себя занять. И тут я вспомнил про исходники HabReader'a и свое желание в них поковыряться. Начал я с выбора IDE. И здесь стоит сделать маленькое лирическое отступление…

маленькое лирическое отступление

Официальное руководство по Android от гугла рекомендует Eclipse. Причины понятны: бесплатность, кроссплатформенность, бла-бла-бла. «Окей», сказал я и поставил Eclipse. Установил ADT-плагин и импортировал проект. «Не все так просто», радостно сообщил Eclipse и подсветил кроваво-красным весь проект. «Окей», сказал я, вспоминая про передающуюся из поколения в поколение легенду о неправильно импортированном R, и, со словами «Stackoverflow to the rescue!», вбил запрос в гугл. «OVER9000 результатов», произнес в ответ гугл. 1-я ссылка — не помогло, вторая — не помогло, n-ая! — не помогло! Я оптимизировал иморты, переимпортировал проект, перезапускал Eclipse, перезагружал комп, переставлял android-SDK и ADT-плагин — шиш с маслом были мне ответом. Да, я знаю, что должно было помочь, но почему-то не помогало. Новый проект? Нет проблем. Импорт? Хрен. Новый проект с copy-paste файлов из имеющегося проекта? Хрен. Более того, когда я создал XML-файл layout'a и пытался его отредактировать в текстовом режиме, Eclipse сделал что-то страшное — исковеркал весь xml начисто. Закрывающие теги были выше открывающихся, расцветка кода полетела к чертям, попытка поставить курсор в любое место или выделить текст приводила к новой комбинации этой мозаики. Перезапуск Eclips'a не помогал. Дошло до того, что мне пришлось открывать xml-файл в обычном блокноте и редактировать его там. «Тьфу ты, чорт!», сказал я в гневе после этого и зарекся использовать эту коварную IDE.
Однако, писать код в блокноте и компилировать его через консоль мне не улыбалось, поэтому я направил взор на IDE, которую давно хотел попробовать — Intellij IDEA.
К тому моменту IDEA как раз обзавелась редактором layout'a и темной темой. Я поставил Community Edition, запустил, слегка поматерился пытаясь импортировать проект… А потом прозрел. После Eclips'a это была просто IDE мечты! Скорость работы, действительно умный code-assist, удобный интерфейс, безглючность, отменный рефакторинг… Мои впечатления от работы во многом можно охарактеризовать одной фразой: «Ого! Здесь и так можно?!». Пока я ехал после работы домой, у меня просто руки чесались сесть покодить что-нибудь только чтобы покодить в IDEA. Это ли не идеальная IDE? Инструмент, с которым не надо бороться, и который действительно помогает и ускоряет работу просто в разы. Можете считать это пиаром или рекламой, как угодно, но если бы не ребята из JetBrains и их детище, вряд ли бы я в такие сроки изучил android-платформу (по мере сил), и вряд ли бы вы сейчас читали этот пост (возможно, через приложение ;). Лучей добра им!

Итак, выбрав IDE, я начал кодить. Кодить приходилось исключительно по ночам после работы, начиная в час ночи, когда я приходил домой (такой вот у меня плавающий график) и заканчивая в 6-7 утра. По выходным я просто отрывался, и, опохмелившись после пятницы, кодил часов по 15-16 подряд. Все это было на ударной и мощной волне энтузиазма, которая питает лучше любого Red Bull'a, и было мне в кайф. Была цель, была отменная и умная IDE — работа кипела. Постепенно я осознал, что список фич, которые я хотел бы реализовать, вполне себе тянут на отдельное приложение, ибо код был переписан практически начисто. С этого момента разработка велась как разработка отдельного проекта. Идеи для реализации и идеи по реализации рождались одна за другой, зато усталость «настакивалась» и в какой-то момент я понял, что пора остановиться. Идеал недостижим и попытки приблизиться к его сиянию легко могли бы привести к «ожогам» в виде неповоротливого монстра, набитого глюками и багами заместо приложения.
Хлопнув себя по руке, тянувшейся реализовать очередную «мега-идею», я начал шлифовать свой проект, отлавливать баги и делать круглые глаза при виде фатал-эксепшона с чудным стак-трейсом при тестировании ну другом устройстве и другой версии ОС. Ох уж этот android-зоопарк, О зверинец! Ничего не поделать — приходится мириться.

Какое-то время отлова багов, чтения документации по публикации приложений, оформления счета и настройки аккаунта разработчика, снятия скриншотов и вот он — результат. Уф.

Ниже хотелось бы поподробнее рассказать об особенностях и возможностях приложения.

Обзор особенностей

Темная и светлая тема

Да! То, о чем давно просили в комментариях и отзывах к другим мобильным хабра-клиентам (а я регулярно патрулировал эти отзывы).

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Slide-меню

Модное и весьма удобное меню по свайпу от края экрана (в настройках можно указать расположение — справа или слева):

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Свайп-навигация

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

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией
HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Pull-to-refresh

Технология pull-to-refresh (как в приложении вконтакте или pulse) для обновления списков постов, комментариев, вопросов, событий и т.д.

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Авторизация

Авторизация возможна с помощью обычного хабра-логина или через привязанные аккаунты соц-сетей (я, например, через G+ захожу, чтобы капчу не вводить). Авторизация дает доступ к ленте (посты, вопросы, события), избранному (посты, вопросы, комментарии), а также позволяет видеть кол-во новых комментариев к посту в счетчике комментариев (+зеленая циферка), а также видеть эти самые добавленные комментарии в списке комментариев (новые комменты подсвечиваются зеленым). Убрать подсветку с комментария можно по тапу на нем.

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Доступны практически все разделы сайта

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

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Офлайн-чтение

И еще одна фича, о которой очень многие просили — сохранение постов локально на устройстве для чтения их, скажем, в метро по пути на работу. Приложение умеет сохранять как посты, так и вопросы (все вместе с комментариями), однако, посты можно скачивать в режиме «сразу пачкой». Можно указать раздел — лента (для авторизованных), тематические, лучшие, корпоративные, а также количество постов для закачки (для раздела «новые» или «лучшие за сутки» можно скачать сразу все). Эта часть аналогична iOS-приложению lHabr. После нажатия кнопки «Скачать» приложение сперва соберет информацию о URL-ках, с которых нужно загрузить данные, потом добавит в статус бар новое уведомление с прогрессом загрузки (прогресс, к сожалению, доступен только для Android 4+, в более старых версиях возможности добавить его в уведомление нету). Сначала идет загрузка данных из интернета, затем сохранение на устройстве. После сохранения инициируется процесс кэширования картинок, так что читать посты и комментарии в офлайне будет гораздо веселее :) Только не отключайте интернет сразу же после сохранения постов (особенно, если качали сразу много).

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Полноэкранный режим чтения

Теперь никакие заголовки и табы не будут мешать вашему чтению. Для возврата в обычный режим тапните по тексту в посте. Авто-открытие в полноэкранном режиме можно выставить в настройках.

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Настройка шрифта в посте и комментариях

Шрифт в посте и комментариях теперь можно настроить отдельно — результат будет виден сразу же. Настройки автоматически сохраняются для постов и вопросов — нет нужды выставлять их каждый раз.

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Поиск как на сайте

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

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Увеличение картинок и запуск видео

И снова часто упоминаемая в запросах фича. Теперь картинки в постах могут быть просмотрены в полноразмерной версии — просто тапните на картинке. Полноразмерную версию можно ресайзить.

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

С видео пришлось помучаться — запуск видео внутри компонента WebView, который используется для рендеринга веб-страниц, очень тяжел, неудобен и глючен. Видео то не запускалось, то не было звука, то был звук, но вместо картинки — черный экран, то при попытке просмотра на весь экран видео вырубалось… Я плюнул на это дело и решил запускать видео в нативном плеере. 90-95% видео на Хабре — с ютуба. Ютуб приложениe также есть почти на всех андроид-смартфонах. Поэтому я поступил следующим образом — парсил на загрузке HTML-код страницы, вырезал iframe с youtube-видео, конструировал правильный URL и вставлял заместо фрейма свой див со ссылкой и картинкой. По тапу на картинке в youtube-плеере открывается youtube-видео. Вроде удобно.

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Куча приятных мелочей

Отключаемый хабракат

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Возможность сразу открыть пост в браузере (из списка или из окна «чтения» поста)

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Имя автора поста подсвечивается в комментариях красным (удобно — не надо помнить имя или постоянно лезть его смотреть :))

image

Посты также как и на сайте отмечаются флажками (перевод, туториал, из песочницы, recovery). Более того, для любителей читать статьи-переводы в оригинале я добавил специальный пункт в контекстном меню — можно сразу открыть источник ;-)

HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией HabraCitizen — новое android приложение для Хабрахабра с темной темой и свайп навигацией

Приложение крайне живучее и не меняет своего состояния, даже если было «убито» в фоне :) Это означает, что чтение вашего поста или комментариев продолжится с того же места, где было прервано. Списки постов, вопросов, событий и т.д. также будут автоматом восстановлены. Также приложение не боится поворота экрана и не теряет позицию чтения при этом :)

Такая вот вышла загогулина.

По поводу монетизации

Если помните, сперва приложение планировалось как допиливание имеющегося HabReader'a, а значит совершенно бесплатное. Впоследствии, я перешел от идеи «допиливания» к идее «запиливания» чего-то своего, по-прежнему бесплатного. Однако, время шло, приложение росло вкупе с усталостью и я начал задумываться о возможностях монетизации для повышения, так сказать, мотивации. Ничуть не меньший интерес для меня представляла возможность поизучать андроидовскую систему оплаты, ведь для меня все в платформе было в новинку. Поначалу была шальная идея сделать «ненавязчивую» рекламу, но идея довольно быстро была казнена с особой жестокостью, ибо я сам не переношу в приложениях рекламу. Само приложение платным делать я ни в коем случае не хотел. А посему оставался один путь — разделение функционала на платный и бесплатный.
Итого: в бесплатной базовой версии сохраняется возможность читать все разделы хабра (кроме, разумеется, ленты), однако авторизация и офлайн-загрузка доступны через активацию полной версии из приложения. Впрочем, для авторизованных пользователей я планирую множество дальнейших улучшений:

— Написание комментариев к постам;
— Добавление постов и комментариев в избранное;
— Возможность голосовать за посты и комментарии;

, так что уж не обессудьте за мою бессовестную жадность :)

Итог

Приложение готово, выложено на всеобщее обозрение. Я, в свою очередь, готов к потоку критики и фидбека (надеюсь, он будет). Пользуйтесь, пишите отзывы, всем спасибо за внимание. Enjoy!

Отдельная благодарность

Коллеге dj_raphael — за помощь в тестировании;
Коллеге lilislilit — за инвайт на хабр на день рождения;
читательу NOSTRA — за замечательную библиотеку Universal-Image-Loader для асинхронной загрузки картинок;

Автор: Allesad

Источник

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


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