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

手机软件开发培训第一品牌



在开始研究代码细节之前，让我们先来了解一下这个应用程序的 目标。我们希望通过这个网络监控/管理应用程序完成哪些事呢？ 如果您曾经管理过一个面向客户的 Web 站点 — 内部和外部 — 那么您很可能收到过一个表示 Web 站点停止运转的通知。这条通 知可能来自一个自动的主动监视工具，有时甚至是您不愿意看到 的形式，比如来自客户的电子邮件或电话，表示 “网站停止运行。 请尽快检查并给予回复。” 当遇到此类问题时您的第一反应是什么？您会打开浏览器并尝试 加载主页。也许宕机与某个位置的连接性有关。有时会发生这种 情况，并且这样做也是有收获的，避免您花费力气来寻找根本不 存在的问题。 当我们排除了基本的客户机连接性问题后，诊断的下一步是尝试 收集一些关键的细节，比如文件系统资源、可用内存、各种连接 性、最新的错误消息，等等。执行这些操作通常需要通过 Remote Desktop 或 SSH 会话访问服务器本身。但是，如果您碰 巧不能使用桌面计算机，那该怎么办？
{

手机软件开发培训第一品牌



数据库的作用是长时间持久化数据，但这是通过包含这些对象的 数组实现的，而不是不断地引用数据库。这个策略的实现大大简 化了 JavaScript 内的操作，并且最小化了数据进出数据库的次数。 然而，对于具有大量数据元素的应用程序，直接使用数据库可能 更具优势，或者很可能使用某种 “分页” 模式，其中每次从数据 库获取大量元素，而一个 JavaScript 数组将包含元素的一个 “窗 口”，表示全部数据项的其中一个子集。 图 1 包含了数据库结构的屏幕快照，其中包含一些记录。可以通 过 Web Inspector 查看数据库，该工具是 Safari/WebKit 浏览器 平台的一部分。这也是为什么 WebKit 开发具有强大功能的原因 之一。我们将在桌面上查看 Web Inspector。所有代码在 iPhone 和 Android 上都表现良好。 注意：Android V2.0 是这些代码的目标。Android 中设置的 WebKit 特性随着版本的发行而日趋成熟。

手机软件开发培训第一品牌


收到表示 “站点停止运转” 的通知绝对不是件好玩的事。 它经常会在不合时宜的时间发生，比如当您不在办公室并且 没办法使用传统 Internet 连接时。这常常令您一筹莫展， 不知该如何是好。随着时间的推移，您了解到某个特定站点 出现故障的原因无非就那么几个。问题可能是由于一个外部 资源（数据库或第三方支付处理程序）不可用；或者文件传 输失败，Web 站点的部分呈现包含了不恰当或过时的信息。 不管出于哪些问题，在诊断问题的初始阶段，一些关键的统 计数据会有帮助。这些统计数据或性能指标因站点而异。而 我们将在本文探讨的应用程序的目标就是构建一种可以解决 此类问题的工具。 本文讨论的应用程序旨在帮助您在办公室以外的环境下诊断 Web 站点问题。如果您有一台 iPhone 或 Android 设备， 那么您已经获得了一些动力。我们可以利用这些强大平台的 功能来帮助管理我们的 Web 站点。


当通过浏览器将数据存储在移动设备上时，实际上数据被存储在一个 HTML 5 数 据库，或一个可通过浏览器访问的 SQL 数据库存储中。基于浏览器的 SQL 数据 的规范仍然在不断演变，具体细节仍然在整理当中。然而，就实践而言，我们现 在已经可以将它用于 iPhone、Android 和其他支持 WebKit 的环境中。这个数 据库功能实际上就是一个与底层 SQLite 实现交互的 JavaScript 接口。我们的数 据库只包含一个表：tbl_resources。 该表模拟了应用程序在运行时使用的数据 — 实际上就是一个 JSON 对象。每个 对象包含以下内容： 站点名。 站点主页的 URL。 站点的关键统计数据 URL；我们称之为 ping URL。 站点的当前状态：OK 或 BAD。 站点的当前摘要，这是一段简短的文本，描述了站点的当前状态。比如，“数据 库当前停止运行”。 一个名称/值对数组，包含特定于站点的细节，用于描述站点的当前运行状态。注 意，即使站点没有停止运转，这些值仍然非常重要。一个特定的元素可能包含有 可以帮助了解即将发生的问题的数据。


我们看到有三个站点处于管理中。目前，有两个站点显 示出现问题。如果一个站点处于良好的状态，那意味着 它的状态属性为 OK，那么我们将不会显示摘要字段， 并且将以黑色文本显示。如果状态为 BAD，我们将在 站点名称旁边显示摘要，并且 CSS 文件中名为 BAD 的 样式将指出呈现属性 — 本例中为红色文本。有关更多 细节，参考文件 netmon.css；此应用程序的完整源代 码可以从 下载 部分获得。 通过单击某个条目，就可以隐藏或显示有关该条目的细 节。如 图 2 所示，每个条目都有三个可用链接，其中 为主页和 ping URL 位置，然后是包含了有关站点细节 的部分，即表示该站点的状态的名称/值对列表。

手机软件开发培训第一品牌

我们首先了解此应用程序的数据模型。当对数据模 型有所了解后，我们将查看与数据交互的代码，从 而构建实际的应用程序。
手机软件开发培训第一品牌 Nhomakorabea手机软件开发培训第一品牌

应用程序的默认 UI 是一个列表，其中列出了正在管理中的站点，这些站点 根据其状态值排序。状态为 not OK 的站点被列在了前面，如图 2 所示。 图 2. 状态为 not OK 的站点


手机软件开发培训第一品牌

手机软件开发培训第一品牌

图 1. 数据库结构的屏幕快照，其中包含一些记录

现在我们已经了解了数据元素的大致样子，那么如何使用我们的应用 程序管理它们呢？


手机软件开发培训第一品牌



此应用程序的设计动机是尽可能地独立于服务器数据库 — 换言之，我们希望此应用程序可以在无需对第三方服务创建 帐户的情况下运行。我们准备这样构建应用程序：用户只需 下载一次 Web 页面，之后就可以在其浏览器中本地运行它。 当然，用户可以根据需要对页面设置书签并执行刷新，以获 取随后添加到应用程序中的任何新特性。然而，所有数据都 被本地存储在移动设备中的 SQL 数据库中。 虽然将这类数据存储到服务器等位置确实有其优势，但是针 对多名用户管理和存储数据的功能不属于本文讨论范围。我 们关注的主要问题是利用本地存储和 Ajax 构建一个实用的、 有用的应用程序。我们最后将提出一些用于扩展应用程序的 逻辑步骤。 此应用程序的代码可以分为两个不同的部分。我们具有运行 在移动设备上的代码，其中包括：
手机软件开发培训第一品牌
简介 应用程序 设计考虑事项 构建应用程序 数据模型 清单 1. 表示某个站点的 JSON 对象 客户端 — 默认视图 客户端 —— HTML

手机软件开发培训第一品牌



开发具有丰富特性的移动 Web 应用程序在过去一直面临着重重困难，但 是这一局面正在迅速改变。网速不够快的问题仍然没有完全解决，但是 随着 3G 技术开始广泛应用于移动电话，这一问题已经得到了极大地改 善。同样，用户界面也有了很大的改进，iPhone 是这一领域的领先者， 而 Android 则通过创新的设计以及能够实现最佳 HTML 和 CSS 呈现的 强大的 WebKit 引擎获得了发展动力。用户使用蹩脚的移动 UI 再也无法 出色地完成工作。 和桌面浏览器体验一样，当将本地数据库存储用于浏览器后，移动 Web 应用程序也经历了一次复兴。另一项助力下一代移动 Web 应用程序的技 术是 Ajax。Ajax 描述了这样一种实践：使用 JavaScript 调用服务器端 页面以通过 HTTP 检索特定数据元素，这个过程不需要检索和重新呈现 全部 Web 页面。由于 Ajax 以异步方式工作，因此移动 Web 应用程序 在特性功能方面得到了巨大的改进。 在本文中，我们将主要针对 iPhone 和 Android。为了方便开发，我们 还将在桌面中测试 Safari 内的应用程序。由于 Safari 同样基于 WebKit， 因此它是一个理想的开发平台，它加速了开发并提供了出色的调试帮助， 这要归功于十分有用的 WebKit Inspector 应用程序。

手机软件开发培训第一品牌

[
name : '', homeurl : '', pingurl : '/mobile2/netmon.php', status : 'OK', summary : 'Everything is fine...', items : [ {name : 'DiskSpace', value : '22.13 GB'}, {name : 'Database Up?', value : 'Yes'} ] } ]

手机软件开发培训第一品牌



在本例中，我们看到此站点的名称为 ibm demo 2，其 摘要为 “No more coffee?”，这当然不算什么紧迫 的技术事件，但是为我们提供了一个有趣的示例。跳到 该条目的 Details 部分，我们看到这个服务器条件下隐 藏的关键统计数据为：The Coffee Pot is empty。 我们可以点击主页链接，这将启动一个新的浏览器窗口。 其次，我们可以通过进入 Refresh 链接刷新数据。我 们稍后将查看 Refresh 步骤。 最后，我们通过选择 Remove 链接删除这个条目。一 个简单的 window.confirm() 查询要求我们确认是否希 望执行这个不可恢复的任务。

手机软件开发培训第一品牌


index.html 文件，这是应用程序的 shell。 名为 netmon.js 的 JavaScript 文件，其中包含应用程序的大部分功能。 另一个名为 json2.js 的 JavaScript 文件，包含与 JSON 相关的例程。 多个 CSS 文件，包含样式信息。回忆一下第 1 部分，许多样式信息包含 在一个主要的 CSS 文件中。然而，我们使用特定于设备的 CSS 文件来帮 助在一个特定平台上重新定义应用程序的感观。 我们包含 jquery.js 库文件来实现 DOM 操作和 Ajax 查询。 我们还包含运行在服务器上的代码，并且这些代码对于每一个希望管理 的站点都是不同的。这些代码的细节在其实现方面存在差异，但是产生 的内容始终是相同的：一个 JavaScript Object Notation (JSON) 对象， 其中包含了一些特定的属性，包括属性名，即由名称/值对组成的数组。 这个 JSON 对象中的数据描述了如何在应用程序的浏览器中呈现它。此 外，名称/值对包含针对每个站点的关键操作数据，因此提供了快速了解 情况并帮助支持人员正确地确定和解决问题所必需的信息。