第24章 网络通信

移动技术再加上无所不在的互联网，已经完全改变了我们生活的这个世界。如今坐在公园里就可以打理你的银行账户，或者在亚马逊书店搜索你正在阅读的图书的评论，或者查阅Twitter看看世界上其他公园里的人们都在想些什么。手机只能打电话发短信的时代已经过去，它可以让你随时随地访问世界各地的数据。

虽然手机中的浏览器可以访问互联网，但由于屏幕太小，而且速度受到限制，让使用者感到不适。如果能够定制应用，有针对性地从网络上抓取所需要的信息，以适应手机终端的特点，就可以获得比浏览器更具吸引力的替代方案。

本章将介绍App Inventor中用于访问互联网信息的组件：Web浏览框组件——在应用的用户界面中访问一个网页；Web客户端组件——了解API，并利用API访问来自网络服务端的数据。

创新就是对这个世界的重组，以一种新奇的方式将旧的观念和内容组合在一起。阿姆的专辑Slim Shady追随了AC/DC与Vanilla Ice的风格，并使这种混搭的音乐风行一时。这一类的“模仿”非常普遍，以至于许多艺术家，包括Girl Talk及Negativland，都致力于将旧的内容融入某种新的风格。

无独有偶，在网络及移动世界中，网站及应用混合了来自各种渠道的数据及内容，而且很多网站在设计理念上遵循了互联互通原则（interoperability）。混搭型网站的一个典型案例就是Housing Maps（http://www.housingmaps.com ），如图24-1所示，它从网站Craigslist（http://www.craigslist.org ）上采集房屋租赁信息，并与谷歌地图API结合起来，提供一种新型的信息服务。

图24-1 住房地图应用将Craigslist网站上的房屋信息与谷歌地图信息叠加起来

谷歌地图不仅是一个可供人类访问的网站，同时也为其他应用程序提供接口服务（Web service API），这使得“住房地图”这类混搭应用成为可能。我们普通人只能通过浏览器访问http://maps.google.com 来查看谷歌地图，但像“住房地图”这样的应用可以访问谷歌地图API来实现机器与机器之间的通信。混搭应用处理并组合来自其他站点（如Craigslist）的数据，并将它们以一种更有意义的方式呈现出来。

现在，几乎所有流行的网站都提供这种备选方案：机器对机器的访问。提供数据的一方称为网络服务，而客户端应用与网络服务之间的通信协议则称为应用程序接口，或API。事实上，术语API已经成为网络服务的代名词。

亚马逊网络服务（Amazon Web Service，即AWS）是最早的网络服务之一，由于亚马逊公司向第三方应用开放了它的业务数据，最终导致图书销量的增加。同样，当2007年Facebook发布了它的API时，也吸引了无数人的眼球。Facebook的数据不同于图书广告，那么为什么它甘愿让其他应用“偷走”它的数据，同时也可能拉走它的用户呢（还有广告收入！）？事实上，开放把Facebook从一个网站变成了一个平台，这意味着其他程序也可以运行在这个平台上，并利用平台的功能。现在，没有人能质疑Facebook的成功。到2009年Twitter发布时，API访问已经是意料之中的事情。果然，Twitter也如此行事。现在，如图24-2所示，大多数的网站都同时提供人机访问接口。

图24-2 大多数网站同时提供用户界面及应用程序接口

对于我们普通人来说，互联网就是不计其数的可供访问的网站，而对于程序员来说，它却是一个世界上最大也最丰富的信息数据库。

Web浏览框组件

如果你想在应用中显示网页，就要用到Web浏览框组件。例如，显示谷歌地图，并标注用户的当前位置，或者追踪在Twitter上与你的应用有关的热门话题，再或者打开NBA官方网站查看你最喜爱球员的统计信息，等等。

如同画布组件一样，Web浏览框组件在屏幕上嵌入了一个窗口，差别在于画布是绘图及动画的容器，而Web浏览框是网页的容器，如图24-3所示。

图24-3 设计视图中的Web浏览框

在设计视图中，从组件面板的用户界面分组中拖出Web浏览框组件；在编程视图中，可以动态地改变要显示的网页地址。如图24-4所示，点击显示球员图片的按钮，可以访问NBA官方网站中该球员的专有页面，并查看相关的统计信息。

图24-4 在Web浏览框中显示选中球员的网页

假设用户点击了科比的照片，应用将在Web浏览框中显示科比•布莱恩特的页面，如图24-5所示。

图24-5 应用中的Web浏览框

Web客户端组件

Web浏览框组件的功能仅限于显示网页，而Web客户端组件这个App Inventor组件中的新成员，可以使用HPPT协议，在应用中非常方便地实现与网络服务之间的通信。HTTP协议提供了Get、Put及Post方法，来实现与网络服务之间的信息交换。从网络服务中返回的信息不是可见的页面，而是数据，你可以根据需要处理并显示这些数据。

Web客户端是一个相对底层的组件，要想使用它，需要一些编程的专业知识。一种惯用的方法是，首先设置组件的网址属性，来定义即将与之通信的网络服务地址，然后选用一种HTTP方法来请求执行某一项操作。之前，你还需要了解网络服务的接口协议，以及如何处理网络服务返回的信息。处理信息的过程也被称为解析数据，是一种高级的编程技术。

本章将通过一个非常简单的例子，介绍Web客户端组件的使用方法。在这个例子中，我们将访问雅虎财经的公共API，并从中获得股票价格信息。与这个API通信的协议很简单，并且返回的数据格式是逗号分隔的文本，因此这是一个介绍与API通信的极好的例子。不过，绝大多数的API都有着严格的访问限制以及复杂的功能接口，而且通常返回JSON或XML格式的数据，需要编写程序来解析这些数据。

举例：获取股票信息

在这个例子中，当应用启动时，我们将访问谷歌公司的股票信息，代码如图24-6所示。

图24-6 用Web客户端组件实时访问股票信息

在屏幕初始化程序中，首先，设置Web客户端组件的网址属性，以便与雅虎财经API通信。然后，调用Web客户端组件的“执行GET请求”块。顾名思义，这个块的功能就是向API发送请求。接下来是等待API返回数据，不过数据并不会立即返回。

当应用接收到雅虎API返回的数据时，将触发Web客户端组件的收到文本事件，在这个事件处理程序中，可以对收到的数据进行处理。事件携带了4个参数，返回的数据保存在参数“响应内容”中。之前我们说过，雅虎财经API以CSV格式返回数据。此时，如果你测试应用，将在股票信息标签上看到两个数字，它们之间以逗号分隔，这就是此时此刻谷歌公司股票的价格，以及当天价格的变动。

你也可以自己设置Web客户端组件的网址属性，来获得其他公司（或多个公司）的股票信息，还可以请求不同种类的股票信息。下面的网址是雅虎财经API的具体使用说明，包括如何设置网址，以及返回数据的格式。参考网址：https://code.google.com/p/yahoo-finance-managed/wiki/CSVAPI 。

网络数据库组件及其兼容API

Web客户端组件提供了一种访问API的方法，如果这个API像雅虎财经一样简单，那么即使是刚入门的程序员也可以用Web客户端组件来访问它。但是其他的API，如第13章介绍的亚马逊API，使用起来就很复杂。

对于相对复杂的API，有经验的程序员会自己搭建一个网络服务，这个网络服务与网络数据库组件兼容，可供那些经验不足的App Inventor开发者访问。一旦这样的网络服务搭建完成，其他开发者就可以利用网络数据库组件内置的请求数据模块，借助于简单的标记-数值对，来实现对网络服务的访问。在请求数据时，设定一个标记参数，将会返回一个值，这个值可能是列表，也可能是文本对象。利用这一方法，App Inventor开发者可以避免去解析那些标准格式的数据（如XML或JSON），这大大地降低了开发难度。

“与网络数据库组件兼容”意味着自己搭建的网络服务必须遵从网络数据库组件所要求的协议：接收特定格式的数据请求，并返回网络数据库组件可以接受的数据。第13章中使用的亚马逊API，就是一个兼容网络服务的例子。对于想自己搭建网络服务的程序员来说，也可以参照这个例子（例如，如果你是一名教师，可以为学生们搭建一个网络服务，来访问某个API）。

在过去，搭建一个API是一件很麻烦的事情，不仅需要了解编程技术及网络协议，还要自己搭建服务器来提供服务，并提供数据库来存放数据。不过现在这件事变得很容易，有许多商业公司提供云计算服务，如谷歌公司的云服务及亚马逊公司的弹性计算云。借助于这样的云服务，在很短时间内，就可以将自己的网络服务发布出去。这些平台不仅可以接受委托管理你的服务，还能在不必支付费用的情况下，让数以百计的用户访问你的服务。可以想象，这些平台为创新提供了巨大的支持。

创建与网络数据库组件兼容的网络服务，这项技术的细节已经超出了本书的范围，但如果你感兴趣，可以访问下面的网站，参考其中的文档及案例：http://appinventorapi.com/ 。

小结

大多数网站以及许多移动应用并非孤岛，它们遵从互联互通原则，利用其他网站的功能来实现自己的目标。在App Inventor中，你可以创建独立的应用，如游戏、知识问答等，但要不了多久，你就会遇到访问网络的问题。比如这样一些应用：我经常在同一个公交车站等车，能否有一个应用，告诉我下一班车何时到达呢？或者能否创建一个应用，给我Facebook中的部分好友发送短信呢？再或者，能否写一个可以发推文的应用呢？上述应用中无疑都涉及对互联网的访问，而App Inventor提供了三个组件，可以实现对网络的访问。第一个是Web浏览框组件，用于实时显示网页；第二个是Web客户端组件，用于访问网络API；最后一个是网络数据库组件，用于从某些专用的API上获取数据。

对于API的访问是复杂的，需要了解请求信息的协议，并处理（解析）返回的数据，而这些数据通常也是复杂的。但是一分耕耘，一分收获，掌握了这些技术，你的应用将会与整个世界互动。

注释

阿姆：Eminem，美国白人说唱歌手，1972年10月17日出生于密苏里州的堪萨斯城。在其音乐生涯中，至今共获得十五次格莱美奖，以及奥斯卡最佳电影歌曲奖。阿姆是世界上专辑最畅销的歌手之一。

Slim Shady：阿姆的第二张专辑，发布于1999年2月23日，是美国当年最畅销的专辑之一。阿姆凭借此专辑于2000年获得第42届格莱美最佳Rap歌手和最佳Rap专辑等奖项。

AC/DC：最著名的澳大利亚摇滚乐队，现有五名成员。乐队成立于1973年12月，代表作是Back in Black，乐队在世界范围内共售出了1.5亿张专辑，成为世界最为成功的硬摇滚乐队之一。

Vanilla Ice：美国白人说唱歌手、演员及电视节目主持人，出生于1967年10月31日，首张专辑To the Extreme于1989年发行。

Girl Talk：专攻混搭及数字音乐的美国音乐家、DJ，出生于1981年10月26日，2007年5月由一名工程师转行来做音乐，至今仍在做音乐。

Negativland：美国加州的一个实验音乐乐队，1979年成立于旧金山湾区，音乐风格倾向于拼贴、工业、掠夺采样、前卫等。

JSON：是英文JavaScript Object Notation的缩写，译为JavaScript对象表示法，用于描述数据的结构，也是一种数据格式，易于阅读和理解。例如一段描述学生信息的数据：

{name:张三, sex:男, age:15, score:{chinese:95, math: 87, english:88, physics:90}}

想必你能读懂这段数据的含义。

XML：英文eXtensible Markup Language的缩写，译为可扩展的标记语言。与JSON相同的是，它也是一种结构化的数据；不同的是，JSON采用键值对的方式记录数据，而XML用标签<>的方式记录数据。同样是一段学生信息的数据，用XML表示为：

<name>张三</name> 
<sex>男</sex> 
<age>15</age> 
<score>  
    <chinese>95</chinese> 
    <math>87</math> 
    <english>88</english>
    <physics>90</physics>
</score>