albatrosary's blog

UI/UXとエンタープライズシステム

Swagger Codegen を使って Cognitive Service クライアントを Angular で実装する

マイクロサービスだの何だのと(という訳でもないですが)クライアントとサーバーのAPIを作るのが段々と面倒になって来ているので本腰いれて Swagger 使おうと思い色々と調べてます。Swagger の JSON ファイルをコマンド一発でやってくれるの無いかな?と見ていたら Swagger Codegen ってのがあって早速使って見た。

github.com

インストール

書いてある通りにやれば良いだけですが

$ brew install swagger-codegen

です。java1.8 が必要らしく入れてやりました。

コマンドラインの設定

Angular サービスを利用したいので次のコマンドを定義しました。このコマンドをnpm-scriptsに定義しています。

  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --base-href '/tr21-web/' -aot --sourcemaps false",
    "build:prod": "ng build --prod --base-href '/tr21-web/' -aot --sourcemaps false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "typedoc": "typedoc --out documentation/ src/app/",
    "swagger": "swagger-codegen generate -i ./swagger.json -l typescript-angular -o ./src/app/service"
  },

swagger.json

swagger.json は Azure の Cognitive Service API を使ってます。このバージョンは 1.2 です。サポートディスクから回答があった通り Cognitive Service からのリンクが古いものになっているのでこっちを使ってくださいとのこと。

https://southcentralus.dev.cognitive.microsoft.com/docs/services/f2d62aa3b93843d79e948fe87fa89554/export?DocumentFormat=Swagger&ApiName=Custom%20Vision%20Training%201.2

実行

$ npm run swagger
$ tree
.
├── api
│   ├── api.ts
│   └── default.service.ts
├── api.module.ts
├── configuration.ts
├── encoder.ts
├── git_push.sh
├── index.ts
├── model
│   ├── account.ts
│   ├── accountQuota.ts
│   ├── apiKeys.ts
│   ├── domain.ts
│   ├── domainArray.ts
│   ├── exportArray.ts
│   ├── image.ts
│   ├── imageArray.ts
│   ├── imageCreateResult.ts
│   ├── imageCreateSummary.ts
│   ├── imageFileCreateBatch.ts
│   ├── imageFileCreateEntry.ts
│   ├── imageIdCreateBatch.ts
│   ├── imageIdCreateEntry.ts
│   ├── imagePredictionResult.ts
│   ├── imageTag.ts
│   ├── imageTagCreateBatch.ts
│   ├── imageTagCreateEntry.ts
│   ├── imageTagCreateSummary.ts
│   ├── imageTagPrediction.ts
│   ├── imageUrl.ts
│   ├── imageUrlCreateBatch.ts
│   ├── imageUrlCreateEntry.ts
│   ├── iteration.ts
│   ├── iterationArray.ts
│   ├── iterationPerformance.ts
│   ├── keyPair.ts
│   ├── modelExport.ts
│   ├── models.ts
│   ├── perProjectQuota.ts
│   ├── prediction.ts
│   ├── predictionQuery.ts
│   ├── predictionQueryTag.ts
│   ├── predictionQueryToken.ts
│   ├── predictionTag.ts
│   ├── project.ts
│   ├── projectArray.ts
│   ├── projectSettings.ts
│   ├── quota.ts
│   ├── tag.ts
│   ├── tagList.ts
│   └── tagPerformance.ts
├── rxjs-operators.ts
└── variables.ts

2 directories, 51 files
$ 

こりゃ良い。Microsoftのjson定義に問題があるのか変換に問題があるのかちょっと不明だけどコードに若干のエラーがあるけどちゃちゃっと直して完了。素晴らしい

最後に

こういうのもあるよ

github.com

おわり