RESTful API @ Front-End Developer Taiwan 2014-04-23

RESTOpen Data, URI, and REST API

@devpoga Front-End Developers Taiwan 2014.04.21

@devpoga

REpresentational State Transfer

• Resource and Representation

• Manipulation through Representation

• Self-Descriptive

• Links between Resources

先別管 REST API 了 !

你有聽過鄉⺠民 OCR 嗎

陽光法案• 陽光法案

• 公職⼈人員財產申報法

• 政治獻⾦金法

• 遊說法

• …

• 2005 年

政治獻金數位化• 《政治獻⾦金會計報告書查閱收費標準》

• 可以前往監察院查閱會計報告

• …需要事前預約

• …查詢⼀一個專⼾戶 20 元

• …不能以電⼦子檔格式攜出

• …影印⼀一張 2 元

反核四五六運動++

ronnywang++

鄉民 OCR

cells.1100.json

Let’s make a REST API

1. Thinking in Resources

2. HTTP Verb

3. Links between Resources

Resource

• 提供的資料名稱

• 政治獻⾦金表

gov.tw/campaign-finances//政府/政治獻⾦金/

{ 8: [“張慶忠”, “林鴻池”,…], 7: […], …}

Resource

gov.tw/campaign-finances/張慶忠/

/政府/政治獻⾦金/張慶忠/

[ { ⽇日期：”100/12/03”, 捐贈者：”匿名”, 種類：”個⼈人捐贈收⼊入”, ⾦金額：12345 }, { … }, …]

Resource Entry

gov.tw/legislators//政府/⽴立法委員/

{ 8: { KMT: [“張慶忠”, “林鴻池”,…] }, { DPP: […] }, … }

Resource

gov.tw/legislators/張慶忠//政府/⽴立法委員/張慶忠/

{ 姓名: “張慶忠” 黨籍: “KMT”, 選區: “新北市”, 參與院會紀錄: {…}, 聯絡⽅方式: { TEL: ‘…’, 地址: ‘…’ }, 經歷: [ … ] }

Resource Entry

gov.tw/財產申報紀錄/張慶忠//政府/財產申報紀錄/張慶忠/

{ 股票⾯面額總額: “兩億多很多”, ⼟土地持有總⾯面積: “8245.5坪”, … }

Resource Entry

gov.tw/投票紀錄/張慶忠//政府/投票紀錄/張慶忠/

{ 沒有投票: 7, 贊成: 79, 反對: 271, 紀錄： [ { 表決內容: 交通資訊雲端blahblah, 個⼈人投票: 贊成, 表決結果: 通過, ⽇日期: 2014-01-27 }, … ] }

Resource Entry

蔡正元：「我違反黨紀第三名」

gov.tw/脫黨表決紀錄/蔡正元//政府/脫黨表決紀錄/蔡正元/

{ 脫黨投票紀錄: [] }

Resource Entry

gov.tw/legislatorsgov.tw/legislators/張慶忠/gov.tw/campaign-fianaces/gov.tw/campaign-fianaces/林鴻池


http://http://http://http://

休息


2. HTTP Verb



http://http://http://http://

Create Read Update Delete


gov.tw/legislators/張慶忠/


POST GET PUT DELETE

POST GET PUT DELETE


POST GET PUT DELETE


gov.tw/legislators/張慶忠/gov.tw/legislators/張慶忠/

gov.tw/legislators/

Z > B

• 設計好 URL，新增/修改/刪除的介⾯面也⾃自動定義好了

• 更新介⾯面⼀一致

• http://gov.tw/create_legislator.php?name=…

• http://gov.tw/legislator_delete.php?name=…

休息


2. HTTP Verb



{ 姓名: “張慶忠” 黨籍: “KMT”, 選區: “新北市”, 參與院會紀錄: {…}, 聯絡⽅方式: { TEL: ‘…’, 地址: ‘…’ }, 經歷: [ … ] }

投票紀錄？財產紀錄？選舉得票紀錄？

GET

超連結


{ 姓名: “張慶忠” 黨籍: “KMT”, 選區: “新北市”, 參與院會紀錄: {…}, 聯絡⽅方式: { TEL: ‘…’, 地址: ‘…’ }, 經歷: [ … ], 投票紀錄: “/投票紀錄/張慶忠/”, 財產紀錄: “/財產紀錄/張慶忠/” }

HATEOAS

• Hypermedia as the Engine of Application State

• 直接在 Representation 中建⽴立 Resource 之間的連結，⽽而不是透過外部⽂文件

• Decoupling Server and Client.

gov.tw/legislators/張慶忠/{ 姓名: “張慶忠” 黨籍: “KMT”, 選區: “新北市”, 參與院會紀錄: {…}, 聯絡⽅方式: { TEL: ‘…’, 地址: ‘…’ }, 經歷: [ … ], 投票紀錄: “/投票紀錄/張慶忠/”, 財產紀錄: “/財產紀錄/張慶忠/”, 割闌尾: “/recalls/張慶忠” }

RESTful

• 從資料的⾓角度思考

• 套上 HTTP Verb 就有免費的操作介⾯面

• 透過 link 建⽴立資料間的關聯

RECAP

休息

PgRESTJavascript in your DB

http://pgre.st

http://pgre.st

PgREST is…• … a JSON document store

• … running inside PostgreSQL

• … working with existing relational data

• … capable of loading Node.js modules

• … compatible with MongoLab’s REST API

• … compatible with Firebase API (new)

From Data…

姓名電話黨籍

0 張慶忠 02-123-4567 KMT

1 林鴻池 02-123-4567 KMT

2 ⺩王⾦金平 02-123-4567 KMT

3 柯建銘 02-123-4567 DPP

Table: legislators

… to REST API

http://localhost:3000/collections/legislators

[ { id: 0, 姓名: 柯建銘 … }, { … }, … ]

> pgrest —db mydb


… with queryhttp://localhost:3000/collections/legislators?q={id:0}

… RESTful

http://localhost:3000/collections/legislatorsGET

POSTPUT

DELETE



http://pgre.st

http://pgre.st

Thank you!

Technology

RESTful API @ Front-End Developer Taiwan 2014-04-23