MUYU —— Beta Sprint Essay 3

1. SCRUM Section

1.1 Team Achievements

1.2 Results Display

1.2.1 Front-end Results

Section 1

User page interaction upgrade. In this front end operation, we absorbed the shortcomings of the last sprint. For example, in the user's main page, the user's avatar started with a square image, and we changed it to a square image this time. The user's nickname may be set too long to reflect, we modify it to make it more perfect. At the same time, the user's headwear dressing function is also added. Make the user feel the warmth and humanity of the application.

Code Section

<template>
  <view class="page">
    <view class="top">
      <view class="background"></view>
    </view>
    <view class="user-card">
      <view class="card">
        <view class="top">
          <view class="userImage">
            <u-avatar size="145" :src="userInfo.avatarUrl"></u-avatar>
          </view>
        </view>
        <view class="bottom">
          <view class="left">
            <view class="user-text">
              <view>{{userInfo.nickName}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-cell-group>
      <u-cell-item v-if="!login" @click="loginShow = true" icon="account" title="登录"></u-cell-item>
      <u-cell-item v-if="login" @click="goUserInfo" title="我的信息"></u-cell-item>
    </u-cell-group>
    <u-popup :mask-close-able="false" border-radius="10" v-model="loginShow" mode="center">
      <view style="padding: 20rpx;">
        <u-form label-width="200" :model="form" ref="uForm" >
          <view style="padding: 20rpx 40rpx;">
            <u-form-item :label-style="{fontWeight:'bold'}" :required="true" label="昵称" prop="nickName">
              <input type="nickname" :value="form.nickName" @blur="bindBlur" :border="true" placeholder="请输入昵称" @input="bindInput"/>
            </u-form-item>
            <u-form-item :label-style="{fontWeight:'bold'}" :required="true" label="头像" prop="avatarUrl">
              <view>
                <u-avatar v-if="form.avatarUrl" :src="form.avatarUrl" size="70"></u-avatar>
                <view v-else style="color: grey">请选择头像</view>
              </view>
              <button class="contact-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">a</button>
            </u-form-item>
          </view>
        </u-form>
        <view @click="userLogin" style="width: 320rpx;height: 100rpx;border-radius: 20rpx;margin-top: 50rpx;margin-left: 130rpx;background-color:#4790f4;color: white " >
          <view style="height: 100rpx;text-align: center;line-height: 100rpx;font-weight: bold">登录</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {appid, request} from "../../request/request";

export default {
  data() {
    return {
      action: 'https://www.jianfeng2021.top/prod-api/common/upload/qiniu?preName=secondhand',
      fileList: [],
      loginShow:false,
      userInfo:{},
      login:false,
      form: {
        avatarUrl:'',
        nickName:''
      },
      userId:'',
      openid:"",
      sessionKey:"",
      rules: {
        avatarUrl: [
          {
            required: true,
            message: '请选择头像',
            trigger: ['change','blur'],
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入昵称',
            trigger: ['change','blur'],
          },
        ],
      }
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow(){
    let userId = uni.getStorageSync('userId')
    let login = uni.getStorageSync('login')
    let userInfo = uni.getStorageSync('userInfo')
    this.login =login
    this.userId =userId
    this.userInfo =userInfo

    if (!this.login){
      let that = this
      wx.login({
        success (res) {
          if (res.code) {
            request({url: '/wx/user/login', method: 'GET',data:{appid:appid,code:res.code}})
                .then(res =>{
                  that.openid = res.openid
                  that.sessionKey = res.sessionKey
                  uni.setStorageSync('openid',res.openid)
                })
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    }else{
      request({url:'/secondhand/user/'+uni.getStorageSync('userId')})
          .then(res=>{
            this.userInfo = res.data
          })
    }
  },
  methods: {
    bindBlur(e) {
      this.form.nickName = e.detail.value;
    },
    bindInput(e){
      this.form.nickName = e.detail.value;
    },
    onChooseAvatar(e) {
      let that = this;
      let {
        avatarUrl
      } = e.detail;
      uni.uploadFile({
        url: this.action,
        filePath: avatarUrl,
        name: 'file',
        success: uploadFileRes => {
          console.log(uploadFileRes.data)
          let data = JSON.parse(uploadFileRes.data);
          that.form.avatarUrl = data.url;
        },
        fail: (error) => {
        },
        complete: () => {
        }
      });
    },
    userLogin() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (this.fileList.length === 0 && this.form.imageUrl === '') {
            this.$refs.uToast.show({
              title: '请上传图片',
              type: 'error',
            })
            return
          }

          request({url: '/secondhand/user',method: 'POST',data: {appid: appid, openid: uni.getStorageSync('openid'), avatarUrl: this.form.avatarUrl, nickName: this.form.nickName}})
              .then(res => {
                if (res.code === 200) {
                  this.loginShow = false
                  this.login = true;
                  this.userInfo = res.data
                  uni.setStorageSync('login', true)
                  uni.setStorageSync('userId', res.data.userId)
                }
              })
        }
      });
    },
    goUserInfo(){
      uni.navigateTo({url:'/pages/userInfo/form'})
    },
  },
};
</script>
<style lang="scss" scoped>

.top {
  height: 250rpx;
  position: relative;
  .background {
    background-color: #f67952;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: absolute;
    height: 160rpx;
    width: 100%;
  }
}
.icon {
  color: #96a1ae;
  font-size: 40rpx;
}
.user-card {
  height: 170rpx;
  padding: 0 15px;
  .card {
    position: relative;
    bottom: 62px;
    height: 250rpx;
    background-color: white;
    border-radius: 5px;
    .top {
      height: 30%;
      position: relative;
      .userImage {
        position: absolute;
        bottom: 24%;
        left: 10%;
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid white;
      }
    }
    .bottom {
      display: flex;
      height: 70%;
      .left {
        width: 80%;
        height: 100%;
        position: relative;
        .user-text {
          width: 100%;
          font-size: 1.6em;
          padding-left: 60rpx;
          height: 50%;
        }
        .user-phone {
          color: #96a1ae;
          padding-left: 60rpx;
          height: 50%;
          width: 100%;
          font-size: 0.9em;
        }
      }
      .right {
        width: 20%;
        height: 50%;
      }
    }
  }
}
.list-card {
  padding: 0 15px;
  .card {
    border-radius: 5px;
    position: relative;
    background-color: white;
    border-radius: 5px;
    padding: 5px 30px;
    .item {
      display: flex;
      height: 120rpx;
      .left {
        width: 15%;
        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
      .center {
        width: 65%;
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 1.1em;
      }
      .right {
        width: 20%;
        justify-content: flex-end;
      }
    }
  }
}
.item-bottom-solid {
  border-bottom: 1px solid #d4d6da;
}
.quit{
  height: 60rpx;
  margin-top: 50px;
  .btn{
    background-color: #f67952;
    border-radius: 30px;
    width: 80%;
    color: white;
    font-size: 1.2em;
    height: 100%;
  }
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-button {
  display: inline-block;
  position: absolute;
  width: 300rpx;
  height: 100rpx;
  bottom: 10rpx;
  background: salmon;
  opacity: 0;
  z-index: 10;
}
</style>

Section 2

Considering that the program may be upgraded, in order to write the UI about the upgrade, when it is detected that wechat needs to be upgraded or the small program version is too low, it will jump out "The current wechat version is too low, can not use the function, please upgrade to the latest wechat version and try again" to remind users to upgrade. Make the program closer to everyday use

<script>
    export default {
        onLaunch: function() {
      //判断微信版本是否 兼容小程序更新机制API的使用
      if (wx.canIUse('getUpdateManager')) {
        //创建 UpdateManager 实例
        const updateManager = wx.getUpdateManager();
        //检测版本更新
        updateManager.onCheckForUpdate(function(res) {
          // 请求完新版本信息的回调
          if (res.hasUpdate) {
            //监听小程序有版本更新事件
            updateManager.onUpdateReady(function() {

              //TODO 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 （ 此处进行了自动更新操作）
              updateManager.applyUpdate();
            })
            updateManager.onUpdateFailed(function() {
              // 新版本下载失败
              wx.showModal({
                title: '已经有新版本喽~',
                content: '请您删除当前小程序，到微信 “发现-小程序” 页，重新搜索打开哦~',
              })
            })
          }
        })
      } else {
        //TODO 此时微信版本太低（一般而言版本都是支持的）
        wx.showModal({
          title: '溫馨提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
     page {
        background-color: #F8F7F7;
      }
</style>

Summary

In the latest front-end operation, we've implemented several enhancements based on user feedback and identified shortcomings from the previous sprint. Notably, we've refined the user's main page to offer a more visually appealing experience. Previously, the user's avatar began as a square image, and we've made a positive adjustment to maintain a square format. Additionally, we've addressed the issue where longer user nicknames weren't fully reflecting on the page, ensuring a more seamless and perfect display.

To further enhance the user experience and inject a sense of warmth and humanity into the application, we've introduced a new feature allowing users to customize their avatars with various headwear options. This personalization feature aims to make users feel more connected and engaged with the application.

Looking ahead, we've proactively considered future upgrades to the program. In the event that WeChat needs an upgrade or the small program version is too outdated, a user-friendly notification will prompt users: "The current WeChat version is too low; the function cannot be used. Please upgrade to the latest WeChat version and try again." This proactive approach ensures users are aware of potential issues and encourages them to keep their applications up-to-date, fostering a seamless and everyday user experience.

These improvements collectively contribute to a more polished and user-centric application, aligning with our commitment to delivering an enjoyable and intuitive interface for our users.

1.2.2 Backend testing

Test purpose: To assess the product's performance and responsiveness under varying user volumes.

Test content:

Simulated load testing using JMeter under different user volumes.
Evaluated response times for critical interfaces with high priority.
Monitored database and network utilization.

Test configuration:
Hardware: 8-core processor with 16GB of RAM
Software: JMeter version 6.2.1
Interfaces: User registration/login, homepage data retrieval

Test cases:
One user simultaneously accessing the registration interface, sending one request every second for six seconds.
Five users simultaneously accessing the login interface, sending one request every half-second for 12 seconds.
Ten users simultaneously accessing the homepage data interface, sending one request every 0.2 seconds for 30 seconds.

Test results:
User registration with one user: Response time below 30ms, with a 100% pass rate.
User login with five users: Average response time of 60ms, maximum of 1.2s, and a pass rate of 98%.
Homepage with ten users: Average response time of 90ms, maximum of 2.5s, and a pass rate of 95%.

Analysis:
The main process passed the stress test with good performance. The response time for the login interface increased under high concurrency. The utilization rate of the database connection pool consistently stayed between 70-80%. Suggestions for improvement are as follows:）

1.2.3 Collection function

In the Alpha Sprint and previous tasks, we did not mean to add separate favorites and UI interaction options for users, but in this task, we designed the user's favorites function

1.3 Photo of the Scrum meeting

2. PM Report

2.1 Expected tasks and completed tasks

2.2 Project Burn-Up Chart