Быстрая разработка решений для мобильных устройств

Прогрессивный подход к работе небольших групп проектирования и разработки

Обычные системы управления информацией и файловые системы не удовлетворяют потребности корпоративных мобильных пользователей в доступе к данным и обмене данными. К счастью, даже небольшие группы разработчиков и дизайнеров могут быстро создавать решения для доступа к информации через разнообразные мобильные устройства – с помощью эффективного процесса разработки с использованием готовых модулей. Это статья о том, как группа IBM CIO Lab Mobile Innovation быстро создала для себя такое решение, повысившее производительность труда пользователей благодаря возможности легко обращаться к файлам на всех утвержденных платформах.

Том Кук, старший специалист, IBM

Старший специалист IBM Томас Кук (Thomas Cook) руководит группами проектировщиков и разработчиков по созданию инновационных мобильных решений. Работая в IBM, он занимался мобильными решениями, встраиваемыми и игровыми системами, виртуальными мирами и операционными системами.



Чарисс Лу, инженер-программист, IBM

Чарисс Лу (Charisse Lu) работает в сфере Web-технологий и виртуальных 3D-пространств, а в последнее время руководит технической группой в подразделении IBM CIO Lab Mobile Innovation, которая работает над созданием мобильных решений для сотрудников IBM.



Джон Реддин, инженер-программист, IBM

Инженер-программист Джон Реддин (John Reddin) работает в IBM с лета 2009 года. Придя в IBM в качестве стажера Extreme Blue, он работал в подразделении IBM Connections, а теперь трудится над мобильными инновациями в управлении ИТ-директора. Джон изучал информатику в Дублинском колледже Святой Троицы. Интересуется масштабируемыми архитектур программного обеспечения, разработками приложений для мобильных устройств и вычислительной музыкой - у него есть публикации в этой области.



Эмиль Варга, инженер-программист, IBM

Эмиль Варга (Emil Varga) работает инженером-программистом в Дублинском отделении IBM с 2008 года. Работал в группе Lotus Connections Wikis над Lotus Connections 2.5 и 3.0, а в начале 2012 года вошел в состав CIO Mobile Innovations Lab. Получил степени магистра и бакалавра вычислительной техники в Белградском университете в Сербии. Увлекается машинным обучением, Linux, Web-разработкой и функциональными языками программирования.



15.08.2012

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

Наша группа должна была предоставить в распоряжение работников портативное решение для доступа к внутренней информации IBM через разрешенные к применению устройства. Нам предстояло разработать экспериментальное решение, которое выполняло бы функции окна во все их данные и обеспечивало небольшой буфер для транспортируемых данных. Транспортируемые данные должны преобразовываться в совместимые форматы, чтобы пользователям было удобнее работать с ними на различных платформах. Мы назвали свой проект MyMobileHub. Силами небольшой группы всего за несколько месяцев мы должны были создать демонстрационный образец, работающий с аппаратными платформами iOS, Android и BlackBerry. А спустя еще несколько месяцев ― действующий опытный образец, оптимизированный для этих платформ.

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

Планирование проекта быстрой разработки

Как правило, инновационные проекты ― это итеративный процесс: быстрая разработка действующего решения с последующим его распространением в узком кругу коллег и ранних пользователей. Затем функциональность расширяется наряду с аудиторией пользователей, и собираются комментарии и предложения, помогающие довести продукт. Это общепринятый подход при создании нового решения.

Однако для успеха пилотного проекта в быстро развивающейся сфере мобильных устройств необходим иной подход к разработке. Мы изучили ряд многократно используемых технологий, которые могли бы здесь помочь. В результате мы выбрали сочетание технологий open source и внутренних инструментов IBM, которые отвечают критериям быстрой разработки, кроссплатформенной поддержки и передовых функциональных возможностей.

Со стороны сервера мы выбрали среду Play, Java-среду без запоминания состояния в стиле RESTful, основанную на идеях "модель-представление-контроллер" (MVC), характерных для Ruby на Rails. Для разработки на стороне клиента мы выбрали PhoneGap, Dojo и Dojo Mobile, чтобы на всех клиентских платформах обеспечить согласованные наглядность/восприятие и пользовательский интерфейс. См. ссылки в разделе Ресурсы.

Так как мы решили создать небольшой кэш для преобразуемых файлов, мы взяли вместо файловой системы простую базу данных. Мы выбрали Apache CouchDB, бессхемную, ориентированную на документы базу данных типа noSQL, которая поддерживает хранение документов с простым и быстрым созданием представлений на основе MapReduce.

CouchDB и Play хорошо работают вместе, что позволило нам быстро двигаться вперед. Для управления различными сообщениями и задачами, входящими в конвейер преобразования документов, мы использовали Apache ActiveMQ. Наконец, пользовательский интерфейс HTTP-сервера Apache предоставил нам некоторые дополнительные элементы управления и выравнивания нагрузки. В ходе этого пилотного проекта мы изучали возможность реализации решения, а также хотели понять потребности пользователей и характер их работы с теми или иными шаблонами. Мы хотели, чтобы ключевые компоненты, концепции и конструкции, готовые к промышленному применению, могли использоваться повторно и легко переноситься на другие платформы.

Чтобы идти в ногу с постоянно расширяющимся набором мобильных устройств, мы использовали внутренний инструмент из проекта WURFL (см. раздел Ресурсы), хранилище такой информации, как функциональность и размеры экрана смартфонов, что помогло нам определить характеристики мобильных устройств. С помощью этого инструмента мы легко определили, как лучше всего отображать содержимое приложения с учетом возможностей устройств.

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


Вкратце о MyMobileHub

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

Просмотр на ноутбуке и настольном ПК

Для ноутбуков и настольных ПК мы поддерживаем только браузеры с возможностью "перетаскивания". Пользователи перетаскивают закладки, документы или другие файлы в окно браузера, как показано на рисунке 1. Для документов с понятным форматом мы предоставляем возможности предварительного просмотра и создания PDF-версий, которые легко отображать на мобильных устройствах. У нас есть планы преобразования в текстовый формат файлов других типов, например аудиофайлов.

Рисунок 1. Функциональные возможности MyMobileHub
Скриншот MyMobileHub

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

Мобильные Web-приложения

Сегодня на смартфонах и планшетах установлены довольно развитые браузеры. В этих браузерах могут работать многофункциональные приложения с помощью Dojo Mobile и JavaScript. Внутренние службы идентификации устройств позволяют проверить тип устройства и помогают выбрать для загрузки в него нужную комбинацию многократно используемого кода, HTML и CSS. В зависимости от возможностей устройства мы предоставляем страницу, которая лучше всего подходит для отображения на нем. Например, на таком устройстве, как iPad, страница Web-приложения очень похожа на ту, что отображается на браузере ПК, так что пользователю не надо приспосабливаться. Как показано на рисунке 2, пользователь работает, скорее, как с приложением, чем как с Web-страницей. Он может делать закладки на Web-страницы и запрашивать загрузку файлов или их PDF-версий для просмотра и добавления на книжную полку.

Рисунок 2. Мобильное Web-приложение MyMobileHub
Мобильное Web-приложение MyMobileHub

Приложения, зависящие от мобильной платформы

Приложения MyMobileHub, оптимизированные для каждой мобильной платформы, похожи на Web-приложения, выполняемые в мобильном браузере, но с добавлением возможности загрузки контента, сгенерированного с помощью самого устройства. Пользователи могут записывать аудио или видео, фотографировать или выбрать изображения из галереи. Все это можно передавать прямо из MyMobileHub (рисунок 3).

Рисунок 3. MyMobileHub-приложение, зависящее от мобильной платформы
Три скриншота MyMobileHub-приложения

Источники эффективности: методология, подход и конструкция

Прежде чем приступать к программированию, мы исследовали различные технологии. Выбор инструментария представлял собой тщательный процесс, направивший нас на правильный путь. Мы собрали проектировщиков пользовательских интерфейсов. Разработчиков (обоих). Пригласили эксперта по Web-разработке (из Бразилии). Каждая группа отвечала за разъяснение другим эффективности различных наборов инструментов, таких как инструменты графического дизайна, HTML5, CSS, UI-виджетов, а также возможностей сервера. Обучая друг друга, мы обрели общие цели и методы эффективной работы.

Мы также приняли решение не поддерживать некоторые уровни операционной системы и браузера. Мы упростили процесс разработки, сосредоточившись на обслуживании только HTML5-совместимых браузеров. Это объяснялось признанием соответствующей технологической тенденции и предвидением ее усиления в области как программного, так и аппаратного обеспечения. Например, уже примерно через три месяца после того, как мы решили сосредоточить внимание на HTM5-совместимых браузерах, все мобильные устройства поддерживали HTML5.

Один элемент данных/много CSS

Одним из наших первых важных проектных решений с точки зрения мобильных устройств было решение перенести как можно больше элементов пользовательского интерфейса и форматирования в HTML 5 и CSS. Тем самым мы получили не только упрощение кода, но и его унификацию на всех мобильных платформах.

Нам нужно было поддерживать iPhone, iPod Touch, iPad, BlackBerry, Android-телефоны и Android-планшеты полного и среднего размера, а также настольные компьютеры Mac, Linux и Windows. Каждая строка специального кода, распространяемая на каждой платформе, несет в себе угрозу для надежности и увеличивает сложность. Наша модель один элемент данных / много CSS позволила нам использовать один и тот же источник данных JavaScript Object Notation (JSON) для создания совершенно разных пользовательских интерфейсов для этих платформ с достаточно небольшим подмножеством специализированных CSS для каждой из них.

Для достижения этой цели мы написали специальные модули CSS для каждой из своих платформ. В наших Web-приложениях, когда устройство запрашивает HTML от сервера, мы определяем, какого типа это устройство, и динамически загружаем соответствующий пользовательский модуль CSS. Для приложений, зависящих от платформы, мы уже знаем тип платформы, который может загрузить данное приложение, и можем ограничить настройки с учетом таких вещей, как размер экрана и версия ОС. Примерами служат приложения для iPhone и iPad, которые разделяют около 99,9% общего кода, но – благодаря мощности динамических CSS – обеспечивают нужное представление для данного размера экрана.

Модуль CSS для iPhone и iPad показан в листинге 1.

Листинг 1. Модуль CSS для iPhone и iPad
.loginScreen {
    background-image: url(../images/splashBG.png);
    background-repeat: no-repeat;
    background-size: 320px;
}

.loginScreeniPad {
    background-image: url(../images/splashBGiPad.png);
    background-repeat: no-repeat;
    background-size: 768px;
}

Добавление уровня эффективности с помощью PhoneGap

В нашу расширенную группу вошли эксперты в области разработки приложений для большинства мобильных платформ. Эксперт по каждой мобильной платформе мог бы разработать специальное приложение для нее. Но учитывая короткие сроки и относительно простой пользовательский интерфейс, мы выбрали иной подход. Стараясь переложить как можно больше функциональности Web-приложений на HTML 5 и CSS, мы использовали PhoneGap, чтобы соединить HTML 5 и CSS с платформенно-зависимыми приложениями.

Идея инструментов, подобных PhoneGap, проста. Вы начинаете с мобильного Web-приложения, написанного с использованием технологий JavaScript, HTML и CSS. Затем PhoneGap оформляет его как платформенно-зависимое приложение, основной задачей которого является запуск внутреннего браузера для просмотра только этого Web-приложения (WebView). Теперь к внутренним API – например, для видеокамеры устройства, – можно обращаться посредством вызовов JavaScript, которые связывают Web-приложение с машинным кодом. Код JavaScript для доступа к камере один и тот же для всех устройств, что опять же способствует достижению цели создания единой базы кода для разных платформ. Фрагмент кода, приведенный в листинге 2, показывает, как можно сделать фотографию с помощью устройства, используя лишь простую функцию JavaScript.

Листинг 2. Фотографирование с помощью простой функции JavaScript
mmh.phonegapActions.captureImage = function() {
    navigator.device.capture.captureImage(
		dojo.partial(mmh.phonegapActions._captureSuccess, "image"), 
            mmh.phonegapActions._captureError, {limit: 1});
};

Такие инструменты, как PhoneGap, имеют свои недостатки. Конечно, они не такие эффективные и быстродействующие, как приложения, написанные на машинном коде. Некоторые тяжелые задачи типа сложных графических анимаций все же потребуют специального исполнения. Инструменты отладки и тестирования пока еще находятся в зачаточном состоянии, хотя ситуация улучшается благодаря появлению таких средств, как Ripple и WEINRE (см. раздел Ресурсы). И вы не получаете такого же контроля над аппаратными уровнями, как при написании специальных приложений. (Этот недостаток можно преодолеть, написав подключаемые модули PhoneGap для каждой платформы. Появляется все больше таких модулей для решения конкретных задач.) Однако в нашем случае преимущества значительной доли универсального кода перевешивают недостатки PhoneGap.

Еще одно соображение, связанное с использованием PhoneGap, заключается в том, что дизайн приложения должен быть платформенно-ориентированным. Знание различных мобильных платформ помогает разработчикам приложений добиться естественного представления без написания специального кода. В нашем текущем цикле инноваций мы можем довольно быстро превращать хорошо выполненные Web-приложения в платформенно-зависимые приложения. Используя PhoneGap, мы менее чем за два дня превратили Web-приложение Android в "родное" приложение для устройства с поддержкой записи аудио/видео/фото, специального окна уведомлений и аппаратных кнопок Меню/Возврат/В начало. Тот же код мы смогли использовать и для BlackBerry.

Эффективное распространение изменений

Иногда даже если вы проделали большую работу вместе с опытными дизайнерами и проектировщиками пользовательского интерфейса, чтобы создать то, что кажется наилучшим возможным UI, пользователи все равно жалуются, что они не могут понять, как решить ту или иную простую задачу. (Куда от этого денешься?)

Вы вносите изменение, которое упрощает задачу для пользователя, и теперь его нужно распространить по всем Web-приложениям и платформенно-зависимым приложениям. Без высокоуровневого многократного использования кода между платформами разработчикам пришлось бы вносить изменения несколько раз для каждой конкретной платформы. Умножьте это на количество тестовых примеров, которые необходимо повторить, и мелкое изменение превратиться в громадное. Опять же, опираясь на форматирование HTML 5 и CSS, большую часть изменений можно внести на более низком уровне. При подходе "один элемент данных / много CSS" кодирование изменений становится менее болезненным. После тестирования Web-приложения изменения легко распространить на платформенно-зависимые решения на базе PhoneGap.

Например, нам пришлось включить кнопку "Обновить", чтобы пользователи для верности могли повторить сканирование данных. Мы разработали и протестировали эту функцию на платформе Android, а затем с высокой степенью уверенности использовали тот же код на всех прочих платформах. Мелкие настройки CSS помогли получить нужное впечатление и ощущение на разных устройствах ― и новая функция готова.

По нашим оценкам, благодаря этому методу многократного использования 90% времени расходуется на первоначальную разработку компонентов и всего около 10% ― на то, чтобы новая функция работала на всех платформах. Ясно, что если бы для каждой платформы пришлось переписывать код с использованием разных API и родных языков и сред программирования, дело обстояло бы совсем иначе.

Этот метод повторного использования применим и к исправлению ошибок. Если в пользовательском интерфейсе Web-приложения для iPhone обнаружена ошибка, вполне вероятно, что эта же ошибка присутствует и в приложениях для iPad, Android и BlackBerry, потому что в них 99% одного и того же кода. Исправив ошибку на одной платформе, мы исправим ее во всех Web-приложениях. К тому же на платформенно-зависимых версиях легко определить источник ошибок.

У нас также есть набор спрайтов для всех графических объектов, но с помощью CSS и Dojo Mobile мы получаем правильное представление для каждого устройства без большого количества дополнительной работы.

Неидеальный процесс

Мы продолжаем развивать и модернизировать свой процесс, чтобы вносить еще меньше настроек при лучшей поддержке на всех платформах. Примером могут служить средства навигации для различных устройств. Устройства iOS не содержат аппаратных кнопок "Назад" или "Меню", а у BlackBerry и Android-устройств (по крайней мере, вплоть до Android 4.0) они есть. Более того, кнопки меню Android и BlackBerry работают по-разному. Чтобы преодолеть эти различия, мы разделили свой код JavaScript на виджеты, которые можно вставлять или изменять в соответствии с каждой платформой при небольшом или нулевом вмешательстве в остальную часть кода JavaScript. Важно не только отделить код от CSS, но и разделить компоненты на модули таким образом, чтобы код было легко использовать повторно или заменить.

Следуя своей стратегии "один набор данных на множество CSS", мы смогли свести к минимуму объем работы по программированию.

Web-приложения и платформенно-зависимые приложения

Что удобнее развертывать ― Web-приложения или специальные платформенно-зависимые приложения? Наш опыт в CIO Lab Mobile Innovation показал: и то, и другое. Благодаря недавним усовершенствованиям в браузерах для смартфонов и планшетных компьютеров, Web-приложения хорошо работают на мобильных устройствах. Специальные приложения пока обеспечивают более широкий доступ к аппаратным функциям.

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

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


Заключение

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

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

Ресурсы

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения
ArticleID=830546
ArticleTitle=Быстрая разработка решений для мобильных устройств
publish-date=08152012