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

Содержание

Слайд 2

Мобильность

Фантастическая скорость
Мобильные каналы
Мобилизация пользователей
Начинается эпоха 4G (LTE, Yota)
Темпы роста продаж

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

* По данным исследовательской компании IDC

Слайд 3

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

Приложение для конкретной ОС, доступное через marketplace: iOS, Android

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

Слайд 4

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

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

В

Платформа для мобильных устройств Резко обостряется конкуренция в сегменте софта для мобильных
будущем можно будет продать аппаратные устройства, мобильные устройства, «кусок облака» и сервисы от одного поставщика.

Слайд 5

Технология BitrixMobile

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

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

Слайд 6

Публикация приложений в App Store и Marketplace

Используя открытый проект PhoneGap, мобильные веб-приложения

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

www.phonegap.com

Слайд 7

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

Готовое мобильное веб-приложение BitrixOTP, которое включено в модуль

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

Слайд 8

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

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

Слайд 9

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

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

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

Слайд 11

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

Это рынок мобильных приложений, написанных на HTML5, работающих

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

Слайд 12

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

Сайт или папка со структурой страниц для мобильного магазина.
Шаблон

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

Слайд 13

jQuery Mobile

Основан на jQuery.
Автоматическая генерация интерфейса, на основании атрибута “data-role”.
События для устройств

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

...
...
...

Слайд 14

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

Application Cache – технология HTML5,
позволяющая закешировать набор страниц,
скриптов,

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

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

Слайд 15

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

При первом открытии страницы в кеш
загружаются все по ссылкам

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

Слайд 16

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

Database Storage – технология HTML5 для сохранения данных в локальной

Переходим в офлайн 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 - платформа для создания нативных
приложений для различных мобильных

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

Слайд 21

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

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

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

Слайд 22

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

Для создания приложения, необходимо в проекте phonegap разместить ваше HTML

Изготовление мобильного приложения Для создания приложения, необходимо в проекте phonegap разместить ваше
приложение в папку www, сконфигурировать проект (версии, ресурсы, требуемые ресурсы) и собрать.
После сборки приложение может быть опубликовано в каталогах производителей мобильных устройств.

AppStore:
Зарегистрируйтесь в iPhone Developer Program. (>неделя)
Соберите приложение по правилам phonegap.
Заполните карточку приложения.
Отправьте на проверку (>неделя)

http://www.phonegap.com/start

Android market:
Зарегистрируйтесь в Android market.
Соберите приложение по правилам phonegap.
Заполните карточку приложения.
Опубликуйте

Слайд 23

Приложение OTP

Офлайн HTML5 приложение для генерации одноразовых паролей.
Находится в /bitrix/otp/ при установленном

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