Одна из сильных сторон Ionic заключается в услугах, которые он предлагает поверх платформы. Сюда входят сервисы для аутентификации пользователей вашего приложения, push-уведомлений и аналитики. В этой серии мы узнаем об этих сервисах, создавая приложения, которые их используют.
В этом посте мы рассмотрим Ionic Deploy. Этот сервис позволяет публиковать изменения в вашем приложении Ionic без необходимости перекомпиляции и повторной отправки в магазин приложений. Это очень полезно для быстрого исправления ошибок, небольших обновлений и других косметических изменений в приложении. С помощью функции «Развернуть каналы» вы также можете выполнять 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 .
Убедившись в том, что приложение указано на панели инструментов 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
2
3
4
|
import { SplashScreen } from ‘@ionic-native/splash-screen’;
// add the following:
import { CloudSettings, CloudModule } from ‘@ionic/cloud-angular’;
|
Затем добавьте app_id вашего приложения Ionic. Вы можете найти это на своей панели приложений Ionic, прямо под названием приложения.
|
1
2
3
4
5
|
const cloudSettings: CloudSettings = {
‘core’: {
‘app_id’: ‘YOUR IONIC APP ID’
}
};
|
После того, как вы добавили это, вы можете включить его в качестве одного из модулей приложения:
|
01
02
03
04
05
06
07
08
09
10
|
@NgModule({
declarations: [
//…
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings) // <— add this
],
});
|
Затем откройте файл src / app / app.component.ts . Прямо под импортом TabsPage , TabsPage следующее:
|
1
2
3
4
5
|
import { TabsPage } from ‘../pages/tabs/tabs’;
// add these:
import { AlertController, LoadingController } from ‘ionic-angular’;
import { Deploy } from ‘@ionic/cloud-angular’;
|
В constructor() добавьте сервисы, которые мы импортировали ранее:
|
1
2
3
|
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public deploy: Deploy, private alertCtrl: AlertController, private loadingCtrl: LoadingController){
//…
}
|
Настройка канала развертывания
Поскольку мы все еще разрабатываем приложение, установите канал развертывания на dev :
|
1
|
this.deploy.channel = ‘dev’;
|
Позже, если вы захотите переключиться на производственный канал, вы можете просто удалить эту строку, поскольку production канал является каналом по умолчанию для развертываний. Если вы создали другой канал, вы также можете указать его название здесь.
Работа со снимками
Вы можете получить доступ к массиву снимков, которые были ранее загружены приложением. Переменная snapshots — это массив, содержащий идентификаторы каждого из снимков.
|
1
2
3
4
|
this.deploy.getSnapshots().then((snapshots) => {
console.log(‘now getting snapshots…’);
console.log(snapshots);
});
|
На самом деле мы не будем использовать снимки для этого приложения, но полезно знать, что приложение хранит этот тип информации для последующего использования. В приведенном ниже примере мы пройдемся по списку старых снимков и удалим каждый из них, чтобы освободить место на устройстве.
|
1
2
3
4
5
6
7
|
snapshots.forEach((snapshot_id) => {
this.deploy.getMetadata(snapshot_id).then((metadata) => {
// do something with metadata
});
// delete snapshot
this.deploy.deleteSnapshot(snapshot_id);
});
|
Проверка обновлений
Чтобы проверить наличие обновлений, используйте метод check() . Это возвращает логическое значение, которое сообщает вам, доступен ли новый снимок или нет. По умолчанию при последнем развертывании создается новый снимок. Таким образом, будет применено только последнее развертывание, если вы отправили два обновления подряд.
|
1
2
3
|
this.deploy.check().then((snapshotAvailable: boolean) => {
// …
});
|
Если снимок доступен для загрузки, вы можете получить дополнительную информацию о нем, вызвав метод getMetaData() . Эти метаданные могут быть добавлены в развертывание через панель инструментов приложения Ionic. Здесь можно добавить пары ключ-значение, и каждая из них станет доступной как свойство для объекта metadata . Позже мы будем использовать метаданные для настройки сообщений, отображаемых в приложении, каждый раз, когда будет доступно новое обновление.
|
1
2
3
4
5
6
7
|
if (snapshotAvailable) {
// get metadata
this.deploy.getMetadata().then((metadata) => {
console.log(‘now getting metadata..’);
console.log(metadata);
});
}
|
Затем покажите сообщение с подтверждением, чтобы пользователь мог решить, хотят ли они загрузить обновление или нет:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
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 (eg add analytics code for counting how many users didn’t apply the update)
}
},
{
text: ‘Yes’,
handler: () => {
// proceed with downloading the update
}
}
]
});
alert.present();
|
Вы можете быть обеспокоены тем, что это будет раздражать пользователя, если он продолжит получать запрос на обновление своего приложения, если он продолжит отвечать «Нет». Чаще всего это не так, но на самом деле это хорошая вещь. У пользователя не должно быть никаких причин отклонять обновление, если оно собирается улучшить его работу.
Загрузка и применение обновлений
Когда пользователь соглашается, вы можете скачать обновление. Это может занять некоторое время в зависимости от вашего интернет-соединения и вашего устройства. Как только обновление загружено, покажите загрузчик, чтобы привлечь внимание пользователя, пока он извлекает. Как только он извлечен, перезагрузите приложение и скройте загрузчик.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
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();
console.log(‘reload completed!’);
loading.dismiss();
});
});
|
Посмотрите, как должен выглядеть обновленный файл app.components.ts после всех этих изменений.
Установка приложения на устройство
Теперь, когда добавлен код для проверки развертывания, мы можем собрать приложение и установить его на устройство. Остальные изменения, которые мы собираемся внести, будут в основном проталкиваться через службу Ionic Deploy.
Идите вперед и добавьте платформу Android в ваш проект Ionic и создайте файл .apk с помощью следующих команд:
|
1
2
|
ionic platform add android
ionic build android
|
Это создаст файл android-debug.apk в папке platform / android / build / output / apk . Скопируйте его на свое устройство и установите.
Толкая изменения
Теперь пришло время внести некоторые изменения в приложение. Чтобы попробовать это, просто внесите небольшие изменения в пользовательский интерфейс приложения. И теперь вы можете загрузить изменения:
|
1
|
ionic upload
|
Добавление метаданных
После завершения загрузки в вашей недавней активности появится новая запись. Нажмите на ссылку Изменить эту запись. Это позволит вам добавить примечание, информацию о версиях и метаданные к этой конкретной версии. Это всегда хорошая идея, чтобы добавить заметку, чтобы вы знали, что это за конкретный релиз. Сделав это, нажмите на вкладку « Метаданные » и добавьте следующее:
Затем нажмите кнопку « Сохранить» , чтобы подтвердить изменения. Наконец, нажмите кнопку Deploy , чтобы развернуть релиз. Как только приложение обнаружит изменение, предоставленные вами метаданные также станут доступны.
Вы можете видеть, что теперь он показывает номер версии выпуска:
Versioning
Иногда вы отправляете обновление с помощью Ionic Deploy, но также перестраиваете и отправляете эти пакеты в приложение в App Store. Будьте осторожны, потому что Ionic не знает, что ваше приложение уже содержит это обновление, и ваше приложение предложит пользователю загрузить последние обновления при первом запуске приложения.
Функция контроля версий может помочь предотвратить это. С помощью функции управления версиями вы можете указать версию приложения, которая может получать обновления:
- Минимум : развертывается, только если текущая версия приложения выше или равна этой версии.
- Максимум : развертывается только в том случае, если текущая версия приложения равна или ниже этой версии.
- Эквивалент : не выполнять развертывание, если текущая версия приложения равна этой версии.
Вы можете добавить информацию о версиях, щелкнув ссылку РЕДАКТИРОВАТЬ в конкретном выпуске, а затем перейдя на вкладку ВЕРСИЯ . Оттуда вы можете указать версии (iOS или Android), на которые вы хотите настроить таргетинг.
То, что делает Ionic, сравнивает эту версию с той, которую вы указали в файле config.xml :
Если версия приложения попадает между указанным минимальным и максимальным значением , релиз подхватывается. И если версия приложения равна эквивалентному значению версии, выпуск игнорируется. Таким образом, для приведенного выше снимка экрана, если версия, указанная в файле config.xml, — 0.0.1 , выпуск будет игнорироваться приложением.
Обновления активов
Следующее изменение, которое мы собираемся сделать, это показать изображение.
Первое, что вам нужно сделать, это найти изображение. Поместите его в папку src / assets / img и свяжите его с файлом src / pages / home / home.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<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 и обновите выпуск, добавив примечание и соответствующую version в метаданных. Сохраните изменения и разверните их.
Открытие приложения теперь должно забрать этот новый выпуск, а его обновление приведет к изменениям в пользовательском интерфейсе.
Развертывание каналов
По умолчанию Ionic Deploy имеет три канала, которые вы можете развернуть: dev , staging и production . Но вы также можете создавать новые каналы для своего приложения, чтобы прослушивать обновления. Вы можете сделать это, нажав на значок шестеренки на вкладке Ionic Deploy на панели инструментов вашего приложения:
Это полезно для таких вещей, как A / B-тестирование, поэтому вы можете отправить определенные изменения только конкретным пользователям.
Не забудьте обновить код, чтобы использовать этот конкретный канал развертывания:
|
1
|
this.deploy.channel = ‘me’;
|
отмена
Если вы нажали что-то, чего не должны были, вы можете использовать функцию отката. С помощью этой функции вы можете отправить предыдущую версию своим пользователям.
Обратите внимание, что вы не можете исправить неисправный код путем отката! Например, если в вашем коде JavaScript есть синтаксическая ошибка, это повредит все приложение, и код для проверки обновлений никогда не будет работать. Чтобы исправить подобные ошибки, единственное, что вы можете сделать, — это выпустить новую версию в магазине приложений.
Вы можете выполнить откат, щелкнув по ссылке « Откатиться назад» в любой развернутой версии .
Это попросит вас подтвердить, хотите ли вы откатиться или нет. После подтверждения он будет автоматически установлен в качестве текущего выпуска. Таким образом, код для получения новых версий распознает его как последнюю версию и предложит пользователям обновить. Откатанные релизы будут иметь оранжевый значок обновления.
Вы также можете развернуть конкретный выпуск, нажав на ссылку Развернуть рядом с выпуском, который вы хотите развернуть.
Использование Git Hooks
Вы можете автоматизировать развертывание обновлений приложений в Ionic Deploy с помощью ловушек Git. Хиты Git позволяют вам выполнять сценарии до или после определенных событий Git, таких как commit, push и receive. В этом случае мы будем использовать ловушку pre-push для загрузки наших изменений в Ionic Cloud непосредственно перед тем, как команда git push сделает свое дело.
Начните с переименования примера сценария pre-push в фактическое имя, распознаваемое Git:
|
1
|
mv .git/hooks/pre-push.sample .git/hooks/pre-push
|
Откройте файл в текстовом редакторе и замените его содержимое следующим:
|
1
2
3
4
|
#!/bin/sh
echo now pushing changes to Ionic deploy
ionic upload
|
Теперь передайте ваши изменения и отправьте их в удаленное хранилище:
|
1
2
3
|
git add .
git commit -m «make some changes…»
git push origin master
|
Непосредственно перед выполнением команды git push будет выполнена ionic upload .
Вы также можете автоматически развернуть релиз, если хотите:
|
1
2
3
4
|
#!/bin/sh
echo now pushing changes to Ionic deploy
ionic upload —deploy dev
|
Это не будет работать для нашего примера, потому что вы не можете указать метаданные!
Если вы хотите продолжить процесс развертывания, я рекомендую вам ознакомиться с HTTP API для Ionic Deploy . Это позволяет программно развертывать изменения в вашем приложении с сервера Continuous Integration. Он также позволяет обновлять номера версий и метаданные в ваших развертываниях. Все это можно сделать автоматически, не касаясь приборной панели приложения Ionic.
Вывод
Это оно! В этом руководстве вы узнали о Ionic Deploy и о том, как вы можете использовать его для обновления вашего Ionic-приложения. Это мощная функция, которая позволяет вам встроить надежную систему управления версиями и обновления в ваше приложение.
Следите за новостями о Ionic и облачных сервисах, таких как Ionic Deploy! Если вы хотите получить полное представление о начале разработки приложений для Ionic 2, ознакомьтесь с нашим курсом здесь, посвященным Envato Tuts +.
-
ионныйНачни с Ionic 2
И посмотрите другие наши посты о разработке ионных и кроссплатформенных мобильных приложений.
-
Ионная 2Code Your First Ionic 2 App: приложение для обмена фотографиями
-
Мобильная разработкаПредставляем Vue и Weex для собственных мобильных приложений
-
Шаблоны приложений15 готовых шаблонов приложений Ionic 3
