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

匯出正式版