《新浪云计算公开课第四期:Web开发者如何开发手机应用.ppt》由会员分享,可在线阅读,更多相关《新浪云计算公开课第四期:Web开发者如何开发手机应用.ppt(47页珍藏版)》请在三一办公上搜索。
1、web开发者,如何开发手机应用?,袁锡 心中有座围城,新浪移动云,为什么要学习移动开发?,世界都在移动化,设备在移动,开发商布局在移动化,用户需求也在移动化,利用移动设备访问的时间超过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,Wi
2、ndows 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,本地能力,成本,高,
3、低,依赖性,基于平台,浏览器,性能,高,低,发布,更新,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
4、技术构建跨平台APP,phoneGap 跨平台,能够访问本地功能,摄像头,重力感应,GPS,电话本,照片库,本地通知,设备信息,phoneGap 本地功能,js,js,js,js,js,js,js,通过 phoneGap building,phoneGap 打包,不提供UI设计解决方案,不具备服务端,不支持设备调试,打包付费,不帮助开发者销售推广,.未知,新浪移动云计算开发平台,简单快速低成本产生Hybrid app流水线,.,组成与特点,永远免费,低门槛,高效率,提供运营支持,除了本地接口调用以外的支持,应用商店,云窗调试器,为开发者提供最大的支持与帮助,创建,调试,打包机,打包,跨平台,发
5、布,创建应用,代码模版,服务端,数据库,Rest API,OAuth认证,phonegap-plugins,调试工具,能够直观的查看界面效果和实际运行环境,并且可以调用手机本地功能,云端调试,实时查看,一键安装,在线跟踪,智能菜单,自动获取,应用打包,将web app 变成 Hybird app,打包成安装文件,可以发布到 应用商店,新浪移动云计算开发平台原理,client,调试器,Server,SAE,访问,复制,打包机,client,apk,ipa,打包,.,hybrid,基于新浪移动云开发移动应用,新浪移动云刘蕾 草丁2012.05.12,29,默认模版默认模版+服务器端Tab应用模版T
6、ab应用+服务器模版社交应用模版微博模版不使用模版,创建应用,SAESVN+IDEPhoneGap,Coding,推广,Whatever U Want,应用模版提供了哪些方便?,怎么去调试、测试打包效果?,打包选项设置,怎么调用本地设备接口?,30,1、应用模版提供了哪些方便?,2、怎么通过JS调用本地设备接口?,3、移动端调试,4、打包选项设置,DEMO,31,1、应用模版提供了哪些方便?,32,Mobile Boilerplatehttp:/,1、应用模版提供了哪些方便?,33,LazyMobile模版http:/List页的移动应用模版,1、应用模版提供了哪些方便?,34,LazyRes
7、thttp:/Server,LazyMobile模版http:/List页的移动应用模版,1、应用模版提供了哪些方便?,35,36,oPath社交模版https:/,1、应用模版提供了哪些方便?,37,简微微博模版http:/,1、应用模版提供了哪些方便?,38,PhoneGap(Cordova),2、怎么通过JS调设备本地接口?,39,phonegap.js,HTML|JavaScript,2、怎么通过JS调设备本地接口?,40,2、怎么通过JS调设备本地接口?,注入phonegap.js,phonegap标签是否存在,将对应平台的phonegap.js置入源文件中,phonegap标签是否
8、存在,YES,YES,云窗调试器,打包文件,HTML文件,NO,NO,41,PhoneGap API 文档:http:/源码:https:/git-wip-us.apache.org/repos/asf移动云插件API文档:http:/,Accelerometer三轴加速,Camera相机/相册,Capture音视频采集,Compass指南针,Connection网络连接状态,Contacts通讯录,Device设备描述信息,Events应用生命周期状态,File本地文件及目录,Geolocation地理位置,Media录制/回放音频,Notification本地通知,StorageSQL数据
9、库,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,SinaAppEngineE-Mail:,47,Thank you!Q&A,