Sencha Touch 入門 - 環境建置 for MAC (1)

隨著行動應用的發展，App 開發的專案越來越多。最近，IBM Worklight 的詢問度似乎有提高的趨勢。面對 Hybrid App 的開發，大家通常提出來的第一個問題就是「效能會不會很差」。為了，能夠推廣 Hybrid App 的開發，我們當然要很努力地扭轉這樣的局面。

所謂，Hybrid App 指的就是利用 HTML5 + JavaScript + CSS3 來開發行動應用 App。當然，利用這樣的技術來製作 App 效能是比寫 Objective-C 或 Java 來得差。但是，使用者真的需要那麼快的 UI 響應嗎？

開發 Hybrid App 時，處理程式邏輯最重要的部分非 JavaScript 莫屬。在現今許多Framework並起的時代，以 Sencha Touch 的平台效能響應最快。因此，我們就開始 Sencha Touch 的 Survey 了！

這篇文章，算是個起頭！先交代如何建立 Sencha Touch 的環境。後面，再寫幾篇文章來說明我們實驗的過程。

安裝 Sencha Cmd

首先，把下載回來的檔案「SenchaCmd-5.0.1.231-osx.app.zip」解壓縮。解壓縮後可以看到「SenchaCmd-5.0.1.231-osx」檔案。點選該檔案後，開始進行 Sencha Cmd 的安裝。

在上述畫面，點選「打開」後，開始進行 Sencha Cmd 的安裝工作。在下列畫面中，點選下一步，進行 Sencha Cmd 的安裝工作。

在 License Agreement 的畫面上，選擇「I accept the agreement」後，點選「Next」繼續進行安裝工作。

選擇 installation Directory (可以採用預設的建議目錄），點選「Next」

在 Ready to Install 畫面上，點選「Next」 開始進行安裝程序

等待安裝程序完成！

點選 Finish 完成安裝！

開啓「終端機」，輸入「sencha」可以看到下列畫面，代表 Sencha Cmd 已經安裝完成了！

Sencha Touch 2.4 

1. 將下載回來的「touch-2.4.0-commercial.zip」檔案解壓縮
2. 將終端機中的路徑，切換到「touch-2.4.0-commercial.zip」 解壓縮的位址
3. 輸入下列畫面中的指令，來建立 Sencha Touch 專案

成功建立 Sencha Touch 專案後，可以看到上列畫面。接著，執行下列指令打開 Chrome 瀏覽器「open /Applications/Google\ Chrome.app/ --args --disable-web-security」。然後再從檔案中選到 index.html 後即可看到預設的範例程式。

到了這一步，表示基本環境已經建置完成。

參考資料：

下載 Sencha Touch : http://www.sencha.com/products/touch/
下載 Sencha Cmd: http://www.sencha.com/products/sencha-cmd/download