软件工程第二次结对作业

Posted on 2024-10-10 23:58  六一！！  阅读(12)  评论(0)  编辑  收藏  举报
项目 内容
课程信息 软件工程
作业要求位置 2024秋软件工程结对作业
作业目标 站在程序员的角度，给出这个产品的核心模块的编码的原型
学号 102202112、102202145
GitHub项目地址1 liuying012
GitHub项目地址2 xiehan045

软件工程第二次结对作业之程序实现

一、CoLab平台具体分工

谢含同学

前端任务

  1. 用户界面设计：

    • 使用React/Vue.js创建用户友好的界面。
    • 设计响应式布局，确保在不同设备上的兼容性。

  2. 项目管理模块：

    • 实现项目创建、查看和编辑功能。
    • 通过API获取项目信息并渲染到页面。

  3. 状态管理：

    • 使用Redux或Vuex管理应用状态，确保数据的一致性。

后端任务

  1. API设计与实现：

    • 使用Node.js和Express构建RESTful API。
    • 实现用户注册和登录的后端逻辑。

  2. 数据库交互：

    • 设计数据库模型，与MongoDB/PostgreSQL进行数据交互。
    • 实现数据的CRUD操作（创建、读取、更新、删除）。

刘莹同学

前端任务

  1. 社区功能模块：

    • 实现讨论区的界面，支持帖子发布与回复。
    • 确保前端与后端API的有效对接。

  2. 用户管理模块：

    • 创建用户个人资料页面，允许用户更新信息。
    • 设计角色选择和权限管理的界面。

后端任务

  1. 推荐系统实现：

    • 开发推荐算法，根据用户行为推送项目。
    • 处理相关API请求，返回推荐结果。

  2. 安全性与认证：

    • 实现JWT认证机制，确保用户安全登录。
    • 管理用户权限，根据角色限制特定操作。

总结

通过这种交叉分工，我们能够在前后端多个领域进行协作，确保CoLab平台的各项功能顺利实现。

二、PSP表格

个人软件过程（PSP）跟踪表

阶段 活动 估计时间（小时） 实际时间（小时）
计划阶段 需求分析 2 1
设计 2 3
风险评估 2 1
计划阶段总计 6 5
前端开发阶段 首页 1 2.5
社区 6 8
团队搭建 6 8
个人 6 3
编码阶段总计 19 21.5
后端开发阶段 用户登录系统 8 2
项目发布系统 10 8
交流聊天功能 12 8
用户个人资料管理 6 8
编码阶段总计 36 26
单元测试 5 6
用户验收测试 3 3
测试阶段总计 8 9
开发后阶段 文档编写 4 3
代码审查 3 6
开发后阶段总计 7 9
项目总计 76 70.5

三、CoLab平台解题思路描述与设计实现说明

（一）问题分析

CoLab平台旨在解决以下几个核心问题：

  1. 跨专业合作的难度：学生在寻找合作伙伴时往往受限于个人网络和专业背景。
  2. 项目管理流程复杂：学生需要便捷的工具来管理项目进度和资源。
  3. 缺乏有效的导师支持：学生在项目中常常缺乏足够的指导和反馈。

为此，CoLab平台提供了一个集成的在线协作环境，以促进学生间的交流与合作。

（二）模块划分

CoLab平台可以划分为以下几个主要模块：

  1. 用户管理模块：

    • 用户注册与登录
    • 个人资料管理

  2. 项目管理模块：

    • 项目发起与邀请功能
    • 项目探索与推荐系统
    • 项目详情展示

  3. 社区功能模块：

    • 导师大赏展示
    • 技能桥梁连接
    • 经验分享与讨论区

  4. 信息与反馈模块：

    • 消息中心
    • 用户个人项目管理

（三）用户角色逻辑

  • 学生角色：

    • 注册并登录平台，选择作为学生角色。
    • 可以浏览导师信息、发起项目、加入已有项目、参与社区讨论。

  • 导师角色：

    • 注册并登录平台，选择作为导师角色。
    • 提供指导、参与项目、接受学生的邀请并反馈。

（四）数据流图

  1. 用户界面：

    • 用户通过小程序界面与系统交互，进行发起项目、查看项目、发送消息等操作。

  2. 微信用户认证：

    • 处理用户的登录和注册流程，使用微信提供的认证服务。

  3. 个人资料管理：

    • 允许用户编辑和更新他们的个人信息，如头像、联系方式、技能等。

  4. 项目管理：

    • 负责处理项目的创建、查看详情、管理项目成员等操作。

  5. 消息系统：

    • 处理用户之间的消息发送和接收，支持实时通讯。

  6. 社区互动：

    • 提供导师展示和技能匹配功能，允许用户浏览导师信息和寻找合作伙伴。

  7. 数据库：

    • 存储所有重要的数据，包括用户信息、项目数据、消息记录等。

  8. 云函数：

    • 执行后端逻辑，如数据处理和业务规则的实施。

数据在数据库和云函数之间流动，以实现数据的持久化和业务逻辑的处理。

（五）技术实现

  1. 前端开发：

    • 使用React或Vue.js构建用户界面，实现响应式设计，确保多种设备上的良好体验。
    • 使用状态管理库（如Redux或Vuex）来管理用户状态和项目数据。

  2. 后端开发：

    • 使用Node.js和Express构建API，处理用户请求和数据交互。
    • 使用MongoDB或PostgreSQL作为数据库存储用户信息、项目数据和社区讨论内容。

  3. 项目管理功能：

    • 实现项目创建、编辑、删除和邀请功能。
    • 通过RESTful API实现前后端的数据交互。

  4. 社区功能：

    • 实现实时聊天功能（可使用Socket.io）以支持技能桥梁的私聊。
    • 设计讨论区模块，允许用户分享经验与反馈。

总结

CoLab平台的设计旨在通过高效的模块化结构和清晰的用户角色逻辑，提供一个便捷的跨专业合作环境。利用现代前端和后端技术，实现一个易于使用、安全可靠的在线协作工具，最终提高学生的综合能力和项目成功率。

四、重要的有价值的代码片段及解释

（一）聊天讨论页面逻辑

代码如下：

点击查看代码 
//加载并监听消息
 onLoad() {
      this.loadMessages(); // 加载历史消息
      this.watchMessages(); // 监听消息更新
  },

 // 加载历史消息
loadMessages() {
  const db = wx.cloud.database();
  db.collection('messages')
      .where({
          // 使用数组来表示 or 条件
          receiver: this.data.username,
          sender: this.data.username
      })
      .orderBy('timestamp', 'asc')
      .get().then(res => {
          this.setData({
              messages: res.data
          });
      }).catch(err => {
          console.error('查询失败', err);
      });
},

  // 监听消息更新
  watchMessages() {
      const db = wx.cloud.database();
      db.collection('messages').where({
          receiver: this.data.username
      }).watch({
          onChange: snapshot => {
              console.log('新消息到达', snapshot);
              this.loadMessages(); // 加载新消息
          },
          onError: err => {
              console.error('监听失败', err);
          }
      });
  },

  // 处理输入
  handleInput: function (e) {
      this.setData({
          message: e.detail.value
      });
  },

  sendMessage: function () {
    if (this.data.message.trim() !== '') {
        const newMessage = {
            sender: this.data.username,
            receiver: this.data.receiver,
            text: this.data.message,
            timestamp: new Date(),
        };

        wx.cloud.callFunction({
            name: 'sendMessage',
            data: newMessage,
            success: res => {
                console.log('消息发送成功');
                this.setData({
                    messages: [...this.data.messages, newMessage],
                    message: '' // 清空输入框
                });
                this.updateChatUI();
            },
            fail: err => {
                console.error('消息发送失败', err);
            }
        });
    } else {
        console.log("输入内容为空，无法发送");
    }
},

// 更新聊天界面的函数
updateChatUI: function() {
    // 这里可以添加滚动到最新消息的逻辑，例如：
    const chatContent = wx.createSelectorQuery().select('.chat-content');
    chatContent.boundingClientRect();
    chatContent.exec((res) => {
        const chatContentNode = res[0];
        if (chatContentNode) {
            wx.pageScrollTo({
                scrollTop: chatContentNode.bottom,
                duration: 300
            });
        }
    });
}

解释：

加载历史消息：通过 loadMessages 方法从数据库中获取历史消息，并展示在页面上。
监听消息更新：watchMessages 方法设置监听器，一旦有新消息，就会触发并重新加载消息列表。
发送消息：用户输入消息后，sendMessage 方法通过云函数发送消息，并更新聊天界面。
更新聊天界面：updateChatUI 方法确保新消息显示在聊天内容的底部。

（二）发送消息数据库

代码如下：

点击查看代码 
// 云函数 sendMessage
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV // 使用当前云环境
})

exports.main = async (event, context) => {
  const { sender, receiver, text, timestamp } = event;
  const db = cloud.database();

  await db.collection('messages').add({
      data: {
          sender,
          receiver,
          text,
          timestamp,
          avatar: event.avatar // 可以包含发送者的头像
      }
  });

  return {
      success: true,
  };
};

图片展示：

image

解释：

1.初始化云环境：使用 cloud.init 方法初始化云开发环境。
2.接收消息数据：通过 event 参数接收消息发送者、接收者、内容、时间戳和头像等信息。
3.存储消息：将接收到的消息数据添加到数据库的 messages 集合中。
4.返回成功结果：操作完成后返回一个表示成功的响应。

五、附加特点设计与展示

（一）导航栏设计

好处：

  1. 用户友好性：导航栏为用户提供了一个直观的界面，方便用户快速跳转到不同的功能区域或页面。
  2. 提高效率：通过清晰的导航结构，用户可以迅速找到所需信息或功能，减少寻找时间。
  3. 信息组织：有助于对平台内容或功能进行逻辑分类，使信息结构化。

实现思路：

  1. 设计简洁明了：确保导航栏设计简洁，避免过多复杂元素干扰用户。
  2. 响应式设计：导航栏应适应不同屏幕尺寸，保证在移动设备和桌面设备上均有良好的显示效果。
  3. 逻辑分类：将功能或内容进行逻辑分组，使用清晰的标签和图标来表示。
  4. 当前页面高亮：在导航栏中高亮显示用户当前所在页面，帮助用户了解自己的位置。

部分代码：

点击查看代码 
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/community/community",
        "text": "社区"
      },
      {
        "pagePath": "pages/team/index",
        "text": "团队搭建"
      },
      {
        "pagePath": "pages/self/self",
        "text": "个人"
      }
    ],
    "color": "#999",
    "selectedColor": "#333",
    "backgroundColor": "#fff",
    "borderStyle": "black"
  },
    "cloud": true,
  
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    }
}

图片展示：

（二）弹窗设计

好处：

  1. 引导用户：弹窗可以用来引导用户完成特定操作，如登录、发布成功等。
  2. 减少干扰：在不影响用户当前操作的前提下，弹窗可以提供额外信息或功能。

实现思路：

  1. 触发时机：确定合适的触发时机，如页面加载完成、用户完成特定操作后等。
  2. 简洁内容：弹窗内容应简洁明了，避免过多文字或复杂操作。
  3. 明确目的：确保弹窗的目的清晰，用户能快速理解弹窗的意图。
  4. 响应式设计：确保弹窗在不同设备上均有良好的显示和操作体验。

部分代码：

点击查看代码 
<!-- 登录弹窗 -->
  <view wx:if="{{showLoginModal}}" class="modal">
    <view class="modal-content" style="height: 304rpx; display: block; box-sizing: border-box">
      <text>请输入用户名</text>
      <input style="height: 108rpx; display: block; box-sizing: border-box" type="text" placeholder="用户名" bindinput="onUserNameInput" />
      <button class="modal-button" bindtap="login" style="position: relative; left: 0rpx; top: -20rpx">登录</button>
    </view>
  </view>
点击查看代码 
 <!-- 发布成功弹窗 -->
  <view wx:if="{{showSuccessModal}}" class="modal" bindtap="tapModalToClose">
    <view class="modal-content">
      <text>发布成功！</text>
    </view>
  </view>

图片展示：

（三）通过相册上传头像

好处：

  1. 个性化体验：允许用户上传自己的头像，可以增强用户的个性化体验，让用户感觉更加亲切和专属。
  2. 提升用户参与度：上传头像的过程可以增加用户对小程序的参与度，从而提高用户粘性和活跃度。
  3. 数据丰富性：收集用户的头像信息可以丰富用户数据，有助于后续的个性化推荐和市场分析。

实现思路：

  1. 图片选择：提供一个界面让用户选择或拍摄图片。确保用户可以轻松地从相册中选择图片或使用相机拍摄新照片。
  2. 上传图片：用户确认后，将图片上传到服务器。
  3. 更新用户信息：将上传的头像链接更新到用户的个人资料中，并确保在小程序的各个部分正确显示新头像。

部分代码：

点击查看代码 
  // 上传头像
  uploadAvatar(filePath) {
    wx.uploadFile({
      url: 'https://gmall-prod.atguigu.cn/mall-api/fileUpload', // 上传接口的URL
      filePath: filePath,
      name: 'file',
      header: {
        'Content-Type': 'multipart/form-data', // 设置请求的Content-Type
        'token': wx.getStorageSync('token') // 假设您有token需要传递给服务器
      },
      success: (res) => {
        const uploadRes = JSON.parse(res.data);
        if (uploadRes.success) { // 假设服务器返回的数据中包含success字段表示上传成功
          this.setData({
            'userInfo.headimgurl': uploadRes.data.url // 更新用户信息中的头像路径
          });
          this.updateUserInfo(); // 更新用户信息
        } else {
          wx.showToast({
            title: '头像上传失败，请稍后再试',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '头像上传失败，请稍后再试',
          icon: 'none'
        });
      }
    });
  },

图片展示：

六、成果展示

1、用户登录

2、用户搜索

3、项目详情

4、导师大赏及导师详情

5、技能桥梁及聊天讨论

6、团队搭建（发起项目及协作邀请）

7、个人资料

七、目录说明及使用说明

(1)目录说明

点击查看代码 
COLAB/
│
├── cloudfunctions/          # 云函数目录
│  
├── miniprogram/             # 小程序前端代码目录
│   ├── components/          # 组件目录
│   ├── images/              # 图片资源
│   ├── node_modules/        # 项目依赖目录
│   ├── pages/               # 各个页面的代码
│   │   ├── community/       # 社区
│   │   ├── community2/      # 技能桥梁
│   │   ├── discussion/      # 发起聊天
│   │   ├── gerenziliao/     # 个人资料
│   │   ├── home/            # 首页
│   │   ├── jinengshu/       # 技能树
│   │   ├── projectdetails/  # 项目详情
│   │   ├── team/            # 团队搭建
│   │   ├── teams/           # 发起项目、项目分享、协作邀请
│   │   ├── tutor/           # 导师详情
│   │   ├── wodexiangmu/     # 我的项目
│   │   └── xiaoxi/          # 我的消息中心
|   ├──  test/               # JEST测试文件
│   ├── app.js               # 小程序入口文件
│   ├── app.json             # 小程序配置文件
│   └── app.wxss             # 小程序全局样式文件
│
└── project.config.json      # 小程序项目配置文件
└── README.md                # 项目说明文件

(2)使用说明

1. 环境准备

  • 安装微信开发者工具：下载链接
  • 注册微信小程序账号，并获取 AppID

2. 克隆代码

git clone https://github.com/your-repository/colab-mini-program.git

3. 项目配置

  • 打开微信开发者工具，将项目导入。
  • 在 project.config.json 中填写你的 AppID。
  • 配置云开发环境，启用云开发数据库和存储功能。

4. 本地开发

  • 启动开发者工具进行调试，修改和测试代码。
  • 使用 云函数 处理业务逻辑（如项目发布、用户注册、消息发送等）。
  • 配置 实时数据库订阅 功能，支持项目数据的实时同步。

5. 部署与发布

  • 使用微信开发者工具进行代码审核。
  • 确保所有功能符合微信小程序平台的审核标准。
  • 在微信小程序后台发布新版本。

八、单元测试

采用微信开发者工具自带的真机调试，分别用二维码和手机模拟进行测试，在后台查看有无异常数据。

选择Jest！

Jest 是个超棒的工具，由 Facebook 开发，特别适合我们这些搞前端和 Node.js 的小伙伴们。它不仅功能强大，比如能自动模拟函数，还能做快照测试，而且配置起来也简单。

怎么学单元测试？

  1. 官方文档：Jest 的官方文档是入门的好地方，内容详细，还有很多实用的例子。

    • PS：如果链接打不开，可能是网络问题，也可能是链接有误，检查一下链接，或者稍后再试试。

  2. 在线课程：Udemy、Coursera、Egghead.io 上有很多 Jest 的课程，跟着视频学挺方便的。

  3. 动手实践：最好的学习方法就是亲自动手，写几个测试用例，跑一跑，看看结果。

  4. 加入社区：Stack Overflow、Reddit 或者 Jest 的 GitHub 仓库都是好去处，有问题就问，有经验的开发者们都很乐意帮忙。

用 Jest 写单元测试

安装 Jest

在你的项目里，打开终端，敲下这个命令：

npm install --save-dev jest

配置 Jest

在你的 package.json 里，加上这个脚本：

{
  "scripts": {
    "test": "jest"
  }
}

写你的测试用例

新建一个 sum.test.js 文件，写上你的测试代码：

// 引入你的函数
const { sum } = require('./mathUtils');

// 写测试用例
test('1 + 2 应该等于 3', () => {
  expect(sum(1, 2)).toBe(3);
});

别忘了你的 mathUtils.js 文件里要有 sum 函数：

// mathUtils.js
function sum(a, b) {
  return a + b;
}

module.exports = { sum };

运行测试

在终端里运行：

npm test

Jest 会自动找到所有 .test.js 结尾的文件，然后运行里面的测试用例。

学习单元测试的小建议

  1. 从简单开始：先搞定简单的函数，再慢慢挑战复杂的。
  2. 理解测试金字塔：知道单元测试、集成测试、端到端测试都是啥，它们在软件开发中扮演什么角色。
  3. 持续学习：Jest 和 JavaScript 的世界一直在变，保持好奇心，不断学习。
  4. 写可维护的测试：写测试也要写得清晰易懂，这样别人也能轻松接手。

好了，现在你可以开始用 Jest 来给你的项目写单元测试了。单元测试能帮你保证代码的质量，让以后的维护和升级都更轻松。

采用jest方法学艺不精用不好。

构造测试数据的思路：

边界值：测试输入的边界值，例如最小值、最大值。
异常值：测试异常或非法的输入值，确保函数能正确处理。
性能测试：考虑大数据量或长时间运行的情况。
组合测试：测试不同输入参数的组合，确保函数在各种情况下都能正确工作。

考虑将来测试人员的***难：

全面性：确保测试覆盖所有可能的输入情况。
健壮性：测试函数在面对错误输入或异常情况时的鲁棒性。
代码覆盖率：使用代码覆盖率工具来检查是否有未被测试的代码路径。
持续集成：将单元测试集成到持续集成/持续部署（CI/CD）流程中，确保每次代码提交都能自动运行测试。

九、Github签入截图

image


image
我们两是舍友结伴，就没有互相传啦，由一个成员修改完整版直接上传。
image

十、微信小程序开发中的困难与解决方案 😊

1. 布局问题 📱

问题：不同设备的屏幕尺寸导致页面布局适配困难，特别是在横竖屏切换和高分辨率设备上。

解决方案：

  • Flex布局：使用弹性布局，使页面元素自适应各种屏幕尺寸。
  • 百分比宽度：元素宽度随屏幕尺寸变化，避免固定像素值带来的适配问题。
  • 媒体查询：根据设备屏幕尺寸调整样式，确保布局在不同设备上表现良好。

2. 数据库设计 🗄

问题：设计高效且可扩展的数据库模型有难度。

解决方案：

  • 数据分析与需求整理：深入分析业务需求，确保数据库模型既能满足当前需求，又能支持未来扩展。
  • 适度反规范化：在保证数据一致性的前提下，对数据进行反规范化以提高查询效率。
  • 索引优化：为高频查询字段创建索引，提升数据库查询速度。

3. 云函数触发限制 🚀

问题：小程序的云函数触发次数和资源使用受限，导致系统处理能力受影响。

解决方案：

  • 优化云函数代码：精简计算和数据库操作，减少资源消耗。
  • 分批处理数据：避免一次性传输大量数据，降低单次调用的负载。
  • 使用第三方服务：利用外部 API 或云服务，分担云函数的计算压力。

4. 数据同步 🔄

问题：保持小程序前端与云数据库的数据同步，确保实时性和一致性。

解决方案：

  • 数据绑定：使用小程序的双向数据绑定功能，实现页面数据与云数据库的同步更新。
  • 实时订阅：启用云数据库的实时订阅功能，前端可以即时获取数据更新，确保数据始终一致。

5. 本地文件图片加载困难 🖼

问题：本地图片加载缓慢或失败，影响用户体验。

解决方案：

  • 腾讯云对象存储 (COS)：

    1. 将本地图片上传至腾讯云 COS，生成 CDN 链接。
    2. 前端使用 CDN 链接加载图片，减少本地资源压力，提升加载速度。
    3. 配置 CDN 加速，确保用户从全球范围内快速获取图片资源。

    代码示例：

    <image src="https://your-bucket.cos.your-region.myqcloud.com/your-image.jpg" alt="图片加载失败" />

优势：

  • 通过 CDN 加速，图片加载速度更快，提升用户体验。
  • 减轻本地资源压力，确保图片加载稳定性。

其他优化小技巧 ✨

  • 组件通信：使用事件冒泡、自定义事件或全局状态管理，简化组件

十一、队友评价

刘莹对谢含的评价：

谢含在团队中表现突出，尤其在技术实现和创新思维方面。她对新技术的掌握速度令人印象深刻，经常能在项目中迅速找到高效解决方案。她的积极主动和勇于尝试的态度极大地推动了项目的进展。我特别欣赏她在面对挑战时的冷静和解决问题的能力。期待未来能再次与她合作。

尽管如此，谢含在项目细节处理上还有提升空间。更加注重细节将有助于进一步提高工作质量。在未来的合作中，我们可以一起努力，使项目更加完善。

谢含对刘莹的评价：

刘莹同学在项目中展现了出色的逻辑思维和深厚的专业知识，她总能迅速定位并解决我长时间未能解决的问题。她的耐心和细心为我提供了极大的帮助，尤其是在我遇到难题时，她总是能够耐心地指导我，帮助我理清思路。刘莹的思维敏捷，总能发现我未曾注意到的问题，她的这些品质让我受益匪浅。

在与刘莹的合作中，我发现她在面对紧张的项目进度时有时会感到焦虑。建议她可以进一步提高压力管理能力，以便更好地应对工作中的挑战。我相信，通过不断学习和实践，她能够在这方面取得显著进步。

附录

本项目的小程序是体验版小程序，二维码仅限于向十五位用户开放使用权限。为了遵守规定，我们无法让所有同学体验该小程序。如果您是作业审核的老师或同学，请直接联系我们以获取小程序的使用权限。

Copyright © 2024 六一！！
Powered by .NET 9.0 on Kubernetes