Download
1 / 18
180 likes | 327 Views
BitrixMobile. Юрий Тушинский Технический директор Битрикс. Bitrix + Mobile = BitrixMobile. Онлайн версия сайта Офлайн версия сайта Приложение для Android, iPhone. HTML 5. Локальные хранилища. Database storage API. Офлайн кеш (Application Cache). Webkit расширения. JQueryMobile.
E N D
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 файла <html manifest="demo.manifest">) : • нужен для указания файлов (страниц и ресурсов, которые необходимо разместить в 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 – шаблон мобильного компонента • Шаблон описывает структуры используемых данных: • Код для инициализации:
Шаблон содержит код логики приложения:
BitrixMobile – Компоненты для приложений • Компонент содержит код для выборки необходимых данных и передачи в устройство только измененной информации. 1 2 3 4
Что дальше? • Мобильная версия КП • Мобильное приложение КП • Пример мобильного приложения интернет-магазина • Применение технологии не только для мобильных устройств, но и для приложений (Chrome Apps)
