计算机科学与技术-基于谷歌Flutter的媒体资讯APP的设计与实现

基于谷歌Flutter框架媒体资讯App的设计与实现摘要：当今社会，随着经济和科技的发展，人们的生活节奏也愈来愈快，人们生活的阅读时间也越来越少，越发的流行碎片化阅读，而同样的对于互联网的客户端开发者，需求的版本迭代也愈发频繁，同一个移动端的App，起码要发行两个平台，同样也因为这不同的平台，不同的系统，导致在寻多的业务场景中，传统的原生开发效率已经满足不了日益增长的业务需求，如Androi端和IOS端，一旦需求上的变更，两个平台上都要进行更新，重新发布版本，这对于一个公司两个终端的开发成本都需增加许多的，这其中主要表现为：(1).动态化内容需求增大：当需求发生变化，传统原生应用需要进行版本迭代来更新内容，但应用上架审核都是要周期的。(2).业务需求变化快，开发成本高：由于原生开发一般都要维护Android、iOS两个开发团队，版本迭代时，无论人力成本，还是测试成本都会变大。这样的情况下，开发者们开发App的成本不断上升，上架流程以及版本迭代流程的繁琐，对此很多IT巨头都推出了很多跨平台的框架，如Facebook的ReactNative,阿里的WEEX，但都因为存在性能上的缺陷和难以实现复杂的操着，从而导致普及率远没有原生开发的普及高，而Google于2015年推出的Flutter跨平台的框架，如今经历了5年多的发展，Flutter自身的许多的问题也不断在修复中，到现在可谓颇为成熟了，因此以此作为跨平台技术的首选框架，开发此类跨平台资讯应用，研究和学习Flutter之时，也为Flutter的软件生态作出一点添砖加瓦，也为广大的IT网民提供一款不受平台系统限制的资讯应用。Flutter媒体资讯App将实现一个跨平台的媒体资讯阅读软件，是广大的互联用户不拘束于平台的限制，能够随时随地利用碎片化的时间，来浏览阅读资讯，同时作为一个Flutter开发者可以参与学习的开源项目关键词：跨平台，资讯阅读

DesignandImplementationofMediaInformationAppBasedonGoogleFlutterFrameworkAbstract：Intoday'ssociety,withthedevelopmentofeconomyandtechnology,people'spaceoflifeisbecomingfasterandfaster,people'sreadingtimeisbecominglessandless,andfragmentedreadingisbecomingmoreandmorepopular.ForthesameclientdevelopersoftheInternet,versioniterationsarebecomingmoreandmorefrequent.Forthesamemobileapp,atleasttwoplatformsshouldbereleased,becauseofthesedifferentplatforms,Differentsystemsleadtothefactthattraditionalnativedevelopmentefficiencycannolongermeetthegrowingbusinessrequirementsinmultiplebusinessscenarios,suchasAndroiandIOS.Oncetherequirementsarechanged,bothplatformsneedtobeupdatedandrereleased.Thiswillincreasethedevelopmentcostofbothterminalsofacompany.Themainperformanceisasfollows:(1).dynamiccontentdemandincreases:whenthedemandchanges,thetraditionalnativeapplicationneedstocarryoutversioniterationtoupdatethecontent,buttheapplicationontheshelfauditisperiodic.(2).thebusinessdemandchangesrapidly,andthedevelopmentcostishigh:becausethenativedevelopmentgenerallyneedstomaintaintwodevelopmentteams,AndroidandIOS,whentheversionisiterated,boththelaborcostandthetestcostwillincrease.Inthiscase,thecostfordeveloperstodevelopappsisrising,andtheprocessofputtingthemontheshelfandversioniterationistedious.ManyITgiantshavelaunchedmanycrossplatformframeworks,suchasFacebook'sreactnative,Alibaba'sweex,however,isfarlesspopularthanthenativedevelopmentduetoitsperformancedefectsanddifficulttoachievecomplexoperation.However,thecrossplatformframeworkofflutterlaunchedbyGooglein2015hasexperiencedmorethanfiveyearsofdevelopment.Manyproblemsofflutteritselfarealsobeingrepaired,andnowitisquitemature,soitisusedasacrossplatformThefirstchoiceframeworkoftechnologyistodevelopthiskindofcrossplatforminformationapplication.Whenresearchingandlearningflutter,italsomakesalittlecontributiontothesoftwareecologyofflutterandprovidesaninformationapplicationthatisnotlimitedbytheplatformsystemforthemajorityofitnetizens.Thefluttermediainformationappwillrealizeacrossplatformmediainformationreadingsoftware,whichisnotrestrictedbytheplatform,andenablesthevastnumberofInternetuserstousefragmentedtimetobrowseandreadinformationanytimeandanywhere.Keywords:NewsApp;Dart；

目录TOC\o"1-3"\h\u第1章绪论 第1章绪论1.1App的开发背景及意义当今社会迅猛发展，信息的流动也越发频繁，人们获取信息的渠道也变多种多样，物联网时代的兴起，移动互联网的如日中天，不同平台，不同系统下的App也层出不穷，同样也因为这不同的平台，不同的系统，导致在寻多的业务场景中，传统的原生开发效率已经满足不了日益增长的业务需求。在这种碎片化阅读流行的时代，通过跨平台框架开发一款跨平台的媒体资讯阅读的应用，为人们带来更加富有内涵，更深层次的碎片化阅读。此App的开发意义旨在在研究和开发基于的Flutter[1]的媒体资讯应用，以及Flutter开发在广大移动端的应用，对原生开发的影响以及适用性。为什么我们要选择跨平台？如今的移动端已经发展非常的迅猛，同样的，也诞生了许多的移动端的应用开发者，IOS和Android占据了整个移动市场的主流，两个平台系统的差异性，导致一个应用的开发需要用不同的编程语言，不同的编程生态，这对开发者乃至于企业公司来讲，都需要花费更多的成本，对此有没有存在更好的选择呢？答案是存在的，那就是基于跨平台技术框架的开发，何为跨平台？是软件开发中一个重要的概念，即不依赖于操作系统，也不信赖硬件环境。一个操作系统下开发的应用，放到另一个操作系统下依然可以运行。Flutter是什么？Flutter是一款移动应用程序SDK[2]，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。为什么要使用Flutter?提高开发效率同一份代码开发iOS和Android用更少的代码做更多的事情轻松迭代在应用程序运行时更改代码并重新加载（通过热重载）修复崩溃并继续从应用程序停止的地方进行调试创建美观，高度定制的用户体验受益于使用Flutter框架提供的丰富的MaterialDesig[3]和Cupertino[]（iOS风格）的widget实现定制、美观、品牌驱动的设计，而不受原生控件的限制基于跨平台Flutter框架开发的媒体资讯应用有如下意义：研究和进一步推广Flutter应用的开发给广大网民提供一个不受系统差异影响的媒体资讯应用为如今正稀缺的Flutter应用生态做出贡献。1.2国内外研究现状目前Flutter作为一种新兴的跨平台的技术框架，与老一辈的跨平台技术框架相比，其通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，就使得它可以做到不同平台UI的一致性，能够实现其他跨平台技术框架做不到的复杂的动画交互效果，或者复杂的前端交互。在StackOverflow2019年的全球开发者问卷调查中，Flutter被选为最受开发者欢迎的框架之一，超过了TensorFlow和Node.js。图1.1StackOverflow2019最受欢迎框架其在Github上的热度，star数达更是可见开发者对其前景的一片看好图1.2flutterGIthub热度而在Flutter中午官网上线后，Flutter中文网也很快被传播开，百度搜索排名迅速蹿升到前三，截止目前，Flutter中文官网[4]日PV在7万左右，每日独立访问人数近一万多。在中国，Flutter的开发者社区非常活跃。社区贡献了大量高质量的技术文章，Flutter官方文档的翻译，还组织了许多线上线下的活动。在今年I/O前举办的全球FlutterCreate大赛中，来自中国广东的胡泽标凭借一个特别精致的罗盘应用摘得了全球大奖。1.3系统的主要研究内容基于Flutter开发的媒体资讯App主要研究是开发跨平台的媒体资讯阅读应用，使人们不拘束任何平台系统的限制，随时随地用何种系统设备都能够用此应用来阅读媒体资讯将会降低和利润将会提高。用户交互界面、网络数据处理以及本地数据存储是一个完整的App的基本组成部分，所以Flutter媒体资讯App的主要研究内容可以分为以下几步：首先用户交互界面应该如何设计好，如何让用户有一个UI体验，一个APP必须要有良好的用户交互界面，就必须遵从一定的设计，因此本App采用的是MaterialDesign，而在用户交互界面设计上，紧接着的是媒体资讯阅读源的爬取，这里决定的数据采集源有：网易的热点新闻，知乎日报每天的推送，以及果壳科技的文章，以及可供考虑的ReadHub，接着的本地数据的存储，可以用数据库或者第三库的SharedPreference[5]。1.4系统开发环境与开发工具8GB的win10x64操作系统。AndroidStudio被作为系统Android客户端的开发工具，FlutterSDK的版本是1.15.3,dev,同时通过HttpCannary，Fiddler来抓取网络数据，App采用的第三库有以下这些：闲鱼的fishrudex[6]RxdartJson序列化json_annotation事件总线event_bus网络请求的Dio图片缓存的Cached_network_imageliquid_pull_to_refreshgoogle_nav_bar

第2章系统需求分析2.1可行性分析2.1.1经济可行性基于Flutter媒体资讯App的设计与实现是本人的毕业设计，从整个App的设计到开发都由本人自己完成，在开发过程设计的爬取的数据都是来自于第三方，还有一些第三方的接口，是只能每天请求固定数次的，如聚合数据和极速数据等提供的API，超过固定的请求就要进行收费，但幸好的是本App暂时只作为毕业设计的演示项目，并不打算商用，且后续打算进行开源，因而经济上暂时还没有太大的阻力，且很多时候爬取数据的API很多也是从官方那边爬取，没有过多进行付费API的请求2.1.2技术可行性该系统作为本人的毕业设计，而本人已修完所有在校课程，且已经利用业余时间不断的学习Flutter技术框架，更有国内开源电子书《Flutter实战》[7]的指导，且通过GoogleFlutter开设的学习项目上手演练，以算是具备一定的Flutter开发基础，主要编程语言为Dart[8]而对于原生平台的语言，我本身以及有过Android开发的经验，可以保证的是能够在解决Android平台的上的适应性和兼容性的问题，而于IOS来说，本人并没有IOS的开发经验也没有相应可供调试的设备，所以IOS端的兼容性无法保证，确定兼容的有Android端，虽然说Flutter的桌面端已经有实验性项目，但终究还是在实验性的阶段，所以Linux，Window，Macos等桌面端有待以后在成熟时进行兼容性适配2.1.3操作可行性本App的开发的UI是基于MaterialDesign设计。简洁明快，拟物[9]的风格，在基本元素的设计处理上，借鉴了传统的印刷设计、字体版式、网格系统、三维空间、比例、色彩、阴影，图像使用。在这些设计基础上下功夫，从而能够构建出更深层次，更富有吸引力的视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，将使得设计的GUI将会变得更加具有吸引力，以及更好的上手操作指引。整体UI设计一看就懂，不存在困惑的操作2.2APP的总体需求Flutter媒体资讯App的设计，旨在给热点新闻，关注全球时事热点新闻，关注国际形势，社会当下的热点，以及提供精选的资讯的浏览，其中包括知乎日报，果壳科技，Readhub等深度资讯热点话题平台，这将极大的开阔的用户的视野，极大的提升的用户的文化知识。2.3App功能的需求分析App功能模块图如图2.3。图2.1Flutter媒体资讯App功能模块图2.4.1App功能分析今日要闻：爬取网易新闻官方的时事热点，社会当下的热点资讯，国际的社会形势，新闻跟网易新闻同步，每时每刻以供用户选择自己的感兴趣的时事资讯阅读。精选聚合：此功能模块，爬取了国内富有深度内涵的媒体杂志号的文章，以供选择性浏览，更具趣味内涵的文章，此功能模块有三个子功能模块，分别是：知乎日报部分，正如其标题所言，每日三次，每次七分钟，爬取供用户浏览的是，知乎日报每天推送的文章，主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好者推荐各领域最精彩文章，满足高质量阅读需求。果壳科技，果壳网是一个泛科技主题网站,提供负责任、有智趣、贴近生活的内容,你可以在这里阅读、分享、交流、提问。果壳网致力于让科技兴趣成为人们文化生活和娱乐生活的重要.部分，此处为爬取果壳网几个公众号每日推送的消息，以供用户阅读浏览ReadHub，其每天都推送互联网行业里发生的事情，以供读者了解互联网和科技在未来的走向，以及所处的变化，此处爬取readhub精选的科技资讯以供人民阅览一刻：一刻功能功能模块，作为用户休闲放松浏览的模块，此处的子功能如下：赏图模块，赏图模块主要抓取是必应一天推送的七张精致美图，并且配上优雅的文字解说，令用户欣赏美图美景的同时，能理解其表达的内容，景色的讲解一言模块，主要为用户提供一句话服务，不论在哪里,总有那么几个句子能穿透你的心。把这些句子汇聚起来,传递更多的感动。此模块就是为用户所提供这样的服务收藏模块：主要是查看用户收藏的资讯。2.5UML系统建模2.5.1用例图用例模型的基本组成部分有用例、角色（或参与者）和系统。Flutter媒体资讯App用例图所示。图2.2Flutter媒体资讯App用例图2.5.2用例图规约表表2-1查看今日要闻用例规约表用例编号2-1用例名称查看今日要闻功能描述给用户提供当日热点资讯，时事要闻，以供浏览执行者用户前置条件网络正常，且接口获取数据正常后置条件热点新闻列表正常展示用户看到新闻资讯信息涉众利益无基本路径用户进入AppApp发送网络请求，根据热点新闻API获取数据获取成功加载热点新闻列表点击选择感兴趣的资讯浏览获取失败下拉刷新，重新获取资讯重新加载新闻列表点击选择感兴趣的资讯浏览浏览新闻详情扩展无字段列表热点新闻：标题，描述，新闻图片业务规则无备注无表2-2查看精选聚合用例规约表用例编号2-2用例名称查看精选聚合功能描述精选聚合功能模块，提供更深度，更科学的文章资讯给用户浏览，此部分三个子功能模块，分别是：知乎日报果壳趣事Readhub执行者用户前置条件网络正常获取数据API接口正常后置条件正常展示三个子功能模块信息涉众利益无基本路径用户进入App点击精选聚合模块点击相应子功能模块查看知乎日报4.1详看2-3查看知乎日报用例规约表查看果壳科技5.1详看2-4查看果壳科技用例规约表查看Readhub资讯6.1详看2-5查看ReadHub资讯用例规约表扩展无字段列表详见子功能模块用例规约表业务规则无备注无表2-3查看知乎日报用例规约表用例编号2-3用例名称查看知乎日报功能描述提供知乎日报每天的文章推送，供用户浏览执行者用户前置条件网络正常知乎日报每日文章API正常后置条件正常加载知乎日报每日文章涉众利益无基本路径用户进入App点击精选模块选择知乎日报模块网络发送请求，根据知乎日报API获取数据获取成功5.1加载知乎日报文章列表5.2点击选择感兴趣的日报文章浏览获取失败6.1下拉刷新，重新获取资讯6.2重新加载知乎日报文章列表6.3点击选择感兴趣的日报文章浏览扩展无字段列表知乎新闻：高清图片，小图片，文章，文章URL，文章ID，文章阅读时间业务规则无备注无表2-4查看果壳科技用例规约表用例编号2-4用例名称查看果壳科技功能描述爬取果壳科技网，几个人气的公众号的文章，提供给用户阅读浏览，其文章内容包含来自生活的的许多个方面，极具实用性执行者用户前置条件网络正常果壳公众号API正常后置条件正常接收数据展示用户可以正常浏览涉众利益无基本路径1.用户进入App2.点击精选模块3.选择果壳科技模块4.网络发送请求，根据果壳科技API获取数据5.获取成功5.1加载果壳科技公众号文章列表5.2点击选择感兴趣的文章浏览6.获取失败6.1下拉刷新，重新获取资讯6.2重新加载果壳科技公众号文章列表6.3点击选择感兴趣的文章浏览扩展无字段列表公众号标题2.推送的标题3.推送的图片业务规则无备注无表2-5查看ReadHub资讯用例规约表用例编号2-5用例名称查看ReadHub资讯功能描述提供用户浏览Readhub上的科技资讯，了解每天一天发生的互联网资讯执行者用户前置条件网络正常Readhubapi可用后置条件正常接收readhub资讯并展示用户正常浏览到结果涉众利益基本路径1.用户进入App2.点击精选模块3.选择Readhub模块4.网络发送请求，根据ReadhubAPI获取数据5.获取成功5.1加载Readhub资讯列表5.2点击选择感兴趣的资讯浏览6.获取失败6.1下拉刷新，重新获取获取数据6.2加载Readhub资讯列表6.3点击选择感兴趣的资讯浏览扩展无字段列表资讯ID，资讯标题，资讯简述业务规则无备注无表2-6查看一刻用例规约表用例编号2-6用例名称查看一刻功能描述一刻功能模块，是提供用户休闲放松时，所观赏的功能模块，其分两个子功能模块，分别是必应的赏图，一言执行者用户前置条件网络正常必应赏图和一言API接口没有问题后置条件正常展示子功能模块涉众利益无基本路径用户进入App点击查看一刻模块选择查看必应赏图3.1详见必应赏图用例选择查看一言4.1详见查看一言用例扩展无字段列表详见子功能模块业务规则无备注表2-7必应赏图用例规约表用例编号2-7用例名称必应赏图功能描述提供用户观赏必应官网每天会更新的高质量的图片。执行者用户前置条件必应推图API接口正常用户手机网路正常后置条件App顺利根据接口拿到数据用户正常浏览涉众利益无基本路径用户进入App选择点击查看一刻模块选择必应赏图模块点击图片观赏扩展无字段列表图片链接，文字描述业务规则无备注无表2-8查看一言用例规约表用例编号2-8用例名称查看一言功能描述查看一言，旨在随机提供那先美好的句子或者文章散句供用户去思考执行者用户前置条件一言API正常手机网络正常后置条件App接受并展示数据涉众利益无基本路径1.用户进入App2.选择点击查看一刻模块3.选择一言模块4.浏览一言扩展无字段列表句子2.配图业务规则无备注无表2-9查看收藏用例规约表用例编号2-8用例名称查看收藏功能描述提供用户在浏览资讯过程中收藏的资讯执行者用户前置条件一言API正常手机网络正常后置条件App接受并展示数据涉众利益无基本路径用户进入App拉开侧栏，点击选择收藏选项浏览收藏信息扩展无字段列表无业务规则无备注无2.6本章小结本章首先通过功能模块图展示了的功能需求，接下来对App各方面的可行性进行了分析；最后，为了更加直截了当向用户展示App的功能，Flutter媒体资讯App给出了用例图并对各个用例用表格进行简单明了的说明。

第3章系统设计3.1App功能设计查看今日要闻：在进入App后，主界面直接显示的模块，以列表展示当日当时的时事热闻，上拉刷新可以重新加载数据，每天用户浏览到表尾的时候，会自动请求网络，将下一页的资讯列表加载进去，今日要闻的资讯采用的是FutureBuilder来初始化，采用异步构建的好处，能够安全的加载到的数据，以免加载空数据的异常，上拉刷新使用动画刷新库LiquidPullToRefresh，如其标题所言“Abeautifulandcustomrefreshindicator”,这个加载库，能够在加载数据时，给与用户非常舒服的过度体验

查看精选聚合：用户进入App，可于底部导航栏，点击精选聚合标签，进入精选聚合资讯模块，此功能模块，顶部Appbar，设计三个扁平的标签按钮，开区三个子功能模块，分别是：知乎日报，日报每天推送的数量有限，不似新闻资讯模块接受的数据这么多，因而在UI上可以设计的精致一些，通篇日报展示，采用的卡片拟物风格的进行设计，使之更具美观果壳科技，果壳科技相较于其他资讯模块，接受的数据容量较中等，整体UI设计偏向于一种杂志号的设计，果壳推送者名作标题，下方以文章横幅流的形式展示Readhub资讯，Readhub上的科技资讯居多，采取类似与今日要闻的形式展示，不过较之不同，新闻文章条，增加一些简短的描述，以便用户快速的了解信息，迅速过滤筛选查看一刻功能模块：此功能模块，供用户休闲放松时观赏的内容，主体采用的Tabview的形式，展示信息，目前确定的子功能模块有两个，其他以后可以进行版本迭代扩展，子功能有必应赏图，根据必应每天推送的图片，其接口推送的图片只有七张，且都为高质量的图片，搭配文字解说，UI采用卡片堆叠的形式，采用手势监测，用户只需滑动手指，就可以看下下一张图片，整体阅览采用过度推叠，上升浮现，过度体验相当舒服一言，一言即跟一言API接口的随机美文妙句或者令人思考的句子，以供用户品味，整体背景颜色或采用贝塞尔曲线的水浪浮动效果，以作一个观赏舒服句子页收藏模块，用于显示存储用户浏览资讯收藏到的资讯整体UI将于今日要闻相似，不过多了分类的标识，以表名资讯的来源方3.1.1类的关系图图3.1类的关系图3.2App顺序图查看今日要闻顺序图eq\o\ac(○,1)用户进入Appeq\o\ac(○,2)查看今日要闻eq\o\ac(○,3)根据今日要闻API,请求数据eq\o\ac(○,4)接受返回的今日要闻资讯数据eq\o\ac(○,5)初始化今日要闻界面eq\o\ac(○,6)展示给用户图3.2查看今日要闻顺序图查看知乎日报顺序图eq\o\ac(○,1)用户进入App；eq\o\ac(○,2)查看精选聚合页面eq\o\ac(○,3)查看知乎日报页面eq\o\ac(○,4)根据知乎日报API请求数据eq\o\ac(○,5)接受处理返回的知乎日报主题文章数据eq\o\ac(○,6)初始化知乎日报页面eq\o\ac(○,7)展示给用户图3.3查看知乎日报顺序图查看果壳科技顺序图eq\o\ac(○,1)用户进入App；eq\o\ac(○,2)查看精选聚合页面eq\o\ac(○,3)查看果壳趣事页面eq\o\ac(○,4)根据果壳趣事API,请求数据eq\o\ac(○,5)接受处理返回的果壳趣事文章数据eq\o\ac(○,6)初始化果壳趣事页面eq\o\ac(○,7)展示给用户图3.4查看果壳趣事顺序图查看Readhub资讯图eq\o\ac(○,1)用户进入App；eq\o\ac(○,2)查看精选聚合页面eq\o\ac(○,3)查看ReadHub页面eq\o\ac(○,4)App根据ReadHubAPI,请求数据eq\o\ac(○,5)接受处理返回的ReadHub资讯数据eq\o\ac(○,6)初始化ReadHub页面eq\o\ac(○,7)展示给用户图3.5查看Readhub图查看必应美图顺序图eq\o\ac(○,1)进入App；eq\o\ac(○,2)查看一刻页面eq\o\ac(○,3)查看必应美图页面eq\o\ac(○,4)根据必应图片API,请求数据eq\o\ac(○,5)接受处理返回必应美图图片数据eq\o\ac(○,6)初始化必应美图页面eq\o\ac(○,7)展示给用户图3.6查看必应美图顺序图查看一言顺序图eq\o\ac(○,1)用户进入App；eq\o\ac(○,2)查看一刻页面eq\o\ac(○,3)查看一言页面eq\o\ac(○,4)根据一言API,请求数据eq\o\ac(○,5)接受处理返回的一言数据eq\o\ac(○,6)初始化一言页面eq\o\ac(○,7)展示给用户图3.7查看一言顺序图查看收藏图eq\o\ac(○,1)用户进入App；eq\o\ac(○,2)查看抽屉页eq\o\ac(○,3)查看收藏eq\o\ac(○,4)展示给用户。图3.8查看收藏顺序图3.3App活动图用户进入App后，选择点击在底部的导航栏的三个tab，访问用户想访问的功能的模块，要闻tab访问也即是用户进入App即可看到的今日要闻页。聚合tab访问的是精选聚合模块，其有三个子活动模块，分别是知乎日报，果壳科技，readhub资讯，一刻tab可供范问，休闲的文字图片区域，其有两个子功能模块，分别是必应赏图和一刻。图3.9App用户活动图3.4DAO类设计APP在网络请求的时候，处理服务器发送过来得数据时，必须有能够与之可以能够相转换得数据类型，把服务器得返回得数据交换格式，如XML和JSON，然后将其映射至我们对应得处理数据擦操作的Dao类，以下在处理获取网络数据时所设计使用得Dao类，因为在App爬取得资讯来自各个不同得网站，因此设计不同得Dao类今日要闻API请求返回如下，映射至3-1ResultDataNew类属性：ResultDataNew类用来装载请求网易热门新闻API返回的json的数据的转换，code指示HTTP的状态码，其中200表示服务器已成功的处理了请求，相对的500表示网络错误，message是对当前网络状态的描述，result里包含着返回的信息内容，也是客户端展示的数据源。表3-1ResultDataNew类属性属性名数据类型是否为空描述codeintNotnull网络状态messageStringNotnull网络描述resultList<News>Notnull新闻集合New类作为页面新闻数据的容器，今日要闻的每一个子新闻的数据的容器，path表示新闻详情内容的url，image指代新闻的展示图片的链接地址，title表示新闻的标题，passtime指新闻在网站发布的时间。表3-2News类属性属性名数据类型是否为空描述pathStringNotnull新闻详情地址imageStringNotnull新闻图片titleStringNotnull新闻标题passtimeStringNotnull新闻发布时间知乎日报API请求返回如下，映射至3-3ResultZhihu类属性：ResultZhihu是作为请求知乎今日日报API返回的json数据的容器，Date是服务器处理请求返回的日期，知乎日报的当日包的内容发布的日期，也是请求知乎日报每日内容的一个参数，根据日期请求每日日报的主题文章，stories表明当日文章的内容的集合。表3-3ResultZhihu类属性属性名数据类型是否为空描述dateintNotnull今日日期storiesList<ZhihuDay>Notnull日报主题集合ZhihuDay在这里我是作为表示知乎日报里的每一个文章主题的内容，image_hue表示的是其文章的高清图片，其中返回还有的标清和超清图片，但这边是移动端，考虑了一下用户的体验，折中的攫取了image_hue,title指代文章标题，url是文章内容详情的链接，hint本应指代标签或是提示，但返回的数据中，多为null，故没有选择作为页面展示上的内容，ga_prefix同样在返回的数据大多为null，意义指代不明，images是一个图片的集合，指内容的图片集，type指文章的内容类别，id指当前文章信息在数据库的id表3-4ZhihuDay类属性属性名数据类型是否为空描述image_hueStringNotnull高清图片IDtitleStringNotnull主题标题urlStringNotnull主题详情UrlhintStringNotnull阅读提示ga_prefixStringNotnull未知imagesStringNotnull主题图片typeIntNotnull主题类型idIntNotnull主题Id知乎日报详情API请求返回如下(攫取部分)，映射至3-5ZhihuDayDetail类属性：ZhihuDayDetail类是装载知乎日报文章详情的数据类，body表示其知乎日报文章的格式内容，这里的文本是Html格式，image_hue同上表示高清图片，image_source表明图片的来源，title为标题，image这里是标题头的主要的展示图片，share_url指分享给别人访问此文章的url，js表示关联到的网页所用到的js的脚本表3-5ZhihuDayDetail类属性属性名数据类型是否为空描述bodyStringNotnull主题html内容image_hueStringNotnull高清图片idimage_sourceStringNotnull图片来源titleStringNotnull主题标题imageStringNotnull主题图片share_urlStringNotnull链接分享jsStringNotnulljs脚本ga_prefixStringNotnull未知imagesString[]Notnull图片集合typeStringNotnull主题类型idintNotnull主题idcssString[]Notnullcss样式链接果壳科技API请求返回如下(攫取部分)，映射至3-6GuokeResult类属性：GuokeResult是作为请求果壳科技热门信息API返回数据的容器，now表示请求接口的时间，ok表示请求的网络状态，true表示成功，limit表示请求接口返回数据的文章数据数量的限制，默认返回20条，可以通过接口参数limit进行调整，result这里就是返回的文章的内容信息的集合了表3-6GuokeResult类属性属性名数据类型是否为空描述nowStringNotnull当前时间okBoolNotnull请求状态limitIntNotnull请求数量resultList<GuokeDay>Notnull返回文章集合GuokeDay类是果壳文章详情的数据载体，image是文章的主题图片，is_replayable表示文章是否已被用户，本app爬取果壳文章数据，不涉及其用户信息的处理，故这里用不到，preface是文章的前言描述，id_editor_recommmend表示当前文章是否被编辑推荐，id为当前文章表示，copyright指文章内容产出方，image_description表示图片的表达内容，small_image指缩略图，summary指文章内容表达的总结，一般返回null，通常用不到，date_create指文章创建日期，resource指当前文章的网络访问链接，subject指文章所有的标签表3-7GuokeDay类属性属性名数据类型是否为空描述imageStringNotnull图片is_replyableBoolNotnull是否已阅读prefaceStringNotnull前言is_editor_recommendBoolNotnull是否被推荐idIntNotnull文章idcopyrightStringNotnull版权方image_descriptionStringNotnull图片描述titleStringNotnull文章标题small_imageStringNotnull文章图片summaryStringNotnull总结date_createdStringNotnull创建日期resource_urlStringNotnull资源urlsubject_keyStringNotnull关键词ReadhubAPI请求返回如下(攫取部分)，映射至3-8ReadhubDay类属性：Readhub资讯API请求返会的数据相当简单粗暴，没有任何多余的内容直接就是返回前20条数据内容，以ReadhubDay类的集合作为载体，Readhubday类作为每一条资讯的内容的载体，id表示资讯标识，newArray表示同类新闻的集合，createAt表示创建日期，publishDate表示发布日期，summary表示咨询的简单总结，readhub上的资讯的内容文字不多，多做总结表示，tilte指代资讯标题，updateAt指代资讯更新日期，timeline时间轴App端这边用不到，order指代序号表3-8ReadhubDay类属性列名数据类型是否为空描述idStringNotnull资讯idnewsArrayList<NewsArray>Notnull相关新闻createdAtStringNotnull创建日期publishDateStringNotnull发布日期summaryStringNotnull资讯总结titleStringNotnull资讯标题updatedAtStringNotnull更新日期timelineStringNotnull时间轴orderStringNotnull序号NewArray是表示与当前ReadhubDay类所表示的内容资讯的互有同样表达的内容资讯的新闻Url的结合，id指代当前资讯标识，url表示pc端浏览器所访问的链接，moblieUrl表示移动端浏览器可以访问的url链接，language表命当前资讯语言，一般返回zh-cn表3-9NewsArray类属性列名数据类型是否为空描述idIntNotnull资讯idurlStringNotnullWeb端urlmobileUrlStringNotnull移动端urlpublishDateStringNotnull发布日期languageStringNotnull资讯语言titleStringNotnull资讯标题必应赏图API请求返回如下(攫取部分)，映射至3-10ResultBingPhotoData类属性：ResultBingPhotoData装在请求bing图片的返回的数据类，必应图片API最多返回七张图片集，images是返回的图片集的内容，tooltips是说明表3-10ResultBingPhotoData类属性列名数据类型是否为空描述imagesList<Image>Notnull图片集tooltipsStringNotnull提示Image类是必应里一张图片的数据载体，startdate表明其发布时间，由于必应的图片都是有时效期的，所以对应的也有enddate表明结束日期，url表明其图片的高分辨版本的链接，通常为1080p左右，urlbase表明其图片请求链接，因为必应图片的每一张的图片的分辨率都覆盖很广，所以可以通过此链接加载各种分辨率样式，copyright表明其版权方，copyright访问版权方的链接，title图片的标题描述，hsh表明图片的哈希值，quiz返回为null，意义不明表3-11Image类属性列名数据类型是否为空描述startdateList<Image>Notnull发布日期fullstartdateStringNotnull完整发布日期enddateStringNotnull结束日期urlStringNotnull图片高分辨率链接urlbaseStringNotnull图片资源位置基础链接copyrightStringNotnull版权方copyrightlinkStringNotnull版权方链接titleStringNotnull图片标题hshString哈希值quizString查询一言API请求返回如下(攫取部分)，映射至3-12OneSay类属性：一言API请求的返回的数据较为简单，没有上面的资讯请求的内容如此之多，OneSay作为其返回数据转换的载体，id指代当前一言的表示，hitokoto表示一言的额外描述，多数情况返回为空，type指当前一言所涉及的类型，来源哪里，类似的有动漫，还是游戏，又或者是书籍等等，from表明其来源，from_who表明其来源作者，creator表示当前一言的创建者，uuid表明当前一言的通用唯一识别码表3-12OneSay类属性列名数据类型是否为空描述idintNotnull一言idhitokotoStringNotnull一言描述typeintNotnull类型fromvarcharNotnull来源from_whoStringnull来源作者creatorStringNotnull创作者uuidStringNotnull唯一标识3.5网络接口设计网络编程的核心是IP、端口和协议3个元素，本质是进程间通信，主要的难点是定位主机和数据传输。在网络框架中，有Flutter官方提供的，但HttpClient[10]本身功能较弱，很多常用功能都不支持。所以网络请求使用的是时下流行的dio库来发起网络请求，它是一个强大易用的darthttp请求库，支持RestfulAPI、FormData、拦截器、请求取消、Cookie管理、文件上传/下载等等。3.6本章小结本章首先对App功能进行了详细设计，然后画出了App开发所涉及的类图、顺序图、和部分的活动图，更加直观地展示了App的各个功能功能；接下来是对Dao类的设计，以及网络接口进行设计。

第4章App实现4.1界面实现用户进入媒体资讯App后，即可看到今日要闻模块如图4.1所示，以圆角形卡片列表展示，其新闻详情就如图4.2所示图4.1首页-今日要闻模块图4.2首页-今日要闻详情点击底部导航栏中间的Tab，即可进入精选聚合模块，各模块皆遵循MaterialDesign进行设计，质感，阴影，皆根据阅览舒适度设计，共三个子功能模块，根据顶部按钮切换。知乎日报模块界面就如图4.3所示，果壳趣事模块界面就如图4.4所示，其知乎日报文章如图4.5所示，果壳趣事文章如图4.6所示，Readhub模块界面就如4.7所示，Readhub资讯详情就如图4.8所示， 图4.3精选聚合模块-知乎日报 图4.4精选聚合模块-果壳趣事图4.5精选聚合模块-知乎日报详情图4.6精选聚合模块-果壳文章详情图4.7精选聚合模块-ReadHub图4.8精选聚合模块-ReadHub资讯详情3.用户点击底部导航栏的第三个tab即可进入一块模块，其目前只包括两个子功能，分别是必应赏图和一言，根据顶部tab进行切换。如图4.9所示，以扑克牌的形式加载图片，用户通过手势进行图片操作，而一言界面就如图4.10所以，背景图是根据贝塞尔曲线绘制破浪浮动，一言文字就如故事般横幅展示，每次切换，其一言也会不断变化图4.9必应赏图图4.10一言4.2本章小结本章主要是对App的UI设计进行实现，给出各个功能APP界面的截图以展现App实现的效果。

第5章系统测试5.1系统测试的目的系统测试是每个软件开发周期中一个必不可少的的环节，软件的bug可能存在于系统、功能、过程、数据和编码中，我们需要在这些方面上进行测试以找到软件的Bug并修复。在系统设计和实现过程中检查出来的错误和缺陷需要在软件运行当中通过系统测试来实现，所以这个阶段是软件开发中必不可少的部分。5.2系统测试的意义在软件泛滥的信息时代，软件的质量参差不齐，因此，为了杜绝低质量的软件的蔓延，系统测试是一个不可或缺的阶段。经过一系列的严格测试，可以找出系统中难以发现的漏洞，有利于提高一个软件质量，使用户的体验更加完善。5.3测试用例及结果表5-1媒体资讯App接口测试及结果用例编号用例名称测试目的测试结果U-1TestHotNews测试今日要闻API是否可用，能否正确初始化今日要闻界面，新闻Widget是否正确处理数据成功接受到新闻资讯JSON，界面初始化成功，新闻数据成功加载显示，页面动画异步构建正常U-2TestHotNewsRefresh测试在下拉刷新的时候，网络请求是否正确发送，数据能否接受并处理，过度的动画是否异常下拉刷新控件正常调用，动画过渡流畅显示，数据重新加载显示成功，新闻刷新成功U-3TestZhihuDay测试知乎日报API是否可用，能否正确初始化知乎日报界面，文章Widget是否正确处理数据成功接受到知乎日报主题文章JSON，界面初始化成功，知乎日报成功加载显示，页面动画过渡流畅U-4TestGuokeDay测试果壳API是否可用，能否正确初始化果壳趣事界面，文章Widget是否正确处理数据成功接受到果壳科技主题文章JSON，界面初始化成功，果壳文章列表成功加载显示，页面动画过渡流畅U-5TestReadhub测试ReadHubAPI是否可用，能否正确初始化Readhub资讯界面，Readhub资讯Widget是否正确处理数据成功接受到Read科技资讯JSON，界面初始化成功，Readhub列表加载成功U-6TestBingPhoto测试必应赏图API是否可用，图片加载页能否成功显示高清图片，加载高清图片是否会导致OOM成功接收到必应图片JSON，图片加载略显缓慢，但在意料之中，AP