丸匠筆記

Google I/O 2014 開發者大會公佈了最新的設計理念出了一份指南手冊，只單純看圖片就已經感受到強烈的設計風格，後來同事提出了一個想法，想要把指南手冊翻成非官方版的繁體中文版，由於海倫是參與翻譯的一員，在這邊也分享給大家做參考喔！

就這樣我跟同事還有同事的朋友，踏上了 不歸路 翻譯這條路，就開始協同翻譯了幾篇，我主要都是在 components 的部分，其他就順便整理英文格式的備份檔。

請看翻譯的電子書：

http://wcc723.gitbooks.io/google_design_translate/

團結力量大

這電子書的出爐，拜大家努力翻譯所賜，小妹我也給予鞠躬致意，翻譯人員如下：

• Casper
• Charlene
• Frances
• Helen
• Mkdodos
• Tillonter Hsu
• Peter
• Xuan
• Xunyi
• 陳聖博

翻譯時還要一些工具的幫忙

我們看一下我翻譯這篇 Google Material Design 非官方正體中文電子書 時需要會哪些技能：

• 使用 git 提交、更新、分支
• 使用 github 提交總有個目的，放在託管空間能一目了然看編寫情形
• 使用 gitbook 在本地端查看轉譯後的電子書
• 使用 hackpad 追蹤翻譯進度
• 使用 markdown 編寫翻譯

你可能想說，翻個譯要搞這麼多？哈～對！翻譯電子書可是用了不少技能於一身技術而成的，由於翻譯不是一個人完成，因此需要有更多的工具搭配管理來掌控，正好我也想說自己因為對上述的操作不太熟，透過這樣的邊做邊練，還可以增加自己的實戰經驗咧。

Material Design 是什麼？

老實講，為了加速翻譯件數都只專注在翻譯有沒有順暢，雖然翻譯過程加減看自己翻譯的章節在講些什麼，不過還是無法全面理解每個細節，翻譯完成之後我才真正完整閱讀每個設計理念的觀念是什麼。Material Design 是一種設計語言，就像學習程式就是學習一套語言一樣，每個程式都有它的規範去撰寫，設計從這次的 Google material design 的釋出，展現了一個設計風格。

雖然我自己不是做視覺端的設計師，但是透過這樣的翻譯，理解設計的原理與理念，在自己開發觀念或是在開發網頁的頁面呈現上，有一些些的想法與心得，還不賴呢！

還真頗有成就感 der

隨著翻譯篇數越來越完整的時候，真覺得許多翻譯的夥伴都好有熱誠在努力這件事情上，尤其是發起者 Casper ，假日也不得閒，繼續翻譯為了讓廣大的設計同好得到更有親切感的電子書。

真是該給翻譯的大夥們一個大力的掌聲鼓勵。

謝謝各位
這個翻譯完成了，繼續邁向下一個目標… Go~

今天介紹這套GitBook 是用 node.js 的 npm 管理工具搭建的一種建立電子書的套件，藉由這篇文章可以清楚的瞭解如何建立電子書

安裝

首先是安裝的部分，安裝之前請先確定 npm 這個管理工具有被安裝起來

1

$sudo npm install -g gitbook

接著，先在某一個目錄夾裏建立一個電子書的檔案庫

1

$gitbook serve ./repository

像這樣子

在製作這個電子書，特別要注意的是請先建立 README.md 和 SUMMARY.md 這兩個文件，因為這兩個文件代表著電子書的架構導覽

• README.md >>> 代表這本電子書的簡介

• SUMMARY.md >>> 定義這本電子書的章節結構

實作該怎麼做

在我們定義好 readme.md, summary.md 之後呢，可以看到我在 SUMMARY.md 檔案，建立了四個連結，分別是：

• source/intro/first.md
• source/install/secode.md
• source/install/2-1.md
• source/install/2-2.md

我們可以利用以下的指令，讓 gitbook 找到 summary.md 所定義的章節結構去自動地去產生對應的檔案

1

$gitbook init

到建立 gitbook 的資料夾看，就可以看到自動建立 source 資料夾之外，在source 下層也建立 intro 及 install 這兩個資料夾，然後再進去看某個資料夾下後，可以發現 markdown 的空白檔案也已經自動建立起來，在這邊就可以隨心所欲去建置屬於自己的章節內容。

喔！等等，別忘了看看結果
內容寫好之後，建立一個靜態頁面，預設會開 port 4000 的網址

1

$gitbook serve

可依照指令指示，開啓 http://localhost:4000

看看樣子

這是首頁的樣子，呈現的首頁就能閱覽我們在 README.md 所寫的內容

自定義的第一章節，在頁面上有個左右兩邊的箭頭，可以點選後翻到下一個章節

自定義的第二章節

BTW,

Gitbook 支援多種檔案格式：

• 靜態網頁：這個是 Gitbook 預設的輸入格式
• PDF : 需要安裝 gitbook-pdf 套件
• eBook: 需要安裝 ebook-convert
• 單一 HTML 網頁，支援將內容輸出成一個單頁的 html (但我沒用過，不知道＠＠)
• JSON: 用在資料取得

ps. 在編寫 markdown 文件時，再存檔的時候會有 live reload 效果，即時更新頁面喔！酷耶～

今天介紹一個在 Chrome debug 的時候使用一個 console.table() 的方法除錯。一般我們都會用 console.log 或 console.debug 來看物件的狀況，今天就嘗試一個新的不一樣的吧

使用 console.log() 函數

在 script 裡，第 7 行～ 第 12 行，先定義一個陣列，裡面有 object ，其屬性包含 id, name，然後第 13 行建立一個 console.log(json); 的函數，輸出裡面 json 的資料。接著請開啓 chrome 瀏覽器然後把這個網頁 html 打開，接著在按 command + shift + c 會開啟開發人員管理工具 （喔對了，我環境是用 macbook，所以如果是其他系統的話可以按 ctrl + shift + c

看看 console.log() 輸出結果

這邊會看到用樹狀圖呈現一個 Array 物件呈現變數裡的值，裡面包含了四組資料，依序展開如下圖：

使用 console.table() 函數

將 log 改成 table 函數，直接看第 13 行…

看看 console.table() 輸出結果

下次就這樣用吧～ ：）

下載 MongoDB

我的環境是用 mac osx 10.9.4，到官方網站 http://www.mongodb.org/downloads 找到 Mac OX 64bit 區塊，下載 mongodb-osx-x86_64-2.6.4.tgz 檔案，接著我們用指令進行安裝，解壓縮 tgz 檔案

解壓縮之後，把它挪到 /usr/local/mongodb 資料夾

1
2
3

$cd ~/Download
$tar xzf mongodb-osx-x86_64-2.2.3.tgz
$sudo mv mongodb-osx-x86_64-2.2.3 /usr/local/mongodb

MongoDB 資料

預設時，資料會寫到 /data/db/ 資料夾，在這裏手動建立儲存位置，去建立 /data/db

1
2
3
4

$sudo mkdir -p /data/db
$whoami
 /User/Weiju
$sudo chown /User/Weiju /data/db

建立 ~/.bash_profile 參數設定環境變數

1
2
3
4
5

$cd ~
$pwd
/User/Weiju
$touch .bash_profile
$vim .bash_profile

編輯 .bash_profile 檔案

1
2

export MONGO_PATH=/usr/local/mongodb
export PATH=$PATH:$MONGO_PATH/bin

檢視版本

1

$mongo -version

預設之下，mongodb 安裝完之後，下一次開機又要重新啟動。在這邊設定一下自動啟動方法：

找到

1

$sudo vim /Library/LaunchDaemons/

新增 mongodb.plist，並且建立以下參數

載入系統排程

1
2

$sudo launchctl load /Library/LaunchDaemons/mongodb.plist
ps -ef | grep mongo

馬上來試看看

第一種：試試新增一筆資料

第二種：跑個廻圈＋寫入好了

good, got it.

有沒有使用 Excel 輸入資料後，想要把某一列的資料做不重複的篩選？若您剛好有這個疑問，來到這裡算是走對地方了～ 我們有很簡單的例子一步一步的說明

前提

不採取樞扭分析表，請利用函數實作

說明

今天有一個資料表欄位有「類型」、「數量」、「名稱」，需要做一些統計，並且在一般資料區塊下方，當有輸入時，必須同時同步計算以下兩項區域

1. 依照類型將名稱分類，表格呈現上方列為「類型」、左方為「名稱」
2. 取得不重複的「名稱」，計算各類型的名稱的總數

今天要介紹的是，如何將字串分割到不同的儲存格，也就是說當你今天遇到一個字串，但是字串裡面有兩個資訊想要各別放

比如以下字串：

1

common.delete=Delete

結果預計要像這樣

如果你有很多個像這樣的要把字串切割的話，這時候你還會用 Copy & Paste 的做法去貼到不同的欄位嗎？

以下用個簡單的資料當作例子，我想要將等於的左右兩邊，各別的放到不同的儲存格

1
2
3
4
5
6
7
8
9

common.delete=Delete
common.add=Create
common.modify=Edit
common.name=Name
common.change=Change
common.manage=Management
common.search=Search
btn.cancel=Cancel
btn.Submit=Submit

快速實作方法

第一步: 先將欄位選取起來

請先將資料擺在 A 欄位那邊，然後滑鼠將資料選取起來，如下圖所示：

第二步: 按下 [資料] > [資料剖析] 啟動 [資料剖析精靈]

接著他就會開資料剖析精靈，超簡單，三個小步驟而已
(步驟 3 之 1)：我們的目標是要分隔，所以選第一個，如果直接按完成的話，事實上跟我們需求不符，因為他會利用預設的 tab 區分隔，所以請繼續按下一步

(步驟 3 之 2) ：這邊我們要確定資料分隔的符號是什麼

(步驟 3 之 3)：最後可以看看預覽分割的結果，確定之後就按完成按鈕

結果: 一秒完成 !

本篇將介紹用野生柯P API來製作 api 的呼叫，但是api 網站已經失效，僅能提供概念說明。這是透過 node-rest-client 的套件製作

首先先建立一個 express web framework 框架，請在 terminal 上輸入：

1

$express -e nodejs-kp-albums-sample

接著按照只是安裝相依套件

1

$cd nodejs-kp-albums-sample && npm install

接著由於我們要使用到柯 p 官網提供的相簿 api ，在開發前我們需要安裝一個可以支援 restful api 的套件 node-rest-client，接著請在 terminal 輸入

1

$npm install node-rest-client —save

一切安裝完成之後，就開始來撰寫程式的部分，請先打開 app.js 檔案，在這邊我們要引用裝好的 node-rest-client 套件，將以下語法填入

1
2

var Client = require('node-rest-client').Client;
client = new Client();

先宣告 node-rest-client 之後，我們預計將相簿列表印在主首頁 (index)，可以在 app.js 裡面找到var routes = require(‘./routes/index’); 與 app.use(‘/‘, routes); 這一段，也就是說根目錄的位置會指引到 /routes/index.js 檔案裡面，接著就打開 /routes/index.js ，由於我們在 app.js 完成了宣告，在 index.js 撰寫如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, resp) {

    //取得 KP albums 相簿清單列表
     client.get("http://api.kptaipei.tw/v1/albums", { author: ‘xxx' }, function(data, res){
        var config = JSON.parse(data.toString());
        console.log(config.data);

        //將資料寫在 locals
        resp.locals.posts = config.data;

        var renderData = {
             title: '柯 p 野生 API',
             data: config.data
        };

        // 將取得到的 json 格式渲染到畫面上
        resp.render('index', renderData);
    });
});

module.exports = router;

可以看到用了 client.get 方法，其有三個參數，第一個參數請到 http://unlimited.kptaipei.tw/docs/#api-ch3 得到相簿清單的 api ：http://api.kptaipei.tw/v1/albums/ ，預期會知道 api 結果會是如下

第二參數由於本篇只做列表，就保持為空 {}，第三個參數就 function callback 操作，在取得 json 格式的資料之後，經過 json.parse 由字串轉換 json ，並且我們已知要抓 data 的陣列，透過物件 renderData 將資料存放，最後就將得到的資料渲染到畫面上 ，也就是 resp.render(‘index’, renderData);

接著到了 views 的部分，就請開啓 /views/index.ejs 檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%
         posts.forEach(function(post) {
              var thumb = post.thumbnails;
              var t_small = thumb.small_square;
    %>
          <img src='<%= t_small %>' alt='<%=post.title %>' />
    <% });%>
  </body>
</html>

在這邊我只需要顯示柯p相簿的小張圖，也就是 thumbnails.small_square ，由於已經轉成 json 格式，那麼就當做物件找到 thumbnails.small_square 位置，將取得到的圖片網址塞到 img tag 裡的 src 屬性。那麼，一切的一切準備好之後，就請執行應用程式吧！輸入：

1

$npm start

網站預設為 3000 port ，請開啓 localhost:3000，結果如下圖顯示

參考資料

https://www.npmjs.org/package/node-rest-client

npm 包管理器是 Node.js 的模組管理工具，npm 的包就像 java 的類別庫，將功能獨立封裝起來，目前已經有相當多的工具可以運用，因此首先我們看一下 npm 的指令有哪些，而 npm 的命令會與 package.json 這個檔案息息相關，是接下來會說明到的。

package.json

它是一種 CommonJS 規定用來描述包的文件，是一個包含 json 格式的說明文件，裡面可以定義相依的相關套件以及應用程式的資訊，我們從 http://wiki.commonjs.org/wiki/Packages/1.1 Wiki 網頁了解到，他基本可以定義 應用程式名稱、版本、描述、關鍵字、授權、貢獻者、維護者、腳本等其他，還有更令 Node.js 最重要的就相依套件將是會在開發過程中會經常遇到的，它是以套件名稱和版本號組成的。

你可能心想說這邊該不會要用手刻吧…答案是不全然！可以透過指令的指引可以將它完成基本操作。一開始請先建立一個資料夾 demo-nodejs ，然後在目錄裡面執行

1

$npm init

輸入完他所指示的資料之後，在資料夾裡面他就會自動產生 package.json 檔案，是不是很簡單方便呢？（對了，用 npm init 指令，當他指示到 version 的時候，務必要三階的版本號，也就是 x.x.x，否則會出錯呢！) 接著我們定義我們需要用到的相依套件，假定我們要安裝一個 socket.io 及 express 框架，這時候在 package.json 補上 dependencies 物件，像下圖的紅框處

然後，你可能又發出一個疑問，我如何知道個別的套件版本要寫哪一個版本？你可以採用

1

$npm info {套件名稱} version

來取得最新版本號

輸入完成之後存檔，這時候我們只是定義相依套件，但還沒有安裝，因此在 demo-nodejs 這個目錄下，輸入：

1

$npm install

指令來安裝這兩個套件，結果將會在這個目錄夾底下多了一個 node_module 資料夾，如下：

若需要移除套件的話，也相當容易

1

$npm uninstall socket.io

參考資料

1. https://www.npmjs.org/
2. http://wiki.commonjs.org/wiki/Packages/1.1
3. http://semver.org/lang/zh-TW/

程式準備要部署上線時，就會面臨到執行程式的方式，伺服器的管理，是不是能有一個運行 Node.js 程式，並且有個工具處理這件事情。
forever 可以作為保持運行的狀態，管理 Node.js 程式服務，在 forever 進程之下，建立子進程，執行啟動與停止的命令相當簡單。
更特別的是，經常我們在寫 Node.js 的時候，每次更動的檔案時都需要再重新執行啟動服務的指令 (例如：node app.js)，而這個工具是當每次更新程式的時候，它會自動重新啟動服務，更方便許多了呢！

這是官方的描述：（https://github.com/nodejitsu/forever）

A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).

安裝

1
2

// 一般建議加上 -g 將 forever 全域安裝
$[sudo] npm install forever -g

當然若你要在某個特定目錄下安裝也是可以

1
2

$cd /path/projects/abc
$[sudo] npm install forever

指令的幫助

可以透過以下指令列出說明

1

$forever —help

顯示所有運行的服務

1

$forever list

啟動

1

$forever start app.js

停止操作

1

$forever stopall

停止某一個程式專案

1

$forever stop app.js

實作一個簡單運用

我們先用 express 這個框架建一個簡單的網站

啟動程式

1

$forever start app.js

forever 列表清單

1

$forever list

可以看到紫色部分，就是在放 log file 的路徑

關閉進程

1

$forever stop app.js

今天我們使用 express 框架介紹一下 REST 路由規則，REST 是一種 http 協定的網路應用，http 提供了八種方法使用：

• OPTIONS：這個方法可使伺服器傳回該資源所支援的所有HTTP請求方法。用*來代替資源名稱，向Web伺服器傳送OPTIONS請求，可以測試伺服器功能是否正常運作。

• HEAD：與GET方法一樣，都是向伺服器發出指定資源的請求。只不過伺服器將不傳回資源的本文部份。它的好處在於，使用這個方法可以在不必傳輸全部內容的情況下，就可以獲取其中「關於該資源的資訊」（元資訊或稱元資料）。

• GET：向指定的資源發出「顯示」請求。使用GET方法應該只用在讀取資料，而不應當被用於產生「副作用」的操作中，例如在Web Application中。其中一個原因是GET可能會被網路蜘蛛等隨意存取。參見安全方法

• POST：向指定資源提交資料，請求伺服器進行處理（例如提交表單或者上傳檔案）。資料被包含在請求本文中。這個請求可能會建立新的資源或修改現有資源，或二者皆有。

• PUT：向指定資源位置上傳其最新內容。

• DELETE：請求伺服器刪除Request-URI所標識的資源。

• TRACE：回顯伺服器收到的請求，主要用於測試或診斷。

• CONNECT：HTTP/1.1協定中預留給能夠將連線改為管道方式的代理伺服器。通常用於SSL加密伺服器的連結（經由非加密的HTTP代理伺服器）

而 express 網頁框架也針對 http 請求方法設計路由的函數：

通常在設計 rest 時，常用的是 get (取得), post (新增), put (更新), delete (刪除)

參考資料

http://www.wikiwand.com/zh-tw/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE