Java is always EExcellent

ShopBack Engineering Blog

2018-02-05T16:59:00.001+08:00

Following is official Shopback Engineering Blog on Medium

Shopback Engineering Blog on Medium

Please follow it and I will publish some tech articles on irregular basis.

Thanks.

Certified Spark Developer

2015-08-10T14:55:00.001+08:00

Certified Spark Developer 是一張由 Databricks 提供的 Apache Spark 開發者的認證考試

關於 Certified Spark Developer 資料可以看這裡，另外這張認證是由 Oreilly 處理考試過程，詳細的考試資訊可以看這裡

建議考前幾天要注意電腦設備和環境是否符合要求，要詳細閱讀這份文件

在這裡分享一下我的考前準備

Learning Spark 要熟讀

我把 Learning Spark 從頭到尾讀了三遍，最後在考試之前再快速複習重點一次。

不過在最後一個章節 Machine Learning with MLlib 我花較少的時間，畢竟這要有點相關知識，讀起來才比較順

Scala 與 Python 基礎語法

在考前我有把 Scala 與 Python 的基本語法搞清楚，基本上迴圈操作，類別宣告與函式定義都需要了解

另外最重要的就是集合物件的操作必須要熟悉

我本身最熟 Java，所以花在 Scala 與 Python 比較多時間

程式實作

在準備考試之前已經有寫過一些 Spark 的程式了，考前一樣有寫一些關於 RDD 與 Spark SQL 的程式

但我比較著重在 Learning Spark 的第三章與第四章的程式實作，基本上每一個 RDD 的 operation 我都有寫過至少一遍

原則上不是去背這些 RDD，是觀察這些 RDD 的結果會是什麼，例如：

rdd1.union(rdd2) 的結果資料會不會重覆，rdd1.intersection(rdd2) 的資料是否會重覆等等的

比較複雜的是第四章，需要多花點時間去看這些 RDD 的結果會是怎樣。

另外 Java 有很多的 Interface，我也花了蠻多時間去背。

因為考試之前都沒找到過什麼考古題，在網路上也沒什麼經驗分享之類的

所以也不知道出題方向，不過對 Spark 有點認知的話，其實也猜得出來 RDD 絕對是重點

因此除了 RDD 熟讀之外，還是很扎實的讀完其他章節

以下來分享我考完的心得

在考試當中是非常嚴格的，原則上你是沒辦法作弊的....，也很難把考題拿出去，所以就憑本事拉！！

這次我的考試當中大概有 6 題左右是標準不用思考的送分題

其中這次程式題占了一半左右的篇幅，而這些程式中，以 Scala 與 Python 的語言為多數， Java 少得可憐

而程式題基本上大多是跟 RDD 和 Spark SQL 有關，並且題目絕對不是像書上那樣簡單的

所以當下真的花了很多時間在思考這些程式題，不過至少不致於困難到你算不出來，但就是要有耐心就是了

因為有不少題目本身包含了很長的程式外，連四個選項都是一長串程式......所以耐心與程式基礎很重要

基本上我認為你只要書讀得熟，RDD 與 Spark SQL 程式徹底搞懂就蠻有機會接近 Pass 了

另外除了這些程式題之外，也考了一些蠻進階的東西與一些觀念題，

如果有興趣的可以問我，不方便在網路上直接說題目　：）

下面這張照片是隔了一個多月之後才收到的證照

React.js - Stateless principal in react

2015-05-23T13:37:00.000+08:00

之前為了建立一個複雜的 react 和 flux 的大型應用，花了不少時間把很多關於 react 和 flux 的文章看過一遍

要整合 react 和 flux，並不是用了這兩樣東西就讓你的前端應用完好無缺

這篇先從 react 的角度來看前端元件的開發準則，之後有空再寫點我對 flux 更深入的見解

首先為什麼要用 react 來開發前端，因為前端的所有東西都是元件 (Everything is component)

這也是 react 專注的重點，讓你能夠容易快速的建構一個前端應用

所以當我們透過 react 開發並且把焦點關注在元件(Component)開發上時，有幾個原則是盡量要遵循的

Composable
Reusable
Maintainable
Testable

在 Facebook 還沒 open react.js 之前，我只認為 jQuery 是最容易做到上述四點的

雖然後續有很多前端的框架 Backbone, Angular, Ember 等等，它們的重點多半是在 MV* 身上

對於一個前端的元件開發而言，它們都並不是非常好用或是友善的。

所以當你在用 React.js 開發前端的時候，也須謹記上述四點，才能讓你用 react 的價值發揮到最大

而除了這四點之外，還有一點是相當重要的，就是 Stateless component

什麼是 Stateless component ?

簡單說就是元件盡量是無狀態的，它不需要處理資料或UI狀態的變化，只要接收資料並呈現就好

所謂的資料就是領域模型(domain model)的資料，例如 Product。這些資料多半是透過 Ajax 或是 RESTful 從後端獲得的。

至於 UI狀態，就是用來"記錄" UI 目前的狀態，比方說哪一個 tab 被選擇，或是哪一個 dialog 被打開等等。

就一個 Stateless 的設計而言，Composable 的元件是很重要的前提，一個 Composable 的結構會類似如下

在一個良好的 Composable 設計下，我們必須要把需要呈現的資料透過 Root 傳到底下的 component

而底下的 component 只需負責呈現並處理使用者的 action，所以只有 Root 需要 state，底下的只需要接收 props 的資料

這裡的 state 以及 props 就是 react.js 所提供的 state 以及 props

我們知道 react 的 state 是 mutable (可變)的，而 prop 則是 immutable (不可變)的

所以在掌握這個原則下，應該盡量在 Root 使用 state，Root 底下就只接收 prop 的資料並呈現

因此我們可以檢視一下我們的 React 設計，盡量避免以下的情況

也就是說盡可能避免在 Root 底下的 Components 擁有自己的 state，這會讓 Components 富有太多行為，進而更複雜

在一個正確的 Stateless component 設計下，與 flux 組合就更容易掌握

從上圖我們可以看到，Root 底下的 Components 只負責呈現資料，當有使用者的 action 時

不管這些 action 是改變 領域模型的資料或是 UI 狀態的資料，我們都將這些變動行為視為是 flux 中的 Action

透過 Action 到 Store 之後，由 Store 來負責處理這些模型或是UI狀態的資料

例如：使用者可能新增了一筆產品資料又或是他在 UI 上切換了一個 tab

當然可能會有人質疑為什麼連 UI 狀態這些資料也要 hold 在 Store 中

我是認為如果太多的 Component 都不能遵循 stateless 這原則的話

每個 Component 都會因為擁有 State 的情況下，讓該 Component 一定會有很多處理 State 的邏輯

畢竟 State 是 mutable，既然是 mutable，你就必須付出代價去處理它，所謂的代價

就是那些定義在 Component 內的邏輯處理，相對的它會讓你的 Component 不易維護也過於複雜

因此我是認為像類似哪個 tab 被選擇，或是 list 清單中哪個 item 被勾選，這類的 UI 狀態資料，是可以嘗試放到 Store 的

盡量將他們從 Component 的 State 抽離出來，讓 Component 盡量保持簡單的呈現邏輯就好

當然這是盡量並非一定，所以本篇的結論就像 React 官網所說的

Try to keep as many of your components as possible stateless.

React.js in es6

2015-05-22T15:09:00.000+08:00

React.js 在 v0.13.0 版之後開始支援 ES6 的語法，如果想學習 ES6 語法的人可以看一下這些教學

對於最新 ES6 的 React.js 寫法，一個最基本的範例就是建立一個 Component

React Component

以往 ES5 我們會利用類似如下的寫法來建立一個 Component

首先在 ES5 我們會用 require 來引入你需要的模組，再來利用 React.createClass 建立一個 Component

最後透過 module.exports 來 export 一個 Component

至於要如何用 ES6 的語法建立一個 React 的 Component 呢?　如下：

我們可以看到原本的 require 換成了 import {} from "" 而 module.exports 換成了 export default

最重要的是，利用了 ES6 定義的 class 來達到基本的 prototype-based 的 object oriented pattern

所以在 ES6 語法中我們就可以把一個 React 的 Component 透過 class 的定義並繼承 React.Component 來建立一個 Component 的類別

當然大多數 React 所定義的方法都沒有變動，包括 render, componentWillMount, componentDidMount...等等

Prop & PropTypes

接下來我們的 Component 建議最好要定義 props 的型態和預設值，React 會幫你驗證

如果有型態錯誤，會在 console 印出警告。在 ES5 的語法中，我們是這樣寫的

至於在 ES6 中，我們會這樣定義：

個人是認為 ES6 的語法透過 class 的定義方式會稍為簡單明瞭 :)

State

在 ES5 的寫法中，我們會定義 getInitialState 來初始化 Component 的 state 物件，如下所示：

至於在 ES6 的語法中，可以在 constructor (類似Java的建構子) 中透過 this.state 直接定義 state 的物件

Instance method

這裡所謂的 instance method，就是在描述 component 觸發事件 callback function 中，this 的問題，例如 click

這在 ES5 中是沒有這樣的問題的，例如：

但是在 ES6 的寫法中，我們必須在 callback function 後面加上 .bind(this)，否則 this 會是觸發事件的那個物件

也可以像以下的方式也是可行的：

結論

其實利用 ES6 來撰寫 React，改動老實說沒有很大，但你可以多加利用 ES6 的新語法來完成一些新的 JS 特性

並透過類別繼承的方式讓 Component 更能達到 reusable 以及 maintainable

另外值得一提的就是 mixin 在 ES6 的語法中並不支援，但是目前網路上有一些人貢獻一些方式可以達成

但這都不是官方所釋放出來的解決方案，所以這點需要多加考慮

至於要如何將 ES6 的語法轉譯成 ES5，你可以用 babel 或是 traceur 來完成

babel 的話，之前有寫過一個簡單的範例，可以參考>>範例<<

React.js - using Jest and Babel to test ES6 code

2015-04-19T20:13:00.002+08:00

本偏介紹一下如果你是用 ES6 的語法寫的 React.js 應用程式，如果利用 Jest 測試時要住意那些部份

原則上測試的過程不外乎 Jest 官網介紹的 >>here<<

如果你是用 ES6 語法進行開發的話，你需要注意的是利用 react-tools 作 transform 時需要指定你的 JS 語法是 ES6

設定方式就是透過 preprocessor.js 讓 react-tools 在 transform 的時候可以將 ES6 語法 enabled 起來

根據 react-tools 的官方介紹，如同上述的方式加入 harmony 並指定為 true 就可以了

此外我再額外介紹一種方式就是利用 babel 來進行 transform 的動作

babel 本身就可以對 ES6 的語法以及 JSX 的進行轉換，所以你也不用擔心 babel 不認得 React.js

透過 npm install babel --save-dev 安裝 babel 之後

修改你的 preprocessor.js，如下所示：

React.js - Bootstrap table

2015-04-12T19:31:00.003+08:00

I created a Bootstrap Table rebuilt for React.js, current version is 0.3.0.

Home page is here: React-bootstrap-table

You can visit Github on here: react-bootstrap-table

The features on react-bootstrap-table

Column align
Basic table style: striped, hover, condensed, border..
Scrolling
Table sort
Column format
Pagination
Row selection
Cell Edit

You can reference more examples on here.

In the future, I will provide more function on ReactBsTable, like table event or some change on table.

If you like it, give it a star on github, Thanks

----------------------------------------------------------------------------------

最近用了空閒時間寫了一個基於 React.js 的 Bootstrap table 元件

首頁在這邊: React-bootstrap-table

Github: react-bootstrap-table

ReactBsTable 支援基本的 Bootstrap table classes

例如： .table-striped, .table-hover, .table-condensed ... 等

另外也支援了欄位的排序(sort), 格式(format), 對齊(align), 分頁等

可以在這邊看到所有的範例： here

之後我也會繼續提供更多的功能以及事件

如果你喜歡的話，可以到GitHub react-bootstrap-table 給個 Star

我會更有動力繼續改善的，感謝!!!!

browserify 與 watchify 分享

2015-03-30T16:30:00.000+08:00

本篇來分享一下在 gulp 的建構環境中如何使用 browserify 以及 watchify

如果對 gulp 與 browserify 不熟的的建議要先學習一下，browserify 之前的文章都有提到過了

而 gulp 則是一個目前盛行於 javascript 的建構工具，相較於 Grunt 而言，實在是好用太多了 ^.^

至於為什麼要介紹 browserify 與 watchify，其目的在於希望能夠再開發的過程中

如果一有程式的變動，就能夠自動執行 browserify 建構的動作，基於這個因素就需要 watchify 的協助

對 gulp 有初步了解的開發者可能也知道 gulp 本身自帶有 gulp.watch 的功能

也是一個能夠自動監控檔案，當檔案發生變化時會自動執行開發者指定的函式，例如：

但 gulp.watch 的功能與 browserify 的整合比較困難，畢竟一個 javascript 的 dependency 是相當複雜的

如果利用 watchify 好處就是它只會 rebuild (重新建構) 有需要重新建構的程式

所以接下來就來分享一下，如何利用 browserify 與 watchify 來達成這樣子的一個目標

React.js - a flux example with ES6 and Babel

2015-03-25T20:23:00.003+08:00

這篇介紹一下用最新的 ECMAScript 6 的語法並搭配 Babel 來開發一個簡單的 react/flux 的程式

同樣這次的範例程式會放在 GitHub 上 >>在這裡<<

不知道 react/flux 的可以看我>>上一篇的教學<< 有寫一個簡單的 react/flux app

對 flux 有疑問或不清楚的可以 google 找一下資料，而我之前也有寫一篇對 flux 的>>心得分享<<

接下來回到主題，ECMAScript 6 以下都會簡稱 ES6，在2014確定了所有的新功能與語法

預定在今年 2015 6月左右會正式發佈，接下來瀏覽器會慢慢完全支援 ES6 的語法

所以這篇就用 ES6 來重寫一次 react/flux 的程式

雖然目前瀏覽器並沒有完全支援 ES6 的語法，不過我們可以透過 Babel 這個工具進行轉換

Babel 的原名叫做 6to5，也就是一個能夠將 ES6 轉換為 ES5 的工具，所以也不用擔心瀏覽器對 es6 的相容性問題了

至於為什麼要這麼快用 ES6 來開發程式？如果看過 ES6 的新功能之後，確實是蠻讓人期待的，之後有空再來介紹

另外也是因為有了 Babel 這類的工具，讓目前尚未完全支援 ES6 的情況下

可以開始專攻 ES6，等到之後 ES6 完全被瀏覽器支援後，你也不用考慮要重新寫程式了，因為你已經是在寫 ES6了

接下來這次的範例程式跟 >>React.js - react/flux 範例<< 的程式目的一樣，差別只是在於以下幾點

用 ES6 語法的新特性 Module 來取代取原本 react/flux 範例中使用的 require，而是用 import

用 ES6 最新的 class 特性來負責繼承，取代掉原本 react/flux 在 Store 中用的 object-assign

利用 Babel 對 JSX 與 React 的支援，讓你在 build (babelify) 的時候也能夠轉換 JSX 語法

另外也會用到一些比較零星的 ES6 語法，這裡就不再特別強調了

接下來就開始撰寫本次的範例，首先道專案根目錄下執行建立 package.json，內容如下

完成後執行以下指令安裝 react, flux, browserify 以及 babel(babelify)

接下來，因為程式邏輯都跟 >>React.js - react/flux 範例<< 一模一樣，只是用ES6再寫一次而已

當然建議你要對 ES6 的基本語法要有相當地認知會比較好

所以下面我就單純列出每支程式的內容

src/app.js

src/components/DemoApp.react.js

src/components/Header.react.js

src/components/Content.react.js

src/actions/DemoAction.js

src/dispatcher/DemoDispatcher.js

src/stores/DemoStore.js

src/constants/DemoConstants.js

最後是 index.html

同樣的我們需要透過 browserify 進行 build 的動作才能正常執行

所以在前面一開始的指令除了透過 npm 安裝了 browserify 之外也額外裝了 babelify

babelify 跟上一篇講到的 reactify 同樣都是一種 browserify 的 transform

因為沒有 babelify，就無法將 ES6 轉回 ES5，也不能轉換 JSX 語法

所以同樣的我們要把 transform 的資訊加到 package.json

並執行以下指令

browserify -t babelify src/*.js -o ./build/bundle.js

這樣就可以運行 index.html 看到結果了

跟上次教學一樣，我也額外提供透過 gulp 的方式來 build 程式

但要先透過 npm 安裝一些東西

安裝完成後撰寫 gulpfile.js

最後這次範例原始碼有在 >>GitHub<< 上，請自行下載。如果你覺得不錯，在 GitHub 上給個 Star 吧

React.js - react/flux 範例

2015-03-23T22:19:00.002+08:00

本篇教學範例的完整原始碼在 >>這裡<<

如果對 Flux 的架構和細節有不清楚的，網路資源很多可以查，建議看英文比較好

我之前有寫一篇關於 Flux 的架構分想也可以參考 >>Facebook/Flux 架構分享<<

這邊在用最簡單的方式介紹一下 Flux 的架構

原則上 Flux 是一個資料流只有單一方向的設計原則，並且把原件區分為 View, Action, Store, Dispatcher

以下用一張簡單的圖來說明

第一張圖是 Flux 的架構圖，我有簡化過，因為我是認為 Flux 的原圖會讓人誤會

第二張圖是實際的運行中的資料流

接下來用一個很簡單的範例來實作 react 與 flux 的範例程式來介紹 flux

首先在專案目錄(react-flux-demo)下建立 package.json，內容如下即可

接著執行以下指令
上面我們透過 npm 安裝了 react, flux 以及 object-assign

其中 object-assign 是類似用來拷貝物件的一個 node module

接下來我們就從下面的 HTML 開始撰寫 react/flux 的程式

這次的範例很簡單，頁面上只有兩個 button ，分別代表遞增與遞減的功能，下方則會顯示目前的數值

先從程式入口點開始 js/app.js

接下來是 js/components/DemoApp.react.js，這個是主頁面的 View

再來則是剩下的兩個 View：js/components/Header.react.js 以及 js/components/Content.react.js

Header 負責呈現兩個 button 並負責 click 的事件以及與 Action 溝通

Content 單純透過 React 的 State 來呈現目前的數值是多少

接下來就是 Action 的部分，這是相對簡單的地方，主要就是負責提供 View 處理 user 行為的 function

並且透過 Dispatcher 來發送這個事件出去，而只有有興趣的 Store 會聆聽這些事件

所以先來看一下 js/actions/DemoAction.js

再來是 Dispatcher，dispatcher 在 flux 的架構中被定義為一個 singleton 的元件，只負責做事件的派送

由於大部分 dispatcher 的處理邏輯 flux 已經 cover 掉了，所以你的 dispatcher 會相當精簡

以下是 js/dispatcher/DemoDispatcher.js 的程式

最後就是最複雜的部分了：js/stores/DemoStore.js (我把一些解釋寫在註解內了)

完成之後，我們就要利用 Browserify 來做簡單的 build 動作

為什麼要用 Browserify？其實在前面的所有範例程式中，前面幾行都是用 require 這個函式來引入其他的 JS 檔

或是引入 react 以及 flux 等等， require 這個函式不是憑空出現的

畢竟我們又沒有額外引入 RequireJS 或 CommonJS 之類的，這是因為有 Browserify 的幫忙

有空可以看看 >>Browserify<< ，以下是他最簡短也最明瞭的解釋

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

簡單說你要透過 Browserify 來 build 你目前的所有程式，否則瀏覽器會看不懂 require ~

另外你還需要 Reactify，這是一個 Browserify 的 transform

能夠讓 build 的過程中也能夠轉換 react 的 JSX 語法，否則你會 build 不成功的

所以要透過以下指令來安裝 Browserify 以及 Reactify

並且修改 package.json，加入Browserify 的 transform

最後就可以執行以下的指令來進行 building 的動作

browserify -t reactify js/*.js -o ./build/bundle.js

這個指令的結果會在專案目錄下的 build 目錄內產生一個 bundle.js

最後一步我們就可以將這個 bundle.js 加到原先的 index.html 內了

==================================================

最後補充，如果想用 gulp 執行 build 的動作的話

可以參考 github 上的 Gulpfile.js 以及 package.json 的配置

再次附上此次範例的連結 >>點我<<

Facebook/Flux 架構分享

2015-03-22T19:54:00.000+08:00

現在 react/flux 在網路上的分享或教學已經很多了，有興趣的可以上網找一些相關的資訊

react 與 flux 的搭配算是目前正興起的一像前端開發手法

flux 是 Facebook 提供的一套前端設計模式，也可以說是一個架構

react 就不多說了，之前有文章介紹過了，去年看到 flux 的架構設計之後

特別有看到 Facebook 的介紹有提到，他們認為 flux 的架構設計是比較適合大型的前端應用的

另外也有提到前端 MVC 架構中的一些缺點，我是有部分認同他們給出來的一張圖

上面這個例子或許是大多數大型前端應用會遇到的難題，這已經跟 MVC 用不用得好沒關係了

在這之前曾經寫過大型的 backbone 程式，寫到最後(Model & View)就真的跟上面有點╰(〒皿〒)╯

雖然後續我認為 backbone 不能很根本地稱做 MVC，至少要額外加入 marionette 與 stickit

透過 marionette 補足 Controller，並利用 stickit 來實現 Model 與 View 之間的 two-way binding

最後就是利用 backbone + marionette + stickit 實作出以 MVP 模式為主的架構

但無論如何 Model 與 View 之間總是存在著複雜的依賴關係或是事件傳遞

儘管前端用 RequireJS 和 Backbone 本身的 Event 機制，總是無助於那 Model 與 View 間錯綜複雜的關係

而從 flux 的架構來看，卻實會好一些嗎？我們可以先看 flux 的架構：

flux 的重點在於他架構中的資料流只有單向的，並不像前面那張圖中 Modal 與 View 存在複雜的雙向關係

在 flux 剛推出的時候，一開始質疑的聲音其實蠻多的，先撇開這些質疑的部分不談

底下我用比較簡單的方式來描述 flux，因為我覺得 flux 的原圖會讓人有"誤會"

上面第一張圖主要是描述 flux 的架構設計層面，簡單說 View 接收到一個使用者行為後

透過一般函式呼叫的方式呼叫 Action，而 Action 則會透過 Dispatcher 觸發一個事件

Store 要扮演的腳色就是聆聽想要的事件並處理相關的業務邏輯或資料處理，完成後觸發資料變化的事件

最後就是 View 只需要聆聽資料變化的事件並進行畫面的更新

上面第二張圖則是實際資料流，這我就不多說了，應該很清楚才對

說到這邊，我是認為 flux 其實跟 MVC 或 MVP 蠻像的，至少個75 ~ 80%吧....

所以對於本篇文章的第一張圖，我是覺得 flux 原則上只是將 Modal 與 View 之間的關聯簡化到只有單一方向的資料流

但這就是 flux 的最大的差異點，它的資料流永遠只有單一方向的

因此另一個特點就是 Store 是內聚的，沒有任何元件可以更改 Store 內的資料

也就是說 Store 與 View 和 Action 間彼此是不互相影響的，因此會降低資料與模型間的複雜度

另外 Dispatcher 在 flux 的設計中就是一個 singleton 的元件，只負責 Action 與 Store 間的事件派送

這個設計我覺得是沒什麼問題的，當然如果沒有 Dispatcher ，讓 Action 與 Store 直接做事件的傳送也是可以

但要設計得當，否則會讓 Action 與 Store 有太多的耦合關係

目前來說 flux 與 react 的搭配是值得學習的，與 AngularJS 相比

react/flux 的架構相對來說比較透明且簡單理解，怎麼說?

因為 flux 的流程是單向的，你會更好更容易的掌握資料的變化，在大型應用中

對於程式的位置或是在 debug 上，相對於 AngularJS 來說更為容易，但這並不表示 AngularJS 不好

而是 AngularJS 在大型應用的開發中會很複雜，在 debug，trace code 與設計方面要花很大的心思

畢竟要把 AngularJS 學好並不是件容易的事情，當然我們也可以期待 AngularJS 2.0 的表現了

AngularJS 分享 - Bootstrap Grid system directive

2015-03-16T20:25:00.002+08:00

這篇同樣分享一下之前實作的一個 AngularJS directive，這個 directive 是用來呈現一個 Bootstrap 的 Grid system

不知道什麼是 Bootstrap 的 Grid system 可以 >>看這邊<<

比較複雜的是要如何用 AngularJS 現有的 directive 來組成一個可變動的 Grid

因為我不想直接用程式刻，所以都是通過 template 以及像是 ng-if，ng-init 以及 ng-repeat 這些 directive 來達成

當然實作的方式有好有壞啦，用程式刻我認為會稍微地好理解

但是你如果能充分利用原有的 direcitve 搭配 template 或許會讓你對 AngularJS directive 的開發更容易掌握

下圖是這次範例實作出來的結果(將所有的 products 以 grid system 呈現，每列三欄)：

首先把我把 directive 分成 productContainer (表示整個 Grid system 的 directive)

以及 productRow (表示 Grid system 中的每一列的 directive)

接下來就是這兩個 directive 對應的 template 程式，最複雜的就是 productsTemplate.html 了

最後就是這個 directive 使用的部分

GitHub + Shippable + Heroku : A continuous development way

2015-03-15T14:11:00.001+08:00

本篇介紹該如何將你在 GitHub 上的專案透過 Shippable 和 Heroku 做有效的結合達成 continuous development

Continuous development 包含了很多的面向，譬如說比較常聽到的 Continuous delivery 或 Continuous deployment 等等。

而等等要介紹的 Shippable 和 Heroku 的運用確實可以達成上述的這些 term

Shippable 是一個強大的平台讓開發者能夠快速的做專案的整合(integrate)與建構(build)

它能夠自動同步你 GitHub 或是 Bitbucket 內的專案來進行建構，方便的是

假如你今天有一個專案在 GitHub 上，並且你也同步到了 Shippable

之後你如果有任何的程式提交 (commit) 到 GitHub 上，Shippable 都會自動的進行建構的動作

讓開發者能夠達到持續地提交，建構與測試。當然這個過程是開發者需要提供一些設定檔才能達成的

而 Shippable 更提供了幾個主流開發語言的環境，包括 Node.js, Java, Ruby, Scala, Python 等等

而 Heroku 則是一個 PaaS，它提供了很多種語言的 deploy (部署)與運行環境

簡單來說就是它能夠讓你部屬你的專案到 Heroku 的 Cloud 上，並透過它給你的 domain 進行結果的瀏覽

在進行接下來的教學前你需要有 GitHub 的帳號，並且在 GitHub 上有一些專案可以運用

所以 GitHub 的操作就不多說了，直接從 Shippable 開始

建立 Shippable 與 GitHub 間的連結

先進入到 Shippable 的首頁 https://www.shippable.com/ 並按下中間 GitHub 的按鈕

接下來會進行一些 GitHub 的權限認證，做完之後就會看到 Shippable 的 dashboard

中間是你目前開啟 Shippable 與 GitHub 同步的專案，右邊會是你 GitHub 上的所有專案

建立 Heroku 帳號與應用(Application)

接下來建立 Heroku 的帳號就不多說了，很簡單，就直接從建立帳號後開始說起

帳號建立完成後你應該會看到類似下方的圖

接下來你可以透過按下右上方角落的＋來建立一個App，建立過程很簡單，你只要輸入名稱就好

你甚至不輸入也沒關係，它會自動幫你建立一個名子。

設定 SSH key

回到剛剛的 Shippable dashboard，並按下左邊欄的 Organizations 之後，再選擇 Deployment Key，如下圖

並且複製 ssh-rsa key，並回去 Heroku 的 dashboard，按下左邊欄的 Account，並選擇 Manage Account，之後往下拉找到 SSH Keys 那區塊，按下右邊的 Edit，並輸入剛剛複製的 ssh key 再儲存即可，如下圖：

建立 .shippable.yml

這裡我以 Node.js 為例，以下是一個非常簡單的設定檔(在專案的 root 目錄下建立)：

shippable 提供很多不同階段的入口點，讓開發者可以在不同的階段做想做的事情

例如上述範例在 npm install(before_install) 之前，會先安裝 Bower，並 install 所有的 bower dependency

最後在成功之後 (after_success) 我們做了一個最重要的步驟，就是將結果透過 git 提交到 Heroku

至於你的 Heroku 的 git 路徑你可以回到 Heroku 的 dashboard，並在中間下方部分選擇你剛剛建立的 Application

再選擇之後會顯示你目前 Application 的一些資訊和狀態，接著在上方選擇 Settings 的 tab

你就會在 Info 的區塊中找到你這麼 Application 在 Heroku 的 git url 了，如下圖：

所以你只要把 git push 後面的 git url 換成自己的就可以了

建立 Procfile

建立 Procfile (在專案的 root 下建立)，它能夠指定你的 Application 要如何在 Heroku 的平台中運行(我的範例是一個 web 的 Node.js 專案)

Building Project

最後回到 Shippable ，在右邊欄選擇你要同步的專案,按下 Enable就可以了

如同剛剛前面說的，只要有任何 commit 到 github 上，都會觸發一個 Shippable 任務去執行 build 的動作

build 成功之後，你的 dashboard 會類似下圖

你可以點進去看這個專案 building 後的 log

當你 build 成功之後，你可以回到 Heroku，同樣進到你的 Application 頁面並選擇 Activity tab

你會看到一些 build 和 deploy 的記錄

最後就可以透過 http://<your application name>.herokuapp.com/ 這個網址查看 deploy 後的結果了

結語

基本上 GitHub 就負責對你的專案做版本的控管，這是做一個應用程式的基礎，在這基礎上

我們透過了 Shippable 提供的功能來讓你做到應用程式的持續建構與測試，並且也能匯整出一份報告

在成功的完成這些基本的作業後，就可以將我們的應用程式自動且直接地透過 Heroku 上到 Production 了

AngularJS 分享 - Pagnation Directive (分頁)

2015-03-11T23:30:00.003+08:00

前陣子無聊就來練習一下 AngularJS 的 Directive (現在我還是覺得 AngularJS 的 Directive 和它的測試是真的有那麼一點複雜...)

之後稍微搞懂 Directive 之後就馬上順手寫了一個 AngularJS 的分頁元件

這個分頁 Directive 的樣式是基於 Bootstrap 3 的，程式內容不會介紹太多，純粹分享原始程式

最後附上demo 連結點我

React.js - an example with browserify and debowerify

2015-03-08T13:36:00.001+08:00

前陣子在看 Facebook 的 react/flux 的架構中有注意到一點就是 browserify

在 browserify 的官網有講到它是一個能夠將 node module 的程式載入到前端的 JS 中

只要簡單的透過 require 函式即可，很像以前很常在用的 RequireJS

而恰好 flux 是被 Facebook 註冊為一個 npm 內的 node module

所以在 flux 的 TODO 範例中，他們就是用 browserify 來將 flux 的程式載入到前端

也順便地將 react 透過 browserify 載入，言下之意就是表示

react 和 flux 這兩個都是透過 npm install 進去的，可以透過 Github 上的 package.json 得知，如下

這樣我們在前端的 javascript 中就可以利用下面的方式引入 flux 或 react

但如果你習慣將前端的套件透過 Bower 來管理而不是 npm 的話

那麼在 Facebook 的 react/flux 架構中要怎達成呢? 這個問題馬上就浮現在我腦中...

也就是說今天我剛好都是用 Bower 來管理前端 react, bootstrap ... 等等

那要怎麼透過 browserify 來達成相同的目的呢?

找了一下剛好發現在 Github 上有人寫了一個叫 debowerify 的 browserify transform

簡單說 debowerify 能夠輕易地將任何的 Bower 的元件透過 browserify 載入到前端中

所以這篇就簡單的來介紹一下如何撰寫一個簡單的 React 程式並搭配 browserify 以及 debowerify

再開始之前可以先看一下我之前寫的 React.js - A HelloWorld example with Express and Node.js

因為接下來的範例同樣會以 Express 以及 Node.js 作為基本的環境

我們可以透過下面一連串的指令來初始化這次的範例

上述的第5個指令安裝的 reactify 的元件，它是一個對於 JSX 的 browserify transform

原則上你沒有用 reactify 的話你是沒辦法透過 browserify成功 build 出結果的

而 reactify 內部也是使用 react-tools 這個元件來作 JSX 的轉換(上一篇有提到 react-tools)

接下來就可以開始寫一個簡單的 React 程式了

最後就是頁面的 Jade 程式

跟先前的教學一樣，我們需要加入一個轉換 JSX 後的程式，先前是用 react-tools

這次我們就要透過 browserify + reactify + debowerify 來完成目前的範例

在執行 browserify 的指令來執行 build 的過程前，需要修改一下 package.json

讓 browserify 能夠認得 source transform

完成後執行以下指令就會在 public/js/build 目錄下產生 build.js

到這邊就大功告成了，接下來就用　npm start 啟動 node server 並瀏覽結果

最後附上這次範例的 source code >>>點我<<<

AngularJS 教學 - Bootstrap dropdown directive

2015-03-07T16:31:00.001+08:00

本篇用 AngularJS directive 實作了一個 Bootstrap 的 dropdown (下拉式選單)

我有放在 GitHub、ngmodules.org，也有註冊在 Bower 上

GitHub 連結：https://github.com/AllenFang/angular-bootstrap-dropdown
ngmodules 連結：http://ngmodules.org/modules/angular-bootstrap-dropdown
Bower：可以透過以下指令安裝

$ bower install angular-bootstrap-dropdown --save

詳細的使用介紹可以看 GitHub 的 README.md 文件

之後會加上 multi select 的功能 (有時間的話...)

基本使用方式：
bs-dropdown-display 屬性設定 dropdown 要顯示的文字
bs-dropdown-items 屬性設定 dropdown 選單內的 options
ng-model 設定 dropdown 的預設值
ng-change 當 dropdown 的值變動的時候會呼叫的 callback function
bs-dropdown-divider 指定 dropdown 的分隔線的位置，例如： bs-dropdown-divider="{{[2,5]}}".

以下為一個簡單的使用範例
接下來是一個 Bootstrap dropdown divider 的使用範例

React.js - A HelloWorld example with Express and Node.js

2015-02-28T00:14:00.002+08:00

這篇來介紹一下如何快速的利用 Node.js 與 Express 來建立一個 React 的 HelloWorld 範例

React.js 的詳細介紹可以看官網，之後有時間再來詳細介紹...

首先要先快速建立一個 Express 與 Node.js 的 Project，可以用 express-generator

這是一個 Express project 的產生器，可以透過以下指令來安裝

$ npm install express-generator -g

完成後就再利用以下指令建立一個 Express 的 Project

$ express react-demo

進入 react-demo 目錄後可以看一到一個標準的 Express 的目錄結構

接下來就要開始使用 React.js 了，在這之前需要下載 React.js 的函式庫

這邊我是透過 Bower 來管理前端 package 的，所以必須先安裝 Bower

$ npm install bower -g

完成之後先進入 react-demo 目錄內並建立 bower.json，內容如下

{
  "name": "react-demo",
  "version": "0.0.1"
}

接下來就可以透過 Bower 來下載 React.js 了

$ bower install react --save

上述指令的 --save 自動在 bower.json 中加入 dependencies，並且你會在 react-demo 目錄下

看到一個新的資料夾 bower_components

為了等等讓 express 能夠認到 bower_components 底下的內容，我們必須修改react-demo 目錄下的 app.js

找到 app.use(express.static(path.join(__dirname, 'public'))); 並在下一行加入：

app.use('/bower_components', express.static(__dirname + '/bower_components'));

完成之後就可以開始寫 React.js 的 Hello World 了，首先需要將 React.js 加載到網頁中

由於透過 express-generator 所建立的 template 預設是使用 Jade (當然你可以選擇其他的)

所以我們必須修改 react-demo/views/layout.jade ，如下

doctype html
html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    block content
    script(src='/bower_components/react/react.min.js')

接下來在 react-demo/public/javascripts 目錄下建立一個 src 目錄

$ cd public/javascripts
$ mkdir src
$ cd src

並且在 src 目錄下建立 hello.js，其內容如下

React.render(
  <p>Hello, world!</p>,
  document.getElementById('example')
);

接下來我們範例是會透過 Offline Transform 來轉換 React 的 Template

所以需要先安裝一個 React 的轉換工具

$ npm install react-tools -g
$ jsx --watch public/javascripts/src/ public/javascripts/build/

以上指令完成後會在 public/javascripts/build/ 產生一個轉換後的 hello.js

這樣我們就可以把這個 hello.js 引入到頁面內了

doctype html
html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    block content

     div(id='example')

    script(src='/bower_components/react/react.min.js')
    script(src='/javascripts/build/hello.js')

最後透過在 react-demo 目錄內執行以下指定

$ npm start

並開啟瀏覽器，到 http://localhost:3000 就可以看到結果了

最後附上本次 demo 的原始碼

【Apache Solr】查詢與刪除 Collection

2015-02-12T18:00:00.000+08:00

簡單介紹如何透過 RESTful 來執行 Collection 的查詢與刪除

這裡的查詢是指查詢 Collection 的 schema 資訊，可以透過 HTTP GET 以下的 URL 來取得 schema

GET http://localhost:8983/solr/{collectionName}/schema

大致上 Solr 會將 schema.xml 的內容轉換成 JSON回傳回前端(預設)

如果要用 XML 格式的話，在上述的 URL 後面加上 ?wt=xml 即可

至於要刪除 Collection 的話，可以利用以下的 URL 來完成

GET http://localhost:8983/solr/admin/collections?action=DELETE&name={collectionName}

如果你是在 SolrCloud 的環境下，想要連帶刪除該 Collection 的 config 的話，可以用 Solr 提供的 shell script 來完成

$ cd solr-4.10.2/example/scripts/cloud-scripts
$ ./zkcli.sh -zkhost localhost:9983 -cmd clear {config path}

在 SolrCloud 的環境下 Config 都是由 zookeeper 處理，如果要知道 config 的路徑

可以到 http://localhost:8983/solr/#/~cloud?view=tree 如下圖所示

選擇你要刪除的 Config 目錄名稱，右邊會帶出一些資訊，並且在下方處有一個路徑

例如　/configs/allenCollection1，這就是上述指令的 config path 了

【Apache Solr】建立 Collection (Create Collection using SolrJ or RESTful)

2015-02-03T21:53:00.000+08:00

在【Apache Solr】建立 Collection (Create Collection) 介紹了如何在 SolrCloud 中建立一個 Collection

當然也說明了一些建立 Collection 的一些條件，包括 Shard 的數量以及 Config 須先上傳到 Zookeeper

接下來介紹一下如何用 SolrJ 以及 RESTful 的方式建立一個 Collection

SolrJ 是一個套件能夠讓開發者透過 Java 的方式來操作 Solr，以下是建立 Collection 的片段程式

String zkHosts = "locahost:9983";
String collectionName = "testCollection1";
String confName       = "testCollection1";  //Configuration Name (You must upload to zookeeper first)
int shards            = 3;
CloudSolrServer server = new CloudSolrServer(zkHosts);
CollectionAdminResponse response = CollectionAdminRequest.createCollection(
                                collectionName, shards, confName , server);

if(null != response.getErrorMessages()){
        /* print error here */
 for(Entry error: response.getErrorMessages()){
  result.addErrorMsg(error.getValue());
 }
}
server.shutdown();

CollectionAdminRequest 有很多的重載方法，可以去查它的 API

畢竟建立一個 Collection 有很多參數可以設定，包括最大的 Shard 數量或是 route field 等等的

另外你如果不想寫 Java，你也可以透過 HTTP 的 GET 方法請求一段 RESTful 來達到目地

例如以下的 URL 請求效果會跟上面的 SolrJ 範例程式相等

http://localhost:8983/solr/admin/collections?
action=CREATE&
name=testCollection1&
numShards=3&
collection.configName=testCollection1

需要注意的是透過 RESTful 的方式不用指定 Zookeeper，但相對的你必須從你的 SolrCloud

中挑選任何一個節點來執行上述的 RESTful 請求

例如你有 host1 ~ host3 三個節點

那麼你對 host1, host2 或是 host3 發出上述的 RESTful (IP記得換掉)效果會是一樣的

AngularJS 教學 - Can not find the binary google-chrome

2015-01-19T21:41:00.003+08:00

如果第一次在 Linux 的環境中利用 Karma 來執行測試的時候，可能會看到類似下圖的錯誤

前提是你的測試瀏覽器是用 chrome 才會 >> browsers: ['Chrome']

很明顯的是 Karma 沒辦法透過環境變數找不到 Chrome 的執行路徑

你可以透過指令

$ which chromium-browser 來找出 Chrome 的執行路徑
>> /usr/bin/chromium-browser

接者加到環境變數 CHROME_BIN

$ echo 'export CHROME_BIN="/usr/bin/chromium-browser"' >> ~/.bashrc && source ~/.bashrc

再執行一次 Karma 就可以了

【Apache Solr】建立 Collection (Create Collection)

2015-01-12T21:45:00.001+08:00

在前一篇【Apache Solr】Getting started：Solr Cloud configuration and example 提供了一個

關於 Solr Cloud 環境的建立與一些簡單的範例，接下來就繼續介紹如何建立 Collection

在 Solr Cloud 的環境內要建立 Collection 之前必須要先有 Configuration

所謂的 Configuration 先前已經提到過了，就是類似在 $SOLR_INSTALL/example/solr/collection1/conf 內的所有內容

最重要的就是 solrconfig.xml 以及 schema.xml 了

當然不管是在 Cloud 還是 Single Node (單點) 的環境上都是需要 Configuration 的

不過 Solr Cloud 是需要將 Configuration 上傳到 Zookeeper，統一由 Zookeeper 做管理

我們可以透過以下指令來達成

$ cd solr-4.10.2/example/scripts/cloud-scripts/
$ ./zkcli.sh -zkHost localhost:9983
-cmd upconfig
-confdir {your configuration location}
-confname collection1

上面的指令需要注意的是 -zkHost 需要換成你的 Zookeeper 位址

另外 -confir 則是指定你的 Configuration 所在的位置

最後 -confname 則是指定這次上傳上去的 Configuration 名稱

往後如果有 Collection 要建立都可以利用這個 Configuration 來建立

指令完成後你可以到 localhost:8983/solr 選擇左邊的 cloud 標籤內的 tree 標籤內觀察

接下來你可以透過 RESTful 的方式建立一個新的 Collection 叫 allentest

並透過 collection.configName 來指定新的 Collection 所需的 Configuration

你可以利用瀏覽器直接輸入以下網址或是用其他工具(如：Postman > 好用!!)

GET http://localhost:8983/solr/admin/collections?
action=CREATE&name=allentest&
numShards=2&
collection.configName=collection1

最後你會看到以下的結果

如果你不喜歡回傳的格式是 XML(這是 Solr 預設)的話，可以在網址後方加上&wt=json

之後在教大家如何用寫程式的方式在 SolrCloud 中建立 Collection.

【Apache Solr】Getting started：Solr Cloud configuration and example

2015-01-07T20:39:00.000+08:00

在前一篇【Apache Solr】Getting started： Installation & A single node example 的教學

有簡單介紹 Solr 的細節和目錄結構以及如何配置單一節點的 Solr 並啟動 Solr 服務

也說明如何在單一節點上建立一個新的 core，接下來就介紹 Solr Cloud 分佈式的設定和一些簡單範例

分佈式(Cloud)

叢集的效果就很像 Hadoop/HDFS 的樣子，資料是分佈式儲存，並透過 Zookeeper 來作協同管理，一個節點(Node)失效並不會造成資料遺失等問題，在 Solr 文件中都稱為 "SolrCloud"

以下範例同樣是以 Solr 跟目錄下的 example 為例

如何啟動

$ cd solr-4.10.2

$ cp -r example/ shard1/

$ cd shard1

$ rm -r solr/collection1/data/

以上的動作會在 solr 跟目錄下建立一個 shard1 目錄，內容跟 example 目錄相仿

接下來在 shard1目錄下執行以下 command

$ java -DzkRun -DnumShards=2 -Dcollection.configName=collection1

-Dbootstrap_confdir=./solr/collection1/conf

-jar start.jar

這裡先解釋一下，通常在實際上我們並不會這樣啟動一個 Solr Cloud，不過為了教學方便這裡先將就

以上指令

-DzkRun 表示了要用 Embed 的模式將 Zookeeper 啟動在目前這台機器上

-DnumShards 表示了 Solr Cloud 擁有最大的 Shards(分片)數

通常在啟動 Solr Cloud 以上兩個會常用，接下來的兩個是因為教學原因才額外加上的

-Dbootstrap_confdir 指定了 Collection 的 Conf 路徑，啟動時，Zookeeper 會將

　　　　　　　　　　　　　　conf 底下的東西上傳到Zookeeper 底下做管理

-Dcollection.configName=指定了你目前需要初始化的 Collection 名稱

啟動完成之後在 http://localhost:8983/solr 點擊頁面左邊的 Cloud 標籤

你會看到有一個 node 是 Active 另外一個是 Close 的

接下來就是依照先前的步驟再做一個 node 出來，因為沒有兩台機器，

所以你可以直接在 Solr 跟目錄下再建一個 shard2 的目錄，且內容跟 shard1 一樣。

$ cd solr-4.10.2

$ cp -r shard1/ shard2

$ cd shard2

$ rm -r solr/collection1/data

$ java -DzkHost=localhost:9983 -Djetty.port=8984 -jar start.jar

在最後面的指令中，我又在本機上再啟動一個 Solr 服務，有幾個參數需注意

-DzkHost 這是告訴 Solr 目前 Zookeeper 在哪台機器上，在剛才我們已經在本機建立一個 Embed 的

ZooKeeper，而 port 是 9983(這是 Solr預設)

-Djetty.port 則是指定這個 Solr 服務的 port，因為剛才我們已經在本機開過一個 Solr 服務在 8983 了

所以你必須更換一個沒再用的 port 否則會啟動失敗

完成後，你就可以進入 http://localhost:8984/solr 了

如果你有兩台機器的話，你同樣可以在另外一台機器上下載 Solr，

　　　並且把剛剛建立的 shard2 資料夾放到那台機器上的 Solr 根目錄下，

並且在執行一次，且需注意 Zookeeper 的位址，需改成 node1 的IP，不能再用 localhost

$ java -DzkHost={node1-ip}:9983 -jar start.jar

以上因為教學介紹的關係，所以分享了這樣的 Solr Cloud 的啟動與配置方式

你可能注意到這樣的啟動方式，如果我要再額外建立另一個 Collection 到 Cloud 上

就要關掉並且把 conf 目錄擺好後再透過指令重新 bootstrap

所以在 Solr Cloud 中，Solr 有提供一些 script 可以讓你將 conf 目錄

上傳到 Zookeeper ，以成為一個新的 configuration name

之後使用者就可以透過 API 或是 RESTful 的方式，進立一個新的 collectioon 並且指定該 configuraion name

下一篇就來介紹一下　Solr Cloud 中的 configuration 是什麼，以及建立 Collection 的方式

【Apache Solr】Getting started： Installation & A single node example

2015-01-06T21:36:00.000+08:00

Apache Solr 是一個全文搜索的平台，能夠將多種格式的資料儲存在它的資料庫內，並提供快速的資料檢索

Solr 在 2010 年的時候與 Apache 的另外一個專案 Lucene 合併，Lucene 其實就是整個資料搜尋的核心，

它提供了所有的資料搜尋與檢索的函式庫。

而 Solr 則是利用了 Lucene 的搜尋功能並採用 Servlet container(預設是 Jetty) 來提供 REST，

及其他 API 的方式讓開發者能夠輕易的對資料進行查詢。

--------------------------------------------------------------------

接下來以 Apache Solr 4.10.2 的版本來安裝並介紹

前提是你的作業系統內必須安裝 Java 7，如果你是 Java 6 的話可以考慮更新到 Java 7，

或是選擇 Solr 版本 4.7.0 以下的也是可以。

首先先到 http://archive.apache.org/dist/lucene/solr/4.10.2/ 下載合適你作業系統的壓縮檔

以下以 Linux ubuntu 為例

$ cd ~
$ wget http://archive.apache.org/dist/lucene/solr/4.10.2/solr-4.10.2.tgz
$ ......

$ tar -zxf solr-4.10.2.tgz

完成之後會看到一個 solr-4.10.2 的資料夾，進入該目錄之後內容如下圖

在該開始接觸 Solr 的人最重要的就是把 example 目錄下的結構和幾個檔案搞懂

在 example 目錄下有幾個比較重要的檔案和目錄

1. scripts 目錄：目錄內有一些 shell script 可以讓你操作 Zookeeper 和 MapReduce

2. start.jar 檔：用來啟動 Solr 服務的 Jar 檔

3. solr 目錄：它是你的 Solr home 的目錄，你建立的 Core 以及索引資料都在內，如下圖：

在 solr 目錄下有一個 collection1 的目錄，他就是一個 Solr 提供的一個 Core 範例，

所以你如果有多個 core 的話，你就會在 solr 目錄下看到那些 core 名稱的目錄

在每個 core 目錄底下，需要注意的就是 conf 以及 data 目錄

1. conf 目錄內有著兩個最重要的設定檔 schema.xml 以及 solrconfig.xml，前者描述了 core 的資料欄位和資料型態，後者則是定義一些關於 core 的設定

2. data 目錄顧名思義就是存放資料的地方

Solr 提供了兩種模式，一種是單點的另外一種則是分佈式的，以下依序介紹如何配置

單點(Single node)

單點顧名思義就是只有一台 Solr 的伺服器再提供所有的服務，這在正式的 Production 環境上是不太可能這樣配置的

如何啟動

$ cd solr-4.10.2/example

$ java -jar start.jar

完成之後打開瀏覽器並輸入網址 http://localhost:8983/solr

你就會看到一個 solr 的管理頁面，就代表成功了

如何建立 core

$ cd solr-4.10.2/example/solr

$ cp -r collection1/ mycollection

$ cd mycollection

$ vi core.properties >> 改成name=mycollection

$ rm -r data/

重新啟動 solr 之後你就會在 http://localhost:8983/solr 看到 mycollection

當然你也可以再重啟之前適度的修改 schema.xml 來符合你的欄位設計

分佈式(Cloud)

叢集的效果就很像 Hadoop/HDFS 的樣子，資料是分佈式儲存，並透過 Zookeeper 來作協同管理，一個節點(Node)失效並不會造成資料遺失等問題，在 Solr 文件中都稱為 "SolrCloud"

如何安裝與配置，因為篇幅稍多，所以留在下一篇再介紹

【Apache Solr】Getting started：Solr Cloud configuration and example

java.lang.NoSuchMethodError: org.apache.hadoop.conf.Configuration.addDeprecations

2014-12-16T21:39:00.000+08:00

這個錯誤訊息是因為不同的 Hadoop 版本所造成的

主要是因為 org.apache.hadoop.conf.Configuration 這個類別在 Hadoop 2.3 之後

新增了一個方法(method) addDeprecations

出現這個問題就有可能代表你的環境內有 Hadoop 2.3 的 jar 以及比 2.3 還早的 jar

我會遇到這個問題是因為

我的專案本身透過 Maven 引入 Hadoop 2.3 的 package

另外也相依了 solr-core 4.1.0 這個 package

剛好 solr-core 4.1.0 它有相依 Hadoop 某些 jar，但卻是 Hadoop 2.2 的

可以在 Solr-core 4.1.0 maven repository 內看到，如下圖

所以導致這樣的問題

解法部外乎就是把你專案本身的 Hadoop 2.3 降到 2.2

或是在 Maven 中用 exclusion 標籤排除掉以上那 4 個 jar

AngularJS 教學 - Mocking a service

2014-11-01T17:31:00.003+08:00

在前一篇 AngularJS 教學 - Service 測試有簡單介紹到如何對 Service 進行測試

另外因為 Controller 常常需要依賴一些 Service Object 來做一些邏輯處理或後端的溝通

因此也說明了運用了 $injector 來將 Service Object 注入到 Controller，以利 Controller 的測試

不過有時候在開發的過程中，常常會遇到我們所開發的元件中所相依的元件還沒開發完成或是是別人的工作

例如我在開發某個 Controller 元件的時候，可能需要依賴很多的 Service

但這些 Service 可能尚未完成等等之類的因素，但為了確保我的 Controller 能夠如期完成並政常運作

先用模擬的方式來模擬這些 Service ，讓我的開發與測試能夠順利完成

而這些被模擬的東西我們可以稱為 mock object 或是 fake object

所以本篇會說明如何利用 $provide 來建立一個 mock 的 Service object

假設在 SampleCtrl 中我們需要依賴一個 TodoService

angular.module('sampleApp', [])

.controller("SampleCtrl", function($scope, TodoService){

$scope.todos = TodoService.getTodos();

});

並且 TodoService 在還沒有被完成的情況下，那們我們該如何讓我們的 Controller 測試能夠通過

describe("Controller Test", function(){

var mockScope = {};

var controller = null;

var mockService = null;

beforeEach(angular.mock.module("sampleApp"));

beforeEach(angular.mock.module(function($provide){

//Create a mock service object

mockService = {

getTodos: function(){

//Return some mock data you expected

return [

{id:1, name: 'Todo item1'},

{id:2, name: 'Todo item2'}

];

}

};

//Using $provide service to register a component with the $injector

$provide.value("TodoService", mockService);

}));

beforeEach(angular.mock.inject(function($controller, $rootScope, $injector){

mockScope = $rootScope.$new();

controller = $controller("SampleCtrl", {

$scope: mockScope,

　　　　　　　　//Using $injector to get service

TodoService: $injector.get("TodoService")

});

}));

it("Should get two Todo items from mock service", function(){

expect(mockScope.todos.length).toEqual(2);

});

從上面的測試程式可以看到，在第二個 beforeEach 中

我自己建立了一個 mock 的 service object，並且包含一個 getTodos 的方法

方法內會回傳我所期待的 mock data

完成之後再透過 $provide 的 value 方法將完成的 mock service 註冊名為 TodoService 的 Service

所以我們就可以透過 $injector 來取得 TodoService 了

之後再介紹利用 Jasmine 的 spy 的方式也可以達到 mocking 的效果!

AngularJS 教學 - Service 測試

2014-10-30T21:47:00.002+08:00

本偏簡單介紹該如何測試 Service，並說明該如何在測試中解決依賴注入的問題(Dependency Injection)

如果不太清楚 AngularJS 的測試，可以看　http://programer-learn.blogspot.com/2014/10/angularjs-unit-testing.html

以下是本次範例的頁面，在 Text Box 輸入名子，按下 Button 後，Text Box 的值就會改變

接下來看一下原始碼 (index.html)

<head>

</head>

<body>

Name:<input type="text" ng-model="name"/>

</div>

</body>

</html>

再來看定義 Controller 以及 Service 的程式 (js/app.js)

angular.module('sampleApp', [])

.controller("SampleCtrl", function($scope, SampleService){

$scope.name = "";

$scope.echo = function(){

$scope.name = SampleService.echo($scope.name);

};

}).factory("SampleService", function(){

return {

echo: function(name){

return "Hello " + name;

}

};

});

上面的程式都相當容易，接著主要就要來看測試的部分

首先是 Karma 的設定檔 (karma.conf.js)

module.exports = function(config) {

config.set({

basePath: '',

frameworks: ['jasmine'],

* 加載所需的js檔到瀏覽器中

* 除了需要將要被測試程式與測試程式加入之外

* 也須將 angularjs 的library(angular.min.js)以及

* angular-mocks.js 加載進去

* */

files: [

'lib/angular.min.js',

'lib/angular-mocks.js',

'js/*.js',

'qa/*.js'

exclude: [

preprocessors: {

reporters: ['progress'],

port: 9876,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome'],

singleRun: false

});

};

接著我們先來看如何對 SampleService 進行單元測試(qa/service-test.js)

describe("Controller Test", function(){

var mockService;

// mock our module

beforeEach(angular.mock.module("sampleApp"));

// mock service object

beforeEach(angular.mock.inject(function($injector){

// using $injector retrieve object instances as defined by provider mockService = $injector.get("SampleService");

}));

it("The echo function should return 'Hello {name}'", function(){

var name = "Allen";

expect(mockService.echo(name)).toEqual("Hello "+name);

});

最後則是 Controller 的測試，同樣的因為 Controller 會將我們定義的 SampleService 注入

所以在測試的時候同樣可以用 $injector 來取得一個 mock 的 service 物件，

並透過 $controller 的 constructor 注入給 Controller 物件(qa/controller-test.js)

describe("Controller Test", function(){

var mockScope = {};

var controller = null;

beforeEach(angular.mock.module("sampleApp"));

beforeEach(angular.mock.inject(function($controller, $rootScope, $injector){

mockScope = $rootScope.$new();

controller = $controller("SampleCtrl", {

$scope: mockScope,

SampleService: $injector.get("SampleService")

});

}));

it("he echo function should return 'Hello {name}'", function(){

var name = "Allen";

mockScope.name = name;

mockScope.echo(name);

expect(mockScope.name).toEqual("Hello "+name);

});

最後透過 $karma start karma.conf.js 來進行測試

Java is always EExcellent

ShopBack Engineering Blog

Certified Spark Developer

React.js - Stateless principal in react

React.js in es6

React Component

Prop & PropTypes

State

Instance method

React.js - using Jest and Babel to test ES6 code

React.js - Bootstrap table

browserify 與 watchify 分享

React.js - a flux example with ES6 and Babel

React.js - react/flux 範例

Facebook/Flux 架構分享

AngularJS 分享 - Bootstrap Grid system directive

GitHub + Shippable + Heroku : A continuous development way

AngularJS 分享 - Pagnation Directive (分頁)

React.js - an example with browserify and debowerify

AngularJS 教學 - Bootstrap dropdown directive

React.js - A HelloWorld example with Express and Node.js

【Apache Solr】查詢與刪除 Collection

【Apache Solr】 建立 Collection (Create Collection using SolrJ or RESTful)

AngularJS 教學 - Can not find the binary google-chrome

【Apache Solr】建立 Collection (Create Collection)

【Apache Solr】Getting started：Solr Cloud configuration and example

【Apache Solr】Getting started： Installation & A single node example

java.lang.NoSuchMethodError: org.apache.hadoop.conf.Configuration.addDeprecations

AngularJS 教學 - Mocking a service

AngularJS 教學 - Service 測試

【Apache Solr】建立 Collection (Create Collection using SolrJ or RESTful)