Angular2 と Swagger
2016/09/07
Takuro Wada
Hi
株式会社カブク
ソフトウェアエンジニア
Takuro Wada
和田 拓朗
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名
エンジニアチーム
Angular2 x Swagger
By Takuro Wada
Angular2 x Swagger
Slides presented in TechFeed Live#2 「React vs Angular2」
