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

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