Certified Spark Developer

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，我也花了蠻多時間去背。

React.js - Stateless principal in react

之前為了建立一個複雜的 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 被打開 等等。

React.js in es6

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

• ECMAScript 6入门
• Learn 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...等等

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

本偏介紹一下如果你是用 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

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 分享

本篇來分享一下在 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

這篇介紹一下用最新的 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 範例

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

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

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

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

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

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

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

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

Facebook/Flux 架構分享

現在 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

AngularJS 分享 - Bootstrap Grid system directive

這篇同樣分享一下之前實作的一個 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 呈現，每列三欄)：

GitHub + Shippable + Heroku : A continuous development way

本篇介紹該如何將你在 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 開始

AngularJS 分享 - Pagnation Directive (分頁)

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

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

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

React.js - an example with browserify and debowerify

前陣子在看 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 架構中要怎達成呢? 這個問題馬上就浮現在我腦中...

AngularJS 教學 - Bootstrap dropdown directive

本篇用 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]}}".

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

這篇來介紹一下如何快速的利用 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 目錄下

【Apache Solr】查詢與刪除 Collection

簡單介紹如何透過 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)

在 【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

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

如果第一次在 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)

在前一篇 【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

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

在前一篇 【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

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

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
$ ......