1 于 基于 React Native 的手工艺分享 App 设计与实现
内容摘要
本文设计的手工艺 app 主要是可供用户足不出户就可以在家进行线上学习手工艺制作的。可以有效地解决用户想学习却找不到学习的地方的这个问题。本软件的功能主要是用户学习为主。下面列出了该论文所需要完成的工作内容：具体介绍了该项目的背景和该项目在开发中所要使用到的相关技术;阐述了手工艺 app 的需求分析、功能设计、系统实现和调试以及运用到的一些技术。app 使用 React Native为框架，语言以及 CSS 来开发。React Native 可以用 JavaScript 也能编写原生移动应用。虽说这是一个跨平台的应用开发，但由于缺少条件，所以本文的项目主要是运行在安卓平台上的。同时 React Native的版本非常地多样，而本软件的 React Native 版本为 0.50.1.在软件测试部份，本文对各个主要模块进行了功能性测试并且对总体进行了非功能性测试。
关键词：手工艺
React Native
Java Script
CSS Abstract
The handicraft app designed in this paper is mainly for users to learn the handicraft making online at home without leaving home. It can effectively solve the problem that users want to learn but can not find a place to learn. The main function of this software is user learning. The following is a list of the work to be completed in this paper: specifically
2 introduces the background of this project and the related technologies to be used in the development of this project; describes the demand analysis, function design, system implementation and debugging of the handicraft app as well as some technologies to be used. App is developed with react native as framework, language and CSS. React native can write native mobile applications as well as JavaScript. Although this is a cross platform application development, but due to the lack of conditions, the project of this paper is mainly running on the Android platform. At the same time, the version of react native is very diverse, and the version of react native of this software is 0.50.1. In the software testing part, this paper has carried out functional test on each main module and non functional test on the whole.
Key words ：handicraft
React Native
Java Script
CSS 目录
第一章
绪论
................................ ..............
5 5
1.1. 选题背景和意义
................................ ....
5 5
1.2. 国内外研究概括和发展趋势
..........................
6 6
1.2.1 国内研究概括和发展趋势 ....................... 6 1.2.2 国外研究概括和发展趋势 ....................... 6
1.3. 论文的主要工作
................................ ....
7 7
1.4. 主要技术简介
................................ ......
7 7
3 1.4.1 Android 平台 ................................. 7 1.4.2 React Native 框架 ............................ 7 1.4.3 Java Script 技术 ............................. 8 1.4.4 CSS 技术 ..................................... 8 1.4.5 Node ......................................... 5
5 1.5 本章小结
................................ ..........
9 9
第二章
系统分析
................................ ..........
9 9
2.1 系统功能分析
................................ ......
9 9
2.1.1 登录功能 ..................................... 9 2.1.2 首页 ......................................... 9 2.1.3 抽屉页 ...................................... 10 2.1.4 查看手工艺简介页面 .......................... 10 2.1.5 查看手工艺教程页面 .......................... 10 2.1.6 我的作品 ..................................... 7
2.2 系统性能分析
................................ .....
10
2.2.1 准确性和及时性 .............................. 10 2.2.2 易用性 ...................................... 10 2.2.3 安全性 ...................................... 11
2.3 可行性分析
................................ .......
11
2.3.1 技术可行性 .................................. 11 2.3.2 操作可行性 .................................. 11 2.3.3 设计可行性 .................................. 11
4 2.3.4 经济可行性 .................................. 12
2.4 本章小结
................................ .........
12
第三章
系统设计
................................ .........
12
3.1 系统层次模块
................................ .....
12
3.2 系统流程
................................ .........
12
3.3 数据流程图
................................ .......
13
3.4 功能设计模块
................................ .....
14
3.4.1 用户登录 .................................... 14 3.4.2 首页 ........................................ 16 3.4.3 抽屉页 ...................................... 18 3.4.4 手工艺简介页面 .............................. 19 3.4.5 手工艺教程页面 .............................. 21 3.4.6 我的作品 .................................... 21
3.5 本章小结
................................ .........
24
第四章
系统测试
................................ .........
25
4.1 测试环境
................................ .........
25
4.2 功能测试
................................ .........
25
4.3 非功能性测试
................................ .....
26
4.4 用户界面测试
................................ .....
27
4.5 测试总结
................................ .........
28
第五章
总结与展望
................................ .......
2 26 6
5.1 研究成果
................................ .........
28
5 5.2 未来方向
................................ .........
28
参考文献
................................ ................
29
致谢
................................ .....
错误!未定义书签。
第一章
绪论
1.1. 选题背景和意义
随着科学与技术地不断发展，许多的手工艺品也可以在机器上进行大量地生产，这造成了物质的泛滥。单一、固定的产品已经不能满足人们的需要，人们开始追求个性的、独一无二的手工艺品。不得不说，手工艺品在这个时代背景下出现了很大的机遇。
传统的工匠不仅可以创造自己的平台特色，使用的工具还可以通过发表纪录片、文字、媒体。以前制作手工的艺术人不仅能够，把目标注意在很多流行的简短小视频或者直播(把百度百科的放上来直播的意思)，通过这样的方式就能把，整个的制作流程呈现给大家。增强平台销售商品的信心，提高员工的曝光度，打造品牌。此外，传统工艺也可以通过融资等打开与知名品牌的合作渠道。例如，在东京和 Skytrey，Starbox 和日本传统的玻璃技术 Edo Cabos，推出了一套限量咖啡饮料，吸引了消费者的注意。咖啡和伟大的技术的结合为每个发行方都有好处。
随着人们生活水平的不停进步，在满足了基本的物质生活需求后，需要一些额外的手艺或来满足自己的精神需求。一直以来，手工艺采用的都是手口相传的形式来进行学习或传授他人。但就目前的快节奏生活来看，人们要想快速地找到有经验的手工艺人来进行学习是比较困难的。同时也随着有经验的手工艺人逐渐高龄化，仅仅凭着口头相传无法增加手工艺传播的范围。也无法和现代人的生活习惯进行匹配。故借助这个平台，为这些想要进行手工艺学习的人们提供了一个学习的环境。
目前，互联网的发展不仅给传统手工艺者的工作带来了新的发展，而且也让我们的信息流通变得越来越容易，如静乐剪纸、光影纸雕等。来自中国西安的静
6 乐剪纸，和来自于美国的光影纸雕，但是它们两者使用的制作材料是几乎一模一样的，制作方法也差不多一样。互联网信息链接让他们知道自己的位置。在静乐剪纸中运用光影雕刻，可以解决静乐剪纸受个体文化的影响和不太复杂的创意，也可以提高精致度。很明显，传统技术的融合带来了新的活力，互联网提供了一个很好的机会。
1.2. 国内外研究概括和发展趋势
1.2.1 国内研究概括和发展趋势
现如今，人们在网络上进行学习已经是大势所趋，这都是因为互联网在近几年的不断发展壮大。我们也非常感谢互联网能够给予这个平台，让人们足不出户即可在家进行学习。互联网可以增加学习视频的传播性，从而让更多的人可以进行学习。许多传统的工匠利用网络信息的特性来建立一个个的专业的网站和APP 学习平台。我们为了提高用户的兴趣以及更清晰地描述手工艺品的制作过程，同时也降低用户在学习过程中的难度可以在平台设计中可以添加到 3D、VR等元素。我们为了让许多传统手工艺品的继承人与家庭继承人甚至男女继承人之间的差距可以缩小，从而为传统手工艺品的未来发展吸引新的工人，而使用了这种方法。现在，即使有各种各样的应用程序在建立中也遇到了许多困难。
首先，传统工艺的创新太低、太慢，无法进一步激发用户的兴趣。如今，在信息爆炸的碎片化时代，没有持续创新的应用很快就会被大众忘记，因为对于用户来说这种新鲜感相对于高科技只是暂时的。如何维护好用户之间的关系才是一个大问题。其次，传统的地方工艺需要花费大量的时间和经历许多复杂的过程，有时有几十个复杂的过程只是为了准备任务。第三，许多与传统工艺和应用程序制造过程相关的常识必须由一个由导师和工匠组成的特殊团队进行解释和传授。如何招聘专业人才，制作出质量有保障的教学视频，无疑是一个大问题。
1.2.2 国外研究概括和发展趋势 国外的市场竞争不如中国激烈。整个市场的发展潜力仍然巨大，潜在用户数量也很大。一些外国用户使用应用程序的可能性仍然相对较高。相互传播，广泛实施，将增加用户的关注度。国外应用程序的开发有自己的专门团队，专利名称也远多于中国。开发的应用程序功能强大，符合质量标准，用户体验自然就会良
7 好。
国外据我目前找到的资料显示，暂时还没发现有比较系统的手工艺学习APP，但国外的手工学习网站挺齐全的。但国外的应用程序界面设计值得我们去借鉴和学习。不过随着时间的推进，在文明的推动下，国外工艺设计应用程序越来越多，大多以用户为中心，从用户的角度出发，按照人机技术的原理，交互设计也符合用户的应用习惯，具有很强的普及性；在视觉设计方面，色彩的使用相对平和，这在一定程度上防止了用户在长时间使用这款应用时感到紧张。
1.3. 论文的主要工作
该项目应用中的登录功能、查看教程、查看手工艺简介等功能的实现与设计都是由我独立完成的，并且我为了能够顺利地实现这些功能，我做了以下几点工作：
（1）学习与这些功能模块相关的技术，查阅相关技术资料，并且和指导老师进行讨论，选择其中最适合的技术和开发框架。
（2）依照产品需要来对系统功用需求来实行剖析，对非功能需求进行设计，这样就能让软件愈加地契合用户的应用习性。
（3）独立完成上面所列出来的功能，并对实现代码过程中遇到的问题列出解决方案，实现性能后再对模块实行测试。
（4）在开发完成后，完成系统的功能性测试与非功能性测试。
1.4. 主要技术简介
本节主要介绍了软件实现时所用到的技术和平台。该项目尽管应用的是跨平台的移动应用开发框架，但具体实现时因为自身硬件的原因只有在 Android 平台上面测试过。所用的编程语言为 Java Script,还有层叠样式表。
1.4.1 Android 平台 Google 公司开发的移动操作系统 Android。Android 是基于 Linux 内核以及其他开源软件。这款移动操作系统专为触摸屏移动设备设计比如智能手机和平板电脑等。此外，谷歌还进一步开发了用于电视机、汽车和手表的 Android 电视、Android 汽车和 wear 操作系统，它们每一款都有独特的用户界面。
1.4.2 React Native 框架
8 React Native，是 Facebook 开发的一个多平台的移动应用开发框架，也被称之为 RN。JS 框架上的 JS 源代码，JS 框架自诞生以来一直是支持 IOS 和 Android一个开源的平台。React Native 开发移动应用程序使用的是 JavaScript 语言、JS、HTML、CSS，所以，那些熟悉 web 前端开发的人可以进入移动应用领域，没有太多需要学习的东西。而把 React Native 合并起来的是两个方式，一个是采用 JS桥接，另一个是加 Native 桥接。最终产品是一个从应用触感上很难与用Objective-C 或 Java 编写的应用分辨开来的的真正的移动应用。React Native 与原来的应用程序所使用的底层 UI 组件几乎相同。你所要做的就是用 JavaScript 和React 的形式对这...