Создание мобильных приложений с использованием HTML5. Мода или реальная возможность? Опыт создания BitrixMobile. Сергей Рыжиков. - презентация

1 Создание мобильных приложений с использованием HTML5. Мода или реальная возможность? Опыт создания BitrixMobile. Сергей Рыжиков

2 Мобильность Фантастическая скорость Мобильные каналы Мобилизация пользователей Начинается эпоха 4G (LTE, Yota) Темпы роста продаж смартфонов: 55,5%* Ожидается, что продажи смартфонов в 2011 году вырастут на 24,5%.* * По данным исследовательской компании IDC

3 Что такое мобильное приложение? 1.Приложение для конкретной ОС, доступное через marketplace: iOS, Android 2x, 3x, Windows Phone7, Windows7, QNX, Linux 2.Веб-сайт, доступный через браузер на мобильной платформе 3.Онлайн/офлайн HTML5-приложение, интегрированное с веб-сайтом для всех ОС 4.HTML5-приложение, «завернутое» и опубликованное в маркетплейсе конкретной ОС

4 Платформа для мобильных устройств Резко обостряется конкуренция в сегменте софта для мобильных устройств. В будущем можно будет продать аппаратные устройства, мобильные устройства, «кусок облака» и сервисы от одного поставщика. PCPhoneTabletCloud AppleMaciPhoneiPadMobile Me MicrosoftWindows7WindowsPhone7Windows7Office 365 Google-Android Google Apps Nokia-Symbian-- RIM-BlackberryBlackBerry Tablet OS-

5 Технология BitrixMobile Технология BitrixMobile позволяет быстро создавать мобильные приложения на HTML5, интегрированные с «1С-Битрикс: Управление сайтом». На сегодня поддерживаются iOS, Android и BlackBerry OS. Планируется поддержка Symbian.

6 Публикация приложений в App Store и Marketplace Используя открытый проект PhoneGap, мобильные веб- приложения может быть опубликовано как обычная программа в Apple App Store, Android Marketplace и других каталогах мобильных приложений.

7 Веб-приложение для генерации одноразовых паролей (OTP) Готовое мобильное веб-приложение BitrixOTP, которое включено в модуль «Проактивной защиты», может быть бесплатно загружено с сайта клиента. BitrixOTP опубликовано в Apple App Store(ожидает подтверждения) и Android Market (Опубликован)

8 Веб-приложение для генерации одноразовых паролей (OTP)

9 Мобильный интернет-магазин Готовый мобильный интернет-магазин, работает на iPhone, iPad, Android и BlackBerry. Пользователи могут выбрать товары в каталоге и оформить заказ со своих мобильных устройств. Заказы будут доступны в обычном интернет- магазине. Мобильная демо-версия: m.1c-bitrix.ru

10

11 Формируется новый рынок для веб-студий Это рынок мобильных приложений, написанных на HTML5, работающих в обычном браузере, на планшетах, на мобильных телефонах. В отличие от WAP-версий, используют обычный контент сайта без модификации под мобильное устройство. Используют весь имеющийся потенциал веб-студий: дизайн, верстка, программирование, интеграция с сайтом.

12 Мобильный интернет магазин онлайн -Сайт или папка со структурой страниц для мобильного магазина. -Шаблон сайта «mobile»: -jQuery Mobile – javascript библиотека для создания внешнего вида мобильного приложения. -шаблоны компонентов каталога, новостей, поиска, корзины, оформления заказа, персонального раздела, авторизации, … -Определение мобильного браузера и перенаправление в мобильный магазин (с возможностью возврата в основной сайт). -Онлайн магазин – обычный сайт с мобильным интерфейсом. Позволяет сделать навигацию по сайту с мобильных устройств более удобно и в привычном для устройств интерфейсе.

13 jQuery Mobile -Основан на jQuery. -Автоматическая генерация интерфейса, на основании атрибута data-role. -События для устройств (tap, swipe). -Поддержка основных платформ (iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo) -Ajax, history, back -Окна, элементы управления, эффекты -Пока альфа

14 Переходим в офлайн -Application Cache – технология HTML5, позволяющая закешировать набор страниц, скриптов, ресурсов для использовании в офлайн. -Список файлов приложения и правила обработки режимов расположен в manifest файле. - Ссылка на манифест в страницах. - BitrixMobile – автоматическая генерация манифеста.

15 Переходим в офлайн -При первом открытии страницы в кеш загружаются все по ссылкам из манифеста. -На каждый хит к страницам приложения браузер, если онлайн, запрашивает манифест и если содержание манифеста изменилось, перечитывает все приложение в кеш (+ генерирует события).

16 Переходим в офлайн -Database Storage – технология HTML5 для сохранения данных в локальной БД браузера. -Похоже на cookies, только в виде реляционной БД. -По умолчанию 5Mb, но можно увеличить параметром при открытии БД. -Пока в Webkit. -Session Storage – для хранения информации в рамках сессии, Local Storage – хранение простых данных (строк, чисел). -BitrixMobile – javascript API для работы с БД.

17 Переходим в офлайн

18 Компоненты с поддержкой офлайн* -Компоненты, предназначенные для возможности работы без подключения к интернет. Особенности: -Не имеют «хитов», вся навигация происходит на Javascript в рамках одной (нескольких) страниц, расположенных в Application cache. -Загружают всю необходимую (измененную) информацию при подключении в локальную БД. -Генерируют внешний вид на Javascript (не скачивают готовый html с сервера), выбирая данные из локальной БД. -* в разработке, выход к апрелю с BitrixMobile для КП

19 Делаем приложение -Самый простой способ – сделать офлайн приложение и разместить ссылку на его запуск в браузере. -Путь к иконке в заголовке. -Для iPhone, в режиме запуска с рабочего стола, можно прятать строку ввода URL и статус бар. - Следующий шаг – создание native приложения для каждой платформы.

20 Изготовление мобильного приложения -PhoneGap - платформа для создания нативных приложений для различных мобильных устройств.

21 Изготовление мобильного приложения -PhoneGap позволяет на Javascript обращаться к оборудованию телефона (sms, gps, camera, …).

22 Изготовление мобильного приложения -Для создания приложения, необходимо в проекте phonegap разместить ваше HTML приложение в папку www, сконфигурировать проект (версии, ресурсы, требуемые ресурсы) и собрать. -После сборки приложение может быть опубликовано в каталогах производителей мобильных устройств. AppStore: -Зарегистрируйтесь в iPhone Developer Program. (>неделя) -Соберите приложение по правилам phonegap. -Заполните карточку приложения. -Отправьте на проверку (>неделя) Android market: -Зарегистрируйтесь в Android market. -Соберите приложение по правилам phonegap. -Заполните карточку приложения. -Опубликуйте

23 Приложение OTP -Офлайн HTML5 приложение для генерации одноразовых паролей. -Находится в /bitrix/otp/ при установленном модуле «Проактивной защиты», может использоваться как пример и отравная точка для создания автономного html приложения. -В ближайшее время будет опубликовано в Apple AppStore и Android Market (на утверждении).

24 Спасибо за внимание! Вопросы?