Sencha touch 2 訓練課程 1 建置專案環境
Upcoming SlideShare
Loading in...5
×
 

Sencha touch 2 訓練課程 1 建置專案環境

on

  • 235 views

Sencha Touch 2 Train Course 1

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

Statistics

Views

Total Views
235
Views on SlideShare
230
Embed Views
5

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 5

http://www.slideee.com 4
https://m.facebook.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha touch 2 訓練課程 1 建置專案環境 Sencha touch 2 訓練課程 1 建置專案環境 Presentation Transcript

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