Начало работы с Ionic Services: развертывание

() translation by (you can also view the original English article)

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

В данной статье мы рассмотрим Ionic Deploy. Эта служба позволяет публиковать изменения в вашем приложении Ionic без необходимости перекомпиляции и повторной отправки в хранилище приложений. Это очень полезно для быстрого нажатия исправлений ошибок, небольших обновлений и других косметических изменений в приложении. С помощью функции «Deploy Channels» вы также можете выполнять A/B тесты, выкатывая различные изменения кода в разные каналы развертывания.

Однако не все изменения, которые вы хотите представить в приложении, можно использовать с помощью Ionic Deploy. Только изменения в HTML, CSS, JavaScript и ресурсы под вашим www-каталогом могут быть перенесены таким образом. Бинарные изменения, такие как обновления версии платформы Cordova, плагины Cordova (либо обновление существующих, либо добавление новых), и ресурсы, такие как значок и заставка, не могут быть выложены с помощью Ionic Deploy.

Как это работает

В вашем приложении Ionic у вас может быть код, который будет проверять наличие доступных деплоев (обновлений). По умолчанию он проверяет развертывание в канале production. Но вы также можете указать другие каналы для получения обновлений.

Затем вы можете запушить свои изменения, используя команду ionic upload. Это выведет ваши изменения в Ionic Cloud. После того, как они будут загружены, вы можете выбрать, к какому каналу вы хотите подключиться, и развертывать ли его сейчас или позже.

Развертывание на канал, который отслеживает ваше приложение, приведет к запуску кода в вашем приложении. Затем этот код отвечает за загрузку обновления, извлечение его и перезагрузку приложения для применения изменений.

Что вы будете создавать

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

Настройка

Теперь, когда у вас есть представление о том, как работает Ionic Deploy и что вы будете строить, пришло время создать приложение, использующее Ionic Deploy. Начнем с загрузки нового приложения Ionic:

1	ionic start --v2 deployApp tabs

Приведенная выше команда создаст новое приложение, используя шаблон с табами. Перейдите в каталог deployApp после его установки:

1	cd deployApp

Затем вам нужно установить пакет @ionic/cloud-angular. Это библиотека JavaScript для службы Ionic Cloud. Она позволяет нам взаимодействовать с сервисом Ionic Deploy и другими Ionic-сервисами с помощью JavaScript кода.

1	npm install @ionic/cloud-angular --save

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

1	ionic io init

Это создаст новое приложение под названием «deployApp» (или то, как вы назвали своим приложением при загрузке нового приложения Ionic) под панелью инструментов Ionic apps.

После того, как вы подтвердили, что приложение указано на вашей информационной панели Ionic, вернитесь к терминалу и установите плагин Deploy:

1	cordova plugin add ionic-plugin-deploy --save

Обратите внимание, что этот плагин выполняет всю тяжелую работу. Пакет @ionic/cloud-angular просто предоставляет API-интерфейсы, необходимые для легкой работы с Ionic-сервисами внутри приложения Ionic.

Работа с развертываниями

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

1	ionic serve

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

Откройте файл src/app/app.module.ts. Под импортом SplashScreen импортируйте службы, необходимые для работы с Ionic Cloud:

1	import { SplashScreen } from '@ionic-native/splash-screen';
2
3	// add the following:
4	import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

Затем добавьте app_id вашего приложения Ionic. Вы можете найти его на панели инструментов Ionic, прямо под названием приложения.

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'YOUR IONIC APP ID'
  }
};

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

@NgModule({
    declarations: [
        //...
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        CloudModule.forRoot(cloudSettings) // <-- add this
    ],
});

Затем откройте файл src/app/app.component.ts. Прямо под импортом TabsPage укажите следующее:

import { TabsPage } from '../pages/tabs/tabs';

// add these:
import { AlertController, LoadingController } from 'ionic-angular';
import { Deploy } from '@ionic/cloud-angular'; // import the Deploy service from @ionic/cloud-angular package

В constructor() добавьте ранее импортированные службы:

1	constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public deploy: Deploy, private alertCtrl: AlertController, private loadingCtrl: LoadingController){
2	//...
3	}

Настройка канала развертывания

Поскольку мы все еще разрабатываем приложение, установите канал развертывания в dev:

1	this.deploy.channel = 'dev';

Позже, если вы хотите переключиться на канал production, вы cможете просто удалить эту строку, поскольку production является каналом развертывания по умолчанию. Если вы создали другой канал, вы также можете включить его имя здесь.

Работа со снапшотами

Вы можете получить доступ к массиву снапшотов, которые были ранее загружены. Переменная snapshots - это массив, содержащий идентификаторы каждого снимка.

1	this.deploy.getSnapshots().then((snapshots) => {
2	console.log('now getting snapshots...');
3	console.log(snapshots);
4	});

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

snapshots.forEach((snapshot_id) => {
    this.deploy.getMetadata(snapshot_id).then((metadata) => {
      // do something with metadata
    });
    // delete snapshot
    this.deploy.deleteSnapshot(snapshot_id);
});

Проверка обновлений

Чтобы проверить наличие обновлений, используйте метод check(). Он возвращает логическое значение, указывающее, доступен ли новый снимок или нет. По умолчанию последнее развертывание создаст новый снимок. Таким образом, только последнее развертывание будет применено, если вы последовательно выкатываете два обновления.

1	this.deploy.check().then((snapshotAvailable: boolean) => {
2	// ...
3	});

Если снимок доступен для загрузки, вы можете получить дополнительную информацию о нем, вызвав метод getMetaData(). Эти метаданные можно добавить к развертыванию через панель инструментов Ionic. Здесь можно добавить пары ключ-значение, и каждая из них становится доступным как свойство для объекта metadata. Позже мы будем использовать метаданные для настройки сообщений, отображаемых в приложении, каждый раз, когда будет доступно новое обновление.

if (snapshotAvailable) {
    // get metadata
    this.deploy.getMetadata().then((metadata) => {
        console.log('now getting metadata..');
        console.log(metadata);
    });
}

Затем покажите сообщение с подтверждением, чтобы позволить пользователю решить, хочет ли он загрузить обновление или нет:

let alert = this.alertCtrl.create({
    title: 'Version ' + metadata.version + ' is available',
    message: 'Do you want to download this update?',
    buttons: [
      {
        text: 'No',
        role: 'cancel',
        handler: () => {
          // do some stuff (e.g. add analytics code for counting how many users didn't apply the update)
        }
      },
      {
        text: 'Yes',
        handler: () => {          
            // proceed with downloading the update
        }
      }
    ]
});

alert.present();

Вы можете быть обеспокоены тем, что это будет раздражать пользователя, если они продолжат получать приглашение обновить свое приложение, после того как ответят «Нет». Чаще всего это не так, на самом деле это хорошо. Не должно быть никаких оснований для отказа пользователя от обновления.

Загрузка и применение обновлений

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

this.deploy.download().then(() => {
    // download is done
    console.log('download completed!');
    // show loader
    let loading = this.loadingCtrl.create({
      content: 'Now reloading the app...'
    });

    loading.present();
    
    // extract the update
    this.deploy.extract().then(() => {
      console.log('extract completed!');
      this.deploy.load(); // reload the app to apply the changes

      console.log('reload completed!');
      loading.dismiss();
    });
});

Взгляните на то, как должен выглядеть обновленный файл app.components.ts после всех этих изменений.

Установка приложения на устройство

Теперь, когда добавлен код для проверки развертываний, мы можем создать приложение и установить его на устройстве. Остальные изменения, которые мы собираемся внедрить, будут в основном передаваться через службу Ionic Deploy.

Идем дальше и добавляем платформу android в ваш проект Ionic и создаем файл .apk со следующими командами:

1	ionic platform add android
2	ionic build android

Будет создан файл android-debug.apk внутри папки platform/android/build/output/apk. Скопируйте его на свое устройство и установите.

Пуш изменений

Теперь пришло время внести некоторые изменения в приложение. Чтобы попробовать, просто внесите некоторые незначительные изменения в пользовательский интерфейс приложения. И теперь вы можете загрузить их:

1	ionic upload

Добавление метаданных

После завершения загрузки новая запись будет указана в вашем разделе Recent Activity. Нажмите ссылку Edit для этой записи. Это позволит вам добавить примечание, информацию о версии и метаданные к этой конкретной версии. Всегда полезно добавить заметку, чтобы вы знали, что такое конкретный релиз. Как только вы это сделаете, перейдите на вкладку «Метаданные» и добавьте следующее:

Затем нажмите кнопку Save, чтобы зафиксировать изменения. Наконец, нажмите кнопку Deploy, чтобы развернуть релиз. После того, как приложение подхватит изменения, метаданные, которые вы предоставили, также становятся доступными.

Вы можете видеть, что теперь он показывает номер версии выпуска:

Версии

Иногда вы будете вызывать обновление с помощью Ionic Deploy, но также перестраивайте и отправляйте эти пакеты в прилагаемое приложение в App Store. Однако обратите внимание, что Ionic не знает, что ваше приложение уже содержит это обновление, и ваше приложение предложит пользователю загрузить последние обновления при первом запуске вашего приложения.

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

Minimum: развертывается, только если текущая версия приложения выше или равна этой версии.
Maximum: развертывается, только если текущая версия приложения равна или ниже этой версии.
Equivalent: не выполняет развертывание, если текущая версия приложения равна этой версии.

Вы можете добавить информацию о версии, щелкнув ссылку EDIT на определенной версии, а затем перейдите на вкладку VERSIONING. Оттуда вы можете указать версии (iOS или Android), на которые вы хотите настроить таргетинг.

Ionic затем сравнивает эту версию с той, которую вы указали в файле config.xml:

Если версия приложения находится между указанным minimum и maximum выпуск будет поднят. И если версия приложения равна equivalent версии версии, релиз игнорируется. Поэтому для приведенного выше скриншота, если версия, указанная в файле config.xml, равна 0.0.1, релиз приложением будет проигнорирован.

Обновления ресурсов

Следующее изменение, которое мы собираемся сделать, - показать изображение.

Первое, что вам нужно сделать, это найти изображение. Поместите его в папку src/assets/img и свяжите его с файлом src/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
  <img src="assets/img/lightning.png" />
  <ion-card-content>
    <ion-card-title>
      Version 4
    </ion-card-title>
  </ion-card-content>
</ion-card>
</ion-content>

Загрузите свои изменения в качестве новой версии для Ionic Deploy.

1	ionic upload

После загрузки перейдите на панель инструментов Ionic app и обновите выпуск запиской и соответствующей version в метаданных. Сохраните изменения и разверните их.

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

Каналы развертывания

По умолчанию Ionic Deploy имеет три канала, которые можно развернуть: dev, staging и production. Но вы также можете создавать новые каналы для вашего приложения, чтобы слушать в них новые обновления. Вы можете сделать это, щелкнув значок шестеренки на вкладке Ionic Deploy на панели инструментов приложения:

Это будет полезно для таких вещей, как A/B тестирование, поэтому вы можете выкатывать определенные изменения только определенным пользователям.

Не забудьте обновить свой код для использования этого конкретного канала развертывания:

1	this.deploy.channel = 'me';

Откат

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

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

Вы можете откатить, нажав на ссылку Roll back to here при любом развертывании.

Затем вас попросят подтвердить, хотите ли вы вернуться или нет. После подтверждения релиз будет автоматически установлен в качестве текущей версии. Таким образом, код для сбора новых выпусков распознает его как последнюю версию и предложит пользователям обновить. У запасных релизов будет значок оранжевого обновления.

Вы также можете развернуть конкретную версию, щелкнув ссылку Deploy рядом с релизом, который вы хотите развернуть.

Использование Git Hooks

Вы можете автоматизировать развертывание обновлений приложений на Ionic Deploy с помощью Git hooks. Git hooks позволяют выполнять скрипты до или после определенных событий Git, таких как фиксация, пуш и получение. В этом случае мы будем использовать хук pre-push, чтобы загрузить наши изменения в Ionic Cloud прямо перед тем, как команда git push сделает свое дело.

Начните с переименования примера pre-push в настоящее имя, которе распознает Git:

1	mv .git/hooks/pre-push.sample .git/hooks/pre-push

Откройте файл в текстовом редакторе и замените его содержимое следующим:

1	#!/bin/sh
2
3	echo now pushing changes to Ionic deploy
4	ionic upload

Теперь скопируйте свои изменения и запушьте их в удаленный репозиторий:

1	git add .
2	git commit -m "make some changes..."
3	git push origin master

Перед выполнением команды git push будет выполняться ionic deploy.

Также, если хотите, вы можете автоматически развернуть релиз:

1	#!/bin/sh
2
3	echo now pushing changes to Ionic deploy
4	ionic upload --deploy dev

Однако это не будет работать для нашего примера, потому что вы не можете указывать метаданные!

Если вы хотите продолжить изучение процесса развертывания, я рекомендую вам просмотреть HTTP API для Ionic Deploy. Это позволяет программно развернуть изменения в приложении с сервера непрерывной интеграции. Оно также позволяет обновлять номера версий и метаданные в ваших деплоях. Все это можно сделать автоматически и без прикосновения к панели Ionic app.

Вывод

Вот оно! В этом уроке вы узнали об Ionic Deploy и о том, как вы можете использовать его для push-обновлений вашего приложения Ionic. Это мощная функция, которая позволяет вам создавать надежную систему управления версиями и обновлениями в вашем приложении.

Оставайтесь с нами и получайте большег контента на тему Ionic и облачных сервисов, таких как Ionic Deploy! Если вы хотите получить полное представление о начале разработки приложения Ionic 2, ознакомьтесь с нашим курсом здесь, на Envato Tuts +.

Ionic

Начало работы с Ionic 2

Реджинальд Доусон

И проверьте некоторые из наших других статей о разработке Ionic и кросс-платформенных мобильных приложений.