EE308FZ LAB2-2

[SweetCookiey]

The Link Your Class	https://bbs.csdn.net/forums/MUEE308FZU202201
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/608859318
MU STU ID and FZU STU ID	20123671_832002217
Teammate's MU STU ID and FZU STU ID	20124601_832002211
Teammate's blog link	https://bbs.csdn.net/topics/609128372
GitHub link	https://github.com/aSweetCookie/EE308FZ_LAB2
Video demo link	https://www.bilibili.com/video/BV1rv4y1S7Fe/?vd_source=74ee6e134a8d3b785417c5e89eb0e8dd

---

CONTENTS

• 1. PSP
• 2. Learning progress bar
• 3. The key or difficult functions and programming thinking
• · How to get well organized prototype code
• · How to jump between multiple html files and how to transfer variables
• · How buttons and text boxes fit on the screen
• 4. Cooperation photos
• 5. Pair programming experience
• 6. The events that take a long time and great gains
• · Using prototype software Figma
• · Connecting prototype model code and logic code
• · Coding
• 7. summary

---

1. PSP

Stages	Estimated time (min)	Real time(min)
Planning	30	35
Estimate	40	40
Development	30	45
Analysis	45	60
Design Spec	10	10
Design Review	15	15
Code standard	10	10
Design	90	120
Coding	600	800
Code review	400	600
Test	20	30
Reporting	45	25
Test Report	30	30
Size Measurement	10	30
Postmortem&Process Improvement	60	90
Total	1435	1940

2. Learning progress bar

Week N	Added code (lines)	Cumulative code (lines)	Study Time this week (hours)	Cumulative learning events (hours)	Important Growth
1	100	100	10	10	Learn about various prototyping software and compared their advantages and disadvantages, and learned how to make prototypes.
2	230	330	13	23	Understand the underlying code logic of figma and master the ability to write html files independently.

3. The key or difficult functions and programming thinking

· How to get well organized prototype code

After the prototype is completed on figma, the prototype code we export is multiple files with both css files and html files, and there is no relevant code to jump between pages. Such code is not only complex but also incomplete. So we decided to write our own html code, so that we can understand the html code idea of the prototype while learning html.

· How to jump between multiple html files and how to transfer variables

In order to solve the problem of using code to realize page jump and transfer variables between different pages, we searched a lot of information, and finally solved these two problems by using window.location.href to obtain the url link string.

· How buttons and text boxes fit on the screen

At the beginning, when we fixed the position of buttons and text boxes on the page with code, the position of buttons and text boxes always changed with the change of screen size. After some discussion and search, we finally replaced the pure value with percentage, thus solving the problem that buttons and text boxes adapt to the screen.

4. Cooperation photos

5. Pair programming experience

Experience 1: Rational division of labor enables everyone to perform their duties, so as to complete the project efficiently.
Experience 2: Communicate with teammates in time when encountering problems, so as to brainstorm and solve problems efficiently.
· In general, in the process of pair programming, we realized that one plus one is more effective than two. Because of pairing programming, we can think of more functions and details to make our project more complete, and we spend less time to solve the problems we encounter. The most important point is that when ideas get stuck, our communication can make the problems seem less difficult to solve, so that we have more confidence than we have when doing projects alone

6. The events that take a long time and great gains

· Using prototype software Figma

We spent a lot of time on interface design when we used figma to make prototype models. We know how a program realizes the interface jump function, how to beautify a program, and how to improve the user experience.

· Connecting prototype model code and logic code

In the process of learning how to realize this problem, we had a lot of discussions. During the discussion, we learned that not all prototyping software can export prototype code. Figma can only export code for adjusting parameters. We need to supplement the complete code by ourselves.

· Coding

The process of learning the web language html has lasted for a long time. In this process, we have understood the underlying code logic of figma and mastered the ability to write html files independently.

7. summary

This is my first time to write a complete interactive program. I have only written a few simple programs, and I have not designed a visual interface, which has no such rich and complete functions. This is also my first team project. During the past two weeks, my teammates and I discussed with each other, divided our work, and had many unforgettable experiences. At the moment of making the result, this sense of achievement from scratch fills our hearts.
This project has made me grow a lot. On the one hand, I learned a web language, learned to use a prototyping software, learned how to design UI, and learned how to optimize the user experience. On the other hand, I learned some cooperation skills, such as how to communicate different ideas, how to divide labor, and how to work together.