Angular2 と Swagger

2016/09/07

Takuro Wada

Hi

株式会社カブク

ソフトウェアエンジニア​

Takuro Wada

taxpon

http://takuro.ws

taxpon

和田 拓朗

3Dプリントにまつわるシステム開発をしています

SWAGGER

SWAGGERとは

  • RESTful APIを記述するための仕様

    • ​JSON Schema ベース
    • Open API Initiativeの基本仕様として査定

  • ツール充実

    • Swagger Codegen
    • Swagger UI
    • Swagger Editor

なぜ SWAGGER?

  • API仕様を記述するため

    • 当初はAPI Blueprintを使っていたが、Apiaryのレンダリングが微妙だったり…

  • コード生成をするため

    • yaml (json) を書くだけでコード生成

事例紹介

最近開発しているシステム

GAE

API Server

<アプリケーション>

GAE

API Server

<共通機能>

Client

API Call

Response

API Call

Response

SWAGGER

SWAGGER

実際どんな感じ？

paths:
  /books:
    get:
      tags: [Books]
      operationId: getBooksList
      responses:
        200:
          description: success
          schema:
            title: books
            type: array
            items:
              $ref: '#/definitions/Book'

  • APIのエンドポイントを定義

    • Yaml
    • Json

実際どんな感じ？

definitions:
  Book:
    type: object
    properties:
      title:
        type: string
        example: Hello, Angular2
      author:
        type: string
        example: john doe

  • データの定義

    • 定義したデータは他の部分から参照可
$ref: '#/definitions/Book'

生成

$ swagger-codegen generate -i swagger.yaml  -l typescript-angular2 \
    -o ./api_client
  • コマンド叩く
├── LICENSE
├── api
│   ├── BooksApi.ts
│   └── api.ts
├── git_push.sh
├── index.ts
└── model
    ├── Book.ts
    └── models.ts
  • できる

＿人人人人人人＿
＞　便利！！　＜
￣Y^Y^Y^Y^Y￣

開発フロー

  • Angular2のクライアントと同時にモックサーバも生成

モックAPI

実装されたAPI

徐々に置換

Client

SWAGGER生成

(APIコール)

SWAGGER生成

サンプルソース

  • シンプルなSwagger Specでng2クライアントとモックサーバが動作するサンプル

We're hiring

  • カブクではエンジニアを募集中
    • Python/C++/Typescript/(Go)
    • GCP/AWS/Docker/Flask/Angular
    • 3Dプリンタ使いたい放題
    • グローバルな職場
    • Google Developer Expertが3名

エンジニアチーム

http://www.kabuku.co.jp/#jobs

Made with Slides.com