“超市查找”是最常见一类地图mashup应用。为帮助你找到最近的甜品与咖啡店，或汉堡与烤翅店，本课创建了一个“快餐查找” – 将live search的餐厅地点搜索结果数据与Virtual Earth地图服务混搭。
本课以很小规模“真实”软件开发项目的模式实现了这个任务，引入用户与功能需求的概念，设计考虑与web应用架构。
Popfly制作地图Mashup 2：一个超大型快餐提供者
本课的Professor Popfly Mashups参考:
l FastFoodFinderDataPOC (http://www.popfly.com/users/professorpopfly/FastFoodFinderDataPOC)
l FastFoodFinderIconPOC (http://www.popfly.com/users/professorpopfly/FastFoodFinderIconPOC)
l FastFoodRestaurantIcons (data block) (http://www.popfly.com/users/professorpopfly/FastFoodRestaurantIcons)
l FastFoodFinder (http://www.popfly.com/users/professorpopfly/FastFoodFinder)
l FastFoodFinder2 (http://www.popfly.com/users/professorpopfly/FastFoodFinder2)
学习目标
完成本课学习后，你将可以：
l 将一个复杂的任务划分为小段
l 识别一个多层(web)应用的不同“层”
l 理解在软件项目原型设计中创建概念证明的角色
l 区别用户需求与功能需求
概览
“超市查找”是最常见一类地图mashup应用。为帮助你找到最近的甜品与咖啡店，或汉堡与烤翅店，本课创建了一个“快餐查找” – 将live search的餐厅地点搜索结果数据与Virtual Earth地图服务混搭。
本课以很小规模“真实”软件开发项目的模式实现了这个任务，引入用户与功能需求的概念，设计考虑与web应用架构。
一个软件应用的需求指明了使其可以工作必须做的。用户需求描述了一个特定软件应用或网站的用户的需要或目标。它们如同一个“清单”，来判断当应用完成时用户需求是否已满足。
功能需求描述了一个软件应用的行为 – 及由应用开发人员角度它必须完成的任务。这些需求可能更多的使用技术术语来指定而不是定义用户需求的使用的那样，因为它们通常描述一个系统的内部工作，及系统处理输入，执行与输出所需执行的任务。
|
注意：使用Internet Explorer构建并运行本课中的mashup。有些时候User Input块与Virtual Earth块在Firefox中显示不正确。 |
用户需求
开始之前，让我们明确针对这个mashup的用户需求：
1. 用户将输入一个邮政编码。
2. 用户将由下拉列表选择一个快餐连锁店的名称。
3. 用户将看到多达10个选择的快餐店的地点绘制在地图上，它们都在指定邮编地区5英里半径范围内。一个适当的图标标识每个小饭馆的位置。
功能需求
在最底层，mashup必须完成 3个不同的任务，将用户的需求翻译为这些功能需求。
1. 输入： mashup将由用户那得到一个邮编。
2. 输入： mashup将由用户那得到两个快餐店的名称。
3. 处理： mashup要找到指定邮编3英里半径范围内10个指定快餐店的信息。
4. 处理： mashup要找到与选择快餐店相应的图标。
5. 输出： mashup要将每个找到的快餐店的图标与相关信息放置在地图上。
设计FastFoodFinder应用
用户必须输入一个邮编并选择一个快餐店的名称。基于以下两个原因我们选择将几个快餐店名称存储于Popfly数据块而不是存储为用户输入块中逗号分隔值：
1. 通过将快餐店名称与图标作为一对存储与数据块中，当在地图上标记快餐店时将每一个图标与相应的快餐店关联将变得更容易。
2. 如果快餐店的列表需要在将来改变，只有数据块中的数据需要改变；构成这个mashup的块或连接本身不需要修改。
|
注意：如果你创建了数据块且mashup使用它，你可以简单的编辑数据块，将更改保存到数据，然后保存并重新运行mashup。 如果你正浏览或编辑另一个Popfly用户的包含一个共享数据块的mashup，你将无法编辑直接编辑那个人的数据块中的数据。取而代之，你不得不”rip it”（创建你自己的拷贝），或从头创建你自己的数据块以用于你的mashup。确保你的数据块与你正在替换的数据块有相同的列头。 |
在现实世界mashup中，用户界面可能随着显示mashup的设备的改变而变化（一个运行在你笔记本电脑上的web应用与在你移动电话上的显示效果看起来会有不同，因为笔记本电脑屏幕更大。）然而，数据是相同的。从软件管理的角度，查询获取数据然后格式化并显示它的过程是常被用到的。
这种展示阶段与处理阶段的数据分离（在这个例子中是Popfly块，在现实世界中是应用的代码）在使用多层架构方法的web应用中很常见，正如下图展示的这样：
客户端的浏览器通过Internet连接到一个web服务器。客户端负责将用户输入（邮编与快餐店名称）通过Internet发送给运行于Popfly web服务器上的mashup引擎。
Popfly web服务器上的mashup引擎运行这个mashup，处理所有的“业务逻辑”，包括调用可能位于第三方web服务器的web服务的API（应用程序接口），并展示结果。其也访问位于一个数据库中与应用程序分离的存储的应用程序指定的数据（在这个例子中，快餐店与图标的列表）。
概念验证#1：找到快餐店数据
针对每一个功能需求，我们将创建一个“概念验证mashup”来说服我们自己这个mashup是可以构建的。每一个概念验证集中于可以访问mashup每一步需要的数据，而不关心用户界面，输入或输出相关的问题。
在功能需求#1，关键点是确定快餐店的相关信息是否可用，如果是，Popfly怎样可以访问它呢？
一种途径可以是创建一个包含选择的快餐店位置的静态表并将它们存储于一个Popfly数据块中。这个列表可能花费很长一段时间手工收集，且需要被频繁的更新或验证。这种方法并不适合成为一种针对在任意邮政编码区域的快餐店的更通用的解决方案。
许多Internet搜索引擎有”本地”页面，可以在这里搜索本地商业信息。例如，在http://local.live.com搜索页面，基于输入的快餐店的名称和一个邮编（如，“McDonalds 02451”），Live搜索引擎将返回那个区域的一些麦当劳快餐店的名称与位置，并在地图上标记它们的位置。
FastFoodFinderDataPOC(http://www.popfly.com/users/professorpopfly/FastFoodFinderDataPOC) mashup是一个能完成此任务的概念证明mashup。它展示了我们可以访问到我们正试图构建的“真实”快餐查找mashup所需要的数据：
Phonebook块的搜索操作的输入是一个搜索查询，要返回的项目的数目，一个搜索起始点在地图上的经度与纬度，及项目必须位于的区域的以英里为单位的半径以便被包含在结果中。
GeoNames块的lookupOnZipCode操作接收一个邮政编码来查找相应的经度和纬度。这将触发定位一次查找使用的起始点，而不是要求用户指定起始点的经度与纬度。
BlockOutput检测器展示了Phonebook搜索的输出。因为Phonebook块输出每一个项目（位于其它事情中）的经度与纬度，且之前的经验展示了可以在地图上由给定的经度与纬度来标记一个位置，这个练习证实了我们有能力创建这个要求的快餐查找mashup。
了解这点，我们接可以准备开始设计这个FastFoodFinder mashup来满足其输入，处理，与输出（功能）需求。
要模拟这种架构，一个称为FastFoodRestaurantIcons的Popfly数据块将存储9个快餐店名称与表现它们logo的图标的URL。这个块使用的图标可以在http://www.iconator.com找到。
概念验证#2：匹配快餐店的图标
第二个任务（查找与快餐店名称相应的图标）通过在由FastFoodRestaurantIcons数据块得到的完整记录（快餐店名称与图标对）的快餐店列表中匹配用户选择的快餐店上使用一个过滤条件。
FastFoodFinderIconPOC(http://www.popfly.com/users/professorpopfly/FastFoodFinderIconPOC)mashup是完成这个任务的一个概念验证mashup：
FastFoodRestaurantIcons块发送快餐店名称的列表到用户输入块，其中快餐店列表为下拉列表的数据源。
ConditionBuilder块为Filter块建立一个FilterCondition，来由数据块返回那些名称与选择的快餐店名称相同记录的列表。在这个例子中只会有一个匹配的记录。
最后，当mashup运行时，SimpleImage块将来自Filter块的图片URL在浏览器中显示为图片。下面是选择了Wendys, Burger King, Starbucks, Dunkin’Donuts与KFC后的输出：
一个带有文本框的用户输入块将使用户可以输入邮编。
来自数据块的快餐店的列表将作为另一个用户输入块的数据源。这个块将显示包含快餐店名称的下拉列表供用户做出选择。
（使用用户输入块的getTextAndChoice操作也是可能的，但是因为后面的例子将会增强这个mashup来在同一个地图上显示两个不同的快餐连锁店，所以最好还是保持输入来自单独的用户输入块。）
将片段合在一起：处理
概念验证#1展示了怎样访问一个特定邮编地区周围的快餐店信息。最终的mashup连接了两个用户输入块，使用来自相应用户输入块的值替换硬编码的邮编与快餐店名称。
概念验证#2展示了怎样找到一个选择的快餐店相关的图标。
将片段合在一起：输出
在完成合并这两个概念验证的mashup后，所有剩下要做的就是创建一个地图来显示。要将快餐店绘制在一个地图上，Virtual Earth块需要图标的URL与来自Phonebook块（其提供了经度，纬度与快餐店信息）的数据。完成后的mashup如下所示：
连接一个List Util块（如下）来获得快餐店图标的URL，一个Virtual Earth块来将项目绘制在地图上以便完成mashup。
如下是FastFoodFinder1这个mashup的输出：
注意你可以继续在下拉列表中选择几次快餐店，Popfly将运行mashup来处理新的快餐店并将结果添加到现有的地图。
List Util块在那干啥？技术细节
在这个完成的FastFoodFinder mashup中只有一处很微妙：它需要使用List Util块。在FastFoodFinderIconPOC这个概念证明mashup中，我们说过Filter块的输出包含选择的快餐店相应的图标的URL。然而，正如Logic那课所讲，Filter块实际输出符合指定条件（在这个例子中，一个匹配的快餐店名称）的项目的列表。在这个例子中，Filter的输出是仅包含一个项目的列表。
要让mashup正确的工作需要把图标列表中第一项（也是唯一项）提取出来，并将其作为一个项目，而不是被包含在一个列表中来传递给Virtual Earth块。这就是用到List Util块的地方。List Util块有一个get操作，可以将列表中指定位置的一项提取出来并作为一个项目返回。
下面是其工作方式的详解：
下面图标为FastFoodRestauranticons数据块中包含的快餐店与图标的列表的初始状态。每一对信息左边的编号表明其在列表中的位置。Filter块返回匹配过滤条件的所有快餐店的列表，在这个例子中[x.Restaurant ] [ is equal to] [Burger King]。
…
这个高亮的餐厅是唯一匹配的一个，所以Filter块将其作为有一个项目的列表返回：
List Util块的get操作获取列表位置0处的图标 ，仅返回Filter条件中指定的名称相应的图标的URL。
如果将Filter块直接连接到Virtual Earth块（不使用List Util块），只有一个快餐店会出现在地图上。当Virtual Earth处理两个连接到它的列表时，如果列表长度不同，当较短的列表中所有项目处理完后，处理过程就结束了 – 在这种情况下，只包含一个快餐店图标的列表 – 会被耗尽。
通过使用List Util块来获得图标URL，并将其连与Phonebook块连接到Virtual Earth块，现在只有一个（来自Phonebook块的快餐店）列表，Virtual Earth块必须迭代处理这个列表，以将所有标记绘制在地图上。
加大这个Mashup：在同一个地图上显示两个快餐店的信息
这个增强修改了FastFoodFinder mashup以便使其可以在同一时间同一地图上显示两个不同的快餐店的数据。这次的策略将会是复制之前“合并”的mashup，然后合并来自每一半复制的数据并绘制在地图上。
下面mashup左侧圆圈内展示的是对用户界面的一处小改动：在下面圆圈中的用户输入块使用getTwoChoicesFromDropdowns操作（代替只获取单一值的getChoiceFromDropdown），以便使用户可以输入两个快餐店的名称。将输出连接到2个ConditionBuilder块。
最终完成的FastFoodFinder2看起来是这样：
要合并来自Phonebook块与List Util块的数据，正如上方4个被圈起的块，需要创建一个新对象（或容器）来存储每一个使用相同格式绘制在地图上的新项目。
要合并来自不同源的数据到同一个地图上，使用一个Combine块合并来自不同VEPushpinListCreator块输出的Pushpin列表到一个单独的列表，并将合并的列表发送给Virtual Earth。
用于创建Pushpin列表的块
|
块
|
描述
|
|
VEPushpinListCreator
|
创建pushpin信息列表用于在Virtual Earth上标记。 |
VEPushpinListCreator块创建一个pushpin对象的新列表用于在Virtual Earth上标记。每一个pushpin包含来自Phonebook块的经度，纬度，标题与描述，及由List Util块获取的pushpin图标的URL。最终完成的mashup使用一个VEPushpinListCreator块来创建针对每一个快餐店项目的Pushpin对象的列表，然后合并两个列表为一个来提供给Virtual Earth供在地图上标记。
运行这个mashup一次。如下是示例输出：
这就完成了快餐店查找mashup。