Джонатан Групп — инженер-программист в M-Way Solutions, владелец и сопровождающий Generator-M-Ionic, а также частый участник Ionic. Он написал серию из трех частей о расширенных рабочих процессах для создания надежных приложений Ionic. Это часть 2.

Во второй части нашей серии статей о разработке приложений Ionic корпоративного уровня вы узнаете о замечательных компонентах, таких как тестирование, субгенераторы, плагины и интеграция экосистемы в Ionic Platform. Мы строим поверх проекта, созданного нами в Части 1 этой серии. Время взобраться на гору развития!

Гарантия качества

Вы настроили свой проект, создали свой первый коммит и теперь готовы приступить к написанию кода. Независимо от того, программируете ли вы в одиночку или в команде, как разработчик, беспокоящийся о профессиональном развитии, вы захотите принять некоторые меры для обеспечения качества своего кода. Мы позаботились об этом!

Линтинг

Ваш проект Generator-M-Ionic поставляется с установленными правилами кодирования и рабочими процессами, уже запеченными с использованием ESLint. При каждой итерации gulp watch Gulp проверяет все файлы JavaScript вашего приложения на наличие нарушений правил.

Чтобы дополнительно получать уведомления о линтинге по мере разработки в редакторе или узнать, как настроить набор правил по умолчанию, ознакомьтесь с нашим Руководством по ESLint. Если вы работаете с файлами JSON в папке app/ — например, для обработки переводов — анализ генератора также проверит их! Это избавит вас от проблем с развитием.

Тестирование

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

gulp karma
# and
gulp protractor

Соответствующие файлы для настройки теста:

test/
  └── karma/
  └── protractor/
karma.conf.js
protractor.conf.js

Наше Руководство по тестированию поможет вам начать писать собственные модульные и сквозные тесты для вашего приложения. После того, как вы освоите это, Руководство по Husky Hooks объяснит, как вы можете запускать линтинг и тесты автоматически, прежде чем вы git commit или git push.

Кодирование

Ладно, ладно, хватит уже! Вы хотите, наконец, начать программировать и разработать собственное приложение? Больше ни слова. Возможно, вы захотите:
— добавить свои собственные компоненты Angular, используя наши подгенераторы
— контроллеры, шаблоны, директивы, сервисы, фильтры, константы, … или даже целые модули
— добавить немного Sass, чтобы оживить стиль вашего приложения
— добавьте плагины Cordova для использования с ngCordova для реального ощущения приложения
— и, возможно, добавьте несколько дополнительных пакетов Bower для специальных задач

Мы кратко рассмотрим каждую из этих задач, чтобы дать вам общее представление о том, как все работает. Для более подробных пояснений посетите нашу Документацию.

Добавление компонентов Angular

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

Например, мы часто используем генератор пар-подгенератор. Он создает контроллер с тестовым файлом и шаблоном с тем же именем.

yo m-ionic:pair phone

Теперь нам нужно только добавить состояние в main.js:

.state('main.phone', {
  url: '/phone',
  views: {
    'tab-phone': {
      templateUrl: 'main/templates/phone.html',
      controller: 'PhoneCtrl as ctrl'
    }
  }
})

Затем добавьте элемент навигации в наш файл tabs.html, который вы найдете в app/main/templates/, чтобы объединить все это:

<!-- List Tab -->
<ion-tab title="Phone" icon-off="ion-ios-telephone-outline" icon-on="ion-ios-telephone" ui-sref="main.phone">
  <ion-nav-view name="tab-phone"></ion-nav-view>
</ion-tab>

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

Добавление Sass

Это еще более легкая задача. Каждый созданный вами модуль поставляется с файлом Sass по умолчанию. Для вашего основного модуля это будет main.scss, и он находится в app/main/styles/. Откройте его и добавьте немного Sass:

ion-list {
  ion-item {
    color:red;
  }
}

После сохранения ваша задача gulp watch автоматически скомпилирует и внедрит полученный CSS, даже перезагрузив браузер. Недостаточно дерзкий? По мере роста вашего проекта вы можете захотеть разделить Sass на несколько файлов. Узнайте, как это сделать, в нашем Руководстве по интеграции Sass.

Добавление плагинов

Мы должны добавить в наше приложение несколько хороших плагинов Cordova, чтобы сделать его настоящим гибридным приложением. Давай сделаем это!

Ваш проект поставляется с локальной установкой последней версии CLI Cordova, которую вы можете вызывать через Gulp. Мы устанавливаем его локально, поэтому вам не нужно беспокоиться о том, какой проект вы устанавливаете с какой версией. Это всегда тот, с которым он был настроен. Синтаксис почти такой же, как при использовании глобальной установки CLI. Чтобы установить плагин камеры Cordova, запустите:

gulp --cordova "plugin add org.apache.cordova.camera --save"

Вы хотите разрабатывать и для Windows? Установите соответствующие Требования платформы Cordova и введите:

gulp --cordova "platform add windows --save"

Не забудьте позвонить

--save

для сохранения новых плагинов и платформ в config.xml! В нашем Введении в разработку есть специальная часть, посвященная использованию оболочки Cordova CLI.

Теперь, когда мы установили новый плагин, мы хотим его использовать! ngCordova объявляется как зависимость для каждого модуля, который вы создаете с помощью генератора, поэтому вы можете сразу начать использовать плагины. Обратитесь к объявлению основного модуля в файле main.js, чтобы узнать, как это делается. Таким образом, в моем PhoneCtrl мне нужно будет только внедрить сервис $cordovaCamera, чтобы получить доступ к плагину:

angular.module('main')
  .controller('PhoneCtrl', function ($cordovaCamera) {
    var options = {
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.CAMERA,
    };
  $cordovaCamera.getPicture(options)
  .then(function(imageURI) {
    console.log(imageURI);
  });
});

Добавление новых плагинов еще никогда не было таким простым!

В некоторых случаях вам нужно расширить конфигурацию ESLint, потому что некоторые плагины предоставляют глобальные переменные JavaScript, которые вы, возможно, захотите использовать (например, Camera в приведенном выше примере). Или вы можете предпочесть доступ к своим подключаемым модулям через глобальный cordova, потому что ngCordova не всегда поддерживает последние версии подключаемых модулей или может не поддерживать подключаемый модуль, который вы хотите использовать. Чтобы использовать эти глобальные переменные без жалоб ESLint, дополните раздел globals файла app/.eslintrc:

//..
"globals": {
  "angular": true,
  "ionic": true,
  "localforage": true,
  // add those
  "cordova": true,
  "Camera": true
},
//..

Пакеты Бауэра

И последнее, но не менее важное: вам, вероятно, понадобятся еще несколько пакетов беседок, которые идут с вашим приложением. Возможно, ваше приложение должно поддерживать разные языки. Для этого вы можете использовать angular-translate. Установите его, запустив:

bower install angular-translate --save

Флаг сохранить сохранит этот пакет в файле bower.json. Иногда, чтобы все изменения вступили в силу, необходимо перезапустить gulp watch. Затем остается только пометить модуль как зависимость в объявлении модуля main.js:

'use strict';
angular.module('main', [
  'ionic',
  'ngCordova',
  'ui.router',
  // add this one
  'pascalprecht.translate'
])

Переводы? Теперь они у вас есть! Обратитесь к документации, чтобы узнать больше.

Браузер или устройство?

До сих пор мы видели наше приложение в браузере только с помощью gulp watch. Но, по крайней мере, когда вы работаете с плагинами, вы можете протестировать свое приложение на устройстве или эмуляторе. Если ваша система правильно настроена в соответствии с Руководством по платформе Cordova, это должно быть легко:

  1. подключите ваше устройство к вашей машине
  2. убедитесь, что они оба в одной сети
  3. запустите команду livereload и продолжайте ее работу:
# run on a connected device with livereload
gulp --livereload "run ios"
# run on an emulator with livereload
gulp --livereload "run --emulate android"

Самое приятное в использовании livereload — это то, что вы можете вносить изменения в свой код и сразу же видеть изменения на устройстве. Если вы внесете изменения в файлы Cordova (config.xml, платформы, плагины), вам придется снова запустить команду.

Ваше приложение готово к тестированию на вашем устройстве!

Если вы не хотите полагаться на свою машину разработки для поддержания выполнения команды livereload, вы можете запустить полную сборку своего приложения, которая затем будет загружена на ваше устройство.

gulp --cordova "run ios"
# or
gulp --cordova "run android"

Когда вы запускаете эту команду, происходят две вещи:

  1. Gulp соберет ваше приложение с помощью gulp build
    —     он позаботится обо всем JavaScript, HTML и CSS и поместит его в папку www/
  2. Gulp вызовет Cordova с предоставленными атрибутами и
    — возьмет содержимое папки www/ и создаст из него приложение Cordova
    — затем приложение будет загружено на ваше устройство.

Неявный запуск gulp build, для которого Cordova дает команды, а также параметры сборки, такие как минимизация, более подробно описаны в нашем Введение в разработку.

глоток смотреть-строить

Обычно gulp build создает ваше приложение без проблем, и все должно работать так же, как если бы вы запускали gulp watch. Однако иногда может потребоваться отладка части веб-приложения вашей сборки. Поскольку это немного обременительно, когда приложение уже установлено на вашем устройстве, есть хороший промежуточный шаг:

gulp watch-build

Это похоже на gulp watch, но только для папки www/. Он создает ваше приложение в этой папке, а затем открывает окно браузера, показывающее встроенную версию вашего приложения. Это позволяет вам быстро выяснить, почему ваше приложение не строится должным образом. Добавление флажка «no-build» позволяет вам просматривать текущую версию в папке www/. Конечно, эта команда также работает с флагом «no-open» и всеми другими флагами, которые работают с gulp watch.

Экосистемы

Есть некоторые вещи, которые вы просто не хотите каждый раз создавать самостоятельно, например, push-сервисы, управление пользователями или другие серверные сервисы. К счастью, Ionic Platform можно интегрировать в ваш проект с помощью Ionic CLI, как описано в Руководстве по интеграции Ionic Platform.

Поздравляем!

Вы узнали, как приправить свое приложение такими специями, как субгенераторы, Sass, плагины, экосистемы и пакеты Bower. В части 3 этой серии вы поднимете свои навыки разработки на неземной уровень, владея средами, прокси-серверами и инструментами сборки; и обработка значков приложений, экранов-заставок, непрерывная интеграция и переменные сборки.

Связаться

Отзывы, идеи, комментарии относительно этого сообщения в блоге или любых обсуждаемых здесь функций очень приветствуются в разделе комментариев ниже, в нашем репозитории Generator-M-Ionic’s Github или в чате Generator-M-Ionic Gitter.

Кредиты

Автор: Джонатан Групп
Иллюстрации к заголовку: Кристиан Каль
Особая благодарность Фолькеру Хану, Матиасу Майеру и Тиму Ланчине.

Джонатан Групп

Первоначально опубликовано на blog.ionic.io 6 июля 2016 г.