API 是蝦米？能吃！？

好啦我知道是爛梗

可是我不是大樹我沒梗 QQ

所以 API 是什麼？

Apple pie icecream?

Application

Programing

Interface

所以 API 是什麼？

應用程式介面（Application Programming Interface，簡稱：API），就是軟體系統不同組成部分銜接的約定。
軟體的規模日益龐大，常常需要把複雜的系統劃分成小的組成部分，因此介面的設計十分重要。

維基百科：

http://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3

所以 API 是什麼？

把寫好的 code 包起來，設計介面給別人調用
把寫好的程式編譯好，把設計好的接口公開給別人調用
作業系統給你操作系統的接口

以 local 的程式來說

簡單來說，就是讓你的程式/程式碼可以去

調用別人寫好的程式/函式的那個介面/接口

那 REST 又是什麼？

符合 REST 設計風格的網頁 API 稱為 RESTful API。

從以下三個方面資源進行定義：

直觀簡短的資源地址
傳輸的資源
對資源的操作

REST 是設計風格而不是標準

維基百科：

http://zh.wikipedia.org/zh-tw/REST

為什麼要用 API

曾經有人說過一句話

好的 API 設計，

不能讓你考試考一百或者升職加薪

但是，

可以減少你爆肝的機會

（前提是老闆在你提升工作效率後不追作業量）

為什麼要用 API

程式設計的實踐中，編程介面的設計首先要使軟體系統的職責得到合理劃分。良好的介面設計可以降低系統各部分的相互依賴，提高組成單元的內聚性，降低組成單元間的耦合程度，從而提高系統的維護性和擴充功能性。

維基百科：

http://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3

為什麼要用 API

所以說 API 設計到底有哪些優點

優點一：減少客戶端流量
優點二：資料與介面分離（MVC）
優點三：減少伺服器運算以及可重複使用

傳統的網頁設計

按下送出後會發生什麼事？

傳統的網頁設計

使用 Form，當你按下送出，

便會將表格中的資料送給伺服器

伺服器通常會把整個要顯示的網頁傳回來

然後你才發現

網頁重新整理後只多了個「登入成功」

傳統的網頁設計

登入失敗會發生什麼事？

<br />
<p align="center"><font color="Red">504: 登入錯誤</font>
</p><fieldset style="BORDER: Red 1px double; WIDTH: 180px;">
  <legend><font color="Red"><b>忘記密碼</b></font></legend>
    <table border="0" width="98%" align="center">
    請找系務助理、導師、系主任或持身份證明文件洽請註冊組或電算中心人員
    幫您將密碼變更為身份證字號。
    </td></tr>
    </table>
  </fieldset>
  </div>

傳統的網頁設計

--- 1. 用戶發出網頁的 request -->

2. 伺服器準備資料以及畫面

3. 伺服器將資料與介面合併成 HTML

（Data binding）

<-- 4. 伺服器準備好 HTML --

客

戶

端

伺

服

器

API 的網頁設計

按下送出後會發生什麼事？

現代的網頁設計

使用按鈕，當你按下送出，

便會將表格中的資料透過 ajax 送給伺服器

伺服器會把結果傳回來

然後你就會發現

網頁沒有重整可是多了個「登入成功」

API 的網頁設計

登入失敗會發生什麼事？

{
    "code": "504",
    "status": "登入錯誤",
    "text": "請找系務助理、導師、系主任或持身份證明文件洽請註冊組或電算中心人員幫您將密碼變更為身份證字號。"
}

API 的網頁設計

--- 1. 用戶發出網頁的 request -->

<-- 2. 伺服器回傳介面以及 script ---

--- 3. 瀏覽器根據 script 內容要求 api -->

<-- 4. 伺服器回傳 json 格式的 data --

5. 瀏覽器把介面與 data 整合併顯示

客

戶

端

伺

服

器

RESTful API 的設計

那一般都怎麼設計呢？

以 staff.sitcon.org/api/ 為例

{
  "users": "https://staff.sitcon.org/api/users/",
  "groups": "https://staff.sitcon.org/api/groups/",
  "staffgroups": "https://staff.sitcon.org/api/staffgroups/",
  "userprofiles": "https://staff.sitcon.org/api/userprofiles/",
  "rooms": "https://staff.sitcon.org/api/rooms/",
  "timeslots": "https://staff.sitcon.org/api/timeslots/",
  "activities": "https://staff.sitcon.org/api/activities/",
  "submissions": "https://staff.sitcon.org/api/submissions/"
}

RESTful API 的設計

那一般都怎麼設計呢？

以 staff.sitcon.org/api/userprofiles/ 為例

[
  {
    "url": "https://staff.sitcon.org/api/userprofiles/9/",
    "user": "https://staff.sitcon.org/api/users/7/",
    "display_name": "Takeshi",
    "bio": null,
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/b721195e879c1ccab06a714f9d15b1da?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/10/",
    "user": "https://staff.sitcon.org/api/users/11/",
    "display_name": "波卡Poka",
    "bio": null,
    "title": "行銷組長",
    "avatar": "https://secure.gravatar.com/avatar/296ec9c4dc557c85ef8ca6feaa956c98?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/12/",
    "user": "https://staff.sitcon.org/api/users/10/",
    "display_name": "MouseMs",
    "bio": null,
    "title": "總召",
    "avatar": "https://secure.gravatar.com/avatar/457cbd33a97ba5dad4cc9b177fad0da6?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/18/",
    "user": "https://staff.sitcon.org/api/users/18/",
    "display_name": "Jeremy Yen",
    "bio": null,
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/ea3f65db2b33fad0b573b3c25775f3aa?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/19/",
    "user": "https://staff.sitcon.org/api/users/19/",
    "display_name": "雁子",
    "bio": null,
    "title": "文創青年",
    "avatar": "https://secure.gravatar.com/avatar/d2a390382a4d3d5cf17740ffbd914942?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/20/",
    "user": "https://staff.sitcon.org/api/users/20/",
    "display_name": "崑元",
    "bio": null,
    "title": "場務組長",
    "avatar": "https://secure.gravatar.com/avatar/cadc057afc057373a9675da020663393?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/21/",
    "user": "https://staff.sitcon.org/api/users/21/",
    "display_name": "泰泰",
    "bio": null,
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/2d2de640b757b0442eefc95cee106337?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/27/",
    "user": "https://staff.sitcon.org/api/users/27/",
    "display_name": "Telu",
    "bio": null,
    "title": "文創青年",
    "avatar": "https://secure.gravatar.com/avatar/ed0b380561df4f7031c116d3fbe0b653?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/34/",
    "user": "https://staff.sitcon.org/api/users/34/",
    "display_name": "Miller",
    "bio": null,
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/f2fad77c24dbbc45e83f2da988d32150?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/51/",
    "user": "https://staff.sitcon.org/api/users/51/",
    "display_name": "佳玟",
    "bio": null,
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/02b8bd75fae0de2e9f32efce1fe9be9d?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/63/",
    "user": "https://staff.sitcon.org/api/users/63/",
    "display_name": "Emma",
    "bio": null,
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/bdd98a555af60fa7495ab3a3766b5fec?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/33/",
    "user": "https://staff.sitcon.org/api/users/33/",
    "display_name": "Ming",
    "bio": "Ming",
    "title": "線路組員",
    "avatar": "https://secure.gravatar.com/avatar/db22394b8f40e66280734a711b6b593f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/62/",
    "user": "https://staff.sitcon.org/api/users/62/",
    "display_name": "香菇",
    "bio": "",
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/68dd5990e787d70c084aca7f08346c94?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/15/",
    "user": "https://staff.sitcon.org/api/users/15/",
    "display_name": "Clarence",
    "bio": "",
    "title": "行銷副組長",
    "avatar": "https://secure.gravatar.com/avatar/1cef2c5a606938ebad117ba899ee6b5f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/58/",
    "user": "https://staff.sitcon.org/api/users/58/",
    "display_name": "大助",
    "bio": "大助",
    "title": "行銷組暨紀錄股長",
    "avatar": "https://secure.gravatar.com/avatar/fda98c6701cf60d6af2da9ae98f8c981?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/42/",
    "user": "https://staff.sitcon.org/api/users/42/",
    "display_name": "ZLeaf",
    "bio": null,
    "title": "行政組社群股長",
    "avatar": "https://secure.gravatar.com/avatar/3775d136f043e47626bf38f1c42895ea?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/16/",
    "user": "https://staff.sitcon.org/api/users/16/",
    "display_name": "聽風",
    "bio": "台科大資管系學生，開發過 iCheck 學生證簽到系統、Uvote 校園公投系統，曾任台科大程式設計研究社社長，平時使用 Laravel 進行開發，最近在研究 Java、Objective-C ，是一個蘋果愛用者。",
    "title": "財務組長",
    "avatar": "/users/linroex/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/65/",
    "user": "https://staff.sitcon.org/api/users/100/",
    "display_name": "乾隆",
    "bio": "乾隆",
    "title": "文創青年",
    "avatar": "https://secure.gravatar.com/avatar/8dfbc971127fdf3c06e132ddf7f45194?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/39/",
    "user": "https://staff.sitcon.org/api/users/39/",
    "display_name": "胖胖",
    "bio": "",
    "title": "線路組長",
    "avatar": "https://secure.gravatar.com/avatar/4a547dab70df0fb8527adad52a989496?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/1/",
    "user": "https://staff.sitcon.org/api/users/1/",
    "display_name": "RSChiang",
    "bio": "RSChiang，常把 Python 參考書跟六法一起帶出門的鍵盤法律人，熱愛文字、符號、以及語言的具體表徵。目前就讀臺灣大學法律學系，曾任 SITCON 2013、2014 行政組長，現任臺大開源社首屆社長。",
    "title": "副召",
    "avatar": "/users/RSChiang/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/29/",
    "user": "https://staff.sitcon.org/api/users/29/",
    "display_name": "AngelBoy",
    "bio": "AngelBoy",
    "title": "場務組報到股長",
    "avatar": "https://secure.gravatar.com/avatar/cab798ff74597f6784c628b4119bbd2f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/40/",
    "user": "https://staff.sitcon.org/api/users/40/",
    "display_name": "Kevin-WY",
    "bio": "路邊野貓ww",
    "title": "場務組餐飲股長",
    "avatar": "https://secure.gravatar.com/avatar/4dbbcd7b93f90eb9dc3a3e8df3610639?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/3/",
    "user": "https://staff.sitcon.org/api/users/6/",
    "display_name": "蒼時弦也",
    "bio": "活跳跳的蒼時呦～",
    "title": "文創組長",
    "avatar": "https://secure.gravatar.com/avatar/888339de9e7a88688b6acb30d33e66cd?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/54/",
    "user": "https://staff.sitcon.org/api/users/54/",
    "display_name": "雨夜",
    "bio": "kira_forever0205",
    "title": "場務組紀錄股員",
    "avatar": "https://secure.gravatar.com/avatar/350f5c20d8f15becca7e5ba1606ea58f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/57/",
    "user": "https://staff.sitcon.org/api/users/57/",
    "display_name": "CJOKER",
    "bio": "",
    "title": "行銷組暨設備股長",
    "avatar": "https://secure.gravatar.com/avatar/172b24a40afb3616ad9ed212f2a7c347?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/47/",
    "user": "https://staff.sitcon.org/api/users/47/",
    "display_name": "蛋糕",
    "bio": "",
    "title": "場務組門機股長",
    "avatar": "https://secure.gravatar.com/avatar/9a46bd224238c7e422ff8b2e0ac9a834?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/61/",
    "user": "https://staff.sitcon.org/api/users/61/",
    "display_name": "洋蔥",
    "bio": "Hi",
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/b40d5812a498b1a997874b14486f71f3?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/49/",
    "user": "https://staff.sitcon.org/api/users/49/",
    "display_name": "湘苓",
    "bio": "湘苓",
    "title": "場務組報到股員",
    "avatar": "https://secure.gravatar.com/avatar/1540ef9d5f16a783c25bdfa33a537d63?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/46/",
    "user": "https://staff.sitcon.org/api/users/46/",
    "display_name": "Fish福",
    "bio": "Fish福",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/74dcbe6cf1c08a5711df7dcaeaabba1e?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/48/",
    "user": "https://staff.sitcon.org/api/users/48/",
    "display_name": "糖萱",
    "bio": "糖萱",
    "title": "場務組報到股員",
    "avatar": "https://secure.gravatar.com/avatar/8de1fcecfb95061dcd76395ab99ad9df?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/8/",
    "user": "https://staff.sitcon.org/api/users/9/",
    "display_name": "Oscar",
    "bio": "",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/c7fc9eee61d15190efcddf8e5bcaabeb?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/32/",
    "user": "https://staff.sitcon.org/api/users/32/",
    "display_name": "FrankWu",
    "bio": "FrankWu",
    "title": "線路組員",
    "avatar": "https://secure.gravatar.com/avatar/240e508e56aa36c32fcffadeff0a9ee3?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/59/",
    "user": "https://staff.sitcon.org/api/users/59/",
    "display_name": "Muka",
    "bio": "",
    "title": "文創組動態紀錄",
    "avatar": "https://secure.gravatar.com/avatar/f63aa47fa7ccb623c7576b69f8a98fd8?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/13/",
    "user": "https://staff.sitcon.org/api/users/13/",
    "display_name": "Joe Angel",
    "bio": "",
    "title": "行銷組員",
    "avatar": "/users/joeangel/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/77/",
    "user": "https://staff.sitcon.org/api/users/112/",
    "display_name": "EAT",
    "bio": "哈囉你好我是EAT,愛好程式語言、資訊安全,想要變得更強,更厲害",
    "title": "場務組門機股員",
    "avatar": "/users/dyano/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/102/",
    "user": "https://staff.sitcon.org/api/users/139/",
    "display_name": "colin",
    "bio": "成大電機系大四，原本是只會唸書、考試的乖學生，到了大四卻被幾個老師帶壞，開始萌起了當MAKER的念頭。雖然只會做簡單的東西，但也希望這些簡單的東西可以為世界帶來一點改變。",
    "title": "投稿講者",
    "avatar": "/users/colin8930/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/76/",
    "user": "https://staff.sitcon.org/api/users/111/",
    "display_name": "浪打(0x1A3BDA)",
    "bio": "目前與同學在主持成大C4Labs社群與HackerSpace，熱愛DIY、Hacking和Coding，保持甚麼都可以自幹的態度。多數時間參與軟硬整合計畫，鑽研ARM相關技術，此外也會寫Web和一般應用程式，對於虛擬化與伺服器技術也有認識。有幸的話可以來交流喔。",
    "title": "投稿講者",
    "avatar": "/users/sonicyang/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/105/",
    "user": "https://staff.sitcon.org/api/users/142/",
    "display_name": "AJ",
    "bio": "目前在唸博士班，年級不方便透漏。平常喜歡參與社群活動，目前有在參與MOSUT、若渴計畫有空大家一起來交流。而秉持著Hacker精神來SITCON分享與學習。",
    "title": "投稿講者",
    "avatar": "/users/ajblane0612/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/103/",
    "user": "https://staff.sitcon.org/api/users/140/",
    "display_name": "民2",
    "bio": "清大資工系大一。自從高中一年級拿到一支爛智慧手機之後，就跳入研究 Android 系統的無底坑裡。研究的領域還有：IPC, Event Programming 以及如何泡出香醇的巧克力牛奶。",
    "title": "投稿講者",
    "avatar": "/users/mshockwave/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/92/",
    "user": "https://staff.sitcon.org/api/users/129/",
    "display_name": "LegBone",
    "bio": "魯腿骨Q_Q",
    "title": "投稿講者",
    "avatar": "/users/cowby123/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/89/",
    "user": "https://staff.sitcon.org/api/users/126/",
    "display_name": "Dylandy",
    "bio": "台科資管所准菸酒生，目前在 Railsfun Ruby 教學社群擔任助教",
    "title": "投稿講者",
    "avatar": "/users/dylandy/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/93/",
    "user": "https://staff.sitcon.org/api/users/130/",
    "display_name": "Tony Yip",
    "bio": "香港高中生，數學人，自修資訊科技，主攻網頁(不分前，後端)，因自修的材料都是開源的軟件和語言而進入開源大世界，並於今年開始了SITCON x HK。為本年SITCON x HK 的主要成員，現時主要替學校做網頁維護。",
    "title": "投稿講者",
    "avatar": "/users/tonyhhyip/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/88/",
    "user": "https://staff.sitcon.org/api/users/125/",
    "display_name": "Orin",
    "bio": "orin 是一個喜歡寫小程式、瞭解新技術的大學生。對網路、Mozilla、Open Web 及 Open Source 相關都有興趣，I (heart) Open！",
    "title": "投稿講者",
    "avatar": "/users/orin/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/5/",
    "user": "https://staff.sitcon.org/api/users/3/",
    "display_name": "PN Wu (小平)",
    "bio": "國立勤益科技大學資訊工程學士，Unity3D Game Design Community (UGDC) Founder，不離不棄使用Java四年以上，研討會社群餐飲組志工固定班底。目前任職交大計中軟體測試工讀生。",
    "title": "場務組餐飲股員",
    "avatar": "/users/PingNote.Wu/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/108/",
    "user": "https://staff.sitcon.org/api/users/145/",
    "display_name": "Allen Chou",
    "bio": "一個普普通通的國中生兼技術宅，熱愛程式的世界，平時喜歡寫寫網站，研究各種新技術，每天膩在 0 與 1 中無法自拔，除了 Coding 以外無所事事。",
    "title": "投稿講者",
    "avatar": "/users/s3131212/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/109/",
    "user": "https://staff.sitcon.org/api/users/146/",
    "display_name": "和風信使",
    "bio": "目前任職於天匠數位娛樂有限公司，從高中因為社團接觸 ACM，然後大學開始自學 PHP。主要是後端工程師，前端略有涉略，美工超級不擅長，請大家多多指教。",
    "title": "投稿講者",
    "avatar": "/users/taichunmin/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/124/",
    "user": "https://staff.sitcon.org/api/users/162/",
    "display_name": "shunyi",
    "bio": "#NCTUCS #Git #Python #Vim #ArchLinux #FreeSoftware #Security #Music #Tech",
    "title": "投稿講者",
    "avatar": "/users/shunyi/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/112/",
    "user": "https://staff.sitcon.org/api/users/150/",
    "display_name": "游策",
    "bio": "None",
    "title": "場務組設備股員",
    "avatar": "https://secure.gravatar.com/avatar/f0134cb6fabdbb67e6231aa9ca2434cf?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/119/",
    "user": "https://staff.sitcon.org/api/users/157/",
    "display_name": "克莉絲汀",
    "bio": "聽說「喵」一聲，就能讓人群瞬間安靜，喜歡甜食、喜歡海鮮、喜歡焗烤。\r\n據說熱愛討論價值與思想，很不像電機女生。\r\n常不滿足於現況，喜歡衝撞體制，對於「優化」莫名執著。\r\n「總是還能更好」，她始終是這樣相信的。",
    "title": "投稿講者",
    "avatar": "/users/christinesfkao/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/123/",
    "user": "https://staff.sitcon.org/api/users/161/",
    "display_name": "Jennifer",
    "bio": "Python初心者",
    "title": "投稿講者",
    "avatar": "/users/sanomaki/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/17/",
    "user": "https://staff.sitcon.org/api/users/17/",
    "display_name": "Pellaeon",
    "bio": "交通大學三年級，平時出沒於交作業大學校計中，和在附中時一樣成天在機器堆當中打滾，儼然成為正業。\r\n\r\n擔任 SITCON 議程組長，並籌辦新竹定期聚。\r\n\r\n與夥伴開創鳳梨酥計畫，協助 FreeBSD 運行於 OpenStack 環境中。\r\n\r\n參與 ownCloud 計畫，並因此去柏林走了一回。",
    "title": "議程組長",
    "avatar": "https://secure.gravatar.com/avatar/0ca63b7f266ea54fde36a84f46e267b5?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/117/",
    "user": "https://staff.sitcon.org/api/users/155/",
    "display_name": "Maeglin",
    "bio": "喜歡coding的書卷哥，人肉compiler/interpreter，OO架構狂。喜歡潛入和建構電腦裡的層層抽象。不喜歡遇到很多蟑螂(註解)。",
    "title": "投稿講者",
    "avatar": "/users/maeglin89273%40gmail.com/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/115/",
    "user": "https://staff.sitcon.org/api/users/153/",
    "display_name": "ZAL",
    "bio": "現任TDOHacker文書長，\r\n對資安充滿憧憬與興趣的小小菜鳥，\r\n期待資訊安全教育能在台灣遍地開花。",
    "title": "投稿講者",
    "avatar": "/users/zal/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/126/",
    "user": "https://staff.sitcon.org/api/users/164/",
    "display_name": "Arbiter",
    "bio": "臺灣大學資訊系學生。\r\n有興趣的領域包含機器學習、資訊安全、以及認知神經科學。\r\n熱愛各種精妙的數學、以及運用機器學習解決不同問題。",
    "title": "投稿講者",
    "avatar": "/users/arbiter/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/111/",
    "user": "https://staff.sitcon.org/api/users/149/",
    "display_name": "雪人",
    "bio": "雪人",
    "title": "場務組紀錄股員",
    "avatar": "https://secure.gravatar.com/avatar/6f27f89ab8a3b46802f4ae43238c3f47?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/110/",
    "user": "https://staff.sitcon.org/api/users/147/",
    "display_name": "showay",
    "bio": "showay",
    "title": "場務組紀錄股員",
    "avatar": "https://secure.gravatar.com/avatar/1f7d10c31d6890e4aec6d37f83e5687a?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/121/",
    "user": "https://staff.sitcon.org/api/users/159/",
    "display_name": "L1o",
    "bio": "目前於VulReport擔任見習生，歡迎投稿各項資安弱點至VulReport唷",
    "title": "投稿講者",
    "avatar": "/users/m0125006/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/118/",
    "user": "https://staff.sitcon.org/api/users/156/",
    "display_name": "翔子",
    "bio": "翔子，目前就讀112資管系二年級，同時擔任台大開源社副社長，興趣是寫有趣的程式，還有和開源社的夥伴們一起「開別人的源」！！希望自己實作能力的培養能和書本所學相輔相成，以及在解決各種問題的同時獲得樂趣。",
    "title": "投稿講者",
    "avatar": "/users/shouko/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/132/",
    "user": "https://staff.sitcon.org/api/users/170/",
    "display_name": "庭瑋",
    "bio": "台南人",
    "title": "場務組紀錄股員",
    "avatar": "/users/m10303253/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/140/",
    "user": "https://staff.sitcon.org/api/users/178/",
    "display_name": "呂科",
    "bio": "呂科",
    "title": "場務組設備股員",
    "avatar": "https://secure.gravatar.com/avatar/921cb28fc1ce60949fdfee803bc8af33?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/136/",
    "user": "https://staff.sitcon.org/api/users/174/",
    "display_name": "小刀",
    "bio": "小刀",
    "title": "場務組紀錄股員",
    "avatar": "https://secure.gravatar.com/avatar/3ebd624d10bf6d72167eed9f52785dc1?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/138/",
    "user": "https://staff.sitcon.org/api/users/176/",
    "display_name": "王笑笑",
    "bio": "王笑笑",
    "title": "線路組員",
    "avatar": "https://secure.gravatar.com/avatar/f757867aeb4d314a72cd445f9176bf98?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/139/",
    "user": "https://staff.sitcon.org/api/users/177/",
    "display_name": "Starlition",
    "bio": "Starlition",
    "title": "線路組員",
    "avatar": "https://secure.gravatar.com/avatar/0dadd8212f8a7b01f7656afd5c9222d2?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/133/",
    "user": "https://staff.sitcon.org/api/users/171/",
    "display_name": "李懷",
    "bio": "李懷",
    "title": "場務組紀錄股員",
    "avatar": "/users/hwaitheman/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/131/",
    "user": "https://staff.sitcon.org/api/users/169/",
    "display_name": "小喵",
    "bio": "自小四開始接觸程式語言，國中與PHP邂逅從此愛不釋手！",
    "title": "場務組設備股員",
    "avatar": "https://secure.gravatar.com/avatar/c1d900a1e08ce312cbda2c6adb891da3?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/134/",
    "user": "https://staff.sitcon.org/api/users/172/",
    "display_name": "小捲",
    "bio": "小捲",
    "title": "場務組紀錄股員",
    "avatar": "https://secure.gravatar.com/avatar/a8656deee7698d26837515e9a6b48c53?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/135/",
    "user": "https://staff.sitcon.org/api/users/173/",
    "display_name": "阿葉",
    "bio": "我是阿葉:P",
    "title": "場務組紀錄股員",
    "avatar": "/users/ltt5566/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/60/",
    "user": "https://staff.sitcon.org/api/users/60/",
    "display_name": "PineApple",
    "bio": "浪漫的理論派，夢想是踏上學術的道路，為追上某個背影而持續學習著。\r\n在SCIS 2014發表過一篇研究，喜歡密碼、質數、論文、實驗室和學長，討厭不夠優秀的自己，相信資訊也能成為改變世界並帶來美好的力量。",
    "title": "行政組檔案兼票務",
    "avatar": "https://secure.gravatar.com/avatar/1c97945908ba32b8ca5014ad9f2eb6b1?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/142/",
    "user": "https://staff.sitcon.org/api/users/180/",
    "display_name": "Erickson",
    "bio": "Erickson",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/7bc81b728640a4917ec3b6625d16425e?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/155/",
    "user": "https://staff.sitcon.org/api/users/193/",
    "display_name": "攸",
    "bio": "",
    "title": "場務組報到股員",
    "avatar": "/users/judy820915/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/145/",
    "user": "https://staff.sitcon.org/api/users/183/",
    "display_name": "喬巴",
    "bio": "Hi，我是喬巴\r\n對於旅行、交通、攝影、資訊都很有興趣~",
    "title": "場務組門機股員",
    "avatar": "/users/andy810625/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/148/",
    "user": "https://staff.sitcon.org/api/users/186/",
    "display_name": "阿吉",
    "bio": "阿吉",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/4eb34bbe952f36c4b0014bf7ec40d08f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/66/",
    "user": "https://staff.sitcon.org/api/users/101/",
    "display_name": "Ruei",
    "bio": "",
    "title": "文創青年",
    "avatar": "https://secure.gravatar.com/avatar/5e67be1384ba8aa093350d096a08ac19?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/143/",
    "user": "https://staff.sitcon.org/api/users/181/",
    "display_name": "yumaj",
    "bio": "yumaj",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/8ebaecffb60cc66f2109f3332d799efe?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/144/",
    "user": "https://staff.sitcon.org/api/users/182/",
    "display_name": "花花",
    "bio": "花花",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/17150d018ff8e7bb7fcb8f67d22d9e20?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/141/",
    "user": "https://staff.sitcon.org/api/users/179/",
    "display_name": "簡訊",
    "bio": "簡訊",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/508f0c5a78b53a213fdd0740643d6d1f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/150/",
    "user": "https://staff.sitcon.org/api/users/188/",
    "display_name": "阿元",
    "bio": "阿元",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/1fd4a00caa742758f5670e2cd0494560?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/149/",
    "user": "https://staff.sitcon.org/api/users/187/",
    "display_name": "味噌",
    "bio": "味噌",
    "title": "場務組門機股員",
    "avatar": "/users/star935613/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/147/",
    "user": "https://staff.sitcon.org/api/users/185/",
    "display_name": "火文狼",
    "bio": "「你有沒有看到走失的小狼啊？」\r\n平凡無比的中二大學生一枚，現任逢甲大學黑客社第一任社長、台中二中電腦研習社社團指導老師，小時候因為手賤燒了CPU，因而踏入資訊坑，高中也就莫名的跌入SITCON坑，歡迎大家一起跳坑(咦?)。\r\n比較擅長的是C/C++/Java，最近在學Python、PHP、MySQL，歡迎一起來交流還有打遊戲！",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/1c05388d1845b2c376e57f858427845f?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/158/",
    "user": "https://staff.sitcon.org/api/users/196/",
    "display_name": "Neil_HD",
    "bio": "Neil_HD",
    "title": "場務組餐飲股員",
    "avatar": "https://secure.gravatar.com/avatar/ce1b8b569eecd56b4630d6248a84f2ea?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/152/",
    "user": "https://staff.sitcon.org/api/users/190/",
    "display_name": "VAIZ",
    "bio": "Vaiz",
    "title": "場務組餐飲股員",
    "avatar": "https://secure.gravatar.com/avatar/4a2277106ea83ce867f44165f8e715d9?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/14/",
    "user": "https://staff.sitcon.org/api/users/14/",
    "display_name": "影子",
    "bio": "每天都在努力生產文字的理工人 owo)/\r\n\r\n待學清單：Ruby、Java、PHP、JavaScript\r\n切磋清單：C、Python",
    "title": "行政組長",
    "avatar": "https://secure.gravatar.com/avatar/6e6bcadb0cf769a8d4f4c02a62c74295?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/146/",
    "user": "https://staff.sitcon.org/api/users/184/",
    "display_name": "阿貓",
    "bio": "淡江資工一年級，高雄人。\r\n嗨我叫阿貓. OAO\r\n愛CODING，也愛到處認識朋友，\r\n目前正不斷努力\r\n提升自己經驗還有能力ing\r\n\r\nFacebook Page:\r\nwww.Facebook.com/Jamie.realever09",
    "title": "場務組門機股員",
    "avatar": "/users/realever15/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/160/",
    "user": "https://staff.sitcon.org/api/users/198/",
    "display_name": "小耕",
    "bio": "小耕",
    "title": "線路組員",
    "avatar": "https://secure.gravatar.com/avatar/0cbc981c85761fdae0005bf21a133855?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/153/",
    "user": "https://staff.sitcon.org/api/users/191/",
    "display_name": "Wemy Ju",
    "bio": "Hi :)",
    "title": "場務組報到股員",
    "avatar": "https://secure.gravatar.com/avatar/c21a0db21ec9630ba123e90326ab5d42?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/159/",
    "user": "https://staff.sitcon.org/api/users/197/",
    "display_name": "Elvis",
    "bio": "Elvis",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/b79526cb397529020d6288917b68ab6a?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/154/",
    "user": "https://staff.sitcon.org/api/users/192/",
    "display_name": "路路克",
    "bio": "",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/502c424714dfc16567ed5e152091ab6c?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/156/",
    "user": "https://staff.sitcon.org/api/users/194/",
    "display_name": "CChi",
    "bio": "張霽",
    "title": "場務組門機股員",
    "avatar": "https://secure.gravatar.com/avatar/129ed5cf025cb1854fd3b274ebe86032?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/157/",
    "user": "https://staff.sitcon.org/api/users/195/",
    "display_name": "來貘",
    "bio": "嗨嗨 我是來貘",
    "title": "場務組報到股員",
    "avatar": "/users/patrick8589/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/151/",
    "user": "https://staff.sitcon.org/api/users/189/",
    "display_name": "葉子",
    "bio": "葉子",
    "title": "場務組門機股員",
    "avatar": "/users/jing838383/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/64/",
    "user": "https://staff.sitcon.org/api/users/64/",
    "display_name": "dv",
    "bio": "新竹宅大學生\r\n上大學後掉入巨大坑洞 (哇~哇~~哇~~~～～～)\r\n沒事玩玩 Linux\r\n後來不小心得了不用 Vim 就會死的病\r\n寫 Python 又不好好寫 不知道鑽到哪裡去了\r\n還莫名其妙獲得 Django 技能 ...\r\n後來突然被推進 SITCON Roboconf 坑\r\n最近在玩 RPython toolchain ...\r\n總之就是個技術宅\r\n長期與朋友在交大網路福利社社窩打滾",
    "title": "行政組研發",
    "avatar": "/users/wdv4758h/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/162/",
    "user": "https://staff.sitcon.org/api/users/200/",
    "display_name": "Kaede",
    "bio": "PTT水球發明人、駭客、創業家、背包客、發燒友",
    "title": "Keynote 講者",
    "avatar": "/users/kaede/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/163/",
    "user": "https://staff.sitcon.org/api/users/201/",
    "display_name": "Ｑ",
    "bio": "Ｑ",
    "title": "場務組設備股員",
    "avatar": "https://secure.gravatar.com/avatar/d87cf7ee454aca6a853bdccf5af2c694?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/170/",
    "user": "https://staff.sitcon.org/api/users/209/",
    "display_name": "阿軒",
    "bio": "阿軒",
    "title": "行政組社群股員",
    "avatar": "https://secure.gravatar.com/avatar/631e55e9cfd22941be895b1424c86c40?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/169/",
    "user": "https://staff.sitcon.org/api/users/207/",
    "display_name": "Either",
    "bio": "Either Wang 王譯德",
    "title": "行政組社群股員",
    "avatar": "https://secure.gravatar.com/avatar/9fd24b6d716cd729c59c136bc34839f9?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/165/",
    "user": "https://staff.sitcon.org/api/users/203/",
    "display_name": "GA",
    "bio": "GA",
    "title": "場務組設備股員",
    "avatar": "https://secure.gravatar.com/avatar/0bc58e0414b55a3008b2c92642e3ce70?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/83/",
    "user": "https://staff.sitcon.org/api/users/120/",
    "display_name": "郭峰瑞(Ray)",
    "bio": "十二年國教的第一屆白老鼠，目前棲息於新竹實驗高中。\r\n原本是個業餘的小黑黑，後改為專注於寫程式(C++/Python/PHP...)或幫同學修電腦之類的雜事，不過平時仍然以虐待學校電腦為樂。\r\n生活於有美食沙漠之稱的新竹卻喜歡吃好吃食物，所以同時也喜歡全台趴趴走。\r\n現在正致力於開發社群網站及創立荒廢已久的資訊社。",
    "title": "投稿講者",
    "avatar": "/users/1q1q1q1/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/167/",
    "user": "https://staff.sitcon.org/api/users/205/",
    "display_name": "佑佑",
    "bio": "佑佑",
    "title": "行政組社群股員",
    "avatar": "https://secure.gravatar.com/avatar/204d5a5fac8e7a22a06bde203969a51d?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/173/",
    "user": "https://staff.sitcon.org/api/users/212/",
    "display_name": "零夢（ZeroMu）",
    "bio": "ZeroMu ",
    "title": "行政組社群股員",
    "avatar": "/users/m85091081/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/164/",
    "user": "https://staff.sitcon.org/api/users/202/",
    "display_name": "Denny",
    "bio": "Denny",
    "title": "場務組門機股員",
    "avatar": "/users/denny1232/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/168/",
    "user": "https://staff.sitcon.org/api/users/206/",
    "display_name": "姿姿",
    "bio": "",
    "title": "行政組社群股員",
    "avatar": "/users/prince000502/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/171/",
    "user": "https://staff.sitcon.org/api/users/211/",
    "display_name": "張業永",
    "bio": "服務於中央大學計算機中心，負責校務行政E化及系統維運，近期與學生組成行動服務開發團隊，在校內推動Open API及Open Data，希望提供學生「自己的服務自己寫」的機會，並藉此蓄積創意動能，累積更傑出的實作能力。",
    "title": "座談會與談人",
    "avatar": "https://secure.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/172/",
    "user": "https://staff.sitcon.org/api/users/210/",
    "display_name": "黃育綸",
    "bio": "黃育綸教授任教於交通大學，專長為資訊安全與嵌入式系統，喜歡把玩新科技，常鼓勵同學活到老、玩到老、學到老。她思想開明，目前擔任Mozilla台灣分公司顧問與台灣開放式課程聯盟秘書長，努力將OPEN的想法推廣到國內產官學各界。",
    "title": "座談會與談人",
    "avatar": "https://secure.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/101/",
    "user": "https://staff.sitcon.org/api/users/138/",
    "display_name": "海豹",
    "bio": "海豹（Jasper Yu, 尤理衡），目前就讀於高雄美國學校，ummm，應該算是國中生吧，以玩 Minecraft玩出一堆神奇的紅石指令機關在網路上發跡，後來不小心踏進了SITCON 的 Camp，然後就分不開了OAO ，之後又掉進了其他資訊與程式社群的無底坑。\r\n",
    "title": "投稿講者",
    "avatar": "/users/seadog007/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/2/",
    "user": "https://staff.sitcon.org/api/users/2/",
    "display_name": "Denny Huang",
    "bio": "SITCON 發起人之一，2013 及 2014 年會總召，快要不能說自己是不務正業大學生了QAQ",
    "title": "行銷組黑黑",
    "avatar": "https://secure.gravatar.com/avatar/9c08215f31eb6005a25be6521bf47b0a?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/35/",
    "user": "https://staff.sitcon.org/api/users/35/",
    "display_name": "林旅強 Richard Lin",
    "bio": "林旅強 (Richard Lin)，網路暱稱 \"Legist_Qiang\"。\r\n* 一個相信開放 / 自由 / 共享 / 創新可以讓人類變的更好的人類\r\n* 以 Open Source Evangelist 作為志業，擔任開源在校園及社群之推廣工作，特別重視開源在資訊教育的應用與實踐\r\n* GitCafe.com 市場總監 (2014- )\r\n* SITCON 顧問 (2013- )\r\n* 中研院資創中心 OSSF 校園暨社群推廣經理 (2010-14)",
    "title": "顧問",
    "avatar": "https://secure.gravatar.com/avatar/9e0b002ffe27dbdfb272e8fd1377bd35?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/56/",
    "user": "https://staff.sitcon.org/api/users/56/",
    "display_name": "Inndy",
    "bio": "#Inndy #118 #CSIE #Pythoneer #Vim #ReverseEngineerning",
    "title": "行政組人事",
    "avatar": "/users/Inndy/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/161/",
    "user": "https://staff.sitcon.org/api/users/199/",
    "display_name": "BS.Liang",
    "bio": "梁伯嵩為交通大學電子研究所博士，台灣大學EMBA。現於聯發科技服務。獲72項各國發明專利，中華民國十大傑出青年、經濟部傑出青年創新獎、中華民國資訊月傑出資訊人才、經濟部國家發明創作獎 (一金二銀)。",
    "title": "Keynote 講者",
    "avatar": "/users/bs.liang/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/4/",
    "user": "https://staff.sitcon.org/api/users/4/",
    "display_name": "ws育慈",
    "bio": "ws育慈，躲在花蓮養生中，目前已經在後山躲坑躲了兩年半。\r\n\r\nSITCON創始組長之一，時常會在各大Conf場務組出沒，聽說好像還是SITCON東區聯絡窗口？",
    "title": "議程組員",
    "avatar": "https://secure.gravatar.com/avatar/f398d578974e712f3e1e7106b3cafb61?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/175/",
    "user": "https://staff.sitcon.org/api/users/215/",
    "display_name": "慕容月",
    "bio": "資訊愛好者",
    "title": "投稿講者",
    "avatar": "/users/tnst93138/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/176/",
    "user": "https://staff.sitcon.org/api/users/216/",
    "display_name": "美美",
    "bio": "-",
    "title": "行銷組員",
    "avatar": "/users/fmtsun/photo/medium"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/174/",
    "user": "https://staff.sitcon.org/api/users/213/",
    "display_name": "水果",
    "bio": "水果",
    "title": "設備股工作人員",
    "avatar": "https://secure.gravatar.com/avatar/4dc79e05099ddf2feba7cced3c4c9200?d=retro"
  },
  {
    "url": "https://staff.sitcon.org/api/userprofiles/177/",
    "user": "https://staff.sitcon.org/api/users/217/",
    "display_name": "呆呆",
    "bio": "-",
    "title": "議程組員",
    "avatar": "/users/jachline28/photo/medium"
  }
]

RESTful API 的設計

那一般都怎麼設計呢？

以 staff.sitcon.org/api/userprofiles/9/ 為例

{
  "url": "https://staff.sitcon.org/api/userprofiles/9/",
  "user": "https://staff.sitcon.org/api/users/7/",
  "display_name": "Takeshi",
  "bio": null,
  "title": "議程組員",
  "avatar": "https://secure.gravatar.com/avatar/b721195e879c1ccab06a714f9d15b1da?d=retro"
}

RESTful API 的設計

那一般都怎麼設計呢？

好吧，這不是這次社課的重點

前置常識講完囉

希望都有理解我在共啥

之後實作用的範例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API Practice</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style type="text/css"></style>
</head>
<body>
  <header></header>
  <main>
    
    <footer></footer>
  </main>
  <script>
    $(document).ready(function() {
        // TODO
    });
  </script>
</body>
</html>

實作：調用SITCON API

https://staff.sitcon.org/api/

範例：取所有工人頭貼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API Practice</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style type="text/css"></style>
</head>
<body>
  <header></header>
  <main>
    <h1 class="title">SITCON Staffs</h1>
    <p class="numbers"></p>
    <div class="thumbnail"></div>
    <footer></footer>
  </main>
  <script>
    $(document).ready(function() {
// https://staff.sitcon.org/api/userprofiles/
      $.get('https://staff.sitcon.org/api/userprofiles/', function(res) {
        $('.numbers').text("總共有 " + res.length + " 工作人員");
        res.forEach(function (element, idx) {
          $(".thumbnail").append("<img src='" + element.avatar + "' />");
        })
      });
    });
  </script>
</body>
</html>

實作：調用天氣 API

https://developer.yahoo.com/weather/

範例：取所台北天氣

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API Practice</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style type="text/css"></style>
</head>
<body>
  <header></header>
  <main>
    <h1 class="title">Yahoo Weather</h1>
    <p class="description"></p>
    <img src="" alt="Loading...">
    <div class="item"></div>
    <footer></footer>
  </main>
  <script>
    $(document).ready(function() {
// https://developer.yahoo.com/yql/console/?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys#h=select+*+from+weather.forecast+where+woeid+in+(select+woeid+from+geo.places(1)+where+text%3D%22taipei%2C+tw%22)
      $.get('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22taipei%2C%20tw%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(res) {
        $('.title').text(res.query.results.channel.title);
        $('.description').text(res.query.results.channel.description);
        $('img').attr('src', res.query.results.channel.image.url);
        $('.item').html(res.query.results.channel.item.description);
      });
    });
  </script>
</body>
</html>

實作：調用臉書 API

developers.facebook.com/tools/explorer

範例：取粉絲動態牆圖

<html>
  <head>
    <title>FB API Test</title>
    <style>
      .fansThumbnail img {
        transition: all .2s ease-in-out;
        border-radius: 2px;
        border: rgba(255, 255, 255, .1) groove;
        display: block;
        margin-left: auto;
        margin-right: auto
      }
    </style>
  </head>
  <body>
    <header></header>
    <main>
      <a href="javascript:" onclick="showMe()">show my data</a>
      <a href="javascript:" onclick="showFansThumbnail()">show fans pic.</a>
      <h1 class="id"></h1>
      <img class="img-thumbnail"></img>
      <h1 class="fansName"></h1>
      <div class="fansThumbnail"></div>
      <footer style="margin-top: 5px;">
        <div
          class="fb-like"
          data-share="true"
          data-width="450"
          data-show-faces="true">
        </div>
      </footer>
    </main>
    <script>
      function showFansThumbnail() {
        FB.api('/259307454182390', function(res) {
          console.log(res);
          document.querySelector('.fansName').textContent = res.name;

        });
        // 259307454182390/albums
        // 269004969879305/photos
        FB.api('/259307454182390/albums', function(res) {
          console.log(res);
          FB.api('/' + res.data[0].id + '/photos', function(res) {
            console.log(res);
            res.data.forEach(function (element, idx) {
              var img = document.createElement('img');
              img.setAttribute('src', element.source)
              document.querySelector('.fansThumbnail').appendChild(img);
            });
          });
        });
      }
      function showMe() {
        FB.api('/me', function(res) {
          console.log(res);
          var picture = 'http://graph.facebook.com/'+ res.id +'/picture?width=140&height=140';
          document.querySelector('.id').textContent = res.name;
          document.querySelector('.img-thumbnail').setAttribute('src', picture);
        });
      }

      window.fbAsyncInit = function() {
        FB.init({
        appId      : '350280875077365',
        xfbml      : true,
        version    : 'v2.3'
        });
        init();
      };

      (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

      function init() {
        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
            console.log('login');
          }
          else {
            FB.login(function(response) {
              if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {
                  console.log('Good to see you, ' + response.name + '.');
                });
              } else {
                console.log('User cancelled login or did not fully authorize.');
              }
            }, {
                scope: 'publish_actions', 
                return_scopes: true
            });
          }
        });
      }
    </script>
  </body>
</html>

Demo 下載

https://github.com/knowlet/api-demo

http://knowlet.github.io/api-demo/sitcon.html

http://knowlet.github.io/api-demo/yahoo.html

http://knowlet.github.io/api-demo/facebook.html

參考資料

http://www.slideshare.net/AmigoChan/restful-api-design
http://www.slideshare.net/poga/rest-33854927
http://zh.wikipedia.org/zh-tw/REST
http://api.jquery.com/
https://staff.sitcon.org/api/
https://developers.facebook.com/
https://developer.yahoo.com/weather/

Web API 簡介

By Albert Hsieh

Web API 簡介

簡單介紹 API 以及 Web API 還有如何調用他們

1,657

Albert Hsieh

knowlet.me

API 是蝦米？能吃！？

好啦我知道是爛梗

可是我不是大樹我沒梗 QQ

所以 API 是什麼？

Apple pie icecream?

所以 API 是什麼？

所以 API 是什麼？

以 local 的程式來說

那 REST 又是什麼？

REST 是設計風格而不是標準

為什麼要用 API

曾經有人說過一句話

為什麼要用 API

為什麼要用 API

所以說 API 設計到底有哪些優點

傳統的網頁設計

按下送出後會發生什麼事？

傳統的網頁設計

登入失敗會發生什麼事？

傳統的網頁設計

API 的網頁設計

按下送出後會發生什麼事？

API 的網頁設計

登入失敗會發生什麼事？

API 的網頁設計

RESTful API 的設計

那一般都怎麼設計呢？

RESTful API 的設計

那一般都怎麼設計呢？

RESTful API 的設計

那一般都怎麼設計呢？

RESTful API 的設計

那一般都怎麼設計呢？

前置常識講完囉

希望都有理解我在共啥

之後實作用的範例

實作：調用SITCON API

https://staff.sitcon.org/api/

範例：取所有工人頭貼

實作：調用天氣 API

https://developer.yahoo.com/weather/

範例：取所台北天氣

實作：調用臉書 API

developers.facebook.com/tools/explorer

範例：取粉絲動態牆圖

Demo 下載

https://github.com/knowlet/api-demo

參考資料

Web API 簡介

More from Albert Hsieh