計(jì)算機(jī)科學(xué)與技術(shù)-基于谷歌Flutter的媒體資訊APP的設(shè)計(jì)與實(shí)現(xiàn)

基于谷歌Flutter框架媒體資訊App的設(shè)計(jì)與實(shí)現(xiàn)摘要：當(dāng)今社會(huì)，隨著經(jīng)濟(jì)和科技的發(fā)展，人們的生活節(jié)奏也愈來愈快，人們生活的閱讀時(shí)間也越來越少，越發(fā)的流行碎片化閱讀，而同樣的對于互聯(lián)網(wǎng)的客戶端開發(fā)者，需求的版本迭代也愈發(fā)頻繁，同一個(gè)移動(dòng)端的App，起碼要發(fā)行兩個(gè)平臺(tái)，同樣也因?yàn)檫@不同的平臺(tái)，不同的系統(tǒng)，導(dǎo)致在尋多的業(yè)務(wù)場景中，傳統(tǒng)的原生開發(fā)效率已經(jīng)滿足不了日益增長的業(yè)務(wù)需求，如Androi端和IOS端，一旦需求上的變更，兩個(gè)平臺(tái)上都要進(jìn)行更新，重新發(fā)布版本，這對于一個(gè)公司兩個(gè)終端的開發(fā)成本都需增加許多的，這其中主要表現(xiàn)為：(1).動(dòng)態(tài)化內(nèi)容需求增大：當(dāng)需求發(fā)生變化，傳統(tǒng)原生應(yīng)用需要進(jìn)行版本迭代來更新內(nèi)容，但應(yīng)用上架審核都是要周期的。(2).業(yè)務(wù)需求變化快，開發(fā)成本高：由于原生開發(fā)一般都要維護(hù)Android、iOS兩個(gè)開發(fā)團(tuán)隊(duì)，版本迭代時(shí)，無論人力成本，還是測試成本都會(huì)變大。這樣的情況下，開發(fā)者們開發(fā)App的成本不斷上升，上架流程以及版本迭代流程的繁瑣，對此很多IT巨頭都推出了很多跨平臺(tái)的框架，如Facebook的ReactNative,阿里的WEEX，但都因?yàn)榇嬖谛阅苌系娜毕莺碗y以實(shí)現(xiàn)復(fù)雜的操著，從而導(dǎo)致普及率遠(yuǎn)沒有原生開發(fā)的普及高，而Google于2015年推出的Flutter跨平臺(tái)的框架，如今經(jīng)歷了5年多的發(fā)展，F(xiàn)lutter自身的許多的問題也不斷在修復(fù)中，到現(xiàn)在可謂頗為成熟了，因此以此作為跨平臺(tái)技術(shù)的首選框架，開發(fā)此類跨平臺(tái)資訊應(yīng)用，研究和學(xué)習(xí)Flutter之時(shí)，也為Flutter的軟件生態(tài)作出一點(diǎn)添磚加瓦，也為廣大的IT網(wǎng)民提供一款不受平臺(tái)系統(tǒng)限制的資訊應(yīng)用。Flutter媒體資訊App將實(shí)現(xiàn)一個(gè)跨平臺(tái)的媒體資訊閱讀軟件，是廣大的互聯(lián)用戶不拘束于平臺(tái)的限制，能夠隨時(shí)隨地利用碎片化的時(shí)間，來瀏覽閱讀資訊，同時(shí)作為一個(gè)Flutter開發(fā)者可以參與學(xué)習(xí)的開源項(xiàng)目關(guān)鍵詞：跨平臺(tái)，資訊閱讀

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的開發(fā)背景及意義當(dāng)今社會(huì)迅猛發(fā)展，信息的流動(dòng)也越發(fā)頻繁，人們獲取信息的渠道也變多種多樣，物聯(lián)網(wǎng)時(shí)代的興起，移動(dòng)互聯(lián)網(wǎng)的如日中天，不同平臺(tái)，不同系統(tǒng)下的App也層出不窮，同樣也因?yàn)檫@不同的平臺(tái)，不同的系統(tǒng)，導(dǎo)致在尋多的業(yè)務(wù)場景中，傳統(tǒng)的原生開發(fā)效率已經(jīng)滿足不了日益增長的業(yè)務(wù)需求。在這種碎片化閱讀流行的時(shí)代，通過跨平臺(tái)框架開發(fā)一款跨平臺(tái)的媒體資訊閱讀的應(yīng)用，為人們帶來更加富有內(nèi)涵，更深層次的碎片化閱讀。此App的開發(fā)意義旨在在研究和開發(fā)基于的Flutter[1]的媒體資訊應(yīng)用，以及Flutter開發(fā)在廣大移動(dòng)端的應(yīng)用，對原生開發(fā)的影響以及適用性。為什么我們要選擇跨平臺(tái)？如今的移動(dòng)端已經(jīng)發(fā)展非常的迅猛，同樣的，也誕生了許多的移動(dòng)端的應(yīng)用開發(fā)者，IOS和Android占據(jù)了整個(gè)移動(dòng)市場的主流，兩個(gè)平臺(tái)系統(tǒng)的差異性，導(dǎo)致一個(gè)應(yīng)用的開發(fā)需要用不同的編程語言，不同的編程生態(tài)，這對開發(fā)者乃至于企業(yè)公司來講，都需要花費(fèi)更多的成本，對此有沒有存在更好的選擇呢？答案是存在的，那就是基于跨平臺(tái)技術(shù)框架的開發(fā)，何為跨平臺(tái)？是軟件開發(fā)中一個(gè)重要的概念，即不依賴于操作系統(tǒng)，也不信賴硬件環(huán)境。一個(gè)操作系統(tǒng)下開發(fā)的應(yīng)用，放到另一個(gè)操作系統(tǒng)下依然可以運(yùn)行。Flutter是什么？Flutter是一款移動(dòng)應(yīng)用程序SDK[2]，一份代碼可以同時(shí)生成iOS和Android兩個(gè)高性能、高保真的應(yīng)用程序。Flutter目標(biāo)是使開發(fā)人員能夠交付在不同平臺(tái)上都感覺自然流暢的高性能應(yīng)用程序。我們兼容滾動(dòng)行為、排版、圖標(biāo)等方面的差異。為什么要使用Flutter?提高開發(fā)效率同一份代碼開發(fā)iOS和Android用更少的代碼做更多的事情輕松迭代在應(yīng)用程序運(yùn)行時(shí)更改代碼并重新加載（通過熱重載）修復(fù)崩潰并繼續(xù)從應(yīng)用程序停止的地方進(jìn)行調(diào)試創(chuàng)建美觀，高度定制的用戶體驗(yàn)受益于使用Flutter框架提供的豐富的MaterialDesig[3]和Cupertino[]（iOS風(fēng)格）的widget實(shí)現(xiàn)定制、美觀、品牌驅(qū)動(dòng)的設(shè)計(jì)，而不受原生控件的限制基于跨平臺(tái)Flutter框架開發(fā)的媒體資訊應(yīng)用有如下意義：研究和進(jìn)一步推廣Flutter應(yīng)用的開發(fā)給廣大網(wǎng)民提供一個(gè)不受系統(tǒng)差異影響的媒體資訊應(yīng)用為如今正稀缺的Flutter應(yīng)用生態(tài)做出貢獻(xiàn)。1.2國內(nèi)外研究現(xiàn)狀目前Flutter作為一種新興的跨平臺(tái)的技術(shù)框架，與老一輩的跨平臺(tái)技術(shù)框架相比，其通過在不同平臺(tái)實(shí)現(xiàn)一個(gè)統(tǒng)一接口的渲染引擎來繪制UI，而不依賴系統(tǒng)原生控件，就使得它可以做到不同平臺(tái)UI的一致性，能夠?qū)崿F(xiàn)其他跨平臺(tái)技術(shù)框架做不到的復(fù)雜的動(dòng)畫交互效果，或者復(fù)雜的前端交互。在StackOverflow2019年的全球開發(fā)者問卷調(diào)查中，F(xiàn)lutter被選為最受開發(fā)者歡迎的框架之一，超過了TensorFlow和Node.js。圖1.1StackOverflow2019最受歡迎框架其在Github上的熱度，star數(shù)達(dá)更是可見開發(fā)者對其前景的一片看好圖1.2flutterGIthub熱度而在Flutter中午官網(wǎng)上線后，F(xiàn)lutter中文網(wǎng)也很快被傳播開，百度搜索排名迅速躥升到前三，截止目前，F(xiàn)lutter中文官網(wǎng)[4]日PV在7萬左右，每日獨(dú)立訪問人數(shù)近一萬多。在中國，F(xiàn)lutter的開發(fā)者社區(qū)非常活躍。社區(qū)貢獻(xiàn)了大量高質(zhì)量的技術(shù)文章，F(xiàn)lutter官方文檔的翻譯，還組織了許多線上線下的活動(dòng)。在今年I/O前舉辦的全球FlutterCreate大賽中，來自中國廣東的胡澤標(biāo)憑借一個(gè)特別精致的羅盤應(yīng)用摘得了全球大獎(jiǎng)。1.3系統(tǒng)的主要研究內(nèi)容基于Flutter開發(fā)的媒體資訊App主要研究是開發(fā)跨平臺(tái)的媒體資訊閱讀應(yīng)用，使人們不拘束任何平臺(tái)系統(tǒng)的限制，隨時(shí)隨地用何種系統(tǒng)設(shè)備都能夠用此應(yīng)用來閱讀媒體資訊將會(huì)降低和利潤將會(huì)提高。用戶交互界面、網(wǎng)絡(luò)數(shù)據(jù)處理以及本地?cái)?shù)據(jù)存儲(chǔ)是一個(gè)完整的App的基本組成部分，所以Flutter媒體資訊App的主要研究內(nèi)容可以分為以下幾步：首先用戶交互界面應(yīng)該如何設(shè)計(jì)好，如何讓用戶有一個(gè)UI體驗(yàn)，一個(gè)APP必須要有良好的用戶交互界面，就必須遵從一定的設(shè)計(jì)，因此本App采用的是MaterialDesign，而在用戶交互界面設(shè)計(jì)上，緊接著的是媒體資訊閱讀源的爬取，這里決定的數(shù)據(jù)采集源有：網(wǎng)易的熱點(diǎn)新聞，知乎日報(bào)每天的推送，以及果殼科技的文章，以及可供考慮的ReadHub，接著的本地?cái)?shù)據(jù)的存儲(chǔ)，可以用數(shù)據(jù)庫或者第三庫的SharedPreference[5]。1.4系統(tǒng)開發(fā)環(huán)境與開發(fā)工具8GB的win10x64操作系統(tǒng)。AndroidStudio被作為系統(tǒng)Android客戶端的開發(fā)工具，F(xiàn)lutterSDK的版本是1.15.3,dev,同時(shí)通過HttpCannary，F(xiàn)iddler來抓取網(wǎng)絡(luò)數(shù)據(jù)，App采用的第三庫有以下這些：閑魚的fishrudex[6]RxdartJson序列化json_annotation事件總線event_bus網(wǎng)絡(luò)請求的Dio圖片緩存的Cached_network_imageliquid_pull_to_refreshgoogle_nav_bar

第2章系統(tǒng)需求分析2.1可行性分析2.1.1經(jīng)濟(jì)可行性基于Flutter媒體資訊App的設(shè)計(jì)與實(shí)現(xiàn)是本人的畢業(yè)設(shè)計(jì)，從整個(gè)App的設(shè)計(jì)到開發(fā)都由本人自己完成，在開發(fā)過程設(shè)計(jì)的爬取的數(shù)據(jù)都是來自于第三方，還有一些第三方的接口，是只能每天請求固定數(shù)次的，如聚合數(shù)據(jù)和極速數(shù)據(jù)等提供的API，超過固定的請求就要進(jìn)行收費(fèi)，但幸好的是本App暫時(shí)只作為畢業(yè)設(shè)計(jì)的演示項(xiàng)目，并不打算商用，且后續(xù)打算進(jìn)行開源，因而經(jīng)濟(jì)上暫時(shí)還沒有太大的阻力，且很多時(shí)候爬取數(shù)據(jù)的API很多也是從官方那邊爬取，沒有過多進(jìn)行付費(fèi)API的請求2.1.2技術(shù)可行性該系統(tǒng)作為本人的畢業(yè)設(shè)計(jì)，而本人已修完所有在校課程，且已經(jīng)利用業(yè)余時(shí)間不斷的學(xué)習(xí)Flutter技術(shù)框架，更有國內(nèi)開源電子書《Flutter實(shí)戰(zhàn)》[7]的指導(dǎo)，且通過GoogleFlutter開設(shè)的學(xué)習(xí)項(xiàng)目上手演練，以算是具備一定的Flutter開發(fā)基礎(chǔ)，主要編程語言為Dart[8]而對于原生平臺(tái)的語言，我本身以及有過Android開發(fā)的經(jīng)驗(yàn)，可以保證的是能夠在解決Android平臺(tái)的上的適應(yīng)性和兼容性的問題，而于IOS來說，本人并沒有IOS的開發(fā)經(jīng)驗(yàn)也沒有相應(yīng)可供調(diào)試的設(shè)備，所以IOS端的兼容性無法保證，確定兼容的有Android端，雖然說Flutter的桌面端已經(jīng)有實(shí)驗(yàn)性項(xiàng)目，但終究還是在實(shí)驗(yàn)性的階段，所以Linux，Window，Macos等桌面端有待以后在成熟時(shí)進(jìn)行兼容性適配2.1.3操作可行性本App的開發(fā)的UI是基于MaterialDesign設(shè)計(jì)。簡潔明快，擬物[9]的風(fēng)格，在基本元素的設(shè)計(jì)處理上，借鑒了傳統(tǒng)的印刷設(shè)計(jì)、字體版式、網(wǎng)格系統(tǒng)、三維空間、比例、色彩、陰影，圖像使用。在這些設(shè)計(jì)基礎(chǔ)上下功夫，從而能夠構(gòu)建出更深層次，更富有吸引力的視覺層級(jí)、視覺意義以及視覺聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構(gòu)建出鮮明、形象的用戶界面，將使得設(shè)計(jì)的GUI將會(huì)變得更加具有吸引力，以及更好的上手操作指引。整體UI設(shè)計(jì)一看就懂，不存在困惑的操作2.2APP的總體需求Flutter媒體資訊App的設(shè)計(jì)，旨在給熱點(diǎn)新聞，關(guān)注全球時(shí)事熱點(diǎn)新聞，關(guān)注國際形勢，社會(huì)當(dāng)下的熱點(diǎn)，以及提供精選的資訊的瀏覽，其中包括知乎日報(bào)，果殼科技，Readhub等深度資訊熱點(diǎn)話題平臺(tái)，這將極大的開闊的用戶的視野，極大的提升的用戶的文化知識(shí)。2.3App功能的需求分析App功能模塊圖如圖2.3。圖2.1Flutter媒體資訊App功能模塊圖2.4.1App功能分析今日要聞：爬取網(wǎng)易新聞官方的時(shí)事熱點(diǎn)，社會(huì)當(dāng)下的熱點(diǎn)資訊，國際的社會(huì)形勢，新聞跟網(wǎng)易新聞同步，每時(shí)每刻以供用戶選擇自己的感興趣的時(shí)事資訊閱讀。精選聚合：此功能模塊，爬取了國內(nèi)富有深度內(nèi)涵的媒體雜志號(hào)的文章，以供選擇性瀏覽，更具趣味內(nèi)涵的文章，此功能模塊有三個(gè)子功能模塊，分別是：知乎日報(bào)部分，正如其標(biāo)題所言，每日三次，每次七分鐘，爬取供用戶瀏覽的是，知乎日報(bào)每天推送的文章，主題日報(bào)包括動(dòng)漫、設(shè)計(jì)、大公司、游戲、財(cái)經(jīng)、電影、電子音樂、互聯(lián)網(wǎng)安全等豐富內(nèi)容，為業(yè)內(nèi)人和資深愛好者推薦各領(lǐng)域最精彩文章，滿足高質(zhì)量閱讀需求。果殼科技，果殼網(wǎng)是一個(gè)泛科技主題網(wǎng)站,提供負(fù)責(zé)任、有智趣、貼近生活的內(nèi)容,你可以在這里閱讀、分享、交流、提問。果殼網(wǎng)致力于讓科技興趣成為人們文化生活和娛樂生活的重要.部分，此處為爬取果殼網(wǎng)幾個(gè)公眾號(hào)每日推送的消息，以供用戶閱讀瀏覽ReadHub，其每天都推送互聯(lián)網(wǎng)行業(yè)里發(fā)生的事情，以供讀者了解互聯(lián)網(wǎng)和科技在未來的走向，以及所處的變化，此處爬取readhub精選的科技資訊以供人民閱覽一刻：一刻功能功能模塊，作為用戶休閑放松瀏覽的模塊，此處的子功能如下：賞圖模塊，賞圖模塊主要抓取是必應(yīng)一天推送的七張精致美圖，并且配上優(yōu)雅的文字解說，令用戶欣賞美圖美景的同時(shí)，能理解其表達(dá)的內(nèi)容，景色的講解一言模塊，主要為用戶提供一句話服務(wù)，不論在哪里,總有那么幾個(gè)句子能穿透你的心。把這些句子匯聚起來,傳遞更多的感動(dòng)。此模塊就是為用戶所提供這樣的服務(wù)收藏模塊：主要是查看用戶收藏的資訊。2.5UML系統(tǒng)建模2.5.1用例圖用例模型的基本組成部分有用例、角色（或參與者）和系統(tǒng)。Flutter媒體資訊App用例圖所示。圖2.2Flutter媒體資訊App用例圖2.5.2用例圖規(guī)約表表2-1查看今日要聞?dòng)美?guī)約表用例編號(hào)2-1用例名稱查看今日要聞功能描述給用戶提供當(dāng)日熱點(diǎn)資訊，時(shí)事要聞，以供瀏覽執(zhí)行者用戶前置條件網(wǎng)絡(luò)正常，且接口獲取數(shù)據(jù)正常后置條件熱點(diǎn)新聞列表正常展示用戶看到新聞資訊信息涉眾利益無基本路徑用戶進(jìn)入AppApp發(fā)送網(wǎng)絡(luò)請求，根據(jù)熱點(diǎn)新聞API獲取數(shù)據(jù)獲取成功加載熱點(diǎn)新聞列表點(diǎn)擊選擇感興趣的資訊瀏覽獲取失敗下拉刷新，重新獲取資訊重新加載新聞列表點(diǎn)擊選擇感興趣的資訊瀏覽瀏覽新聞詳情擴(kuò)展無字段列表熱點(diǎn)新聞：標(biāo)題，描述，新聞圖片業(yè)務(wù)規(guī)則無備注無表2-2查看精選聚合用例規(guī)約表用例編號(hào)2-2用例名稱查看精選聚合功能描述精選聚合功能模塊，提供更深度，更科學(xué)的文章資訊給用戶瀏覽，此部分三個(gè)子功能模塊，分別是：知乎日報(bào)果殼趣事Readhub執(zhí)行者用戶前置條件網(wǎng)絡(luò)正常獲取數(shù)據(jù)API接口正常后置條件正常展示三個(gè)子功能模塊信息涉眾利益無基本路徑用戶進(jìn)入App點(diǎn)擊精選聚合模塊點(diǎn)擊相應(yīng)子功能模塊查看知乎日報(bào)4.1詳看2-3查看知乎日報(bào)用例規(guī)約表查看果殼科技5.1詳看2-4查看果殼科技用例規(guī)約表查看Readhub資訊6.1詳看2-5查看ReadHub資訊用例規(guī)約表擴(kuò)展無字段列表詳見子功能模塊用例規(guī)約表業(yè)務(wù)規(guī)則無備注無表2-3查看知乎日報(bào)用例規(guī)約表用例編號(hào)2-3用例名稱查看知乎日報(bào)功能描述提供知乎日報(bào)每天的文章推送，供用戶瀏覽執(zhí)行者用戶前置條件網(wǎng)絡(luò)正常知乎日報(bào)每日文章API正常后置條件正常加載知乎日報(bào)每日文章涉眾利益無基本路徑用戶進(jìn)入App點(diǎn)擊精選模塊選擇知乎日報(bào)模塊網(wǎng)絡(luò)發(fā)送請求，根據(jù)知乎日報(bào)API獲取數(shù)據(jù)獲取成功5.1加載知乎日報(bào)文章列表5.2點(diǎn)擊選擇感興趣的日報(bào)文章瀏覽獲取失敗6.1下拉刷新，重新獲取資訊6.2重新加載知乎日報(bào)文章列表6.3點(diǎn)擊選擇感興趣的日報(bào)文章瀏覽擴(kuò)展無字段列表知乎新聞：高清圖片，小圖片，文章，文章URL，文章ID，文章閱讀時(shí)間業(yè)務(wù)規(guī)則無備注無表2-4查看果殼科技用例規(guī)約表用例編號(hào)2-4用例名稱查看果殼科技功能描述爬取果殼科技網(wǎng)，幾個(gè)人氣的公眾號(hào)的文章，提供給用戶閱讀瀏覽，其文章內(nèi)容包含來自生活的的許多個(gè)方面，極具實(shí)用性執(zhí)行者用戶前置條件網(wǎng)絡(luò)正常果殼公眾號(hào)API正常后置條件正常接收數(shù)據(jù)展示用戶可以正常瀏覽涉眾利益無基本路徑1.用戶進(jìn)入App2.點(diǎn)擊精選模塊3.選擇果殼科技模塊4.網(wǎng)絡(luò)發(fā)送請求，根據(jù)果殼科技API獲取數(shù)據(jù)5.獲取成功5.1加載果殼科技公眾號(hào)文章列表5.2點(diǎn)擊選擇感興趣的文章瀏覽6.獲取失敗6.1下拉刷新，重新獲取資訊6.2重新加載果殼科技公眾號(hào)文章列表6.3點(diǎn)擊選擇感興趣的文章瀏覽擴(kuò)展無字段列表公眾號(hào)標(biāo)題2.推送的標(biāo)題3.推送的圖片業(yè)務(wù)規(guī)則無備注無表2-5查看ReadHub資訊用例規(guī)約表用例編號(hào)2-5用例名稱查看ReadHub資訊功能描述提供用戶瀏覽Readhub上的科技資訊，了解每天一天發(fā)生的互聯(lián)網(wǎng)資訊執(zhí)行者用戶前置條件網(wǎng)絡(luò)正常Readhubapi可用后置條件正常接收readhub資訊并展示用戶正常瀏覽到結(jié)果涉眾利益基本路徑1.用戶進(jìn)入App2.點(diǎn)擊精選模塊3.選擇Readhub模塊4.網(wǎng)絡(luò)發(fā)送請求，根據(jù)ReadhubAPI獲取數(shù)據(jù)5.獲取成功5.1加載Readhub資訊列表5.2點(diǎn)擊選擇感興趣的資訊瀏覽6.獲取失敗6.1下拉刷新，重新獲取獲取數(shù)據(jù)6.2加載Readhub資訊列表6.3點(diǎn)擊選擇感興趣的資訊瀏覽擴(kuò)展無字段列表資訊ID，資訊標(biāo)題，資訊簡述業(yè)務(wù)規(guī)則無備注無表2-6查看一刻用例規(guī)約表用例編號(hào)2-6用例名稱查看一刻功能描述一刻功能模塊，是提供用戶休閑放松時(shí)，所觀賞的功能模塊，其分兩個(gè)子功能模塊，分別是必應(yīng)的賞圖，一言執(zhí)行者用戶前置條件網(wǎng)絡(luò)正常必應(yīng)賞圖和一言API接口沒有問題后置條件正常展示子功能模塊涉眾利益無基本路徑用戶進(jìn)入App點(diǎn)擊查看一刻模塊選擇查看必應(yīng)賞圖3.1詳見必應(yīng)賞圖用例選擇查看一言4.1詳見查看一言用例擴(kuò)展無字段列表詳見子功能模塊業(yè)務(wù)規(guī)則無備注表2-7必應(yīng)賞圖用例規(guī)約表用例編號(hào)2-7用例名稱必應(yīng)賞圖功能描述提供用戶觀賞必應(yīng)官網(wǎng)每天會(huì)更新的高質(zhì)量的圖片。執(zhí)行者用戶前置條件必應(yīng)推圖API接口正常用戶手機(jī)網(wǎng)路正常后置條件App順利根據(jù)接口拿到數(shù)據(jù)用戶正常瀏覽涉眾利益無基本路徑用戶進(jìn)入App選擇點(diǎn)擊查看一刻模塊選擇必應(yīng)賞圖模塊點(diǎn)擊圖片觀賞擴(kuò)展無字段列表圖片鏈接，文字描述業(yè)務(wù)規(guī)則無備注無表2-8查看一言用例規(guī)約表用例編號(hào)2-8用例名稱查看一言功能描述查看一言，旨在隨機(jī)提供那先美好的句子或者文章散句供用戶去思考執(zhí)行者用戶前置條件一言API正常手機(jī)網(wǎng)絡(luò)正常后置條件App接受并展示數(shù)據(jù)涉眾利益無基本路徑1.用戶進(jìn)入App2.選擇點(diǎn)擊查看一刻模塊3.選擇一言模塊4.瀏覽一言擴(kuò)展無字段列表句子2.配圖業(yè)務(wù)規(guī)則無備注無表2-9查看收藏用例規(guī)約表用例編號(hào)2-8用例名稱查看收藏功能描述提供用戶在瀏覽資訊過程中收藏的資訊執(zhí)行者用戶前置條件一言API正常手機(jī)網(wǎng)絡(luò)正常后置條件App接受并展示數(shù)據(jù)涉眾利益無基本路徑用戶進(jìn)入App拉開側(cè)欄，點(diǎn)擊選擇收藏選項(xiàng)瀏覽收藏信息擴(kuò)展無字段列表無業(yè)務(wù)規(guī)則無備注無2.6本章小結(jié)本章首先通過功能模塊圖展示了的功能需求，接下來對App各方面的可行性進(jìn)行了分析；最后，為了更加直截了當(dāng)向用戶展示App的功能，F(xiàn)lutter媒體資訊App給出了用例圖并對各個(gè)用例用表格進(jìn)行簡單明了的說明。

第3章系統(tǒng)設(shè)計(jì)3.1App功能設(shè)計(jì)查看今日要聞：在進(jìn)入App后，主界面直接顯示的模塊，以列表展示當(dāng)日當(dāng)時(shí)的時(shí)事熱聞，上拉刷新可以重新加載數(shù)據(jù)，每天用戶瀏覽到表尾的時(shí)候，會(huì)自動(dòng)請求網(wǎng)絡(luò)，將下一頁的資訊列表加載進(jìn)去，今日要聞的資訊采用的是FutureBuilder來初始化，采用異步構(gòu)建的好處，能夠安全的加載到的數(shù)據(jù)，以免加載空數(shù)據(jù)的異常，上拉刷新使用動(dòng)畫刷新庫LiquidPullToRefresh，如其標(biāo)題所言“Abeautifulandcustomrefreshindicator”,這個(gè)加載庫，能夠在加載數(shù)據(jù)時(shí)，給與用戶非常舒服的過度體驗(yàn)

查看精選聚合：用戶進(jìn)入App，可于底部導(dǎo)航欄，點(diǎn)擊精選聚合標(biāo)簽，進(jìn)入精選聚合資訊模塊，此功能模塊，頂部Appbar，設(shè)計(jì)三個(gè)扁平的標(biāo)簽按鈕，開區(qū)三個(gè)子功能模塊，分別是：知乎日報(bào)，日報(bào)每天推送的數(shù)量有限，不似新聞資訊模塊接受的數(shù)據(jù)這么多，因而在UI上可以設(shè)計(jì)的精致一些，通篇日報(bào)展示，采用的卡片擬物風(fēng)格的進(jìn)行設(shè)計(jì)，使之更具美觀果殼科技，果殼科技相較于其他資訊模塊，接受的數(shù)據(jù)容量較中等，整體UI設(shè)計(jì)偏向于一種雜志號(hào)的設(shè)計(jì)，果殼推送者名作標(biāo)題，下方以文章橫幅流的形式展示Readhub資訊，Readhub上的科技資訊居多，采取類似與今日要聞的形式展示，不過較之不同，新聞文章條，增加一些簡短的描述，以便用戶快速的了解信息，迅速過濾篩選查看一刻功能模塊：此功能模塊，供用戶休閑放松時(shí)觀賞的內(nèi)容，主體采用的Tabview的形式，展示信息，目前確定的子功能模塊有兩個(gè)，其他以后可以進(jìn)行版本迭代擴(kuò)展，子功能有必應(yīng)賞圖，根據(jù)必應(yīng)每天推送的圖片，其接口推送的圖片只有七張，且都為高質(zhì)量的圖片，搭配文字解說，UI采用卡片堆疊的形式，采用手勢監(jiān)測，用戶只需滑動(dòng)手指，就可以看下下一張圖片，整體閱覽采用過度推疊，上升浮現(xiàn)，過度體驗(yàn)相當(dāng)舒服一言，一言即跟一言API接口的隨機(jī)美文妙句或者令人思考的句子，以供用戶品味，整體背景顏色或采用貝塞爾曲線的水浪浮動(dòng)效果，以作一個(gè)觀賞舒服句子頁收藏模塊，用于顯示存儲(chǔ)用戶瀏覽資訊收藏到的資訊整體UI將于今日要聞相似，不過多了分類的標(biāo)識(shí)，以表名資訊的來源方3.1.1類的關(guān)系圖圖3.1類的關(guān)系圖3.2App順序圖查看今日要聞順序圖eq\o\ac(○,1)用戶進(jìn)入Appeq\o\ac(○,2)查看今日要聞eq\o\ac(○,3)根據(jù)今日要聞API,請求數(shù)據(jù)eq\o\ac(○,4)接受返回的今日要聞資訊數(shù)據(jù)eq\o\ac(○,5)初始化今日要聞界面eq\o\ac(○,6)展示給用戶圖3.2查看今日要聞順序圖查看知乎日報(bào)順序圖eq\o\ac(○,1)用戶進(jìn)入App；eq\o\ac(○,2)查看精選聚合頁面eq\o\ac(○,3)查看知乎日報(bào)頁面eq\o\ac(○,4)根據(jù)知乎日報(bào)API請求數(shù)據(jù)eq\o\ac(○,5)接受處理返回的知乎日報(bào)主題文章數(shù)據(jù)eq\o\ac(○,6)初始化知乎日報(bào)頁面eq\o\ac(○,7)展示給用戶圖3.3查看知乎日報(bào)順序圖查看果殼科技順序圖eq\o\ac(○,1)用戶進(jìn)入App；eq\o\ac(○,2)查看精選聚合頁面eq\o\ac(○,3)查看果殼趣事頁面eq\o\ac(○,4)根據(jù)果殼趣事API,請求數(shù)據(jù)eq\o\ac(○,5)接受處理返回的果殼趣事文章數(shù)據(jù)eq\o\ac(○,6)初始化果殼趣事頁面eq\o\ac(○,7)展示給用戶圖3.4查看果殼趣事順序圖查看Readhub資訊圖eq\o\ac(○,1)用戶進(jìn)入App；eq\o\ac(○,2)查看精選聚合頁面eq\o\ac(○,3)查看ReadHub頁面eq\o\ac(○,4)App根據(jù)ReadHubAPI,請求數(shù)據(jù)eq\o\ac(○,5)接受處理返回的ReadHub資訊數(shù)據(jù)eq\o\ac(○,6)初始化ReadHub頁面eq\o\ac(○,7)展示給用戶圖3.5查看Readhub圖查看必應(yīng)美圖順序圖eq\o\ac(○,1)進(jìn)入App；eq\o\ac(○,2)查看一刻頁面eq\o\ac(○,3)查看必應(yīng)美圖頁面eq\o\ac(○,4)根據(jù)必應(yīng)圖片API,請求數(shù)據(jù)eq\o\ac(○,5)接受處理返回必應(yīng)美圖圖片數(shù)據(jù)eq\o\ac(○,6)初始化必應(yīng)美圖頁面eq\o\ac(○,7)展示給用戶圖3.6查看必應(yīng)美圖順序圖查看一言順序圖eq\o\ac(○,1)用戶進(jìn)入App；eq\o\ac(○,2)查看一刻頁面eq\o\ac(○,3)查看一言頁面eq\o\ac(○,4)根據(jù)一言API,請求數(shù)據(jù)eq\o\ac(○,5)接受處理返回的一言數(shù)據(jù)eq\o\ac(○,6)初始化一言頁面eq\o\ac(○,7)展示給用戶圖3.7查看一言順序圖查看收藏圖eq\o\ac(○,1)用戶進(jìn)入App；eq\o\ac(○,2)查看抽屜頁eq\o\ac(○,3)查看收藏eq\o\ac(○,4)展示給用戶。圖3.8查看收藏順序圖3.3App活動(dòng)圖用戶進(jìn)入App后，選擇點(diǎn)擊在底部的導(dǎo)航欄的三個(gè)tab，訪問用戶想訪問的功能的模塊，要聞tab訪問也即是用戶進(jìn)入App即可看到的今日要聞頁。聚合tab訪問的是精選聚合模塊，其有三個(gè)子活動(dòng)模塊，分別是知乎日報(bào)，果殼科技，readhub資訊，一刻tab可供范問，休閑的文字圖片區(qū)域，其有兩個(gè)子功能模塊，分別是必應(yīng)賞圖和一刻。圖3.9App用戶活動(dòng)圖3.4DAO類設(shè)計(jì)APP在網(wǎng)絡(luò)請求的時(shí)候，處理服務(wù)器發(fā)送過來得數(shù)據(jù)時(shí)，必須有能夠與之可以能夠相轉(zhuǎn)換得數(shù)據(jù)類型，把服務(wù)器得返回得數(shù)據(jù)交換格式，如XML和JSON，然后將其映射至我們對應(yīng)得處理數(shù)據(jù)擦操作的Dao類，以下在處理獲取網(wǎng)絡(luò)數(shù)據(jù)時(shí)所設(shè)計(jì)使用得Dao類，因?yàn)樵贏pp爬取得資訊來自各個(gè)不同得網(wǎng)站，因此設(shè)計(jì)不同得Dao類今日要聞API請求返回如下，映射至3-1ResultDataNew類屬性：ResultDataNew類用來裝載請求網(wǎng)易熱門新聞API返回的json的數(shù)據(jù)的轉(zhuǎn)換，code指示HTTP的狀態(tài)碼，其中200表示服務(wù)器已成功的處理了請求，相對的500表示網(wǎng)絡(luò)錯(cuò)誤，message是對當(dāng)前網(wǎng)絡(luò)狀態(tài)的描述，result里包含著返回的信息內(nèi)容，也是客戶端展示的數(shù)據(jù)源。表3-1ResultDataNew類屬性屬性名數(shù)據(jù)類型是否為空描述codeintNotnull網(wǎng)絡(luò)狀態(tài)messageStringNotnull網(wǎng)絡(luò)描述resultList<News>Notnull新聞集合New類作為頁面新聞數(shù)據(jù)的容器，今日要聞的每一個(gè)子新聞的數(shù)據(jù)的容器，path表示新聞詳情內(nèi)容的url，image指代新聞的展示圖片的鏈接地址，title表示新聞的標(biāo)題，passtime指新聞在網(wǎng)站發(fā)布的時(shí)間。表3-2News類屬性屬性名數(shù)據(jù)類型是否為空描述pathStringNotnull新聞詳情地址imageStringNotnull新聞圖片titleStringNotnull新聞標(biāo)題passtimeStringNotnull新聞發(fā)布時(shí)間知乎日報(bào)API請求返回如下，映射至3-3ResultZhihu類屬性：ResultZhihu是作為請求知乎今日日報(bào)API返回的json數(shù)據(jù)的容器，Date是服務(wù)器處理請求返回的日期，知乎日報(bào)的當(dāng)日包的內(nèi)容發(fā)布的日期，也是請求知乎日報(bào)每日內(nèi)容的一個(gè)參數(shù)，根據(jù)日期請求每日日報(bào)的主題文章，stories表明當(dāng)日文章的內(nèi)容的集合。表3-3ResultZhihu類屬性屬性名數(shù)據(jù)類型是否為空描述dateintNotnull今日日期storiesList<ZhihuDay>Notnull日報(bào)主題集合ZhihuDay在這里我是作為表示知乎日報(bào)里的每一個(gè)文章主題的內(nèi)容，image_hue表示的是其文章的高清圖片，其中返回還有的標(biāo)清和超清圖片，但這邊是移動(dòng)端，考慮了一下用戶的體驗(yàn)，折中的攫取了image_hue,title指代文章標(biāo)題，url是文章內(nèi)容詳情的鏈接，hint本應(yīng)指代標(biāo)簽或是提示，但返回的數(shù)據(jù)中，多為null，故沒有選擇作為頁面展示上的內(nèi)容，ga_prefix同樣在返回的數(shù)據(jù)大多為null，意義指代不明，images是一個(gè)圖片的集合，指內(nèi)容的圖片集，type指文章的內(nèi)容類別，id指當(dāng)前文章信息在數(shù)據(jù)庫的id表3-4ZhihuDay類屬性屬性名數(shù)據(jù)類型是否為空描述image_hueStringNotnull高清圖片IDtitleStringNotnull主題標(biāo)題urlStringNotnull主題詳情UrlhintStringNotnull閱讀提示ga_prefixStringNotnull未知imagesStringNotnull主題圖片typeIntNotnull主題類型idIntNotnull主題Id知乎日報(bào)詳情API請求返回如下(攫取部分)，映射至3-5ZhihuDayDetail類屬性：ZhihuDayDetail類是裝載知乎日報(bào)文章詳情的數(shù)據(jù)類，body表示其知乎日報(bào)文章的格式內(nèi)容，這里的文本是Html格式，image_hue同上表示高清圖片，image_source表明圖片的來源，title為標(biāo)題，image這里是標(biāo)題頭的主要的展示圖片，share_url指分享給別人訪問此文章的url，js表示關(guān)聯(lián)到的網(wǎng)頁所用到的js的腳本表3-5ZhihuDayDetail類屬性屬性名數(shù)據(jù)類型是否為空描述bodyStringNotnull主題html內(nèi)容image_hueStringNotnull高清圖片idimage_sourceStringNotnull圖片來源titleStringNotnull主題標(biāo)題imageStringNotnull主題圖片share_urlStringNotnull鏈接分享jsStringNotnulljs腳本ga_prefixStringNotnull未知imagesString[]Notnull圖片集合typeStringNotnull主題類型idintNotnull主題idcssString[]Notnullcss樣式鏈接果殼科技API請求返回如下(攫取部分)，映射至3-6GuokeResult類屬性：GuokeResult是作為請求果殼科技熱門信息API返回?cái)?shù)據(jù)的容器，now表示請求接口的時(shí)間，ok表示請求的網(wǎng)絡(luò)狀態(tài)，true表示成功，limit表示請求接口返回?cái)?shù)據(jù)的文章數(shù)據(jù)數(shù)量的限制，默認(rèn)返回20條，可以通過接口參數(shù)limit進(jìn)行調(diào)整，result這里就是返回的文章的內(nèi)容信息的集合了表3-6GuokeResult類屬性屬性名數(shù)據(jù)類型是否為空描述nowStringNotnull當(dāng)前時(shí)間okBoolNotnull請求狀態(tài)limitIntNotnull請求數(shù)量resultList<GuokeDay>Notnull返回文章集合GuokeDay類是果殼文章詳情的數(shù)據(jù)載體，image是文章的主題圖片，is_replayable表示文章是否已被用戶，本app爬取果殼文章數(shù)據(jù)，不涉及其用戶信息的處理，故這里用不到，preface是文章的前言描述，id_editor_recommmend表示當(dāng)前文章是否被編輯推薦，id為當(dāng)前文章表示，copyright指文章內(nèi)容產(chǎn)出方，image_description表示圖片的表達(dá)內(nèi)容，small_image指縮略圖，summary指文章內(nèi)容表達(dá)的總結(jié)，一般返回null，通常用不到，date_create指文章創(chuàng)建日期，resource指當(dāng)前文章的網(wǎng)絡(luò)訪問鏈接，subject指文章所有的標(biāo)簽表3-7GuokeDay類屬性屬性名數(shù)據(jù)類型是否為空描述imageStringNotnull圖片is_replyableBoolNotnull是否已閱讀prefaceStringNotnull前言is_editor_recommendBoolNotnull是否被推薦idIntNotnull文章idcopyrightStringNotnull版權(quán)方image_descriptionStringNotnull圖片描述titleStringNotnull文章標(biāo)題small_imageStringNotnull文章圖片summaryStringNotnull總結(jié)date_createdStringNotnull創(chuàng)建日期resource_urlStringNotnull資源urlsubject_keyStringNotnull關(guān)鍵詞ReadhubAPI請求返回如下(攫取部分)，映射至3-8ReadhubDay類屬性：Readhub資訊API請求返會(huì)的數(shù)據(jù)相當(dāng)簡單粗暴，沒有任何多余的內(nèi)容直接就是返回前20條數(shù)據(jù)內(nèi)容，以ReadhubDay類的集合作為載體，Readhubday類作為每一條資訊的內(nèi)容的載體，id表示資訊標(biāo)識(shí)，newArray表示同類新聞的集合，createAt表示創(chuàng)建日期，publishDate表示發(fā)布日期，summary表示咨詢的簡單總結(jié)，readhub上的資訊的內(nèi)容文字不多，多做總結(jié)表示，tilte指代資訊標(biāo)題，updateAt指代資訊更新日期，timeline時(shí)間軸App端這邊用不到，order指代序號(hào)表3-8ReadhubDay類屬性列名數(shù)據(jù)類型是否為空描述idStringNotnull資訊idnewsArrayList<NewsArray>Notnull相關(guān)新聞createdAtStringNotnull創(chuàng)建日期publishDateStringNotnull發(fā)布日期summaryStringNotnull資訊總結(jié)titleStringNotnull資訊標(biāo)題updatedAtStringNotnull更新日期timelineStringNotnull時(shí)間軸orderStringNotnull序號(hào)NewArray是表示與當(dāng)前ReadhubDay類所表示的內(nèi)容資訊的互有同樣表達(dá)的內(nèi)容資訊的新聞Url的結(jié)合，id指代當(dāng)前資訊標(biāo)識(shí)，url表示pc端瀏覽器所訪問的鏈接，moblieUrl表示移動(dòng)端瀏覽器可以訪問的url鏈接，language表命當(dāng)前資訊語言，一般返回zh-cn表3-9NewsArray類屬性列名數(shù)據(jù)類型是否為空描述idIntNotnull資訊idurlStringNotnullWeb端urlmobileUrlStringNotnull移動(dòng)端urlpublishDateStringNotnull發(fā)布日期languageStringNotnull資訊語言titleStringNotnull資訊標(biāo)題必應(yīng)賞圖API請求返回如下(攫取部分)，映射至3-10ResultBingPhotoData類屬性：ResultBingPhotoData裝在請求bing圖片的返回的數(shù)據(jù)類，必應(yīng)圖片API最多返回七張圖片集，images是返回的圖片集的內(nèi)容，tooltips是說明表3-10ResultBingPhotoData類屬性列名數(shù)據(jù)類型是否為空描述imagesList<Image>Notnull圖片集tooltipsStringNotnull提示Image類是必應(yīng)里一張圖片的數(shù)據(jù)載體，startdate表明其發(fā)布時(shí)間，由于必應(yīng)的圖片都是有時(shí)效期的，所以對應(yīng)的也有enddate表明結(jié)束日期，url表明其圖片的高分辨版本的鏈接，通常為1080p左右，urlbase表明其圖片請求鏈接，因?yàn)楸貞?yīng)圖片的每一張的圖片的分辨率都覆蓋很廣，所以可以通過此鏈接加載各種分辨率樣式，copyright表明其版權(quán)方，copyright訪問版權(quán)方的鏈接，title圖片的標(biāo)題描述，hsh表明圖片的哈希值，quiz返回為null，意義不明表3-11Image類屬性列名數(shù)據(jù)類型是否為空描述startdateList<Image>Notnull發(fā)布日期fullstartdateStringNotnull完整發(fā)布日期enddateStringNotnull結(jié)束日期urlStringNotnull圖片高分辨率鏈接urlbaseStringNotnull圖片資源位置基礎(chǔ)鏈接copyrightStringNotnull版權(quán)方copyrightlinkStringNotnull版權(quán)方鏈接titleStringNotnull圖片標(biāo)題hshString哈希值quizString查詢一言API請求返回如下(攫取部分)，映射至3-12OneSay類屬性：一言API請求的返回的數(shù)據(jù)較為簡單，沒有上面的資訊請求的內(nèi)容如此之多，OneSay作為其返回?cái)?shù)據(jù)轉(zhuǎn)換的載體，id指代當(dāng)前一言的表示，hitokoto表示一言的額外描述，多數(shù)情況返回為空，type指當(dāng)前一言所涉及的類型，來源哪里，類似的有動(dòng)漫，還是游戲，又或者是書籍等等，from表明其來源，from_who表明其來源作者，creator表示當(dāng)前一言的創(chuàng)建者，uuid表明當(dāng)前一言的通用唯一識(shí)別碼表3-12OneSay類屬性列名數(shù)據(jù)類型是否為空描述idintNotnull一言idhitokotoStringNotnull一言描述typeintNotnull類型fromvarcharNotnull來源from_whoStringnull來源作者creatorStringNotnull創(chuàng)作者uuidStringNotnull唯一標(biāo)識(shí)3.5網(wǎng)絡(luò)接口設(shè)計(jì)網(wǎng)絡(luò)編程的核心是IP、端口和協(xié)議3個(gè)元素，本質(zhì)是進(jìn)程間通信，主要的難點(diǎn)是定位主機(jī)和數(shù)據(jù)傳輸。在網(wǎng)絡(luò)框架中，有Flutter官方提供的，但HttpClient[10]本身功能較弱，很多常用功能都不支持。所以網(wǎng)絡(luò)請求使用的是時(shí)下流行的dio庫來發(fā)起網(wǎng)絡(luò)請求，它是一個(gè)強(qiáng)大易用的darthttp請求庫，支持RestfulAPI、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載等等。3.6本章小結(jié)本章首先對App功能進(jìn)行了詳細(xì)設(shè)計(jì)，然后畫出了App開發(fā)所涉及的類圖、順序圖、和部分的活動(dòng)圖，更加直觀地展示了App的各個(gè)功能功能；接下來是對Dao類的設(shè)計(jì)，以及網(wǎng)絡(luò)接口進(jìn)行設(shè)計(jì)。

第4章App實(shí)現(xiàn)4.1界面實(shí)現(xiàn)用戶進(jìn)入媒體資訊App后，即可看到今日要聞模塊如圖4.1所示，以圓角形卡片列表展示，其新聞詳情就如圖4.2所示圖4.1首頁-今日要聞模塊圖4.2首頁-今日要聞詳情點(diǎn)擊底部導(dǎo)航欄中間的Tab，即可進(jìn)入精選聚合模塊，各模塊皆遵循MaterialDesign進(jìn)行設(shè)計(jì)，質(zhì)感，陰影，皆根據(jù)閱覽舒適度設(shè)計(jì)，共三個(gè)子功能模塊，根據(jù)頂部按鈕切換。知乎日報(bào)模塊界面就如圖4.3所示，果殼趣事模塊界面就如圖4.4所示，其知乎日報(bào)文章如圖4.5所示，果殼趣事文章如圖4.6所示，Readhub模塊界面就如4.7所示，Readhub資訊詳情就如圖4.8所示， 圖4.3精選聚合模塊-知乎日報(bào) 圖4.4精選聚合模塊-果殼趣事圖4.5精選聚合模塊-知乎日報(bào)詳情圖4.6精選聚合模塊-果殼文章詳情圖4.7精選聚合模塊-ReadHub圖4.8精選聚合模塊-ReadHub資訊詳情3.用戶點(diǎn)擊底部導(dǎo)航欄的第三個(gè)tab即可進(jìn)入一塊模塊，其目前只包括兩個(gè)子功能，分別是必應(yīng)賞圖和一言，根據(jù)頂部tab進(jìn)行切換。如圖4.9所示，以撲克牌的形式加載圖片，用戶通過手勢進(jìn)行圖片操作，而一言界面就如圖4.10所以，背景圖是根據(jù)貝塞爾曲線繪制破浪浮動(dòng)，一言文字就如故事般橫幅展示，每次切換，其一言也會(huì)不斷變化圖4.9必應(yīng)賞圖圖4.10一言4.2本章小結(jié)本章主要是對App的UI設(shè)計(jì)進(jìn)行實(shí)現(xiàn)，給出各個(gè)功能APP界面的截圖以展現(xiàn)App實(shí)現(xiàn)的效果。

第5章系統(tǒng)測試5.1系統(tǒng)測試的目的系統(tǒng)測試是每個(gè)軟件開發(fā)周期中一個(gè)必不可少的的環(huán)節(jié)，軟件的bug可能存在于系統(tǒng)、功能、過程、數(shù)據(jù)和編碼中，我們需要在這些方面上進(jìn)行測試以找到軟件的Bug并修復(fù)。在系統(tǒng)設(shè)計(jì)和實(shí)現(xiàn)過程中檢查出來的錯(cuò)誤和缺陷需要在軟件運(yùn)行當(dāng)中通過系統(tǒng)測試來實(shí)現(xiàn)，所以這個(gè)階段是軟件開發(fā)中必不可少的部分。5.2系統(tǒng)測試的意義在軟件泛濫的信息時(shí)代，軟件的質(zhì)量參差不齊，因此，為了杜絕低質(zhì)量的軟件的蔓延，系統(tǒng)測試是一個(gè)不可或缺的階段。經(jīng)過一系列的嚴(yán)格測試，可以找出系統(tǒng)中難以發(fā)現(xiàn)的漏洞，有利于提高一個(gè)軟件質(zhì)量，使用戶的體驗(yàn)更加完善。5.3測試用例及結(jié)果表5-1媒體資訊App接口測試及結(jié)果用例編號(hào)用例名稱測試目的測試結(jié)果U-1TestHotNews測試今日要聞API是否可用，能否正確初始化今日要聞界面，新聞Widget是否正確處理數(shù)據(jù)成功接受到新聞資訊JSON，界面初始化成功，新聞數(shù)據(jù)成功加載顯示，頁面動(dòng)畫異步構(gòu)建正常U-2TestHotNewsRefresh測試在下拉刷新的時(shí)候，網(wǎng)絡(luò)請求是否正確發(fā)送，數(shù)據(jù)能否接受并處理，過度的動(dòng)畫是否異常下拉刷新控件正常調(diào)用，動(dòng)畫過渡流暢顯示，數(shù)據(jù)重新加載顯示成功，新聞刷新成功U-3TestZhihuDay測試知乎日報(bào)API是否可用，能否正確初始化知乎日報(bào)界面，文章Widget是否正確處理數(shù)據(jù)成功接受到知乎日報(bào)主題文章JSON，界面初始化成功，知乎日報(bào)成功加載顯示，頁面動(dòng)畫過渡流暢U-4TestGuokeDay測試果殼API是否可用，能否正確初始化果殼趣事界面，文章Widget是否正確處理數(shù)據(jù)成功接受到果殼科技主題文章JSON，界面初始化成功，果殼文章列表成功加載顯示，頁面動(dòng)畫過渡流暢U-5TestReadhub測試ReadHubAPI是否可用，能否正確初始化Readhub資訊界面，Readhub資訊Widget是否正確處理數(shù)據(jù)成功接受到Read科技資訊JSON，界面初始化成功，Readhub列表加載成功U-6TestBingPhoto測試必應(yīng)賞圖API是否可用，圖片加載頁能否成功顯示高清圖片，加載高清圖片是否會(huì)導(dǎo)致OOM成功接收到必應(yīng)圖片JSON，圖片加載略顯緩慢，但在意料之中，AP