Post on 17-Aug-2015
1
從網頁開發到Android APP行動應用程式開發
國立空中大學管理與資訊學系講師
陳勇汀pudding@nccu.edu.tw
2015/7/17
中華電信學院專題演講
會寫網頁就能做 APP ！
2
講師簡介• 學經歷：– 國立空中大學 新北中心 管理與資訊學系講師– 國立政治大學 圖書資訊與檔案學研究所
博士生• 專長程式語言：– HTML, JavaScript, CSS– PHP, Java, JSP Servlet
• BLOG: 布丁布丁吃什麼？ http
://pulipuli.blogspot.tw/
大綱
前言：我是前端網頁設計師
概論：要如何製作行動應用程式 APP ？
樣板型 APP 開發： AppsGeyser 教學
網頁型 APP 開發： PhoneGap 簡介
實作： PhoneGap 開發
4
我是前端網頁設計師……
5
我知道 HTML5呈現資料與排版
<!DOCTYPE html><html><head> <title>Page Title</title></head><body>
<h1>My First Heading</h1><p>My first paragraph.</p>
</body></html>
6
我會寫 JavaScript計算資料
var x = myFunction(4, 3);
function myFunction(a, b) { return a * b; }
我也會使用jQuery ！
7
我看得懂 CSS3設定版面樣式
@media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; }} 製作響應式網頁設計
(RWD) 也沒問題！
8
要如何製作行動應用程式APP ？
我會寫前端網頁，但…
?
9
什麼是行動應用程式APP ？
• 行動應用程式是指設計給智慧型手機、平板電腦或其他行動裝置上的專屬應用程式，簡稱為 APP
• APP 通常是透過應用程式商店購買、下載與更新– iOS ：使用 App Store– Android ：使用 Google Play (Market)
• APP 也可以由應用程式檔案直接安裝– Android 的 APK 格式
Mobile Application
10
2015 年第一季行動裝置平臺市佔率
來源： IDC 美國國際數據公司http://www.idc.com/prodserv/smartphone-os-market-share.jsp
Android78.0%
iOS18.3%
Windows Phone2.7%
BlackBerry OS 0.3%
其他 : 0.7%
11
行動 APP 開發方案開發角度的分類• 著重於使用者介面 (UI) 與使用體驗
(UX)• 設計好用的介面、能夠取用行動裝置
的功能 ( 如相機 ) 、跨平臺開發
前端型
• 獨立於前端介面，強調後端的資料管理與控制功能
• 搭配雲端伺服器：使用者身份認證、資料存取、使用記錄分析
• 例如： GO! AppZone
後端型
• 系統層級的開發元件，系統需要對應運作環境才能使用
• 例如： Adobe AIR 、 OpenFL系統型
12
行動 APP 開發方案前端型的分類 (PhoneGap 觀點 )
網頁型 APP( 非行動應用程式 )
混合型 APP原生型 APP
不能取用裝置功能
13
行動 APP 開發方案前端型的分類
原生型 APP其他型APP
網頁型 APP 樣板型 APP
a
b
c
d
14
a. 原生型 APP
• 依據平臺的類型不同，採用該平臺的程式語言開發
• 能使用行動裝置完整功能，但不易跨平臺
AndroidJava (Android Studio)
iOS• Objective-C • Swift
Windows PhoneC++, C#(Visual Studio)
FirefoxOSHTML5
15
b. 網頁型 APP• 以網頁技術來開發的 APP ，並擴充
JavaScript 語法以存取行動裝置的部分功能。
• 可在瀏覽器上預覽 APP 的畫面，開發時會將行動版網頁轉換成網頁型 APP
• 代表： PhoneGap (Apache Cordova)
16
c. 其他型 APP
• 以其他語言或 MVC 架構開發 APP ，著重於跨平臺或是整合開發環境(IDE)
以 JavaScript 語言開發NativeScript
專門開發遊戲的引擎
17
d. 樣板型 APP
• 以易用的工具或樣板，只用輸入少數設定就能夠快速產生 APP ，適合製作簡單的 APP
• 缺點是難以完整客製化細節
線上製作樣板 APP
Smart Apps Creator
簡報式製作 APPApps Inventor
拼圖式線上製作 APP
18
適合的選擇方案
原生型 APP其他型APP
網頁型 APP 樣板型 APP
19
AppsGeyser 教學樣板型 APP 開發
20
AppsGeyser 簡介• 這是一個免費的網站服務，可以將行
動版網頁轉換成 Android APP ，並加入創收的功能
• 您可以在 APP 中加入訊息傳遞、社群媒體分享、分頁標籤、並完全支援HTML5
21
3 個步驟建立 APP
1.選擇樣板 2.建立APP
3. 發佈與創收
22
註冊與登入登入
註冊 ( 建立 APP 中 )
支援 Facebook登入
23
STEP 1. 樣板選擇• 網頁類 (WEB)– 線上網站：從 URL 建
立– 編輯器：單頁內容– Facebook Page
• 商業型 (BUSINESS)– 名片– 店家資訊– 餐廳
• 多媒體型 (MEDIA)– 電視頻道– Vimeo 或
YouTube頻道– 文件型：上傳 PDF
或 Word
• 遊戲型 (GAME)– 使用 Unity Web
Player 的遊戲
24
Create Website APP製作線上網站 APP
1. APP 設定：輸入網站網址
2. APP 名稱：輸入 APP的名稱，中文可
3. 介紹：輸入純文字的介紹
4. 圖示：上傳 512x512圖示或預設圖示
25
準備行動版網頁與圖示網址 圖示 (Icon)
• 圖示來源： FindIconshttp://findicons.com/– 各種免費圖示
• 圖示裝飾： Icon Slayerhttp://goo.gl/ig3j9A– 各種尺寸、光影特效、圓角、陰影、邊框
http://pulipuli.blogspot.tw/?m=1
26
STEP 2. APP(APK) 下載
掃描 QR Code下載 APK 安裝
27
STEP 3. 發佈與創收• 發佈到 Google Play• 發佈到 Amazon Market
(供 Kindle Fire 裝置使用 )• 創收 (Monetize)– AppsGeyser Ad Revenue Program–必須要有 100次安裝，而使用次數超過
300次
28
發佈到 Google Play
1. 檢視 APP 是否相容 Google Play條款
2. 準備 APP 的螢幕截取畫面3. 撰寫 APP 簡介4. 下載 APK5. 建立管理者帳號6. 讓 AppsGeyser 管理 APP7. 發佈到 Google Play
註冊費$25 美元
29
安裝與結果
30
AppsGeyser 的問題1. AppsGeyser內植使用記錄與廣告2. 線上網站本身無法離線使用3. 無法使用行動裝置的 API 功能
32
PhoneGap 是什麼？• PhoneGap 是一個以 HTML 、 CSS和
JavaScript建立跨平臺行動 APP 為基礎的開發平臺– 開放原始碼，支援 11種平臺
• 插件：以網頁語法使用行動裝置的功能– 核心插件：地理定位、聲音、震動、相機等– 第三方擴充插件：社交分享、條碼掃描
• 名稱： PhoneGap 與 Cordova– PhoneGap 是 Adobe 的商標– Apache Cordova 是 PhoneGap 的核心，是
開放原始碼
33
PhoneGap 的運作原理行動版網頁 原生行動 APP
插件• 核心• 第三方
WebView
封裝與編譯
使用裝置功能
34
PhoneGap API 功能簡介• 加速器：重力感應功能• 照相機：前置與後置相
機• 指南針：裝置方向• 通訊簿：取得聯絡人資
訊• 檔案：存取本機檔案• 地理定位： GPS• 多媒體：影音錄製與播放
• 網路連接：得知裝置的網路資訊
• 通知：提示、聲音、震動
• 儲存：支援 SQLite 資料庫
• 捕捉功能：音訊、影像與視訊的捕捉
• 裝置資訊：取得硬體與作業系統資訊
• 事件：暫停、離線、按下按鍵
35
PhoneGap 支援平臺與功能
iOS AndroidWindows
PhoneBlackBerr
yFirefox
OS
加速器 O O O O O
照相機 O O O O O
指南針 X O O O O
通訊簿 O O O O O
檔案 O O O O X
地理定位 O O O O O
多媒體 O O O O X
網路 O O O O O
通知 O O O O O
儲存 O O O O O
36
雲端打包與編譯環境Adobe PhoneGap Build
• PhoneGap Build 是一個雲端服務，提供 PhoneGap 應用的打包與編譯
• 僅需行動網頁應用與設定檔即可開始打包與編譯– 可直接使用第三方擴充插件
• 編譯方式：– 私人 APP ：檔案壓縮成 ZIP 後上傳– 公開 APP ：檔案遞交到GitHub 後匯入
• 限制：– 免費帳號只能打包一個私人 APP– iOS編譯需要開發人員認證金鑰
37
PhoneGap Build 開發步驟
1. 建構網頁APP
2. 加入 PhoneGap 專案設定
4. 編譯成各平臺的 APP3. PhoneGap Build準
備
38
來製作 APP 吧！
使用相機拍照行動版網頁
打包成為一個 APP
39
1. 建構行動版網頁應用
PhoneGap 開發實作
12
43
40
行動版網頁的免費框架
jQuery Mobile
Dojo Mobile Sencha Touch
41
jQuery Mobile
• jQuery Mobile 是開發行動版網頁介面的熱門框架，對各種瀏覽器與智慧型手機的支援度高
• 以 HTML標籤為基礎，加入 data-* 屬性達到漸進式增強。表單則是直接調整為行動版
• 基於 jQuery ，容易使用，有大量社群參與
• 主題像 iOS ，可套用不同顏色與社群開發
https://jquerymobile.com/
42
Dojo Mobile
• 屬於 Dojo Toolkit 的子專案，具有輕量級、模組化、速度快、封裝性好等特點
• 大量使用 HTML5 與 CSS3 實作特效，因此動畫效果流暢
• 跨平臺支援非 WebKit核心的瀏覽器• 內建支援多種平臺的主題
http://dojotoolkit.org/
43
Sencha Touch
• 基於 Ext JS 專案小組，聯合 jQTouch跟 Raphael 專案打造的行動應用程式框架
• 以 MVC模式開發，幾乎全部是以JavaScript 為主來實作， AJAX 功能完善，運作效能可媲美原生 APP般的流暢
• 入門門檻高，需要重新學習 Sencha Touch 的開發框架。
• 內建支援多平臺的主題，偵測系統自動切換主題
https://www.sencha.com/products/touch/
44
Android iPhone IE
https://www.sencha.com/products/touch/ Sencha
Touch
45
製作行動版網頁普通的網頁
jQuery Mobile行動版網頁
響應式設計
適合觸控搭配系統主題
46
jQuery Mobile所需檔案
jQuery Mobile 所需檔案
47
jQuery Mobile引用與設定 viewport
引用檔案
設定viewport
48
jQuery Mobile設定頁面
頁設定
頁首設定
頁尾設定
49
Single Page Application單一頁面應用程式
View 視圖網頁呈現的樣貌
Model 模型資料，來自本地或透過 AJAX 的遠端資料
Controller 控制器 / ViewModel 視圖模型處理邏輯控制與運算，以及路由
50
MVVM 框架 (MVC, MVVC)
AngularJS• 由 Google維護的開
源 JavaScript函式庫• 擴展 HTML ，以雙向
數據綁定來同步資料• 支援簡單的數據綁定
與複雜的模組化功能
• 早期主流的 MVC框架，大量使用 Underscore.js函式庫
• 支援 RESTful JSON ，可輕易跟後端伺服器交換資料
Backbone.js
51
2. 加入 PhoneGap 專案設定
PhoneGap 開發實作
12
43
52
設定步驟
c. 專案加入config.xml
與圖示
a. 網頁引用phonegap.js
b. 程式加入PhoneGap 語法
53
檔案結構
a. 網頁引用phonegap.js
b. 程式加入PhoneGap 語法
c. 專案加入config.xml
與圖示
54
index.htmla. 引用 phonegap.js
55
index.htmlb. 加入 PhoneGap 語法
點選按鈕時啟動相機
56
index.htmlb. 加入 PhoneGap 語法
相機插件語法
57
c. 加入 config.xml
APP 圖示
使用相機插件config.xml 設定細節： http://docs.build.phonegap.com/en_US/index.html
58
打包 ( 壓縮 ) 成 ZIP 格式
壓縮
可以用 7-Zip 來壓縮！http://www.developershome.com/7-zip/
59
3. PhoneGap Build準備
PhoneGap 開發實作
12
43
61
註冊 Adobe ID (1/2)
62
註冊完成
63
製作可發佈 APP: 建立簽署檔案
1. 在本機用 keytool建立 .keystore簽署檔案– 設定 Alias Name跟密碼
2. 將簽署檔案上傳到 Adobe PhoneGap Build ，然後以密碼解鎖
3. 在之後編譯 Android 的 APK 時，指定使用此簽署檔案
64
建立簽署檔案詳細步驟1. 下載與安裝 JDK
http://www.java.com/en/download/index.jsp
2. 設定 Java_Home參數的目錄3. 下載並執行 keytool_genetor.bat
https://j.mp/20150715_keytool
65
keytool_genetor.bat4. 輸入 Alias Name
輸入專案名稱phonegap_build_camer
a
66
keytool_genetor.bat5. 輸入簽署檔案的密碼
輸入兩次
67
keytool_genetor.bat6. 輸入其他資訊
輸入 Yes
可以按 enter略過
68
keytool_genetor.bat7. 輸入金鑰的密碼
按 enter略過等同於簽署檔案密碼
69
已經產生簽署檔案phonegap_build_camera.keystore
上傳簽署檔案8. 進入 Edit account
70
71
上傳簽署檔案9. 進入 Signing
Keys 分頁10.在 Android底下
點選 add a key11.title跟 Alias都
輸入剛剛建立簽署檔案的 Alias Name ，上傳簽署檔案 .keystore
72
上傳簽署檔案12.解鎖金鑰
輸入簽署檔案密碼兩次
確認已經解鎖
73
4. 編譯 APPPhoneGap 開發實作
12
43
74
上傳打包的行動版網頁
上傳 ZIP
https://build.phonegap.com/apps
75
準備編譯
準備編譯
76
等待編譯結果
查看細節
77
等待編譯結果
78
設定簽署檔案並重新編譯
有簽署檔案才能到 Google Play 上架
79
下載 APK
QR Code掃描下載
直接下載
80
結果啟用相機
81
發佈到 Google Playhttp://j.mp/20150716-play
完整程式碼下載http://j.mp/20150718-github
布丁布丁吃什麼？http://pulipuli.blogspot.tw
…
Please scan QR Code
謝謝您的聆聽
歡迎發問