Пока что мало кто может похвастаться успешными проектами в такой интересной области, как разработка мобильных приложений для электронных СМИ. Владислав Коробов, исполнительный директор Live Typing, рассказал Mediatoolbox.ru об особенностях создания таких продуктов.
Справка: Компания Live Typing провела несколько проектов для электронных СМИ: издания ИД “Коммерсант” (Андроид, совместно с «Галс Софт»), “Энергия без границ” ИД “МедиаЛайн” (Андроид и iOS). Является генеральным подрядчиком по мобильным приложениям ИД Conde Nast Russia. Приложение газеты “Коммерсант” отмечено Гуглом как одно из лучших российских приложений за 2014 год.
Владислав Коробов, Live Typing:
- Сначала расскажу о трендах на рынке публицистических приложений. Вот что нам нравится, вот что мы хотим сделать так же или лучше:
Readymag — сервис красивых блогов. На нем можно издавать, например, газету. Структура подачи очень простая: листаем влево или вправо, если хочется читать, то проскроливаем вниз.
У ребят очень хороший редактор https://readymag.com — можно бесплатно создать что-то самому.
Medium — сервис для написания и чтения больших статей. Вот пример записи в блоге. Имеет минималистичный и простой редактор статей, который вдохновил некотрых разработчиков скопировать его (с переменным успехом).
Storehouse – редактор историй на iPad. Созданная история — сразу адаптивная, просматривать веб-страничку можно откуда угодно.
Facebook Paper. Интересно, что Facebook приобрел компанию http://pushpoppress.com/ourchoice/, которая сделала крутанскую iPad-книгу для Гора. Приобретение было чисто ради команды. Далее эта же команда, используя свои наработки, создала Paper. Сам же Paper Фейсбук делал для того, чтобы привлечь на работу дизайнеров, пропиарив свою дизайнерскую команду.
Большой технологический вывод, который делаем мы в Live Typing:
HTML является основным способом подачи конечного контента. Вокруг HTML нужно делать правильные обвязки (веб и мобильные приложения), как редакторские так и потребительские.
API
Любое серьезное мобильное или веб приложение использует серверную часть. Сервер отдает контент или принимает пользовательские данные. API — это интерфейс работы с сервером для мобильных и фронт-енд разработчиков. Без документированного API с примерами разработка может очень сильно затягиваться.
-
Мы делали API для мобильного приложения крупного электронного ритейлера. Данные собирались из нескольких сервисов и отдавались мобильному приложению в удобном виде.
-
Мы делали API из имеющегося сайта на CMS 1C Битрикс — приложение Энергия без Границ. При этом никак не нарушив или изменив работу самого сайта.
-
API существует на своем сервере, соединяясь напрямую с базой данных, вытаскивает и записывает всю необходимую информацию.
-
У нас есть опыт написания административных панелей и редакторов контента “с нуля”.
Мы разрабатываем серверные части на PHP, Ruby, NodeJS.
Дизайн
Нам интересно браться за дизайн как с самого начала, так и улучшать имеющийся. Если все делаем мы, то начинаем с прототипирования — схематично отрисовываем экраны и выясняем детали, что-то советуем по ходу. Пишем небольшое, но достаточно грамотное ТЗ.
Если же этап проектирования сделан не нами и есть хорошая база для создания дизайна, то мы готовы приступать.
Бывает так что сделан дизайн для iOS платформы. В таком случае мы можем предложить адаптацию дизайна для Android (пример подобной работы приложение Макса Коржа).
Мы делаем интерактивную дизайн сборку, таким образом, приложение можно “пощупать” до того, как оно будет создано.
Функциональность
Представление массива информации
Довольно популярный формат представления статей — в виде карточек. Их можно организовать и в ленту, и в сетку, и в нечто смешанное.
Нестандартную сетку редко где увидишь. Сделать такой компонент довольно сложно, но мы справились с такой задачей в Коммерсанте. Параметры сетки приходят с сервера. За конечное выстраивание отвечает приложение. При этом есть и подзаголовки групп и отдельно скролирующаяся лента новостей.
Очень важно учитывать ориентацию экран и размеры самого устройства. В Андроиде для маленького и большого планшета количество подаваемой информации в карточках меняется. Кроме того, контролируются кегль, отступы, количество строк, виды выводимого контента.
|
|
|
В планшетах можно показать больше информации, в смартфонах меньше, схема взаимодействия и модель потребления отличаются. Это важно учитывать на этапе проектирования и при исполнении вариантов дизайна для различных устройств.
Вывод конечной статьи
Контент статьи может приходить с сервера в виде готового html документа с css и js. В таком случае за все форматирование уже приходит готовым. Приложение отображает статью встроенным браузером. Пример — Коммерсант. Возможен вариант, когда приложение разбирает пришедший от сервера материал по кусочкам и формирует статью полностью на своей стороне. Пример — Энергия без Границ.
Отображение статьи — самое важное место в приложениях для СМИ. К нему стоит относиться с максимальной серьезностью, четко представляя себе, каким образом контент будет отображаться на экране конечного пользователя.
От этого зависит, как будет реализовано увеличение и уменьшение шрифта (а это очень важная опция), как будет осуществляться распространение контента через социальные сети и т.п.
Фотогалерея
В приложениях для СМИ фотографии имеют большое значение. Важно, чтобы у пользователя была возможность:
-
посмотреть картинки в любой ориентации устройства
-
видеть комментарии к фотографиям и ©
-
войти в режим просмотра «только фотографии и ничего лишнего» (даже системных кнопок на андроиде)
Приятной опцией является возможность запустить слайдшоу. Пример — Коммерсант:
Видео
Если у СМИ есть видео-контент, то приложение должно правильно показывать галерею видеофайлов. Пользователю перед проигрыванием важно знать длительность ролика (на основании этой информации он принимает решение о просмотре). В отдельных случаях при проигрывании можно заблокировать горизонтальную ориентацию видео — большинство людей все равно переворачивают устройство.
Добавление видео в избранное и возможность поделиться можно либо вынести в карточку в списке видероликов, либо создать отдельный экран конкретного ролика.
Аудио
Проигрывание аудиофайлов или потокового вещания ничем особо от видеороликов не отличается. Можно к аудиофайлам прикреплять фоновую картинку, чтобы немного разнообразить интерфейс проигрывателя. Однако важным моментом является возможность проигрывания музыки при свернутом приложении, а также “прокидывание” функциональности управления проигрыванием в системный плеер iOS или в центр нотификаций Android.
Поиск
Процесс поиска обычно происходит непосредственно на сервере, а приложение только выдает результат. У Live Typing есть опыт в создании полноценного полнотекстового поиска к имеющейся базе данных, используя ElasticSearch (свой “мини-Яндекс”). Степень настройки поисковой выдачи (сортировка и фильтрация) и гибкости работы с языковыми конструкциями обсуждается по каждому проекту отдельно.
Оффлайн работа
Плохо, когда мобильное приложение может работать только при наличии интернета. Кэширование данных следует осуществлять правильным образом — чтобы пользователь мог смотреть сохраненную информацию, а при наличии интернета она обновлялась.
Дурным тоном является не давать пользователю отчистить закэшированные данные, которые занимают место на устройстве. Из-за отсутствия такой возможности пользователи вынуждены удалять всё приложение.
В некоторых приложениях полезно предоставить возможность пользователю загрузить много контента, а потом его просматривать. В этом процессе есть свои нюансы, от отображения процесса загрузки до ее осуществления в фоновом режиме.
Покупки
Если приложение планирует зарабатывать на своем контенте, то надо учесть: настройка и разработка покупок имеет важные особенности, в которых не обойтись без серверной части.
Часто возникает вопрос: «Можно ли принимать деньги с банковской карты пользователя, а не платежами стора?» Правила мобильных платформ можно выразить так: если услуга или товар могут предоставляются пользователю за рамками приложения, то и платежи возможно принимать напрямую.
Apple не сможет проверить, продали ли пользователю билет в кино, — а значит, не сможет гарантировать безопасности, значит, не очень-то и хочет, чтобы платежи шли через него.
Платежи пользователя должны проходить через магазин, если цифровой контент пользователь потребляет только через приложение.
Google Play предоставляет дополнительные возможности оплаты: через мобильного оператора (Билайн и Мегафон), через PayPal. Apple сделал свою альтернативу PayPal для покупок не-цифрового контента — Apple Pay.
Что косается подписной модели, то она есть в Google Play. Apple разрешает ее в приложениях для Киоска и в приложениях для Mac, а некоторым разработчикам Apple позволяет использовать автопродляемые подписки в мобильных приложениях не из Киоска. Тема внутренних покупок и возможных способов их осуществления достойна отдельной статьи.
Если идти по простому пути, то подписки можно сделать самому — предложить пользователю заплатить за год вперед, за три месяца или за один. А по истечению срока опять предложить оплатить. При этом факт оплаты и «отгрузки» контента может проверяться на сервере. Да покупка не будет автообновляемой, но это упорядоченность пользователям понравится.
Уведомления
Для осуществления push-уведомлений мы рекомендуем использовать сервис https://www.pushwoosh.com/ c удобной ценовой политикой, API и административной панелью.
Этот сервис не устраняет потребность в работе серверного и мобильных разработчиков, однако делает ее намного проще:
Если же необходимо настроить внутренную ссылочную систему приложения таким образом, чтобы после определенных push-уведомлений приложение открывалось на конкретном экране, то такую возможность следует оговаривать перед разработкой, потому что она закладывается на этапе архитектуры. Ссылочная система внутри приложения позволит пользователю, переходя по простым ссылкам в браузере, открывать приложение на конкретном экране с определенным контентом. Например, друг отправил мне ссылку на интересную статью, а у меня есть приложение данного издания. Как только я нажму на ссылку, откроется браузер, а затем сразу приложение на той самой статье.
Авторизация и доступ к контенту согласно правам
Если проект мультиплатформенный (веб, смартфоны, планшеты), то традиционным способом осуществления доступа к пользовательскому контену является регистрация, которую можно упростить, используя социальными сетями. Live Typing неоднократно реализовывал такую функциональность. Регистрация с подтверждением мобильного телефона — вполне реальная для осуществления опция. Оданко знать e-mail человека очень полезно для бизнеса (возврат пользователя через рассылки).
В приложении «Энергия без границ» присутствует интересная функциональность. Пользователь может зарегистрироваться как сотрудник компании и после одобрения модератором получит доступ к дополнительному контенту.
Читайте также: «Некликабельная журналистика» быстрого взгляда
Подписывайтесь на нас в соцсетях, чтобы получать последние новости и краткие переводы лучших зарубежных статей о журналистике и новых медиа: