Статья
05/30/2016

Апрель 2016

Том 31 номер 4

Мобильные приложения - Применение Ionic и TACO для создания кросс-платформенных мобильных приложений

Адам Тьюлипер | Апрель 2016

Продукты и технологии:

Инфраструктура Ionic, Tools for Apache Cordova (TACO), CodePush, Visual Studio и Visual Studio Code

В статье рассматриваются:

Tools for Apache Cordova (TACO);
инфраструктура Ionic;
Visual Studio Code;
автоматическое обновление кросс-платформенных приложений Windows Store;
специфичный для конкретной платформы CSS.

Для разработки и развертывания кросс-платформенных приложений доступно много рабочих процессов, а значит, выбор не всегда прост. Вы можете застрять на выборе не только технологии разработки, но и всего рабочего процесса разработки и развертывания. Вы можете писать «родной» код на каждой мобильной платформе, что потребует от вас хорошего знания C#, Objective-C/Swift, Java и иногда C++. Или предпочесть кросс-платформенный инструментарий вроде Apache Cordova или Xamarin. Бета-тестирование — еще одна проблема, поскольку вы можете загружать приложения с компьютера (side-load) (что весьма проблематично при наличии более пары пользователей), использовать специфичные для платформ решения для распространения бета-версий, такие как промокоды для устройств с Windows 10, TestFlight в iOS, группы в Google Play, или платформы наподобие HockeyApp. Существует много способов достичь схожего конечного результата, но все они очень сильно различаются.

В этой статье я буду рассматривать рабочий процесс для создания кросс-платформенных приложений, который включает установку инструментария, разработку, отладку, развертывание (производственное или для бета-тестирования) и обновления. Этот рабочий процесс использует HTML5-инфраструктуру мобильных приложений Ionic, средства командной строки Tools for Apache Cordova (TACO), CodePush и Visual Studio Code, который может тесно интегрироваться в Visual Studio. Я сосредоточусь на командной строке и на рабочем процессе Visual Studio Code, так как они почти одинаковы в Mac OS, Linux и Windows, используя одни и те же инструменты. Вам определенно понадобится инструментарий либо для Visual Studio Code, либо для Visual Studio — это лучшее, что есть на рынке, для разработки и отладки приложений на основе Cordova, но я хочу подчеркнуть, что проекты полностью совместимы между разными ОС (Mac OS, Linux, Windows), командными строками (Ionic, Cordova и др.) и инструментарием (Visual Studio Code или Visual Studio). Инструментарий для Visual Studio устанавливает все необходимые SDK автоматически и выполняет настройку для отладки, «родной» в Windows и Android.

Если вы веб-разработчик, желающий вести кросс-платформенную разработку приложений, и не знакомы с Apache Cordova, я советую начать со статьи «Write Cross-Platform Hybrid Apps in Visual Studio with Apache Cordova» (msdn.com/magazine/dn879349), чтобы получить общее представление о том, как работает эта инфраструктура.

Tools for Apache Cordova (TACO)

TACO — это набор продуктов, предназначенных для ускорения разработки. При разработке приложения с помощью Apache Cordova существует несколько конечных точек. В случае Visual Studio устанавливаются все необходимые SDK и сторонние утилиты, в том числе продвинутый эмулятор Android. Если вы занимаетесь кросс-платформенной разработкой, полезное расширение Visual Studio Code предоставляет такой функционал, как IntelliSense и отладка из Visual Studio Code. Кроме того, имеется набор утилит командной строки, называемых TACO-CLI, с помощью которых вы устанавливаете сторонние SDK, если предпочитаете работать в командной строке. Эти утилиты работают с любым проектом, совместимым с Cordova (Ionic, PhoneGap и др.). Я намерен установить TACO-CLI прямо сейчас, чтобы они были доступны, когда потребуются мне чуть позже:

# устанавливаем taco один раз
# (** это требует установки Node **)
npm install taco-cli –g

Всякий раз, когда вы добавляете платформу в приложение Apache Cordova любой из следующих команд (которые в основном делают одно и то же и зависят от того, какой командной строкой вы пользуетесь), вы просто конфигурируете проект для этой платформы; команда ничего не делает для проверки наличия необходимых SDK или их установки:

cordova platform add android

# или
ionic platform add android

# или
taco platform add android

Платформа Android, например, требует зависимости вроде Android SDK, Gradle и Java, которые не добавляются средствами командной строки Ionic или Cordova, но могут быть добавлены из существующего проекта командой:

taco install-reqs android

Это приведет к установке Java и Android SDK наряду с интеграцией Gradle и поддержкой Android Debug Bridge (adb).

Разработка и отладка

Если вы ведете кросс-платформенную разработку, в Visual Studio Code есть инструментарий, позволяющий вам отлаживать в эмуляторе или непосредственно на устройстве (рис. 1). Вы просто щелкаете правой кнопкой мыши папку и выбираете ее открытие с помощью Visual Studio Code либо используете File | Open Folder. Так можно делать для любого кросс-платформенного приложения на основе Cordova; в этом этапе нет ничего специфического для Visual Studio, и это позволяет создать собственный рабочий процесс — очень полезная функциональность при работе с группой, использующей другие инструменты и платформы.

Рис. 1. Отладка из Visual Studio Code

Вам нужно лишь установить это расширение, и для этого следует открыть Command Palette, нажав Ctrl+Shift+P, а потом ввести:

ext install cordova

Для отладки приложения переключитесь в режим Debug (щелкнув соответствующий значок или нажав Ctrl+Shift+D), выберите свою мишень отладки (как на рис. 1) и щелкните кнопку проигрывания. Это предполагает, что вы уже установили специфичные для платформ SDK вручную или командой taco install-reqs.

Если вы предпочитаете Visual Studio, то также можете работать с папками существующего проекта, просто выбрав File | New | Project From Existing Code. Заметьте, что при этом в вашу папку добавляются только файлы .jsproj и taco.json — и больше ничего. Затем вы можете использовать их из Visual Studio, тогда как ваши разработчики под Mac OS и Linux будут совместно использовать тот же репозитарий и применять Visual Studio Code, командную строку и т. д. Все это отлично работает совместно друг с другом. Конечно, вы можете создать и новый проект Apache Cordova из File | New Project, и он тоже будет кросс-платформенным. Полная гармония, не правда ли?

Если вы ведете кросс-платформенную разработку, в Visual Studio Code есть инструментарий, позволяющий вам отлаживать в эмуляторе или непосредственно на устройстве.

Как насчет IntelliSense? В Visual Studio можно установить Ionic Pack из Extension Gallery прямо в самой Visual Studio или с bit.ly/1Vq4dIo. Вы получите фрагменты кода (snippets), поддержку проверки и IntelliSense. Visual Studio Code предлагает IntelliSense для Ionic сразу после установки Cordova Tools Extension.

Инфраструктура Ionic

Ionic — это CSS-инфраструктура и UI-библиотека JavaScript, которую можно (но не обязательно) связать с системой сборки. Как правило, она работает поверх Apache Cordova, кросс-платформенной инфраструктуры «родных» приложений на основе HTML/JS/CSS, имеющей открытый исходный код. В принципе, вы наверняка слышали об использовании Ionic с Cordova, но это не обязательно; посмотрите, к примеру, некоторые фрагменты кода (code pens) на CodePen.io/ionic; Ionic — это просто HTML, CSS, JavaScript и изображения.

Одна из трудностей в создании впечатляющих мобильных приложений — обеспечить, чтобы они выглядели и выполнялись согласно правилам дизайна для каждой ОС: Material Design Guidelines для Android, UX Guidelines для приложений Universal Windows Platform (UWP) и Human Interface Guidelines для iOS. Что бы вы ни разрабатывали — специализированные бизнес-приложения или игры, у пользователей есть определенные ожидания в отношении того, как должно происходить взаимодействие. Сознаете вы это или нет, но вы ежедневно осуществляете микровзаимодействия с различными устройствами, бытовой техникой и другими предметами в своей жизни.

Микровзаимодействия (micro-interactions) в мобильном приложении могут быть такими простыми, как движение пальца по экрану в определенном направлении для выполнения какого-то действия, «лайк» в социальной сети или отображение индикатора загрузки (spinner). Как вы обрабатываете их с учетом специфики платформы? Ionic автоматически берет на себя некоторые из таких деталей. Например, она будет распознавать, работаете вы в iOS или Android, и использовать соответствующий индикатор загрузки на основе CSS-стилей, свойственный для данной платформы (рис. 2). Теги Ionic для индикатора загрузки являются собственными HTML-тегами, которые выглядят так:

<ion-spinner></ion-spinner>

Рис. 2. Индикаторы загрузки в Android и iOS

На рис. 3 приведен пример кода для списка, имеющего «родной» внешний вид на каждой платформе, с применением только HTML и CSS в Ionic. В свою очередь он отображает верхнюю часть приложения так, как это принято на данной платформе (рис. 4).

Рис. 3. HTML-код для списка, имеющего «родной» внешний вид и созданного в Ionic

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>
  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>
  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>
</div>

Рис. 4. Список, имеющий «родной» внешний вид и созданный в Ionic

Приступаем

Приложение Ionic — это просто веб-страница, локально упакованная в приложение Cordova. Как видите, существуют собственные HTML-теги, а также специфичные для платформы CSS-стили. Приложения Ionic создаются поверх Angular. Давайте создадим простое приложение Ionic и исследуем его структуру. Если вы знакомы с Angular, тогда это будет нетрудной задачей. Если нет, вы все равно довольно легко поймете, что происходит с высокого уровня. Чтобы задействовать интерфейс командной строки (cli) Ionic, у вас должен быть установлен npm (доступен при установке Node.js с Nodejs.org) и Git (с Git-scm.com).

Если вы хотите использовать приложение Ionic как автономное, вы могли бы просто установить его через bower:

bower install ionic

Пользователи Visual Studio могут задействовать преимущества шаблона Ionic (управляемого группой Visual Studio), который доступен в Visual Studio Gallery под Tools | Extensions and Updates. Поскольку Ionic имеет собственный интерфейс командной строки (CLI), что делает ее довольно простой в использовании, и она опирается на Cordova, давайте исследуем это направление и создадим новое приложение из командной строки Ionic:

# Установка ionic и cordova (однократная)
# и создание приложения (приложений)
npm install-g ionic cordova

# Создание нового приложения, используя шаблон tabs.
# Можно было бы выбрать один из нескольких шаблонов –
# выполните команду ionic templates
# или укажите url собственного шаблона.
ionic start myIonic tabs
cd myIonic

# Добавление поддержки платформы в проект
ionic platform add android
ionic platform add ios

У меня не установлен Android SDK, поэтому я пока не могу выполнить этот код. Но его легко установить через TACO-CLI, так что я это сделаю, а затем запущу эмулятор. Учтите, что TACO предоставляет куда больше, чем просто CLI. Я также хочу указать, что командные строки Ionic, TACO и Cordova могут работать совместно:

# Установка JAVA, Android SDK, Gradle
# и прочего, если их еще нет
taco install-reqs android

# Выполняем в браузере
ionic serve

# Выполняем в эмуляторе
ionic emulate android

Как насчет iOS?

В случае iOS вы можете отлаживать и выполнять свое приложение Apache Cordova, используя либо Visual Studio Code, либо Visual Studio. В какой-то момент вам понадобится доступ к Mac, если вы хотите запустить приложение на устройстве или в симуляторе Apple. Если вы уже работаете в Mac OS, то можете выполнять и отлаживать приложение непосредственно из Visual Studio Code, как было показано ранее, чтобы запустить его на устройстве или в симуляторе.

Если вы предпочитаете разрабатывать в Windows, у вас есть несколько вариантов. При работе в Visual Studio можно использовать симулятор Apache Ripple для Windows (bit.ly/1QOqXxK), так как он изначально сконфигурирован для симуляции iOS (рис. 5). Если вы хотите выполнять и отлаживать код в симуляторе Apple (в OS X) или на устройстве iOS, вам потребуется Mac с установленным Xcode и удаленный агент, установленный на Mac, чтобы Visual Studio или Visual Studio Code мог взаимодействовать с ним, как описано по ссылке bit.ly/1XC36H3. Вы можете получить трехмесячную подписку Parallels для запуска Windows на своем Mac от Visual Studio Dev Essentials. Наконец, можно использовать один из разнообразных облачных сервисов Mac, такой как MacInCloud, и выполнять приложение в облаке, как поясняется по ссылке bit.ly/1QOrYpz.

Рис. 5. Варианты запуска/отладки в iOS из Visual Studio

Как упоминалось, вам понадобится Xcode, установленный на вашем Mac, но, если вы используете taco install-reqs, эта команда также установит ios-sim, который позволяет запускать симулятор iOS из командной строки и применять ios-deploy для установки и отладки приложений на устройствах iOS вне Xcode.

Загрузка Visual Studio Code

К этому моменту у меня есть папка приложения, созданная Ionic. Это приложение Cordova. Я могу загрузить либо Visual Studio Code, либо Visual Studio и, указав ей эту папку, начать работу с приложением. Теперь можно было бы перейти на вкладку Debug в Visual Studio Code, выбрать целевую платформу и начать отладку, как было показано на рис. 1..

Теперь рассмотрим структуру приложения. Index.html — основная страница, и она загружает Ionic и Angular. Вы сразу же заметите, что Ionic использует собственные теги наподобие <ion-nav-view>, но подробнее об этом позже. Index.html является корневой страницей, на которой размещаются другие части контента, доставляемого через Angular.

<!-- Вывод скомпилированной css (от sass) -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic и angularjs вместе связаны с js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

На рис. 6 показан тег body в index.html. Поток управления в этом приложении контролируется URI. Эти URI регистрируются в app.js, как видно на рис. 7. Если вы MVC-разработчик, считайте, что это ваши маршруты (routes). На рис. 7 представлен только сегмент, который впоследствии будет расширен. Как видите, здесь обрабатываются два URL: /tab и /tab/dash. Что загружается при загрузке приложения? Функция $urlRouterProvider.otherwise предоставляет по умолчанию /tab/dash, поэтому, когда вы начинаете с index.html, вы также обрабатываете /tab/dash.

Рис. 6. Тег body в index.html

<body ng-app="starter">
  <!--
    Навигационная панель, обновляемая
    при переходе между представлениями
  -->
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <!--
    Рендеринг представлений осуществляется
    в директиве <ion-nav-view> ниже.
    Шаблоны находятся в папке /templates (но вы также могли бы
    подставить шаблоны в этот HTML-файл при желании).
  -->
  <ion-nav-view></ion-nav-view>
  </body>

Рис. 7. App.js содержит маршрутизатор Angular UI

// app.js
// ..
  $stateProvider
// Настраивает абстрактное состояние для директивы tabs
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'
})

// Каждая tab имеет свой стек истории навигации
.state('tab.dash', {
   url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})

// Дополнительный код удален для краткости...
// Если ни одно из указанных выше состояний (url)
// не подходит, используем это как резервный вариант.
$urlRouterProvider.otherwise('/tab/dash');

Первый URI помечен как abstract, т. е. он никогда не будет напрямую отправлять в /tabs. Однако он будет использоваться всякий раз, когда происходит обращение к любому из его дочерних элементов. Поскольку по умолчанию действует /tab/dash, это приведет к тому, что для этих URI будут обрабатываться оба представления. Приложение Cordova выполняется не в веб-браузере, а в WebView, поэтому пользователю не предоставляется никакого URI, который он мог бы ввести. Эта навигация полностью обрабатывается тегами href или JavaScript. Состояния определяют, что покажет HTML для какого-либо URI, а также что какой контроллер будет обрабатывать бизнес-логику.

Поток управления в этом приложении контролируется URI.

Файл ./js/controllers.js в этом шаблоне содержит рудиментарную бизнес-логику, увязанную с каждой комбинацией «URI-шаблон». Переменная $scope предназначена просто для присваивания данных, которые могут быть использованы шаблонами. Если бы я должен был вернуть информацию о клиенте, я мог бы сделать так:

$scope.customer = { "firstName": "John" };

Учитывая эту простоту, ниже приведен контроллер ChatDetail, присваивающий данные от сервиса Chat, определенного в services.js, а во втором примере этот контроллер присваивает JSON-объект переменной settings, которую я могу связать в своем шаблоне:

// controller.js
angular.module('starter.controllers', [])
// ...часть кода опущена для краткости
.controller('ChatDetailCtrl', function($scope,
  $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('StorageCtrl', function($scope) {
  $scope.settings = {
    enableCloudStorage: true
  };
});

Интерфейс вкладок по умолчанию состоит из двух шаблонов: интерфейса вкладок (из /tab) и любого из трех дочерних представлений, которые содержатся в tabs-html, в зависимости от того, что выбирает пользователь. HTML для этого интерфейса показан на рис. 8. Обратите внимание на то, как я использую ion-tabs и ion-tab, чтобы определить элемент управления «вкладки» и индивидуальную вкладку, а затем ion-nav-view для хостинга собственно дочерних представлений.

Рис. 8. HTML для интерфейса вкладок по умолчанию

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Вкладка Dashboard -->
  <ion-tab title="Status" icon-off="ion-ios-pulse"
    icon-on="ion-ios-pulse-strong"
    href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Вкладка Chats -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline"
    icon-on="ion-ios-chatboxes"
    href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  <!-- Вкладка Storage -->
  <ion-tab title="Storage" icon-off="cloud-outline"
    icon-on="cloud" href="#/tab/storage">
    <ion-nav-view name="tab-storage"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Это представление tab-dash по умолчанию отображается при загрузке приложения. Его рендеринг осуществляется внутри tab-dash <ion-nav-view>, отмеченного ранее:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <p>
    This is the Ionic starter...
    </p>
  </ion-content>
</ion-view>

Ionic также понимает переход между представлениями. Если вы выполняете это в браузере и щелкаете кнопку «назад», то попадаете в предыдущее представление. Если вы выполняете приложение на устройстве Windows Phone или Android и используете кнопку «назад», вы также переходите на предыдущее представление. Это конфигурируется в Index.html:

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

Специфичный для конкретной платформы CSS

По-прежнему нужно делать некоторые вещи, специфичные для платформы, например определять, какие значки следует показывать, но для этого я должен знать, на какой платформе выполняется мое приложение. Есть несколько способов, позволяющих выяснить это. Я мог бы задействовать JavaScript из плагина по умолчанию cordova-device, используя device.platform, но тогда логика отображения значков была бы загромождена конструкциями if/else. Вспомните, что эти приложения состоят из веб-страниц. Не подумайте, что я все упрощаю, так как «веб-страницы» способны выполнять полнофункциональные 3D-приложения почти столь же быстро, как это делает «родная» платформа (например WebGL), но в данном случае, поскольку я использую только HTML/CSS/JS, я могу стилизовать приложение, просто используя CSS. Ionic предоставляет библиотеку Ionicons, доступную на Ionicons.com. И обязательно загляните на Ionicons.com/cheatsheet.html.

При сборке для конкретной платформы командой cordova build <platform> одно из изменений, которые происходят на этом этапе, — элемент <body> получает дополнительный CSS-класс для этой платформы. Например, если вы выполняете команду в Android, тег body будет некоей вариацией следующего:

<body class="platform-android">

Вы можете с выгодой для себя использовать это и отображать специфичные для платформы значки, применяя смесь языка таблиц стилей Sass и Ionic Icons. Следующая команда конфигурирует мое приложение Ionic с помощью Sass:

# Сообщаем Ionic настроить/создать Sass
# и подготовить файл .scss
ionic setup sass

Если вы используете Visual Studio, этот этап работает, но сначала убедитесь, что вы сконфигурировали Task Runner Explorer для запуска задачи Gulp, компилирующей Sass в CSS. Не знаете, что такое Gulp или Task Runner Explorer? Прочитайте мою статью о Grunt и Gulp по ссылке msdn.com/magazine/mt595751.

Если вы хотите, чтобы Visual Studio автоматически компилировала файлы LESS, Sass, CoffeeScript, JSX, ES6 и Stylus в ваших веб-проектах, то можете использовать расширение Web Compiler для их обработки. Вы найдете его по ссылке bit.ly/1O0LP3x. Здесь это не требуется, так как я намерен задействовать Gulp, но работает любой из этих методов.

Теперь откроем файл ./scss/ionic.app.scss и добавим в него некоторый Sass-код. О Sass можно найти целое море информации, но здесь стоит отметить одно: он позволяет делать с помощью CSS то, что иначе потребовало бы писать куда больше текста. Если мне нужно выводить значок облака, специфичный для платформы, и значок по умолчанию, когда специфичного для платформы значка нет, я могу отредактировать файл .scss, чтобы добавить в него код, показанный на рис. 9..

Рис. 9. Применение Sass для определения значков облака, специфичных для платформ

// Обработка любой платформы, для которой нет определения
.cloud{
  @extend .ion-ios-cloud
}

.cloud-outline{
    @extend .ion-ios-cloud-outline
}

// Специфичный для Android
.platform-android {
  .cloud{
    @extend .ion-android-cloud
  }
  .cloud-outline{
    @extend .ion-android-cloud-outline
  }
}

// Специфичный для iOS
.platform-ios .platform-win32{
  .cloud {
    @extend .ion-ios-cloud
  }
  .cloud-outline{
    @extend .ion-ios-cloud-outline
  }
}

Затем я могу вручную инициировать запуск задачи Gulp для этого и выполнить ее:

# Компиляция Sass
gulp sass

Using gulpfile ~\myIonic\gulpfile.js
[11:28:24] Starting 'sass'...
[11:28:26] Finished 'sass' after 2.1 s
# Теперь запускаем!
ionic emulate android

Вам сразу же бросится в глаза специфичное для платформы размещение вкладок (рис. 10). Для этого не требуется вносить какие-либо изменения в код — так работает Ionic. Другое изменение, пусть и очень малое, — разница в значках облака. Благодаря простой модификации CSS я визуализирую на каждой платформе специфичный для нее значок.

Рис. 10. Ionic в Android и iOS

Предоставление обновлений приложения

Приложения — это сервисы. Иначе говоря, если вы хотите собрать приличную аудиторию для своих приложений, вы не должны развертывать их лишь раз, а потом забыть о них. Вы должны постоянно обновлять их, доставляя исправления и новую функциональность. Очень веская причина для выбора приложений Cordova, а не полностью «родных» приложений заключается в том, что вы можете доставлять обновления из магазина. Одобрение приложения для iOS может, например, занимать недели. И что вы будете делать, если вы обнаружили и исправили ошибку или если у вас появилась новая функциональность, которую нужно немедленно распространить?

CodePush — это сервис от Microsoft, который обеспечивает обновления приложений, минуя магазины, при условии, что в приложениях Cordova нет изменений в «родном» коде (что, как правило, происходит при добавлении новых плагинов). Вы можете изменять HTML/CSS/JavaScript и создавать новый выпуск. Выпуски ваших приложений хранятся в Microsoft Azure и полностью управляются CodePush, поэтому вам не надо беспокоиться о какой-либо инфраструктуре. Рассмотрим, что требуется для передачи какой-то версии моего приложения Android Ionic в облако:

npm install -g code-push-cli
code-push register
code-push app add myIonic

Эти команды дают вам ключ развертывания от CodePush, который вы можете добавить в конец файла /config.xml, используя элемент <platform>:

<widget id="com.ionicframework.myionic594688" version="0.0.1"
  xmlns="http://www.w3.org/ns/widgets"
  xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <!-- Другие конфигурации удалены для краткости -->
  <platform name="android">
    <preference name="CodePushDeploymentKey"
      value="YourKeyGeneratedInPriorStep" />
  </platform>
  <platform name="ios">
    <preference name="CodePushDeploymentKey"
      value="YourKeyGeneratedInPriorStep" />
  </platform>
</widget>

Теперь вам нужно лишь сообщить CodePush проверить на наличие обновлений и синхронизировать изменения. Если изменения обнаружены, они скачиваются и устанавливаются при следующем запуске приложения. Проверка возможна асинхронным и синхронным способами, но я не буду здесь вдаваться в детали. В app.js есть удобное место для проверки на обновления моего приложения, когда готовы Cordova API. Обычно в приложениях Cordova вы узнаете об этом подключением к обработчику события deviceready:

window.addEventListener('deviceready', {})

Поскольку я использую Ionic, она будет прослушивать событие deviceready и соответственно вызывать $ionicPlatform.ready, уже предоставленную в шаблоне в app.js. Надо лишь добавить туда одну строку кода для синхронизации с CodePush:

// app.js
angular.module('starter', ['ionic', 'starter.controllers',
  'starter.services'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    window.codePush.sync();
    // ...
  });
})

Я создал небольшое обновление HTML для файла /templates/tab-dash. Чтобы выпустить это обновление, я просто прошу Cordova подготовить его, а затем распространяю через CodePush. Прежде всего мне нужна версия приложения, указанная в /config.xml:

<widget id="com.ionicframework.myiconic594688" version= "0.0.1"

Затем я сделаю целых два шага для подготовки и передачи этого изменения в сервис CodePush:

# Я подготавливаю свое приложение
# (вношу изменения только в папку /platforms).
# Следующее можно было бы переложить на cordova prepare
# или taco prepare – все они делают одно и то же.
ionic prepare

# Передаем этот выпуск в облако.
# Мы используем /assets, поскольку там находятся
# подготовленные файлы html/js/css.
code-push release myIonic ./platforms/android/assets/www 0.0.1
  --deploymentName Production

Теперь, запустив приложение из Visual Studio Code, я могу увидеть в ее Debug Console, как это приложение проверяет наличие обновлений:

Debug Console
Launching for android (This may take a while)...
App successfully launched
Attaching to android
Forwarding debug port
Attaching to app.

[CodePush] An update is available.
[CodePush] Downloading update package ...
[CodePush] Package download
[CodePush] Installing update package ...
[CodePush] First update: back up package information skipped.
[CodePush] Install succeeded.

Вот и все! В этой конфигурации требуется два запуска приложения, чтобы применить изменения. При первом запуске обновления скачиваются, когда распознается новая сборка в CodePush, а при втором — обновления применяются. Заметьте, что весь этот рабочий процесс можно использовать в производственной или тестовой среде. Все, о чем рассказывал, нормально работает в эмуляторе и непосредственно на устройстве, а посмотреть результаты я могу в своем эмуляторе Android.

Заключение

Рабочий процесс, рассмотренный здесь, включает разработку, подготовку и передачу ваших приложений сервису CodePush. Если вы сторонник непрерывного развертывания (continuous deployment), соответствующий рабочий процесс описан по ссылке bit.ly/1QpydG4. Этот рабочий процесс также охватывает развертывания из Visual Studio Team System и применение HockeyApp для управления распространением бета-версий (с поддержкой отчетов о крахах и обратной связи с пользователями!). Если вы надеетесь без промедления взяться за дело, то Subhag Oak предлагает полезный независимый набор инструментов, который вы найдете по ссылке bit.ly/1QpCwBt.

Как для Angular, так и для Ionic готовятся новые основные версии (2.x), которые сейчас уже доступны. Но рассказывать о них на момент написания этой статьи было несколько преждевременно, поскольку тогда они еще не были выпущены.

Это был краткий экскурс в одну из самых интересных на данный момент областей разработки мобильных приложений. Пожалуйста, проверьте следующие ресурсы, содержащие отличную документацию; кроме того, они помогут вам всегда быть в курсе предстоящих изменений:

TACO (taco.tools);
Visual Studio Tools for Apache Cordova (taco.visualstudio.com);
советы по повышению производительности (bit.ly/24kEaIx);
«родные» переходы для инфраструктуры Ionic (bit.ly/1SKFFfm);
Блог группы Visual Studio Tools for Apache Cordova (bit.ly/1KBpJcH).

До новых встреч!

Адам Тьюлипер (Adam Tuliper) — старший идеолог Microsoft, живет в солнечной Калифорнии. Занимается веб-разработкой, созданием игр, является автором на Pluralsight и интересуется разнообразной техникой. С ним можно связаться через Twitter (@AdamTuliper) или через блог Adam’s Garage channel9.msdn.com/Blogs/AdamsGarage.

Выражаю благодарность за рецензирование статьи экспертам Microsoft Субагу Оаку (Subhag Oak), Рикардо Мингесу Паблосу (Ricardo Minguez Pablos) и Райену Салве (Ryan Salva).

Discuss this article in the MSDN Magazine forum