albatrosary's blog

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

Angular と Azure Function と Swagger

Angular と Azure Function と Swagger を利用している。Swagger はあまり好みじゃなかったんだが他に良いAPI設計する場所とそれを管理する場所も見つからなかったので、遅ればせながら本腰入れて利用しようと思った次第でメモ的な何か。

いい加減な説明

Swagger

Swagger は RESTful APIを構築するためのオープンソースのフレームワーク

app.swaggerhub.com

Azure Function

Azure Function は サーバーレス コンピューティングで云々。

azure.microsoft.com

Angular

フロントエンド Web アプリケーションを作るもの。

https://angular.io/angular.io

やってみる(思考実験含む)

Azure Function を利用するとSwaggerで(という表現が良いのかわからないが)API定義してくれる

f:id:albatrosary:20180425215226p:plain

この定義であるが Swagger を使って Angular サービスをいい感じで出力してくれる。

f:id:albatrosary:20180426071737p:plain

$ tree
.
├── api
│   ├── api.ts
│   ├── pet.service.ts
│   ├── store.service.ts
│   └── user.service.ts
├── api.module.ts
├── configuration.ts
├── encoder.ts
├── git_push.sh
├── index.ts
├── model
│   ├── apiResponse.ts
│   ├── category.ts
│   ├── models.ts
│   ├── order.ts
│   ├── pet.ts
│   ├── tag.ts
│   └── user.ts
├── rxjs-operators.ts
└── variables.ts

2 directories, 18 files
$ 

こいつを angular-cli で作ったプロジェクトに入れて、コンポーネントから呼び出すとサービスに手を入れずにアプリケーションが完成してしまう。作るのはコンポーネントだけという素晴らしさ。

最後に

こいつは面白いってことで深く調べることにする

https://github.com/albatrosary/swagger-angular

おしまい