第10章WebApp开发综合案例.

第10章WebApp开发综合案例清华大学出版社高等院校计算机与信息类规划教材上海市教育高地暨特色专业建设配套教材目录10.2Web商品进销存信息系统210.3Web书城信息系统310.4本章小结410.1WebApp项目开发概述110.5课程设计任务书及评价510.1WebApp项目开发概述第10章WebApp开发综合案例教学目标●了解Web工程概念及与传统软件工程的区别●理解WebApp的概念、特点和开发过程●掌握WebApp的分析、设计和测试方法●掌握WebApp综合开发方法及课程设计过程10.1WebApp项目开发概述10.1.1WebApp的特点及类型1）WebE的概念及与传统项目的区别1998年YogeshDeshpande和SteveHansen提出了Web工程（简称WebE）的概念，是指按计划进行的网络综合性工作。基于Web的系统和应用简称WebApp,不同于其他计算机软件，而是基于web的系统与“页面排版和软件开发、市场和预算、内部交流和外部联系以及艺术和技术间”综合作用的产物。10.1WebApp项目开发概述WebE与传统软件工程的区别，主要体现在6个方面，并如表10-1所示：（1）WebApp强调信息的含量，传统软件工程则强调系统功能的完善；（2）WebApp关注视觉和感觉，传统的软件界面则奉行“简单为美”原则；（3）多数WebApp是数据驱动，传统的软件开发多是功能驱动或过程驱动；（4）WebApp适应不同的用户，传统软件系统的用户群体则常圈定在某个范围之内；（5）WebApp应在短期内开发完成，很难用传统软件工程中的形式化方法和测试技术；（6）WebE要求技术、艺术和科学在更大范围内相互结合。10.1WebApp项目开发概述比较内容传统项目小型WebApp项目大型WebApp项目需求收集严格的受限制的严格的技术规格说明模型、规格说明健全总体描述UML、模型、规格说明健全项目持续时间以月或年为度量单位以天、周或月为度量单位以月或年为度量单位测试和质量保证致力于取得质量目标致力于风险控制重视所有的SQA活动风险管理明确的内部的明确的可交付使用的期限18个月或更长3-6个月或更短3-12个月或更短发布过程严格的快速的严格的发布后客户的反馈需要大量的主动工作以用户交互中自动获得自动获得及由请求反馈获得表10-1WebApp与传统软件项目的区别10.1WebApp项目开发概述2）WebApp的特点WebApp的特点具有以下8个方面：（1）网络密集性（Networkintensiveness）。（2）并发性（Concurrency）。（3）无法预测的负载量（Unpredictableload）。（4）性能敏感性（Performancesensitive）。（5）高可用性（Highavailability）。（6）数据驱动(Datadriven)。（7）内容敏感（Contentsensitive）。（8）持续演化(Continuousevolution)。WebApp驱动持续演化的过程的特征：①即时性。②安全性。③美观性。10.1WebApp项目开发概述WebApp的开发具有3个特点：WebApp常以增量的方式进行开发；经常发生变化；期限较短。因此，整个WebE过程也与这些特点相适应。3）WebApp主要应用类型在WebApp中，主要应用类型包括：（1）信息型。（2）下载型。（3）可定制型。（4）交互型。（5）用户输入型。（6）面向事务型。（7）面向服务型。（8）门户型。（9）数据库访问型。（10）数据仓库型。10.1WebApp项目开发概述10.1.2WebApp开发过程及技术方法1.WebApp开发过程WebApp的分散性和交互性，使其开发遵从一定的开发规范、技术标准和流程，以保证整个开发团队协调一致的工作，从而提高开发工作效率，提升项目质量。WebApp开发需要过程模型、适合WebApp开发特点的技术和方法。过程、技术（工具）和方法称为WebE的三要素。1）WebE过程及WebApp开发流程根据WebE的特点，可构建WebE过程框架，如图10-1所示。（1）沟通交流（Communication）。在WebE过程中，沟通交流的特点有3种WebE活动：规划（Formulation）、提取（Elicitation）和协商（Negotiation）。（2）计划（Planning）。做出由一个任务定义和一个时间表组成的WebApp增量式项目开发计划。（3）建模（Modeling）。软件项目和设计应与WebApp开发相适应，然后并入WebApp建模活动中。（4）构建（Construction）。利用Web工具和技术构建已建模的WebApp，并可快速测试暴露设计问题及时调整及修改。10.1WebApp项目开发概述10.1WebApp项目开发概述（5）部署（Deployment）。在实际开发过程中，WebApp开发的目标是按时、保质、保量完成预期交付软件。通常WebApp开发采用增量的迭代模型，其开发流程与传统软件开发项目的过程类似，具体WebApp开发流程，如图10-2所示。主要任务包括：①对问题进行定义及陈述交流；②制定项目协议/合同及计划/方案；③分析需求；④设计体系结构、导航、接口；⑤使用Web开发工具实现WebApp；⑥测试及发布。图10-2WebApp开发流程10.1WebApp项目开发概述2.WebApp开发技术及方法1）技术和工具建立高质量的WebApp，需要三种技术：（1）基于部件的开发。（2）安全性技术。（3）Internet标准HTML和XML。2）WebE方法WebE方法主要有以下5种：（1）交流方法。（2）需求分析方法。（4）设计方法。（5）测试方法。10.1WebApp项目开发概述10.1.3WebApp需求分析WebApp的需求分析有3个任务：表述问题、收集需求和分析建模，在表述问题期间主要确定WebApp的目的和目标，并定义用户种类。收集需求主要通过调研等确定具体功能、内容、界面等需求，并以分析建模进行具体描述。主要进行4种分析：①内容分析；②交互分析；③功能分析；④配置分析。分析重点是解决3个重要问题：①表达或处理的信息内容；②为最终用户提供的功能；③WebApp表达内容和执行功能时，表现的行为，可将问题的回答表示为分析模型的一部分。10.1WebApp项目开发概述WebE根据自身的特点，将分析模型分为：1）内容分析模型对WebE基础的内容进行分析。内容模型包含结构元素，为WebApp的内容需求提供一个重要的视图。其结构元素包含内容对象(如，文本、图形图像、照片、视频图橡、音频)，其内容对象是WebApp的一部分。2）交互分析模型交互模型由4种元素组成：用例、顺序图、状态图、用户界面原型。（1）用例。（2）顺序图。（3）状态图。（4）用户界面原型。10.1WebApp项目开发概述3）功能分析模型功能模型描述WebApp的两个处理元素，各元素代表过程抽象的2个不同层次：（1）用户可观察到由WebApp传递给最终用户的功能。（2）分析类中实现与类相关的行为的操作。4）配置分析模型客户端软件提供的基础设施，使用户可从所在位置访问。通常，浏览器用于显示从服务器下载的内容和功能。应针对各种浏览器特性及配置(配置模型的部分详细说明)，对WebApp进行彻底测试。10.1WebApp项目开发概述5）关系导航分析模型关系导航分析(Relationship-navigationanalysis，RNA)提供一系列分析步骤，主要分析各网页之间的关系。RNA方法可以分成5步：（1）用户分析。（2）元素分析。（3）关系分材。（4）导航分析。（5）评估分析。10.1WebApp项目开发概述10.1.4WebApp设计1.WebApp设计的目标要求WebApp设计的目标要求，主要包括7个方面：（1）简单性。（2）一致性。（3）相符性。（4）健壮性。（5）导航性。（6）视觉吸引。（7）兼容性。10.1WebApp项目开发概述2.WebApp的设计活动WebApp设计可分为6种活动：构件设计、体系结构设计、导航设计、内容设计、美观设计和界面设计。每种设计都影响整体质量，可用金字塔表示，如图10-3所示。1）构件设计WebApp经过发展逐渐形成为模板化功能化。其处理功能主要包括：数据库查询及其他操作；与外部企业系统的数据接口；用户的注册和认证。为了重复利用这些功能，应设计和构建一些程序构件，同普通软件在形式上一致。利用构件技术，可便于组建各种WebApp。2）体系结构设计体系结构的设计主要定义WebApp超媒体结构、设计模式、设计模板、内容设计。设计模式为解决某些问题的一般性方法。如在WebApp中处理数据功能时，可用体系结构和构件级设计模式。超文本级的设计模式着重导航特征的设计，允许用户以流畅的方式在WebApp内容间移动。10.1WebApp项目开发概述图10-3WebApp设计金字塔模型10.1WebApp项目开发概述体系结构的设计与WebApp的目标、内容、导航原则紧密相关。体系结构主要分为4种：线性结构、网格结构、层次结构和网状结构。（1）线性结构。当内部交互可预测顺序时，Web内容串形相连，常选择线型结构。这种结构简单，但缺乏灵活性。如图10-4所示。（2）网格结构：当WebApp内容可分类地组织成二维或更高维时，可采用网格结构，如图10-5所示。这种结构有很大灵活性，但也容易带来混乱。图10-4线性结构图10-5网格结构10.1WebApp项目开发概述（3）层次结构。如图10-6是最常见的体系结构。其结构可设计成使控制流水平地穿过垂直分支（超文本分支）的方式。在此结构中左边展示的内容可由超文本链接其他分支的内容，实现内容快速导航。（4）网络结构。如图10-7在很多方面类似于面向对象系统的体系结构。对结构构件（网页）进行设计，使构件可将控制传递（以超文本链接）到系统中的其他部件，使导航相对灵活。图10-6层次结构图10-7网络结构10.1WebApp项目开发概述体系结构线性结构网格结构层次结构特点结构比较固定Web内容一维化Web内容多维化最常见的结构优点简单有极大的灵活性有较大的灵活性缺点灵活性不高很容易带来混乱易混乱例子订单大型网站普通网站上述4种类型的体系结构，比较如表10-2所示。表10-2不同的体系结构比较10.1WebApp项目开发概述3）导航设计导航设计的主要过程为：①识别用户角色，不同的用户角色可获得不同的内容和服务。如注册客户、特权客户可获得不同级别的信息和服务；②为每一类用户角色确定访问目标；③为每类用户的每个访问目标设计最佳的导航路径。导航设计还要解决使用各种辅助手段使导航更容易方便。在导航设计时，应为同类用户建立一个语义导航单元，以便后继的管理。4）内容设计对内容对象建模后，编写对象传递的信息并对其格式化，尽量满足用户需求。常以所提供信息的概要描述和内容对象的类型说明来设计内容对象。10.1WebApp项目开发概述5）美观及布局设计美观设计又称美工（学）设计，包括颜色配置、几何图案设计、文字大小字体和位置、图形使用等。在布局及设计中，主要考虑全局颜色配置、字体、字号、风格、样式、补充媒体（音频、视频、动画）的使用，以及其他美观元素。在设计时应进行布局规划。在设计布局时，主要基本原则是：（1）巧用空间。（2）重视内容。（3）顺序组织布局元素。（4）组织导航、内容和功能。（5）不要以滚动条扩展空间。（6）浏览器窗口大小。10.1WebApp项目开发概述6）界面设计界面设计包括屏幕布局，交互模式定义和导航机制描述。界面设计应考虑3个方面:用户目前位置、操作及可导向的目标。并注重6项基本原则：（1）页面速度。（2）页面正确。（3）菜单和界面风格统一。（4）链接指示明显。（5）界面功能清晰。（6）常用表格等工具。10.1WebApp项目开发概述10.1.5WebApp测试应先测试最终用户所见内容和界面，再对体系结构及导航设计等方面进行测试。最后，转到测试技术能力，WebApp基础设施