Sencha Touch 2 訓訓訓訓 1 訓訓訓訓訓訓 訓訓訓
Dec 18, 2014
Sencha Touch 2 訓練課程 1建置專案環境
文孝義
04/10/2023 2
課程大綱
ه 環境安裝準備ه 建立新 Sencha Touch 專案ه 匯出正式版
04/10/2023 3
環境安裝準備
04/10/2023 4
環境安裝準備
ه 作業系統ه Windowsه Mac OSه Linux
Ubuntuى
04/10/2023 5
環境安裝準備
ه Java SDK 1.7 以上ه Chromeه Ruby 2.0 以上ه Sencha Cmd 5
04/10/2023 6
環境安裝準備
ه Java SDKه 有別於 JRE (Java Runtime Environment)ه 提供軟體開發編譯所需工具與環境ه 下載 JAVA SDK 1.7 以上版本ه Windows 安裝時請安裝在 目錄下的 Java 路
徑ه 本課程開發使用建議安裝 32 位元版本即可ه OSX/Linux 請安裝預設的版本即可。
http://www.oracle.com/technetwork/java/javase/downloads/index.html
04/10/2023 7
環境安裝準備
ه Java SDKه 系統環境設定 (Windows)
04/10/2023 8
環境安裝準備
ه Java SDKه 系統環境設定 (Windows) 新增變數ه JDK_HOME
設定你的ى JDK 安裝路徑例如 C:\Java32\jdk1.7.0_55ى
ه JAVA_HOME%JDK_HOME%ى
04/10/2023 9
環境安裝準備
ه Java SDKه 系統環境設定 (Windows)ه PATH
;JDK_HOME%\bin%ى 原有的內容… .
04/10/2023 10
環境安裝準備
ه 測試 JDK 是否正確ه 開啟 [ 命令提示視窗 ]ه 輸入 javac –versionه 輸入 java -version
04/10/2023 11
環境安裝準備
ه Chromeه Google 瀏覽器ه 隨時保持最新版本狀態的唯一版本ه 支援 W3C HTML 國際標準規範ه http://www.google.com/intl/zh-TW/chrome/
04/10/2023 12
環境安裝準備
ه Rubyه Windows
/http://rubyinstaller.orgى安裝時注意勾選ى
ه Mac OS – 已經內建Ruby –v 檢查ى
ه Linuxsudo apt-get install ruby2.0.0ى
04/10/2023 13
環境安裝準備
ه Ruby 環境設定
04/10/2023 14
環境安裝準備
ه Ruby 環境設定ه OSX/LINUX 請自行設定 PATH 路徑
04/10/2023 15
環境安裝準備
ه Sencha Cmd 5ه http://www.sencha.com/products/sencha-cmd/download
ه 需要 JAVA SDK/RUBY 等環境ه Sencha 整合開發支援工具
ه 編譯 / 打包ه 專案所需相關工具ه 內建 Web Server 作為開發測試使用
04/10/2023 16
環境安裝準備
ه 測試運作ه 開啟 [ 命令提示視窗 ]ه 輸入 sencha
04/10/2023 17
環境安裝準備
ه Sencha Cmd 網站伺服器ه 啟動 Web Server
ه sencha web start
ه 關閉ه 按下 Ctrl + Cه OSX/LINUX 則在終端機輸入
Sencha web stopى
04/10/2023 18
環境安裝準備
ه Sencha Touch 2 線上文件ه http://docs.sencha.com/touch/2.3.2/#!/guide/command
04/10/2023 19
建立新 SENCHA TOUCH 專案
04/10/2023 20
建立新專案
ه 下載 Sencha Touch SDKه http://www.sencha.com/products/touch/
ه 解壓縮內容到目錄ه 例如 d:\sdk\_Sencha\sencha-touch-2.3.1-gpl\
ه 目前版本 Sencha Touch 2.3.1a
04/10/2023 21
建立新專案
ه 開啟 [ 命令提示視窗 ]
sencha -sdk <sdk 路徑 >generate app < 專案名稱 > < 專案路徑 >
04/10/2023 22
建立新專案
sencha -sdk D:\sdk\_Sencha\touch-2.3.1 generate app ihomeAppd:\source\ihome\ihomeApp\
04/10/2023 23
建立新專案
ه 專案內容
04/10/2023 24
建立新專案
ه appه 應用程式專案所在的資料夾,包含 Models, Views, Controllers
與 Stores.
ه app.jsه 應用程式專案啟動的主程式 .
ه app.jsonه 應用程式專案設定檔 .
04/10/2023 25
建立新專案
ه index.htmlه 應用程式專案的 HTML 檔案
ه packager.jsonه 打包設定檔,用於 Sencha Cmd 建立原生安裝檔 . 例如 :
Android 的 apk 檔。
ه Resourcesه 包含應用程式專用用到的 CSS 與 圖片
04/10/2023 26
匯出正式版
04/10/2023 27
建置匯出正式版
ه 匯出 Web Server 版本ه sencha app build productionه 或 sencha app build
ه 會產生於 build\production 下
04/10/2023 28
匯出正式版
ه 啟動 Web Server 測試ه 將路徑移到 build\production\[ 專案 ] 下ه sencha web startه 在 chrome 開啟 127.0.0.1:1841
04/10/2023 29
匯出正式版