20150717 從網頁開發到android app行動應用開發發佈版

國立空中大學
管理與資訊學系講師
陳勇汀
pudding@nccu.edu.tw
12015/7/17
中華電信學院專題演講
會寫網頁就能做 A P P ！

講師簡介
• 學經歷：
– 國立空中大學新北中心管理與資訊學系講師
– 國立政治大學圖書資訊與檔案學研究所
博士生
• 專長程式語言：
– HTML, JavaScript, CSS
– PHP, Java, JSP Servlet
• BLOG: 布丁布丁吃什麼？
http://pulipuli.blogspot.tw/
2

大綱
前言：我是前端網頁設計師
概論：要如何製作行動應用程式APP？
樣板型APP開發：AppsGeyser教學
網頁型APP開發：PhoneGap簡介
實作：PhoneGap開發

我是前端網頁設計師……
4

我知道HTML5
呈現資料與排版
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 5

我會寫JavaScript
計算資料
var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
6
我也會使用
jQuery！

我看得懂CSS3
設定版面樣式
@media only screen
and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
7
製作響應式網頁設計
(RWD)也沒問題！

要如何製作行動應用程式APP？
我會寫前端網頁，但…
8
?

什麼是行動應用程式APP？
• 行動應用程式是指設計給智慧型手機、
平板電腦或其他行動裝置上的專屬應
用程式，簡稱為APP
• APP通常是透過應用程式商店購買、
下載與更新
– iOS：使用App Store
– Android：使用Google Play (Market)
• APP也可以由應用程式檔案直接安裝
– Android的APK格式
9
Mobile Application

2015年第一季
行動裝置平臺市佔率
10
來源：IDC 美國國際數據公司
http://www.idc.com/prodserv/smartphone-os-market-share.jsp
Android
78.0%
iOS
18.3%
Windows Phone
2.7%
BlackBerry OS
0.3%
其他: 0.7%

行動APP開發方案
開發角度的分類
• 著重於使用者介面(UI)與使用體驗(UX)
• 設計好用的介面、能夠取用行動裝置的功能(如
相機)、跨平臺開發
前端型
• 獨立於前端介面，強調後端的資料管理與控制功能
• 搭配雲端伺服器：使用者身份認證、資料存取、使
用記錄分析
• 例如：GO! AppZone
後端型
• 系統層級的開發元件，系統需要對應運作環境才能使用
• 例如：Adobe AIR、OpenFL
系統型
11

前端型的分類 (PhoneGap觀點)
12
網頁型APP
(非行動應用程式)
混合型APP原生型APP
不能取用
裝置功能

前端型的分類
原生型
APP
其他型
APP
網頁型
APP
樣板型
APP
13
a
b
c
d

a. 原生型APP
• 依據平臺的類型不同，採用該平臺的程式
語言開發
• 能使用行動裝置完整功能，但不易跨平臺
14
Android
Java
(Android Studio)
iOS
• Objective-C
• Swift
Windows Phone
C++, C#
(Visual Studio)
FirefoxOS
HTML5

b. 網頁型APP
• 以網頁技術來開發的APP，並擴充
JavaScript語法以存取行動裝置的部分功能。
• 可在瀏覽器上預覽APP的畫面，開發時會將
行動版網頁轉換成網頁型APP
• 代表：PhoneGap (Apache Cordova)
15

c. 其他型APP
• 以其他語言或MVC架構開發APP，著
重於跨平臺或是整合開發環境(IDE)
16
以JavaScript語言開發
NativeScript
專門開發遊戲的引擎

d. 樣板型APP
• 以易用的工具或樣板，只用輸入少數設定就
能夠快速產生APP，適合製作簡單的APP
• 缺點是難以完整客製化細節
17
線上製作樣板APP
Smart Apps
Creator
簡報式製作APP
Apps Inventor
拼圖式線上製作APP

適合的選擇方案
18
原生型
APP
其他型
APP
網頁型
APP
樣板型
APP

AppsGeyser教學
樣板型APP開發
19

AppsGeyser簡介
• 這是一個免費的網站服務，可以將行
動版網頁轉換成Android APP，並加
入創收的功能
• 您可以在APP中加入訊息傳遞、社群
媒體分享、分頁標籤、並完全支援
HTML5
20

3個步驟建立APP
21
1.選擇樣板 2.建立APP 3.發佈與創收

註冊與登入
登入
註冊
(建立APP中)
22
支援Facebook登入

STEP 1. 樣板選擇
• 網頁類 (WEB)
– 線上網站：從URL建立
– 編輯器：單頁內容
– Facebook Page
• 商業型 (BUSINESS)
– 名片
– 店家資訊
– 餐廳
• 多媒體型 (MEDIA)
– 電視頻道
– Vimeo或YouTube
頻道
– 文件型：上傳PDF
或Word
• 遊戲型 (GAME)
– 使用Unity Web
Player的遊戲
23

Create Website APP
製作線上網站APP
1. APP設定：輸入網站
網址
2. APP名稱：輸入APP
的名稱，中文可
3. 介紹：輸入純文字的
介紹
4. 圖示：上傳512x512
圖示或預設圖示
24

準備行動版網頁與圖示
網址圖示 (Icon)
• 圖示來源：FindIcons
http://findicons.com/
– 各種免費圖示
• 圖示裝飾：Icon Slayer
http://goo.gl/ig3j9A
– 各種尺寸、光影特效、
圓角、陰影、邊框
25
http://pulipuli.blogspot.tw/?m=1

STEP 2. APP(APK)下載
26
掃描QR Code
下載APK安裝

STEP 3. 發佈與創收
• 發佈到Google Play
• 發佈到Amazon Market
(供Kindle Fire裝置使用)
• 創收(Monetize)
– AppsGeyser Ad Revenue Program
– 必須要有100次安裝，而使用次數超過
300次
27

發佈到Google Play
1. 檢視APP是否相容Google Play條款
2. 準備APP的螢幕截取畫面
3. 撰寫APP簡介
4. 下載APK
5. 建立管理者帳號
6. 讓AppsGeyser管理APP
7. 發佈到Google Play
28
註冊費
$25美元

AppsGeyser的問題
1. AppsGeyser內植使用記錄與廣告
2. 線上網站本身無法離線使用
3. 無法使用行動裝置的API功能
30

PhoneGap簡介
網頁型APP開發
31
http://phonegap.com/

PhoneGap是什麼？
• PhoneGap是一個以HTML、CSS和
JavaScript建立跨平臺行動APP為基礎的
開發平臺
– 開放原始碼，支援11種平臺
• 插件：以網頁語法使用行動裝置的功能
– 核心插件：地理定位、聲音、震動、相機等
– 第三方擴充插件：社交分享、條碼掃描
• 名稱：PhoneGap與Cordova
– PhoneGap是Adobe的商標
– Apache Cordova是PhoneGap的核心，是
開放原始碼
32

PhoneGap的運作原理
行動版網頁原生行動APP
33
插件
• 核心
• 第三方
WebView
封裝與
編譯
使用
裝置功能

PhoneGap API功能簡介
• 加速器：重力感應功能
• 照相機：前置與後置相
機
• 指南針：裝置方向
• 通訊簿：取得聯絡人資
訊
• 檔案：存取本機檔案
• 地理定位：GPS
• 多媒體：影音錄製與播
放
• 網路連接：得知裝置
的網路資訊
• 通知：提示、聲音、
震動
• 儲存：支援SQLite資
料庫
• 捕捉功能：音訊、影
像與視訊的捕捉
• 裝置資訊：取得硬體
與作業系統資訊
• 事件：暫停、離線、
按下按鍵
34

PhoneGap支援平臺與功能
iOS Android Windows Phone BlackBerry Firefox 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 O35

雲端打包與編譯環境
Adobe PhoneGap Build
• PhoneGap Build是一個雲端服務，提
供PhoneGap應用的打包與編譯
• 僅需行動網頁應用與設定檔即可開始打
包與編譯
– 可直接使用第三方擴充插件
• 編譯方式：
– 私人APP：檔案壓縮成ZIP後上傳
– 公開APP：檔案遞交到GitHub後匯入
• 限制：
– 免費帳號只能打包一個私人APP
– iOS編譯需要開發人員認證金鑰 36

PhoneGap Build開發步驟
37
1. 建構網頁APP 2. 加入PhoneGap專案設定
4. 編譯成各平臺的APP3. PhoneGap Build準備

來製作APP吧！
38
使用相機拍照行動版網頁
打包成為一個APP

1. 建構行動版網頁應用
PhoneGap開發實作
39
1
2
43

行動版網頁的免費框架
jQuery Mobile Dojo Mobile
40
Sencha Touch

jQuery Mobile
• jQuery Mobile是開發行動版網頁介面
的熱門框架，對各種瀏覽器與智慧型手
機的支援度高
• 以HTML標籤為基礎，加入data-*屬性
達到漸進式增強。表單則是直接調整為
行動版
• 基於jQuery，容易使用，有大量社群參
與
• 主題像iOS，可套用不同顏色與社群開
發
41
https://jquerymobile.com/

Dojo Mobile
• 屬於Dojo Toolkit的子專案，具有輕
量級、模組化、速度快、封裝性好等
特點
• 大量使用HTML5與CSS3實作特效，
因此動畫效果流暢
• 跨平臺支援非WebKit核心的瀏覽器
• 內建支援多種平臺的主題
42
http://dojotoolkit.org/

Sencha Touch
• 基於Ext JS專案小組，聯合jQTouch跟
Raphael專案打造的行動應用程式框架
• 以MVC模式開發，幾乎全部是以
JavaScript為主來實作，AJAX功能完善，
運作效能可媲美原生APP般的流暢
• 入門門檻高，需要重新學習Sencha
Touch的開發框架。
• 內建支援多平臺的主題，偵測系統自動
切換主題
43
https://www.sencha.com/products/touch/

Android iPhone
44
IE
https://www.sencha.com/products/touch/
Sencha Touch

製作行動版網頁
普通的網頁
jQuery Mobile
行動版網頁
45
響應式設計
適合觸控
搭配系統主題

jQuery Mobile
所需檔案
46
jQuery Mobile所需檔案

jQuery Mobile
引用與設定viewport
47
引用檔案
設定viewport

jQuery Mobile
設定頁面
48
頁設定
頁首設定
頁尾設定

Single Page Application
單一頁面應用程式
49
View 視圖
網頁呈現的樣貌
Model 模型
資料，來自本地或透
過AJAX的遠端資料
Controller控制器/
ViewModel 視圖模型
處理邏輯控制與運算，以及路由

MVVM框架 (MVC, MVVC)
AngularJS
• 由Google維護的開源
JavaScript函式庫
• 擴展HTML，以雙向
數據綁定來同步資料
• 支援簡單的數據綁定
與複雜的模組化功能
50
• 早期主流的MVC框架，大
量使用Underscore.js函式
庫
• 支援RESTful JSON，可輕
易跟後端伺服器交換資料
Backbone.js

2. 加入PhoneGap專案設定
51
1
2
43

設定步驟
52
c. 專案加入
config.xml
與圖示
a. 網頁引用
phonegap.js
b. 程式加入
PhoneGap語法

檔案結構
53
a. 網頁引用
phonegap.js
b. 程式加入
PhoneGap語法
c. 專案加入
config.xml
與圖示

index.html
a. 引用phonegap.js
54

index.html
b. 加入PhoneGap語法
55
點選按鈕時
啟動相機

56
index.html
b. 加入PhoneGap語法
相機插件
語法

c. 加入config.xml
57
APP圖示
使用相機插件
config.xml設定細節：http://docs.build.phonegap.com/en_US/index.html

打包(壓縮)成ZIP格式
58
壓縮
可以用7-Zip來壓縮！
http://www.developershome.com/7-zip/

3. PhoneGap Build準備
59
1
2
43

註冊Adobe ID (1/3)
60https://build.phonegap.com/plans

製作可發佈APP: 建立簽署檔案
1. 在本機用keytool建立.keystore簽署
檔案
– 設定Alias Name跟密碼
2. 將簽署檔案上傳到Adobe
PhoneGap Build，然後以密碼解鎖
3. 在之後編譯Android的APK時，指定
使用此簽署檔案
63

建立簽署檔案詳細步驟
1. 下載與安裝JDK
http://www.java.com/en/download/index.jsp
2. 設定Java_Home參數的目錄
3. 下載並執行keytool_genetor.bat
https://j.mp/20150715_keytool
64

keytool_genetor.bat
4. 輸入Alias Name
65
輸入專案名稱
phonegap_build_camera

keytool_genetor.bat
5. 輸入簽署檔案的密碼
66
輸入兩次

keytool_genetor.bat
6. 輸入其他資訊
67
輸入Yes
可以按enter略過

keytool_genetor.bat
7. 輸入金鑰的密碼
68
按enter略過
等同於簽署檔案密碼

已經產生簽署檔案
phonegap_build_camera.keystore
69

上傳簽署檔案
8. 進入Edit account
70

上傳簽署檔案
9. 進入Signing
Keys分頁
10.在Android底下
點選add a key
11.title跟Alias都輸
入剛剛建立簽署
檔案的Alias
Name，上傳簽
署檔案.keystore
71

上傳簽署檔案
12.解鎖金鑰
72
輸入簽署檔案密碼兩次
確認已經解鎖

4. 編譯APP
73
1
2
43

上傳打包的行動版網頁
74
上傳ZIP
https://build.phonegap.com/apps

等待編譯結果
76
查看細節

設定簽署檔案並重新編譯
78
有簽署檔案
才能到Google Play上架

下載APK
79
QR Code
掃描下載
直接下載

發佈到Google Play
81
http://j.mp/20150716-play
完整程式碼下載
http://j.mp/20150718-github

布丁布丁吃什麼？
http://pulipuli.blogspot.tw
…
Please scan QR Code
謝謝您的聆聽
歡迎發問

20150717 從網頁開發到android app行動應用開發發佈版

Recommended

Recommended

More Related Content

Similar to 20150717 從網頁開發到android app行動應用開發發佈版

Similar to 20150717 從網頁開發到android app行動應用開發發佈版 (20)

More from Yung-Ting Chen

More from Yung-Ting Chen (20)