适用于Web应用程序的移动应用程序

时间:2011-07-14 13:15:05

标签: javascript html5 mobile-website mobile-application

我希望这个问题属于这里。我正在为客户开发一个Web应用程序。它涉及为商人创建约会/报价,需要一些建议。

基本上有些产品可以添加到在webapp上创建的引用中。我希望能够从智能手机中选择移动应用程序上的报价并填写报价。

我面临的问题是,由于可能并不总是存在互联网连接,我需要在设备上离线存储报价数据,以便在有互联网时可以同步。

以下是使用移动应用的流程:

  1. 用户从Web应用程序获取约会并存储它们(最好是在数据库中)
  2. 即使没有连接,用户也可以在约会上填写报价。
  3. 用户保存报价
  4. 移动应用自动向网络应用程序发送新报价(如果连接)
  5. 当互联网可用时,用户手动同步数据
  6. Web应用程序负责创建约会和管理产品。移动设备存储它自己的产品副本,只是对引用的引用。

    因此用户可以看到约会列表。选择约会,然后开始添加产品。

    约会

    appointment_id

    描述

    产品

    ID

    描述

    引用

    ID

    appointment_id

    PRODUCT_ID

    Web应用程序是用PHP开发的。

    我想利用HTML5的移动应用程序的离线存储,因为我是一名Web开发人员,没有时间在这个项目上学习母语(即Objective-C)。我在几个地方读过网页SQL数据库不会继续,所以我不确定我的选择是什么。

    对于思考HTML5和JavaScript的代码,所以可能使用jQTouch或jQuery Moble。

    如果有人对我有任何建议或建议会很棒!

2 个答案:

答案 0 :(得分:2)

我有一个jQuery Mobile应用程序,可以离线存储数据。用户在连接时将完成的记录推送到Web服务(该应用程序还使用HTML5中的离线功能)。这在Mobile Safari中使用Web SQL(在WebKit和Opera中是SQLite),在主要设备(iPad / iPhone)上运行良好,但在桌面上的Chrome和Safari中也完全正常运行(我没有尝试过Opera,但是显然它不适用于Firefox或IE)。

一些注意事项:

  • 正如您所指出的,Web SQL的未来有些不确定。您可能希望查看IndexedDB,尽管根据您需要支持Web SQL的浏览器可能会没问题。
  • 本地数据库的大小是有限的,但是如果你“清除”标记为完整并经常提交的数据你应该没问题(我认为它是每个数据库或其周围的5MB,非常可观)。
  • 我的应用程序通过ajax与SOAP Web服务进行通信,我们都在同一个域中。您可能需要查看CORS /反向代理,如果域不同
  • 我不喜欢在Javascript中摆弄XML,但是XMLObjectifier使事情变得更容易(将XML解析为JSON对象)

答案 1 :(得分:0)

  

PhoneGap应用程序使用HTML5和CSS3进行渲染,使用JavaScript作为逻辑

这意味着您有两种可能性,即您的应用程序中的客户端数据是否在没有应用程序更新的情况下进行修改。由于我无法根据您在问题中提供的信息确定,我将详细说明每个案例的答案。


如果您的客户数据不需要更新(不更新您的应用程序)

在这种情况下,您认为客户的数据是静态的。此数据的来源不相关,因为在分发应用程序之前,您将其包含在应用程序数据中,如任何其他文本或图像(或其他资产)。这意味着您的客户端的 listing 将与您的应用程序绑定,修改它们将需要更新您的应用程序。

从技术上讲,这意味着您只需将客户端的数据添加为静态文件即可。它可以是HTML5代码,就在您自己的应用程序代码的中间,或者它可以是任何类型的文件(例如Json),您的应用程序必须解析和显示(使用JavaScript)。

但是,如果您使用HTML5解决方案,出于可维护性目的(以及其他原因),您可能希望将客户端内容与应用程序中的内容分开。为此,请创建一个包含客户端数据的HTML5 / CSS3页面,并使用that method将其包含在应用程序的页面中(或者您可以使用{{3}中提到的pager.js库。 }})。

作为旁注:在本案中,下一个方法将与此方法一样好;有点复杂的缺点。

如果您的客户的数据需要在不更新应用程序的情况下进行更新

在这种情况下,您认为客户的数据是动态的。数据的来源是相关的,因为只有获取数据的方法将存储在您的应用程序中:其余的将由执行您的应用程序的设备完成。虽然实现起来比较复杂,但这种方法的优点是可以在不需要更新应用程序的情况下不断更新数据。

从技术上讲,这意味着您将在HTML5 / CSS3中描述您的应用程序布局和(图形)设计,并且您将编写应用程序行为(获取客户端数据,存储它,查询,显示它等)的代码。的JavaScript。

为此,您需要使用JavaScript(嵌入在应用程序的HTML5文件中)获取客户端的信息,然后再次使用JavaScript将这些信息存储在this answer中。然后,您的应用程序还需要查询PhoneGap Storage(仍然使用JavaScript)来访问存储的信息并显示它,根据HTML5 / CSS3文件中描述的布局/设计(可能是您的HTML5骨架)应用程序为您的客户端数据逻辑布局,CSS3 ID和类的设计/外观)。

值得注意的是,如果您有一个永远在线的设备,只要您的客户的网站已启动,您就不需要将该列表信息存储在您的应用程序中。但是,如果客户的网站出现故障,或者设备脱机,则需要本地存储。

底线

换句话说,如果您的应用程序从不需要Internet连接,则可以安全地将列表包含在HTML5 / CSS3数据中;否则,您需要使用JavaScript / PhoneGap Storage解决方案,即使它更复杂。

相关问题