Related Links

Division of Labor

PSP Table

Design Approach

The following outlines the requirement analysis, tech stack selection, and module design.

Requirement Analysis

After analyzing the model from the first pair programming assignment, we identified that the previous design was insufficient for facilitating communication and project announcements. Based on this, we optimized the project initiation process and added a message board to the project posting section to enable like-minded students to interact.

The primary features were determined as:

• Registration
• Project Hall
• Project Management
• Initiating Projects
• User Profile

Tech Stack Selection

Built using the uniapp framework, this cross-platform mini-program FZU-help targets multiple devices.

Integrated with cloud development platform: https://unicloud.dcloud.net.cn/, deploying both frontend and backend to cloud servers.

• Frontend Hosting
• Backend Cloud Database + Cloud Functions

Technologies used:

• vite
• vue3
• ts
• uniCloud
• wotDesignUni
• sp-editor

Environment Requirements:

• node > 16.20.0
• npm > 8.19.4
• HBuilder X > 4.07

Deployment:

• Serverless Services
• Cloud-Native Container Platform (Alibaba Cloud)

Plugins:

• sp-editor - Enhanced version of official rich text editor
• wotDesignUni - Elegant UI library built with Vue3 + Typescript
• mp-html - Rich text parser

Platform Compatibility

Languages Used:

• Frontend Framework: Vue.js handles UI and interactions. Component-based architecture enhances modularity and reusability.
• Programming Language: JavaScript and TypeScript combined for business logic and type safety.
• Styling: SCSS for complex styles, minimal CSS for basic elements.
• Functionality: Utilize plugins provided by uniapp to rapidly build functional modules.
• Database: Managed via uniapp's cloud server.

Module Design

Registration Module

Frontend Design

• Interface: Form fields for username, email, password, and confirmation password. A register button and a link to login if account exists. Loading indicator and success redirection.
• Technology: HTML forms + CSS styling, JavaScript and Vue.js for validation and interaction.

Backend Design

• API: POST /register to handle form submission and insert into DB.
• Database: User table with fields like user ID, name, encrypted password, registration time.
• Logic: Passwords are stored securely using encryption (e.g., bcrypt).

Project Initiation Module

Frontend Design

• Interface: Fields for project name and description, multi-line input, task creation icons.
• Technology: Form and dynamic interaction using Vue.js.

Backend Design

• API: Accepts project data including name, description, members, start/end times.
• Database: Project table storing project name, description, creator info.
• Logic: Validates creator permissions and sends notifications.

Message Board Module

Frontend Design

• Interface: Discussion board layout with list and input area. Supports rich text (text, image, links). Real-time refresh.
• Technology: Componentized design for dynamic rendering of messages.

Backend Design

• API: Submit comment and fetch all comments under a project.
• Database: Comment table with fields: comment ID, project ID, user ID, content, reply flag.
• Logic: Access control for public comments.

Project Management Module

Frontend Design

• Interface: Kanban-style task board similar to Trello. Tasks can be dragged between statuses (todo, in progress, done). Details view/edit for tasks including assignees, due dates, priority.
• Technology: Vue.js + Vuex for state management. Drag-and-drop via Vue Draggable. Progress bar with chart.js.

Backend Design

• API: Fetch all tasks, create new tasks, update task status/assignee.
• Database: Task table with project ID, type, assignee, creation date. User-task association table.
• Logic: Handles task status changes, permission checks (only project owner can edit), calculates project progress.

Key Implementation Flowcharts or Data Flow Diagrams

Project Publishing Data Flow Table

Overall Project Flowchart

Implementation Results

Usage Instructions

• Scan QR code on mobile for direct use (no need to download or configure environment).
• Alternatively, access via PC browser.

Project Directory Structure

• pages folder for Vue.js front-end/back-end pages
• static folder for static images
• uni_modules for functional components
• uniCloud-alipay for cloud database and functions

Project Hall

Five menu sections: "Latest", "Popular", "Contests", "Research", "Startup". Find projects you're interested in here.

Message Board

Recruit like-minded partners and exchange project information.

Post Project

Fill in project details, select tags, recruit team members.

My Projects

Add project categories, manage and view project progress.

Personal Center

Edit profile, view draft projects, categorize.

Registration & Login

Use student ID for registration and login.

Important Code Snippets and Explanations

1. home.vue part of the hall program

Implements the interface design for the hall.

<template>
	<view class="content">
		<wd-tabs v-model="active" animated swipeable @change="tabsChange">
			<block v-for="item in navList" :key="item.name">
				<wd-tab :title="item.title" :name="item.name">
					<scroll-view scroll-y="true">
						<view class="main">
							<wd-gap height="85rpx"></wd-gap>
							
							<view class="alone" v-for="item in articList" :key="item._id" @click="gotoDetail(item._id)">
								<blog-item :blog="item" @updateList="updateList(item._id)" />
							</view>
							<view class="load-text">{{ loadText }}</view>
						</view>
					</scroll-view>
				</wd-tab>
			</block>
		</wd-tabs>
	</view>
</template>

2. publish.vue part of the publish program

Implements logic for submitting to the database.

/**
 * Confirm submission
 * @param status 0-draft 1-published 2-under review
 */
const onSubmit = (status: number = 1) => {
	articleParams.picurls = getImgList(articleParams.content, 9);
	loading.value = true;
	
	const dbCollection = db.collection("travel-articles");  
	    
	// Determine whether to update or add article based on isEdit  
	const operation = isEdit ? 
		dbCollection.doc(artId.value).update({ ...articleParams, article_status: status }) : 
		dbCollection.add({ ...articleParams, article_status: status });  
	
	operation.then((response: ApiResponse) => {
		console.log("==== Publish", response)
		uni.showToast({
			title: "Saved successfully",
			icon: "none",
		})
		setTimeout(() => {
			loading.value = false;
			handleBackHome();
		}, 1500)
	}).catch(() => {
		uni.showToast({
			title: "Failed to save, please contact admin",
			icon: "none",
		})
		loading.value = false;
	})
}

Additional Feature Designs and Showcase

Integrated Language Model Qwen

Unique Design Ideas and Significance

1. Enhanced Features: Integration allows advanced capabilities like NLP and smart recommendations.
2. Resource Saving: Offloads processing to external servers, saving local resources.
3. Real-Time Updates: Keeps models updated without user intervention.
4. Big Data Handling: Processes large datasets for accurate insights.
5. Cross-Platform Support: Interfaces support multiple platforms, increasing flexibility.
6. Reduced Development Cost: Leverages pre-built models to cut down development time.

Implementation Approach

Connect to the language model API through the cloud server.

Important Code Snippet and Explanation

module.exports = {
	TURBO_BASE_URL: "https://dashscope.aliyuncs.com", // Qwen API base URL
	TURBO_KEY: "", // Qwen API key
}

Explanation: This configures the internal AI Qwen interface. During project creation, the model helps users edit content.

Unit Testing

10.1 Testing Tools and Tutorials

Tools: vue-test-utils and jest

Install dependencies in package.json:

"devDependencies": {  
	"jest": "^27.0.0",  
	"@vue/test-utils": "^2.0.0",  
	"vue-jest": "^3.0.0"  
}

10.2 Unit Test Code Example

import { mount } from '@vue/test-utils';  
import Register from '@/path/to/your/register.vue'; // Replace with real path  

describe('Register.vue', () => {  
    let wrapper;  

    beforeEach(() => {  
        wrapper = mount(Register);  
    });  

    it('should update username data on input', async () => {  
        const usernameInput = wrapper.find('uni-easyinput[placeholder="Please enter student ID"]');  
        await usernameInput.setValue('test_user');  
        expect(wrapper.vm.formData.username).toBe('test_user');  
    });  

    it('should submit form successfully', async () => {  
        // Fill form fields  
        await wrapper.setData({  
            formData: {  
                username: 'test_user',  
                nickname: 'Test Name',  
                password: 'password123',  
                password2: 'password123',  
                captcha: '1234' // Assume captcha is 4 characters  
            }  
        });  

        // Submit form  
        await wrapper.find('button[type="primary"]').trigger('click');  

        // Add expectations depending on your logic  
        // expect(...).toBe(...);  
    });  

    it('should show an error if captcha is invalid', async () => {  
        // Fill form fields  
        await wrapper.setData({  
            formData: {  
                username: 'test_user',  
                nickname: 'Test Name',  
                password: 'password123',  
                password2: 'password123',  
                captcha: '' // Empty captcha  
            }  
        });  

        // Submit form  
        await wrapper.find('button[type="primary"]').trigger('click');  

        // Validate error prompt  
        expect(wrapper.vm.$refs.captcha.focusCaptchaInput).toBe(true);  
    });  
});

Explanation: Tests the register.vue component for form submission and input validation.

10.3 Testing Data Construction Strategy

1. Valid Test Cases

Test successful registration scenarios:

• Valid username and password:
  • Username: numeric student ID
  • Nickname: student ID + name
  • Password: atleast 8 chars, letters and numbers
  • Confirm password matches
  • Captcha: 4-digit numeric

const validTestData = {  
    username: 'validUser123',  
    nickname: 'Valid User',  
    password: 'Password123',  
    password2: 'Password123',  
    captcha: '1234'  
};

2. Boundary Test Cases

Check handling of input limits:

• Shortest and longest inputs:
  • Username: 1 char and max limit (e.g., 20 chars)
  • Password: min (e.g., 8 chars) and max (e.g., 20 chars)

const boundaryTestData = [  
    { username: 'a', password: 'Password123', password2: 'Password123', captcha: '1234' }, // Shortest  
    { username: 'aVeryLongUserNameThatExceedsLimit', password: 'Password123', password2: 'Password123', captcha: '1234' } // Longest  
];

3. Invalid Test Cases

Test invalid inputs:

• Missing required fields:
  • Username, password, captcha empty
• Password mismatch:
  • Two passwords don't match
• Invalid captcha:
  • Non-numeric or wrong format

const invalidTestData = [  
    { username: '', nickname: 'Valid User', password: 'Password123', password2: 'Password123', captcha: '1234' }, // Empty username  
    { username: 'testUser', nickname: 'Valid User', password: 'Password123', password2: '', captcha: '1234' }, // No confirm password  
    { username: 'testUser', nickname: 'Valid User', password: 'Password123', password2: 'Password456', captcha: '1234' }, // Mismatched passwords  
    { username: 'testUser', nickname: 'Valid User', password: 'Password123', password2: 'Password123', captcha: 'abc' } // Invalid captcha  
];

4. Special Characters and Whitespace Handling

Test inputs with special characters or spaces:

const specialCharTestData = {  
    username: 'test user!', // Contains space and special char  
    password: '1234!@#$', // Special chars  
    password2: '1234!@#$', // Matched special chars  
    captcha: '1234'  
};

5. State Change Tests

Validate behavior under different user states:

• Existing username (conflict)
• Repeated registration attempt

const existingUserTestData = {  
    username: 'existingUser123', // Already exists in system  
    nickname: 'Existing User',  
    password: 'Password123',  
    password2: 'Password123',  
    captcha: '1234'  
};

GitHub Commit History

Problems Encountered and Solutions

1. Project Detail Page Exception

Exception Description

Project hall shows correctly, but clicking results in blank page.

Solution

• Check backend database API
• Verify frontend code correctness

Resolution and Insights

Mistyped code caused display issue. Stay calm and debug carefully.

2. Registration Page Behavior Mismatch

Exception Description

Using student ID as login fails due to numeric-only restriction.

Solution

• Locate registration page
• Analyze and fix logic restrictions

Resolution and Insights

Fixed by adjusting logic. Design requires careful attention to detail.

Evaluation of Teammate 🍁

1. Role and Responsibilities

• Description: Partner mainly handled frontend development, diligent and dedicated.

2. Work Attitude

• Enthusiasm: Proactive, responsible, indispensable teammate
• Collaboration: Communicates effectively, listens well, cooperates positively

3. Technical Skills

• Proficiency: Demonstrated solid frontend skills and collaborative bug fixes
• Learning Ability: Quick learner, improvement needed

4. Time Management

• Task Completion: Meets deadlines, delivers code on time
• Punctuality: Always attends meetings on time, completes assigned work before deadline

5. Contribution and Impact

• Team Contribution: Skilled in modules, significantly contributed to project progress

6. Improvement Suggestions

• Space for Growth: Don't stress too much, stay relaxed, I got you covered 💪