Александр Демидов«1С-Битрикс»

BitrixMobile: опыт создания мобильных приложений с использованием HTML5

«На Земле сейчас 5,6 миллиардов мобильных телефонов, то есть больше даже, чем наручных часов…»

директор по мобильному маркетингу Google Марк Ванлерберге.

Презентация исследования «Мобильный Интернет в России», проведенного по заказу Google компанией J'son and Partners Consulting

Пользователи мобильного интернета

Портрет пользователя смартфона. Общие демографические характеристики

Использование мобильногоинтернета на смартфонах

Топ-10 целей использования мобильного интернета

Самые популярные цели использования мобильного интернета на смартфонах:чтение электронной почты, прослушивание музыки и просмотр веб сайтов

Использование мобильного интернета для покупок

Покупка через смартфон

23% уже совершали покупки при помощи смартфона. Около половины из них совершили покупку при помощи смартфона за последний месяц

Мобильные операторы активно продвигают мобилизацию

Продвижение мобильногоинтернета операторами

Резко обостряется конкуренция в сегменте софта для мобильных устройств.

В будущем можно будет продать аппаратные устройства, мобильные устройства, «кусок облака» и сервисы от одного поставщика.

PC Phone Tablet Cloud

Microsoft Windows 7 / 8 Windows Phone Windows 8 Office 365

Apple Mac iPhone iPad iCloud

Google Chrome OS Android Android / Chrome OS

Google Apps

Платформа для мобильных устройств

Приложение для конкретной ОС, доступное через конкретный канал: Marketplace, Android Market, AppStore

Веб-сайт, доступный через браузер на мобильной платформе

Онлайн/оффлайн HTML5-приложение, интегрированное с веб-сайтом для всех ОС

HTML5-приложение, «завернутое» и опубликованное в маркетплейсе конкретной ОС

Что такое мобильное приложение?

Технология BitrixMobile позволяет быстро создавать мобильные приложения на HTML5, интегрированные с «1С-Битрикс: Управление сайтом» и «1С-Битрикс: Корпоративный портал».

Технология BitrixMobile

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

www.phonegap.com

Публикация приложений в каталогах

Готовое мобильное веб-приложение BitrixOTP, которое включено в модуль «Проактивной защиты», может быть бесплатно загружено с сайта клиента.

Приложение BitrixOTP опубликовано в Apple App Store и Android Market. В настоящее время готовится публикация в Windows Phone Marketplace.

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

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

Готовый мобильный интернет-магазин, работает на Windows Phone, iPhone, iPad, Android и BlackBerry.

Пользователи могут выбрать товары в каталоге и оформить заказ со своих мобильных устройств.

Заказы будут доступны в обычном интернет-магазине.

Мобильная демо-версия: m.1c-bitrix.ru

Мобильный интернет-магазин

Мобильный интернет-магазин

Мобильный корпоративный портал

Можно работать с «живой лентой»Писать в микроблогКомментироватьРаботать с документами, задачамиПолучать и отправлять сообщенияНачинать рабочий деньРаботает на Android, iOS, Windows Phone

Мобильная версия с мобильных устройств открывается по умолчанию.

Мобильный корпоративный портал

Это рынок мобильных приложений, написанных на HTML5, работающих в обычном браузере, на планшетах, на мобильных телефонах.

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

Используют весь имеющийся потенциал веб-студий: дизайн, верстка, программирование, интеграция с сайтом.

Формируется новый рынок для веб-студий

Сайт или папка со структурой страниц для мобильного магазина.Шаблон сайта «mobile»: jQuery Mobile – javascript библиотека для создания внешнего

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

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

Мобильный интернет-магазин онлайн

Основан на jQuery.Автоматическая генерация интерфейса, на основании атрибута “data-role”.События для устройств (tap, swipe).Поддержка основных платформ (iOS, Windows Phone, Android, Blackberry, Palm WebOS, Firefox Mobile, Meego, Kindle)Ajax, history, backОкна, элементы управления, эффекты

jQuery Mobile

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

Ссылка на манифест в страницах.

BitrixMobile – автоматическая генерация манифеста.

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

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

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

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

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

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

Работа с компонентами

Быстрый вывод на страницу «динамической» информации - «иконка» в области редактирования страницы.

«Динамическими» могут быть: веб-формы, новости, каталог товаров, опросы, корзина с заказами, список обращений в техподдержку, форма подписки на рассылки и другие элементы.

Компоненты, предназначенные для возможности работы без подключения к интернет.

Особенности:

Не имеют «хитов», вся навигация происходит на Javascript в рамках одной (нескольких) страниц, расположенных в Application cache.

Загружают всю необходимую (измененную) информацию при подключении в локальную БД.

Генерируют внешний вид на Javascript (не скачивают готовый html с сервера), выбирая данные из локальной БД.

BitrixMobile: компоненты с поддержкой оффлайн

Самый простой способ – сделать оффлайн приложение и разместить ссылку на его запуск в браузере.

Путь к иконке в заголовке.

Для iPhone, в режиме запуска с рабочего стола, можно прятать строку ввода URL и статус бар.

Следующий шаг – создание native приложения для каждой платформы.

Делаем приложение

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

Изготовление мобильного приложения

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

Изготовление мобильного приложения

Для создания приложения, необходимо в проекте phonegap разместить ваше HTML приложение в папку www, сконфигурировать проект (версии, ресурсы, требуемые ресурсы) и собрать. Для сборки может быть использован сервис PhoneGap:Build http://build.phonegap.com/ - компиляция в «облаке»После сборки приложение может быть опубликовано в каталогах производителей мобильных устройств:

Зарегистрироваться в соответствующем каталогеСобрать приложение по правилам PhoneGapЗаполнить карточку приложенияПройти модерациюОпубликовать

http://www.phonegap.com/start

Изготовление мобильного приложения

Разработки партнеров: PhonegapBuild4BitrixMobile

Проекты выгружаются в PhoneGap:Build непосредственно из административного интерфейса веб-проекта.

Разработки партнеров: типовые тиражные решения

Мобильная версия доставки суши и пиццы (поддерживает работу в оффлайн) – «Создаватель»

Мобильный сайт конференции (поддерживает работу в оффлайн) – «Студия Борового»

Разработки партнеров: http://mobile.gpk.gov.by/

Официальный сайт Государственного пограничного комитета Республики Беларусь + мобильная версия + приложение для Android

Следите за нами!

www.1c-bitrix.ru

facebook.com/1CBitrix

twitter.com/1C_Bitrix

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

Александр Демидов

demidov@1c-bitrix.ru

+7 (915) 201-1500

@demidov

http://www.1c-bitrix.ru