Violet音乐社区 - 总结报告
目录
一、项目概述
1.1 项目背景
音乐是一门艺术,是由有组织的乐音来表达人们情感、反映人类现实生活情感的艺术。现代科技的发展使得人们可以利用网络随时随地的享受音乐,然而在当今互联网却很少有一个以音乐为媒介的社交平台。本开发团队想以“音乐+社交”的形式,开发一款集听歌、交友和讨论为一体的网上社区——“Violet”音乐社区。Violet多指紫罗兰,也可形容羞怯的人,本团队旨在通过此平台增强人们对音乐的交流,同时拉近人与人之间的距离。
1.2 编写目的
此文档为本人作为该项目成员的个人工作总结,用于记录在开发过程中的经验、感悟以及对该课程的意见和建议,望今后的其他项目能以此为鉴。
1.3 项目文档
- Violet音乐社区需求分析说明书:https://www.cnblogs.com/Keadin/p/11791088.html
- Violet音乐社区设计文档:http://www.cnblogs.com/Keadin/p/11885656.html
- Violet音乐社区API接口文档:https://www.showdoc.cc/589304476235742
- Violet音乐社区界面原型手册:https://www.cnblogs.com/Keadin/p/11974412.html
1.4 项目源码
- Violet音乐社区前端源码:https://github.com/KeadinZhou/se-violet-web
- Violet音乐社区后端源码:https://github.com/shysimon/violet
1.5 项目成果
- Violet音乐社区界面原型demo:http://kealine.top/SE/demo/
- Violet音乐社区完成版:http://kealine.top/violet/
二、个人工作总结
1.1 工作概览
1.1.1 作为项目组组长
作为项目组的组长,我在本次项目中起到一个推动的作用。包括定期组织项目组例会、组织项目组进度自查、组员间任务协调等。
1.1.2 作为项目组成员
作为项目组的成员,我在本次项目中主要负责前端的框架性工作。主要包括前端技术路线的选择、前端界面风格确立、界面原型绘制、前端框架代码的编码等。
1.2 工作详述
1.2.1 选择前端技术路线
为了选择一条适合本项目的技术路线,我调研了当前技术环境中比较热门的一些技术路线,最终确定了前端以Vue.js+ElementUI+axios为主线的技术路线。
1.2.2 确立前端界面风格
前端界面是用户直接进行人机交互的媒介,一个制作精美的界面会大大提升用户的体验。而其中最重要的一点,就是界面整体风格的统一。为了寻找一种契合本项目的界面,我调研了市面上绝大多数的音乐/社交网站,结合本项目“Violet音乐社区”、“陌生人社交”和“年轻人为主”的特点,选择了一种一种扁平化的设计,采用极简主义,更加符合年轻人的审美。界面主体颜色也采用了Violet的另一层意思“罗兰紫”。相应的,系统动效上,我也使用了比较活泼轻快的方案。从项目最后的实现效果来看,这一整体界面风格,在项目中起到很好的作用,能很大程度上提升用户的体验,几位用户代表都觉得这是项目的点睛之笔。
1.2.3 绘制界面原型
由于前端技术路线和前端界面风格确立的很早也很顺利,我早早地开始了界面原型的绘制。由于可以借着界面原型的机会进行技术路线的熟悉,我并没有选择墨刀等界面原型绘制工具,而是直接使用代码进行界面原型的构建。并在需求确立阶段(前两周)就根据已经成型的需求文档绘制出了第一版的界面原型,在进度上超过其他组一大截。而第一版界面原型的代码,也在后面的项目推进中起到了很大的参考价值。
1.2.4 编写前端框架代码
在绘制完界面原型之后,为了简化后期前端的工作量,统一前端代码的结构,减少前端代码的冗余,方便前端项目的后期维护,我完成了前端框架代码的编写。即,将前端界面中使用的组件模块化,封装成一些可高度复用同时具有一定拓展性的组件。比方说“图片下方一些文字”这样一个模块,我封装了“img-name-box”组件,通过相关的参数更改显示的样式,在专辑/圈子/歌单等模块都用不同的应用。我总共写了11个框架组件,在实际项目中都起到了非常好的作用。
1.2.5 实现播放器功能
播放器功能是我们“音乐”部分的核心功能,在实现难度上也较大。我采用了侧边隐藏式的全局播放器,解决了在用户切换界面时播放停止等问题,保证在页面跳转中也能保持歌曲的正常播放,提高用户体验。正常状态下,播放器将会收拢在页面的左下角,不影响用户对于圈子、帖子等内容的正常浏览。需要对歌曲进行操作时(切歌、调整音量、设置播放模式等),可以将其展开。
1.2.6 履行组长职责
作为项目组的组长,定期组织项目组例会,组织项目组进度自查,保证项目进度有序、顺利推进。协调组员间的任务分配,协调不同负责模块间交流。
三、项目总结
3.1 项目立意
在立项初期的头脑风暴中,项目组一致同意确认了音乐网站这一项目大方向。但音乐网站实在是太多了,相信这次软工的班级中也会有很多项目组选择这一选题,我们得做出一个和他们不一样的音乐网站。于是我们提出了“音乐+社交”这样一个独特的模式,我们不仅仅是一个音乐网站,更是一个社交网站,是一个基于音乐分享的社区。我们选用了”Violet“作为我们社区的名字,”Violet“意为”羞怯的人“,代表我们想要给那些害羞内向的人一个以音乐为媒介的社交平台。”Violet“的另一层意思是”紫罗兰“,这也导致我们在网站选取了”罗蓝紫“作为设计主色。
3.2 技术路线
3.2.1 整体技术路线
项目整体采用了B/S架构,并采用前后端分离技术。
3.2.2 前端技术路线
Vue.js+ElementUI+axios
Vue.js相较于另一热门js框架React,有着更容易入门和代码高度结构化的特点,考虑到前端组内的其它成员并没有前端技术的相关背景,一个易入门和高度结构化的主框架,能减少相关的学习成本,使项目推进更快。
ElementUI相较于AntDesign-Vue和iView等UI库,与Vue.js的契合度更好,更符合Vue.js高度结构化代码的特点,风格也更适合本项目。
axios相较于”Fetch“等HTTP接口,拥有高兼容性的特点,能很好的兼容低版本的浏览器。
3.2.3 后端技术路线
Flask+MySQL
Flask相较于其它后端框架,拥有“微内核”的特点,更轻量级,更适合作为接口类型后端的框架。
3.3 实现情况
在项目结项之际,我们组开了个总结会议,复盘项目从立项之初到当前的完成情况。总体设计上,我们的设计覆盖了绝大多数的需求;具体实现上,我们也切实实现了设计中的大多数功能,小部分功能存在冗余和重复工作量的情况,由于时间有限的原因我们没有选择全盘实现。但总体设计中的绝大多数功能我们都进行了实现,核心功能全部得到了保留,达到了我们立项之初的基本目标,也实现了老师在开课之初强调的“小而精”的目标。
3.4 项目收获
在学习软工这门课之前,我也有相关的项目经历,但项目团队都在两人或者是自己一人的项目这样的小团队。参与在软工课上这样的六人大团队,是首次。经过这一学期的项目实践,我可以说是收获颇丰。这主要体现在多成员之间的协作分工以及相互之间的工作协调上面。特别是对于一个提出的方案,所有人需要对方案进行不停的讨论,不停的更新,不断的优化,达到一个大家都满意的状态。团队成员之间也需要不断磨合,这与一个人的项目一个人拍板都有着截然不同的体验。
四、课程建议
我觉得朱老师这套基于《构建之法》的教学模式是非常优秀的,确实同朱老师开学所说的“只有在实际的项目中,才能学到真正的软件工程”,经过一学期实践,我可以说是收获颇丰,不仅是在相关理论,相关技术,更在于团队之间协调编写项目的经验。
我觉得助教在整个项目过程中也给了我们项目组很大的帮助,在多次例会中都给了我们很中肯的建议,在一定程度上让我们少走了一些弯路。
建议的话,我觉得课程可以进一步削弱期末考试在考核中的比重,把项目过程的比重再加强一些。
Violet音乐社区 - 总结报告的更多相关文章
- Violet音乐社区 - 个人总结报告
一.项目概述 1.1 项目背景 音乐是一门艺术,是由有组织的乐音来表达人们情感.反映人类现实生活情感的艺术.现代科技的发展使得人们可以利用网络随时随地的享受音乐,然而在当今互联网却很少有一个以音乐为媒 ...
- Violet音乐社区需求分析说明书
目录 一.引言 1.1 编写目的 1.2 开发背景 1.3 开发工具 二.项目需求 2.1 角色定义 2.2 模块划分 2.3 功能概述 2.4 数据流图 三.前端页面 四.软件要求 4.1 性能要求 ...
- Violet音乐社区设计文档
目录 Violet音乐社区设计文档 一.引言 1.1 编写目的 1.2 开发背景 二.用例图设计 2.1游客实例设计 2.2 管理员实例设计 2.3 普通用户实例设计 三.类图设计 3.1 歌手类 3 ...
- Violet音乐社区界面原型手册
目录 Violet音乐社区界面原型手册 一.引言 1.0 项目前阶段相关文档 1.1 编写目的 1.2 开发背景 二.界面原型展示 2.0 界面设计说明 2.1 首页 2.2 歌单/专辑/单曲界面 2 ...
- 「分块系列」「洛谷P4168 [Violet]」蒲公英 解题报告
蒲公英 Description 我们把所有的蒲公英看成一个长度为\(n\)的序列(\(a_1,a_2,...a_n\)),其中\(a_i\)为一个正整数,表示第i棵蒲公英的种类的编号. 每次询问一个区 ...
- 网易云音乐APP分析
网易云音乐-感受音乐的力量 你选择的产品是? 网易云音乐 为什么选择该产品作为分析? 之前用的一直是QQ音乐,但是有一天一个朋友分享了一首网易云上的音乐(顺便分享一下歌名:Drop By Drop) ...
- 微服务开源生态报告 No.10
「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...
- AI音乐创作,让每一个人都成为音乐家
从录音带.MP3到专业的耳机.音箱,随着音乐消费方式的不断升级,音乐创作的专业"门槛"也在AI技术的加持下逐渐大众化,创作者的创新设计.创作频率也在持续增强,能降低创作门槛且智能化 ...
- 如何利用Social Listening从社会化媒体中“提炼”有价值的信息?
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 在本文中,笔者将会介绍大数据分析主要的处对象---社会化媒 ...
随机推荐
- [20190523]修改参数后一些细节注意2.txt
[20190523]修改参数后一些细节注意2.txt --//上午想模拟链接遇到的情况,链接http://blog.itpub.net/267265/viewspace-2645262/--//就是修 ...
- 海思屏幕HAL代码解析
显示屏幕(LCD)模块提供屏幕相关功能接口,调用者为上层应用模块(含 init.状态机.ui),上下文依赖关系,如图 3-7 所示. 系统框架为 linux+Huawei LiteOS 双系统架构,媒 ...
- Lnmp架构部署动态网站环境.2019-7-3-1.4
安装wiki开源产品 一.创建数据库 [root@Lnmp bbs]# mysql -uroot -p123456 mysql> create database wiki; #创建wiki数据库 ...
- Debian创建.desktop文件(Create .desktop file in Debian/Gnome)
在Debian系Linux中,用于标识应用的启动文件.desktop file是位于/usr/share/applications目录下的,Gnome会将这些文件在菜单中展示为启动图标,也可以固定在d ...
- CodeForces-1253B(贪心+模拟)
题意 https://vjudge.net/problem/CodeForces-1253B 把一个序列划成几段,使得每一段都是+x在-x前面,二者均要有. 问划成几段,每一段的大小是多少. 思路 用 ...
- 初学JavaScript正则表达式(八)
JavaScript正则贪婪模式与非贪婪模式 贪婪模式: 例: \d{3,6} 匹配数字3到6次(正则表达式默认为贪婪模式,即匹配最多次,失败即停) '12345678'.replace(/\d{3, ...
- JDOJ1178:铺地板II
JDOJ1178:铺地板II https://neooj.com/oldoj/problem.php?id=1178 题目描述 用1 x 1和2 x 2的磁砖不重叠地铺满N x 3的地板,共有多少种方 ...
- Ansible 如何只输出错误信息?
有时主机较多时,我们只想关注有问题的主机. Ansible callback 插件中有一个 actionable,官方描述为: actionable - shows only items that n ...
- Luogu P3577 [POI2014]TUR-Tourism
Luogu P3577 [POI2014]TUR-Tourism 题目链接 题目大意:给出一张\(n\)个点,\(m\)条边的无向图,保证任意两点之间没有点数超过\(10\)的简单路径.选择第\(i\ ...
- promise处理回调地狱
promise 异步调用 异步结果分析 定时任务 ajax 自定义事件函数 多次异步调用依赖分析(promise 应用场景) 多次异步调用结果顺序不确定问题 $.ajax({ url: 'http:l ...