ionic-framework
Yeoman Ionicプロジェクト用イオン雲

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript

Yo（Yeoman）イオンプロジェクトのためのイオンプラットフォーム（Ionic Cloud）

イオンプラットフォーム：

簡単にIonicアプリを構築、プッシュ、デプロイ、スケーリングできます。

タイトル説明：

Ionic Platformは、クロスプラットフォームのモバイルアプリケーションを管理および拡張するためのクラウドプラットフォームです。統合されたサービスにより、あなたとあなたのチームは、アプリケーションを効率的に構築、展開、拡張することができます。

ドキュメントの目的：
Ionic Platformは標準的なイオンプロジェクトとうまく機能します。しかし、非標準ディレクトリ構造に従ったプロジェクトは、いくつかのハードルに直面するかもしれません。この文書は、Yeomanを使用して作成されたIonicプロジェクトでIonic Platformを使用する手順を示しています。

ドキュメントの範囲：
このドキュメントでは、Yeomanを使用してIonicプロジェクトを作成し、Ionic Platform Web Clientを使用してIonicプラットフォームと統合するための基本的な手順について説明します。このドキュメントでは、Ionic Deploy、Ionic Analytics、Ionic Pushを使用するための基本的な手順について説明します。

対象とする訪問者：
このドキュメントの対象読者は、初心者レベルと専門家レベルの両方の専門知識を持つWeb / Mobile App開発者で、以下の前提条件に精通しています。

前提条件：
このドキュメントを試す前に、以下のフレームワーク/ツールに精通している必要があります。

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 Framework用ジェネレータ、最新の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でスクリプトフォルダを'js'に変更します。必要に応じてindex.htmlも変更してください。

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

その後、

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

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

ionic-platform-web-client

Ionicプラットフォームとの相互作用を提供するWebクライアント。

私たちはあなたのアプリがIonic Platformに話すためのコードが必要です。プラグインとIonic.ioプラットフォームとのインターフェースをとるために、Ionicアプリ用のIonicプラットフォームWebクライアントを追加する必要があります。

$ 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.coreの後に ' ionic.service.analytics 'モジュールの依存関係を追加します。私たちのモジュールのrun関数でanalytics registerメソッドを実行します。

$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ダッシュボードでは、次の分析データを表示できます。

イベント：時間の経過に伴う生の数、またはイベントを完了した一意のユーザーの数を表示します。イベントは、アプリを読み込んでいるユーザーから購入を確認することまで何でもかまいません。

目標到達プロセス：目標到達目標に達するまで、ユーザーがアプリ内で行動すると考えられる一連のアクションです。漏斗を慎重に使用すると、コンバージョン率を向上させるのに役立ちます。

セグメント：特定のプロパティでグループ化されたイベントを時間の経過と共に表示します。または、特定のプロパティに一致するイベントの割合を計算します。セグメントは、ユーザーベースの理解を助け、時間の経過とともにプロパティがどのように変化するかを確認するのに役立ちます。

保存期間：ユーザーがアプリの使用を停止するまでの期間を追跡します。または、完了した販売のように、ユーザーが定義された目標に達するのにかかる時間を特定します。

Pulse：ユーザーからのイベントのライブフィード。

イオンプッシュ

ターゲット設定され自動化されたプッシュ通知をユーザーに送信します。

Ionic Pushを使用すると、ユーザーが特定の条件に一致すると自動的に送信されるシンプルなダッシュボードを使用してプッシュ通知を作成し、サーバーからプッシュ通知を送信する簡単なAPIを提供できます。

Androidプッシュプロファイル：

Androidのプッシュ通知はGoogle Cloud Messaging （GCM）サービスを使用します。 Google Developers Consoleを開き、プロジェクトを作成します。 プロジェクト番号をコピーします。これはGCM送信者IDまたはGCMプロジェクト番号になります。

[ APIマネージャー]セクションで、 Google Cloud Messaging APIを有効にします。次に、「 Credentials」セクションにナビゲートし、「Create Credentials 」を選択し、「API Key」、「Server Key」の順に選択します。あなたのAPIキーに名前をつけて、 Accept requests from ...フィールドを空白のままにして、 Createをクリックします。 APIキーを保存してください！

認証：

Ionic Platformのアプリケーションのダッシュボードに移動し、 設定 - >証明書に移動します。まだ作成していない場合は、新しいセキュリティプロファイルを作成し、 編集を押します。 プロファイルタグをメモしてください。

Androidタブをクリックして、 Google Cloud Messagingのセクションを見つけ、Googleデベロッパーコンソールで生成した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

注：これはスタンドアロンプロジェクトではありません。このコードは、問題またはエラーが発生した場合に、この文書で前述した手順を使用して作成および実装されたプロジェクトと比較するためのものです。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow