Ionic Services入门：部署

cunjie3951

于 2020-06-16 01:04:10 发布

阅读量702

点赞数

文章标签： python java git linux github

Ionic的强项之一是在框架之上提供的服务。这包括用于验证您的应用程序用户，推送通知和分析的服务。在本系列中，我们将通过创建利用这些服务的应用程序来学习这些服务。

在本文中，我们将介绍Ionic Deploy。此服务使您可以将更改发布到Ionic应用程序，而无需重新编译并将其重新提交到应用程序商店。这对于快速向应用程序推送错误修复，次要更新和其他外观更改非常有用。使用“部署通道”功能，还可以通过将不同的代码更改引入不同的部署通道来执行A / B测试。

但是，并非所有要引入应用程序的更改都可以使用Ionic Deploy推送。这样只能推送对HTML，CSS，JavaScript和www目录下的资产所做的更改。不能使用Ionic Deploy推送二进制更改，例如对Cordova平台版本的更新，Cordova插件（更新现有插件或添加新插件）以及图标和启动屏幕等应用程序资产。

这个怎么运作

在您的Ionic应用程序中，您可以具有用于检查可用部署（更新）的代码。默认情况下，它将检查production渠道中的部署。但是，您也可以指定其他渠道来接收更新。

然后，您可以使用ionic upload命令推送您的更改。这会将您的更改上传到Ionic Cloud。将其上传后，您可以选择要将其部署到哪个频道，以及选择现在还是以后进行部署。

部署到您的应用程序正在监视的频道将触发应用程序中的代码执行。然后，该代码负责下载更新，解压缩并重新加载应用程序以应用更改。

您将要建立的

在本文中，您将使用命令行推送更改并测试部署是否按预期工作。为简单起见，我们将要引入的更改将主要针对UI。对于每次部署，我们将更改为应用程序显示的版本号。我们还将更改应用程序上显示的图像，以显示资产也可以更新。

配置

现在，您已经了解了Ionic Deploy的工作原理以及将要构建的内容，是时候实际创建一个使用Ionic Deploy的应用程序了。首先引导一个新的Ionic应用程序：

ionic start --v2 deployApp tabs

上面的命令将使用标签模板创建一个新应用。完成安装后，导航到deployApp目录中：

cd deployApp

接下来，您需要安装@ionic/cloud-angular软件包。这是Ionic Cloud服务JavaScript库。它允许我们通过JavaScript代码与Ionic Deploy服务和其他Ionic服务进行交互。

npm install @ionic/cloud-angular --save

安装完成后，您现在可以基于该应用程序初始化一个新的Ionic应用程序。在执行此操作之前，请确保您已经有一个Ionic帐户。命令行工具将提示您使用Ionic帐户登录（如果尚未登录）。

ionic io init

这将在Ionic应用程序仪表板下创建一个名为“ deployApp”的新应用程序（或在引导新的Ionic应用程序时命名的应用程序）。

确认该应用程序已在Ionic仪表板上列出后，请返回到终端并安装Deploy插件：

cordova plugin add ionic-plugin-deploy --save

请注意，此插件实际上是一个繁重的工作。 @ionic/cloud-angular软件包仅公开了轻松使用Ionic应用程序中的Ionic服务所需的API。

使用部署

现在，您已经完成了所有必要的设置，现在该添加用于检查和应用更新的代码了。但是在执行此操作之前，请先通过浏览器为应用提供服务：

ionic serve

这使您可以检查所添加的代码是否正常工作。这样，您可以在看到错误后立即进行必要的更正。

打开src / app / app.module.ts文件。在SplashScreen导入下，导入使用Ionic Cloud所需的服务：

import { SplashScreen } from '@ionic-native/splash-screen';

// add the following:
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

接下来，添加您的Ionic应用程序的app_id 。您可以在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() ，添加我们之前导入的服务：

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

设置部署渠道

由于我们仍在开发应用程序，因此将部署渠道设置为dev ：

this.deploy.channel = 'dev';

稍后，如果您要切换到生产通道，则只需删除此行，因为production是部署的默认通道。如果您创建了另一个频道，也可以在此处添加其名称。

使用快照

您可以访问该应用先前下载的一系列快照。 snapshots变量是一个数组，其中包含每个快照的ID。

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

我们实际上不会为此应用程序使用快照，但是很高兴知道该应用程序正在存储此类信息供以后使用。在下面的示例中，我们将浏览旧快照的列表，并删除每个快照以释放设备上的一些空间。

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

查询更新

要检查更新，请使用check()方法。这将返回一个布尔值，该值告诉您是否有新快照可用。默认情况下，最新部署将创建一个新快照。因此，如果您连续推送两个更新，则只会应用最新的部署。

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

如果可以下载快照，则可以通过调用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文件：

ionic platform add android
ionic build android

这将在platforms / android / build / outputs / apk文件夹内创建一个android-debug.apk文件。将其复制到您的设备并安装。

推动变革

现在是时候让我们对应用程序进行一些更改了。要尝试，只需对应用程序界面进行一些小的更改。现在您可以上传更改：

ionic upload

添加元数据

上传完成后，新条目将列在您的“ 近期活动”中 。单击该条目的“ 编辑”链接。这将允许您向该特定版本添加注释，版本信息和元数据。添加注释始终是一个好主意，这样您就可以知道特定版本的含义。完成此操作后，单击“ 元数据”选项卡并添加以下内容：

然后单击“ 保存”按钮以提交更改。最后，单击“ 部署”按钮以部署发行版。一旦应用程序接受了更改，您提供的元数据也将可用。

您可以看到它现在显示发行版的版本号：

版本控制

有时，您将使用Ionic Deploy推出更新，但还会重建这些软件包并将其打包并运送到App Store中的捆绑应用程序。但是请当心，因为Ionic不知道您的应用程序已包含该更新，并且您的应用程序将在首次运行时提示用户下载最新更新。

版本控制功能可以帮助防止这种情况。使用版本控制功能，您可以指定可以接收更新的应用程序的版本：

最低：仅当当前应用程序版本高于或等于此版本时才部署。
最大值 ：仅在当前应用程序版本等于或低于此版本时部署。
等效：如果当前应用程序版本与此版本相同，则不执行部署。

您可以通过单击特定版本上的EDIT链接，然后转到VERSIONING选项卡来添加版本信息。在这里，您可以指定要定位的版本（iOS或Android）。

Ionic所做的是将此版本与您在config.xml文件中指定的版本进行比较：

如果应用程序版本介于指定的最小和最大之间，则会发布该版本。如果应用程序版本等于等效版本值，则将忽略发行版本。因此，对于上面的屏幕截图，如果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。

ionic upload

上载后，转到您的Ionic应用程序仪表板，并在元数据中使用注释和相应version更新发行version 。保存更改并部署它。

现在，打开应用程序应该会获取这个新版本，并且对其进行更新会将更改应用到UI。

部署频道

默认情况下，Ionic Deploy具有三个可部署到的渠道： dev ， staging和production 。但是，您也可以为您的应用创建新的频道，以监听更新。您可以通过在应用程序仪表板上的Ionic Deploy选项卡上单击齿轮图标来实现：

这对于A / B测试等功能很有用，因此您只能将特定的更改推送给特定的用户。

不要忘了更新代码以使用该特定的部署渠道：

this.deploy.channel = 'me';

回滚

如果您推送了不该使用的内容，则可以使用回滚功能。使用此功能，您可以将以前的版本推回给您的用户。

请注意，您无法通过回滚来修复损坏的代码！例如，如果您JavaScript代码中有语法错误，它将破坏整个应用程序，而用于检查更新的代码将永远不会运行。要解决这些错误，您唯一可以做的就是在应用商店中发布新版本。

您可以通过在任何给定部署上单击“ 回滚到此处”链接来回滚。

这将要求您确认是否要回滚。确认后，它将自动设置为当前版本。因此，获取新版本的代码会将其识别为最新版本，并提示用户进行更新。回滚的版本将带有橙色的刷新图标。

您还可以通过单击要部署的发行版旁边的Deploy链接来部署特定发行版。

使用Git挂钩

您可以使用Git挂钩在Ionic Deploy上自动部署应用程序更新。 Git挂钩允许您在特定的Git事件（例如，提交，推送和接收）之前或之后执行脚本。在这种情况下，我们将在git push命令执行其操作之前使用pre-push钩将更改上传到Ionic Cloud。

首先将示例pre-push脚本重命名为Git可以识别的实际名称：

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

在文本编辑器中打开文件，并将其内容替换为以下内容：

#!/bin/sh

echo now pushing changes to Ionic deploy
ionic upload

现在提交更改并将其推送到远程存储库：

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

在执行git push命令之前， git push执行ionic upload 。

您还可以根据需要自动部署该发行版：

#!/bin/sh

echo now pushing changes to Ionic deploy
ionic upload --deploy dev

但是，这对于我们的示例不起作用，因为您无法指定元数据！

如果您想进一步进行部署过程，建议您检出Ionic Deploy的HTTP API 。这使您可以通过编程将更改从持续集成服务器部署到应用程序。它还允许您更新部署中的版本号和元数据。所有这些都可以自动完成，而无需接触Ionic应用程序仪表板。

结论

而已！在本教程中，您了解了Ionic Deploy以及如何使用它将更新推送到Ionic应用程序。这是一项强大的功能，可让您在应用程序中构建强大的版本控制和更新系统。

翻译自: https://code.tutsplus.com/tutorials/get-started-with-ionic-services-deploy--cms-28827

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ionic Services入门：部署

Ionic的强项之一是在框架之上提供的服务。这包括用于验证您的应用程序用户，推送通知和分析的服务。在本系列中，我们将通过创建利用这些服务的应用程序来学习这些服务。在本文中，我们将介绍Ionic Deploy。此服务使您可以将更改发布到Ionic应用程序，而无需重新编译并将其重新提交到应用程序商店。这对于快速向应用程序推送错误修复，次要更新和其他外观更改非常有用。使用“部署通道”...
复制链接

扫一扫