C чего начать?

1. Установить приложение для разработчиков из Google Play или AppStore. При запуске приложения появляется форма для ввода некого адреса, которого пока нет.

   

2. Далее на установке «1С-Битрикс: Управление сайтом» необходимо:
   • Установить модуль Мобильная платформа.
   • Выбрать место расположения мобильного приложения. Например, это будет папка /myfirst_app/.
   • Создать файлы /myfirst_app/left.php и /myfirst_app/index.php.
   • Шаблон сайта не должен отличаться от тех шаблонов, которые создаются для обычных сайтов. Единственное отличие - это присутствие в header.php следующего:

     if (CModule::IncludeModule("mobileapp"))
        CMobile::Init();
     

     Т.е чтобы создать шаблон мобильного приложения, нужно вызвать метод CMobile::Init() в стандартном шаблоне сайта. С помощью этого метода инициализируются нужные константы, подключаются нужные JS-скрипты, соответствующие платформе клиента (iOS или Android), создаются нужные объекты и т.п.

   • Далее в настройках сайта назначить созданный шаблон сайта для папки /myfirst_app/. Рекомендуется поставить сортировку подключения шаблонов 0 или 1.
   • И последний шаг - создать в папке /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 - страница, которая загружается в левую часть слайдера.

3. После этого появится адрес, который нужно ввести в форме приложения для разработки п.1 - 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 становится доступным. Этот объект содержит множество полезных функций, которые описаны далее в курсе и в файле /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") ?> 

Далее необходимо создать /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. Нажмем на кнопку Table - откроется таблица c данными.

  События

В мобильном приложении есть события, которые позволяют гибко решать множество задач. Обрабатывать эти события просто. Например:

BX.addCustomEvent("onOpenPageAfter", function(){
      setTimeout(function(){
            app.closeController();
   },2000);
});

Размещая этот код, мы как бы говорим странице: "После открытия закройся обратно через 2 секунды."

Таким образом, мы получили скелет приложения - навигацию и первую страницу. За основу также можно взять уже готовое решение Мобильный интернет-магазин (модуль eshop_app).