Sencha Touch 2 Train Course 1 Prepare development environment Sencha Touch 2 課程 : 準備與建置開發環境

1. Sencha Touch 2 訓練課程1
建置專案環境
文孝義

2. 課程大綱
ه 環境安裝準備
ه 建立新Sencha Touch專案
ه 匯出正式版
2014/8/29 2

3. 環境安裝準備
2014/8/29 3

4. 環境安裝準備
ه 作業系統
ه Windows
ه Mac OS
ه Linux
ىUbuntu
2014/8/29 4

5. 環境安裝準備
ه Java SDK 1.7以上
ه Chrome
ه Ruby 2.0以上
ه Sencha Cmd 5
2014/8/29 5

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
2014/8/29 6

7. 環境安裝準備
ه Java SDK
ه 系統環境設定(Windows)
2014/8/29 7

8. 環境安裝準備
ه Java SDK
ه 系統環境設定(Windows) 新增變數
ه JDK_HOME
ى設定你的JDK安裝路徑
ى例如C:Java32jdk1.7.0_55
ه JAVA_HOME
ى%JDK_HOME%
2014/8/29 8

9. 環境安裝準備
ه Java SDK
ه 系統環境設定(Windows)
ه PATH
ى%JDK_HOME%bin;原有的內容….
2014/8/29 9

10. 環境安裝準備
ه 測試JDK是否正確
ه 開啟[命令提示視窗]
ه 輸入javac –version
ه 輸入java -version
2014/8/29 10

11. 環境安裝準備
ه Chrome
ه Google 瀏覽器
ه 隨時保持最新版本狀態的唯一版本
ه 支援W3C HTML 國際標準規範
ه http://www.google.com/intl/zh-TW/chrome/
2014/8/29 11

12. 環境安裝準備
ه Ruby
ه Windows
ىhttp://rubyinstaller.org/
ى安裝時注意勾選
ه Mac OS – 已經內建
ىRuby –v 檢查
ه Linux
ىsudo apt-get install ruby2.0.0
2014/8/29 12

13. 環境安裝準備
ه Ruby環境設定
2014/8/29 13

14. 環境安裝準備
ه Ruby環境設定
ه OSX/LINUX 請自行設定PATH 路徑
2014/8/29 14

15. 環境安裝準備
ه Sencha Cmd 5
ه http://www.sencha.com/products/sencha-cmd/download
ه 需要JAVA SDK/RUBY等環境
ه Sencha 整合開發支援工具
ه 編譯/打包
ه 專案所需相關工具
ه 內建Web Server 作為開發測試使用
2014/8/29 15

16. 環境安裝準備
ه 測試運作
ه 開啟[命令提示視窗]
ه 輸入sencha
2014/8/29 16

17. 環境安裝準備
ه Sencha Cmd 網站伺服器
ه 啟動Web Server
ه sencha web start
ه 關閉
ه 按下Ctrl + C
ه OSX/LINUX 則在終端機輸入
ىSencha web stop
2014/8/29 17

18. 環境安裝準備
ه Sencha Touch 2 線上文件
ه http://docs.sencha.com/touch/2.3.2/#!/guide/command
2014/8/29 18

19. 建立新SENCHA TOUCH專案
2014/8/29 19

20. 建立新專案
ه 下載Sencha Touch SDK
ه http://www.sencha.com/products/touch/
ه 解壓縮內容到目錄
ه 例如d:sdk_Senchasencha-touch-2.3.1-gpl
ه 目前版本Sencha Touch 2.3.1a
2014/8/29 20

21. 建立新專案
ه 開啟[命令提示視窗]
sencha
-sdk <sdk路徑>
generate app <專案名稱>
<專案路徑>
2014/8/29 21

22. 建立新專案
sencha
-sdk D:sdk_Senchatouch-2.3.1
generate app ihomeApp
d:sourceihomeihomeApp
2014/8/29 22

23. 建立新專案
ه 專案內容
2014/8/29 23

24. 建立新專案
ه app
ه 應用程式專案所在的資料夾，包含Models, Views, Controllers
與Stores.
ه app.js
ه 應用程式專案啟動的主程式.
ه app.json
ه 應用程式專案設定檔.
2014/8/29 24

25. 建立新專案
ه index.html
ه 應用程式專案的HTML 檔案
ه packager.json
ه 打包設定檔，用於Sencha Cmd 建立原生安裝檔.例如: Android
的apk檔。
ه Resources
ه 包含應用程式專用用到的CSS 與圖片
2014/8/29 25

26. 匯出正式版
2014/8/29 26

27. 建置匯出正式版
ه 匯出Web Server 版本
ه sencha app build production
ه 或sencha app build
ه 會產生於buildproduction下
2014/8/29 27

28. 匯出正式版
ه 啟動Web Server 測試
ه 將路徑移到buildproduction[專案]下
ه sencha web start
ه 在chrome開啟127.0.0.1:1841
2014/8/29 28

29. 匯出正式版
2014/8/29 29