'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


×

HTML:





Ссылка: