CMDN Club第十六期活动已于3月24日顺利举行,本次活动以“跨平台开发框架PhoneGap入门与实践”主题,本次活动将聚焦这把“瑞士军刀”:PhoneGap。来自Adobe的技术经理董龙飞,向大家介绍,PhoneGap赢得如此多Web开发者青睐的原因、在Web开放方面的优势、工作原理,以及一些开发实践。
图:Adobe技术经理董龙飞
以下是文字实录:
董龙飞:我是Adobe开发者董龙飞,今天我的演讲主题是关于PhoneGap的12件事:基础介绍。我以前做FLEX开发的,也做过销售。现在我主要做的前端开发,因为原来我也是做FLEX,包括Adobe有很多基于一些工具有很多东西,我们今天借助其中一个PhoneGap。
因为可能很多人了解这个PhoneGap,也有很多人不了解PhoneGap, PhoneGap是什么?
好多人来这里都知道PhoneGap。PhoneGap是一个帮助我们利用这个平台进行移动平台跨平台开发的工具,或者是叫一个框架也好。但是实际上PhoneGap帮助我们做三件事:
第一件事情帮我们打包。比如说做了一个小的Web应用,你自己处理多平台、多尺寸的适配,一旦适配好之后,PhoneGap可以帮助你打造成不同平台的应用。你可以看到下面是它支持不同的平台,这里面最重要我们开发者涉及到比较多就是iOS和Android。
第二件事情就是当你要为移动设备开发应用的时候,我们只是本地应用,当然你需要访问移动设备很多本地化的特性或者功能。比如说摄象头、比如说我们访问移动电话里面的电话簿很多类似的功能,这个时候PhoneGap帮助你通过标准的接口,提供你访问本地特性的接口。PhoneGap框架提供一系列的接口为你服务。实际上在每一个设备上,或者每一个平台上,这些特性都不一样,而且这些特性不断快速的发展。
第三件事情比如说我们今年会有很多设备带NFC,那样PhoneGap本身提供的接口没有这种NFC接口。或者有一些设备索尼有一些设备是双屏,这时候是本地独特的特性,PhoneGap也不能支持。甚至有时候进行大图片处理,或者在Web应用里处理图片,PhoneGap大规模运算量高性能不是很多,这个时候你就需要有一个框架能够让你来挂接你自己进行扩展。PhoneGap我们提供了一个PLUGIN,你可以写自己本地的CALL,就可以写在自己的WEB应用上。
PhoneGap不包括什么呢?
PhoneGap如果我们做过开发,我们知道PhoneGap本身做应用不提供任何基础的框架,比如说做应动应用很多人用现在市场上一大堆开源的框架,UI框架、CSC框架、MBC的框架这个不面向移动,PhoneGap不是任何框架,PhoneGap只是完成我们刚才那几种,当你自己开发自己的移动应用的时候,你可能需要使用自己CSS库,我可能使用一套UI的框架,可能选一套MBC的框架,PhoneGap不提供所有的框架,仍然需要自己选择不同的框架,编好自己基于Web还是Web App。你开发PhoneGap应用的时候,你需要选择自己的ID。
PhoneGap是怎么来的呢?
PhoneGap是Adobe收购的一家公司,你比较好了解PhoneGap,PhoneGap在2008年当时还没IPAD,所以在旧金山针对iPhone的一个Club活动,在这个活动上,有几个工程师和FLEX自由职业者设计师实现这样一个IDEA,他的意思就是说我怎么能够使用Web技术调用iPhone的SDK,为了实现这个目的。然后就在这个平台上实现一些基础的代码,发到社区里面,结果这个IDEA非常受WEB开发者的欢迎,立刻非常火热,发展到现在。现在PhoneGap能够支撑不仅是IPHONE平台,还可以支持很多其他的平台。AIR是你用FLASH开发,你在iOS或者是Android,就是很多开发游戏的用这个技术。
所以我们看一看,我们第一眼看到PhoneGap在平台上的不同特性。PhoneGap发布到1.5版,1.5版是3月初刚刚发布。在发布1.4的时候PhoneGap正式支持Window Phone 7。实际上它每一个本地的支持,他也是以插件的形式提供,只不过有些是自己开发,有一些是在社区上。
这是他支持不同平台,一会儿我们看一下简单的例子。我们讲一下Cordova,Adobe收购了PhoneGap以后,Adobe就把它贡献给了阿巴奇基金会了,刚贡献给阿巴奇基金会的时候你在网上查名字叫CALLBACK,后来他们觉得这个名字比较太过于野性,后来把这个名改了,改成CORDOVA,CORDOVA是原来公司的地址的一个街名。这是一条街,就是那个公司在的地址。现在PhoneGap是一个开源项目,在这个PhoneGap里面有很多公司为这个CORDOVA贡献CALL,包括IBM,一开始在里面贡献了非常非常多的CALL。但是大家公认PhoneGap一开始来自这个公司的,但是后来成了一个社区公开的项目。实际上PhoneGap的名字仍然保留,它是由于一些法律问题实际上阿巴奇基金会这个名字就叫CORDOVA。在未来发展的时候你可以把PhoneGap看成是CORDOVA开源项目的一个发布版。Adobe也有计划在整个PhoneGap下面,除了基础的代码框架,也会不断加入不同的服务和工具。
打包:打包有三种方式,可能不止三种方式,但是我一直主要介绍三种。第一种方式就是用DW,你可以打开本地的DW,你有这么一个项目之后,你可以往里引任何代码,可以引各种各样的内库,编写完了以后里面有一个命令菜单,直接点击就可以直接把你的项目编译程APK或者iOS,当然也可以在模拟器里让你预览,但是前提是你把这个配制好。你刚入门的话用DW非常方便。但是DW只支持iOS和Android平台,所以很多人用手动打包。
很多人用ECLIPSE对SDK,你可以到PhoneGap网站上针对每一个平台都有一个开发者入门手册,告诉你针对每一个平台怎么配。比如说对于PhoneGap怎么配,比如说针对IOS都有不同的平台。另外一种就是说如果支持平台太多,我不愿意手工编,手工编Adobe有一个服务叫PhoneGap Build,你需要把你整个WEB的CALL,把整个目录结构按你的项目布置好,你在PhoneGap Build设一个号,你告诉希望打包到哪几个平台,你要是打包到IOS平台,你就告诉PhoneGap Build把这些信息提供上去。PhoneGap Build把这些东西都打包,给你生成一个页面,你就可以直接下载下来,自己去提交。甚至说也可以直接帮你提交到不同的应用商场里。
我们现在来看一下怎么访问本地的功能。你可以到PhoneGap网站,有一个比较好的文档,在这里面可以点击每一个文件,里面有对应的API。这是从里面摘录的一个,这是完整的HTML页面,专门来介绍如何利用PhoneGap访问手机运动传感器。实际上你可以看到Before1.4,这是1.4版本和1.4版本之前的写法。你可以看到其中几部分,因为就是一个标准的HTML页面,第一要引出一个PhoneGap.JS,然后你来指定deviceready事件,这个事件是PhoneGap自己抛出来的事件,抛出这个事件就说明把整个条件和体系好了,你就侦听这个事件,在这个事件你要自己设定镇定器,实际上这就是PhoneGap提供对应API接口访问本地的运动传感器的,当然可能是IOS的传感器,也可能是ANDROID。在PhoneGap整个体系里面到处都是CALLBACK,很好的反应了PhoneGap整个体系到底是怎么工作的。接下来你就自己在你这两个函数里面,通过事件获取PhoneGap通过本地代码返带来的接口,就很简单。这是一个比较完整的PhoneGap。每一个API都不一样,所以你需要自己来看。这是1.4的版本。
到1.5的版本就不一样了,这是刚刚下的1.5的版本,在这个1.5是针对不同的项,在这里面你可以看到JS文件名叫CORDOVA。实际上用1.5版本的话,其他的没什么变化,但是你引用SRC其实就是CORDOVA了。
刚才讲了一个比较简单的入门就是PhoneGap支持不同平台,我们怎么用PhoneGap访问这些本地特性。到底PhoneGap本质是什么呢?实际上PhoneGap本质我们可以从PhoneGap起源看到,PhoneGap一开始起源目的叫连接iOS TK连接这个鸿沟,PhoneGap很多工程师非常多的黑客,我去美国开会,听PhoneGap工程师来讲课,穿了一个T恤衫,他们就是非常黑客的那种情况。如果你看PhoneGap在不同平台实现的原理都是不一样的,你可以看到通过本地,因为在很多情况下,IOS和ANDROID平台没有提供很好的接口,所以PhoneGap通过不同方式帮你解决这些问题。
什么是PhoneGap?
最重要就解决了一个问题,就是解决你的JS和你Native他们之间的通讯问题或者是调用问题。怎么样使用JS来调用Native,基本上解决这样问题,只要解决了这个问题,其他问题都解决了,没有别的事情了。
如果我们落实到整个移动平台上,它是怎么来做的呢?我们刚才看的实际上覆盖面解决的就是JS和Native一个互相调用或者是通讯问题。在移动平台上所有的它包裹成PLUGINS在不同平台上Native WEB Control。Native WEB Control是什么呢?我们知道我们是做WEB应用的,WEB应用都是通过浏览器,我经常会跟好多开发者瞎说,浏览器和FLASH没有什么大区别,FLASH就是有一个编器。普通用户用的时候他认为浏览器就是带边框,有一个UI地址栏。但是每一个移动设备都有Native WEB Control,这个Native WEB Control就是一个全功能浏览器,但是没有边框,没有上面UI地址栏,但是实际上就浏览器。在移动设备上实际上仍然是运行在浏览器里面。
我们可以看一下怎么手工打包,如果你自己做过这个ANDROID开发的时候,它会生成一个应用接口,你要把它生成的默认积类,你要扩展他这样一个类。你整个页面把你WEB站点和应用首页出来,剩下就是WEB操作一样,所以它做的事情很简单。这是1.4以前。
这个怎么通过PhoneGap来给本地打包,在iOS又是另外一个样,你可以自己去看iOS的GAP。我们下面看一下PLUGIN。
怎么做一个PLUGIN呢?
如果自己手工做,你先看自己的LIBS应用,你要新建一个文件。你要在主文件里面改它的积类,积类改好了之后加入了主页,我们做插件要用这个PhoneGapJAR包。很重要一点你在打包这个文件或者做插件的时候,在XML里面有一个PLUGINS.XM,这里面有很多插件,包括你自己用的插件写完了以后要在这里面注册。最后看到我编写Android Manifest.xml,所有的权限要写在这里面。在1.5版之后,不同的就是这个JS文件和这个JAR包对应不同。
我们看一下怎么做插件,实际上当你做一个插件的时候,你要用本地的CALL写一些本地的脚本,把这个功能让其他WEB人员能够调用。我们可以看到在我这个代码例子里面创建了一个PLUGIN,每一个PLUGIN完成不同的List Actions。接下来你要覆盖一个方法,这个是PLUGIN提供的一个方法就是执行的一个方法,你复制这个PLUGIN方法里面,你要针对用户传进来的Actions,你要有不同的方法。然后下面还有一个设计,这个是我整个对于实现这个PLUGIN。
我们现在做了一个PLUGIN,这是所有的CALL,接下来下面我们要在JAVA这个里面做注册。我们要把做好的PLUGIN注册到PLUGIN文件里面,你可以看到一开始的PLUGIN这是文件里面原来就有的,这个文件里面APP、Geolocation 、Device你可以看到它对应的类,因为这都是开源的,可以看它怎么实现。我们做PLUGIN怎么注册呢?非常简单还是这个格式,做一个PLUGIN的标签,你为你自己的PLUGIN起一个名字,然后你要告诉PhoneGap说,我的这个名字对应是我哪一个Java,所以这个名字不需要和Java的名字一样,因为是通过这种方式进行注册。这个注册完了。这是在Java环境里面全实现了,你做了一个Java类,然后你把结果反馈回来,接下来你注册在PLUGIN这个文件里面。
我给Java做完了,下面就是说你要把做好的PLUGIN暴露出来让JAVASCRIPT文件,我这个你得加入这个LIST方法,当别人调用的时候这是你做的JAVASCRIPT接口,所以其他人调用你这个接口,然后给他传参数,他需要传是你调这个方法设定的回调函数,这是第三方JAVASCRIPT方法传进来的,在你这个LIST方法里面你就调用PhoneGap.EXEC,这就是PhoneGap到CS的里面一个方法,你一查CALL就知道了。我调用这个方法的时候,我调用的是这个插件,用这个插件调LIST。还没完,你还需要在JAVASCRIPT里面做插件,把你的插件放进去就完了。当你调用PhoneGap.ADDPLUGIN的时候,这里面加了一个数组,其他人调用的时候在这个数组里面寻找,知道你调的是什么不同的PLUGIN。
使用的人怎么调呢?
实际上我NEW一个这个加进去了。其他使用者调用你PLUGIN,叫WINDOW.PLUGINS,在这个数组里面有一个Callslisting,然后到LIST,传递给他回调函数,成功的回调函数和成功的回调函数,这个R和E是JAVA返回来,会在事件对象里面,你通过R和E来获得这个对象,这就是实现一个插件来做。
你可以到PhoneGap站点上非常清楚怎么来做这个PLUGIN。我今天讲这个PLUGIN不是告诉各位怎么做PLUGIN。我是想通过PLUGIN这个机制来给各位解释在ANDROID到底怎么调用?
刚才他调用的是我这个对象的PhoneGap提供给我们JAVASCRIPT的方法,我们告诉他调用哪一个PLUGIN,这个PLUGIN实际上就是我们当时在JAVA里面,这个PLUGIN当时JAVA那一端注册在PLUGINS.里面的这个名字,在JAVA说你调用这个名字是知道哪一类,然后他知道你调哪一个EXEC是调用哪一段,他就调用PLUGIN EXECUTE。这里面最诡异就是它怎么从这儿调到这儿来了?而且这儿结果返回来之后怎么就返回到我事件对象里面去了,这是它真正解决的地方。
所以我们看看它怎么实现JS和本地交互,我们以Android,以Android为例实际上做了两种方式,第一种你会知道当你在Android,实际上在PhoneGap里面他自己搭建了有一个内嵌HTBB,一启动就工作,通过内部的HTBB实现内部的沟通。
我们看一下它到底怎么做的?我们可以按以前的例子?一旦第三方调用我们LIST方法的时候,这个方法是从邮件上切下来了,一旦调用的时候,当然传回回调函数的值,这个里面会调一个名字,一个JSON命令,还有PROMPT,在弹框的时候根据一定的模式把这个数据写在弹框里面,如果你不做任何形式,用户就看到这个框了,PhoneGap不能让这个框弹出来,但是一旦弹出对话框,在JAVA那一边你就可以通过本地的对象就获取有弹框这个事件,我们在每一个PhoneGap启动应用类里面都覆盖了积类叫DROIDGAP,在这个DROIDGAP里面就直接覆盖了这个JSPrompt,在这个事件里面就不会弹框了,在这个代码里面直接调用PLUGINManager.EXEC。PLUGIN Manager也是一个类,所以这个时候就在这个里面,通过你传递不同的PLUGIN名字,就在里面找到底调哪一个PLUGIN,因为你所有的PLUGIN都是基于PLUGIN的积类,所以在你这个里面调用PLUGIN,最终调用是你自己实现的PLUGIN的方法,传递不同的参数,最终回调到你在JAVA的PLUGIN里面。但是有可能是异步、有可能是同步。
我现在调到JAVA里面了,下面我就想把这个数据返回给JS,这一段就是,一旦调用CDX.JAVASCRIPT,我们知道WEB应用最擅长就是SERVER连接,在这里面通过这种内嵌的方式。比如说我要读本地的通讯录长的话需要花一点时间,这个时间不是同步,是异步,所以通过SERVER把这个返回去。
在iOS实现方式又不一样了,在赛宾实现方式又不一样。IOS设备是这么做的,我没看,文档上自己写的,可以自己去看。在一些BLOG上有一些介绍。首先也是用这样个VIEW,他可以调一个DOCUMENT,把你调的类和对应方法和参数按照这种格式写上去,在NATIVE就返回去,具体怎么做你可以看CALL,所有CALL都是开源的。
下面花十分钟的时间我介绍介绍调试,因为我们在座都是做Web开发的,做WEB开发有一个很悲催的方式就是调试,你在桌面调试就是浏览器的开发工具,但是你要调试移动设备这就困难了,移动设备没开发者工具。现在好多人如果关注这方面,听说这个项目叫WEINRE,WEINRE就是让你在桌面一个环境里面,可以远程调试你移动设备上的WEB应用,或者是WEB站点。我们看看怎么做?我直接演示一下,因为你上网一搜就可以查到,我自己BOLG针对WEINRE的介绍。
你可以看到现在我起动了JAR WEINRE绑定了一个地址,就是说我把这台机器作为DEBUG的运行调试机,在我这个机器上运行。现在运行起来了,一旦运行起来之后,在这里面会告诉你让你访问一个地址,然后我们在浏览器里面访问它,那么这就是你的DEBUG SERVER,你就要测TARGET,比如说这台机器是我的SERVER,是TARGET,你可以自己搭一个DEBUG SERVER。我们现在可以做一个例子。这个例子里面可以看一下我的机器。你可以看到在我这个机器里面这是我的DEBUG SERVER的客户端,这是我的设备,比如说假设我们以这个为DEMO,访问这个DEMO。这个DEMO叫192.168.43.149,我可以输入这个DEMO,这里面有一个DEBUG,当我在这个ELEMENTS,我在这里选择的时候,可以看到我选择不同的节点,比如说我要改它,叫BLUE,COLOR叫RED,你可以在这里调试,当然你可以说直接输入OLERT,就在移动设备上自动弹出来,你也可以在多个设备上进行调试。这样可以在桌面上调试站点,如果用到本地的存储了,可以看到本地对应的网络、本地存储的值、数据库都可以看到。但是现在目前来讲还不支持断点。
你如果需要调试的话,需要加入一个代码,叫SCRIPT SRC,如果公司有很多人用就可以自己加一个ID。如果你是用PhoneGap,你可以在在页面里面加入这样一个代码,PhoneGap启动的时候也是可以的。比如说我们看一个例子。在我这里面关掉,我启动,这是我自己做的一个特简单的一个DEMO。这个DEMO通过我们刚才看到的PLUGIN,然这个例子列出来,这就是PhoneGap的应用。在这里面可以对它进行调试,我可以改名字任何地方都可以改。比如说我点这个CALLS就可以把所有打的电话列出来,那你也可以改。这还挺麻烦的实际上,因为我如果为WEB做不是为一台做,要为多台做,每一个都玩这么一遍也够受的。
那Adobe出了一个叫Adobe Shadow。Adobe Shadow就是帮助在不同平台上做测试的,Adobe Shadow分为几部分,第一部分有客户端,首先在你的桌面上有一个客户端,比如说我们启一下,这是客户端,你装的时候要装一个客户端叫Adobe Shadow,你双击它就启动了。启动了之后现在只支持IOS和ANDROID。在我这个里面我点中这个CONNECTIONS,今天我这个内网有点问题,一旦你配制完毕以后,你每次做测试的时候在你本机来做,它就会自动的,比如说按照我的页面,在你本机运行这个GPS应用的时候,或者你访问不同的页面的时候,就会自动把你这个页面同步到所有的DEBUG设备上,不需要一个个输入。你可以看到现在它多了一个设备,多了一个EVANGELISM,我如果在这个设备上,在这个页面上点击这个BULL,你不用做任何操作在这个PAD就可以进行。比如说我点一个STOP,就退出来了。所以如果有多台设备,可以通过桌面远程控制所有的设备。如果说你要调试的话,可能针对某一台设备调试,就可以制定我点XB为这个设备调试,就点击这个括号,它就启动这个设备。
Adobe Shadow现在有一些限制,现在只能支持浏览器。还有每次来这个页面访问的时候,比如说我切了一个屏幕,可以看到我在这儿做了一些效果,或者比如说拖拽到这儿来,在这个屏上没变,现在只是配制时间,一旦我这个调试机器变换的时候,如果触犯不是这个配制的话,它不会变。这还是一个实验阶段。
最后一个实际上就是CORDOVA最后一点,CORDOVA和PhoneGap1.4之前的版本有一个非常重要的区别,如果你感兴趣就可以看到,在CORDOVA代码非常多的这样的代码,这叫VAR CHANNEL,这就是MB,就是基于模块的开发。我刚才给各位演示的就是卖手机的站点,你可以看到PhoneGap写程序的时候页面就是一个配制,你不会开一个新的配制。PhoneGap现在一个配制一个完整的应用。不是所有的JS文件和对应资源是一开始就需要的,因为你用大了以后需要用好多不同的资源,如果程序一开始加载的时候全写在脚本里面,你这个程序启动非常慢,现在基于模块化的JS开发,它的概念是通过DEFIN和REQUIRE,你可以DEFINE一个模块,一个模块就是一个JS对象,或者是一个类,或者是一个文件,这个你自己来决定的。你所有的代码写在这里面,当其他地方要用的时候,就说REQUIRE,你通过CHANNL来应用。这样在JS里面可以进行模块化进行开发。在PhoneGap之前没有这个事情,在1.4版本之前,PhoneGap里面代码,PhoneGap工程师自己觉得比较混乱,不是特别整齐。现在越来越多利用DEFINE和REQUIRE,我相信未来整个方向也是基于这个。他们现在管这个项目叫CORDOVA2.0,你如果关心可以到PhoneGap或者是CORDOVA项目站点上有好多Bolg谈这个事情。谢谢大家!
联系客服