Mashup合并来自不同网站的内容或数据到新的应用程序。在这节课中你将学到不同类型的mashup,理解mashup所需的数据的来源,并创建两个简单的mashup:一个在一个纺织球上显示flickr图片,另一个在一幅地图上显示世界上30个最近发生过地震的位置。
在本课中,你将学到怎样创建简单的mashup程序来显示图片,及与地震数据交互。
本课的Professor Popfly Mashups参考:
学习成果
完成本课学习后,你将可以:
概览
Mashup将来自不同网站的内容或数据合并到一个应用程序中。本课中你将学习不同种类的mashup,理解mashup所需数据的来源,并创建两个简单的mashup,理解mashup所需数据的来源,并创建两个简单的mashup:一个来在一个纺球形空间上显示flickr照片,另一个在地图上显示世界上最近30个发生地震的位置。
Mashup最近很流行,因为许多提供社交网络,照片与视频分享,搜索与地图应用服务的网站把他们的应用程序接口提供给开发人员,让开发人员可以利用这些API来访问原始数据并在他们自己的应用中使用这些数据。
在本课中,你将学习怎样构建简单的mashup来显示照片及与地震数据交互。
那里是什么类型的Mashup?
地图与照片mashup是最常见的mashup类型。你可能见过网站在一副交互地图上显示天气,房地产,犯罪信息及其它项目。
创建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)是将信息显示在网络中的工具。
被汇集的数据(照片,RSS源,通过一个公司的API暴露的特定的业务对象)实际存在于由各自公司维护的远程服务器。Mashup引擎在将结果返回给用户浏览器之前访问并处理这些数据。
示例1:地震地图mashup
下面是在Popfly中创建这个地震mashup的步骤:
示例2:创建一个照片mashup
考虑Popfly中一个相似的mashup,其显示一个以篮球为标签的图像的光球:
注意,虽然视觉效果不同,但两个mashup中的一些图像是相同的。这两个mashup都使用了flickr API来访问相同的标记着篮球的flickr的图片集合。图像存储于flickr中,但是mashup引擎(第一个例子中是Tag Galaxy应用,第二个例子中是Popfly)访问图片并将它们以不同的方式显示在一个纺球空间中。最终结果mashup运行于用户浏览器中。
下面是在Popfly中创建flickr照片空间的mashup的步骤:
注意:你将需要获得一个developer key以便保存使用了flickr块的mashup。
内部研究:调用一个API
Popfly使用了JavaScript调用flickr API的不同方法。仅当你想看一下JavaScript源码什么样以及它怎样调用一个API,你可以读本节内容。
要查看Popfly团队为flickr块编写的JavaScript源代码。在Popfly中创建一个新的块并将flickr块拖放到设计界面。这将暴露它的JavaScript源代码。点击块代码标签来查看JavaScript。