Extreme Programming

	Extreme Programming
Team Name	AmberBlaze
Team LOGO
Teammember Name	Rongcheng Xie  Molan Xue
Student FZU ID	832201126     832201130
Course for This Assignment	2401_MU_SE_FZU
Assignment Requirements	Extreme Programming
Objectives of This Assignment	The objective of this assignment is to develop a Program that fulfills four key functions: bookmark contacts, enabling multi-contact methods, supporting import/export of data, and deploying the program for practical use.
Other Reference	1. WeChat Mini Program Design Guide 2. Javascript Style Guide 3. WeChat Developer Tools 4. The Art of Construction

---

1. About Project

1.1 Project Address

• Github links

1.2 Commits Log

1.3 Coding Standard Link

• JSON Configuration
• WXML Template
• WXSS Style
• JS Logic Interaction

2. Functional Implementation

2.1 Functional Structure Diagram

2.2 Bookmark Contacts

Bookmark Contacts	Frontend	Functionality	Users can mark important contacts as bookmarked or remove the bookmark by clicking the bookmark button. The status field visually indicates whether the contact is bookmarked or not.
		Implementation	Function 'collect': Implemented in pages/index/index.js, it listens for the bookmark button click event, toggles the bookmark status, and refreshes the UI dynamically. The UI is bound to the status field using WXML for real-time updates.
		Workflow	1. User Interaction: The user clicks the bookmark button next to a contact in the list. This triggers the collect function, which receives the contact's unique _id and its current status as parameters. 2. Function Execution (collect):If the status is 1 (not bookmarked), it updates the status to 2 (bookmarked). If the status is 2 (bookmarked), it reverts the status back to 1 (not bookmarked). 3. UI Update:After toggling the status, the function calls self.loadContactsFromDatabase() to reload the updated contact list from the database. The page dynamically reflects the new bookmark status through the WXML binding. 4. User Feedback:The function uses wx.showToast() to display feedback:"Successfully bookmarked" for bookmarking."Bookmark removed" for unbookmarking.
	Backend	Functionality	Updates the bookmark status of a contact in the contacts collection of the database.
		Implementation	Function 'update': Updates the status field of a contact document using its _id in the cloud database​(index).
		Workflow	1. Database Update: The collect function communicates with the backend cloud database via contactsCollection.doc(_id).update. It updates the status field in the contacts collection: Sets status: 2 to mark the contact as bookmarked. Sets status: 1 to unbookmark the contact. 2. Data Retrieval: After the database update, self.loadContactsFromDatabase() fetches the updated contact list. This ensures the frontend reflects the latest changes.

2.3 Add Multiple Contact Methods

Add Multiple Contact Methods	Frontend	Functionality	Users can input contact details such as name, phone number, email, and address, and upload a profile picture for the contact.
		Implementation	Function 'collect': 1. Functions onNameInput, onPhoneInput, etc.: Capture user inputs and store them in the page's data. 2. Function chooseAvatar: Allows users to select a profile picture. 3. Function saveContact: Submits form data and calls cloud database APIs to save the data​(addContact).
		Workflow	1. User Interaction: The user fills in the contact details such as name, phone number, email, address in a form presented on the "Add Contact" page. If the user chooses to upload a profile picture, they can do so via the file upload feature (handled by the chooseAvatar function). 2. Form Submission: When the user clicks the "Save" button, the saveContact function is triggered. This function collects all the form data stored in the page's data object and performs basic validation: 1. Checks if required fields (e.g., name and phone number) are filled. 2. If validation fails, an error message is shown using wx.showToast() to prompt the user to complete the form. 3. Data Handling: If the validation succeeds, the saveContact function constructs a data object containing the form inputs, including optional fields like avatar (profile picture) and note. The function then sends this data object to the backend by calling the cloud database's add method. 4. User Feedback: Upon successful submission: A success message ("Contact saved") is displayed using wx.showToast(). The user is redirected to the homepage (or another appropriate page) via wx.redirectTo().
	Backend	Functionality	Saves the contact information to the contacts collection in the cloud database.
		Implementation	Function 'contactsCollection.add': Adds a new record to the database, storing fields like name, phone, email, and address​(addContact).
		Workflow	1. Receiving Form Data: The saveContact function on the frontend sends the form data to the backend using the contactsCollection.add method. This method communicates with the cloud database and receives the submitted data as input. 2. Data Insertion: The cloud database processes the request and inserts the data into the contacts collection. Each contact record is saved as a document (name, phone, email, address, avatar, note, status, and associations.) 3. Response Handling: On successful insertion, the backend returns a success response to the frontend. In case of an error, the backend sends an error response, which is handled by the frontend to inform the user.

2.4 Import and Export

Import and Export	Frontend	Functionality	Allows importing contact data from an Excel file and exporting existing contact data to an Excel file.
		Implementation	Function 'importData': Uses wx.chooseMessageFile to select the file, processes it with the XLSX library, and submits parsed data to the database. Function 'exportData': Retrieves contact data from the database, formats it into an Excel file, and saves it to the user directory​(index).
		Workflow	1. File Selection: The user selects a file (Excel) to import contact data. Using the wx.chooseMessageFile method, which allows the user to pick a file from their device. 2. File Parsing: The selected file is read using the wx.getFileSystemManager().readFile method. The XLSX library processes the file content to parse it into a JavaScript array. 3. Data Validation and Upload: The parsed data is looped through to extract individual rows (representing contacts). For each row, the contactsCollection.add method is called to store the contact details in the cloud database. 4. User Feedback: After successful storage, a success message is displayed using wx.showToast.
	Backend	Functionality	Handles data storage during import and retrieval during export.
		Implementation	Import: Uses contactsCollection.add to insert records. Export: Uses contactsCollection.field().get to fetch all contact data​(index).
		Workflow	1. Data Storage: For each parsed row, a new document is inserted into the contacts collection using contactsCollection.add. The data includes fields such as name, phone, email, address, and optional fields. 2. Response Handling: The backend returns a success response for each document inserted. In case of an error, it logs the issue and notifies the frontend for user feedback.

2.5 Web Deployment

Web Deployment	Frontend	Functionality	Supports accessing the application features through a web browser.
	Backend	Functionality	Deploys APIs and cloud functions to handle requests from the web frontend.
		Implementation	Cloud functions are used to provide endpoints for data operations. A RESTful API can be deployed on cloud platforms like Huawei Cloud or Alibaba Cloud.
		Workflow	Database Integration: Use the same cloud database (contacts collection) as the mini-program.

3. Product Presentation

3.1 User Interface

Firstly, find SoCiaLConTacT in my Recently Used Mini Programs section and click to enter.
You will see the following user interface：

Currently, the data for the Mini Program Cloud Development Console is as follows:

3.2 Feature 1: Bookmark Contacts

Users can bookmark a contact by clicking the star icon next to the contact’s name. Once clicked, the icon changes to a filled yellow star, indicating that the contact has been successfully bookmarked. Clicking the icon again will remove the bookmark, reverting the star icon to its original outline, visually confirming the removal of the bookmark.


After Bookmark Contacts, the data in the Mini Program Cloud Development Console changed, the status changed to 2 (bookmarked):

3.3 Feature 2: Add Associated Contacts

Click the “View Associated Contacts” button to enter the interface for viewing contacts associated with this contact.

Enter the contact interface associated with Jiali, but there are no contacts associated with Jiali on this interface

Add by selecting existing contacts in the address book

At this point, the interface displays the contacts associated with Jiali, implementing the add multiple contact methods

3.4 Feature 3: Add Multiple Contact Methods

By clicking on the ‘Add Other Information’ button on the contact details interface

Allow more contact information to be associated with this contact

3.5 Feature 4: Import and Export

Users must provide data in the following predefined structures, including fields such as name, phone number, email, address, and notes. This ensures that the system can accurately parse information and store it in the database.

Click the ‘Import Contacts’ button below the mini program

Select an information table from the local file that meets the required structure specifications


Finally, the contacts will be automatically sorted in alphabetical order

The video demonstration of the import process is shown in the following figure

Click the Export Contacts button below the mini program

By clicking on the file management application inside the Android phone, click on the WeiXin folder in the internal storage to find the exported file.

The final exported data is consistent with the data we stored and meets the requirements for exporting data functionality

3.5 Feature 4: Web Deployment

Our project has successfully implemented Tencent Cloud cloud deployment, efficiently handling core functions such as data export and user identity acquisition through cloud functions. In our project, the two key features of exportData and getOpenId have been deployed and tested on Tencent Cloud, providing stable service support for users.

4. Teamwork

FZU ID	Name	Responsibilities		Contributions
832201126	谢荣城	Responsibilities	1. Design and develop the frontend modules, including page layouts and styles. 2. Implement user interaction logic. 3. Integrate the import and export functionality in the frontend. 4. Document the development process and write parts of the blog.	50%
		Work	1. Frontend Implementation: Responsible for key files such as index.js, addContact.js, and selectassociations.js. 2. UI Design: Designed the mini-program's interface style and user experience.
832201130	薛墨澜	Responsibilities	1. Set up the cloud backend, including database configuration and API interfaces. 2. Implement contact CRUD operations, association logic, and log recording functionality. 3. Handle backend logic for file upload/download. 4. Assist in frontend debugging and feature integration.	50%
		Work	1. Backend Implementation: Primarily responsible for cloud database operations and data interface development. 2. Technical Support: Resolved technical issues during development and optimized code structure.

5. Difficulties Encountered and Detailed Solutions

	Description	Solution Attempts	Results
谢荣城： Difficulty in Parsing and Importing Excel Files	Implementing the import functionality was challenging due to the variety of Excel file formats provided by users. Some files lacked proper headers, while others had inconsistent data types, leading to parsing errors or incorrect data import into the database.	Finding a Suitable File Parsing Tool: Initially, manual parsing of Excel data was attempted, but it proved inefficient due to the complexity of the formats. After searching for solutions on platforms like 优快云 and GitHub, we chose XLSX.js, which can parsing Excel files with support for multiple formats. After integrating the library, our team studied its official documentation and related tutorials to gradually master its usage for parsing Excel files.	Successfully implemented file parsing and import functionalities with standardized handling. The system effectively detects non-compliant files and provides clear feedback to users. Users can now seamlessly upload files using the standardized template, significantly improving the stability and accuracy of data imports.
		Designing a Standardized Template: We designed a standardized Excel template was designed early in the project, specifying column names and formats such as name, phone, email. Before importing data, users were provided with a template download link, and validation logic ensured that uploaded files adhered to the template structure.
		Local Testing and Debugging: Conducted multiple rounds of local testing using the WeChat Developer Tool by uploading files with different issues such as extra headers, missing fields to analyze error messages. Identified that encoding issues caused some files to fail parsing. After researching solutions online, our team resolved this using FileReader alongside XLSX.js to handle encoding problems.
薛墨澜： Synchronization Between Frontend and Backend	During frequent user operations such as quickly bookmark contacts and unbookmark contacts, discrepancies were observed between the frontend interface and backend database. For instance, the frontend would display a contact as bookmarked, while the database state remained unchanged.	Analyzing the Root Cause: By reviewing logs in the WeChat Cloud Development Console, our team identified that the issue was caused by improper handling of asynchronous requests, where the frontend refreshed the interface before receiving the database update result. After researching similar issues on 优快云, our team learned that proper use of Promises and callback functions could address this problem.	The optimized solution ensured stable synchronization between the frontend and backend, even during rapid user operations.
		Optimizing Asynchronous Logic in Frontend: Replaced nested callback functions in the frontend with async/await to ensure that the database update process completed before refreshing the interface. During local testing, our team used browser debugging tools and console.log statements to verify the correct sequence of data updates.
		Using Cloud Database Triggers: After studying the WeChat Developer documentation, the team implemented cloud database triggers to notify the frontend of changes in real time whenever the database state was updated. Combined this approach with a local caching mechanism to reduce the performance impact of frequent user actions.

6. PSP Table

• 832201126 谢荣城

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	240	300
• Estimate	240	300
Development	1200	1350
• Analysis	200	250
• Design Spec	150	200
• Design Review	90	120
• Coding Standard	60	80
• Design	200	250
• Coding	400	450
• Code Review	50	70
• Test	50	70
Reporting	360	300
• Test Repor	120	130
• Size Measurement	90	50
• Postmortem & Process Improvement Plan	150	120
Sum	1800	1950

• 832201130 薛墨澜

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	180	200
• Estimate	180	200
Development	860	1000
• Analysis	200	220
• Design Spec	150	180
• Design Review	90	100
• Coding Standard	50	60
• Design	180	200
• Coding	250	280
• Code Review	40	50
• Test	200	240
Reporting	300	320
• Test Repor	120	180
• Size Measurement	90	70
• Postmortem & Process Improvement Plan	90	70
Sum	1340	1520