第10章 WebApp开发综合案例

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