Yo(Yeoman) 离子项目的离子平台(Ionic Cloud)

离子平台

以简单的方式构建,推送,部署和扩展你的 Ionic 应用程序

标题描述:

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

文档目标:
Ionic Platform 适用于标准的离子项目。但是,遵循任何非标准目录结构的项目可能会面临一些障碍。本文档提供了在使用 Yeoman 创建的 Ionic 项目中使用 Ionic Platform 的步骤。

文档范围:
本文档介绍了使用 Yeoman 创建 Ionic 项目并使用 Ionic Platform Web Client 将其与 Ionic Platform 集成的基本步骤。本文档介绍了使用 Ionic Deploy,Ionic Analytics 和 Ionic Push 的基本步骤。

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

先决条件:
在尝试本文档之前,你应该熟悉以下框架/工具。

离子框架生成器

Yeoman 的 Ionic Framework 生成器,是用于现代 webapps 的 Web 的 Scaffolding 工具

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 中,脚本文件夹更改为 js 。如果需要,也可以更改 index.html

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

然后跑

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

离子平台的 Web 客户端

提供与 Ionic 平台交互的 Web 客户端

我们需要一些代码让你的应用与 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压缩任务中添加 ‘ionicSettings’ 。在 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 code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

部署更新:

为你的应用发送新代码。

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

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

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

离子分析

查看事件的实时源或一段时间内原始/唯一的事件/用户数

你的应用目前有多少用户?有多少人会在明天或下周使用你的应用程序?如果没有信息,你无法确定你的应用是否以你期望的方式使用。按照以下过程为你的应用配置 Ionic Analytics。

在你的 app.js 添加“ ionic.service.analytics 后”模块依赖 ionic.service.core 运行分析注册在我们的模块的运行功能的方法。

$ionicAnalytics.register();

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

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

离子轨道抽头指令发送时其主机元件被轻敲事件。相关的 ion-track-data 指令附加事件数据。

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

apps.ionic.io 仪表板中,你可以查看以下分析数据,

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

渠道:渠道是你希望用户在你的应用中采取的一系列操作,从而达到既定目标。周到使用渠道可以帮助你提高转化率。

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

保留:跟踪用户在停止使用之前对你的应用有多长时间。或者,确定用户达到既定目标所需的时间,例如已完成的销售。

Pulse:来自用户的活动的实时源。

离子推

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

Ionic Push 允许你通过简单的仪表板创建有针对性的推送通知,该仪表板将在用户符合特定条件时自动发送,并提供简单的 API 以从你自己的服务器发送推送通知。

Android 推送配置文件:

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

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

验证:

转到 Ionic 平台上的应用程序仪表板,然后导航到设置 - >证书。如果你还没有,请创建一个新的安全配置文件,然后点击编辑。记下配置文件标签

现在,点击 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 支持存储库版本 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

示例应用程序

在此处下载示例应用程序

此处附有示例应用程序以供参考。

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

注意:这不是一个独立的项目。给出的代码仅用于与使用本文档上面给出的过程创建和实现的项目进行比较,以防出现任何问题或错误。