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

第10章本章内容1Web和移动应用设计概述2框架技术3Web应用设计Web信息系统设计范例移动应用设计第10章Web和移动应用设计10.1Web和移动应用设计概述10.1.1背景

随着时代进步、信息技术的发展，信息系统得到了长足的进步。

信息技术的进步带来了众多新的业务模式，譬如电子商务、电子政务、电子医疗。

组织传统信息系统的业务处理能力面临着前所未有的挑战。高并发、高访问量、高资源消耗的用户群请求，用户体验也需要提升到较高的水准。

Web应用和移动应用是新型信息系统的主要组成部分。第10章Web和移动应用设计

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

信息系统的架构师以种种框架技术为基础，通过构思如何组合、编排、安插各种业务逻辑来搭建系统。

框架技术是实现信息系统质量保证的更有效方法。

三层结构是现代信息系统的核心基础，框架技术是现代信息系统的核心实现手段第10章Web和移动应用设计10.1Web和移动应用设计概述10.1.2三层结构

三层结构（三层体系结构）是一种架构部署风格，它将功能分为多个层，每个层都可以位于物理上分离的计算机上。

三层结构由面向组件的软件设计方法演变而来，与面向组件的方法不同，它通常使用平台特定的通信方法而不是基于消息的方法。

三层结构在不同的应用场景中有不同的用途，即可以用于Web应用程序也可以用于分布式应用程序、移动应用程序。第10章Web和移动应用设计10.1Web和移动应用设计概述10.1Web和移动应用设计概述1.逻辑结构

1)表示层具有应用程序的最高级别。●移动设备客户端交互的图形用户界面●基于Web的用于浏览器的交互界面功能：将信息系统的计算、查询、处理结果输出到浏览器或移动客户端中。展示浏览商品、购买和购物车内容等服务有关的信息。第10章Web和移动应用设计2)逻辑层

逻辑层也称为业务逻辑、数据访问层或中间层。三层结构中逻辑层与表示层隔离。功能：用于执行繁杂的业务过程、控制应用程序功能，解决关键任务业务问题，执行业务规则、业务相关算法、政策法律法规以及数据规则约定。逻辑层被部署在服务器上，提供资源共享服务。

具有较高的通用性，可以部署到不同的物理位置。第10章Web和移动应用设计10.1Web和移动应用设计概述3)数据层

数据层由数据库服务器组成。即可以通过逻辑层访问，又可以通过表示层访问。数据层是数据存储和查询的终点。有利于提高系统的可伸缩性和性能。第10章Web和移动应用设计10.1Web和移动应用设计概述

三层应用程序体系结构的特点由应用程序、服务组件及其分布式部署的功能分解而决定。

三层结构具备较高的可重用性、灵活性、可管理性、可维护性和可伸缩性。

三层中每个层都完全独立于所有其他非相邻层。

任意层中创建的组件和服务都可以进行共享和重用。将大型复杂项目划分为简单功能单一的模块单元，降低系统的实现难度。

将服务和组件部署在单个服务器上，后期可以对服务进行重新部署。第10章Web和移动应用设计10.1Web和移动应用设计概述2.组件互联规则

表示层：发送HTTP请求，接收逻辑层返回的HTML。（使用DHTML、JavaScript等技术）逻辑层：根据客户机的业务规则来解释请求，并从持久层请求所需数据，接着计算派生的数据结果，并创建页面元素（HTML等）。

（Python

Web、Nginx）数据层：为其他层提供数据服务。（Mysql、MariaDB、PostgreSQL）

第10章Web和移动应用设计10.1Web和移动应用设计概述3.三层结构范例解析第10章Web和移动应用设计10.1Web和移动应用设计概述3.三层结构范例解析层组件功能表示层客户端Web浏览器向Web服务器发送HTTP请求逻辑层Web服务器将HTTP响应发送到Web客户机将客户端的HTTP请求转换为SMTP包，然后发送到邮件服务器数据层邮件服务器邮件服务器执行以下功能，执行后将其转换至逻辑层发件人提交完成后，发件人的电子邮件客户端将电子邮件以SMTP包的形式发送到本地邮件服务器邮件服务器的消息传输代理读取包的目的地址，并通过Internet发送到接收方的邮件服务器目标邮件传输代理将消息存储在收件人的邮箱中当接收者登陆电子邮件时，他的用户代理与本地邮件服务器联系，然后将该消息下载到接收方的客户端计算机第10章Web和移动应用设计10.2框架技术10.2.1背景知识

随着时代进步、信息技术的发展，信息系统得到了长足的进步。

现阶段传统信息系统开发存在很多问题，主要表现在：

1）软件开发的“供不应求”现象影响着企业的发展。

2）信息系统质量不可靠、维护工作不足，用户对已完成的系统很难满意。

3）开发人员不能满足市场需求，需要掌握太多知识。

4）频繁的系统开发给公司带来了巨大的损失。

5）信息系统没有正式的归档文件，给后期的开发、维护和改造带来很大的困难。第10章Web和移动应用设计10.2框架技术

随着时代进步、信息技术的发展，信息系统得到了长足的进步。

应用框架技术可以提高开发人员的生产力，提高信息系统的质量、可靠性和健壮性等关键服务质量保证指标。

框架技术允许系统研发人员更专注于实现应用程序的需求，而不是耗费大量的时间在应用程序基础设施的构造上。

框架技术包含了基层处理的基本功能。现代信息系统的构建，从技术角度上看，就是各种框架技术的组合。第10章Web和移动应用设计10.2框架技术10.2.2Web框架技术

Web框架（WebFramework）或Web应用程序框架（WAF）是软件框架，旨在支持Web应用程序的开发。

Web应用程序包括Web服务、Web资源和WebAPI。

Web框架提供了构建和部署Web应用程序的标准方法。第10章Web和移动应用设计10.2框架技术

Web应用框架有两种：第一种的应用程序逻辑建立在服务器上，第二种的应用程序逻辑建立在客户端上。1）服务器端Web应用框架

具备处理HTTP请求、数据库控制和管理以及URL映射等Web应用的必要功能。流行的服务器端Web框架有：SpringBoot(Java)、Symfony(PHP)、Django(Python)、Express(Node.js/JavaScript)、RubyonRails(Ruby)、ASP.NET(C#)。

1.框架结构的种类第10章Web和移动应用设计10.2框架技术2）客户端Web应用框架客户端Web应用框架可以归纳成三种截然不同的架构模式。传统HTMLWeb应用程序：根据最基本的Web应用程序体系结构，由网页构造逻辑和业务逻辑组成的服务器通过发送完整的HTML页面与客户机交互。

第10章Web和移动应用设计10.2框架技术Widget（小部件）WEB应用程序：这种类型的Web页面构建逻辑被Web服务所取代，客户端上的每个页面都有单独的实体，称为WIDGET。

第10章Web和移动应用设计10.2框架技术单页Web应用程序：这是最现代的Web应用程序架构，整个Web应用只有单一页面，并且客户端只从服务器下载一次页面。

第10章Web和移动应用设计10.2框架技术

1）模型-视图-控制器(MVC)

大多数Web框架都基于模型-视图-控制器（MVC）模式。2）Push-basedvs.pull-based

大多数MVC框架遵循一种基于推的体系结构风格，或称为“基于动作”。3）三层结构

在三层Web结构中，应用程序的三层分别是：客户机浏览器、应用服务和数据库。2.Web应用框架的概念结构第10章Web和移动应用设计10.2框架技术

如何抉择是否采用框架技术。

1）系统需要定制的程度。定制程度越高，使用框架的可能性就越大。 2）研发团队。最终驱使开发人员是否使用框架的选择，需要考虑关于使用像框架技术的利弊。3.使用框架技术的时机第10章Web和移动应用设计10.2框架技术

1）使用框架技术的五个优点开源：在许多语言中最流行的框架是开源的（或可免费使用）。文档和支持：流行编码语言对应的软件框架，也具有较高的流行度，那么针对框架的官方文档支持量大、质量较高。效率：框架技术存在的最重要原因之一。安全性：产品推出之前的各项测试及优化工作中，已基本消除了框架中潜在的安全隐患。新的安全风险问题也可以迅速定位并解决。整合性：框架产品整合了数据库通信方法等基础软件工具，提供了定制化的调用方法，简化了应用开发的相应工作。4.框架技术的优缺点第10章Web和移动应用设计10.2框架技术

2）使用框架技术的五个缺点局限性：框架并不是万能的，从编码规范到数据库设计以及两者之间所涉及的所有元素，每个框架产品都具有一定的局限性。性能：桌面计算机上很难察觉到加载一个75kb的框架.js文件对页面响应速度的影响，但是在移动端加载此.js文件会因用户设备不同而呈现出参差不齐的响应速度。学习复杂度：学习开发人员熟悉的某种编程语言的框架产品，所学的知识很可能会和语言本身有很大差异。陡峭的学习曲线：大多数框架学习和掌握的难度较高。成本：掌握框架产品需要更多的开发实战经验、聘请可靠的框架开发人员的成本较高。第10章Web和移动应用设计10.2框架技术

3）Web流行框架产品PHPRubyPythonJavaScriptJavaC#前端框架YiiCodeIgniterCakePHPZendSymfonyLaravelRailsSinatraPadrinoDjangoWeb2pyTurboGearsFlaskTornadoVUE.jsReactJSNodeJSAngularJSEmberJSBackboneJSKnockoutJSSpringMVCStrutsHibernateMybatisPlayVaadinGrailsASP.netXarmarinMonoBootstrapFoundationSemanticUI

第10章Web和移动应用设计10.3Web应用设计需求规划设计开发测试交付维护Web应用设计的主要阶段第10章Web和移动应用设计10.3.1需求捕获

设计成功Web应用的关键工作。充分掌握企业目标、目标受众和客户需求。掌握企业的业务目标和愿景，以及如何利用网络来帮助企业实现这些目标。

通过问题来获得需求：10.3Web应用设计目的目标目标受众内容第10章Web和移动应用设计10.3.2规划 1）产品创意勾勒项目创意。总结大致的设计理念，与客户沟通，取得反馈。审查、调整和批准设计的迭代过程。考虑最终用户（站点的访问者）的需求。头脑风暴（brainstorming）是常用方法。

2）站点地图站点地图是Web站点所有主要主题及子主题区域的列表清单。指导Web应用中的内容。保障设计及开发工作的一致性。提高站点导航质量。10.3Web应用设计第10章Web和移动应用设计10.3.3设计1）草稿线框图草稿线框图是低保真的线框视觉设计。代表网站框架的视觉指南。

呈现不同设计元素的位置分布效果，描述将在每个页面上显示的内容类型，提供相关功能说明。有助于识别设计师在早期阶段可能错过的任何潜在问题。2）渲染线框图渲染线框图是高保真的线框视觉设计。视觉效果上与最终产品完全相似。向客户传达每个设计元素的特征、功能和详细规格。展示Web应用的用户友好程度，明确每个页面元素占据的位置和空间。10.3Web应用设计第10章Web和移动应用设计3）视觉模型Web应用外观形成的主要体现形式。准确展示客户期望的内容。视觉模型是实体模型，有助于创建有效的Web应用。高质量的建模软件可以帮助设计师开发Web应用视觉框架。以精确方式展示应用中的具体颜色、字体大小以及导航和内容元素位置。10.3Web应用设计第10章Web和移动应用设计10.3.4开发开发阶段是Web应用的实现阶段。从原型中提取所有单独的图形元素，并创建实际应用功能。10.3Web应用设计第10章Web和移动应用设计10.3.5测试和交付测试：测试表单或其他脚本的完整功能。排除浏览器差异引起的兼容性问题。对Web应用进行优化，以便在最新的浏览器产品中正确浏览。前端代码评审和验证确保Web应用符合Web开发标准。交付：将Web应用从开发环境迁移至生产环境中。将应用部署至互联网服务器。申请域名和托管空间服务。上线前测试，确保所有文件都已正确上传，并且用拥有完整功能。10.3Web应用设计第10章Web和移动应用设计10.3.6维护保证Web应用在互联网上能够长期运行。及时调整和更新内容。10.3Web应用设计第10章Web和移动应用设计10.4Web信息系统设计范例10.4.1项目背景问题：传统电力行业销管手工管理方式及半自动化管理信息系统在日常使用中会出现各种弊端针对电力行业的传统落后运营方式，打造在线云销管平台无疑是一个重要有用的选择，可以颠覆企业运营方式，大大节省人力物力，提高效率和效益。电力行业的传统工作流程复杂，数据多元化，工作内容非常丰富，这决定了需要做大量的工作才能将传统模式与互联网结合。第10章Web和移动应用设计10.4Web信息系统设计范例目标：电力物资销管云平台软件项目设计以某企业的战略总目标为依托，针对实际业务需求，结合企业愿景，以建成电力物资销售云平台为基础，最终使软件项目得以上线推广。解决传统销管手工管理方式及半自动化管理信息系统的各种弊端，为行业内受众提供便捷的业务处理平台。电力物资销售云平台设计着重考虑线上运行软件的大用户量、高并发、大数据、安全性、异构网络等一些核心关键问题，以云平台为基础，结合分布式计算、数据库热备份、负载均衡等先进技术，从而保证应用服务器的高可用性、高安全性及高可扩展性。第10章Web和移动应用设计10.4Web信息系统设计范例10.4.2电力物资销管云平台项目需求分析主要工作：根据电力企业日常的业务流程，绘制业务流程图；根据企业要求，设计出原型系统；演示原型系统，让工作人员亲身体验系统，再进一步沟通和完善；用户需求的细节；总结客户的建议和意见，对原来模型进行改进改良，以求获得更加优秀的产品；确定系统边界。第10章Web和移动应用设计10.4Web信息系统设计范例10.4.3需求结构云平台需求结构第10章Web和移动应用设计10.4Web信息系统设计范例10.4.4功能分析云平台参与者系统管理员对系统的需求：注册审核代理商管理员对系统的需求：询价比价报价、采购销售、内务管理、财务、审核、用户邀请、权限管理。代理商业务员对系统的需求：询价比价报价、采购销售、内务管理、财务、审核。第10章Web和移动应用设计10.4Web信息系统设计范例10.4.5系统网络架构第10章Web和移动应用设计10.4Web信息系统设计范例10.4.5系统技术架构第10章Web和移动应用设计10.4Web信息系统设计范例10.4.6系统设计产品表（PRODUCT）客户表(CUSTOMER)

用户(业务员)表(USERS)客户询价单日志表(CUSTOMER_ASKING_LOG)

客户与用户之间的关系(CUSTOMER_USER_MAPPING)采购询价单表(PURCHASE_ASKING)供应商报价表(SUPPLIER_BIDDING)

采购询价日志表(PURCHASE_ASKING_LOG)

销售报价单表(HUANENG_SALES_BIDDING)

报价日志表(SALES_BIDDING_LOG)

报价状态表(SALES_BIDDING_STATUS)

表单映射表(TABLE_MAPPING)

销售合同录入表（SALES_CONTRACT_INPUT）销售合同日志表（SALES_CONTRACT_LOG）采购合同录入表（PURCHASE_CONTRACT_INPUT）采购合同日志表(PURCHASE_CONTRACT_LOG)

销售合同与采购合同对应表(SALES_PURCHASE_MAPPING)

采购入库单表(PURCHASE_STORAGE)

采购入库日志表(PURCHASE_STORAGE_LOG)

采购入库退货表(PURCHASE_STORAGE_REJECT)

销售出库单表(SALES_DELIVERY)

销售出库日志表(SALES_DELIVERY_LOG)10.5移动应用设计第10章Web和移动应用设计10.5.1智能移动终端1.定义移动智能终端是安装了开放操作系统、利用宽带无线移动通信技术实现互联网接入的，能够下载、安装应用软件和数字内容的，根据用户需要定制并为用户提供服务的终端设备。2.特征移动智能终端通常具有四个典型特征： 1)能够访问高速网络的能力； 2)开放、可扩展的操作系统平台； 3)较高的处理能力； 4)丰富的人机交互模式（触摸控制、语音识别等）。10.5移动应用设计第10章Web和移动应用设计3.分类智能手机PDA智能终端平板电脑车载智能终端可穿戴设备10.5移动应用设计第10章Web和移动应用设计10.5.2移动应用1.定义广义移动应用包含个人以及企业级应用。狭义移动应用指企业级商务应用。企业信息化应用场景的完善、扩展，带来ERP的延伸，让ERP无所不在，通过广泛的产业链合作为用户提供低成本整体解决方案。移动应用将带来企业信息化商业模式的创新变革。2.应用分类

∙消息应用∙现场应用∙管理应用∙自助应用10.5移动应用设计第10章Web和移动应用设计3.移动应用信息系统的价值移动应用时代，信息化的节点到达个人，从而拓宽了信息系统涵盖的外延。移动应用可以融入企业信息化的各个领域。移动应用不是信息系统的移动化，而是基于移动场景的新型业务需求。移动应用设计必须简单，稳定可靠，易用性高。移动应用的主角是手机，但并不是说只有手机上的应用才是移动应用。不同的场景下需要不同的移动终端。相对于软件产业，移动应用产业链较长。移动应用是全员化实时信息采集器、移动应用是业务流程加速器、移动应用是企业信息价值放大器。

10.5移动应用设计第10章Web和移动应用设计10.5.3移动应用的开发过程1.理念所有伟大的应用都是以某种理念为出发点。

提问：“为什么这样做？解决什么问题？”

“有更好的办法来解决这个问题吗？”掌握问题存在的原因。有无前人实现应用来解决问题。评估如何利用移动应用来解决这个问题。10.5移动应用设计第10章Web和移动应用设计2.策略规划

1）竞争评估寻找市场中的其他应用程序是否具有类似的用途，安装数量、评级和评论、移动应用企业历程。两个主要目标。从竞争对手那里吸取教训，可以降低信息系统设计的风险。其次，理解在市场上竞争的困难。2）盈利点实现盈利的方式包括：应用内购、订阅付费、高级功能、广告收入、销售用户数据和传统付费应用。

3）市场营销应用程序营销推广时所面临的最大挑战。企业内部业务系统的应用程序或B2B应用，则不需要考虑市场营销。4）路线图策略过程的最后阶段是定义应用程序的路线图。掌握移动应用的未来形态，以及它的成功上线需要做哪些准备工作。10.5移动应用设计第10章Web和移动应用设计2.策略规划1)信息架构决定在应用中呈现的数据和功能，以及如何组织这些数据和功能。常用工具：白板、铅笔和纸。2)线框图创建屏幕区域并分配每个功能和数据。常用工具：白板、铅笔和纸、balsamiq和Sketch。3)工作流工作流是用户在应用中的操作路径，此时需要考虑期望用户能做的操作，统计完成某个操作需要的点击次数，从而确保每次点击的直观程度。常用工具：白板、铅笔和纸、Invision。4)点击模型点击模型（Click-throughmodels）有助于测试线框图和工作流。在智能手机上体验线框图的方式以达到模拟测试的目的。常用工具：Invision、Axure、Hype310.5移动应用设计第10章Web和移动应用设计3.用户界面设计1)风格样式设计风格样式设计是应用设计的基础。良好统一的风格样式将提高应用的可用性。2)渲染设计渲染设计是将线框图丰富美化的过程，常用工具：白板、铅笔和纸、Sketch。3)渲染点击模型将线框图点击模型替换成渲染设计点击模型，并再次测试移动应用点击模型。常用工具：Invision、Axure、Hype310.5移动应用设计第10章Web和移动应用设计4.设计开发过渡阶段开发团队负责完成实现工作。许多项目的设计和开发团队是相互独立的，设计师和开发人员之间分歧较大。如果项目的设计和开发是由一个团队负责的话，则可在过渡中正确处理因分歧导致的各种问题。使用软件工具确保设计的精确实现。可以帮助开发人员快速获取设计的风格样式。设计团队投入了大量工作来确保屏幕元素被正确地对齐和定位，开发团队的目标则应该是在具体应用中完美实现设计团队定义的每个像素。常用工具：Zeplin10.5移动应用设计第10章Web和移动应用设计5.高级技术设计（技术栈）前端（移动应用程序）

移动应用前端开发，相当于针对PC、MacOS、Linux平台的桌面应用开发。三种方法：

特定平台的原生开发

构建的移动应用需要针对不同平台编写不同代码

跨平台的原生开发

构建的应用针对不同平台有部分（或完全）共享代码

跨平台的混合开发

使用Web技术（HTML、CSS、JavaScript）构建，并

通过原生封装器封装后安装10.5移动应用设计第10章Web和移动应用设计后端（WebAPI和服务器）

移动应用的服务器使用的技术与用于基于Web的应用程序的技术类似，旨在性能方面提高应用的各项能力。

需要确定以下几个方面的技术框架：

语言：每种编程语言都有其著名的技术框架。

数据库：现代数据库的主要类型有两种：SQL和NoSQL。常见基于SQL的数据库管理系统有MSSQL、MySQL和PostgreSQL。

主机环境（基础设施）：决定API和数据库的位置及托管方式。影响移动应用后端服务的托管成本、可伸缩性、性能和可靠性。云主机的租赁是移动应用后端服务主机配置的主要方式，常见的托管服务提供商有AmazonAWS、GoogleCloudPlatform、阿里云、腾讯云、百度云等。规划系统随着用户基数增长的扩展（扩容）方式。10.5移动应用设计第10章Web和移动应用设计6.开发与迭代移动应用开发是一个迭代过程。目前最流行的开发方法是敏捷开发（Sprints）。将所有的开发工作分解成更小的里程碑，并在一系列的循环中构建应用。每个循环周期将包括规划、开发、测试和评审四个步骤。1)规划将当前迭代期内需要实现的任务分解。每个任务都对应明确的需求。规划问题的解决方法。评估整个应用中可重用代码的程度。10.5移动应用设计第10章Web和移动应用设计2)开发实现应用的样式和功能。项目经理或QA测试人员进行评审。项目经理重新分配任务，合理化安排开发过程中的工作量分配。可以使用相应的软件平台辅助开发工作。

3)测试

测试工作应该由非开发人员或非应用程序的主要开发人员执行。

测试类型包括：∙功能测试

∙可用性测试

∙性能测试

∙装配测试

∙回归测试

∙设备特定测试

∙用户接受度测试10.5移动应用设计第10章Web和移动应用设计4)评审每次Sprints迭代结束时，与涉众进行讨论，并评估Sprints的执行效果。根据之前存在的问题，拟定将来此类问题的处理方法。获得较好的执行效果的成果，将会被借鉴到其他方面中。每个团队成员都应该负责推进承担的任务，在迭代的过程中，力求改进。评审工作完成后，重新开始计划阶段，重复迭代，直到完成产品。10.5移动应用设计第10章Web和移动应用设计7.延伸评审两种方法：1)

焦点小组组织面试相应的测试人员或小组。

了解这些测试者的身份，获得他们使用当前产品之前的背景信息。测试人员在无指导的情况下开始使用应用程序。

观察测试者如何使用应用，记录使用中常见的问题。取得反馈。结合所有有用的反馈情况制定修改方案。

2)

beta测试测试人员在真实环境中使用应用程序，从而获得反馈。

观察应用在各种设备、地点、操作系统和网络条件下执行的情况。完善系统崩溃报告，以备出错的情况下，有据可查。10.5移动应用设计第10章Web和移动应用设计3)应用改良