狠狠撸

以HTML5打造跨平台
App
利?用COIMOTION BaaS快速開發

Ben Lue

今天下午的計畫
安裝 PhoneGap

以 PhoneGap 建?立?一個 App

建?一個可擴充、好維護的 HTML5 App 架構

原始碼
演講所展?示的 app，可從 github 下載：

https://github.com/coimotion/coApp

安裝Cordova / 建?立 App

?
#
?安裝 cordova
?
>
?sudo
?npm
?install
?–g
?cordova
?

?
#
?建?立
?App
?
>
?cordova
?
?create
?
?wnote
?
?com.gocharm.coim.wnote
?
?WireNotes
?

?
#
?建?立所?支援的平台環境
>
?cd
?wnote
?
>
?cordova
?pla;orm
?add
?ios
?
>
?cordova
?pla;orm
?add
?android
?

?
# build
>
?cordova
?build
?

測試看看
#
?安裝模擬啟動程式
>
?sudo
?npm
?install
?ios-?‐sim
?-?‐g
?

?
#
?啟動模擬器
>
?cordova
?emulate
?ios
?
OK!!
?

下?一步
如何處理UI?
o? jQuery
?Mobile
?
o? Sencha
?UI
?
o? Kendo
?UI
?
o? ChocoleteChip
?UI
?
…?
?

等等、好像少了些什麼
NaKve
?Look
?&
?Feel
?
Light-?‐weight
?framework
?or
?no
?framework
?
動態內容
離線?支援
容易和 BaaS 銜接

我的材料清單
簡易的 DOM 介?面：jQuery à? zepto(未來polymer？)

?頁?面滑動功能：jQuery Mobile

à? CSS transformation / animation

畫?面合成：HandleBars (EJS ?)

UI 套件：bootstrap (繼續 survey 中）
選秀條件：天下武功，唯快不破

HTML 原始碼
<div
?style="background-?‐color:
?#ddf;
?text-?‐align:center;">
?

?
?
?
?<h2>Home
?Page</h2>
?

?
?
?
?<bu[on
?onclick="_wf.loadPage('page1');">往第一頁</bu[on>
?
</div>
?
<div
?#dfd;
?

?
?
?
?<h2>First
?Page</h2>
?

?
?
?
?<bu[on
?onclick="_wf.loadPage('page2');">往第二頁</bu[on>
?
</div>
?
<div
?#fdd;
?

?
?
?
?<h2>Second
?Page</h2>
?

?
?
?
?<bu[on
?onclick="_wf.loadPage('page1');">回第一頁</bu[on>
?
</div>
?
home
?
page1
?
page2
?

換?頁效果是以CSS3 transformation 實作

可參考 /www/js/coapp.js 和 /www/
css/coapp.css

來點有料的
使?用者註冊 / 登?入

?手機拍照上傳

串接 BaaS 服務

可在 web 上觀看並編輯

COIMOTION 建議步驟
1.? 到 http://tw.coimotion.com 申請開發者帳
號
2.? 建?立團隊：後續可邀請團員
3.? 建?立 client app(ca)：做為?行動程式的代表
4.? ca需引?用內容集(wa)。可引?用現有內容集或
?自建。
5.? PhoneGap 的相關設定

?自建內容集
1. 登?入COIMOTION後，點選?自製內容
1
2
2. 点选新增

?自建內容集
3. 完成新增，「?自製內容」清單會多?一筆，按
「RS」查看資源
3
4. 點選「新增」，為剛才建?立的內容集新增資源
4

?自建內容集 - 新增資源
5. 點選「繼承」，繼承cms/page
5

?自建內容集 – 資源管理
6. 此時功能元清單會多?一筆，按「功能元管理」
查看新增的資源有什麼功能
6

?自建內容集 – 完成
6. 透過繼承，COIMOTION已為新建?立的資源準
備好完整的功能
以上完成?自製內容集的建?立

取得appCode和appKey
使?用 SDK 時需要告知 appCode 和 appKey。
點選網?頁上的「APP管理」回到app清單

appCode就是清單上的「代碼」欄位。點選
「編輯」鍵就能看到程式?金鑰(appKey)

Setting Up PhoneGap
#
?安裝
?COIMOTION
?
?和照相機插件
>
?cordova
?plugin
?add
?h[ps://github.com/coimoKon/coimPlugin.git
?
>
?cordova
?plugin
?add
?org.apache.cordova.camera
?
使?用照相機還須在 config.xml 加上：
<key>Plugins</key>
?
<dict>
?

?
?
?
?
?
?
?
?<key>Camera</key>
?

?
?
?
?
?
?
?
?<string>CDVCamera</string>
?
</dict>
?
con?g.xml
?

COIMOTION On PhoneGap
SDK 需要知道 appCode 和 appKey，

iOS:
在 xcode 中開啟 Resources/[proj]-info.plist，加上
「coim_app_code」和「coim_app_key」?二個屬性。

Android:
在 AndroidManifest.xml 的 <application> 內加?入：
<meta-data android:name=“coim_app_code”android:value=“”/>
<meta-data android:name=“coim_app_key”android:value=“”/>

註冊和登?入
coim.register(pdata,
?funcKon(rtnData)
?{
?

?
?
?
?
?
?
?
?if
?(rtnData.errCode
?===
?0)
?
?

?
?
?
?
?
?
?
?
?
?
?
?alert('Successfully
?registered.');
?

?
?
?
?
?
?
?
?else
?

?
?
?
?
?
?
?
?
?
?
?
?alert('Register
?Failed.');
?
});
?
coim.login('core/user/login',
?pdata,
?funcKon(rtnData)
?{
?

?
?
?
?
?
?
?
?if
?(rtnData.errCode
?===
?0)
?

?
?
?
?
?
?
?
?
?
?
?
?alert('Login
?successfully.');
?

?
?
?
?
?
?
?
?else
?

?
?
?
?
?
?
?
?
?
?
?
?alert('Login
?failed.');
?
});
?
註冊
登?入

拍照與上傳
navigator.camera.getPicture(funcKon(imgPath){
?

?
?
?
?…
?
},
?null,
?opKons);
?
coim.send('WireNotes/notes/create',
?params,
?funcKon(rtnData)
?{
?

?
?
?
?
?
?
?
?if
?(rtnData.errCode
?===
?0)
?
?{
?

?var
?
?ngID
?=
?rtnData.value;
?

?coim.a[ach('WireNotes/notes/a[ach/’+ngID,
?params,
??les,
?

?
?
?
?funcKon(rtnData)
?{
?

?
?
?
?
?
?
?
?
?
?
?if
?(rtnData.errCode
?===
?0)
?
?

?
?navigator.camera.cleanup();
?

?
?
?
?});
?

?
?
?
?
?
?
?
?}
?
});
?
拍照
上傳

顯?示資料清單
<script
?type="text/javascript"
?src=/slideshow/ksdg0621-share/36149865/"js/coapp.js"></script>
?
var
?
?pages
?=
?[
?

?
?
?
?
?
?
?
?
?
?
?
?{id:
?'home'},
?

?
?
?
?
?
?
?
?
?
?
?
?{id:
?'login'},
?

?
?
?
?
?
?
?
?
?
?
?
?{id:
?'list',
?remote:
?'WireNotes/notes/list',
?params:
?{pri:1}},
?

?
?
?
?
?
?
?
?
?
?
?
?{id:
?'view',
?remote:
?'WireNotes/notes/view',
?params:
?{pic:1}},
?

?
?
?
?
?
?
?
?
?
?
?
?{id:
?'edit',
?remote:
?'WireNotes/notes/view’}
?];
?

?
_wf.iniKalize(pages);
?
Index.html
程式起始時，在 index.html 曾做過以下的事：
list ?頁?面要顯?示時，coapp.js 會從 WireNotes/
notes/list 讀取資料

顯?示單筆資料
<div
?id="noteBody">
?
{{#each
?value.picList}}
?

?
?
?
?<div
?style="text-?‐align:center;">
?

?
?
?
?
?
?
?
?<img
?src=/slideshow/ksdg0621-share/36149865/""
?data-?‐path="{{dataURI}}"
?
?
?
?/>
?

?
?
?
?</div>
?
{{/each}}
?
</div>
?
<hr
?/>
?
<p>{{body}}</p>
?
view.html
資料讀取原理和 list （清單）類似，以下顯?示
畫?面處理：

上網編輯
利?用 coServ 快速做好編輯網站

coServ
以 node.js 寫成的 web server，可參考

http://github.com/coimotion/coServ

狠狠撸

以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫

Recommended

More Related Content

Viewers also liked (13)

Similar to 以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫 (20)

More from Ben Lue (8)

以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫