最新消息:欢迎光临!

【转】使用Ripple提高PhoneGap开发效率

css3/html5 findever 1863浏览 0评论

Ripple发布已经有一段时间了,但是直到最近我才真正发现它是相当的酷。我想如果写一个Ripple的新手指引,也许会帮助你更有效的使用它。当我遇到问题或很酷的东西时,常常会这样考虑,我也非常想听听你的意见。

首先,到底什么是Ripple?Ripple是一个开源的Apache项目(http://incubator.apache.org/projects/ripple.html)。它允许浏览器作为移动设备的模拟器。目前已经支持Blackberry和PhoneGap。在这篇博客我只讨论PhoneGap。

Ripple作为Chrome的插件运行,这意味着,很明显,只有Chrome可以使用Ripple。你可以通过搜索“Ripple”,在Chrome网上商店或简单的点击这里获取插件。

一旦安装了Ripple,Chrome浏览器将得到一个新的工具图标:

插件可以在基于URL的任何http环境运行,甚至本机服务器。你不需要上传文件到一个公开主机。作为测试,你可以简单的指向一个在本机电脑上的HTML文件,然后点击Ripple图标。

点击启动Ripple,然后页面会重新加载Ripple模拟器界面。注意-Ripple会记住当前设置。如果稍后你返回这个页面,它会自动加载Ropple。只要再次点击Ripple图标,在该页面或网站禁止Ripple即可。(注意-我不是100%确定会发生这种情况-也许你会看到不一样的东西。)

从这开始有很多见鬼的事情。应用周围的每一个选项都可以让你进行各种配置和测试选择,但是如果你想专注于应用本身,你可以点击模拟器上的小箭头来隐藏它们。

你也可以有选择的关闭它们。(比如:打开右边的但是关闭左边的。)

大部分UI都是自我解释的。我就不多作介绍了,但是会提供一些必要的介绍。

Devices 设备

Ripple支持大量移动设备。最酷的是完全集成了PhoneGap的设备接口。如果你运行API的范例代码,并在不同的设备之间切换,你会看到正确的结果。这里是一些例子。

Platforms 平台

老实说,我根本不需要点这个。如果真的需要可以选择PhoneGap1.0.0,但我宁愿使用默认设置。对我来说通常默认是PhoneGap2.0.0。

Information 信息

永远不要用它,除非我想把它最小化。

Accelerometer 加速计

这个功能允许您测试运动功能。你可以点击这个小装置然后移动您的鼠标或点击震动按钮。所有关于PhoneGap加速计API的功能在这里都工作的挺好。上个月我发布了一个用Ripple完成的加速计应用程序。

Settings 设置

再一次,这应该是显而易见的。工具提示和主题提供一些Ripple本身的UI选项。然而,Cross Domain Proxy跨域代理是其中一个非常重要的选项。

其中一个问题是使用桌面浏览器进行移动开发,用Ajax代码进行跨域请求是很难的。这是浏览器的安全问题并且超过你所能控制的范围。但还是有办法的。使用Chrome,你可以带着一个flag启动浏览器绕过这个限制。另一种选择是使用JSON/P。最后,如果远程服务使用CORS,那么你可以仅仅使用API,不需要担心什么了。

Ripple允许你使用远程APIs直接简单的使用代理服务。所以当你的代码要求返回结果foo.com/fancy.api,Ripple拦截请求,使用自己的服务器数据生成结果,将结果返回给你。

我遇到两种会引起问题的情况。

首先-我做了一个API的测试,在Chrome里运行良好(使用flag允许跨域调用),但在Ripple运行失败。为什么呢?因为我忘记了这个API采用远程IP规则。从我的IP运行良好,远程IP地址则无法运行。为了解决这个问题,我要求朋友暂时删除IP规则。
第二-Ripple的代理完全阻止parse.com的请求。我不知道为什么,但它就是这样。

幸运的是,有一个简单方法可以解决它。parse.com可以使用CORS工作,Ripple现在允许你禁用代理。

我使用Parse.com demo测试了几分钟,然后很快禁止它,然后它在Ripple里运行一切正常。

Device & Network Settings 设备和网络设置
允许你设置连接类型。完全符合PhoneGap的连接API。我在Adobe Developer Connection的最新文章(使用Parse.com和PhoneGap – 第2部分:The phone strikes back)讨论使用连接API启用或禁用UI组件,这在Ripple工作出色。

Geo Location 地理位置

在Chrome中它工作的很好,但是Ripple允许你模拟不同的位置。这在测试过程中,令人难以置信的有用。

Config 配置

如果你的PhoneGap应用使用config.xml文件,Ripple会尝试读取并解析XML文件。这里是一个例子。

Events 事件

最后,事件部分允许你模拟各种不同事件。不能完全支持PhoneGap事件API。比如,电池事件没有了。但是如果有需要,你可以进控制台然后手动触发这些事件。

What Else? 还有别的吗?

说实话,过去我避免使用Ripple的原因是,我相信以上就是Ripple支持的功能了。但事实并非如此。比如,Ripple支撑PhoneGap的相机API。它通过简单的上传图片来代替相机的拍摄行为。下面是一个例子,演示应用程序请求执行照相机拍摄行为。

点击选择文件会出现一个文件浏览器,一旦你选择某个文件,就可以预览图片,非常像真实的设备。

另一个是notification部分通知功能。你可以不使用标题和按钮属性,发送一个notification.alert。callback工作正常,但马上会停止,而不是在我关闭alert之后。震动通过简单的摇晃模拟器实现(我认为在这现实生活中是不可思议的。)

虽然没有警报声音,但是它带来一些很酷的东西。那么当你一个Ripple不支持的API会发生什么?

正如你所看到的,Ripple注意到了问题,并为你提供一个快捷方式来处理它。你可以输入一个JSON结果来模拟你预期的结果。

Compass指南针API如何?是的,工作正常。如果你修改地理位置的设置,你就会看到变化。再次-我想假设面板是一个功能。我没想到它会和compass一起工作。

那么Contact 联系API如何?创建没问题,虽然不是真的在你的桌面创建新联系人。不能搜索,但是Ripple允许你使用JSON来模拟。

那么File API?我还没有尝试这个。Chrome支持文件系统API,所以这个API的某些部分可能起作用,但是如果文件传输可以正常工作我会很惊讶。(每一次当我以为Ripple不能干某事,它就会让我吃惊。)

Globalization目前完全不支持。Capture和Media也不支持。我没有尝试Splashscreen,因为这涉及到本地设置。

由于InAppBrowser API使用window.open,虽然这是简单的工作,但我想像中的很多事件都不支持。

最后,Storage就是WebSQL,所以Chrome完全支持。

最后我还要说一个重要提示。使用Ripple时,你要包含一个脚本标签指向cordova.js的拷贝。这与PhoneGap创建一个真正的文件不同。重要的是你使用的Android 版本,而不是iOS。今天我花费了很多时间调试一个非常奇怪的问题。我的deviceready时间失败了两次(顺便说一句,Ripple会自动处理失败事件)。最后发现罪魁祸首竟然是iOS cordova.js文件。这很奇怪,但幸运的是非常容易解决。

最后的提示,你可以在下面的网址找到源代码和支持论坛的链接:
http://ripple.tinyhippos.com/

原文链接:http://www.raymondcamden.com/index.cfm/2013/2/6/Using-Ripple-for-PhoneGap-Development

转自:http://bbs.9ria.com/thread-174198-1-1.html

转载请注明:Findever » 【转】使用Ripple提高PhoneGap开发效率

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址