以HTML5和COIMOTION打造跨平台App

download 以HTML5和COIMOTION打造跨平台App

of 29

  • date post

    27-Aug-2014
  • Category

    Software

  • view

    982
  • download

    6

Embed Size (px)

description

介紹如何以 HTML5 和 COIMOTION 快速打造跨平台的 app,並說明了如何在 COIMOTION 中自製內容集以儲存 app 所產生的資料。 原為 KSDG 6/21/2014 meetup 的講稿。已編修加重 COIMOTION 的說明。

Transcript of 以HTML5和COIMOTION打造跨平台App

  • 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
    Home Page [on>
    First Page [on>
    Second Page [on>
    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
  • appCodeappKey SDK appCode appKey APPapp 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 Plugins Camera CDVCamera cong.xml
  • COIMOTION On PhoneGap SDK appCode appKey iOS: xcode Resources/[proj]-info.plist coim_app_codecoim_app_key Android: AndroidManifest.xml
  • 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(); }); } });
  • 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
  • {{#each value.picList}} {{/each}}

    {{body}}

    view.html list
  • COIMOTION
  • coServ
  • coServ node.js web server http://github.com/coimotion/coServ
  • Thanks