Вчера мы выпустили обновление модуля "Мобильная платформа" версии 14.5.1. Пока это обновление в статусе бета.
Самым значительным изменением является новый функционал под названием "Конструктор мобильного приложения", или КМП (как его называют наши тестировщики)
Это огромный шаг к упрощению процесса создания мобильных приложений на нашей платформе. Постараюсь кратко описать это нововведение.
[spoiler]
Какие задачи решает КМП:
1. Создание базового макета серверной части мобильного приложения на платформе BitrixMobile 2.0
2. Настройка параметров нативных элементов приложения
3. Настройка мобильного параметров мобильного приложения по платформам - Android и iOS
Итак, давайте рассмотрим подробнее каждый из пунктов.
Создание серверной части мобильного приложения
Для начала вам нужно перейти в административную часть сайта.
Далее Сервисы-->Мобильное приложение-->Конструктор мобильных приложений.
Создаем приложение. Нажимаем "Создать приложение", появляется форма создания.
В форме создания приложения вам предлагается указать следующее:
- Название приложения
- Код приложения (используетм только латиницу и знаки подчеркивания)
- Название папки приложения, которая будет создана корне сайта (только латиница и знаки подчеркивания)
- Шаблон приложения - можно создать новый, указав латиницей идентификатор, выбрать из существующих или ничего не делать
Например так:
Если все данные введены корректно, кнопка "Создать" станет активной - нажмите на нее.
После создания приложения у вас в корне сайта появляется папка с файлами нужной структуры, создается шаблон сайта с подключенной мобильной платформой и назначается на эту папку. В дальнейшем всю разработку вы будете вести именно в созданной вами папке. В данном случае, это http://<мой_сайт>/mobile_app/
Теперь давайте проверим работоспособность созданного макета на сервере. Для этого установим и запустим мобильное приложение для разработчиков BitrixMobile из или .
Введем адрес приложения в формате "http://<домен>/<имя_папки>" и нажмем подключиться. Если все хорошо, то увидим следующее:
Макет создан, можно приступить к настройке нативных элементов интерфейса.
Настройка параметров приложения и вида нативных элементов
Итак, после создания приложения открывается редактор, в котором мы увидим разбитые на группы параметры (справа) и легкое превью(слева).
В верхней панели располагается селектор для переключения между приложениями и табы для переключения между конфигурациями.
В панели вы сможете добавить еще одно приложение или добавить конфигурацию к уже созданному приложению. По умолчанию к приложению создается "Общая конфигурация", которая будет применяться как для Android так и для iOS.
Параметры в редакторе разделяются по нескольким типам:
- цвет;
- изображение;
- число;
- строка;
- флаг;
- значение из списка;
Некоторые из них "оснащены" соответствующими контролами:
Результат изменения некоторых параметров отображается в превью.
Пока есть три экрана:
- Загрузка ( отображает параметры экрана загрузки)
- Главный экран (параметры фона)
- Списки
 Важная особенность: чтобы не искать параметры в группах, можно просто кликнуть на элемент превью - редактор переключиться на нужную группу параметров и подсветит их. |
В настройке параметров типа "изображение" есть возможность множественной загрузки и выбора уже ранее загруженных изображений.
Каждое отдельное приложение имеет свой банк изображений, что позволяет применять эти изображения в на нескольких конфигурациях в рамках одного приложения.
Некоторые изображения снабжены дополнительным параметром растягивания с режимами crop/strech/repeat:
Изменение любого параметра сопровождается австосохранением и вы можете сразу же в мобильном приложении для разработчика увидеть сделанные изменения.
Отдельные параметры для отдельной платформы
В верхней панели вы можете добавлять и удалять конфигурации. Так вы можете добавить конфигурацию для Android и, подключаясь приложением для разработки, вы будете видеть именно Android-конфигурацию, а не общую.
Важно
С момента выпуска этого конструктора рекомендуется формировать параметры приложения именно через него. Теперь вам не нужно разбираться в структуре параметров и искать в документации их названия - все будет в конструкторе.
Конструктор создает в папке вашего приложения файлик settings.php, на который мы будет ориентироваться при сборке.
| Обратите внимание на раздел "Дополнительно" - там есть невизуальные настройки, которые включают в себя параметры push-уведомлений и возможность отключения верхней панели и слайдера в итоговом приложении. |
Заключение
Естественно, конструктор сам не разработает приложение, но часть важных задач он решит за вас.
Хотелось бы упомянуть, что это только первая версия конструктора и он является только частью планируемого функционала.
Что мы планируем:
- Визуализировать каждый параметр и добавить больше шаблонов типовых приложений
- Создать средства для публикации и слежением за статусами публикации прямо в административной части сайта
Удачи!
Фото:
Если очень хочется, то в модуле mobileapp есть API, которое собственно и используется в конструкторе для чтения и сохранения конфигурации. Будут учитываться только те параметры, которые есть в карте параметров. Все лишние параметры будут обрезаться. Я говорю, конечно же, об использовании стандартного API.
Вот так можно посмотреть конфигурации:
header("Content-Type: application/x-javascript"); CModule::IncludeModule("mobileapp"); $platform = strtolower(CMobile::getInstance()->getPlatform()); echo \Bitrix\MobileApp\Designer\Manager::getConfigJSON("firstapp", $platform);и в пунктах изображение фона для планшета обозначается как image_landscape, а во вкладке "Скользящая панель", устанавливается как "image_large", это тоже так и должно быть?
Использую стандартный компонент mobile.im.dialog и вроде все супер - но как только вызову клавиатуру - инпут берет и под клаву заныревает )
Но даже как debug сделать не представляю. В ФФ ясен буй все отлично )
Уже победил принудительную авториазацию - хоть добиться такой как у б24 не смог. Даже акк разработчика - но чертов прыгающий чат покоя не дает )
Сходное по логике есть app.openLeft(); такое.
Пример от балды )
$(function(){ $(a).click(function(){ app.openLeft(); }); });app.showButtonPanel
showPanel = function(){ app.exec("showButtonPanel", { hidden_buttons_panel: true, buttons: { list2: { name: "name2222", type: "right_text", callback: function () { app.exec("showSelectPicker", { //multiselect:true, callback: function (data) { app.alert({ text:"123", button:"2321!", title:" " }); }, values: [ "qwer!", "qwer2232!", "qwerts." ] }) } }, list4: { type:"right_text", name: "232", callback: function () { app.updateButtonBadge( { button: "right", text: String.valueOf(Math.random()) } ); } }, list3: { name: "name", type: "right_text", callback: function () { openList(); } } } }); };Подскажите, пожалуйста есть ли у вас функционал, называемый PUSH уведомлениями?
Планируете ли вы развивать свой модуль для других платформ ( CMS )?
использую редакцию бизнес, залил обновления, но в сервисах нет конструтора
Сегодня провели обновление платформы, у нас стоит версия 1С-Битрикс: Управление сайтом 14.9.3. Редакция продукта: Стандарт, приятно были удивлены выхода из бета тестирования модуля мобильное приложение, но к сожалению всеми преимуществами по созданию мобильного приложения воспользоваться не смогли. При переходе в раздел: Рабочий стол/Сервисы/Мобильное приложение/Конструктор мобильных приложений мы видим пустой экран. Например, в редакции интернет магазина у нашего клиента, все отображается нормально, точно как здесь .
В редакцию вписываемся, согласно сообщению на форуме .
Отсюда вопрос, почему у нас пустой экран, и как нам это устранить, чтобы мы могли воспользоваться полностью новыми возможностями по разработке приложения.
Например функции visibleNavigationBar, enableSliderMenu
К примеру требуется скрыть навигационное меню и запретить выкатывания левого меню:
app.enableSliderMenu(); app.enableSliderMenu(false); app.enableSliderMenu('false'); app.enableSliderMenu({enable:false}); app.enableSliderMenu({enable:'false'});Насчет setting.php
Вместо списка настроек теперь там что-то где-=то как то подключается. порывшись в движке так ничего толкового и не нашел где же эти настройки теперь хранятся.
К примеру нужно кнопку с иконкой на всю высоту навигационного меню. В результате только кнопка с большим отступом (что можно судить по фону), внутри которой также имеется отступ от границ для картинки. в итоге картинка совсем маленькая получается, что не есть гуд. Опять же не помешало бы каким нить способом убрать также кнопку меню, которую хотелось бы заменить чем нить своим
Или может есть способ не отображать авторизацию в меню?!
Андроид 2.3.5, браузер стандартный.
вот так сейчас выглядит меню левое...
<? IncludeModuleLangFile($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/mobileapp/public/.mobile_menu.php"); $arMobileMenuItems = array( array( "type" => "section", "text" => GetMessage("MOBILE_MENU_HEADER"), "sort" => "100", "items" => array( array( "text" => GetMessage("MOBILE_MENU_MAIN"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "main", ), array( "text" => GetMessage("MOBILE_MENU_ITEM"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point1", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_1"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point2", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_2"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point3", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_3"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point4", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_4"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point5", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_5"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point6", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_6"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point7", ), array( "text" => GetMessage("MOBILE_MENU_ITEM_7"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point8", ), array( "text" => GetMessage("MOBILE_MENU_ABOUT"), "data-url" => SITE_DIR . "mobile/index.php", "class" => "menu-item", "id" => "point9", ) ) ) ); ?>Не думаю, что корректно сравнивать наш конструктор и указанные вами сервисы. Это разные инструменты и цели у них разные.
Наш конструктор - это вспомогательный инструмент, который только создает шаблон приложения (структуру) и позволяет произвести настройки внешнего вида нативных элементов приложения на BitrixMobile, в перспективе можно будет выбирать конкретные решения при создании приложения. После создания темплейта приложения следует разработка самого приложения и его наполнение (конструктор за вас этого не сделает).
Business Apps или TheAppBuilder - это законченные решения, которые реализуют весь цикл от настройки внешнего вида, формирование структуры, до выставления источников данных.
Вопрос с переносимостью с проекта на проект. Если приложение создано в конструкторе, как я понимаю, все его настройки сохранены в БД.
В config.php вы выгружаете сохраненные в конструкторе настройки. Что бы перенести его на другой проект, надо копировать настройки из БД руками или скриптами, либо собирать приложение заново.
На практике разработка и настройка приложения ведется на DEV, и уже готовое выкладывается на бой.
Возможно ли в этом случае config.php перевести в статику, отвязать от БД? Какие могут возникнуть подводные камни при сборке и публикации?
1. На бою не получится настраивать приложение через конструктор. Придется вручную добавлять файлы и параметры, что повышает риск ошибки.
2. Если используются изображения в настройках, то пути к картинкам в итоговой конфигурации будут актуальны для DEV, но неактуальны для боя. Придется переносить изображения и править конфиг.
3. Пропадает возможность создания конфига отдельно для каждой платформы. Всегда будет возвращаться одна и та же конфигурация. Если она у вас и так одна, то это не проблема.
Мое мнение, в большинстве случаев настроек не так много и их можно продублировать "руками" на боевой версии. В будущем подумаем над механизмом импорта/экспорта конфигураций.
При создании приложения добавляются записи в две таблички.
- b_mobileapp_app
- b_mobileapp_config
Только вот проблема остается следующая. при переносе приложения на другой проект не запускается конструктор мобильного приложения.
Не могу понять в чем может быть причина. чего забыл я перенести.
Это все произошло после обновления модуля mobileapp.
Я сперва удалил старый модуль полностью заменил папку с модулем и установил. Папка eshop_app/ обновилась и все. конструктор не запускается.
Чего необходимо проделать чтобы запустить конструктор.
Подскажите как отобразить нижнюю панель. В конструкторе он отображается а в приложении ни как не могу понять как отобразить.
через некоторое время приходится вводить логи и пароль т.к. сбрасывается авторизация