Очень скоро выходит 11 версия Битрикса. В нем по идее должны появится примеры создания нативных приложений для мобильных платформ. Данным постом я хочу продемонстрировать как создать заготовку для таких приложений. Будут рассмотрены вопросы: 1/ технологии 2/ как создавать приложение 3/ динамическое создание структуры
Вопрос синхронизации данных с Битриксом оставим для следующего топика (появится после выхода обновления)
Платформа: Android. (для остальных платформ ситуация аналогичная) [spoiler] Технологии которые включает в себя BitrixMobile
0/ HTML 5 - что это и зачем думаю не стоит объяснять
1/ Jquery Mobile (jquerymobile.com) - текущая версия 1.0 RC1 Используется для построения шаблонов приложения, максимально приближенных к нативным приложениям Замечание: В модулях bitrix.mobilestore (v 0.0.1) и studioNicka.mobileconf (v 0.0.1) используются устаревшие скрипты - меняйте
2/ PhoneGap (www.phonegap.com) - текущая версия 1.1.0 Используется для компиляции приложения из HTML в нативное представление под различные платформы Замечание: В модулях bitrix.mobilestore (v 0.0.1) и studioNicka.mobileconf (v 0.0.1) используются устаревшие скрипты - меняйте Как создавать приложение
Тут все "просто". Создаете HTML версию, используя JS взаимодействуете с сайтом и телефоном (Phonegap), потом компилируете проект под нужную платформу и все - ваше приложение создано. Работать можно как на локальном рабочем месте, так и писать прямо на своем сайте.
Если локально - используйте Xcode для iPhone и Eclipse для Android
Если нет желания заворачиваться с платформами - рекомендую использовать сервис PhoneGap Build и моим модулемPhonegapBuild4BitrixMobile для связи вашего сайта с данным сервисом
В дальнейшем я буду описывать именно случай разработки на стороне сайта с использованием модуля PhonegapBuild4BitrixMobile
Вопросы установки модуля опустим - они подробно описаны в маркетплейсе
И так приступим Наша цель создать простое приложение которое будет запускаться с Android дивайса.
1/ создадим новый проект (/bitrix/admin/studioNicka_pgbm_edit.php?lang=ru) зададим следующие параметры
ID - by.demo.pr1
Название - DEMO
Версия - 0.0.1
Версия кода - 1
Укажем опции для компиляции
Работа с файлами (file) WRITE_EXTERNAL_STORAGE
Работа с сетью (доступ к интернету) (network) ACCESS_NETWORK_STATE
Работа с уведомлениями (вибрация) (notification) VIBRATE
Остальные - по своему желанию, я добавил еще иконку (icon.png) и заставку (SPLASH) (startup.png) Жмем сохранить и в /bitrix/BitrixMobileProjects/by.demo.pr1 появился наш проект Здесь уже есть
файл config.xml - сообщает PhoneGap Build как компилировать проект (исходя из опций и параметров которые вы задали в настройках проекта)
файл index.html - простенькая заготовка
ВНИМАНИЕ: Файл config.xml хранится в UTF-8 кодировке, остальные в текущей кодировке сайта. Если у вас на сайте кодировка не UTF-8 - то модуль при передаче сам с конвертирует кодировку и отдаст нужную
2/ загрузим нужные JS библиотеки
Т.к. сейчас мы рассматриваем только создание заготовки, то качаем только jquery + jquerymobile у меня получилась такая структура
3/ создадим структуру приложения Структура index.html
заглушка - нужный скрипт PhoneGap Build сам подгрузит на этапе компиляции
jqm-docs.css - дополнительные стили - можете посмотреть в демо примере (в конце поста) jqm-docs.js - JS в котором мы опишем функциональность приложения В body запишем
и запуск этой функции в момент инициализации приложения
$(document).bind( "pagebeforechange", function( e, data ) {
if ( typeof data.toPage === "string" ) {
var u = $.mobile.path.parseUrl( data.toPage ),
re = /^#category-item/;
if ( u.hash.search(re) !== -1 ) {
showCategory( u, data.options );
e.preventDefault();
}
}
});
теперь осталось в контент главной страницы добавить структуру
Суть такая - JS перебирает ссылки с адресом #category-items, вычленяет элемент и вызывает showCategory для показа окна с нужными данными Полный код - есть в конце топика
Сохраняем все и тестируем в браузере. Приложение буднт работать по адресу http://ВАШ_САЙТ/bitrix/BitrixMobileProjects/by.demo.pr1/
Вот мой скрин
3/ компиляция приложения
идем в проект /bitrix/admin/studioNicka_pgbm_edit.php?lang=ru&ID=by.demo.pr1 и жмем кнопку Импортировать проект в PhoneGap:Build
Если Вы верно настроили подключение к PhoneGap:Build (смотрите в описании модуля на маркетплейсе), то проект будет загружен в PhoneGap:Build и через некоторое время появится ссылка на закачку приложения (страницу нужно обновить вручную) или описание ошибки компиляции
Тут просто имелось ввиду что проект в PhoneGap Build должен быть положен в UTF-8 - иначе крокозябы обеспечены + сайт - это база продукт который публикуют в маркетплейсе Гугла, а потом устанавливают на телефон - по моему может только в UTF-8 корректно работать (может и ошибаюсь)
Т.е. Ваша задача переконвертировать данные при обмене между сайтом и приложением
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».