App Inventor编程教程-第25课-网络通信-少儿编程教育网

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

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

本章将介绍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结合起来,提供一种新型的信息服务。

App Inventor编程教程-第25课-网络通信-少儿编程教育网
图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所示,大多数的网站都同时提供人机访问接口。

App Inventor编程教程-第25课-网络通信-少儿编程教育网
图24-2 大多数网站同时提供用户界面及应用程序接口
对于我们普通人来说,互联网就是不计其数的可供访问的网站,而对于程序员来说,它却是一个世界上最大也最丰富的信息数据库。

Web浏览框组件

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

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

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

App Inventor编程教程-第25课-网络通信-少儿编程教育网
图24-4 在Web浏览框中显示选中球员的网页
假设用户点击了科比的照片,应用将在Web浏览框中显示科比•布莱恩特的页面,如图24-5所示。

App Inventor编程教程-第25课-网络通信-少儿编程教育网
图24-5 应用中的Web浏览框

Web客户端组件

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

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

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

举例:获取股票信息

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

App Inventor编程教程-第25课-网络通信-少儿编程教育网
图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>