为iPhone和Android构建基于浏览器的应用程序

对象客户端—默认视图客户端——HTML手机软件开发培训第一品牌开发具有丰富特性的移动Web应用程序在过去一直面临着重重困难，但是这一局面正在迅速改变。网速不够快的问题仍然没有完全解决，但是随着3G技术开始广泛应用于移动电话，这一问题已经得到了极大地改善。同样，用户界面也有了很大的改进，iPhone是这一领域的领先者，而Android则通过创新的设计以及能够实现最佳HTML和CSS呈现的强大的WebKit引擎获得了发展动力。用户使用蹩脚的移动UI再也无法出色地完成工作。和桌面浏览器体验一样，当将本地数据库存储用于浏览器后，移动Web应用程序也经历了一次复兴。另一项助力下一代移动Web应用程序的技术是Ajax。Ajax描述了这样一种实践：使用JavaScript调用服务器端页面以通过HTTP检索特定数据元素，这个过程不需要检索和重新呈现全部Web页面。由于Ajax以异步方式工作，因此移动Web应用程序在特性功能方面得到了巨大的改进。在本文中，我们将主要针对iPhone和Android。为了方便开发，我们还将在桌面中测试Safari内的应用程序。由于Safari同样基于WebKit，因此它是一个理想的开发平台，它加速了开发并提供了出色的调试帮助，这要归功于十分有用的WebKitInspector应用程序。手机软件开发培训第一品牌在开始研究代码细节之前，让我们先来了解一下这个应用程序的目标。我们希望通过这个网络监控/管理应用程序完成哪些事呢？如果您曾经管理过一个面向客户的Web站点—内部和外部—那么您很可能收到过一个表示Web站点停止运转的通知。这条通知可能来自一个自动的主动监视工具，有时甚至是您不愿意看到的形式，比如来自客户的电子邮件或电话，表示“网站停止运行。请尽快检查并给予回复。”当遇到此类问题时您的第一反应是什么？您会打开浏览器并尝试加载主页。也许宕机与某个位置的连接性有关。有时会发生这种情况，并且这样做也是有收获的，避免您花费力气来寻找根本不存在的问题。当我们排除了基本的客户机连接性问题后，诊断的下一步是尝试收集一些关键的细节，比如文件系统资源、可用内存、各种连接性、最新的错误消息，等等。执行这些操作通常需要通过RemoteDesktop或SSH会话访问服务器本身。但是，如果您碰巧不能使用桌面计算机，那该怎么办？手机软件开发培训第一品牌收到表示“站点停止运转”的通知绝对不是件好玩的事。它经常会在不合时宜的时间发生，比如当您不在办公室并且没办法使用传统Internet连接时。这常常令您一筹莫展，不知该如何是好。随着时间的推移，您了解到某个特定站点出现故障的原因无非就那么几个。问题可能是由于一个外部资源（数据库或第三方支付处理程序）不可用；或者文件传输失败，Web站点的部分呈现包含了不恰当或过时的信息。不管出于哪些问题，在诊断问题的初始阶段，一些关键的统计数据会有帮助。这些统计数据或性能指标因站点而异。而我们将在本文探讨的应用程序的目标就是构建一种可以解决此类问题的工具。本文讨论的应用程序旨在帮助您在办公室以外的环境下诊断Web站点问题。如果您有一台iPhone或Android设备，那么您已经获得了一些动力。我们可以利用这些强大平台的功能来帮助管理我们的Web站点。手机软件开发培训第一品牌此应用程序的设计动机是尽可能地独立于服务器数据库—换言之，我们希望此应用程序可以在无需对第三方服务创建帐户的情况下运行。我们准备这样构建应用程序：用户只需下载一次Web页面，之后就可以在其浏览器中本地运行它。当然，用户可以根据需要对页面设置书签并执行刷新，以获取随后添加到应用程序中的任何新特性。然而，所有数据都被本地存储在移动设备中的SQL数据库中。虽然将这类数据存储到服务器等位置确实有其优势，但是针对多名用户管理和存储数据的功能不属于本文讨论范围。我们关注的主要问题是利用本地存储和Ajax构建一个实用的、有用的应用程序。我们最后将提出一些用于扩展应用程序的逻辑步骤。此应用程序的代码可以分为两个不同的部分。我们具有运行在移动设备上的代码，其中包括：手机软件开发培训第一品牌index.html文件，这是应用程序的shell。名为netmon.js的JavaScript文件，其中包含应用程序的大部分功能。另一个名为json2.js的JavaScript文件，包含与JSON相关的例程。多个CSS文件，包含样式信息。回忆一下第1部分，许多样式信息包含在一个主要的CSS文件中。然而，我们使用特定于设备的CSS文件来帮助在一个特定平台上重新定义应用程序的感观。我们包含jquery.js库文件来实现DOM操作和Ajax查询。我们还包含运行在服务器上的代码，并且这些代码对于每一个希望管理的站点都是不同的。这些代码的细节在其实现方面存在差异，但是产生的内容始终是相同的：一个JavaScriptObjectNotation(JSON)对象，其中包含了一些特定的属性，包括属性名，即由名称/值对组成的数组。这个JSON对象中的数据描述了如何在应用程序的浏览器中呈现它。此外，名称/值对包含针对每个站点的关键操作数据，因此提供了快速了解情况并帮助支持人员正确地确定和解决问题所必需的信息。手机软件开发培训第一品牌我们首先了解此应用程序的数据模型。当对数据模型有所了解后，我们将查看与数据交互的代码，从而构建实际的应用程序。手机软件开发培训第一品牌当通过浏览器将数据存储在移动设备上时，实际上数据被存储在一个HTML5数据库，或一个可通过浏览器访问的SQL数据库存储中。基于浏览器的SQL数据的规范仍然在不断演变，具体细节仍然在整理当中。然而，就实践而言，我们现在已经可以将它用于iPhone、Android和其他支持WebKit的环境中。这个数据库功能实际上就是一个与底层SQLite实现交互的JavaScript接口。我们的数据库只包含一个表：tbl_resources。该表模拟了应用程序在运行时使用的数据—实际上就是一个JSON对象。每个对象包含以下内容：站点名。站点主页的URL。站点的关键统计数据URL；我们称之为pingURL。站点的当前状态：OK或BAD。站点的当前摘要，这是一段简短的文本，描述了站点的当前状态。比如，“数据库当前停止运行”。一个名称/值对数组，包含特定于站点的细节，用于描述站点的当前运行状态。注意，即使站点没有停止运转，这些值仍然非常重要。一个特定的元素可能包含有可以帮助了解即将发生的问题的数据。手机软件开发培训第一品牌[{name:'msi-wireless.com',homeurl:'pingurl:'status:'OK',summary:'Everythingisfine...',items:[{name:'DiskSpace',value:'22.13GB'},{name:'DatabaseUp?',value:'Yes'}]}]手机软件开发培训第一品牌数据库的作用是长时间持久化数据，但这是通过包含这些对象的数组实现的，而不是不断地引用数据库。这个策略的实现大大简化了JavaScript内的操作，并且最小化了数据进出数据库的次数。然而，对于具有大量数据元素的应用程序，直接使用数据库可能更具优势，或者很可能使用某种“分页”模式，其中每次从数据库获取大量元素，而一个JavaScript数组将包含元素的一个“窗口”，表示全部数据项的其中一个子集。图1包含了数据库结构的屏幕快照，其中包含一些记录。可以通过WebInspector查看数据库，该工具是Safari/WebKit浏览器平台的一部分。这也是为什么WebKit开发具有强大功能的原因之一。我们将在桌面上查看WebInspector。所有代码在iPhone和Android上都表现良好。注意：AndroidV2.0是这些代码的目标。Android中设置的WebKit特性随着版本的发行而日趋成熟。手机软件开发培训第一品牌图1.数据库结构的屏幕快照，其中包含一些记录现在我们已经了解了数据元素的大致样子，那么如何使用我们的应用程序管理它们呢？手机软件开发培训第一品牌应用程序的默认UI是一个列表，其中列出了正在管理中的站点，这些站点根据其状态值排序。状态为notOK的站点被列在了前面，如图2所示。图2.状态为notOK的站点手机软件开发培训第一品牌我们看到有三个站点处于管理中。目前，有两个站点显示出现问题。如果一个站点处于良好的状态，那意味着它的状态属性为OK，那么我们将不会显示摘要字段，并且将以黑色文本显示。如果状态为BAD，我们将在站点名称旁边显示摘要，并且CSS文件中名为BAD的样式将指出呈现属性—本例中为红色文本。有关更多细节，参考文件netmon.css；此应用程序的完整源代码可以从下载部分获得。通过单击某个条目，就可以隐藏或显示有关该条目的细节。如图2所示，每个条目都有三个可用链接，其中为主页和pingURL位置，然后是包含了有关站点细节的部分，即表示该站点的状态的名称/值对列表。手机软件开发培训第一品牌在本例中，我们看到此站点的名称为ibmdemo2，其摘要为“Nomorecoffee?”，这当然不算什么紧迫的技术事件，但是为我们提供了一个有趣的示例。跳到该条目的Details部分，我们看到这个服务器条件下隐藏的关键统计数据为：TheCoffeePotisempty。我们可以点击主页链接，这将启动一个新的浏览器窗口。其次，我们可以通过进入Refresh链接刷新数据。我们稍后将查看Refresh步骤。最后，我们通过选择Remove链接删除这个条目。一个简单的window.confirm()查询要求我们确认是否希望执行这个不可恢复的任务。手机软件开发培训第一品牌要创建该列表，需要详细了解两个文件。第一个文件为index.html，如清单2所示，第二个文件为netmon.js，如清单3所示。在本文中，我们同时还将探查一些代码片段，您可以从下载部分获得完整的源代码。我们仍然指定移动WebKitviewportmeta来帮助指导浏览器按照我们希望的方式呈现页面。我们还使用一些可选的JavaScript来指定一个针对特定设备的CSS文件。新内容是包括了JS文件和一些“逻辑”JavaScript文件。该文件补充了一个新的HTMLdiv和IDentryform