基于React Native的手工藝分享App設計與實現(xiàn)

基于ReactNative的手工藝分享App設計與實現(xiàn)Design

and

implementation

of

handicraft

sharing

app

based

on

react

native內(nèi)容摘要本文設計的手工藝app主要是可供用戶足不出戶就可以在家進行線上學習手工藝制作的?？梢杂行У亟鉀Q用戶想學習卻找不到學習的地方的這個問題。本軟件的功能主要是用戶學習為主。下面列出了該論文所需要完成的工作內(nèi)容：具體介紹了該項目的背景和該項目在開發(fā)中所要使用到的相關技術;闡述了手工藝app的需求分析、功能設計、系統(tǒng)實現(xiàn)和調(diào)試以及運用到的一些技術。app使用ReactNative為框架，語言以及CSS來開發(fā)。ReactNative可以用JavaScript也能編寫原生移動應用。雖說這是一個跨平臺的應用開發(fā)，但由于缺少條件，所以本文的項目主要是運行在安卓平臺上的。同時ReactNative的版本非常地多樣，而本軟件的ReactNative版本為0.50.1.在軟件測試部份，本文對各個主要模塊進行了功能性測試并且對總體進行了非功能性測試。關鍵詞：手工藝ReactNativeJavaScriptCSSAbstractThehandicraftappdesignedinthispaperismainlyforuserstolearnthehandicraftmakingonlineathomewithoutleavinghome.Itcaneffectivelysolvetheproblemthatuserswanttolearnbutcannotfindaplacetolearn.Themainfunctionofthissoftwareisuserlearning.Thefollowingisalistoftheworktobecompletedinthispaper:specificallyintroducesthebackgroundofthisprojectandtherelatedtechnologiestobeusedinthedevelopmentofthisproject;describesthedemandanalysis,functiondesign,systemimplementationanddebuggingofthehandicraftappaswellassometechnologiestobeused.Appisdevelopedwithreactnativeasframework,languageandCSS.ReactnativecanwritenativemobileapplicationsaswellasJavaScript.Althoughthisisacrossplatformapplicationdevelopment,butduetothelackofconditions,theprojectofthispaperismainlyrunningontheAndroidplatform.Atthesametime,theversionofreactnativeisverydiverse,andtheversionofreactnativeofthissoftwareis0.50.1.Inthesoftwaretestingpart,thispaperhascarriedoutfunctionaltestoneachmainmoduleandnonfunctionaltestonthewhole.Keywords：handicraftReactNativeJavaScriptCSS

目錄TOC\o"1-3"\h\u11172第一章緒論 第一章緒論1.1.選題背景和意義隨著科學與技術地不斷發(fā)展，許多的手工藝品也可以在機器上進行大量地生產(chǎn)，這造成了物質(zhì)的泛濫。單一、固定的產(chǎn)品已經(jīng)不能滿足人們的需要，人們開始追求個性的、獨一無二的手工藝品。不得不說，手工藝品在這個時代背景下出現(xiàn)了很大的機遇。傳統(tǒng)的工匠不僅可以創(chuàng)造自己的平臺特色，使用的工具還可以通過發(fā)表紀錄片、文字、媒體。以前制作手工的藝術人不僅能夠，把目標注意在很多流行的簡短小視頻或者直播(把百度百科的放上來直播的意思)，通過這樣的方式就能把，整個的制作流程呈現(xiàn)給大家。增強平臺銷售商品的信心，提高員工的曝光度，打造品牌。此外，傳統(tǒng)工藝也可以通過融資等打開與知名品牌的合作渠道。例如，在東京和Skytrey，Starbox和日本傳統(tǒng)的玻璃技術EdoCabos，推出了一套限量咖啡飲料，吸引了消費者的注意?？Х群蛡ゴ蟮募夹g的結(jié)合為每個發(fā)行方都有好處。隨著人們生活水平的不停進步，在滿足了基本的物質(zhì)生活需求后，需要一些額外的手藝或來滿足自己的精神需求。一直以來，手工藝采用的都是手口相傳的形式來進行學習或傳授他人。但就目前的快節(jié)奏生活來看，人們要想快速地找到有經(jīng)驗的手工藝人來進行學習是比較困難的。同時也隨著有經(jīng)驗的手工藝人逐漸高齡化，僅僅憑著口頭相傳無法增加手工藝傳播的范圍。也無法和現(xiàn)代人的生活習慣進行匹配。故借助這個平臺，為這些想要進行手工藝學習的人們提供了一個學習的環(huán)境。目前，互聯(lián)網(wǎng)的發(fā)展不僅給傳統(tǒng)手工藝者的工作帶來了新的發(fā)展，而且也讓我們的信息流通變得越來越容易，如靜樂剪紙、光影紙雕等。來自中國西安的靜樂剪紙，和來自于美國的光影紙雕，但是它們兩者使用的制作材料是幾乎一模一樣的，制作方法也差不多一樣?；ヂ?lián)網(wǎng)信息鏈接讓他們知道自己的位置。在靜樂剪紙中運用光影雕刻，可以解決靜樂剪紙受個體文化的影響和不太復雜的創(chuàng)意，也可以提高精致度。很明顯，傳統(tǒng)技術的融合帶來了新的活力，互聯(lián)網(wǎng)提供了一個很好的機會。1.2.國內(nèi)外研究概括和發(fā)展趨勢1.2.1國內(nèi)研究概括和發(fā)展趨勢現(xiàn)如今，人們在網(wǎng)絡上進行學習已經(jīng)是大勢所趨，這都是因為互聯(lián)網(wǎng)在近幾年的不斷發(fā)展壯大。我們也非常感謝互聯(lián)網(wǎng)能夠給予這個平臺，讓人們足不出戶即可在家進行學習?；ヂ?lián)網(wǎng)可以增加學習視頻的傳播性，從而讓更多的人可以進行學習。許多傳統(tǒng)的工匠利用網(wǎng)絡信息的特性來建立一個個的專業(yè)的網(wǎng)站和APP學習平臺。我們?yōu)榱颂岣哂脩舻呐d趣以及更清晰地描述手工藝品的制作過程，同時也降低用戶在學習過程中的難度可以在平臺設計中可以添加到3D、VR等元素。我們?yōu)榱俗屧S多傳統(tǒng)手工藝品的繼承人與家庭繼承人甚至男女繼承人之間的差距可以縮小，從而為傳統(tǒng)手工藝品的未來發(fā)展吸引新的工人，而使用了這種方法?，F(xiàn)在，即使有各種各樣的應用程序在建立中也遇到了許多困難。首先，傳統(tǒng)工藝的創(chuàng)新太低、太慢，無法進一步激發(fā)用戶的興趣。如今，在信息爆炸的碎片化時代，沒有持續(xù)創(chuàng)新的應用很快就會被大眾忘記，因為對于用戶來說這種新鮮感相對于高科技只是暫時的。如何維護好用戶之間的關系才是一個大問題。其次，傳統(tǒng)的地方工藝需要花費大量的時間和經(jīng)歷許多復雜的過程，有時有幾十個復雜的過程只是為了準備任務。第三，許多與傳統(tǒng)工藝和應用程序制造過程相關的常識必須由一個由導師和工匠組成的特殊團隊進行解釋和傳授。如何招聘專業(yè)人才，制作出質(zhì)量有保障的教學視頻，無疑是一個大問題。1.2.2國外研究概括和發(fā)展趨勢國外的市場競爭不如中國激烈。整個市場的發(fā)展?jié)摿θ匀痪薮?，潛在用戶?shù)量也很大。一些外國用戶使用應用程序的可能性仍然相對較高。相互傳播，廣泛實施，將增加用戶的關注度。國外應用程序的開發(fā)有自己的專門團隊，專利名稱也遠多于中國。開發(fā)的應用程序功能強大，符合質(zhì)量標準，用戶體驗自然就會良好。國外據(jù)我目前找到的資料顯示，暫時還沒發(fā)現(xiàn)有比較系統(tǒng)的手工藝學習APP，但國外的手工學習網(wǎng)站挺齊全的。但國外的應用程序界面設計值得我們?nèi)ソ梃b和學習。不過隨著時間的推進，在文明的推動下，國外工藝設計應用程序越來越多，大多以用戶為中心，從用戶的角度出發(fā)，按照人機技術的原理，交互設計也符合用戶的應用習慣，具有很強的普及性；在視覺設計方面，色彩的使用相對平和，這在一定程度上防止了用戶在長時間使用這款應用時感到緊張。1.3.論文的主要工作該項目應用中的登錄功能、查看教程、查看手工藝簡介等功能的實現(xiàn)與設計都是由我獨立完成的，并且我為了能夠順利地實現(xiàn)這些功能，我做了以下幾點工作：學習與這些功能模塊相關的技術，查閱相關技術資料，并且和指導老師進行討論，選擇其中最適合的技術和開發(fā)框架。依照產(chǎn)品需要來對系統(tǒng)功用需求來實行剖析，對非功能需求進行設計，這樣就能讓軟件愈加地契合用戶的應用習性。獨立完成上面所列出來的功能，并對實現(xiàn)代碼過程中遇到的問題列出解決方案，實現(xiàn)性能后再對模塊實行測試。在開發(fā)完成后，完成系統(tǒng)的功能性測試與非功能性測試。1.4.主要技術簡介本節(jié)主要介紹了軟件實現(xiàn)時所用到的技術和平臺。該項目盡管應用的是跨平臺的移動應用開發(fā)框架，但具體實現(xiàn)時因為自身硬件的原因只有在Android平臺上面測試過。所用的編程語言為JavaScript,還有層疊樣式表。1.4.1Android平臺Google公司開發(fā)的移動操作系統(tǒng)Android。Android是基于Linux內(nèi)核以及其他開源軟件。這款移動操作系統(tǒng)專為觸摸屏移動設備設計比如智能手機和平板電腦等。此外，谷歌還進一步開發(fā)了用于電視機、汽車和手表的Android電視、Android汽車和wear操作系統(tǒng)，它們每一款都有獨特的用戶界面。1.4.2ReactNative框架ReactNative，是Facebook開發(fā)的一個多平臺的移動應用開發(fā)框架，也被稱之為RN。JS框架上的JS源代碼，JS框架自誕生以來一直是支持IOS和Android一個開源的平臺。ReactNative開發(fā)移動應用程序使用的是JavaScript語言、JS、HTML、CSS，所以，那些熟悉web前端開發(fā)的人可以進入移動應用領域，沒有太多需要學習的東西。而把ReactNative合并起來的是兩個方式，一個是采用JS橋接，另一個是加Native橋接。最終產(chǎn)品是一個從應用觸感上很難與用Objective-C或Java編寫的應用分辨開來的的真正的移動應用。ReactNative與原來的應用程序所使用的底層UI組件幾乎相同。你所要做的就是用JavaScript和React的形式對這些基本組件進行組合起來。當你在調(diào)試界面之時會十分的方便，更改代碼之后保存，界面會自己跟著變化，這一點在調(diào)試的時候非常實用，但是有時速度有點慢，因此需要重置。1.4.3JavaScript技術JavaScript是一種解釋型的腳本語言，在代碼的操作期間來進行逐行來解釋的。同時，因為能夠運行在各種各樣的平臺下，這必定少不了瀏覽器的支持。JavaScript是一種不僅能夠創(chuàng)立對象，還可以使用現(xiàn)有的對象的基于對象的腳本語言。為什么JavaScript會被歸類為直譯言語，這是由于負責的引擎每次運行時都會加載代碼并進行解譯。直譯言語的弱點是安全性較差，而伴隨著服務器的發(fā)展壯大，盡管程序員更喜歡在服務器端運行腳本，這都是為了保證安全，但是JavaScript越來越被人們所使用以其跨平臺、易用等優(yōu)點。JavaScript在HTML頁面中日常的用途是嵌入動態(tài)文本的；響應關于瀏覽器事件的；讀取HTML元素并寫入；驗證數(shù)據(jù)，在把數(shù)據(jù)提供給服務器之前；檢測信息有關訪問瀏覽器的；控制Cookie，包括服務器端編程的創(chuàng)建和修改實現(xiàn)基于node.js技術上的。1.4.4CSS技術層疊樣式表是一種用于顯示文件模板的計算機語言，例如：HTML（使用標準通用標記語言）或XML（標準通用標記語言的子集）。CSS不僅能夠?qū)W(wǎng)站元素進行動態(tài)格式化使用不同的腳本語言，還可以對網(wǎng)站進行靜態(tài)修飾。CSS支持所有字體大小，可以準確地檢查元素的像素布局在網(wǎng)站中，并具有編輯網(wǎng)站對象和模板的能力。CSS樣式表可以在多個頁面上使用相同的CSS樣式表，但是這要存儲在一個CSS文件中。CSS樣式表理論上可以在幾個頁面上填寫相同的樣式，它不屬于任何一個頁面的文件，在任何頁面文件中都能夠?qū)⑵涫褂谩?.4.5NodeNode是運行在服務器上的JavaScript開發(fā)平臺。這就像PHP、Python、Perl、Ruby和其他服務器端語言一樣實現(xiàn)JavaScript。Node用于創(chuàng)建響應速度快、擴展方便的網(wǎng)絡程序，是一個基于ChromeJavaScript運行時的平臺。Node實現(xiàn)了低功耗、高效率，非常適合分布式設備上的實時數(shù)據(jù)密集型操作，原因是采用了事件驅(qū)動以及無阻塞的I/O模型，。1.5本章小結(jié)本章的第一節(jié)主要介紹了我為什么選擇手工藝App來進行研究的一個背景和意義。第二節(jié)主要說的是手工藝App在國內(nèi)外的研究現(xiàn)狀以及未來的發(fā)展空間。第三節(jié)介紹了我為了完成項目所做的一些工作。第四節(jié)主要介紹了完成項目所使用的一些技術和開發(fā)框架等。

第二章系統(tǒng)分析2.1系統(tǒng)功能分析該軟件的主要用戶群體是廣大手工藝的愛好者們，所以它的定位是一個能滿足到用戶學習手工藝的需求類APP。要滿足到這個需求就需要該軟件要有查看手工藝簡介、教程等功能。2.1.1登錄功能該軟件的登錄功能是在最開始的一個頁面的，只有用戶輸入的用戶名和密碼準確無誤才能成功進入主頁面，否則會彈出用戶名或密碼輸入錯誤的信息進行提示。2.1.2首頁首頁主要是一個輪播圖加上可以查看手工藝的簡介和簡單的圖片組成的。用戶在登錄成功之后，即可查看到首頁的內(nèi)容。首頁主要展示的是一些手工藝的種類以及它們的一些簡單介紹和它們的作品照片展示。2.1.3抽屜頁在首頁的左上角有一個類似菜單的按鈕，點擊這個按鈕即可進入到抽屜頁面。抽屜頁最上方是用戶的頭像以及用戶名。這里面主要是用戶的個人中心?，F(xiàn)在暫時包括有我的作品和我的卡包這兩項。2.1.4查看手工藝簡介頁面點擊首頁關于該手工的文字介紹，即可詳細查看屬于該手工的簡介。該頁面顯示所有有關于該品種手工藝的簡單介紹。包括但不限于該手工藝的起源、發(fā)展歷史、使用材料、種類、作用價值、代表人物等等。2.1.5查看手工藝教程頁面點擊首頁關于該手工的圖片，即可查看屬于該手工的教程。該頁面顯示該手工的視頻教程，點擊視頻即可在線學習。2.1.6我的作品頁面該用戶可以存放用戶上傳的作品，也相當于一個草稿箱的作用。用戶可以來到此頁面查看自己的作品，該頁面只有用戶本人能夠看見。2.2系統(tǒng)性能分析一個系統(tǒng)的好壞不僅在于其功能是否強大，更在于其性能是否完善。為了讓應用變得愈加契合用戶的應用習性，在對軟件進行實現(xiàn)時應該考慮如何讓軟件的操作簡單易懂，容易擴展出新功能，并且讓已經(jīng)實現(xiàn)的功能可以穩(wěn)定高效地運行。本系統(tǒng)應滿足以下性能要求：2.2.1準確性和及時性系統(tǒng)應具備能夠準確無誤、及時響應用戶的操作的性能。2.2.2易用性本應用直接面向用戶，考慮到用戶可能不太熟悉軟件。因此，軟件操作方面必須遵循簡單易用的原則和具備友好的用戶界面，并具有相對人性化的人機交互界面。要保證系統(tǒng)的易用性這一點，就要求系統(tǒng)應該盡量使用用戶所熟悉的圖標等。2.2.3安全性所有系統(tǒng)流程（包含系統(tǒng)硬件、軟件、應用、保證及相關人員）和系統(tǒng)生命周期的所有階段（包含演示、設計、開發(fā)、使用、保護及拆卸）的一切流動，實施安全要求，該系統(tǒng)對危險源的危害要一字不差，并采取技術和管理措施，確保安全立法，實現(xiàn)火災風險或?qū)L險控制在可接受的水平，都被系統(tǒng)安全性要求涵蓋，以避免事故的發(fā)生。2.3可行性分析2.3.1技術可行性軟件開發(fā)包括開發(fā)方法、軟硬件平臺、網(wǎng)絡結(jié)構、系統(tǒng)規(guī)劃和結(jié)構等多種技術。有必要分析這些技術的成熟度和現(xiàn)實性，并詳細介紹所涉及的技術在軟件開發(fā)。ReactNative的優(yōu)點關鍵就是調(diào)試方便，利用css來實行規(guī)劃。對于前端來說，它給程序員減少了大量的學習資本，并顯著減少了代碼量。而大部分代碼包括游戲邏輯和數(shù)據(jù)，程序員只需要寫一套，就都能運行在Android和IOS兩大平臺上。界面上因為是從react一起打包包裝的，一部分有一些平臺?？缙脚_能夠減少開發(fā)資本的和開發(fā)人員的數(shù)量在理論上。大多數(shù)公司選擇使用ReactNative的關鍵緣由也是熱更新。讓用戶經(jīng)常更新APP會很煩。ReactNative盡管還不是很成熟，在一些只需要提供展示效果的頁面中使用還是非常簡單實用的。2.3.2操作可行性通過對可能使用本軟件的用戶進行需求調(diào)研、分析，特別針對手工愛好者的年齡情況，設計出合理友好的用戶操作界面，同時使軟件的操作方式簡單明了。用戶在登錄之后，通過簡單的操作，即可查看到相應的手工藝品介紹以及教程。而且圖標的設置也與其他APP大致相同，做到讓用戶即使從來沒接觸過，也能一下子就上手。因此，本軟件在操作方面具備可行性。2.3.3設計可行性本軟件使用reactnative的框架模式。UI方面可以只通過JavaScript來進行編寫。而且基于reactnative的熱重載模式，代碼一編譯好保存即可查看更新代碼后的效果。圖標的設計也是由Photoshop自行繪制的。操作難度不大。因此，本軟件在設計方面具備可行性。2.3.4經(jīng)濟可行性經(jīng)濟可行性是對經(jīng)濟效益進行評估，而評估的主要內(nèi)容有軟件開發(fā)費用支出以及軟件投入使用可能帶來的收益。本系統(tǒng)的設計和開發(fā)的成本都相對較低，所用到的圖標等主要是靠自己繪制。在硬件方面，主要適用于已經(jīng)普及的智能手機，所以硬件成本也不高。綜上所述，從經(jīng)濟可行性分析，本軟件在經(jīng)濟上可行。2.4本章小結(jié)本章通過結(jié)合用戶自身對軟件的需求，寫出了該應用的核心功能并且對功能進行詳細說明，最后再根據(jù)用戶的需求特點和市場上的終端特點列出了非功能性需求。

第三章系統(tǒng)設計3.1系統(tǒng)層次模塊系統(tǒng)層次模塊是通過對用戶的需求進行詳細的分類之后，達到銜接用戶界面（視圖層）與數(shù)據(jù)（數(shù)據(jù)層）的一種結(jié)構。一個復雜的系統(tǒng)按功能劃分為許多模塊。模塊之間有通信鏈路。幾個模塊組成一個平面。每一層都只是單方面的依賴，不形成一個圓形結(jié)構。系統(tǒng)的層次模塊圖如圖3-1所示：圖3-1系統(tǒng)層次模塊圖3.2系統(tǒng)流程描述系統(tǒng)物理模型的傳統(tǒng)工具是系統(tǒng)流程圖。它的基本思想是把系統(tǒng)的所有細節(jié)（步驟、文件、數(shù)據(jù)庫、表格、人工過程等），系統(tǒng)各部分之間的數(shù)據(jù)活動用圖形符號來進行描述。系統(tǒng)流程圖顯示系統(tǒng)流程能更好、更清晰地。系統(tǒng)流程從用戶登錄開始，用戶可以在登錄界面中輸入用戶名和密碼登錄進本軟件。只要把用戶名和密碼輸入正確之后，就可以看見軟件的首頁了。軟件的首頁主要有展示手工藝圖片的輪播圖，以及手工藝的圖片加文字組成的手工藝簡單介紹。在軟件里，我并沒有設置頂部或底部導航欄，主要是為了讓軟件的界面看上去更加地簡潔大方，讓用戶更加地易懂。在軟件里設置了一個左抽屜頁，當點擊左上方圖標的時候，抽屜頁就會出現(xiàn)。在抽屜頁里，我設置了一個用戶頭像，這算是個人中心的一個入口。還有一個我的作品和我的卡包頁面。系統(tǒng)流程圖如圖3-2所示：圖3-2系統(tǒng)流程圖3.3數(shù)據(jù)流程圖能詳細地描繪系統(tǒng)數(shù)據(jù)流程的關鍵工具是數(shù)據(jù)流程圖。把數(shù)據(jù)形象化，然后用流程圖描繪出系統(tǒng)中所有信息的來龍去脈以及實踐流程。觀察數(shù)據(jù)流程圖，我們能夠清楚的了解系統(tǒng)內(nèi)部數(shù)據(jù)的流動方向及其加工儲存狀況。數(shù)據(jù)流程圖能將簡單地展現(xiàn)出復雜的系統(tǒng)數(shù)據(jù)，使我們更加方便地理解、閱讀，同時有利于系統(tǒng)的后期保護和二次開發(fā)。數(shù)據(jù)流程圖有兩個特點：抽象性和概括性。抽象性是指數(shù)據(jù)流圖只留下信息和數(shù)據(jù)的存儲、活動、應用和處理狀態(tài)而去掉了詳細的組織、分配和物質(zhì)流，。概括性則是指將系統(tǒng)的處理與不同的業(yè)務聯(lián)系起來的數(shù)據(jù)流程圖，構成一個整體。在繪制數(shù)據(jù)流圖時，要注意檔次的分類，我們要學會看數(shù)據(jù)流程圖，要增強理解數(shù)據(jù)流圖。我們在一開始時可能并不會完整地理解一個系統(tǒng)。我們在分析一個系統(tǒng)時，可能會錯誤的和不準確的對問題的理解，但是我們應該根據(jù)自己的理解用數(shù)據(jù)流圖來表達、驗證和慢慢修正。數(shù)據(jù)流程圖如圖3-3所示：圖3-3數(shù)據(jù)流程圖3.4功能設計模塊3.4.1用戶登錄3.4.1.1用戶登錄用戶登錄的頁面如圖3-4所示：圖3-4用戶登錄3.4.1.2操作流程操作流程如圖3-5所示：圖3-5用戶登錄流程圖3.4.1.3詳細操作輸入項：用戶名，用戶密碼。輸出項：若登錄成功，則顯示軟件的主界面，反之，吐司提示登錄錯誤信息。處理：判斷用戶名、密碼是否有填寫，并且用戶名和密碼是否對應每一個賬號并填寫正確。3.4.2首頁3.4.2.1首頁軟件的首頁如圖3-6所示：圖3-6首頁3.4.2.2操作流程操作流程如圖3-7所示：圖3-7首頁流程圖3.4.2.3功能描述應用的首頁是使用swiper、ImageView、TextView這三個組件來進行搭配組成的。首頁的內(nèi)容主要包括有輪播圖查看手工藝以及一部分的手工藝的簡介。當用戶點擊相應的地方就會進入到相應的頁面。主要的功能就是讓用戶了解到手工藝品的種類以及簡單的手工藝的一些介紹。3.4.3抽屜頁3.4.3.1抽屜頁頁面抽屜頁如圖3-8所示：圖3-8抽屜頁3.4.3.2操作流程操作流程如圖3-9所示：圖3-9抽屜頁操作流程3.4.3.3功能描述抽屜頁設置的組件主要是個人中心，個人的作品上傳以及后續(xù)會添加在線商城等功能。在后期，主要是想設置為用戶的個人中心?，F(xiàn)在大多數(shù)的APP也是會采用抽屜頁的這個組件，顯得軟件界面比較簡潔大方。3.4.4手工藝簡介頁面3.4.4.1手工藝簡介頁面（以折紙界面為例）手工藝簡介頁面如圖3-10所示：圖3-10手工藝簡介頁面3.4.4.2操作流程操作流程如圖3-11所示：圖3-11查看簡介頁面操作流程3.4.4.3功能描述該頁面主要是查看該種類的手工藝品的簡介。用戶在首頁通過簡單的點擊操作，即可查看所有有關于該品種手工藝的簡單介紹。包括但不限于該手工藝的起源、發(fā)展歷史、使用材料、種類、作用價值、代表人物等等。3.4.5手工藝教程頁面3.4.5.1手工藝教程頁面（以折紙教程為例）手工藝教程頁面如圖3-12所示：圖3-12手工藝教程頁面3.4.5.2操作流程操作流程如圖3-13所示：圖3-13查看手工藝教程頁面3.4.5.3功能描述該頁面主要是查看該種類的手工藝品的教程。用戶在首頁通過簡單的點擊操作，即可查看所有有關于該品種手工藝的教程。點擊視頻即可觀看教程。該品種手工藝的視頻下方，還會有其他的推薦視頻。3.4.6我的作品3.4.6.1我的作品頁面我的作品頁面如圖3-14所示：圖3-14我的作品頁面3.4.6.2操作流程操作流程如圖3-15所示：圖3-15我的作品操作流程3.4.6.3功能描述本頁面主要功能是放置用戶上傳的視頻作品，可供用戶自己查看。同時用戶可以自己上傳作品，可以先把它存在草稿箱，也就是我的作品頁面。3.5本章小結(jié)本章主要通過系統(tǒng)的流程設計、數(shù)據(jù)設計以及功能設計分別對登錄模塊、首頁模塊、抽屜頁模塊、查看手工藝簡介模塊以及查看手工藝教程模塊進行了詳細地分析設計。設計過程也是充分地考慮了用戶的使用習慣以及使用學習行為。

系統(tǒng)測試系統(tǒng)測試是軟件開發(fā)過程的重要組成部分，通過對項目開發(fā)過程的產(chǎn)品進行差錯審查，從而保證其質(zhì)量卓越。因此，每個開發(fā)者都應該學會養(yǎng)成良好的測試習慣。系統(tǒng)測試有以下幾點意義：（1）系統(tǒng)測試不單單是發(fā)現(xiàn)錯誤，而是在使用它們之前盡可能多地進行測試，排除軟件開發(fā)過程中遺留的潛在錯誤。（2）進行系統(tǒng)測試，能避免投入使用過程中產(chǎn)生不可挽回的損失。（3）完整的測試本身是評估軟件質(zhì)量的一種方法。系統(tǒng)測試是具有一定的價值的，在經(jīng)過一系列測試之后沒有發(fā)現(xiàn)錯誤，可以說明軟件質(zhì)量良好，可以投入使用。4.1測試環(huán)境1.硬件：Windows102.軟件：雷電模擬器（版本為Android7.1.2）4.2功能測試功能上的測試主要包括對各項功能點的測試。下面就以登錄功能為例，用戶名稱、密碼文字輸入框是否能成功輸入信息，“登錄”按鈕是否能正常使用等。測試用例如下：用例編號測試項操作步驟預期結(jié)果數(shù)據(jù)實際結(jié)果DL001成功登錄點擊“登錄”按鈕，進入登錄頁面，輸入用戶名稱admin與密碼123，點擊“登錄”按鈕成功登錄登錄失敗用戶名稱：admin用戶密碼：123成功登錄DL002用戶名稱點擊“登錄”按鈕，進入登錄頁面，輸入用戶名稱與密碼admin，點擊“登錄”按鈕用戶名稱正確，成功登錄提示用戶名稱與密碼不相符，請重新輸入1、（空）2、英文：admin3、數(shù)字：1234、中文：山間霧5、符號：%%%提示用戶名稱不能為空成功登錄4、5、提示用戶名稱與密碼不相符，請重新輸入DL003用戶密碼點擊“登錄”按鈕，進入登錄頁面，輸入用戶名稱admin與密碼，點擊“登錄”按鈕用戶密碼輸入正確，成功登錄提示用戶密碼與用戶名稱不相符，請重新輸入1、（空）2、英文：admin3、數(shù)字：1234、中文：山間霧5、符號：%%%提示用戶密碼不能為空成功登錄4、5、提示用戶名稱與密碼不相符，請重新輸入DL004“登錄”按鈕點擊“登錄”按鈕，進入登錄頁面，輸入用戶名admin稱與密碼123，點擊“登錄”按鈕1、“登錄”按鈕正常，用戶成功登錄2、“登錄”按鈕未能正常使用，用戶登錄失敗“登錄”按鈕正常，用戶成功登錄4.3非功能性測試兼容性測試：該項目通過創(chuàng)建的各個不同的模擬器，測試軟件是否能在不同版本以及不同分辨率的情況下正常顯示。經(jīng)過測試可知：軟件在不同的分辨率下均能正常顯示；至于在安卓的各類主流版本中亦能正常運作。測試用例如下所示：用例編號測試項類型預期結(jié)果實際結(jié)果JRX001分辨率1920*1080顯示正常顯示正常JRX002分辨率1280*720顯示正常顯示正常JRX003分辨率800*480顯示正常顯示正常JRX004版本4.0顯示正常顯示正常JRX005版本4.1顯示正常顯示正常JRX006版本4.2顯示正常顯示正常JRX007版本4.3顯示正常顯示正常JRX008版本4.4顯示正常顯示正常JRX009版本5.0顯示正常顯示正常JRX010版本6.0顯示正常顯示正常4.4用戶界面測試用戶界面測試，即UI測試，主要是對用戶界面進行審核。具體工作包括：確認用戶界面是否符合用戶的審美；各個功能模塊所對應的位置是否合理；背景顏色整體色調(diào)是否賞心悅目；界面中是否存在錯別字等等。測試用例如下所示：用例編號測試項操作步驟預期結(jié)果實際結(jié)果DLL001標題檢驗標題文字是否正確；位置是否居中并處于上方標題文字正確，位置正確標題文字正確，位置正確DLL002抽屜按鈕檢驗抽屜按鈕位置是否正確；點擊按鈕是否能跳轉(zhuǎn)到抽屜頁面抽屜按鈕位置正確；點擊按鈕可以正常跳轉(zhuǎn)到抽屜頁面抽屜按鈕位置正確；點擊按鈕可以正常跳轉(zhuǎn)到抽屜頁面DLL003文本框檢驗文本框文字是否正確；輸入的內(nèi)容是否處于正確位置；文本框位置是否符合一般使用習慣文本框文字正確；輸入內(nèi)容處于正確位置；文本框位置符合一般使用習慣文本框文字正確；輸入內(nèi)容處于正確位置；文本框位置符合一般使用習慣DLL004圖片檢驗圖片位置是否正確；圖片是否能夠點擊跳轉(zhuǎn)圖片位置正確；點擊圖片后能夠正常跳轉(zhuǎn)圖片位置正確；點擊圖片后能夠正常跳轉(zhuǎn)4.5測試總結(jié)本章主要對軟件的功能、非功能以及用戶界面進行了簡單的測試。在經(jīng)過測試后發(fā)現(xiàn)，軟件能滿足最基本的運行條件，可以正常使用。在兼容性上也能夠在各種分辨率以及各種版本下正常顯示。用戶界面方面，布局合理，界面簡潔明了易于操作，符合大部分用戶的使用習慣。

第五章總結(jié)與展望本章主要是對前面內(nèi)容的一個總結(jié)，以及對未完成內(nèi)容的建議，指導未來對該軟件的完善工作。5.1研究成果該論文基于reactnative的手工藝APP說難不難，說易不易。該論文結(jié)合當今用戶對手工藝學習的渴求，設計和實現(xiàn)了一個可供用戶學習手工藝的學習軟件。以下是項目的設計和實現(xiàn)的內(nèi)容：首先是用戶登錄的界面，登錄部分設置了用戶名和密碼來作為一個數(shù)據(jù)驗證。因為現(xiàn)在還在測試階段，所以在這里我是給定死了一個賬戶名和密碼的，用戶只有通過這唯一的一個賬號密碼才能登錄進去。用戶輸入了正確的賬號密碼之后，就可以看到我們的首頁了。首頁的布局使用了一個輪播圖組件以及scrolloview組件來組成的。界面比較方便整潔，便于從來沒接觸過該軟件的人來進行快速上手。在scrollview里，由圖片和文字組成，這里的操作比較簡單。點擊圖片可以查看關于該手工藝的教程，點擊圖片下方文字可以查看關于該手工藝的簡介。5.2未來方向（1）對該應用進行功能的擴展，因為該軟件的功能還不夠多不夠全面。所以我準備在下一個版本增加更多能讓用戶使用得更舒適實用的功能，這樣才能讓APP對用戶更有粘性。（2）在注冊登錄頁面中添加手機短信驗證功能，或使用微信、 QQ、微博等快捷方式登錄，實現(xiàn)個人信息的安全化以及用戶賬號的關聯(lián)性。（3）增加讓用戶可以自己上傳作品的功能。這樣子可以使得素材庫充足，可供學習的素材多種多樣。（4）在用戶上傳的作品下面增加點贊、評論等功能，這樣可以讓上傳者隨時得到自己作品的反饋。（5）在技術允許的情況下，可以增加私信功能。在未互相關注的情況下，雙方可以發(fā)文字信息；在雙方互關之后，可以發(fā)送語音、圖片等功能。（6）添加上傳視頻之后可以在線播放或者下載到用戶本地的功能。這樣即使是用戶在離線狀態(tài)下也可以學習到自己想要學習的技能。（7）增加分享功能，使用戶的作品可以更好地傳播出去，獲得更多的關注度以及鼓勵作者上傳作品視頻。（8）在作品教程的下面放置作品材料的購買鏈接。這個功能需要與其他商城達成合作或者直接在本應用添加一個在線商城。（9）可以添加白天和黑夜的模式，可以讓用戶根據(jù)自己的需求調(diào)節(jié)使用，更好地迎合用戶的使用習慣。（10）添加搜索以及熱搜榜的功能。讓用戶可以看到現(xiàn)下最對人搜索與學習的作品、手工類別是什么。

參考文獻[1]郝駿,鄭紫微,段歡.基于ReactNative圖像隱寫的研究和實現(xiàn)[J].無線通