《技术与移动互联网课件》由会员分享，可在线阅读，更多相关《技术与移动互联网课件（18页珍藏版）》请在金锄头文库上搜索。
1、Mashup技术与移动互联网,北京邮电大学,4.2-Mashup技术,1,Mashup概念,一种新型的基于 Web 的数据集成应用程序正在 Internet 上逐渐兴起-Mashup。 Mashup最初源于流行音乐，是从两首不同的歌曲中混合演唱和乐器的音轨而构成的一首新歌。 如今，Mashup代表一种令人兴奋的交互式Web应用程序，它利用了从外部数据源检索到的内容来创建一个全新的创新服务。 根据Wikipedia的解释，Mashup是将多个不同的支持web api的应用进行堆叠而形成的新型web服务。,4.2-Mashup技术,2,Mashup概念,Mashup的几个关键词,Web API,W
2、eb Service,Data Source,集成与构造,4.2-Mashup技术,3,Mashup分类,现今涌现的Mashup应用大致由以下几类构成： 视频图像 MashupMashup设计者利用与图像相关的元数据（例如谁拍的照片，照片的内容是什么，何时何地拍摄的等）对视频和图像资源进行关联。CelebrityV它将来自Flicker的明星照片和来自youtube对应的明星视频剪辑进行了匹配和组合。 搜索购物 Mashup搜索和购物 mashup。在 Web API 出现之前，有相当多的购物工具，例如 BizRate、PriceGrabber、MySimon 和Froogle，都使用了 B2
3、B 技术或屏幕抓取（screen scraping）的方式来累计相关的价格数据并进行比较。之后为了促进 mashup 和其他有趣的 Web 应用程序的发展，诸如 eBay 和 Amazon 之类的消费网站已经为通过编程访问自己的内容而发布了自己的 API。 新闻 Mashup新闻源（纽约时报、BBC 或路透社）已从 2002 年起使用 RSS 和 Atom 之类的联合技术来发布各个主题的新闻提要。以联合技术为基础的 mashup 可以聚集一名用户的提要，创建个性化的报纸，从而满足读者独特的兴趣。典型应用：Diggdot.us 。 地图 Mashup地图Mashup蓬勃发展的一种主要动力就是 G
4、oogle 公开了自己的 Google Maps API。现阶段，几乎所有包含位置数据的数据集均可利用地图通过令人惊奇的图形化方式呈现出来。Microsoft（Virtual Earth）、Yahoo（Yahoo Maps）和 AOL（MapQuest）也不甘示弱，很快相继公开了自己的 API。,4.2-Mashup技术,4,Mashup架构,Mashup架构：Mashup站点，API内容提供者以及客户机的Web浏览器。,过程：来自客户机浏览器的请求传向 Mashup站点所在的Apache Web 服务器。请求的页面包括 HTML 和 JavaScript。JavaScript 调用一个或多个
5、API内容提供者提供的服务后，按照该Mashup的逻辑进行内容组合RIA方法,4.2-Mashup技术,5,Mashup架构与技术,Mashup站点Mashup站点也就是Mashup逻辑所在的地方方法一，在服务期端通过Web服务器技术（Java servlets、CGI、PHP 或 ASP）构造方法二，RIA方法，在客户端通过JavaScript/Applet等构造。 在客户机端进行Mashup应用中的内容合并，具有两点好处： 减轻服务器的负载 从用户的角度来说，具有更好无缝用户体验 Web浏览器 API提供者 为了方便外界获取和使用，他们将自己的内容通过 Web 协议对外提供（例如 REST
6、、Web 服务和 RSS/Atom）。 信息源 按照其通常的功能和使用，Web协议可以分为两组。 第一组处理消息传递、接口描述、寻址和交付的问题，如SOAP 第二组协议和规范定义了服务如何公开它们自己以及如何在网络上相互发现,4.2-Mashup技术,6,Mashup架构与数据源,Mashup所能利用的外部数据源格式多种多样，它具体包括：Public APIsRSS/Atom feedsXML web servicesHTML，等 来源位置API内容提供者Internet网络自己提供的数据源-Open,4.2-Mashup技术,7,Mashup的Web支撑技术,开发技术客户端：Javascri
7、pt、Ajax服务器端：JSP/Servlets、PHP、.NET、ASP等 Web协议SOAPIIOP-RMIUDDIREST（Representational State Transfer ）HTTP，等。 数据表示 XML RSS/Atom feeds API CSS XHTML，等。,4.2-Mashup技术,8,LastTube-优秀Web播放器,LastTube,Last.fm音乐社区,YouTube视频网站,Mashup,该播放器作者仅仅利用一天的时间就完成了全部的编码、测试及发布工作。,4.2-Mashup技术,9,TiwanRank-网络排名站点,TaiwanRank- 即时
8、窥探台湾人浏览哪些网站,TaiwanRank ，是台湾的网络排名统计站点，同时还提供了一个Google map 的mashup 工具-即时画面。,如图，通过即时画面，不但可以即时的显示台湾网友正在访问哪些站点，同时还包括网站的截图，甚至网友所在位置和年龄、性别。点击站点的截图还可以查询相关网站地址、简介、流量、排名、分类等详细信息。,4.2-Mashup技术,10,企业级Mashup应用,佛罗里达州的一名保险经纪看见了一则美国风暴灾害的新闻报道，公司要求他递交一份最新灾害损失分析报告，对这场风暴给公司带来的损失进行评估。,4.2-Mashup技术,11,企业级Mashup应用,首先需要将电子表
9、格里客户的ZipCode通过网站Water.usgs.gov转化为水文学上的一种编码，然后利用网站edc.usgs.gov将水文学编码转化为经纬度的表示，最终从网站dotd.florida.gov上通过经纬度定位当地的受灾情况。当然，如果Web上已经存在了这样的一个Mashup应用合并了来自上述三个网站的内容和服务，即直接提供了从ZipCode查询受灾情况的功能。,4.2-Mashup技术,12,构造企业级Mashup应用的四个方面,资源发掘 构造企业级Mashup应用并不一定是从零做起，Web上存在着许多对处理企业即时应用有效的资源和服务 需求表达 构造企业级Mashup应用的第二阶段是用户
10、的需求表达 应用构建 合理的Mashup逻辑从构思到实现，一个最基本的问题就是如何在一个用户友好的环境下，实现各个逻辑模块的组装（代替传统的编程） 语义和非结构化 在解决Mashup数据集成的问题里，语义（Semantic）和对非结构化数据（Unstructured data）的处理是两大难题,4.2-Mashup技术,13,Google Map API+Web应用-实例分析,使用Google Map API，无需其他特别的web开发工具，所需的仅是文本编辑器，Web浏览器，和一个保存写好的web页面和脚本的web服务器。 第一个地图 !DOCTYPE html PUBLIC “-/W3C/D
11、TD XHTML 1.0 Strict/EN” “http:/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” html xmlns=“http:/www.w3.org/1999/xhtml” head script src=“http:/ / /script /body /html 需要将ADD_YOUR_KEY_HERE替换成你得到的API的Key，然后上传到自己的web服务器上。,4.2-Mashup技术,14,Google Map API+Web应用-实例分析,访问web服务器上的这个html文件，你在浏览器中看到俄亥俄州立大学的地图：,控制地图行
12、为,添加特殊地点标识,4.2-Mashup技术,15,Google Map API+Web应用-实例分析,控制地图行为map.disableDragging ()；map.addControl(new GLargeMapControl(); 添加特殊地点标识 var point = new GPoint(-83.015522, 40.002068); var marker = new GMarker(point); map.addOverlay(marker); 加入地点说明 Google Map提供了信息提示的功能，只要你点击响应位置的图标，就会出现一个信息提示框，表明相关位置信息。 一个J
13、avaScript函数createInfoMarker()，使用GMarker对象，和一个包含地点信息的HTML字符串作为两个参数,4.2-Mashup技术,16,Google Map API+Web应用-实例分析,createInfoMarker(point, address) var marker = new GMarker(point); GEvent.addListener(marker, “click“, function() marker.openInfoWindowHtml(address); ); return marker; point = new GPoint(-83.013307, 40.000610); address = “University Hallbr /230 North Oval Mall br /Columbus, Ohio 43210“; var marker = createInfoMarker(point, address); map.addOverlay(marker);,4.2-Mashup技术,17,Google Map API+Web应用-实例分析,
