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

注意:這不是一個獨立的專案。給出的程式碼僅用於與使用本文件上面給出的過程建立和實現的專案進行比較,以防出現任何問題或錯誤。