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

4,233 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,233
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

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

×