Platform Event の Pub/Sub を すぐ動く無料 Web アプリから試す。（所要時間10分）

## 1. Salesforce 環境の用意

### 1.1. Developer Edition を取得する。

https://developer.salesforce.com/signup

### 1.2. Platform Event を作成する。

#### 1.2.1. 設定画面を開く

歯車アイコンから、 `設定` をクリックする。

![qiitasettingsmenu2.png](https://qiita-image-store.s3.amazonaws.com/0/201797/3d0c2225-f087-d759-f5d0-88aa00b7d0cd.png)

#### 1.2.2. プラットフォームイベントを開く

`プラットフォーム` と入力して、検索結果から、プラットフォームイベントのページへ遷移する。

![qiitamenupf.png](https://qiita-image-store.s3.amazonaws.com/0/201797/e42f1043-e604-97ed-4be8-61d695cb3e2f.png)

#### 1.2.3. イベントを作成する

`新規プラットフォームイベント` ボタンより、新規作成する。

![qiitapfnew.png](https://qiita-image-store.s3.amazonaws.com/0/201797/a048bb3a-17bb-e9d4-d438-39c59777a989.png)

#### 1.2.4. イベントのカスタム項目を作成

今回は下記4つのカスタム項目を作成。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/30d3823f-c226-41cd-b2ee-81cfab9b649d.png)

### 1.3. API アクセス用に、セキュリティトークンを取得する。

（IP 制限でもいい）

下記の `設定` をクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/4f095d9d-e2b4-72f1-b116-8da28d7e6519.png)

サイドメニューで、 `私のセキュリティトークンのリ...` を選択し、画面へ遷移したら `セキュリティトークンのリセット` ボタンを押下する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/132fc915-3c5a-b5ed-cfc5-fe45a7261a9d.png)

メールが送信されてくるので、セキュリティトークンをチェックしておく。

## 2. Glitch で、Node-RED 環境を用意する

### 2.1. Glitch

#### 2.1.1. Glitch へアクセスする。

https://glitch.com/

![qiitaglitch.png](https://qiita-image-store.s3.amazonaws.com/0/201797/a621c91f-e9c1-8dba-f920-62fc09eef0cd.png)

#### 2.1.2. Project を作成する。

`Start a New Project` ボタンをクリックし、 `Create a Node App` をクリックする。

![qiitaglitchnewpj.png](https://qiita-image-store.s3.amazonaws.com/0/201797/1263c905-a3ac-a0db-fab2-0fef2361df5c.png)

#### 2.1.3. package.json を修正

デフォルトの package.json に、下記 node-red の行を追加する。

```diff:package.json
  "dependencies": {
+   "node-red": "0.17.x",
    "express": "^4.16.2"
  },
```

package.json の全体はこれ。

```json
{
  "//1": "describes your app and its dependencies",
  "//2": "https://docs.npmjs.com/files/package.json",
  "//3": "updating this file will download and update your packages",

  "name": "my-glitch-app",
  "version": "0.0.1",
  "description": "What am I about?",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "node-red": "0.17.x",
    "express": "^4.16.2"
  },
  "engines": {
    "node": "8.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/welcome-project"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch",
    "express"
  ]
}
```

#### 2.1.4. server.js を修正

デフォルトの server.js を空にして、下記を貼り付ける。

```js
var http = require('http');
var express = require("express");
var RED = require("node-red");

// Expressアプリケーションの生成
var app = express();

// 静的コンテンツのルートを追加
app.use("/",express.static("public"));

// サーバの生成
var server = http.createServer(app);

// 設定オブジェクトの生成 - 他のオプションについてはデフォルトの 'settings.js' ファイルを参照してください
var settings = {
    httpAdminRoot:"/",
    httpNodeRoot: "/api",
    uiPort: 8080,
    functionGlobalContext: { }    // グローバルコンテキストを有効化
};

// サーバと設定とランタイムの初期化
RED.init(server,settings);

// エディタUIのルートを '/red' に指定
app.use(settings.httpAdminRoot,RED.httpAdmin);

// HTTP node UIのルートを '/api' に指定
app.use(settings.httpNodeRoot,RED.httpNode);

server.listen(8080);

// ランタイム起動
RED.start();
```

上記は、 [Node-RED日本ユーザ会 : 既存アプリケーションへの組込み](https://nodered.jp/docs/embedding) のコードを少し書き換えたもの。
本来は、 `adminAuth` を入れて、ユーザ認証を有効にすべき。

暫く待つと、下記 `Show [Live]` ボタン？が押せるようになるので、クリック。

![qiitashowlive.png](https://qiita-image-store.s3.amazonaws.com/0/201797/b3e82d26-24b0-2c83-fa5b-fdb975212594.png)

Node-RED が表示される。

![qiitanodered.png](https://qiita-image-store.s3.amazonaws.com/0/201797/ae43be49-0a00-3584-8f77-2ee30845c103.png)

### 2.2. Node-RED

#### 2.2.1. Salesforce Platform Event ノードをインストールする。

ハンバーガーメニュー » パレットの管理、をクリックする。

![qiitapalletmng.png](https://qiita-image-store.s3.amazonaws.com/0/201797/f3c698df-103c-de34-c0d1-7817e29264c6.png)

`ノードを追加` タブを選択し、 `salesforce-p` と入力し、`node-red-contrib-salesforce-platform-event` の `ノードの追加` ボタンをクリックする。

![qiitanoderedinstallnode.png](https://qiita-image-store.s3.amazonaws.com/0/201797/4cc81979-c35b-2d49-6b5e-212d28863644.png)

`追加` 追加ボタンをクリック。

![qiitainstallnode.png](https://qiita-image-store.s3.amazonaws.com/0/201797/bcf8f219-75c1-1a09-7fa3-b2704a346e2f.png)

追加処理が完了したら `閉じる` ボタンをクリックする。

#### 2.2.2. フロー（Node-REDの処理）を読み込む

ハンバーガーメニュー » 読み込み » クリップボード、をクリックする。

![qiitanoderedloadflow.png](https://qiita-image-store.s3.amazonaws.com/0/201797/9e941137-de0c-86f8-0dd9-48b0a3bfa4b6.png)

下記の画面に、下記 JSON を貼り付けて、 `読み込み` ボタンをクリックする。

![qiitaloadflowdialog.png](https://qiita-image-store.s3.amazonaws.com/0/201797/9fae14cf-3ca9-5a77-e58e-bb7f0e73712a.png)

貼り付ける JSON 。

```json
[{"id":"b1b4bca8.e4436","type":"inject","z":"f1b0324f.3d005","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":162,"y":96,"wires":[["46e7834f.2dc5dc"]]},{"id":"7640704e.8338","type":"debug","z":"f1b0324f.3d005","name":"debug","active":true,"console":"false","complete":"payload","x":578,"y":176,"wires":[]},{"id":"3aabc83.4119638","type":"debug","z":"f1b0324f.3d005","name":"debug","active":true,"console":"false","complete":"payload","x":578,"y":256,"wires":[]},{"id":"3a1e0c54.823234","type":"salesforce-platform-event-pub","z":"f1b0324f.3d005","salesforce":"a140012d.ca6cb","eventname":"testPF__e","name":"","x":394,"y":176,"wires":[["7640704e.8338"]]},{"id":"5d3ba5b9.75451c","type":"salesforce-platform-event-sub","z":"f1b0324f.3d005","salesforce":"a140012d.ca6cb","eventname":"testPF__e","name":"","x":394,"y":256,"wires":[["3aabc83.4119638"]]},{"id":"46e7834f.2dc5dc","type":"template","z":"f1b0324f.3d005","name":"set data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"{\n  \"deviceId__c\":\"xxxxxx1\",\n  \"body__c\": \"{\\\"ke1\\\":\\\"val1\\\",\\\"key2\\\":\\\"val2\\\"}\",\n  \"timestamp__c\": 1512442614321,\n  \"isDeath__c\" : false\n}","output":"json","x":316,"y":96,"wires":[["3a1e0c54.823234"]]},{"id":"a140012d.ca6cb","type":"salesforce-platform-event-config","z":"","name":""}]
```

読み込まれたフローを配置（カーソルを動かしてクリック）したら、下記のようになる。

![qiitaloadflowbeforedeploy.png](https://qiita-image-store.s3.amazonaws.com/0/201797/dee67490-7b98-5fef-ba13-3be5e253f495.png)

`デプロイ` ボタンをクリックする。

#### 2.2.3. Salesforce の認証情報を設定する

下記のノードをダブルクリックする。

![qiitasfpenode.png](https://qiita-image-store.s3.amazonaws.com/0/201797/72e49ba3-938d-f36c-13e2-53c7b9c49df5.png)


Salesforce 欄右端の鉛筆アイコンをクリックして、認証情報の入力画面へ遷移する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/8b3225ff-d447-2cf0-9d01-ce9692f34188.png)

下記の画面の3項目を入力する。

- URL: `https://login.salesforce.com`
- Username: (自身のユーザ名)
- Password: (自身のユーザのパスワード ＋ セキュリティトークン)
    - パスワードとセキュリティトークンの間は何も挟まない。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/b9b1f185-4715-2f18-9ff9-a0627c6211f0.png)

`更新` ボタンを押して、 `完了` ボタンを押したら、 `デプロイ` ボタンを押す。

![qiitadeploybutton.png](https://qiita-image-store.s3.amazonaws.com/0/201797/0a4b8bba-1f5b-dcba-1cfa-1d03dec8deb9.png)

## 3. いざ実行！

`inject` の左側の四角いボタンをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/7d9e5648-4444-ab29-7c4d-53caeb1486ab.png)

Publish の結果（上の `debug` ）

![qiitadebug1.png](https://qiita-image-store.s3.amazonaws.com/0/201797/89e3ecbe-4c1c-ee91-662f-7d9585ddd99b.png)

Subscribe の結果（下の `debug` ）

![qiitadebug2.png](https://qiita-image-store.s3.amazonaws.com/0/201797/1f5b0b1a-a32e-0caa-278a-7ecab7e9ae73.png)

**以上**

----

## 4. あとがき

### 4.1. Salesforce に Publish したデータを貯めてみる。

#### 4.1.1. データを入れるカスタムオブジェクトを作成する。

作成したプラットフォームイベント `testPF__e` と同構成のカスタムオブジェクト `testPF_data__c` を作成する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/cdbb3e41-6840-515b-a8a7-c724c6e37acf.png)

#### 4.1.2. Platform Event の Trigger を作成する。

```java
trigger LowInkTrigger on testPF__e (after insert) {

  List<testPF_data__c> pfdata = new List<testPF_data__c>();
  
  for (testPF__e event : Trigger.New) {
  
    testPF_data__c data = new testPF_data__c();
    
    data.deviceId__c = event.deviceId__c;
    data.body__c = event.body__c;
    data.timestamp__c = event.timestamp__c;
    data.isDeath__c = event.isDeath__c;
    
    pfdata.add(data);
  }
  
  insert pfdata;
}
```

#### 4.1.3. フローを実行して、中を見てみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/0d79b256-e015-79d3-fcc4-c188eb6fb0ea.png)

（トリガが落ちると、Subscribe できないっぽい。）