html+coimotion 開發跨平台 app
DESCRIPTION
7/12 Workshop 的內容。介紹如何以 COIMOTION 自訂內容集，並以PhoneGap 實作行動應用程式。簡報中除了說明 PhoneGap 的使用步驟與 COIMOTION 開發者後台的使用說明外，還介紹了「Wireframe」、「頁面清單」、「API 清單」的開發管理模式，協助開發者有效進行專案開發。TRANSCRIPT
HTML5 + COIMOTION
快速開發跨平台 App
Ben Lue
The Storyboard
⼯工具 / 材料清單
ü npm + PhoneGap ü Ant: 建⽴立 Android 版本時需要 ü Cordova camera plugin ü COIMOTION PhoneGap SDK ü (optional) Genymotion 如果要在
Mac 上跑，還需要 Virtuebox
⾴頁⾯面清單
q home：顯⽰示 splash q login: 讓使⽤用者登⼊入或註冊 q list: 顯⽰示使⽤用者的筆記清單 q view: 顯⽰示筆記的詳細內容 q edit: 新增⼀一筆內容
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: ⽤用⾃自訂內容集所對應的代碼取代
再次檢視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 的資源
設定後台服務
1. ⾃自訂⼀一個內容集 (repository) 2. 在內容集中建⽴立⼀一個 notes 的資源 3. notes 需要類似網⾴頁⽂文章的功能，所
以讓 notes 繼承 cms/page
預計所需時間：5~10 分鐘
只需以下幾個步驟：
微步驟：1 進⼊入內容寶庫 登⼊入進⼊入官網 (tw.coimoFon.com) 的開發者後台，點選內容寶庫
點選這裡
微步驟：2 選擇 App 登⼊入內容寶庫後，點選左上⾓角「我的App」
1. 點選這裡，拉出選單
2. 選擇這次所要建置的App。如果只有⼀一筆，就選它吧！
微步驟：3 ⾃自製內容 先選取「⾃自製內容」的⾴頁籤
1. 點選這裡
2. 點選這裡以便新增內容集 此時畫⾯面類似下圖：
微步驟：4 新增內容集 ⼀一開始畫⾯面像這樣（也許已經有⼀一筆資料，沒有關係）
1. 點選這裡
2. 代碼在平台上必須唯⼀一，若已被別⼈人選⽤用就不能使⽤用。這個代碼也就是要填⼊入 API 路徑中 [myRepo] 的代碼
會跳出類似下圖的視窗：
微步驟：5 資源管理 完成內容集的新增後，畫⾯面會像下圖。點選「RS」來做資源的管理。
1. 點選這裡
微步驟：6 新增資源 進⼊入資源管理後，畫⾯面像這樣。此時點選「新增」
1. 點選這裡
2. 請填⼊入: notes
會跳出類似下圖的視窗：
3. 請填⼊入: 筆記
4. ⾮非常重要，先點選，下⼀一⾴頁解釋
微步驟：7 繼承資源 上⼀一⾴頁點選「繼承」鍵後，會出現如下視窗。選擇 cms/page作為繼承的對象。
1. 點選這裡
2. 點選這裡
3. 點選這裡
微步驟：8 完成後台設定 上⼀一⾴頁新增資源完成後，畫⾯面會如下圖所⽰示。經由繼承，新增的資源 (notes) 已經有許多功能可⽤用。
經由繼承，我們所需的 create, list, view, attach 等功能都已具備。
建置⼦子端
以上完成後端的設定，範例所需的 API 都已 ready
接著開始以 HTML5（經由 PhoneGap）建⽴立 跨平台的 App
安裝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
# 安裝模擬器 Genymotion # 啟動程式 > cordova run android
測試看看 # 安裝模擬啟動程式 > sudo npm install ios-‐sim -‐g # 啟動模擬器 > cordova emulate ios
OK!!
iOS:
Android:
下載範例程式
1. git clone h@ps://github.com/coimoFon/
coApp.git .
2. 或者到 github.com/coimoFon/coApp 去下載 zip 檔
3. 將下載內容中 www ⺫⽬目錄整個複製到 wnote ⺫⽬目錄下（覆蓋掉 PhoneGap 的 demo）
4. 把 config.xml 也取代掉
安裝PhoneGap Plugin # 安裝照相功能的 plugin > cordova plugin add org.apache.cordova.camera #安裝 COIMOTION SDK plugin > cordova plugin add h@ps://github.com/coimoFon/coimPlugin.git
⼦子端與 API 的對話
經由 SDK 的幫忙，App 和後端程式溝通可以很容易達成。但需要先告訴 SDK ⼆二件事：
o appCode: ⾏行動應⽤用程式的代碼 o appKey：⾏行動應⽤用程式的⾦金鑰
找出appKey和appCode
點選「App管理」
先回到開發者後台⾸首⾴頁：
App管理 這就是 appCode
點選這裡，跳出這個
這就是程式⾦金鑰 (appKey)
⼦子端的設定 -- iOS
在 wnote/plaLorms/ios/wnote/wnote-‐Info.plist 中加⼊入⼆二個 property: • coim_app_key
• coim_app_code
其內容值就是我們剛才找的 appKey 和 appCode
⼦子端的設定 -- 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
修改 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>
改成你的⾃自製內容集的代碼
修改 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
可以跑程式了
# 安裝模擬器 Genymotion # 啟動程式 > cordova run android
# 安裝模擬啟動程式 > sudo npm install ios-‐sim -‐g # 啟動模擬器 > cordova emulate ios
iOS:
Android:
到這裡已完成了範例的製作， 以下介紹 SDK 的各種使⽤用情境
註冊
coim.register(pdata, function(rtnData) { if (rtnData.errCode === 0) alert('Successfully registered.'); else alert('Register Failed.'); });
www/blocks/login/login.js: 26 ~ 33
登⼊入
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
拍照
var options = { sourceType: Camera.PictureSourceType.CAMERA, targetWidth: 640, targetHeight: 640 }; navigator.camera.getPicture(function(imgPath){ … }, null, options);
www/blocks/edit/edit.js: 13 ~ 19
拍照與上傳
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
顯⽰示資料清單
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 讀取資料
顯⽰示單筆資料
<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 （清單）類似，以下顯⽰示畫⾯面處理：
⼀一雲多屏
COIMOTION
上網編輯 利⽤用 coServ 快速做好編輯網站，存取相同的資訊
開發的參考架構
COIMOTION API Services
SDK
coApp coServ
Web Site 1
Web Site N
App 1
App N
App 1
App N
… …
…
相關網址 Website:
h@p://tw.coimoFon.com FB:
h@p://w.me/coimoFon
Slideshare: h@p://www.slideshare.net/BenLue/presentaFons
參考資訊 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
Thanks