Transcript BitrixMobile
BitrixMobile
Юрий Тушинский
Технический директор Битрикс
Bitrix + Mobile = BitrixMobile
• • • Онлайн версия сайта Офлайн версия сайта Приложение для Android, iPhone
HTML 5
• • • • Локальные хранилища. Database storage API.
Офлайн кеш (Application Cache).
Webkit расширения.
JQueryMobile
• • • Интерфейс для мобильных устройств.
Эффекты переходов между страницами, окна.
JavaScript события (tap, swipe, orientationchange, …).
• • •
PhoneGap
Набор инструментов для создания приложений к различным устройствам на основе браузера.
Мастера, настроенные проекты, инструкции. Javascript библиотека для доступа к оборудованию мобильного устройства – камера, адресная книга, вибрация, SMS и т.п.
Онлайн версия мобильного сайта
• • • • • Шаблоны Компоненты Используем jQueryMobile.
Пример – мобильный интернет магазин Необходимо создать сайт или специальный «/m/» раздел на сайте, где необходимо расположить структуру (разделы, страницы и меню) мобильной версии сайта. Для страниц необходимо установить минималистичный шаблон сайта и использовать специальные мобильные версии шаблонов компонент.
• • • •
Офлайн версия сайта (веб-приложения)
Загружает все необходимое при первом входе на основе манифеста офлайн приложения Все данные загружаются JavaScript-ом (AJAX) с сайта через специальный скрипт (веб-сервис) на сайте.
Можно использовать шаблоны сайтов, php.
Пример: /bitrix/otp/ Файл манифеста (по ссылке из исполняемого html файла ) : нужен для указания файлов (страниц и ресурсов, которые необходимо разместить в Application Cache браузера) содержит указание хэшей для автоматического обновления файлов в Application Cache
Мобильное приложение
• • • Необходимо собрать автономный комплект javascript-ов, html-страниц, ресурсов (css, png, …).
Никакого PHP, и динамически собираемых страниц по шаблону - все на клиенте!
Общение с сервером через AJAX с указанным URL.
• • • • • • • • •
Мобильное приложение - Android
Необходимо установить PhoneGap, Eclipse, Android SDK.
Создать новый Phonegap проект, настроить его.
Разместить приложение в папку /assets/www Скомпилировать и протестировать.
Зарегистрироваться на сайте http://market.android.com/ как разработчик.
Заполнить профиль компании.
Заполнить карточку приложения.
Опубликовать приложение.
Потом аналогично можно публиковать новые версии.
• • • • • • •
Мобильное приложение - iOS
Необходимо зарегистрироваться на Apple Developer Portal… Скачать Xcode Установить PhoneGap Создать проект Разместить приложение в www Протестировать на эмуляторе, на устройстве Опубликовать в AppStore (после утверждения)
• •
BitrixMobile
Javascript библиотека: – Классы для работы с локальным хранилищем и ORM.
– Исправления для jQueryMobile – поддержка динамических приложений, эффекты, история и “Back”.
PHP библиотека и поддержка в продукте: – Синхронизация – Авторизация – Режим веб-приложений
•
Получение данных и синхронизация
BitrixMobile включает в себя ORM: – поддерживающую автоматическое создание таблиц для хранения данных для офлайн использования.
– выборку (GetList) и создания объектов данных.
– синхронизацию данных с сервером.
BitrixMobile – шаблон мобильного компонента
• Шаблон содержит разметку для jQueryMobile, описывает структуры данных и JavaScript код для логики приложения.
BitrixMobile – шаблон мобильного компонента
• Шаблон описывает структуры используемых данных: • Код для инициализации:
• Шаблон содержит код логики приложения:
1 2 •
BitrixMobile – Компоненты для приложений
Компонент содержит код для выборки необходимых данных и передачи в устройство только измененной информации.
3 4
Что дальше?
• • • • Мобильная версия КП Мобильное приложение КП Пример мобильного приложения интернет магазина Применение технологии не только для мобильных устройств, но и для приложений (Chrome Apps)
Спасибо за внимание! Вопросы?