Angular2 と Swagger
2016/09/07
Takuro Wada
![](https://media.slid.es/uploads/550877/images/2979827/139426.png)
![](https://media.slid.es/uploads/550877/images/2979825/swagger-logo.png)
Hi
株式会社カブク
![](https://media.slid.es/uploads/550877/images/2939908/1907618_1065390806857131_2332344806579004476_n.jpg)
ソフトウェアエンジニア
Takuro Wada
![](https://media.slid.es/uploads/550877/images/2940220/GitHub-Mark-120px-plus.png)
和田 拓朗
3Dプリントにまつわるシステム開発をしています
SWAGGER
![](https://media.slid.es/uploads/550877/images/2979825/swagger-logo.png)
SWAGGERとは
-
RESTful APIを記述するための仕様
- JSON Schema ベース
- Open API Initiativeの基本仕様として査定
-
ツール充実
- Swagger Codegen
- Swagger UI
- Swagger Editor
![](https://media.slid.es/uploads/550877/images/2979895/logo_openapi_1.png)
なぜ SWAGGER?
-
API仕様を記述するため
- 当初はAPI Blueprintを使っていたが、Apiaryのレンダリングが微妙だったり…
-
コード生成をするため
- yaml (json) を書くだけでコード生成
![](https://media.slid.es/uploads/550877/images/2979880/03.png)
事例紹介
![](https://media.slid.es/uploads/550877/images/2980120/31.png)
最近開発しているシステム
![](https://media.slid.es/uploads/550877/images/2979824/Python-logo-notext.svg.png)
![](https://media.slid.es/uploads/550877/images/2979827/139426.png)
![](https://media.slid.es/uploads/550877/images/2979839/appengine_logo_new.png)
GAE
API Server
<アプリケーション>
![](https://media.slid.es/uploads/550877/images/2979824/Python-logo-notext.svg.png)
![](https://media.slid.es/uploads/550877/images/2979839/appengine_logo_new.png)
GAE
API Server
<共通機能>
Client
API Call
Response
API Call
Response
![](https://media.slid.es/uploads/550877/images/2979825/swagger-logo.png)
SWAGGER
![](https://media.slid.es/uploads/550877/images/2979825/swagger-logo.png)
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 ̄
![](https://media.slid.es/uploads/550877/images/2980132/38.png)
開発フロー
- Angular2のクライアントと同時にモックサーバも生成
![](https://media.slid.es/uploads/550877/images/2980107/node-js-736399_960_720.png)
![](https://media.slid.es/uploads/550877/images/2979827/139426.png)
![](https://media.slid.es/uploads/550877/images/2979824/Python-logo-notext.svg.png)
![](https://media.slid.es/uploads/550877/images/2979839/appengine_logo_new.png)
モックAPI
実装されたAPI
徐々に置換
Client
![](https://media.slid.es/uploads/550877/images/2979825/swagger-logo.png)
SWAGGER生成
(APIコール)
SWAGGER生成
![](https://media.slid.es/uploads/550877/images/2979825/swagger-logo.png)
サンプルソース
シンプルなSwagger Specでng2クライアントとモックサーバが動作するサンプル
![](https://media.slid.es/uploads/550877/images/2980152/01.png)
We're hiring
- カブクではエンジニアを募集中
- Python/C++/Typescript/(Go)
- GCP/AWS/Docker/Flask/Angular
- 3Dプリンタ使いたい放題
- グローバルな職場
- Google Developer Expertが3名
![](https://media.slid.es/uploads/550877/images/2940158/Screen_Shot_2016-08-24_at_18.58.50.png)
![](https://media.slid.es/uploads/550877/images/2940156/Screen_Shot_2016-08-24_at_18.58.56.png)
エンジニアチーム
![](https://media.slid.es/uploads/550877/images/2979930/35.png)
Angular2 x Swagger
By Takuro Wada
Angular2 x Swagger
Slides presented in TechFeed Live#2 「React vs Angular2」
- 3,307