以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