標籤: 網頁前端

轉自：林品翔 (tonilin)

http://blog.roachking.net/blog/2012/11/07/postman-restful-client/

POSTMAN in Google APP Store

因為工作的關係，常常寫一些 API 供 APP 使用。
以前傻傻的，每次測試的時候都會自己刻一個 HTML 的表單，一個一個填入 input ，接著送出。 後來覺得這樣太慢了，就用 JavaScript 寫了一個程式來送， 可是效率都沒有很好，尤其是需要反覆測試更改條件的時候。

之後在同事的推薦下用了 Burpsuite ，而這套軟體確實是可以做到沒錯，但是讓人有一種「殺雞焉用牛刀」的感覺。 因此又陸續找了幾個模擬 HTTP requests 的工具，卻都不甚理想。最近終於找到一套滿意的，也就是今天要介紹的 Postman。

Postman 是一個 Chrome 的 Extension，安裝以後可以在分頁欄裡面看到 Postman 的 Icon：

Postman 的主要功能

模擬各種 HTTP requests：從常用的 GET、POST 到 RESTful 的 PUT 、 DELETE …等等。 甚至還可以送出檔案、送出額外的 header。

Collection 功能：Collection 是 requests的集合，在做完單一個測試的時候， 你可以把這次的 request 存到特定的 Collection 裡面，如此一來，下次要測試的時候，就不需要重新輸入。
養成習慣以後，網站 API 的每個方法都寫好存進去，以後在開發的時候，就可以迅速得看到結果。 而 Collection 還可以 Import 或是 Share 出來，讓團隊裡面的其他人，可以一起使用你建立起來的 Collection。

整理過後的回傳結果：一般在用其他工具來測試的時候，回傳的東西通常都是純文字的 raw， 但如果是 JSON ，就是塞成一整行的 JSON。這會造成閱讀時的障礙 ，而 Postman 可以針對回傳資料的格式自動美化。 JSON、 XML 或是 HTML 都會整理成人類可以閱讀的型態。

設定環境：Postman 可以自由新增 Environment，一般我們可能會有多種環境， development 、 staging 或 local， 而這幾種環境的 request URL 也各不相同。新增 Environment，可以讓我們設定一些環境變數，使得切換環境測試的時候， 不用重寫 request。

小測試

我們丟一個 Request 到 Google Geocoding API ，讓大家看看實際的執行結果：

可以 一目瞭然地看到，送出什麼要求、得到什麼回應， 而 JSON 也整理好，且上好了顏色。
小結

自從用了 Postman 很滿意以後，也陸續推薦給其他同事，現在整個公司都在用 Postman 了！

如果你的專案也常常在處理 request，而且苦無測試工具，你可以試試 Postman。

[……]

閱讀更多

http://spyrestudios.com/30-progress-illustrations-for-icons-logos/[……]

閱讀更多

http://www.techbang.com/posts/3928-moving-a-label-is-working-on-mobile-version-of-website
http://www.minwt.com/mobilewebdesign/2529.html
http://www.ibest.com.tw/news/ins.php?index_id=68&index_m_id=0[……]

閱讀更多

<select>
<option value=”004″>004 – 臺灣銀行</option>
<option value=”005″>005 – 土地銀行</option>
<option value=”006″>006 – 合作商銀</option>
<option value=”007″>007 – 第一銀行</option>
<option value=”008″>008 – 華南銀行</option>
<option value=”009″>009 – 彰化銀行</option>
<option value=”011″>011 – 上海商業儲蓄銀行</option>
<option value=”012″>012 – 台北富邦銀行</option>
<option value=”013″>013 – 國泰世華銀行</option>
<option value=”016″>016 – 高雄銀行</option>
<option value=”017″>017 – 兆豐國際商業銀行</option>
<option value=”018″>018 – 農業金庫</option>
<option value=”021″>021 – 花旗(台灣)商業銀行</option>
<option value=”025″>025 – 首都銀行</option>
<option value=”039″>039 – 澳商澳盛銀行</option>
<option value=”040″>040 – 中華開發工業銀行</option>
<option value=”050″>050 – 臺灣企銀</option>
<option value=”052″>052 – 渣打國際商業銀行</option>
<option value=”053″>053 – 台中商業銀行</option>
<option value=”054″>054 – 京城商業銀行</option>
<option value=”072″>072 – 德意志銀行</option>
<option value=”075″>075 – 東亞銀行</option>
<option value=”081″>081 – 匯豐(台灣)商業銀行</option>
<option value=”085″>085 – 新加坡商新加坡華僑銀行</option>
<option value=”101″>101 – 大台北銀行</option>
<option value=”102″>102 – 華泰銀行</option>
<option value=”103″>103 – 臺灣新光商銀</option>
<option value=”104″>104 – 台北五信</option>
<option value=”106″>106 – 台北九信</option>
<option value=”108″>108 – 陽信商業銀行</option>
<option value=”114″>114 – 基隆一信</option>
<option value=”115″>115 – 基隆二信</option>
<option value=”118″>118 – 板信商業銀行</option>
<option value=”119″>119 – 淡水一信</option>
<option value=”120″>120 – 淡水信合社</option>
<option value=”124″>124 – 宜蘭信合社</option>
<option value=”127″>127 – 桃園信合社</option>
<option value=”130″>130 – 新竹一信</option>
<option value=”132″>132 – 新竹三信</option>
<option value=”146″>146 – 台中二信</option>
<option value=”147″>147 – 三信商業銀行</option>
<option value=”158″>158 – 彰化一信</option>
<option value=”161″>161 – 彰化五信</option>
<option value=”162″>162 – 彰化六信</option>
<option value=”163″>163 – 彰化十信</option>
<option value=”165″>165 – 鹿港信合社</option>
<option value=”178″>178 – 嘉義三信</option>
<option value=”179″>179 – 嘉義四信</option>
<option value=”188″>188 – 台南三信</option>
<option value=”204″>204 – 高雄三信</option>
<option value=”215″>215 – 花蓮一信</option>
<option value=”216″>216 – 花蓮二信</option>
<option value=”222″>222 – 澎湖一信</option>
<option value=”223″>223 – 澎湖二信</option>
<option value=”224″>224 – 金門信合社</option>
<option value=”512″>512 – 雲林區漁會</option>
<option value=”515″>515 – 嘉義區漁會</option>
<option value=”517″>517 – 南市區漁會</option>
<option value=”518″>518 – 南縣區漁會</option>
<option value=”520″>520 – 小港區漁會；高雄區漁會</option>
<option value=”521″>521 – 彌陀區漁會；永安區漁會；興達港區漁會；林園區漁會</option>
<option value=”523″>523 – 東港漁會；琉球區漁會；林邊區漁會</option>
<option value=”524″>524 – 新港區漁會</option>
<option value=”525″>525 – 澎湖區漁會</option>
<option value=”605″>605 – 高雄市農會</option>
<option value=”612″>612 – 豐原市農會；神岡鄉農會</option>
<option value=”613″>613 – 名間農會</option>
<option value=”614″>614 – 彰化地區農會</option>
<option value=”616″>616 – 雲林地區農會</option>
<option value=”617″>617 – 嘉義地區農會</option>
<option value=”618″>618 – 台南地區農會</option>
<option value=”619″>619 – 高雄地區農會</option>
<option value=”620″>620 – 屏東地區農會</option>
<option value=”621″>621 – 花蓮地區農會</option>
<option value=”622″>622 – 台東地區農會</option>
<option value=”624″>624 – 澎湖農會</option>
<option value=”625″>625 – 台中市農會</option>
<option value=”627″>627 – 連江縣農會</option>
<option value=”700″>700 – 中華郵政</option>
<option value=”803″>803 – 聯邦商業銀行</option>
<option value=”805″>805 – 遠東銀行</option>
<option value=”806″>806 – 元大銀行</option>
<option value=”807″>807 – 永豐銀行</option>
<option value=”808″>808 – 玉山銀行</option>
<option value=”809″>809 – 萬泰銀行</option>
<option value=”810″>810 – 星展銀行</option>
<option value=”812″>812 – 台新銀行</option>
<option value=”814″>814 – 大眾銀行</option>
<option value=”815″>815 – 日盛銀行</option>
<option value=”816″>816 – 安泰銀行</option>
<option value=”822″>822 – 中國信託</option>
<option value=”901″>901 – 大里市農會</option>
<option value=”903″>903 – 汐止農會</option>
<option value=”904″>904 – 新莊農會</option>
<option value=”910″>910 – 財團法人農漁會聯合資訊中心</option&g[……]

閱讀更多

http://techorange.com/2014/03/27/best-resources-to-learn-code/[……]

閱讀更多

http://www.w3school.com.cn/
http://www.w3schools.com/
http://www.1keydata.com/
http://www.dugukeji.com/mb/divcssjiaocheng/17323.html
http://www.mukispace.com/prepare-for-learning-css[……]

閱讀更多