个人工作分工
项目设计架构概述
从整体上,本项目采用前、后端分离的开发思路,分成UI组、前端组、后端组,相对独立地开发每个模块,从而实现快速安全迭代,实现敏捷开发。
从实现技术上,前端采用Uniapp+Vue多端开发,后端主要采用Django架构+MySQL数据库。
从管理模式上,本项目采用Mentor+成员机制,Mentor提前学习熟悉相关模块的特性和实现,然后指导对应小组成员实现快速入门,从而实现快速迭代开发。
1. UI设计组
Mentor:易率
组员:庾子睿,阿牛牛牛,齐帅恒,张艺霖,邵钰棠
无需代码设计UI界面,主要完成大致的页面分布和交互逻辑的设计。
- 使用工具:
Figma - 强调色(RGB):
107 207 209
235 206 115 - 设计原则:
简洁性、一致性、可用性 - 小组共享Figma项目
负责组员文档网页:https://www.notion.so/oucse/UI-121283711bc380278eb1d6c61cd7ed96
用户交互逻辑设计
第一次打开:
登录欢迎页->手机号注册页->主页面
发布拼车需求:
主页面->拼车页面(通过底部导航栏切换)->拼车需求填写页面(通过点击右上角加号)->拼车页面(发布成功后自动回弹)
直接加入其他人发布的拼车需求:
主页面->拼车页面(通过底部导航栏切换)->拼车详细信息(点击某一条)->确认加入拼车(点击页面上加入按钮)
联系拼车队长:
主页面->拼车页面(通过底部导航栏切换)->拼车详细信息(点击顶部悬浮当前拼车)->点击电话号码->拉起系统拨打功能
UI概览
2. 前端设计开发(至少3人)
Mentor:梁俊猛
组员:冯钰恒,易率,张艺霖,庾子睿
实现设计出来的UI界面,完成与后端api的交互
技术栈:
Uniapp+Vue,实现微信小程序及多端开发
技术路线:
安装node.js、Vue、Uniapp、HBuilder X、微信小程序开发环境:
1、node.js:
https://nodejs.org/zh-cn
2、Vue的安装:
https://cn.vuejs.org/guide/introduction.html
3、uniapp、HBuilder X:
https://uniapp.dcloud.net.cn/
4、微信小程序安装
https://mp.weixin.qq.com/
安装git,并学习常用git指令
具体
整个APP可分割成多个页面,对每个页面进行设计开发。
有许多常用的设计案例,如登录模块、用户模块,须多进行借鉴,避免重复造轮子。
先将仓库clone下来,里面的UNIAPP有一个现成的比较好的打车前端界面,可供参考。
负责组员仓库:https://gitee.com/fyhfree/letsgo
3. 后端设计开发(至少3人)
Mentor:冯钰恒
组员:梁俊猛
实现后端api的设计,完成api接口编写、测试,编写api交互文档
技术栈: Python Django、MySQL数据库
实现模块:登录模块、信用机制设计、导航路线设计
技术路线:
- 安装Python Django
- 熟悉宝塔网站
- 学习MySQL常用指令
负责组员仓库:https://gitee.com/fyhfree/letsgo
本周个人工作
图标及UI界面设计组
已完成
- 使用墨刀和Figma工具完成了初步UI框架的设计,包括页面大致分布和主要交互逻辑。
- 从墨刀的常用模板中选择了合适的界面模板,并进行修改式设计,创建了初步的视觉原型。
- 在Notion平台上整理和分享了设计过程中的文档和设计材料,确保团队的沟通顺畅。
计划完成
- 深入优化现有的UI设计,增加细节元素以提升用户体验。
- 进行可用性测试,收集反馈并进行调整。
- 准备最终的UI设计文档,供前端开发团队参考。
易率
总体设计,设计开始页面与总体页面架构。为其他同学提供指导。
庾子睿
阿牛牛牛
齐帅恒
张艺霖
前端设计开发组
已完成
- 完成开发环境的搭建,包括Node.js、Vue、Uniapp、HBuilder X以及微信小程序开发环境。
- 学习并掌握常用的Git指令,为后续的协作开发奠定基础。
- 克隆了现有的Uniapp打车前端界面项目,并研究其代码结构和实现细节。
计划完成
- 基于UI设计实现应用的关键页面,并与后端API进行初步集成。
- 使用Uniapp+Vue技术栈,实现微信小程序及其他端的跨平台开发。
- 借鉴现有的设计案例,如登录模块和用户模块,尽量复用现有方案以提高开发效率。
梁俊猛
完成了两个部分的前端代码设计,实现了很多功能。
后端设计开发组
已完成
冯钰恒
- 完成后端开发环境的搭建,包括Python Django和MySQL数据库。
- 学习和熟悉了Django的基本使用和MySQL的常用指令。
- 初步设计了后端API的接口和数据模型,计划实现登录模块、信用机制和导航路线设计。
Django端口设计
信用评级机制
计划完成
- 编写并测试关键API接口,确保与前端的顺畅交互。
- 制定详细的API文档,方便前端开发人员理解和使用。
- 对现有的信用机制和导航模块进行详细设计和实现,并进行初步的功能测试。
燃尽图
仓库演化图
例会照片
庾子睿 https://gitee.com/fyhfree/letsgo/issues/IB0QPA
https://gitee.com/fyhfree/letsgo/issues/IB0RO8
https://gitee.com/fyhfree/letsgo/issues/IB0RNV
冯钰恒 易率 https://gitee.com/fyhfree/letsgo/issues/IB0QU6
https://gitee.com/fyhfree/letsgo/issues/IB0RIZ
https://gitee.com/fyhfree/letsgo/issues/IB0RIS
https://gitee.com/fyhfree/letsgo/issues/IB0RIH
https://gitee.com/fyhfree/letsgo/issues/IB0RHZ
梁俊猛 https://gitee.com/fyhfree/letsgo/issues/IB0QY6
阿牛牛牛 https://gitee.com/fyhfree/letsgo/issues/IB0QZ2
齐帅恒 https://gitee.com/fyhfree/letsgo/issues/IB0RKQ
张艺霖 https://gitee.com/fyhfree/letsgo/issues/IB0QZQ
服务器后端部署
【个人总结】
冯钰恒:
本小组总结:本阶段本小组基本完成了所有的UI设计部分,整体转向前端的精进开发学习,从而优化前端视觉效果,向理想UI设计靠拢。
这一阶段我实现了多个前端局部组件,包括拼车展示组件、注册组件等。优化了视觉效果。搭建了后端平台,完成了数据库的构建。利用axio函数库完成了前端与后端的连接。为小组其他成员一同学习了git的优化使用,实现了协同合作。
下一阶段,我们小组主要进一步分工合作,完成前端的视觉设计实现,从而冲刺完成较好的小程序效果。各页面分工如下所示:
代码提交记录:
易率:
统筹了UI的总体设计,指导了小组成员完成UI工作,完成了登录页面、注册页面的UI设计。
目前,UI界面的设计已基本完成,但逻辑交互较为简单,尚未实现更复杂的功能。接下来的工作将使用Vue框架编写前端UI代码,并在此基础上增加更多交互功能,例如乘车人数和乘车时间的选择等。
本周计划完成UI的前端代码开发,并完善拼车历史记录展示功能,支持分页加载及界面下拉刷新、上滑加载更多、拨打电话等交互效果。随后,将与后端开发人员协作,完成前后端的数据交互,完善后端API,包括用户信息管理和拼车需求管理,确保前后端数据同步,并支持用户发布与响应拼车需求。
庾子睿:
这一阶段我做的是拼车平台的Figma部分UI设计和前端设计开发工作。UI设计方面,设计了一个直观的个人信息展示界面,允许用户查看和编辑基本信息,如头像、用户名等。用户点击头像板块时,会弹出提示框,同时其他部分会变为灰暗以突出效果。其次设计了仿照微信界面的弹出框,让用户选择拍照或从相册中选择照片来修改头像。在名字和性别板块,用户点击后会弹出相应的修改界面,其中性别图标因为Figma中找不到对应图标所以我是从flaticon网站转换而来的svg格式。“我的旅程”界面,展示了正在进行和已完成的订单记录,其中已完成的订单以灰色显示,进行中的订单则用彩色图标表示,绿色pin icon代表起点,蓝色pin icon代表终点。用户可以通过点击trash icon来删除已完成的订单,点击确认后该记录将从后端数据库中删除;点击取消则返回“我的旅程”界面。
本周准备完成UI的前端代码实现,完善拼车历史记录展示功能,支持分页加载和一些界面的下拉刷新、上滑加载更多、电话拨打等交互功能。之后会与后端开发人员合作完成前后端交互,完善后端API,包括用户信息管理和拼车需求管理,确保前端与后端数据同步,并支持用户发布和响应拼车需求。
齐帅恒:
在之前的阶段已经大致完成了新建拼车信息填写的ui页面,其中包括起点终点的输入,出发到达时间和拼车人数的选择,并设计了其中的逻辑交互。
目前ui界面设计完成了基本工作,但是逻辑交互较为简单,无法实现更多更复杂的功能,在后续工作中,需要使用vue工具实现前端ui界面的代码,并且在代码中实现增加更多的交互功能,包括乘车人数和乘车时间的选择等功能。
本周继续完善拼车app中的新建拼车信息填写的页面,改善了字体等页面细节,增加了一些页面的交互,增加了搜索按钮,在完成信息的的填写的同时新建一个拼车任务,用于搜索起点和目的地相同的的其他用户的拼车任务。
梁俊猛:
在之前阶段已设计了登录注册选择页面、登录页面以及首页和个人页面的大体设计,还有个人信息页面、头像点击功能的设计,此次大体设计了首页添加的模块点击后的页面,便于之后添加聊天和加入拼车等功能:
本周将继续完善聊天页面的美观程度以及按钮具体功能的实现,同时也会试着处理其他页面关于前后端数据交互的相关代码,比如登录页面的数据交互,之前试着用云函数实现成功,同理之后使用axio实现同样的功能。
代码提交记录:
张艺霖:
在之前阶段负责的是拼车平台的Figma部分UI设计和前端设计开发工作,已经完成的工作有设置,帮助和反馈界面的UI设计,其中包括更新检查、消息通知、意见反馈和使用帮助。
本周继续完善UI界面的细节,改进位置的选取和图标的美观程度,以及与小组统一了字体的选取。现在转入界面的前端实现。下一步将继续帮助等界面的前端实现,将UI的设计效果呈现出来,并实现页面的跳转功能等。
阿牛牛牛:
在之前阶段已完成负责的拼车平台的Figma部分UI设计和前端设计开发工作任务。设计了已发起的拼车信息详情页界面,使用户直观看到别人发起的或者自己发起的拼车信息,如起点、终点,已拼人数等。其次设计了已加入的拼车详情页,让用户直观感受到已加入拼单。在修改电话板块,用户点击后会弹出相应的修改界面,输入新号码,同行绿色保存图标即会亮起,点击保存即完成修改,则返回个人信息界面。
本周将继续完成UI的前端代码实现,同时完善此前已完成的UI设计。具体将实现修改电话号码信息界面等的前端代码部分。
【会议交流文档】
仓库地址:letsgo: 大学城拼车平台,实现轻松高效拼车!
【会议交流文档】