Оригинал: http://dev.1c-bitrix.ru/community/blogs/carter/bitrix-mobile-2.php
Приветствую, коллеги!
Не так давно наша компания объявила о выпуске нового продукта — «1С-Битрикс: Мобильное приложение».
Теперь вы можете создавать мобильные приложения с использованием Javascript +HTML5, что существенно дешевле и значительно быстрее нативной разработки.
Сейчас я расскажу как начать разрабатывать свои мобильные приложения.
С чего начать?
Итак, установим приложение для разработчиков из Google Play или AppStore.
При запуске приложения появляется форма для ввода некого адреса, которого у вас пока нет
У себя на установке «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); ?> |
main — стартовая страница приложения
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-е секунды) .»
Вы можете написать приложение
У вас есть скелет приложения — навигация и первая страница.
Теперь вы можете начать писать свое мобильное приложение, эксперементируя с методами библиотеки.
Доступна документация по мобильным приложениям.
http://dev.1c-bitrix.ru/api_help/bitrixmobile/index.php
Документация для API 6. Пока номер версии не имеет значения, так как приложения только вышли. Но в будущем разработчикам нужно будет учитывать этот номер при разработке для клиентов. Как и во всех наших продуктах обратная совместимость будет поддерживаться, но новый функционал на старых версиях будет недоступен.
За основу можно взять уже готовое решение «Мобильный интернет-магазин» (модуль «eshop_app».
Что будет дальше?
Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:
— Работа с нативными интерфейсами
— Особенности кэширования в приложении. Как его использовать.
— Решение наиболее часто возникающих задач
— Чего стоит и чего не стоит делать при разработке мобильного приложения.
— Персонализация приложения
Всем пока. Надеюсь, у вас все получится.