View
6
Download
0
Category
Preview:
DESCRIPTION
Jxnx nna mzm nnzz
Citation preview
以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 style="background-‐color: #dfd; text-‐align:center;"> <h2>First Page</h2> <bu[on onclick="_wf.loadPage('page2');">往第二頁</bu[on> </div>
<div style="background-‐color: #fdd; text-‐align:center;"> <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>
config.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, files, funcKon(rtnData) { if (rtnData.errCode === 0) navigator.camera.cleanup(); });
} });
拍照
上傳
顯⽰示資料清單
<script type="text/javascript" src="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="" data-‐path="{{dataURI}}" /> </div> {{/each}} </div> <hr /> <p>{{body}}</p>
view.html
資料讀取原理和 list (清單)類似,以下顯⽰示畫⾯面處理:
⼀一雲多屏
COIMOTION
上網編輯 利⽤用 coServ 快速做好編輯網站
coServ
以 node.js 寫成的 web server,可參考 http://github.com/coimotion/coServ
Thanks
Recommended