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)

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