Не так давно наша компания объявила о выпуске нового продукта - "1С-Битрикс: Мобильное приложение".
Теперь вы можете создавать мобильные приложения с использованием Javascript +HTML5, что существенно дешевле и значительно быстрее нативной разработки.
Сейчас я расскажу как начать разрабатывать свои мобильные приложения.
С чего начать?
[spoiler]
Итак, установим приложение для разработчиков из или .
При запуске приложения появляется форма для ввода некого адреса, которого у вас пока нет
У себя на установке "1С-Битрикс: Управление сайтом" проделываем следующее:
- Установим модуль "Мобильная платформа". Это просто.
- Теперь выберем место, где будет "жить" ваше мобильное приложение. Пусть это будет папка /myfirst_app/. Создадим эту папку на сайте.
- Создадим файлики /myfirst_app/left.php и /myfirst_app/index.php.
- Шаблон сайта. Он не должен отличаться от тех шаблонов, которые создаются для "больших" сайтов. Единственное отличие - это присутствие в header.php следующего:
if (CModule::IncludeModule("mobileapp"))
CMobile::Init();
|
- Теперь в настройках сайта назначим созданый шаблон сайта для папки /myfirst_app/. Рекомендую поставить сортировку подключения шаблонов 0 или 1.
config.php
И последний шаг - создайте в папке /myfirst_app/ файл config.php. При обращении к файлу должен возвращаться JSON.
Файлик должен быть следующего содержания:
<?
header("Content-Type: application/x-javascript");
$config = array(
"appmap" => array(
"main"=>"/myfirst_app/index.php",
"left"=>"/myfirst_app/left.php"
)
);
echo json_encode($config);
?> |
left - страница, которая загружается в левую часть слайдера.
После этого у нас появился адрес, который нужно вбить в форме приложения для разработки - "http://<my site>/myfirst_app/".
Вбейте его:)
Что дальше? Меню.
Теперь девелоперское приложение может подключаться к вашему сайту и показывать контент. После подключения уже вы сами должны обеспечить корректную навигацию по приложению. Поэтому, вам понадобится меню. Его часто располагают в левой части слайдера.
Соглано содержанию config.php, в качестве страницы для левой части слайдера загружается /myfirst_app/left.php. Давайте расположим в этом файле компонент bitrix: mobileapp.menu - компонент меню:
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
$arParams = array(
"MENU_FILE_PATH" => SITE_DIR . "myfirst_app/.mobile_menu.php",
);
$APPLICATION->IncludeComponent(
'bitrix:mobileapp.menu',
'mobile',
$arParams,
false,
Array('HIDE_ICONS' => 'Y'));
?>
<script type="text/javascript">
app.enableSliderMenu(true);
</script>
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>
|
На вход компоненту отдаем параметр MENU_FILE_PATH - путь к файлу меню.
Разместим этот самый файл меню по нужному пути.
<? IncludeModuleLangFile(__FILE__); $arMobileMenuItems = array( array( "type" => "section", "text" =>"Раздел меню", "sort" => "100", "items" => array( array( "text" => "Новый пункт меню!", "data-url" => SITE_DIR."myfirst_app/test.php", "class" => "menu-item", "id" => "main", "data-pageid"=>"main_page" ) ) ) ); ?> |
Стуктура меню проста. Есть секции. Каждый пункт меню снабжается нужными атрибутами:
text - название пункта
data-url - куда будем переходить при клике по пункту
class - css класс пункта меню
id - идентификатор
data-pageid - идентификатор, который учитывается приложением. При клике на пункт страница прогрузится и закешируемся. Таким образом она всегда будет открывать мгновенно в дальнейшем, но за актуальностью контента на этой странице придется следить.
Как результат:
Что такое app?
В исходном коде страницы меню есть вызов функции app.enableSliderMenu(true) - разблокировка слайдера. Что за объект app? Это объект библиотеки BitrixMobile 2.0, который как раз и позволяет управлять приложением. При вызове в шаблоне вашего приложения CMobile::Init() объект app становится доступным. Этот объект содержим множество полезных функций. Вот некторые из них:
app.addButtons(params) - добавление кнопок на панель для текущей страницы с JS-обработчиком.
app.openBXTable(params) - открыть список из этой страницы.
app.menuCreate(params) - создание персонального меню для страницы
app.pullDown(params) - включить pull-down-to-refresh
app.openMenu(params) - открыть левое меню
app.openDocument(params) - открытие документа средствами телефона
app.openPhotos(params) - нативная фотогалерея
app.openBarCodeScanner(params) - сканер штрихкодов.
app.showLoadingScreen() - показать экран загрузки на странице. Экран полностью закрывает старницу.
app.hideLoadingScreen() - скрыть экран загрузки на странице.
app.setPageTitle(params) - заголовок страницы
Все функции пока описывать не буду.
Функции данного объекта уже в и файлике /bitrix/js/mobileapp/bitrix_mobile.js
Продолжаем. Пишем страницы, создаем таблицы.
Разместим нашу страницу /myfirst_app/test.php, на которую ссылается созданный пункт меню.
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
?>
<script type="text/javascript">
function openTable()
{
app.openBXTable({
url: "/myfirst_app/list.php",
TABLE_SETTINGS: {
alphabet_index: false, // Выключим алфавитный индекс
showtitle: true, //Покажем тайтл
cache: false,// не кэшируем
name: "Разделы", //
callback: function (data)
{
alert(JSON.stringify(data));
}
}
});
}
//добавить кнопку
app.addButtons(
{
menuButton:
{
type: 'plus',
style: 'custom',
callback: function ()
{
app.menuShow();
//app.openNewPage("/myfirst_app/test2.php");
}
}
}
);
//добавить меню
app.menuCreate({
items: [
{
name: "Открыть страницу",
action: function ()
{
// alert("Hello");
app.openNewPage("/myfirst_app/test2.php");
}
},
{
name: "bitrix",
url: "http://bitrix.ru",
icon: 'settings'
}
]
});
//title
app.setPageTitle({
title: "MyFirstApp"
});
//pull-down-to-refresh
app.pullDown({
enable: true,
callback: function ()
{
document.location.reload();
},
downtext: "Тяни...",
pulltext: "Отпускай...",
loadtext: "Жди..."
});
</script>
<button style="width:100%;height:50px" onclick="openTable();">Table</button>
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?> |
Запустим приложение и перейдем по пункту "Новый пункт меню" - увидим страницу с кнопкой "+" на панели, с "потяни-чтобы-обновить", с заголовком и кнопкой "Table". Нажмем на "Table" - открывается таблица, которая ничего не показывает
Как видно по коду вызова app.openBXTable(), данные будут браться из файлика /myfirst_app/list.php. Создадим его с таким содержанием:
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
$data = Array(
"data"=>Array(
"company"=>Array(
Array(
"ID"=>1, //идентификатор записи
"NAME"=>"Google", //имя для отображения
"URL" => "http://google.ru",
"IMAGE"=>"http://www.mintfo.com/wp-content/uploads/2012/08/New-blue-logo-Google-revamps-mainpage-favicon-300x300.png",
"TAGS" => "Заграничный поисковик",
"SECTION_ID"=>"milk"//принадлежность к секции
),
Array(
"ID"=>2,
"NAME"=>"Bitrix",
"SECTION_ID"=>"meat",
"IMAGE"=>"http://www.incr.ru/img/bitrix-logo.png",
"TAGS"=>"Отечественная CMS",
"URL"=>"http://bitrix.ru"
),
Array(
"ID"=>3,
"NAME"=>"Yandex",
"SECTION_ID"=>"meat",
"IMAGE"=>"http://blogs.computerra.ru/wp-content/uploads/2012/10/yandex-browser-logo-289x300.jpg",
"TAGS" => "Свой домашний браузер",
"URL"=>"http://yandex.ru"
)
),
),
"names"=>Array("company"=>"Компании")
);
$data = $APPLICATION->ConvertCharsetArray($data, "windows-1251","utf-8");
$APPLICATION->RestartBuffer();
echo json_encode($data);
die(); |
Снова нажмем на кнопку "Table". Теперь таблица отображает данные.
События
В мобильном приложении есть некоторые события, которые позволяют гибко решать множество задач. В
Обрабатывать эти события просто. Например:
BX.addCustomEvent("onOpenPageAfter", function(){
setTimeout(function(){
app.closeController();
},2000);
});
|
Размещая этот код, мы говорим странице - "После открытия, закройся обратно через 2-е секунды) ."
Вы можете написать приложение
У вас есть скелет приложения - навигация и первая страница.
Теперь вы можете начать писать свое мобильное приложение, эксперементируя с методами библиотеки.
Доступна документация по мобильным приложениям.
Документация для API 6. Пока номер версии не имеет значения, так как приложения только вышли. Но в будущем разработчикам нужно будет учитывать этот номер при разработке для клиентов. Как и во всех наших продуктах обратная совместимость будет поддерживаться, но новый функционал на старых версиях будет недоступен.
За основу можно взять уже готовое решение "Мобильный интернет-магазин" (модуль "eshop_app"
.Что будет дальше?
Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:
- Работа с нативными интерфейсами
- Особенности кэширования в приложении. Как его использовать.
- Решение наиболее часто возникающих задач
- Чего стоит и чего не стоит делать при разработке мобильного приложения.
- Персонализация приложения
Всем пока. Надеюсь, у вас все получится.
Фото:
1) Есть ли API либо предвидится в обозримом будущем для работы с камерой мобильного устройства (например для реализации планерок итп)
2) BitrixMobile.addButtons - предполагается ли сортировка кнопок?
3) Есть метод BitrixMobile.flipScreen(), я правильно понимаю что это просто графический эффект? Соответственно отсюда вопрос есть ли событие отслеживающее положение мобильного устройства (Горизонтально\Вертикально)?
window.onorientationchange = function () { /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the left, or landscape mode with the screen turned to the right. */ var orientation = window.orientation; switch (orientation) { case 0: /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ document.body.setAttribute("class", "portrait"); /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */ document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom)."; break; case 90: /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ document.body.setAttribute("class", "landscape"); document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right)."; break; case -90: /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ document.body.setAttribute("class", "landscape"); document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left)."; break; } }Хотелось бы перейти непосредственно к сборке (описанию процесса). Вот создал я приложение. Как из него сделать свое уникальное приложение и во сколько мне (как партнеру) это обойдется?
и для превращения шаблона в "мобильный" что-то вроде:
if (!CModule::IncludeModule("mobileapp")) die(); CMobile::Init();И еще, предполагается ли API для работы со стандартной звонилкой (например, набрать указанный номер)?
Вообще, по умолчанию мобильное приложение поддерживает ссылки в виде:
При нажатии на ссылки будет осуществлет звонок по указанном номеру.
Вы это имели ввиду?
Есть демка готового приложения?
AppStore:
1. Демо-магазин
2. Мобильное приложение для разработки
3. Мобильное приложение для администрирования
Аналогичные приложения для Android:
Для администрирования:
Демо-магазин:
Разработка:
Было бы круто конечно, если можно было сделать его более нативным.
А пока много глюков и артефактов появляется. (на гугл-маркете уже описали)
Как вариант - тестовые сервисы. Например, testflightapp.com, для распространения очень сложно. Каждый девайс, на который будет устанавливаться приложение, придется добавлять как устройство для разработки в центре разработчика iOS. В общем все нетривиально и заточено именно под тестирование, а не распространение
Другой вариант описан довольно подробно вот тут -
Android
Тут нет проблем. Мы можем просто предоставить подписанный файл .apk, его можно разместить на каком-либо внутреннем сервере, создать на него ссылку в веб-интерфейсе, а в браузере Android-устройства перейти по этой ссылке - приложение будет загружено и будет предложено установить его. Предварительно в настройках безопасности нужно разрешить установку из неизвестных источников.
И когда примерно ждать выхода API в том законченном виде, в котором вы его задумали?
По данным Android ниже версии 2.3.3 занимают всего около 6%.
Сам 2.3.3 сейчас составляет около 40% процентов и его доля падает примерно на 1,5-2% в месяца. Остальное - немногочистенные 3.x и 4.x, которые в сумме составляют почти 50%.
По другим источникам данные похожие.
Есть и другая причина, кроме данных статистики - много технических ограничений, которые не позволяют реализовать более менее нормальное гибридное(!) приложение на Android ниже 2.3.3.
Фактически, мне интересно, если так сделать, то мы получим версию сайта аля-просмотр через мобильный браузер, но с дополнительным нативным меню?
Выглядеть, наверное, будет нелепо, но интересует именно функциональная возможность такой реализации =)
1. Для bitrix:mobileapp.menu нет шаблона mobile. Ставлю .default - . В общем, меню так и не завелось.
2. Для .moble_menu стоит указать вверху стандартную строчку
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die();3. Могу я вообще не использовать меню? Мне нужно чисто "кнопка и текстареа", могу я такое сделать? Вот Юрий вроде убедил меня, но что-то я теперь сомневаюсь, что так легко от созданных рамок можно отойти.
4. Создаю на главной такую кнопку
Кажет вот такую . Я какие-то стили забыл? И как я могу добавить "чуть красненького" к любому элементу меню?
Второй вопрос: а что в шаблоне mobile? Приоединяюсь к вопросу: хорошо бы выложить архив с набором файлов для контента и шаблонов, чтобы можно было бы в коде покопаться.
И еще: GPS будет поддерживаться?
ReadyDevice( function () { app.getCurrentLocation( { onsuccess: function (position) { alert(JSON.stringify(position)); } } ); } );А вообще дополнительно можно смотреть документацию по phonegap 2.0
Фонгэп полностью поддерживается и никак не урезан. Но если использовать его функции напрямую нужно быть готовым к поддержке своего кода, т.к. мы оставляем за собой право менять версию фонгэп.
Обратная совместимость гарантируется только для BitrixMobile.
<script> app.pullDown({ enable:true, pulltext:"Потяни здесь для обновления", downtext:"А теперь отпусти", loadtext:"Загружаем...", callback:function(){ document.location.reload(); } }); </script>В связи с этим следующий вопрос: как бы нам кешировать страницу таким образом, чтобы при отсутсвии инета у нас все-таки выводилась, например, форма для отсылки, закешированная с сайта?
Третий вопрос - к этому же: например, мы отсылаем форму обратной связи, но инета нет. Мы можем записать данные в локал сторедж, чтобы при появлении инета данные отослались автоматически?
Четвертый вопрос - по авторизации. Нативные приложения авторизуются раз и навсегда, гибридное приходится авторизовывать после каждого разрыва связи. Можно как-то упростить процесс на основе каких-то уникальных данных данного телефона (планшета)?
document.addEventListener("online", function(){ //здесь достаем данные из локалтораджа и отправляем }, false);В приложениях Битрикс24 и Администрирования есть специальный механизм авторизации и ее восстановления, но там бэкэнд особенный - он вообще не позволяет работать с контентом неавторизованным пользователям и отдает ответ в виде JSON вместо страницы. Приложение ловит этот JSON, пытается восстановить авторизацию, а потом снова запрашивает эту страницу.
Есть реализованная идея: подгружаю ajax'ом данные из компонента, размещаю их в web-sql, а потом оттуда выборкой выкладываю на страницу. Загвоздка только в передаче параметра с json-данными напрямую в app.openBXTable...
Сейчас только вышло обновление модуля mobileapp c поддержкой SQLite, в свете этого передача данных в списки через JSON(который можно теперь держать в локальной БД) сама напрашивается.
Ещё такой вопрос возник. Я так понимаю, изменения некоторых параметров в шаблоне дизайна Мобильного приложения не предусмотрены?? Скажем, изменить цвет и фон верхней красной панели и кнопок на этой панели. Например, на изменения .notive.header в template_styles.css (при подключенном шаблоне eshop_app) Мобильное приложение не реагирует...
вроде как .ipa файл эмулятору подсунуть не получится (вернее, получается, но при запуске приложение "валится").
Исходники будете давать? =)
вроде как .ipa файл эмулятору подсунуть не получится (вернее, получается, но при запуске приложение "валится").
И причем свой эмулятор (ну хоть на фреймах) собрать тоже не получится. нативные списки и тд работать никак не будут, то есть этот эмулятор получится как chrome, только чуть-чуть удобнее...
iPad?
<meta name="viewport" content="width=780, minimum-scale=0.1" />
на всех других версиях и iphone(5,4,4s) все правильно отработало
app.loadPageBlank({ url: <url>, data: {param1: "test1", param2:"test2"} });Получения параметров странице Б:
app.getPageParams({ callback: function(data) { //using data } });Нужный функционал.
Например, можно ли добавить 4 кнопки на панель (пример с двумя кнопками в документации не работает на Android)?
Можно ли добавить кнопку с иконкой и текстом? Что за параметр "style" у кнопки в примере? Его нет в документации.
Пример с двумя кнопками в документации не работает не только на Android, но и на iPhone.
Может что-то мы не верно понимаем, может возможно добавить только 1 кнопку и её положение фиксировано?
Параметр Позиция кнопки buttons.position вообще никак не приниматеся, при его указании не появляется даже первая кнопка.
Все модули ядра обновлены.
хотел задать вопрос я создал приложение, сейчас хочу установить но не знаю как сделать
пожалуйста если делали такое напишите как сделать.
Но для того, чтобы проверить, как ваше приложение работает сейчас, вы можете использовать официальное приложение для разработчиков под вашу платформу: или . Как этим инструментом пользоваться описано
Методом app.openBXTable вывожу нативный список, мне надо по нажатию по списку открыть подсписок так же нативный. Вложенность не ограничена.
Пробовал переходить на другую страницу и там по загрузке открывать нативный список следующего уровня, но тогда получается пустая страница при переходах обратно. Т.е. в цепочку навигации вставляется пустая страница, что портит вид.
Сделал всё как описано выше, но при тестировании ios через приложения для разработчиков выкидывает в браузер и открывает там страницу, а приложение подвисает, что мог неправильно сделать подскажите?
Возможно ли сделать это на вашей платформе?