Как создать мобильное приложение под битрикс?

Оригинал: http://dev.1c-bitrix.ru/community/blogs/carter/bitrix-mobile-2.php
Приветствую, коллеги!

Не так давно наша компания объявила о выпуске нового продукта — «1С-Битрикс: Мобильное приложение».
Теперь вы можете создавать мобильные приложения с использованием Javascript +HTML5, что существенно дешевле и значительно быстрее нативной разработки.

Сейчас я расскажу как начать разрабатывать свои мобильные приложения.

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

scout.png

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

snimok_ekrana_15.04.2013_0.34.41_s_simulyatora_ios.png

У себя на установке «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/».
Вбейте егоsmile:)

Что дальше? Меню.

Теперь девелоперское приложение может подключаться к вашему сайту и показывать контент.  После подключения уже вы сами должны обеспечить корректную навигацию по приложению. Поэтому, вам понадобится меню. Его часто располагают в левой части слайдера.
Соглано содержанию 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 — идентификатор, который учитывается приложением. При клике на пункт страница прогрузится и закешируемся. Таким образом она всегда будет открывать мгновенно в дальнейшем, но за актуальностью контента на этой странице придется следить.

Как результат:

snimok_ekrana_15.04.2013_12.21.27_s_simulyatora_ios.png

Что такое 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

Продолжаем. Пишем страницы, создаем таблицы.

agility.png

Разместим нашу страницу /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» — открывается таблица, которая ничего не показывает smile:(
Как видно по коду вызова 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». Теперь таблица отображает данные.

События

snimok_ekrana_2013_04_15_v_13.38.56.png

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

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

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

Вы можете написать приложение

educated.png

У вас есть скелет приложения  — навигация и первая страница.
Теперь вы можете начать писать свое мобильное приложение, эксперементируя с методами библиотеки.

Доступна документация по мобильным приложениям.
http://dev.1c-bitrix.ru/api_help/bitrixmobile/index.php

Документация для API 6. Пока номер версии не имеет значения, так как приложения только вышли. Но в будущем разработчикам нужно будет учитывать этот номер при разработке для клиентов. Как и во всех наших продуктах обратная совместимость будет поддерживаться, но новый функционал на старых версиях будет недоступен.
За основу можно взять уже готовое решение «Мобильный интернет-магазин» (модуль «eshop_app»smile;).

Что будет дальше?

snimok_ekrana_2013_04_15_v_16.27.20.png

Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:

— Работа с нативными интерфейсами
— Особенности кэширования в приложении. Как его использовать.
— Решение наиболее часто возникающих задач
— Чего стоит и чего не стоит делать при разработке мобильного приложения.
— Персонализация приложения

Всем пока. Надеюсь, у вас все получится.

Как создать мобильное приложение под битрикс?

2 мыслей о “Как создать мобильное приложение под битрикс?

  • 20.04.2024 в 07:47
    Permalink

    I was suggested this blog by means of my cousin. I’m not positive whether this put up
    is written via him as no one else understand such designated approximately
    my problem. You are wonderful! Thanks!

  • 28.06.2024 в 13:57
    Permalink

    Very informative article! I appreciate the depth of analysis. If you want to delve deeper, here’s a helpful resource: EXPLORE FURTHER. Eager to hear everyone’s thoughts!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *