Александр Демидов «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 позволяет быстро создавать мобильные приложения на  HTML 5, интегрированные с «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 , только в виде реляционной БД. По умолчанию 5 Mb , но можно увеличить параметром при открытии БД. 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
Спасибо за внимание! Вопросы? Александр Демидов [email_address] +7  ( 915 )  201-1500 @demidov http://www.1c-bitrix.ru

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

  • 1.
  • 2.
    Александр Демидов «1С-Битрикс»BitrixMobile: опыт создания мобильных приложений с использованием HTML5
  • 3.
    «На Земле сейчас5,6 миллиардов мобильных телефонов, то есть больше даже, чем наручных часов…» директор по мобильному маркетингу Google Марк Ванлерберге. Презентация исследования «Мобильный Интернет в России», проведенного по заказу Google компанией J'son and Partners Consulting
  • 4.
    Пользователи мобильного интернета Портрет пользователя смартфона. Общие демографические характеристики
  • 5.
    Использование мобильного интернетана смартфонах Топ-10 целей использования мобильного интернета Самые популярные цели использования мобильного интернета на смартфонах: чтение электронной почты, прослушивание музыки и просмотр веб сайтов
  • 6.
    Использование мобильного интернетадля покупок Покупка через смартфон 23% уже совершали покупки при помощи смартфона. Около половины из них совершили покупку при помощи смартфона за последний месяц
  • 7.
    Мобильные операторы активнопродвигают мобилизацию Продвижение мобильного интернета операторами
  • 8.
    Резко обостряется конкуренцияв сегменте софта для мобильных устройств. В будущем можно будет продать аппаратные устройства, мобильные устройства, «кусок облака» и сервисы от одного поставщика. Платформа для мобильных устройств 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
  • 9.
    Приложение для конкретнойОС, доступное через конкретный канал: Marketplace, Android Market, AppStore Веб-сайт, доступный через браузер на мобильной платформе Онлайн/оффлайн HTML5-приложение, интегрированное с веб-сайтом для всех ОС HTML5-приложение, «завернутое» и опубликованное в маркетплейсе конкретной ОС Что такое мобильное приложение?
  • 10.
    Технология BitrixMobile позволяетбыстро создавать мобильные приложения на HTML 5, интегрированные с «1С-Битрикс: Управление сайтом» и «1С-Битрикс: Корпоративный портал». Технология BitrixMobile
  • 11.
    Используя открытый проект PhoneGap , мобильное веб-приложение может быть опубликовано как обычная программа в Apple App Store , Android Market , Windows Phone Marketplace и других каталогах мобильных приложений. www.phonegap.com Публикация приложений в каталогах
  • 12.
    Готовое мобильное веб-приложение BitrixOTP , которое включено в модуль «Проактивной защиты», может быть бесплатно загружено с сайта клиента. Приложение BitrixOTP опубликовано в Apple App Store и Android Market. В настоящее время готовится публикация в Windows Phone Marketplace. Веб-приложение для генерации одноразовых паролей ( OTP )
  • 13.
    Веб-приложение для генерацииодноразовых паролей ( OTP )
  • 14.
    Готовый мобильный интернет-магазин,работает на Windows Phone, iPhone, iPad, Android и BlackBerry. Пользователи могут выбрать товары в каталоге и оформить заказ со своих мобильных устройств. Заказы будут доступны в обычном интернет-магазине. Мобильная демо-версия: m.1c-bitrix.ru Мобильный интернет-магазин
  • 15.
  • 16.
    Мобильный корпоративный порталМожно работать с «живой лентой» Писать в микроблог Комментировать Работать с документами, задачами Получать и отправлять сообщения Начинать рабочий день Работает на Android, iOS, Windows Phone Мобильная версия с мобильных устройств открывается по умолчанию.
  • 17.
  • 18.
    Это рынок мобильныхприложений, написанных на HTML5 , работающих в обычном браузере, на планшетах, на мобильных телефонах. В отличие от WAP -версий, используют обычный контент сайта без модификации под мобильное устройство. Используют весь имеющийся потенциал веб-студий: дизайн, верстка, программирование, интеграция с сайтом. Формируется новый рынок для веб-студий
  • 19.
    Сайт или папкасо структурой страниц для мобильного магазина. Шаблон сайта « mobile »: jQuery Mobile – javascript библиотека для создания внешнего вида мобильного приложения. шаблоны компонентов каталога, новостей, поиска, корзины, оформления заказа, персонального раздела, авторизации, … Определение мобильного браузера и перенаправление в мобильный магазин (с возможностью возврата в основной сайт). Онлайн магазин – обычный сайт с мобильным интерфейсом. Позволяет сделать навигацию по сайту с мобильных устройств более удобно и в привычном для устройств интерфейсе. Мобильный интернет-магазин онлайн
  • 20.
    Основан на jQuery. Автоматическая генерация интерфейса, на основании атрибута “data-role”. События для устройств ( tap , swipe ) . Поддержка основных платформ (iOS, Windows Phone, Android, Blackberry, Palm WebOS, Firefox Mobile, Meego, Kindle) Ajax , history, back Окна, элементы управления, эффекты jQuery Mobile
  • 21.
    Application Cache – технология HTML5 , позволяющая закешировать набор страниц, скриптов, ресурсов для использовании в оффлайне. Список файлов приложения и правила обработки режимов расположены в manifest файле. Ссылка на манифест в страницах. BitrixMobile – автоматическая генерация манифеста. Переходим в оффлайн
  • 22.
    При первом открытиистраницы в кеш загружаются все по ссылкам из манифеста. На каждый хит к страницам приложения браузер, если онлайн, запрашивает манифест и если содержание манифеста изменилось, перечитывает все приложение в кеш (+ генерирует события). Переходим в оффлайн
  • 23.
    Web SQL DatabaseStorage – технология HTML5 для сохранения данных в локальной БД браузера. Похоже на cookies , только в виде реляционной БД. По умолчанию 5 Mb , но можно увеличить параметром при открытии БД. Session Storage – для хранения информации в рамках сессии, Local Storage – хранение простых данных (ключ - значение). BitrixMobile – javascript API для работы с БД. Переходим в оффлайн
  • 24.
  • 25.
    Работа с компонентамиБыстрый вывод на страницу «динамической» информации - «иконка» в области редактирования страницы. «Динамическими» могут быть: веб-формы, новости, каталог товаров, опросы, корзина с заказами, список обращений в техподдержку, форма подписки на рассылки и другие элементы.
  • 26.
    Компоненты, предназначенные длявозможности работы без подключения к интернет. Особенности: Не имеют «хитов», вся навигация происходит на Javascript в рамках одной (нескольких) страниц, расположенных в Application cache. Загружают всю необходимую (измененную) информацию при подключении в локальную БД. Генерируют внешний вид на Javascript (не скачивают готовый html с сервера), выбирая данные из локальной БД. BitrixMobile: компоненты с поддержкой оффлайн
  • 27.
    Самый простой способ– сделать оффлайн приложение и разместить ссылку на его запуск в браузере. Путь к иконке в заголовке. Для iPhone , в режиме запуска с рабочего стола, можно прятать строку ввода URL и статус бар. Следующий шаг – создание native приложения для каждой платформы. Делаем приложение
  • 28.
    PhoneGap - платформадля создания нативных приложений для различных мобильных устройств. Изготовление мобильного приложения
  • 29.
    PhoneGap позволяетна Javascript обращаться к оборудованию телефона ( sms, gps, camera, … ) . Изготовление мобильного приложения
  • 30.
    Для создания приложения,необходимо в проекте phonegap разместить ваше HTML приложение в папку www , сконфигурировать проект (версии, ресурсы, требуемые ресурсы) и собрать. Для сборки может быть использован сервис PhoneGap:Build http:// build.phonegap.com / - компиляция в «облаке» После сборки приложение может быть опубликовано в каталогах производителей мобильных устройств: Зарегистрироваться в соответствующем каталоге Собрать приложение по правилам PhoneGap Заполнить карточку приложения Пройти модерацию Опубликовать http:// www.phonegap.com/start Изготовление мобильного приложения
  • 31.
    Разработки партнеров: PhonegapBuild4BitrixMobile Проекты выгружаются в PhoneGap:Build непосредственно из административного интерфейса веб-проекта.
  • 32.
    Разработки партнеров: типовыетиражные решения Мобильная версия доставки суши и пиццы (поддерживает работу в оффлайн) – «Создаватель» Мобильный сайт конференции (поддерживает работу в оффлайн) – «Студия Борового»
  • 33.
    Разработки партнеров: http ://mobile.gpk.gov.by / Официальный сайт Государственного пограничного комитета Республики Беларусь + мобильная версия + приложение для Android
  • 34.
    Следите за нами!www.1c-bitrix.ru facebook.com/1CBitrix twitter.com/1C_Bitrix
  • 35.
    Спасибо за внимание!Вопросы? Александр Демидов [email_address] +7 ( 915 ) 201-1500 @demidov http://www.1c-bitrix.ru