7/12 Workshop 的內容。介紹如何以 COIMOTION 自訂內容集，並以PhoneGap 實作行動應用程式。簡報中除了說明 PhoneGap 的使用步驟與 COIMOTION 開發者後台的使用說明外，還介紹了「Wireframe」、「頁面清單」、「API 清單」的開發管理模式，協助開發者有效進行專案開發。

1. HTML5 + COIMOTION
快速開發跨平台 App
Ben Lue

2. The Storyboard

3. ⼯工具 / 材料清單
ü npm + PhoneGap
ü Ant: 建⽴立 Android 版本時需要
ü Cordova camera plugin
ü COIMOTION PhoneGap SDK
ü (optional) Genymotion 如果要在
Mac 上跑，還需要 Virtuebox

4. ⾴頁⾯面清單
q home：顯⽰示 splash
q login: 讓使⽤用者登⼊入或註冊
q list: 顯⽰示使⽤用者的筆記清單
q view: 顯⽰示筆記的詳細內容
q edit: 新增⼀一筆內容

5. API清單
代碼
說明
API 路徑
UserProfile
檢測使⽤用者是不是在登⼊入
狀態
core/user/profile
Login
使⽤用者登⼊入
core/user/login
Register
使⽤用者註冊
core/user/register
NotesList
列出筆記清單
[myRepo]/notes/list
NoteView
取得筆記的完整內容
[myRepo]/notes/view
NoteCreate
新增⼀一條筆記
[myRepo]/notes/create
A@achPic
將照⽚片附加在筆記上
[myRepo]/notes/a@ach
* myRepo: ⽤用⾃自訂內容集所對應的代碼取代

6. 再次檢視API清單
API 路徑
core/user/profile
core/user/login
core/user/register
[myRepo]/notes/list
[myRepo]/notes/view
[myRepo]/notes/create
[myRepo]/notes/a@ach
使⽤用平台提供的模組
需要⾃自訂⼀一個內容集(repository)，
內容集裡⾯面有⼀一個 notes 的資源

7. 設定後台服務
1. ⾃自訂⼀一個內容集 (repository)
2. 在內容集中建⽴立⼀一個 notes 的資源
3. notes 需要類似網⾴頁⽂文章的功能，所
以讓 notes 繼承 cms/page
預計所需時間：5~10 分鐘
只需以下幾個步驟：

8. 微步驟：1 進⼊入內容寶庫
登⼊入進⼊入官網 (tw.coimoFon.com)
的開發者後台，
點選內容寶庫
點選這裡

9. 微步驟：2 選擇 App
登⼊入內容寶庫後，點選左上⾓角「我的App」
1. 點選這裡，拉出選單
2. 選擇這次所要建置的App。如果只有⼀一筆，就選它吧！

10. 微步驟：3 ⾃自製內容
先選取「⾃自製內容」的⾴頁籤
1. 點選這裡
2. 點選這裡以便新增內容集
此時畫⾯面類似下圖：

11. 微步驟：4 新增內容集
⼀一開始畫⾯面像這樣（也許已經有⼀一筆資料，沒有關係）
1. 點選這裡
2. 代碼在平台上必須
唯⼀一，若已被別⼈人選
⽤用就不能使⽤用。這個
代碼也就是要填⼊入
API 路徑中
[myRepo] 的代碼
會跳出類似下圖的視窗：

12. 微步驟：5 資源管理
完成內容集的新增後，畫⾯面會像下圖。點選「RS」來做
資源的管理。
1. 點選這裡

13. 微步驟：6 新增資源
進⼊入資源管理後，畫⾯面像這樣。此時點選「新增」
1. 點選這裡
2. 請填⼊入: notes
會跳出類似下圖的視窗：
3. 請填⼊入: 筆記
4. ⾮非常重要，先點選，下⼀一⾴頁解釋

14. 微步驟：7 繼承資源
上⼀一⾴頁點選「繼承」鍵後，會出現如下視窗。選擇 cms/
page作為繼承的對象。
1. 點選這裡
2. 點選這裡
3. 點選這裡

15. 微步驟：8 完成後台設定
上⼀一⾴頁新增資源完成後，畫⾯面會如下圖所⽰示。經由繼承，
新增的資源 (notes)
已經有許多功能可⽤用。
經由繼承，我們所需的
create, list, view, attach
等功能都已具備。

16. 建置⼦子端
以上完成後端的設定，範例所需的 API 都已 ready
接著開始以 HTML5（經由 PhoneGap）建⽴立
跨平台的 App

17. 安裝Cordova / 建⽴立 App
#
安裝 cordova
>
sudo
npm
install
–g
cordova
#
建⽴立
App
>
cordova
create
wnote
com.gocharm.coim.wnote
WireNotes
#
建⽴立所⽀支援的平台環境
>
cd
wnote
>
cordova
plaLorm
add
ios
>
cordova
plaLorm
add
android
# build
>
cordova
build

18. #
安裝模擬器 Genymotion
#
啟動程式
>
cordova
run
android
測試看看
#
安裝模擬啟動程式
>
sudo
npm
install
ios-­‐sim
-­‐g
#
啟動模擬器
>
cordova
emulate
ios
OK!!
iOS:
Android:

19. 下載範例程式
1. git
clone
h@ps://github.com/coimoFon/
coApp.git
.
2. 或者到 github.com/coimoFon/coApp
去下載 zip
檔
3. 將下載內容中 www ⺫⽬目錄整個複製到 wnote ⺫⽬目
錄下（覆蓋掉 PhoneGap 的 demo）
4. 把 config.xml 也取代掉

20. 安裝PhoneGap Plugin
#
安裝照相功能的
plugin
>
cordova
plugin
add
org.apache.cordova.camera
#安裝 COIMOTION
SDK
plugin
>
cordova
plugin
add
h@ps://github.com/coimoFon/coimPlugin.git

21. ⼦子端與 API 的對話
經由 SDK 的幫忙，App 和後端程式溝通可以很容易
達成。但需要先告訴 SDK ⼆二件事：
o appCode: ⾏行動應⽤用程式的代碼
o appKey：⾏行動應⽤用程式的⾦金鑰

22. 找出appKey和appCode
點選「App管理」
先回到開發者後台⾸首⾴頁：

23. App管理
這就是 appCode
點選這裡，跳出這個
這就是程式⾦金鑰 (appKey)

24. ⼦子端的設定 -- iOS
在 wnote/plaLorms/ios/wnote/wnote-­‐Info.plist 中加⼊入
⼆二個 property:
• coim_app_key
• coim_app_code
其內容值就是我們剛才找的 appKey
和 appCode

25. ⼦子端的設定 -- Android
在 wnote/plaLorms/android/AndroidManifest.xml 中，
<applicaFon>
tag 內加⼊入⼆二個 <meta-­‐data>
tag:
<meta-­‐data
android:name=“coim_app_key”
android:value=“”
/>
<meta-­‐data
android:name=“coim_app_code”
android:value=“”
/>
其內容值就是我們剛才找的 appKey
和 appCode

26. 修改 index.html
我們利⽤用 index.html 將App 所需的⾴頁⾯面⾃自動產⽣生，並
告知所對應的 API 服務：
25 <script
type=“text/javascript”>
26
var
pages
=
[
27
{id:
‘home’},
28
{id:
‘login’},
29
{id:
‘list’,
remote:
‘WireNotes/notes/list’},
30
{id:
‘view’,
remote:
‘WIreNotes/notes/view’},
31
{id:
‘edit’}
32
];
33
34
_wf.iniFalize(pages);
35 </script>
改成你的⾃自製內容集的代碼

27. 修改 edit.js
另⼀一個需要調整內容集代碼的地⽅方：
32
coim.send(‘WireNotes/notes/create’,
params,
funcFon(rtnData)
{
….
44
coim.a@ach(‘WireNotes/notes/a@ach/’
+
ngID,
params,
…
改成你的⾃自製內容集的代碼
www/blocks/edit/edit.js: 32, 44

28. 可以跑程式了
#
安裝模擬器 Genymotion
#
啟動程式
>
cordova
run
android
#
安裝模擬啟動程式
>
sudo
npm
install
ios-­‐sim
-­‐g
#
啟動模擬器
>
cordova
emulate
ios
iOS:
Android:

29. 到這裡已完成了範例的製作，
以下介紹 SDK 的各種使⽤用情境

30. 註冊
coim.register(pdata,
function(rtnData)
{
if
(rtnData.errCode
===
0)
alert('Successfully
registered.');
else
alert('Register
Failed.');
});
www/blocks/login/login.js: 26 ~ 33

31. 登⼊入
coim.login('core/user/login',
pdata,
function(rtnData)
{
if
(rtnData.errCode
===
0)
alert('Login
successfully.');
else
alert('Login
failed.');
});
www/blocks/login/login.js: 54 ~ 59

32. 拍照
var
options
=
{
sourceType:
Camera.PictureSourceType.CAMERA,
targetWidth:
640,
targetHeight:
640
};
navigator.camera.getPicture(function(imgPath){
…
},
null,
options);
www/blocks/edit/edit.js: 13 ~ 19

33. 拍照與上傳
coim.send('WireNotes/notes/create',
params,
function(rtnData)
{
if
(rtnData.errCode
===
0)
{
var
ngID
=
rtnData.value;
coim.attach('WireNotes/notes/attach/’+ngID,
params,
files,
function(rtnData)
{
if
(rtnData.errCode
===
0)
navigator.camera.cleanup();
});
}
});
www/blocks/edit/edit.js: 32 ~ 60

34. 顯⽰示資料清單
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.iniFalize(pages);
Index.html: 26 ~ 34
程式起始時，在 index.html 曾做過以下的事：
list ⾴頁⾯面要顯⽰示時，coapp.js 會從 WireNotes/
notes/list 讀取資料

35. 顯⽰示單筆資料
<div
id="noteBody">
{{#each
value.picList}}
<div
style="text-­‐align:center;">
<img
src=""
data-­‐path="{{dataURI}}"
/>
</div>
{{/each}}
</div>
<hr
/>
<p>{{body}}</p>
www/blocks/view/view.html: 12 ~ 20
資料讀取原理和 list （清單）類似，以下顯⽰示
畫⾯面處理：

36. ⼀一雲多屏
COIMOTION

37. 上網編輯
利⽤用 coServ 快速做好編輯網站，存取相同的資訊

38. 開發的參考架構
COIMOTION
API
Services
SDK
coApp
coServ
Web
Site
1
Web
Site
N
App
1
App
N
App
1
App
N
…
…
…

39. 相關網址
Website:
h@p://tw.coimoFon.com
FB:
h@p://w.me/coimoFon
Slideshare:
h@p://www.slideshare.net/BenLue/presentaFons

40. 參考資訊
coServ: 以 node.js 實作的新⼀一代 Web Server
http://github.com/coimotion/coServ
coServ 中⽂文版技術⽂文件
http://coimotion.github.io/coServ/zh/index.html
使⽤用 COIMOTION的 Android 範例
https://github.com/coimotion/Android-Demo-App
使⽤用 COIMOTION的 iOS範例
https://github.com/coimotion/iOS-Demo-App

41. Thanks