Mandu

Мобильное приложение для чтения статей оффлайн. Никакой рекламы, комментариев и посторонних ссылок. Только текст и иллюстрации

Посмотреть вживую

Reader

iOS

Productivity

Sharing

Mobile

UI/UX

Offline

Analytics

Parsing

News

Firebase

App Store

Предыстория

Китайскому рынку требовалось приложение для чтения очищенных статей в онлайн и оффлайн-режимах с возможностью поделиться статьёй в WeChat

Клиент обратил внимание на две тенденции в Китае. Первой стал бум интереса его жителей к чтению с мобильных устройств. В 2015 году китайцы читали новости с телефонов и планшетов в среднем по 62 минуты в день — в два раза больше того же показателя за предыдущий год. Количество читающих книги и статьи в цифровом виде увеличилось на 8,2% по сравнению с 2014 годом. Вторая тенденция — лидерство китайского мессенджера WeChat. Среднемесячное количество пользователей к Q3 2016 года составило 846 миллионов, подавляющее большинство из которых — китайцы.

Клиент пришёл к нам с подробной спецификацией с описанием MVP. Мы начали разработку параллельно с дизайном.

iOS-браузер Safari и его функция Reader не подходили по трём причинам: 1. Safari работает только онлайн. 2. Не все статьи на китайском он очищает хорошо. 3. В будущем планируется кроссплатформенное приложение, а Safari нет на Android. В Европе такую задачу решают приложения Instapaper и Pocket, но из-за особенностей вёрстки китайских сайтов они не будут работать в этой стране.

Дизайн

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

«Стереотипный китайский сайт или приложение представляется ярким и перегруженным. Но это не так, когда нужен акцент на контенте. Посмотрев на популярный мессенджер QQ, мы отметили чистоту интерфейса и преобладание светлых оттенков. Принципы подходили для дизайна Mandu, ведь это приложение для чтения»

Лена Гальцина

Дизайнер

После изучения мы сделали дизайн-концепцию и презентовали клиенту.

Фидбек от друзей и коллег клиента в адрес нашей работы показал, что мы справились с ней лучше китайского дизайнера.

Вместо иконки клиента мы предложили свою, и клиенту она понравилась.

Добавление статьи

Mandu самостоятельно находит в буфере обмена ссылку на статью и предлагает сохранить её. Пользователь также может использовать фирменное расширение в браузере

Добавление статьи

Mandu самостоятельно находит в буфере обмена ссылку на статью и предлагает сохранить её. Пользователь также может использовать фирменное расширение в браузере

Режимы для чтения

Article view. Пользователь видит очищенную страницу и изменяет тип и размер шрифта, яркость экрана и цветовую тему под себя. Режим построен на элементе UIWebView

Режимы для чтения

Article view. Пользователь видит очищенную страницу и изменяет тип и размер шрифта, яркость экрана и цветовую тему под себя. Режим построен на элементе UIWebView

Менеджмент статей

Свайп ячейки со статьёй влево открывает опции удаления и добавления в «Избранное». В режиме просмотра статьи это возможно с помощью кнопок на панели инструментов

Менеджмент статей

Свайп ячейки со статьёй влево открывает опции удаления и добавления в «Избранное». В режиме просмотра статьи это возможно с помощью кнопок на панели инструментов

Массовый менеджмент статей

Пользователь может добавлять в «Избранное» или удалять несколько статей одновременно

Массовый менеджмент статей

Пользователь может добавлять в «Избранное» или удалять несколько статей одновременно

WeChat

В пару нажатий ссылка на статью отправляется другу в WeChat или сохраняется в WeChat Moments

WeChat

В пару нажатий ссылка на статью отправляется другу в WeChat или сохраняется в WeChat Moments

Локализация

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

Локализация

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

Разработка

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

Варианты реализации

1

С помощью JavaScript в самом приложении.
Подобным образом работает браузер Safari от Apple. Исходный код скрипта из Safari лежал в свободном доступе на Github до тех пор, пока не был удалён по требованию правообладателей. Похожую библиотеку выложили в опенсорс разработчики Firefox. На эти решения мы и ориентировались

2

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

3

На сервере
Серверная библиотека удаляет комментарии и рекламу и отдаёт приложению чистую статью

Для разработки бета-версии подошёл вариант с серверной частью. Предстоял выбор из четырёх библиотек: PHP-Goose, Wallabag, Readability, Newspaper. Остановились на Newspaper для Python 3.

«Библиотека устанавливается и настраивается за пару часов, быстро очищает статьи, благодаря внутренней реализации парсера на C++, и поддерживается четыре года, а это немаловажно. Ну, и самое классное, она написана китайскими разработчиками и тестировалась на китайский статьях»

Денис Визигин

Технический директор

Функциональные возможности

• Многопоточная обработка статей
• Определение url-адреса каждой новости
• Извлечение текста из HTML-страницы, главного и всех изображений
• Извлечение ключевых слов, автора и google trending terms
• Автоматическое реферирование текста
• Поддержка более десяти языков (английский, китайский, немецкий и др.)

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

• Многопоточная обработка статей определение url-адреса каждой новости
• Извлечение текста из HTML-страницы, главного и всех изображений
• Извлечение ключевых слов, автора и google trending terms
• Автоматическое реферирование текста
• Поддержка более десяти языков (английский, китайский, немецкий и др.)

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

Обработка статей на клиентской стороне

Чтобы не платить за серверные мощности, был реализован парсинг на JavaScript с использованием WKWebView и Kanna Parser. Главная особенность метода — кастомизация: по просьбе клиента front-end разработчики создают для каждого сайта шаблон для обработки статьи.

WeChat

Из-за закрытого на техничеcкие работы официального сайта не удалось получить доступ к API мессенджера. Решение использовать административную панель API WeChat подсказала ветка обсуждения на Stack Overflow. Аккаунт приложения привязан к китайскому телефону, предоставленному клиентом.

Аналитика

Построена на Firebase Analytics. Помимо стандартных метрик отслеживаются следующие настраиваемые события:

• Изменение языка, шрифта, цветовой схемы
• Частота использования Web View
• Шаринг
• Частота изменения настроек на дефолтные
• Домен статей, которые очищаются хорошо и плохо
• Трекинг ссылок на статьи, открытые только в Web View
• Переход на сайт заказчика
• Добавление доменов сайтов, которыми делятся пользователи
• Частота использования опций добавления статьи в Mandu
• Ориентация экрана

Аккаунт-менеджер
Татьяна Шашлова

Менеджеры проекта
Евгений Ковальцов
Татьяна Шашлова

Дизайнер
Лена Гальцина

iOS-разработчики
Владимир Вишнягов
Александр Пряничников