DOU Проектор: Android приложение для чтения Ленты DOU

В рубрике DOU Проектор все желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на [email protected].

Идея

Всем привет. Меня зовут Богдан Коломиец, хочу поделиться историей создания приложения для сайта DOU.ua, с помощью которого можно просматривать список статей, читать тексты и комментарии к ним, а также сохранять материалы и читать их оффлайн, например, в метро.

Чуть более полгода назад я купил себе первое Android устройство и стал пробовать программировать под эту платформу. Вскоре после этого мне на почту пришло оповещения с DOU. Я нажал на ссылку и попал на мобильную версию сайта. Подумав о том, что мне не очень нравиться читать статью в браузере, я полез в PlayMarket за поиском клиента, который, как я был уверен, есть. Но я ошибался... Так и возникла идея написать это приложение самому.

Реализация

Итак, первым делом я начал искать какое-то API. Найдя на форуме топик на эту тему, понял, что API мне не светит. Я решил не сдаваться и парсить сайт. О том, плохо это или хорошо, будем судить потом. Выбрал библиотеку Jsoup, она легка в использовании и неплохо работает. С архитектурой я на тот момент не особо заморачивался, так как до этого в основном писал приложения типа калькулятора.

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

Код я приводить не буду, в конце статьи дам ссылку на исходники.

Итак, я использовал Material Design и несколько строк кода на Java для библиотеки Jsoup, и в итоге получилось вот что:

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

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

Так была написана и вторая страница, вроде как-то работало. Но потом я перестал заниматься этой разработкой, а спустя 3 месяца решил всё переписать с нуля.

Перерождение. Новая версия была построена на MVP архитектуре. Это дало возможность сделать код более абстрактным, компактным и нечувствительным к изменениям. Также использовал Dagger 2 для Dependency Injection. Это тоже дало много своих преимуществ: к примеру, возможность следить за жизненным циклом объекта, что бывает в Android болезненно.

Также использовал Реактивное программирование (RxJava), что сейчас очень модно, стильно и молодёжно:). На самом деле один из главных плюсов при работе с сетью — это легкость в управлении потоками. Пару слов о сети: здесь также использовалась библиотека Jsoup, но завернутая в конвертер, который был написан для Retrofit2, куда я с легкостью поместил кэширование.

Дизайн главного экрана был полностью изменен:

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

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

Результаты

В итоге, спустя 8 дней, я запустил первую бета-версию приложения на PlayMarket. Хочу заметить, всё бы сильно затянулось, если бы не помощь моей коллеги-тестировщицы Алины Берестенко.

Итак, что уже есть:
— Показ списка статей;
— Просмотр статьи;
— Просмотр комментариев;
— Сохранение информации и доступ к ней без интернета;
— Возможность делиться статьей;
— Возможность предложить статью из приложения.

Что планируется:
— Оповещения о новых статьях;
— Просмотр статей по категориям;
— Отображение ссылок в статьях.

Исходники: 1-я версия, 2-я версия.

Уважаемые читатели, надеюсь, мое приложение будет полезно для вас. Я буду активно его совершенствовать и добавлять новые возможности. Жду ваши отзывы.

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU