Sencha Touch 2 訓練課程 3Phonegap整合-以Android 平台為例

文孝義

課程大綱

ه Phonegap整合環境安裝

ه 建立Phonegap專案

ه 輸出正式 APP

2014/12/6 2

PHONEGAP整合環境安裝

2014/12/6 3

Phonegap整合環境安裝

ه 注意

ه 請務必完成第一章的Sencha 開發環境建置

ه 本課程以Android為主

2014/12/6 4

Phonegap整合環境安裝

ه 請完成Android 環境安裝

ه SDK MANAGER

ه ADT

ه 至少一個版本的Plateform

2014/12/6 5

Phonegap整合環境安裝

ه Install Node.js

ه 安裝後開啟console視窗

ه 執行 npm 測試是否安裝成功

2014/12/6 6

http://nodejs.org/download/

Phonegap整合環境安裝

ه 安裝 cordova

ه npm install -g cordova

2014/12/6 7

建立PHONEGAP專案

2014/12/6 8

建立Phonegap專案

ه 設定專案支援cordova

ه 安裝設定後將新增cordova目錄

2014/12/6 9

sencha cordova init [AppID] [AppName]

建立Phonegap專案

ه 新增 Android Platform

ه 進入 cordova 目錄

ه 若找不到Android Developer Kit，請將所解壓縮的ADK路徑加到環境變數中。請指向該目錄下的tools

例如:d:\Google\android-sdk-windows\tools\

2014/12/6 10

Cordova platform add android

建立Phonegap專案

ه 若成功會顯示下面訊息

2014/12/6 11

建立Phonegap專案

ه 安裝硬體裝置外掛

ه 移到cordova目錄下

2014/12/6 12

建立Phonegap專案

ه 安裝設備外掛-Device

2014/12/6 13

cordova plugin add org.apache.cordova.device

建立Phonegap專案

ه Network Connection and Battery

2014/12/6 14

cordova plugin add org.apache.cordova.network-information

cordova plugin add org.apache.cordova.battery-status

建立Phonegap專案

ه Accelerometer, Compass, and

Geolocation

2014/12/6 15

cordova plugin add org.apache.cordova.device-motion

cordova plugin add org.apache.cordova.device-orientation

cordova plugin add org.apache.cordova.geolocation

建立Phonegap專案

ه Camera, Media playback and

Capture

2014/12/6 16

cordova plugin add org.apache.cordova.camera

cordova plugin add org.apache.cordova.media-capture

cordova plugin add org.apache.cordova.media

建立Phonegap專案

ه Access files on device or network

(File API)

2014/12/6 17

cordova plugin add org.apache.cordova.file

cordova plugin add org.apache.cordova.file-transfer

建立Phonegap專案

ه Notification via dialog box or

vibration

2014/12/6 18

cordova plugin add org.apache.cordova.dialogs

cordova plugin add org.apache.cordova.vibration

建立Phonegap專案

ه Contacts

2014/12/6 19

cordova plugin add org.apache.cordova.contacts

建立Phonegap專案

ه Globalization

2014/12/6 20

cordova plugin add org.apache.cordova.globalization

建立Phonegap專案

ه Splashscreen

2014/12/6 21

cordova plugin add org.apache.cordova.splashscreen

建立Phonegap專案

ه InAppBrowser

2014/12/6 22

cordova plugin add org.apache.cordova.inappbrowser

建立Phonegap專案

ه Debug console

2014/12/6 23

cordova plugin add org.apache.cordova.console

建立Phonegap專案

ه 查詢目前已經安裝的外掛

2014/12/6 24

cordova plugin ls

建立Phonegap專案

2014/12/6 25

建立Phonegap專案

ه 移除外掛

2014/12/6 26

cordova plugin remove 外掛名稱cordova plugin remove org.apache.cordova.console

建立Phonegap專案

ه 新增檔案

ه cordova.local.properties

ه 設定支援的平台

2014/12/6 27

cordova.platforms=ios android blackberry wp8

cordova.platforms=android

建立Phonegap專案

ه App.json

ه "platforms": "android“

ه 打開註解

2014/12/6 28

建立Phonegap專案

ه 下載 Apache Ant

ه 解壓縮到目錄

ه 建置Android APK安裝檔會用到該程式庫

ه 並且請加入環境變數PATH中

2014/12/6 29

http://ant.apache.org/bindownload.cgi

Windows使用者抓取ZIP檔案，OSX/LINUX抓取tar.gz

建立Phonegap專案

ه 設定PATH 環境變數

ه Ant 目錄

ه Android sdk 目錄

2014/12/6 30

c:\apache-ant-1.8\bin;

c:\android-sdk-windows\tools;

c:\android-sdk-windows\platform-tools;

OSX 使用者請編輯cd ~

sudo nano bashrc_profile

補上這行 export PATH= /opt/apache-ant-1.8/bin:/usr/local/bin:$PATH

快捷鍵 Control+O 儲存Control+X 離開

建立Phonegap專案

ه 終端視窗輸入 ant測試是否有抓到

2014/12/6 31

建立Phonegap專案

2014/12/6 32

輸出正式 APP

2014/12/6 33

輸出正式 APP

ه 建置APK

2014/12/6 34

Sencha:

sencha app build native

Windows 8 請用 系統管理員模式打開 cmd

Phonegap:

cordova build

輸出正式 APP

ه APK 路徑

2014/12/6 35

\cordova\platforms\android\ant-build\

建置release

2014/12/6 36

Phonegap:

cordova build --release

使用正式上架金鑰簽章APK檔案即可上架

輸出正式 APP

ه 模擬器執行

2014/12/6 37

sencha app build –run native

Phonegap整合環境安裝

ه 產生金鑰

2014/12/6 38

keytool -genkey -v

-keystore my-release-key.keystore

-alias alias_name

-keyalg RSA -keysize 2048 -validity 10000

金鑰設定檔案

ه 路徑platforms\android\

ه 檔案 ant.properties

2014/12/6 39

key.store=金鑰的檔案所在 iHome.keystore

key.alias=金鑰的別名 iHome

金鑰設定檔案

ه 路徑platforms\android\

ه 檔案 local.properties

2014/12/6 40

sdk.dir=D:\\Google\\android-sdk-windows

key.store.password=金鑰密碼

謝謝

2014/12/6 41