Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
Не так давно наша компания объявила о выпуске нового продукта - "1С-Битрикс: Мобильное приложение".
Теперь вы можете создавать мобильные приложения с использованием Javascript +HTML5, что существенно дешевле и значительно быстрее нативной разработки.
Сейчас я расскажу как начать разрабатывать свои мобильные приложения.
С чего начать?
Итак, установим приложение для разработчиков из или .
При запуске приложения появляется форма для ввода некого адреса, которого у вас пока нет
У себя на установке "1С-Битрикс: Управление сайтом" проделываем следующее:
- Установим модуль "Мобильная платформа". Это просто.
- Теперь выберем место, где будет "жить" ваше мобильное приложение. Пусть это будет папка /myfirst_app/. Создадим эту папку на сайте.
- Создадим файлики /myfirst_app/left.php и /myfirst_app/index.php.
- Шаблон сайта. Он не должен отличаться от тех шаблонов, которые создаются для "больших" сайтов. Единственное отличие - это присутствие в header.php следующего:
Для чего это нужно? Написано в
- Теперь в настройках сайта назначим созданый шаблон сайта для папки /myfirst_app/. Рекомендую поставить сортировку подключения шаблонов 0 или 1.
config.php
И последний шаг - создайте в папке /myfirst_app/ файл config.php. При обращении к файлу должен возвращаться JSON.
Файлик должен быть следующего содержания:
main - стартовая страница приложения
left - страница, которая загружается в левую часть слайдера.
После этого у нас появился адрес, который нужно вбить в форме приложения для разработки - "http://<my site>/myfirst_app/".
Вбейте его:)
Что дальше? Меню.
Теперь девелоперское приложение может подключаться к вашему сайту и показывать контент. После подключения уже вы сами должны обеспечить корректную навигацию по приложению. Поэтому, вам понадобится меню. Его часто располагают в левой части слайдера.
Соглано содержанию config.php, в качестве страницы для левой части слайдера загружается /myfirst_app/left.php. Давайте расположим в этом файле компонент bitrix: mobileapp.menu - компонент меню:
На вход компоненту отдаем параметр MENU_FILE_PATH - путь к файлу меню.
Разместим этот самый файл меню по нужному пути.
Стуктура меню проста. Есть секции. Каждый пункт меню снабжается нужными атрибутами:
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, на которую ссылается созданный пункт меню.
Запустим приложение и перейдем по пункту "Новый пункт меню" - увидим страницу с кнопкой "+" на панели, с "потяни-чтобы-обновить", с заголовком и кнопкой "Table". Нажмем на "Table" - открывается таблица, которая ничего не показывает
Как видно по коду вызова app.openBXTable(), данные будут браться из файлика /myfirst_app/list.php. Создадим его с таким содержанием:
Снова нажмем на кнопку "Table". Теперь таблица отображает данные.
События
В мобильном приложении есть некоторые события, которые позволяют гибко решать множество задач. В
Обрабатывать эти события просто. Например:
Размещая этот код, мы говорим странице - "После открытия, закройся обратно через 2-е секунды) ."
Вы можете написать приложение
У вас есть скелет приложения - навигация и первая страница.
Теперь вы можете начать писать свое мобильное приложение, эксперементируя с методами библиотеки.
Доступна документация по мобильным приложениям.
Документация для API 6. Пока номер версии не имеет значения, так как приложения только вышли. Но в будущем разработчикам нужно будет учитывать этот номер при разработке для клиентов. Как и во всех наших продуктах обратная совместимость будет поддерживаться, но новый функционал на старых версиях будет недоступен.
За основу можно взять уже готовое решение "Мобильный интернет-магазин" (модуль "eshop_app"
.
Что будет дальше?
Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:
- Работа с нативными интерфейсами
- Особенности кэширования в приложении. Как его использовать.
- Решение наиболее часто возникающих задач
- Чего стоит и чего не стоит делать при разработке мобильного приложения.
- Персонализация приложения
Всем пока. Надеюсь, у вас все получится.
Назад в раздел
то ждем ваше обращение в нашей службе тех поддержки.
Новый продукт - 1С-Битрикс: Мобильное приложение
Приветствую, коллеги!Не так давно наша компания объявила о выпуске нового продукта - "1С-Битрикс: Мобильное приложение".
Теперь вы можете создавать мобильные приложения с использованием Javascript +HTML5, что существенно дешевле и значительно быстрее нативной разработки.
Сейчас я расскажу как начать разрабатывать свои мобильные приложения.
С чего начать?
Итак, установим приложение для разработчиков из или .
При запуске приложения появляется форма для ввода некого адреса, которого у вас пока нет
У себя на установке "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"
.Что будет дальше?
Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:
- Работа с нативными интерфейсами
- Особенности кэширования в приложении. Как его использовать.
- Решение наиболее часто возникающих задач
- Чего стоит и чего не стоит делать при разработке мобильного приложения.
- Персонализация приложения
Всем пока. Надеюсь, у вас все получится.
Фото:
Назад в раздел
Подписаться на новые материалы раздела:
