Angular 4 から、Logic Apps  経由で　CosmosDBに書き出して見る。

本来は、Azure Functions で作る予定だったサービスがあったのだが、質問があってサーバーサイドを作るのは回答待ちだった。その間も作業を進めたかったので、ふと思いついて代わりに、Logic Apps でサクッと作ってみたので、いつも通り自分用にブログしておく。

 # 1. Cosmos DB を作成する。

Azure Portal から普通に作れば良い。 CosmosDB -> Collection を作って行く。一つのポイントは、Collectionを作る際の Partition Key が聞かれるようになったこと。これは、どのキーを元にして、分散させるか？という設定になる。（CosmosDB は、プラネットスケールで分散するので）今回は、とりあえず `name` にしてみた。

<img width="316" alt="Screen Shot 2017-10-10 at 9.56.14 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/eda205b5-44af-101c-3a67-105d6d49ce96.png">


# 2. Client を作成する。

これも、普通にポータルからできて、特に難しいことはないので割愛。今回のアプリは

```
Angular 4 -> Logic Apps -> CosmosDB
```

Angular のコードはとても単純なもので例えばこんなの。

```ts
export class Car {
    name: string;
    company: string;
    description: string;
    image_url: string;
    state: string; 
}
```
単にこれをアップロードしたい。画面も割愛で、ロジック部分のみ書くと下記の感じ。`submit()` イベントが発生したら、単にアップロードする。URL先は、単純にLog Apps であとで登場する。

```
import { Component } from '@angular/core';
import { Car } from './car';
import { Http, Headers, RequestOptions } from '@angular/http';
declare const Buffer;
import * as fs from 'fs';

@Component({
  selector: 'app-root',
  templateUrl: './car-detail.component.html'
})
export class CarDetailComponent {
  title = 'Car Reviews';
  image = 'assets/noimage.jpg';
  car: Car;

 
  constructor(private http:Http) {
      this.car = new Car();
      this.car.name = "";
      this.car.company = "";
      this.car.description = "";
      this.car.image_url = "assets/noimage.jpg";
      this.car.state = "pending";
  }

  submit() {

    let headers = new Headers();
    headers.append("Content-Type", "application/json");
    let options = new RequestOptions({
      headers: headers
    });
    let data = this.car;
    this.http.post("https://prod-07.japaneast.logic.azure.com:443/workflows/69c3cbe052374fa3bc54a51c6ed00935/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=tkPN9Gciye_QJHfwreCsJmWqGUuEIGHijsWUXDY9Ltk", data, options)
    .subscribe(
      data => console.log(data),
      error => console.log(error)
    );
  }

}
```

# 3. Logic Apps を設定する

## 3.1`Request を選択

まずは、リクエストきっかけで起動させる

<img width="1262" alt="LogicApp01.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/43963c7e-29e5-542a-816c-51bff55743f0.png">

次にこれ。選択。

<img width="624" alt="LogicApp02.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/cc3887a9-adef-2a89-d7ae-9302a7a5efb8.png">

## 3.2. Request の設定

なんかこんな画面になるので下のリンクをクリック。

<img width="612" alt="LogicApp03.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/64e6e52f-a379-5b0d-6749-5154408b6aa1.png">

こいつに、引き渡したいサンプルの JSONの例 を書いて見る。

<img width="801" alt="LogicApp04.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/c84e87ae-8bf7-5439-fbab-1c17ee7e5b60.png">

おー勝手に定義ができた。クライアントから送るときに、`Content-Type: application/json` の設定を忘れないでね！と言われるが、勝手にスキーマ定義ができている。

<img width="606" alt="LogicApp05.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/5431e423-c3ca-540d-80aa-bcb283a980ca.png">

## 3.3. Cosmos DB の設定

続けてコスモス。登録もしくは、更新の奴を選ぶ。

<img width="601" alt="LogicApp06.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/da716e16-5844-ebe2-b7d2-f077072b8221.png">

で、こんな感じに設定して見る。先に作った`Request` のデータをみてくれるので、項目をダブルクリックしたら定義ができる。ちなみに、CosmosDB の Partition Key を指定したので、それも足しておく。

<img width="601" alt="LogicApp07.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/fc44bef0-da80-c9a9-f7da-56e7359dfbae.png">

# クライアントからの送信、そしてエラー、、、

一応クライアントから、メッセージを投げてみたが、うまくいかない様子。エラーは、トップ画面からみれるので、クリック。

<img width="1262" alt="LogicApp08.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/f8ed037a-bab2-2a58-5b7e-835f5bea6bdc.png">

エラーみて見ると、ID がないらしい。

<img width="1108" alt="LogicApp09.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/6dab0aff-654d-cc78-06b5-ca5b22486d50.png">

## guid() 

ID なんて自分で振ってよー！と思って Kanio にちょっと聞いて見ると、関数が使えるらしい。今回は、`guid()` をセレクト。

* [Workflow Definition Language schema for Azure Logic Apps](https://docs.microsoft.com/en-us/azure/logic-apps/logic-apps-workflow-definition-language)

ちなみに、GUI の画面だけど裏は、Json になっているので、コードも編集できる。`@{guid()}` みたいな感じで足して見る。

<img width="599" alt="LogicApp10.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/49c8b604-6d87-fea1-72af-7ef9365877b7.png">

# 成功！

おー、動いた。

<img width="491" alt="LogicApp11.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/f4afdc6f-785b-a8d2-ff1f-749b4f6c1b86.png">

Cosmos DB 見てみよう。

<img width="858" alt="LogicApp14.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/7ced7134-d197-d841-c942-5d7a536f126d.png">

しっかり入ってる。ちなみに、先ほどの Logic Apps の編集画面に戻るとかっちょよくなっていた。

<img width="641" alt="LogicApp12.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/8d58a5d8-3964-8d97-a4fb-5f8df93e268d.png">

# まとめ

思い立ってから、試して見て１時間ぐらいでできた。こら簡単だわ。慣れたらきっともっと早いだろうなぁ。一般的なシナリオはもうこれでいいんじゃないだろうか？w コネクターとか、トリガーも見て見ると、Microsoft にかかわらずがっつりある。これは楽だわ。ちなみに、プログラマとしては、設定だけやとおもろないので、こういうコネクターやトリガーを書いてみたいですね。

<img width="628" alt="Screen Shot 2017-10-10 at 10.46.23 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/9c5e109b-aaa8-d357-9c1e-59d57bcc6a79.png">

<img width="620" alt="Screen Shot 2017-10-10 at 10.46.59 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/6bc6e787-70ea-58d7-1425-43ef54e141db.png">

ざっとみたけど、結構簡単にできそう。意外と、Logic Apps おもろいかもw

* [Custom connectors overview](https://docs.microsoft.com/en-us/azure/logic-apps/custom-connector-overview)


# Resource

* [Workflow Definition Language schema for Azure Logic Apps](https://docs.microsoft.com/en-us/azure/logic-apps/logic-apps-workflow-definition-language)