web开发者,如何开发手机应用?,袁锡 www.fzrx.com,新浪移动云,为什么要学习移动开发?,世界都在移动化,设备在移动,开发商布局在移动化,用户需求也在移动化,利用移动设备访问的时间超过PC,移动互联网一定是必然趋势,如何开发手机应用?,what makes an iphone app？,常规方法,特定语言针对于的某个平台开发的应程序,Native app,Objective-C,ipa,iosapp,Java,android Frameworks,apk,android app,C#,WPFrameworks,xap,wpapp,ios Frameworks,Iphone,Symbian,Windows Mobile,Java Me,C+,.Net Compact,BlackBerry,C,Palm,Android,ipad,Web OS,apple app store,Nokia store,Android play,C#,S60,object-c,Xcode,Eclipse,S40,其他平台,ios App,android app,wp app,Generic code,新方法,ios App,android app,wp app,HTML5+CSS+JS,web语言技术基于浏览器开发跨平台的应用,Web app,Native app VS.Web app,本地能力,成本,高,低,依赖性,基于平台,浏览器,性能,高,低,发布,更新,build打包,云端,Hybrid app,hybrid app packages a web app into a native app,吸引者,15,000+ hybird app in the App Store,Bridging the gap between web and mobile device,web app,HTML5,CSS,JavaScript,Android,Native APIs,Symbian,ios,blackBerry,web os,etc.,phoneGap,使用HTML5、CSS3、JavaScript技术构建跨平台APP,phoneGap 跨平台,能够访问本地功能,摄像头,重力感应,GPS,电话本,照片库,本地通知,设备信息,phoneGap 本地功能,js,js,js,js,js,js,js,通过 phoneGap building,phoneGap 打包,不提供UI设计解决方案,不具备服务端,不支持设备调试,打包付费,不帮助开发者销售推广,.未知,新浪移动云计算开发平台,简单快速低成本产生Hybrid app流水线,.,组成与特点,永远免费,低门槛,高效率,提供运营支持,除了本地接口调用以外的支持,应用商店,云窗调试器,为开发者提供最大的支持与帮助,创建,调试,打包机,打包,跨平台,发布,创建应用,代码模版,服务端,数据库,Rest API,OAuth认证,phonegap-plugins,调试工具,能够直观的查看界面效果和实际运行环境，并且可以调用手机本地功能,云端调试,实时查看,一键安装,在线跟踪,智能菜单,自动获取,应用打包,将web app 变成 Hybird app,打包成安装文件,可以发布到 应用商店,新浪移动云计算开发平台原理,client,调试器,Server,SAE,访问,复制,打包机,client,apk,ipa,打包,.,hybrid,基于新浪移动云开发移动应用,新浪移动云刘蕾 草丁2012.05.12,29,默认模版默认模版+服务器端Tab应用模版Tab应用+服务器模版社交应用模版微博模版不使用模版,创建应用,SAESVN+IDEPhoneGap,Coding,推广,Whatever U Want,应用模版提供了哪些方便？,怎么去调试、测试打包效果？,打包选项设置,怎么调用本地设备接口？,30,1、应用模版提供了哪些方便？,2、怎么通过JS调用本地设备接口？,3、移动端调试,4、打包选项设置,DEMO,31,1、应用模版提供了哪些方便？,32,Mobile Boilerplatehttp:/html5boilerplate.com/mobile针对移动Web优化的HTML5空白模版,1、应用模版提供了哪些方便？,33,LazyMobile模版http:/code.google.com/p/lazymobile/基于Tab / List页的移动应用模版,1、应用模版提供了哪些方便？,34,LazyResthttp:/ftqq.com/lazyrest/可以通过Web页面快速配置的Rest Server,LazyMobile模版http:/code.google.com/p/lazymobile/基于Tab / List页的移动应用模版,1、应用模版提供了哪些方便？,35,36,oPath社交模版https:/code.google.com/p/o-path/http:/ftqq.com/2011/12/30/how-to-build-a-path-like-app-using-html5-and-phonegap/HTML5+PhoneGap社交应用,1、应用模版提供了哪些方便？,37,简微微博模版http:/ftqq.com/2012/04/18/build-a-weibo-client-using-phonegap/HTML5+SAE移动云PhoneGap插件,1、应用模版提供了哪些方便？,38,PhoneGap（Cordova）,2、怎么通过JS调设备本地接口？,39,phonegap.js,HTML | JavaScript,2、怎么通过JS调设备本地接口？,40,2、怎么通过JS调设备本地接口？,注入phonegap.js,phonegap标签是否存在,将对应平台的phonegap.js置入源文件中,phonegap标签是否存在,YES,YES,云窗调试器,打包文件,HTML文件,NO,NO,41,PhoneGap API 文档: http:/www.phonegap.cn/?page_id=402PhoneGap 源码: https:/git-wip-us.apache.org/repos/asf移动云插件API文档：http:/sae.sina.com.cn/?m=devcenter&catId=252,Accelerometer三轴加速,Camera相机/相册,Capture音视频采集,Compass指南针,Connection网络连接状态,Contacts通讯录,Device设备描述信息,Events应用生命周期状态,File本地文件及目录,Geolocation地理位置,Media录制/回放音频,Notification本地通知,StorageSQL数据库,Weibo微博,ImageFilter图像滤镜*,2、怎么通过JS调设备本地接口？,IFTRecognizer讯飞语音识别*,42,function onSuccess(contacts) alert(共搜到 + contacts.length + 位联系人.);function onError(message) alert(onError:+message);var options = new ContactFindOptions();options.filter=张;var fields = ”name, ”phoneNumbers”,”emails”;navigator.service.contacts.find(fields, onSuccess, onError, options);,Contacts获取通讯录,2、怎么通过JS调设备本地接口？,43,UI布局调试本地设备接口测试云端实时调试打包后一键安装测试,3、移动端调试,44,4、打包选项设置,45,DEMO个人通讯录云端备份,46,Thank you!Q&A,谢谢观赏,WPS Office,Make Presentation much more fun,WPS官方微博kingsoftwps,