《信息系统分析与设计》课件第10章 Web和移动应用设计.ppt

1、-2-第第1414讲讲 实现与测试实现与测试本本 章章 内内 容容1 Web1 Web和移动应用设计概述和移动应用设计概述2 2 框架技术框架技术3 3 WebWeb应用设计应用设计4 4WebWeb信息系统设计范例信息系统设计范例5 5移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计-4-第第1414讲讲 实现与测试实现与测试10.1 Web和移动应用设计概述和移动应用设计概述10.1.1 10.1.1 背景背景随着时代进步、信息技术的发展，信息系统得到了长随着时代进步、信息技术的发展，信息系统得到了长足的进步。足的进步。信息技术的进步带来了众多新的业务模

2、式，譬如电子信息技术的进步带来了众多新的业务模式，譬如电子商务、电子政务、电子医疗。商务、电子政务、电子医疗。组织传统信息系统的业务处理能力面临着前所未有的组织传统信息系统的业务处理能力面临着前所未有的挑战。挑战。高并发高并发、高访问量高访问量、高资源消耗高资源消耗的用户群请求，的用户群请求，用用户体验户体验也需要提升到较高的水准。也需要提升到较高的水准。Web应用和移动应用是应用和移动应用是新型新型信息系统的主要组成部分。信息系统的主要组成部分。第第1010章章 WebWeb和移动应用设计和移动应用设计-5-第第1414讲讲 实现与测试实现与测试C/S是指是指客户机客户机/服务器服务器体系结

3、构风格，体系结构风格，客户端客户端完成完成数数据处理据处理，数据表示数据表示以及以及用户接口用户接口功能；功能；服务器服务器端完成端完成DBMS（数据库管理系统）的核心功能。（数据库管理系统）的核心功能。C/S的发展历程经历了的发展历程经历了两层两层和和三层三层这样两个时期，这样两个时期，三三层层C/S风格包括风格包括表示层表示层、业务逻辑层业务逻辑层和和数据层数据层三个组成部分三个组成部分。B/S是三层是三层C/S的一个变种，也由表示层（的一个变种，也由表示层（浏览器浏览器）、业务逻辑层（、业务逻辑层（web服务器服务器和和业务逻辑业务逻辑）和）和数据层数据层组成。组成。Web应用应用属于属

4、于B/S风格，风格，移动应用移动应用是是C/S的一种特殊的一种特殊形式。形式。10.1 Web和移动应用设计概述和移动应用设计概述-6-第第1414讲讲 实现与测试实现与测试信息系统的架构师以种种信息系统的架构师以种种框架技术框架技术为基础，通过构思为基础，通过构思如何组合、编排、安插各种业务逻辑来搭建系统。如何组合、编排、安插各种业务逻辑来搭建系统。框架技术是实现信息系统框架技术是实现信息系统质量保证质量保证的更有效方法。的更有效方法。三层结构三层结构是现代信息系统的是现代信息系统的核心基础核心基础，框架技术框架技术是现是现代信息系统的代信息系统的核心实现核心实现手段手段 第第1010章章

5、WebWeb和移动应用设计和移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述-7-第第1414讲讲 实现与测试实现与测试10.1.2 10.1.2 三层结构三层结构l三层结构（三层体系结构）是一种架构部署风格，它三层结构（三层体系结构）是一种架构部署风格，它将功能分为多个层，每个层都可以位于物理上分离的计算将功能分为多个层，每个层都可以位于物理上分离的计算机上。机上。l三层结构由面向组件的软件设计方法演变而来，与面三层结构由面向组件的软件设计方法演变而来，与面向组件的方法不同，它通常使用平台特定的通信方法而不向组件的方法不同，它通常使用平台特定的通信方法而不是基于消息的方法。是

6、基于消息的方法。l三层结构在不同的应用场景中有不同的用途，即可以三层结构在不同的应用场景中有不同的用途，即可以用于用于Web应用程序也可以用于分布式应用程序、移动应用应用程序也可以用于分布式应用程序、移动应用程序。程序。第第1010章章 WebWeb和移动应用设计和移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述-8-第第1414讲讲 实现与测试实现与测试10.1 Web和移动应用设计概述和移动应用设计概述1.逻辑结构逻辑结构 1)表示层表示层具有应用程序的最高级别。具有应用程序的最高级别。移动设备客户端交互的图形用移动设备客户端交互的图形用户界面户界面基于基于Web的用于浏览

7、器的交互的用于浏览器的交互界面界面功能：功能：将信息系统的计算、将信息系统的计算、查询、处理结果输出到浏览器查询、处理结果输出到浏览器或移动客户端中或移动客户端中。展示浏览商展示浏览商品、购买和购物车内容等服务品、购买和购物车内容等服务有关的信息。有关的信息。第第1010章章 WebWeb和移动应用设计和移动应用设计-9-第第1414讲讲 实现与测试实现与测试2)逻辑层逻辑层 逻辑层也称为业务逻辑、逻辑层也称为业务逻辑、数据访问层或中间层。数据访问层或中间层。三层结构中逻辑层与表示三层结构中逻辑层与表示层隔离。层隔离。功能：用于执行繁杂的业功能：用于执行繁杂的业务过程、控制应用程序功能，务过程

8、、控制应用程序功能，解决关键任务业务问题，解决关键任务业务问题，执行执行业务规则业务规则、业务相关算法、政业务相关算法、政策法律法规以及数据规则约定策法律法规以及数据规则约定。逻辑层逻辑层被部署在服务器上被部署在服务器上，提供资源共享服务。，提供资源共享服务。具有较高的通用性，具有较高的通用性，可以可以部署到不同的物理位置。部署到不同的物理位置。第第1010章章 WebWeb和移动应用设计和移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述-10-第第1414讲讲 实现与测试实现与测试3)数据层数据层 数据层由数据库服数据层由数据库服务器组成。务器组成。即可以通过逻辑层访即可以通

9、过逻辑层访问，又可以通过表示层访问，又可以通过表示层访问。问。数据层是数据存储和数据层是数据存储和查询的终点。查询的终点。有利于提高系统的可有利于提高系统的可伸缩性和性能。伸缩性和性能。第第1010章章 WebWeb和移动应用设计和移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述-11-第第1414讲讲 实现与测试实现与测试三层应用程序体系结构的特点由应用程序、服务组件三层应用程序体系结构的特点由应用程序、服务组件及其分布式部署的功能分解而决定。及其分布式部署的功能分解而决定。三层结构具备较高的三层结构具备较高的可重用性可重用性、灵活性灵活性、可管理性可管理性、可维护性可维护性

10、和和可伸缩性可伸缩性。三层中每个层都完全独立于所有其他非相邻层。三层中每个层都完全独立于所有其他非相邻层。任意层中创建的组件和服务都可以进行共享和重用。任意层中创建的组件和服务都可以进行共享和重用。将大型复杂项目划分为简单功能单一的模块单元，降低系将大型复杂项目划分为简单功能单一的模块单元，降低系统的实现难度。统的实现难度。将服务和组件部署在单个服务器上，后期可以对服务将服务和组件部署在单个服务器上，后期可以对服务进行重新部署。进行重新部署。第第1010章章 WebWeb和移动应用设计和移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述2.组件互联规则组件互联规则-12-第第14

11、14讲讲 实现与测试实现与测试表示层：表示层：发送发送HTTP请求，接收逻辑层返回的请求，接收逻辑层返回的HTML。（使用。（使用DHTML、JavaScript等技术）等技术）逻辑层：逻辑层：根据客户机的业务根据客户机的业务规则规则来解释请求，并从持久层请求所需数来解释请求，并从持久层请求所需数据，接着计算派生的数据结果，并创建页面元素（据，接着计算派生的数据结果，并创建页面元素（HTML等）等）。（Python Web、Nginx）数据层：数据层：为其他层提供数据服务为其他层提供数据服务。（。（Mysql、MariaDB、PostgreSQL）第第1010章章 WebWeb和移动应用设计和

12、移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述3.三层结构范例解析三层结构范例解析-13-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.1 Web和移动应用设计概述和移动应用设计概述3.三层结构范例解析三层结构范例解析层层组件组件功能功能表表示示层层客户端Web浏览器向Web服务器发送HTTP请求逻逻辑辑层层Web服务器将HTTP响应发送到Web客户机将客户端的HTTP请求转换为SMTP包，然后发送到邮件服务器数数据据层层邮件服务器邮件服务器执行以下功能，执行后将其转换至逻辑层发件人提交完成后，发件人的电子邮件客户端将

13、电子邮件以SMTP包的形式发送到本地邮件服务器邮件服务器的消息传输代理读取包的目的地址，并通过Internet发送到接收方的邮件服务器目标邮件传输代理将消息存储在收件人的邮箱中当接收者登陆电子邮件时，他的用户代理与本地邮件服务器联系，然后将该消息下载到接收方的客户端计算机-14-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术10.2.1 10.2.1 背景知识背景知识随着时代进步、信息技术的发展，信息系统得到了长随着时代进步、信息技术的发展，信息系统得到了长足的进步。足的进步。现阶段传统信息系统开发存在很多问题，主要

14、表现在：现阶段传统信息系统开发存在很多问题，主要表现在：1）软件开发的）软件开发的“供不应求供不应求”现象影响着企业的发展。现象影响着企业的发展。2）信息系统质量不可靠、维护工作不足，用户对已完）信息系统质量不可靠、维护工作不足，用户对已完成的系统很难满意。成的系统很难满意。3）开发人员不能满足市场需求，需要掌握太多知识。）开发人员不能满足市场需求，需要掌握太多知识。4）频繁的系统开发给公司带来了巨大的损失。）频繁的系统开发给公司带来了巨大的损失。5）信息系统没有正式的归档文件，给后期的开发、维）信息系统没有正式的归档文件，给后期的开发、维护和改造带来很大的困难。护和改造带来很大的困难。-15

15、-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术随着时代进步、信息技术的发展，信息系统得到了长随着时代进步、信息技术的发展，信息系统得到了长足的进步。足的进步。应用框架技术可以提高开发人员的应用框架技术可以提高开发人员的生产力生产力，提高信息，提高信息系统的系统的质量质量、可靠性可靠性和和健壮性健壮性等关键服务质量保证指标。等关键服务质量保证指标。框架技术允许系统研发人员更专注于实现应用程序的框架技术允许系统研发人员更专注于实现应用程序的需求需求，而不是耗费大量的时间在应用程序基础设施的构造，而不是耗费大量的时间在应

16、用程序基础设施的构造上。上。框架技术包含了基层处理的基本功能。现代信息系统框架技术包含了基层处理的基本功能。现代信息系统的构建，从技术角度上看，就是各种框架技术的的构建，从技术角度上看，就是各种框架技术的组合组合。-16-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术10.2.2 Web10.2.2 Web框架技术框架技术 Web框架（框架（Web Framework）或）或Web应用程应用程序框架（序框架（WAF）是）是软件框架软件框架，旨在支持，旨在支持Web应用应用程序的开发程序的开发。Web应用程序包括应用程

17、序包括Web服务服务、Web资源资源和和Web API。Web框架提供了构建和部署框架提供了构建和部署Web应用程序的应用程序的标准方法标准方法。-17-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术 Web应用框架应用框架有两种有两种：第一种的应用程序逻辑建立在：第一种的应用程序逻辑建立在服务器服务器上，第二种的应用程序逻辑建立在上，第二种的应用程序逻辑建立在客户端客户端上。上。1）服务器端服务器端Web应用框架应用框架 具备处理具备处理HTTP请求、数据库控制和管理以及请求、数据库控制和管理以及URL映射映射等等

18、Web应用的必要功能。应用的必要功能。流行的服务器端流行的服务器端Web框架有：框架有：Spring Boot(Java)、Symfony(PHP)、Django(Python)、Express(Node.js/JavaScript)、Ruby on Rails(Ruby)、ASP.NET(C#)。1.框架结构的种类框架结构的种类-18-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术2）客户）客户端端Web应用框架应用框架客户端客户端Web应用框架可以归纳应用框架可以归纳成三种截然不同的架构模式成三种截然不同的架构模

19、式。传统传统HTML Web应用程序：应用程序：根据最基本的根据最基本的Web应用程序体应用程序体系结构，由网页构造逻辑和业系结构，由网页构造逻辑和业务逻辑组成的服务器通过发送务逻辑组成的服务器通过发送完整的完整的HTML页面与客户机交页面与客户机交互。互。-19-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术Widget（小部件）（小部件）WEB应用应用程序：程序：这种类型的这种类型的Web页面构建逻辑被页面构建逻辑被Web服务所取代，客户端上的服务所取代，客户端上的每个页面都有单独的实体，称每个页面都有单独的实体

20、，称为为WIDGET。-20-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术单页单页Web应用程序：应用程序：这是最现代的这是最现代的Web应用程序架构应用程序架构，整个，整个Web应用只有单一页面应用只有单一页面，并且客户端只从服务器下载，并且客户端只从服务器下载一次页面一次页面。-21-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术1）模型模型-视图视图-控制器控制器(MVC)大多数大多数Web框架都基于模型框架都基于模型-视图视图-控

21、制器（控制器（MVC）模式。）模式。2）Push-based vs.pull-based大多数大多数MVC框架遵循一种基于推的体系结构风格，或称为框架遵循一种基于推的体系结构风格，或称为“基于动作基于动作”。3）三层结构三层结构在三层在三层Web结构中，应用程序的三层分别是：客户机浏览结构中，应用程序的三层分别是：客户机浏览器、应用服务和数据库。器、应用服务和数据库。2.Web应用框架的概念结构应用框架的概念结构-22-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术如何抉择是否采用框架技术。如何抉择是否采用框架技术。

22、1）系统需要定制的程度系统需要定制的程度。定制程度越高，使用框定制程度越高，使用框架的可能性就越大。架的可能性就越大。2）研发团队研发团队。最终驱使开发人员是否使用框架的最终驱使开发人员是否使用框架的选择，需要考虑关于使用像框架技术的利弊。选择，需要考虑关于使用像框架技术的利弊。3.使用框架技术的时机使用框架技术的时机-23-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术1）使用框架技术的五个优点使用框架技术的五个优点开源：开源：在许多语言中最流行的框架是开源的（或可免费使用）。在许多语言中最流行的框架是开源的（或可

23、免费使用）。文档和支持：文档和支持：流行编码语言对应的软件框架，也具有较高的流行流行编码语言对应的软件框架，也具有较高的流行度，那么针对框架的官方文档支持量大、质量较高。度，那么针对框架的官方文档支持量大、质量较高。效率：效率：框架技术存在的最重要原因之一。框架技术存在的最重要原因之一。安全性：安全性：产品推出之前的各项测试及优化工作中，已基本消除了产品推出之前的各项测试及优化工作中，已基本消除了框架中潜在的安全隐患。新的安全风险问题也可以迅速定位并解框架中潜在的安全隐患。新的安全风险问题也可以迅速定位并解决。决。整合性：整合性：框架产品整合了数据库通信方法框架产品整合了数据库通信方法等基础等

24、基础软件工具，提供软件工具，提供了定制化的调用方法，简化了应用开发的相应工作。了定制化的调用方法，简化了应用开发的相应工作。4.框架技术的优缺点框架技术的优缺点-24-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术2）使用框架技术的五个使用框架技术的五个缺缺点点局限性：局限性：框架并不是万能的，从编码规范到数据库设计以及两者框架并不是万能的，从编码规范到数据库设计以及两者之间所涉及的所有元素，每个框架产品都具有一定的局限性。之间所涉及的所有元素，每个框架产品都具有一定的局限性。性能：性能：桌面计算机上很难察觉到加载一

25、个桌面计算机上很难察觉到加载一个75kb的框架的框架.js文件对文件对页面响应速度的影响，但是在移动端加载此页面响应速度的影响，但是在移动端加载此.js文件会因用户设文件会因用户设备不同而呈现出参差不齐的响应速度。备不同而呈现出参差不齐的响应速度。学习复杂度：学习复杂度：学习开发人员熟悉的某种编程语言的框架产品，所学习开发人员熟悉的某种编程语言的框架产品，所学的知识很可能会和语言本身有很大差异。学的知识很可能会和语言本身有很大差异。陡峭的学习曲线：陡峭的学习曲线：大多数框架学习和掌握的难度较高。大多数框架学习和掌握的难度较高。成本：成本：掌握框架产品需要更多的开发实战经验掌握框架产品需要更多的

26、开发实战经验、聘请可靠的框架聘请可靠的框架开发人员的成本较高。开发人员的成本较高。-25-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.2 框架技术框架技术3）Web流行框架产品流行框架产品PHPRubyPythonJavaScriptJavaC#前端框架前端框架YiiCodeIgniterCakePHPZendSymfonyLaravelRailsSinatraPadrinoDjangoWeb2pyTurboGearsFlaskTornadoVUE.jsReactJSNodeJSAngularJSEmberJSBackboneJSKn

27、ockoutJSSpring MVCStrutsHibernateMybatisPlayVaadinGrailsASP.netXarmarinMonoBootstrapFoundationSemanticUI-26-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3 Web应用设计应用设计需求需求规规划划设设计计开开发发测试测试交付交付维维护护Web应用设计的主要阶段应用设计的主要阶段-27-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3.1 10.3.1 需求捕获需求捕获 设计

28、成功设计成功Web应用的应用的关键工作关键工作。充分掌握企业充分掌握企业目标、目标受众和客户需求。掌握企业的业务目目标、目标受众和客户需求。掌握企业的业务目标和愿景，以及如何利用网络来帮助企业实现这标和愿景，以及如何利用网络来帮助企业实现这些目标。些目标。通过问题来获得需求：通过问题来获得需求：10.3 Web应用设计应用设计目的目的目标目标目标受众目标受众内容内容-28-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3.2 10.3.2 规划规划1）产品创意产品创意勾勒项目创意。总结大致的设计理念，勾勒项目创意。总结大致的设计理念，与

29、与客户沟通，取得反馈。客户沟通，取得反馈。审查、调整和批准设计的迭代过程审查、调整和批准设计的迭代过程。考虑最终用户（站点的访问者）的需求。考虑最终用户（站点的访问者）的需求。头脑风暴（头脑风暴（brainstormingbrainstorming）是常用方法。）是常用方法。2）站点地图站点地图站点地图是站点地图是WebWeb站点所有主要主题及子主题区域的列表清单站点所有主要主题及子主题区域的列表清单。指导指导WebWeb应用中的内容应用中的内容。保障设计及开发工作的一致性保障设计及开发工作的一致性。提高提高站点导航站点导航质量质量。10.3 Web应用设计应用设计-29-第第1414讲讲 实

30、现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3.3 10.3.3 设计设计1）草稿线框图草稿线框图草稿线框图是低保真的线框视觉设计草稿线框图是低保真的线框视觉设计。代表网站框架的视觉指南。代表网站框架的视觉指南。呈现不同设计元素的位置分布效果，描述将在每个页面上显示的内容呈现不同设计元素的位置分布效果，描述将在每个页面上显示的内容类型，提供相关功能说明。类型，提供相关功能说明。有助于有助于识别设计师在早期阶段可能错过的任何潜在问题。识别设计师在早期阶段可能错过的任何潜在问题。2）渲染线框图渲染线框图渲染线框图是高保真的线框视觉设计。渲染线框图是高保真的线

31、框视觉设计。视觉效果上与最终产品完全相似视觉效果上与最终产品完全相似。向客户传达每个设计元素的特征、功能和详细规格向客户传达每个设计元素的特征、功能和详细规格。展示展示WebWeb应用的用户友好程度，明确每个页面元素占据的位置和空间。应用的用户友好程度，明确每个页面元素占据的位置和空间。10.3 Web应用设计应用设计-30-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计3）视觉模型视觉模型WebWeb应用外观形成的主要体现形式应用外观形成的主要体现形式。准确展示客户期望准确展示客户期望的的内容。内容。视觉模型是实体模型，有助于创建有效的视觉

32、模型是实体模型，有助于创建有效的WebWeb应用。应用。高质量的建模软件可以帮助设计师开发高质量的建模软件可以帮助设计师开发WebWeb应用视觉框架应用视觉框架。以精确方式展示应用中的具体颜色、字体大小以及导航和内容元素位以精确方式展示应用中的具体颜色、字体大小以及导航和内容元素位置。置。10.3 Web应用设计应用设计-31-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3.4 10.3.4 开发开发开发阶段是开发阶段是WebWeb应用的实现阶段。应用的实现阶段。从原型中提取所有单独的图形元素，并创建实际应用功能。从原型中提取所有单独

33、的图形元素，并创建实际应用功能。10.3 Web应用设计应用设计-32-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3.5 10.3.5 测试和交付测试和交付测试：测试：测试表单或其他脚本的完整功能测试表单或其他脚本的完整功能。排除浏览器差异引起的兼容性问题排除浏览器差异引起的兼容性问题。对对WebWeb应用进行优化，以便在最新的浏览器产品中正确浏览。应用进行优化，以便在最新的浏览器产品中正确浏览。前端代码评审和验证前端代码评审和验证确保确保WebWeb应用符合应用符合WebWeb开发标准。开发标准。交付：交付：将将WebWeb应用从

34、开发环境迁移至生产环境中。应用从开发环境迁移至生产环境中。将应用部署至互联网服务器将应用部署至互联网服务器。申请域名和托管空间服务。申请域名和托管空间服务。上线前测试，确保所有文件都已正确上传，并且用拥有完整功能。上线前测试，确保所有文件都已正确上传，并且用拥有完整功能。10.3 Web应用设计应用设计-33-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.3.6 10.3.6 维护维护保证保证WebWeb应用在互联网上能够长期运行应用在互联网上能够长期运行。及时调整和更新内容。及时调整和更新内容。10.3 Web应用设计应用设计-34-

35、第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 Web信息系统设计范例信息系统设计范例10.4.1 10.4.1 项目背景项目背景问题：问题：传统电力行业销管手工管理方式及半自动化管理信息系统在日常使用传统电力行业销管手工管理方式及半自动化管理信息系统在日常使用中会出现各种弊端中会出现各种弊端针对电力行业的传统落后运营方式，打造在线云销管平台无疑是一个针对电力行业的传统落后运营方式，打造在线云销管平台无疑是一个重要有用的选择，可以颠覆企业运营方式，大大节省人力物力，提高重要有用的选择，可以颠覆企业运营方式，大大节省人力物力，提高效率和

36、效益。效率和效益。电力行业的传统工作流程复杂，数据多元化，工作内容非常丰富，这电力行业的传统工作流程复杂，数据多元化，工作内容非常丰富，这决定了需要做大量的工作才能将传统模式与互联网结合。决定了需要做大量的工作才能将传统模式与互联网结合。-35-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 Web信息系统设计范例信息系统设计范例目标：目标：电力物资销管云平台软件项目设计以某企业的战略总目标为依托，针电力物资销管云平台软件项目设计以某企业的战略总目标为依托，针对实际业务需求，结合企业愿景，以建成电力物资销售云平台为基础对实际业务需求，

37、结合企业愿景，以建成电力物资销售云平台为基础，最终使软件项目得以上线推广，最终使软件项目得以上线推广。解决传统销管手工管理方式及半自动化管理信息系统的各种弊端，为解决传统销管手工管理方式及半自动化管理信息系统的各种弊端，为行业内受众提供便捷的业务处理平台。行业内受众提供便捷的业务处理平台。电力物资销售云平台设计着重考虑线上运行软件的大用户量、高并发电力物资销售云平台设计着重考虑线上运行软件的大用户量、高并发、大数据、安全性、异构网络等一些核心关键问题，以云平台为基础、大数据、安全性、异构网络等一些核心关键问题，以云平台为基础，结合分布式计算、数据库热备份、负载均衡等先进技术，从而保证，结合分布

38、式计算、数据库热备份、负载均衡等先进技术，从而保证应用服务器的高可用性、高安全性及高可扩展性。应用服务器的高可用性、高安全性及高可扩展性。-36-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 Web信息系统设计范例信息系统设计范例10.4.2 10.4.2 电力物资销管云平台项目需求分析电力物资销管云平台项目需求分析主要工作：主要工作：根据电力企业日常的业务流程，绘制业务流程图；根据电力企业日常的业务流程，绘制业务流程图；根据企业要求，设计出原型系统；根据企业要求，设计出原型系统；演示原型系统，让工作人员亲身体验系统，再进一步沟通和

39、完善；演示原型系统，让工作人员亲身体验系统，再进一步沟通和完善；用户需求的细节；用户需求的细节；总结客户的建议和意见，对原来模型进行改进改良，以求获得更加优总结客户的建议和意见，对原来模型进行改进改良，以求获得更加优秀的产品；秀的产品；确定系统边界。确定系统边界。-37-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 Web信息系统设计范例信息系统设计范例10.4.3 10.4.3 需求结构需求结构云平台需求结构云平台需求结构-38-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10

40、.4 Web信息系统设计范例信息系统设计范例10.4.4 10.4.4 功能分析功能分析云平台云平台参与者参与者系统管理员对系统的需求：系统管理员对系统的需求：注册审注册审核核代理商管理员对系统的需求：代理商管理员对系统的需求：询价询价比价报价比价报价、采购销售采购销售、内务管理内务管理、财财务务、审核审核、用户邀请用户邀请、权限管理权限管理。代理商业务员对系统的需求：代理商业务员对系统的需求：询价询价比价报价比价报价、采购销售采购销售、内务管理内务管理、财财务务、审核审核。-39-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 We

41、b信息系统设计范例信息系统设计范例10.4.5 10.4.5 系统网络架构系统网络架构-40-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 Web信息系统设计范例信息系统设计范例10.4.5 10.4.5 系统技术架构系统技术架构-41-第第1414讲讲 实现与测试实现与测试 第第1010章章 WebWeb和移动应用设计和移动应用设计10.4 Web信息系统设计范例信息系统设计范例10.4.6 10.4.6 系统设计系统设计产品表（产品表（PRODUCT）客户表客户表(CUSTOMER)用户用户(业务员业务员)表表(USERS)客户

42、询价单日志表客户询价单日志表(CUSTOMER_ASKING_LOG)客户与用户之间的关系客户与用户之间的关系(CUSTOMER_USER_MAPPING)采购询价单表采购询价单表(PURCHASE_ASKING)供应商报价表供应商报价表(SUPPLIER_BIDDING)采购询价日志表采购询价日志表(PURCHASE_ASKING_LOG)销售报价单表销售报价单表(HUANENG_SALES_BIDDING)报价日志表报价日志表(SALES_BIDDING_LOG)报价状态表报价状态表(SALES_BIDDING_STATUS)表单映射表表单映射表(TABLE_MAPPING)销售合同录入表

43、（销售合同录入表（SALES_CONTRACT_INPUT）销售合同日志表（销售合同日志表（SALES_CONTRACT_LOG）采购合同录入表（采购合同录入表（PURCHASE_CONTRACT_INPUT）采购合同日志表采购合同日志表(PURCHASE_CONTRACT_LOG)销售合同与采购合同对应表销售合同与采购合同对应表(SALES_PURCHASE_MAPPING)采购入库单表采购入库单表(PURCHASE_STORAGE)采购入库日志表采购入库日志表(PURCHASE_STORAGE_LOG)采购入库退货表采购入库退货表(PURCHASE_STORAGE_REJECT)销售出库单

44、表销售出库单表(SALES_DELIVERY)销售出库日志表销售出库日志表(SALES_DELIVERY_LOG)-42-第第1414讲讲 实现与测试实现与测试10.5 移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计10.5.1 10.5.1 智能移动终端智能移动终端1.定义定义移动智能终端是安装了开放操作系统、利用宽带无线移动移动智能终端是安装了开放操作系统、利用宽带无线移动通信技术实现互联网接入的，能够下载、安装应用软件和通信技术实现互联网接入的，能够下载、安装应用软件和数字内容的，根据用户需要定制并为用户提供服务的终端数字内容的，根据用户需要定制并为

45、用户提供服务的终端设备。设备。2.特征特征移动智能终端通常具有四个典型特征：移动智能终端通常具有四个典型特征：1)1)能够访问高速网络的能力；能够访问高速网络的能力；2)2)开放、可扩展的操作系统平台；开放、可扩展的操作系统平台；3)3)较高的处理能力；较高的处理能力；4)4)丰富的人机交互模式（触摸控制、语音识别等）。丰富的人机交互模式（触摸控制、语音识别等）。-43-第第1414讲讲 实现与测试实现与测试10.5 移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计3.分类分类智能手机智能手机PDAPDA智能终端智能终端平板电脑平板电脑车载智能终端车载智能终

46、端可穿戴设备可穿戴设备-44-第第1414讲讲 实现与测试实现与测试10.5 移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计10.5.2 10.5.2 移动应用移动应用1.定义定义广义移动应用包含个人以及企业级应用。广义移动应用包含个人以及企业级应用。狭义移动应用指企业级商务应用。狭义移动应用指企业级商务应用。企业信息化应用场景的完善、扩展，带来企业信息化应用场景的完善、扩展，带来ERPERP的延伸，让的延伸，让ERPERP无所不在，通过广泛的产业链合作为用户提供低成本整无所不在，通过广泛的产业链合作为用户提供低成本整体解决方案。移动应用将带来企业信息化商

47、业模式的创新体解决方案。移动应用将带来企业信息化商业模式的创新变革。变革。2.应用分类应用分类 消息应用消息应用 现场应用现场应用 管理应用管理应用 自助应用自助应用-45-第第1414讲讲 实现与测试实现与测试10.5 移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计3.移动应用信息系统的价值移动应用信息系统的价值移动应用时代，信息化的节点到移动应用时代，信息化的节点到达达个人，从而拓宽了信息系统涵盖的个人，从而拓宽了信息系统涵盖的外延。外延。移动应用移动应用可以融入可以融入企业信息化的各个领域。企业信息化的各个领域。移动应用不是信息系统的移动化，而是基于

48、移动场景的新型业务需求移动应用不是信息系统的移动化，而是基于移动场景的新型业务需求。移动应用移动应用设计必须简单，稳定可靠，设计必须简单，稳定可靠，易用性高易用性高。移动应用的主角是手机，但并不是说只有手机上的应用才是移动应用移动应用的主角是手机，但并不是说只有手机上的应用才是移动应用。不同的场景下需要不同的移动终端。不同的场景下需要不同的移动终端。相对于软件产业，移动应用产业链较长。相对于软件产业，移动应用产业链较长。移动应用是全员化实时信息采集器、移动应用是业务流程加速器、移移动应用是全员化实时信息采集器、移动应用是业务流程加速器、移动应用是企业信息价值放大器。动应用是企业信息价值放大器。

49、-46-第第1414讲讲 实现与测试实现与测试10.5 移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计10.5.3 10.5.3 移动应用的开发过程移动应用的开发过程1.理念理念所有伟大的应用都是以某种理念为出发点。所有伟大的应用都是以某种理念为出发点。提问：提问：“为什么这样做？解决什么问题？为什么这样做？解决什么问题？”“有更好的办法来解决这个问题吗？有更好的办法来解决这个问题吗？”掌握问题存在掌握问题存在的原因。的原因。有无有无前人实现应用来解决问题。前人实现应用来解决问题。评估如何利用移动应用来解决这个问题。评估如何利用移动应用来解决这个问题。-4

50、7-第第1414讲讲 实现与测试实现与测试10.5 移动应用设计移动应用设计 第第1010章章 WebWeb和移动应用设计和移动应用设计2.策略规划策略规划 1）竞争评估竞争评估寻找市场中的其他应用程序是否具有类似寻找市场中的其他应用程序是否具有类似的用途的用途，安装数量安装数量、评级和评论评级和评论、移动应移动应用企业历程用企业历程。两个主要目标。从竞争对手那里吸取教训两个主要目标。从竞争对手那里吸取教训，可以降低信息系统设计的风险。其次，可以降低信息系统设计的风险。其次，理解在市场上竞争的困难。理解在市场上竞争的困难。2）盈利点盈利点实现盈利的方式包括：应用内购、订阅付实现盈利的方式包括：