[翻译]Popfly系列课程3 - 地震地图及纺织照片：什么是一个mashup？

Mashup合并来自不同网站的内容或数据到新的应用程序。在这节课中你将学到不同类型的mashup，理解mashup所需的数据的来源，并创建两个简单的mashup：一个在一个纺织球上显示flickr图片，另一个在一幅地图上显示世界上30个最近发生过地震的位置。

在本课中，你将学到怎样创建简单的mashup程序来显示图片，及与地震数据交互。

 

本课的Professor Popfly Mashups参考:

地震图：http://www.popfly.com/users/professorpopfly/Earthquakes

Flickr图片球：http://www.popfly.com/users/professorpopfly/FlickrPhotoSphere

 

学习成果

完成本课学习后，你将可以：

• 解释什么是mashup
• 辩认网上的现实世界的mashup
• 描述门户与mashup的区别
• 描述为什么API对于在两个程序之间共享数据是重要的
• 解释mashup应用分布式的特性
• 创建一个网页来显示你的mashup
• 使用Popfly创建一个地震地图的mashup
• 使用Popfly创建一个flickr照片空间的mashup

概览

Mashup将来自不同网站的内容或数据合并到一个应用程序中。本课中你将学习不同种类的mashup，理解mashup所需数据的来源，并创建两个简单的mashup，理解mashup所需数据的来源，并创建两个简单的mashup：一个来在一个纺球形空间上显示flickr照片，另一个在地图上显示世界上最近30个发生地震的位置。

Mashup最近很流行，因为许多提供社交网络，照片与视频分享，搜索与地图应用服务的网站把他们的应用程序接口提供给开发人员，让开发人员可以利用这些API来访问原始数据并在他们自己的应用中使用这些数据。

在本课中，你将学习怎样构建简单的mashup来显示照片及与地震数据交互。

 

那里是什么类型的Mashup？

地图与照片mashup是最常见的mashup类型。你可能见过网站在一副交互地图上显示天气，房地产，犯罪信息及其它项目。

    Mashup的例子包括Zillow.com (http://www.zillow.com)，一个在地图上绘制实时房产信息的Web应用，LastFace (http://www.dcs.shef.ac.uk/~mrowe/lastface.html)，一个由Facebook与Last.fm音乐站点获取数据，使你可以了解你的Facebook好友最近听过的歌曲的mashup。

    许多图片分享网站如flickr.com允许它们网站的图片以一种有趣的方式嵌入其它Web站点。查看http://mapito.eu/ ，可以看到以螺旋形式显示的欧洲的图片，还有http://randomchaos.com/games/fastr/这是一个游戏，其中你猜测一个随机显示的图片的标签。这是几个mashup中两个使用来自flickr的照片开发的mashup，其它mashup的列表可以在http://www.programmableweb.com/api/flickr/mashups查找到。

    一些mashup是真实的门户页，站点显示来自一些不同来源的内容，但是在合并的页面中的内容相互之间没有交互。例如，http://www.msn.com/是一个门户：你可以指定不同的网站让其可以从中获取自定义的内容。如MSNBC新闻，福克斯体育，MSN天气及Hotmail并把它们放到一个地方。然而，通常这些内容项之间没有交互。门户页只是简单的作为所有这些内容的一个容器。

 

创建Mashup

    创建Mashup通常需要相当的Web开发经验，比如程序员必须会以一种如Java或C#之类的编程语言编写源代码来访问不同内容提供商的API或Web服务，然后编写连接软件（如mashup引擎或中间件）来组合选择的应用中的数据。一个在一个服务器上被处理的mashup在将结果显示到你的浏览器之前可能会访问一些其他服务器上的数据。

Mashup引擎（如Microsoft Popfly）是一种中间件，它负责连接数据源并创建mashup，然后将结果通过Internet传回到用户的浏览器，这样用户可以浏览并与它们交互。一个mashup可能用到来自一个或多个内容提供程者的数据。

使合并来自不同数据源的数据变为可能的原因之一是大部分服务以一种标准的基于XML的格式提供数据，这种格式的数据可以很容易的通过互联网传送。XML，全称eXtensible Markup Language，是一种描述信息的标准格式，这使它可以很容易的被其他应用程序共享。XML是用来描述信息的，而HTML(Hypertext markup language)是将信息显示在网络中的工具。

    Mashup的内容来源往往是RSS源，包含了一系列指定项目信息的标准XML格式数据。在创建mashup应用时，软件开发者也可能用到内容提供方的应用程序编程接口（API）。许多组织提供API让开发人员以零成本或极低成本访问它们的数据。例如，在http://www.flickr.com/services/api/处可以找到flickr开放的API。这个站点列出了所有可以供开发人员使用的由flickr获取数据的不同方法（操作）。

被汇集的数据（照片，RSS源，通过一个公司的API暴露的特定的业务对象）实际存在于由各自公司维护的远程服务器。Mashup引擎在将结果返回给用户浏览器之前访问并处理这些数据。

 

示例1：地震地图mashup

浏览美国地震灾害地质调查项目的网站（http://earthquake.usgs.gov）。它展示了 一幅世界上近期发生地震的区域的地图。Professor Popfly创建了一份这个mashup的另一个版本，该版本通过访问地震网站Earthquake ShakeMaps的RSS源（http://earthquake.usgs.gov/eqcenter/catalogs/shakerss.xml）并将数据显示在Virtual Earth地图上实现。

下面是在Popfly中创建这个地震mashup的步骤：

1. 在Popfly中创建一个新的mashup。
2. 拖拽一个RSS块与一个Virtual Earth块到设计界面。
3. 在RSS块中，选择getItems操作并输入http://earthquake.usgs.gov/eqcenter/catalogs/shakerss.xml 作为RSS源的名称。
4. 将RSS块与连接到Virtual Earth块。
5. 运行这个mashup。

 

示例2：创建一个照片mashup

Tag Galaxy mashup(http://taggalaxy.de)根据用户输入的标签显示一个flickr照片光球。它也显示相关的标签，通过这些标签可以搜索照片。

考虑Popfly中一个相似的mashup，其显示一个以篮球为标签的图像的光球：

注意，虽然视觉效果不同，但两个mashup中的一些图像是相同的。这两个mashup都使用了flickr API来访问相同的标记着篮球的flickr的图片集合。图像存储于flickr中，但是mashup引擎（第一个例子中是Tag Galaxy应用，第二个例子中是Popfly）访问图片并将它们以不同的方式显示在一个纺球空间中。最终结果mashup运行于用户浏览器中。

下面是在Popfly中创建flickr照片空间的mashup的步骤：

1. 在Popfly中创建一个新的mashup。
2. 将一个flickr块与Photoshop块拖放到设计界面上。
3. 在flickr块中，选择getPhotes操作并输入你要搜索的照片的标签（如"篮球"）以及你想要由flickr返回的照片数。按关联度排序。
4. 将flickr块连接到PhotoSphere块。
5. 预览这个mashup。

注意：你将需要获得一个developer key以便保存使用了flickr块的mashup。

内部研究：调用一个API

Popfly使用了JavaScript调用flickr API的不同方法。仅当你想看一下JavaScript源码什么样以及它怎样调用一个API，你可以读本节内容。

要查看Popfly团队为flickr块编写的JavaScript源代码。在Popfly中创建一个新的块并将flickr块拖放到设计界面。这将暴露它的JavaScript源代码。点击块代码标签来查看JavaScript。

注意，flickr块调用了flickr API页面（http://www.flickr.com/services/api/）中的列出的多个API方法。其中的两个方法以及相关的Popfly操作在上面的截图中高亮显示。