2024秋軟體工程第二次結對作業之程式實現

。。。。。。。11發表於2024-10-10

專案	詳情
作業所屬課程	軟體工程
作業要求連結	作業要求
作業目標	透過實踐體會結對程式設計和程式實現的流程
本人學號	102201425
結對夥伴學號	102201420
結對同學的部落格連結	待補充
GitHub專案地址	訪問專案

具體分工

本人（鄭禮鑫）	夥伴（林傳昊）
負責主要後端搭建	負責主要前端設計
搭建雲平臺資料庫和日常維護	設計小程式UI介面和互動功能
設計基礎雲函式、實現前後端互動功能	設定程式變數、引數及實現雲函式呼叫
學習雲平臺功能，設計單元測試	查詢設計相關素材，豐富介面美觀度

PSP表格

總分工	具體階段	預估耗時（時）	實際耗時（時）
前期計劃：	專案分析與前期分工	2	2
	分頭學習專案所需前後端基礎知識	4	3
中期開發：	搭建程式執行環境	3	2
	開發使用者登入功能	3	5
	開發使用者個人介面	5	6
	開發專案釋出、詳情介面	5	8
	開發專案成員聊天介面	5	5
後期最佳化：	測試程式碼、bug修復	8	10
	特色功能設計	5	3
	簡化程式碼，增加註釋	5	3
	美化介面	3	4
	使用者互動、程式預覽	4	4
總結階段：	總結分析	2	2
	編寫部落格	3	4
合計：		57	61

解題思路描述與設計實現說明：

問題分析與解決思路：

專案需求：專案釋出與成員招募
解題思路：先設計基礎互動功能（使用者登入、資訊更改）重點完善專案建立與資訊完善
可能面臨的困難：使用者聊天平臺的搭建，為不同專案分別搭建各自的資料管理系統

使用者互動功能流程圖：

程式碼實現思路：

1.前端學習wxss檔案的編寫，準備元件模板

2.後端搭建資料庫平臺，瞭解雲函式的搭建和匯入

3.前端利用wxml和js檔案設計簡單的UI介面以及介面跳轉等功能

4.後端提供雲函式思路，在js檔案中完成資料傳輸

主要步驟資料流圖

部分程式碼片段展示

sendMess() {       //這是使用者傳送資訊時執行的函式
  let that = this;//避免不必要的bug
  let mess = that.data.mess;
  let userid = that.data.userid;//儲存傳送資訊的使用者id，作為標識
  let avatarUrl = that.data.avatarUrl;//頭像
  let date = that.getFormatTime();
  wx.showLoading({ title: '傳送中...', mask: true });//載入提示
  db.collection('chatRecords').where({//這段意思時根據專案id從資料庫呼叫聊天記錄
    projectId: that.data.projectId,//每個專案都有各自的聊天視窗
  }).get().then(res => {
    if (res.data.length > 0) {
      // 如果存在聊天記錄，更新該記錄
      let recordId = res.data[0]._id;
      let newMessage = {
        avatarUrl: avatarUrl,
        id: userid,
        text: mess,
        date: date,
      };
      console.log(recordId)
      db.collection('chatRecords').doc(recordId).update({
        data: {
          chatContent: db.command.push(newMessage)//新訊息採用堆疊傳遞
        },
        success: function(updateRes) {
          console.log("訊息更新成功！", updateRes);
          that.setData({
            mess: '',// 將新傳送的訊息新增到聊天內容中
          });
        },
        
        fail: function(err) { //錯誤資訊很重要，便於報錯時快速定位bug！
          console.log("訊息更新失敗！", err);
        },
        complete: function() {
          wx.hideLoading();
        }
      });
    } else {               //分類討論，空值要注意！
      // 如果不存在聊天記錄，建立新的記錄
      let newMessage = {
        avatarUrl: avatarUrl,
        id: userid,
        text: mess,
        date: date
      };
      db.collection('chatRecords').add({
        data: {
          projectId: that.data.projectId,
          chatContent: [newMessage],
          createTime: db.serverDate()
        },
        success: function(addRes) {
          console.log("新建聊天記錄成功！", addRes);
          that.setData({
            mess: '',
            content: [newMessage]
          });
        },
        fail: function(err) {
          console.log("新建聊天記錄失敗！", err);
        },
        complete: function() {
          wx.hideLoading();
        }
      });
    }
  }).catch(err => {
    console.log("查詢聊天記錄失敗！", err);
    wx.hideLoading();
  });
},

解釋：這段程式碼是一個我們微信小程式中wxml檔案呼叫的一個函式，在使用者傳送訊息時執行，主要功能如下：

顯示一個傳送的載入提示，告知使用者訊息正在傳送。
查詢雲資料庫中是否已經存在與當前專案ID相關的聊天記錄。
如果存在聊天記錄，就更新這條記錄，將新訊息新增到聊天記錄的陣列中。
如果不存在聊天記錄，就建立一條新的記錄，並將訊息作為聊天記錄儲存。
更新或建立記錄成功後，清空訊息輸入框，並在聊天介面顯示新的訊息。

附加特點設計與展示

設計介紹：

1.增加專業和簡介系統：使用者在建立專案的時候可以輸入本次專案的專業傾向和簡短的介紹，這部分內容會在專案主頁中直觀的呈現，便於使用者快速找到自己適合和心儀的專案。

2.個性化介面系統：使用者在個人頁面可以自己更改自己的頭像和暱稱，我們會將使用者的頭像傳遞到雲資料庫，在聊天時也能呈現

實現思路：

1.使用者在建立介面輸入專業和簡介，在專案主頁呼叫雲資料庫，輸出專案的名字、簡介、專業傾向等資訊，透過專案詳情，使用者可以看到專案進一步的資訊並選擇是否加入

2.使用者在個人介面透過點選編輯按鈕，即可從相機或相簿中選擇自己喜歡的圖片作為頭像，並修改暱稱等內容，我們會將使用者輸入的資料上傳到雲端儲存，實現個性化操作。

貼出你認為重要的/有價值的程式碼片段，並解釋

<wxs module="mo">//這是我們建立的函式
  function include(arr,id){
    return arr.indexOf(id)==-1?false:true
  }
  module.exports ={
    include:include,
  }
</wxs>
<view class="container">
  <image class="background-image" src="/images/pink0.jpg" mode="aspectFill"></image>
  <text class="title">我的專案:</text>
  <scroll-view class="project-list"scroll-y="true">
    <block wx:for="{{projects}}" wx:key="id" wx:if="{{mo.include(item.membersid,userid)}}">//此處是函式的呼叫，實際wxml檔案不能註釋
      <view class="project-item" bindtap="viewProjectDetail" data-id="{{item._id}}">
        <text class="project-name">{{item.projectName}}</text>
        <text class="project-limit">人數限制: {{item.limit}}</text>
        <text class="project-simple">{{item.projectSimple}}</text>
        <text class="project-simple">專業傾向：{{item.projectMajor}}</text>
        <view class="bottum-container2">
          <button class="bottom-fix2"style="width: 170rpx">專案詳情</button>
        </view>
      </view>
    </block>
  <view wx:if="{{!projects.length}}">
    <text>暫無專案釋出</text>
  </view>
  </scroll-view>
</view>

解釋：在專案頁面，我們使用了wxs來定義了一個獲取陣列中元素的函式，雖然函式構造比較簡單，但由於wxml檔案中的wx：if語句不同其他hxml檔案那樣，不能直接呼叫includes語句進行判斷（關鍵使用的話也不會進行報錯），害我們小組尋找bug良久。最後透過研究，發現了wxs的使用可以解決這一問題，從0開始寫下了這個函式。此函式可以在多個場合直接呼叫，比較方便。

實現成果展示：

登入介面：

個人資訊：

編輯：

賬號管理：

資訊維護：

修改密碼：

專案列表：

專案成員申請列表：

專案介面：

專案詳情：

專案交流：（可多人）

專案建立：

使用者反饋：

在部落格中給出目錄說明和使用說明

 fuyou
├─ miniprogram
│  ├─ app.js                
│  ├─ app.json
│  ├─ app.wxss
│  ├─ asset                     #字型
│  │  └─ lianmeng.ttf
│  ├─ cloudfunctions            #雲函式
│  │  ├─ createProject          #建立專案雲函式
│  │  ├─ getprofile             #獲取個人資訊雲函式
│  │  ├─ getproject_id          #獲取專案雲函式
│  │  ├─ joinprojectrequest_id  #加入專案雲函式
│  │  ├─ joinproject_id         #同意加入專案雲函式
│  │  ├─ log                    #登入雲函式
│  │  ├─ register               #註冊雲函式
│  │  ├─ reject                 #拒絕加入專案雲函式
│  │  ├─ saveProfile            #儲存個人資訊雲函式
│  │  ├─ saveUserInfo           #儲存個人資訊雲函式2（賬號管理）
│  │  └─ updatePassword         #更新密碼雲函式
│  ├─ envList.js
│  ├─ home            #程式主頁
│  │  ├─ person        #個人介面
│  │  │  ├─ feedback    #使用者反饋介面
│  │  │  ├─ fix         #編輯介面
│  │  │  ├─ privacy      #賬號管理介面
│  │  │  │  ├─ fix0       #資訊維護介面
│  │  │  │  ├─ fix1         #修改密碼介面
│  │  │  └─ project         #個人相關專案介面
│  │  │     └─ joinlist     #專案申請加入介面
│  │  └─ project       #專案主頁面
│  │     ├─ chat       #聊天介面
│  │     ├─ create     #建立專案介面
│  │     ├─ detail      #專案詳情介面
│  │     ├─ detail2     #專案詳情介面——從使用者頁面點選的（可以檢視申請加入列表）
│  ├─ images         #圖片檔案
│  │  ├─ pink0.jpg
│  │  ├─ pink1.jpg
│  │  ├─ pink2.jpg
│  │  ├─ pink3.jpg
│  │  ├─ pink4.jpg
│  │  ├─ pink5.jpg
│  │  ├─ pink6.jpg    
│  ├─ pages           #登入主頁
│  │  ├─ home         #成功登入後跳轉頁面
│  │  ├─ log          #學生登入介面
│  │  ├─ log2         #導師登入介面
│  │  └─ register     #註冊介面

使用說明：從我們的github倉庫即可下載解壓縮，匯入透過微信小程式開發者平臺即可執行，小程式開發者平臺下載地址
1.點選匯入

2.選擇miniprogram檔案

3.點選建立

4.點選編譯即可在左側看到小程式

5.點選頭像登入

6.直接與小程式互動即可
專案組織：我們根據後端和前端分別編寫，後端工作儲存在雲函式檔案cloudfunctions內，前端分為兩個主題部分，代表登入的pages和代表程式主頁的home檔案，又根據每一個頁面的所屬分別整理，比如個人資訊的檔案全部整理在home/person檔案內