使用 Yeoman Ionic 创建的 angularjs 项目的离子云答案

【问题标题】：Ionic Cloud for angularjs projectcs created using Yeoman Ionic使用 Yeoman Ionic 创建的 angularjs 项目的离子云
【发布时间】：2018-02-15 05:14:06
【问题描述】：

如何在 AngularJs 中使用 Ionic Cloud - 使用generator-ionic 生成的 Ionic 项目

虽然在 Angular 应用程序中使用 Ionic Cloud 服务很简单，但它不适用于使用 yeoman ionic generator 生成的应用程序。这是因为它遵循的包装步骤。如何使这些项目与 Ionic Cloud 一起使用？

【问题讨论】：

标签： ionic-framework yeoman

【解决方案1】：

离子平台：

轻松构建、推送、部署和扩展您的 Ionic 应用程序。

标题说明：

Ionic Platform 是一个用于管理和扩展跨平台移动应用的云平台。集成服务使您和您的团队能够高效地构建、部署和发展您的应用。

文档目标：

Ionic Platform 可以很好地与标准 Ionic 项目配合使用。但是遵循任何非标准目录结构的项目可能会面临一些障碍。本文档提供了在使用 Yeoman 创建的 Ionic 项目中使用 Ionic Platform 的步骤。

文档范围：

本文档介绍了使用 Yeoman 创建 Ionic 项目并使用 Ionic Platform Web 客户端将其与 Ionic Platform 集成的基本步骤。本文档介绍了使用 Ionic Deploy、Ionic Analytics 和 Ionic Push 的基本步骤。

目标受众：

本文档的目标受众是 Web/移动应用程序开发人员，他们具有初学者和专家级专业知识，并且熟悉以下先决条件。

先决条件：

在尝试本文档之前，您应该熟悉以下框架/工具。

AngularJs：https://docs.angularjs.org/guide
IonicFramework：http://ionicframework.com/docs/guide
Yeoman：http://yeoman.io/codelab/index.html
离子发生器：https://github.com/diegonetto/generator-ionic
离子平台：https://ionic.io/platform

离子框架生成器

来自 Yeoman 的 Ionic 框架生成器，它是现代 web 应用程序的 Web 脚手架工具

Node.js 是基于 Chrome 的 V8 JavaScript 引擎构建的 JavaScript 运行时。 npm 是 JavaScript 的包管理器。从 http://nodejs.org 下载并安装 Node（和 npm）

$ npm install npm –g
$ npm install -g yo

Yeoman 帮助您启动新项目，提供最佳实践和工具来帮助您保持生产力。

$ yo ionic [app-name]

在 package.json 在 devDependencies 中包含以下内容

"grunt-string-replace": "^1.2.1"

在 bower.json 中包含以下依赖项

"ionic-platform-web-client": "^0.7.1"

在 Gruntfile.js 中将 scripts 文件夹更改为 'js'。如果需要，也可以更改 index.html。

grunt.initConfig({   yeoman: {…………    scripts: 'js',    ………… } })

然后运行

$ bower install && npm install

$ grunt$ grunt serve$ cordova 平台添加 android $ grunt build:android --debug

ionic-platform-web-client

提供与 Ionic 平台交互的网络客户端。

我们需要一些代码来让您的应用与 Ionic 平台通信。我们需要为 Ionic 应用添加 Ionic 平台 Web 客户端，以便与插件和 Ionic.io 平台交互。

$ ionic io init

在您的 app.js 中添加 'ionic.service.core' 模块依赖项。在 Gruntfile.js 中添加 grunt 任务 'ionicSettings'，如下所示。

 grunt.initConfig({  
   ionicSettings:JSON.stringify(grunt.file.readJSON('./.io-config.json')),
   ionicIoBundlePath:'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',
   'string-replace':{  
      ionicSettings:{  
         files:{  
            '<%= ionicIoBundlePath %>':'<%= ionicIoBundlePath %>',

         },
         options:{  
            replacements:[  
               {  
                  pattern:'"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
                  replacement:'"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
               }
            ]
         }
      }
   },
   copy:{  
      ionicPlatform:{  
         expand:true,
         cwd:'app/bower_components/ionic-platform-web-client/dist/',
         src:[  
            '**'
         ],
         dest:'www/bower_components/ionic-platform-web-client/dist'
      }
   }
});grunt.registerTask('ionicSettings',
[  
   'copy:ionicPlatform',
   'string-replace:ionicSettings'
]);

在init和compress任务中添加'ionicSettings'copy。
在 index.html 中，将下面的标签移到所有标签声明之后。

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

然后运行

$ Grunt serve

离子部署

向您的生产应用推送实时更新，并管理版本历史记录。

Ionic Deploy 可让您按需更新您的应用程序，以进行任何不需要二进制修改的更改，从而为您节省数天甚至数周的等待时间。按照以下步骤为您的应用配置 Ionic Deploy。

在 Gruntfile.js 中添加 grunt 任务 'deploy'，如下所示。

grunt.registerTask('deploy',
function (){  
   return grunt.task.run(   [  
      'init',
      'ionic:upload'      + this.args.join()
   ]   );
});

然后运行

$ ionic plugin add ionic-plugin-deploy

离子部署代码：

var deploy = new Ionic.Deploy();// Check Ionic Deploy for new codedeploy.check().then(function(hasUpdate){  

},
function(err){  

});// Update app code with new release from Ionic Deploydeploy.update().then(function(result){  

},
function(error){  

},
function(progress){  

});

部署更新：

为您的应用发送新代码。

创建一个 apk 并安装您的应用。对您的代码进行少量更改并使用“grunt deploy”部署更改。然后从您的应用中更新它。

您也可以从 apps.ionic.io 仪表板部署它。您可以在没有部署参数的情况下部署应用程序。然后，您可以在仪表板中添加元数据和版本控制详细信息并从那里部署应用程序。

    $ grunt build:android --debug
$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

离子分析

查看事件的实时提要或一段时间内的事件/用户的原始/唯一数量。

您的应用目前有多少用户？明天或下周有多少人会使用你的应用程序？没有信息，您无法判断您的应用程序是否以您期望的方式使用。按照以下步骤为您的应用配置 Ionic Analytics。

在您的 app.js 中，在 ionic.service.core
之后添加“ionic.service.analytics”模块依赖项在我们模块的 run 函数中运行分析注册方法。

$ionicAnalytics.register();

在 Ionic Analytics 中，用户在您的应用中执行的每个跟踪操作都由一个事件对象表示。事件是在特定时间点完成的单个动作。要跟踪您自己的事件，请在发生操作时致电$ionicAnalytics.track(eventType, eventData)。

$ionicAnalytics.track('User Login', {  user: $scope.user});

ion-track-tap 指令在其宿主元素被点击时发送一个事件。相关的 ion-track-data 指令附加事件数据。

<button ion-track-tap="eventType" ion-track-data="expression"></button>

在 apps.ionic.io 仪表板中，您可以查看以下分析数据，

事件：查看一段时间内的原始事件数，或完成事件的唯一用户数。事件可以是从用户加载应用到确认购买的任何事件。

漏斗：漏斗是您希望用户在您的应用中采取的一系列操作，以实现既定目标。深思熟虑地使用渠道将帮助您提高转化率。

Segments：查看一段时间内的事件，按指定属性分组。或者，计算与给定属性匹配的事件的百分比。细分可帮助您了解您的用户群并了解属性如何随时间变化。

留存率：跟踪用户在停止使用您的应用之前的活跃时间。或者，确定用户需要多长时间才能达到既定目标，例如完成销售。

Pulse：来自您的用户的实时事件源。

离子推送

向您的用户发送有针对性的自动推送通知。

Ionic Push 让您可以通过一个简单的仪表板创建有针对性的推送通知，当用户符合特定条件时自动发送该通知，并提供一个简单的 API 从您自己的服务器发送推送通知。

Android 推送配置文件：

Android 推送通知使用 Google Cloud Messaging (GCM) 服务。打开 Google Developers Console 并创建一个项目。抄下您的项目编号。这将是 GCM 发件人 ID 或 GCM 项目编号。

在 API Manager 部分中，启用 Google Cloud Messaging API。然后导航到 Credentials 部分并选择 Create credentials，然后选择 API Key，然后选择 Server Key。命名您的 API 密钥并将 Accept requests from... 字段留空，然后单击 Create。保存您的 API 密钥！

身份验证：

在 Ionic 平台上转到您应用的仪表板并导航到 设置 -> 证书。如果您还没有创建一个新的安全配置文件，然后点击edit。记下个人资料标签。

现在，点击 Android 选项卡并找到标记为 Google Cloud Messaging 的部分，输入您在 Google Developer Console 上生成的 API 密钥 ，然后点击保存。转到设置 -> API 密钥。在 API 令牌 下，创建一个新令牌并复制它。这将是您的 API 令牌。

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false$ ionic io init

注意：phonegap-plugin-push 需要 Android Support Repository 版本 32+

在您的 app.js 中，在 ionic.service.core

之后添加 'ionic.service.push' 模块依赖项>

离子推送代码：

初始化服务并在模块的运行函数中注册您的设备。您需要用户注册的设备令牌才能向用户发送通知。

 $ionicPush.init({  
       debug:true,
       onNotification:function (notification)   {  
          console.log'token:', notification.payload);  },  onRegister: function (token) {    console.log('      Device Token:',
          token);    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
       }
    });
$ionicPush.register();

然后运行

$ grunt build:android --debug

Ionic Push 让您可以通过仪表板创建有针对性的推送通知。您还可以通过以下格式从服务器发送通知。

curl -X POST -H "Authorization:Bearer API_TOKEN" -H "Content-Type:application/json" -d '{  
   "tokens":[  
      "DEVICE_TOKEN"
   ],
   "profile":"PROFILE_TAG",
   "notification":{  
      "message":"Hello World!"      "android":{  
         "title":"Hi User",
         "message":"An update is available for your App",
         "payload":{  
            "update":true
         }
      }
   }
}'"https://api.ionic.io/push/notifications"

注意：为 iOS 配置 Ionic Push 的步骤是相同的，除了创建推送配置文件。要创建 iOS 推送配置文件，请参阅 http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles

【讨论】：