EE308 LAB4

yeelanshan 2021-10-09 21:00:18

The Link Your Class	https://bbs.csdn.net/forums/MUEE308FZ
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/601188617
The Aim of This Assignment	the development of a Bobing software
MU STU ID and FZU STU ID	19103310_831901314
Teammate's MU STU ID and FZU STU ID	19104324_831901305
Teammate's blog link	https://bbs.csdn.net/topics/601429284
GitHub link	https://github.com/lanshannn/EE308_LAB4
Video demo link	https://www.bilibili.com/video/BV1DL4y1z7p8/

1. PSP FORM

Personal Software Process Stage	Estimated Time/hour	Real Time/hour
Planning	1	1.5
Estimate	2	2
Development	3	3
Analysis	4	5
Coding Standard	12	20
Coding	10	12
Code Review	2	4
Test	2	3
Reporting	1	1.5
Summary	37	52

2. Learning Progress Bar

N day	New code/line	Cumulative code/line	Learning time/hours	Debug	Total Learning Time (hours)	Important growth
10.3	50	50	3	0	3	Differences between app, applets and web
10.4	100	150	2	5	5	Fundamentals of applet design
10.5	160	310	7	1	12	Development of Front-end
10.7	400	710	6	3	18	Development of Back-end
10.8	320	1030	5	5	23	Connector (API)
10.9	210	1240	3	7	26	Improve the interface

3. Implementation

In this lab, we chose the developers of Wechat and Python to achieve the requirements of this Bobing Software.

1. Interface requirements
-   Beautiful design. UI design standard is unified, beautiful and delicate.
-   Users are easy to understand and use, which is in line with the usage habits of mainstream people.
2. Functional requirements
-   Six dice, randomly shaking to produce results.
-   Many people are allowed to participate, which can be in the form of stand-alone version or network, and can automatically judge the result.

3.1 Development of Front-end

We use Wechat developer tools to design the procedure of the Bobing game in JavaScript. I designed 7 pages for the whole game using wxml and JavaScript.

The user can choose whether to use his or her wechat head image and nickname and the number of players during the game.

Key function we used

(javaScript)using get the wechat information: wx.getUserProfile({})

wx.getUserProfile({
      desc:"...",
      success:function(res){
          that.setData({
            username:res.userInfo.nickName,
            path:res.userInfo.avatarUrl,
            words: "use defalt name",
            
            hide: false,
          })
      },
      fail:function(){
          that.setData({
            words: "use wechat nickname",
            username: "default",
            path: "https://s3.bmp.ovh/imgs/2021/10/77a830cbddfff9a8.png",
            hide: true,
          })
      }
})

jump to the page mentioned in the url:

(javaScript)using wx.navigateTo

wx.navigateTo({
     url: ''
})

(javaScript)using wx. redirectTo

wx.redirectTo ({
	url: ''
})// jump to the pointed page and destroy current one

(wmsl)using <navigator></navigator>

<navigator url=''>…</navigator>

jump back to the last page:

(javaScript)using wx. navigateBack

  back: function(){
    wx.navigateBack({
      changed: true
    })
  },

Communicate with back-end:

(javaScript)using wx.request

wx.request({
      url: 'http://127.0.0.1:9999/set_record', //address of the recevier
      method:"POST",
      data:{"user_id":'user',"record": this.data.sixTonesUser},
      success:(res)=>{
          console.log(res.data);
      }
})

Special rendering format:

(wxss)flex layout

3.2 Development of Back-end

In the back-end development, we use Python to store the front-end data, and the overall code use the Flask framework which we import the Flask, jsonify and request. In this part, we need to use the Back-end (Python) to receive the dice points from the Front-end and store them in the form of a two-dimensional list, and then we judge the results according to the rules of the game.

Firstly, we use the jsonify() to get all the data of dice point from Front-end.

@app.route('/')
def get_all():
    return jsonify(records)

Secondly, we define a function named get_data(), and use the request.args.get() access parameter to get the final result of Bobing.

@app.route('/get_records')
def get_records():
    user_id = request.args.get('user_id')
    if user_id in records:
        data = [item["pick"] for item in records[user_id]]
    else:
        data = []
    logging.info(f'get records, user_id={user_id}, response={data}')
    return jsonify(data)

Next, we define a function named set_ data(), which is used to collect and store the dice points corresponding to the username sent by the Front-end.

@app.route('/set_record', methods=["post"])
def set_record():
    data = request.json
    user_id = data.get('user_id')
    record = data.get('record')
    record = [val + 1 for val in record]
    status = 'failed'
    logging.info(f'set record, user_id={user_id}, record={record}')
    if user_id is not None and record:
        user_id = str(user_id)
        pick = _convert_record_to_pick(record)
        logging.info(f'pick={pick}')
        if pick != "":
            records[user_id].append({"record": record, "pick": pick})
            records[user_id] = records[user_id][-5:]
            status = 'success'
    return jsonify({'status': status})

Finally, we define a function named convert_record_to_pick() to convert the two-dimensional list of dice points received by the function into the corresponding ranking according to the rules of the game using. We use Counter() to find the number of different points.

def convert_record_to_pick(record):
    counter = Counter(record)
    if counter.get(2, 0) >= 5: #if the number of 2 is 5 or 6
        return "First Pick"
    elif counter.get(2, 0) == 4: #if the number of 2 is 4
        return "Fourth Pick"
    elif counter.get(4, 0) >= 4: #if the number of 4 is 4 or 5 or 6
        return "First Pick"
    elif counter.get(4, 0) == 3: #if the number of 4 is 3
        return "Third Pick"
    elif counter.get(4, 0) == 2: #if the number of 4 is 2
        return "Fifth Pick"
    elif counter.get(4, 0) == 1: #if the number of 4 is 1
        if set(record) == {1, 2, 3, 4, 5, 6}:
            return "Second Pick"
        else:
            return "Sixth Pick"
    else:
        return "Thank you!" #No prize
    return ""

3.3 Development of API

On the page of dice rolling (2 people / 3 people / 4 people), we use wx.request () to establish an API, then we set the URL to 'http://127.0.0.1:9999/set_record', and request to send the username and the corresponding randomly generated dice points to the Back-end.

wx.request({
    url: 'http://127.0.0.1:9999/set_record',
    method:"POST",
    data:{"user_id":'user',"record": this.data.sixTonesUser},
    success:(res)=>{
        console.log(res.data);
    }
})

In the record page, we still use wx.request () to request the Back-end return the processed data to the Front-end for display.

wx.request({
    url:'http://127.0.0.1:9999/get_records',
    data:{"user_id":"user"},
    success:(res)=>{
        console.log(res.data);
        that.setData({
            reslutFrompy: res.data
        })
    }
})

4. Photo

5. Working Experience of Pair Programming

In the process of pair programming, we faced many difficulties. Firstly, due to the lack of sufficient communication between us at the initial stage of working, we had some differences on the function implementation and workflow of the applet for Bobing. We spent a long time (and a small part of the quarrel) to confirm the final appearance of the applet and work towards this goal together.

I think pairing working requires timely and abundant communication and synchronous learning, so that the partner can understand your ideas in time and show a more perfect effect.

6. 3 Events in Working

1. The first event is to determine which way we should choose to realize the function of Bobing software. We have a preliminary understanding of the basic development of app, web and applet which make us have a foundation for related development in the future.

2. The second event is about how to deal with the data output from the Front-end. Considering that the Front-end can transmit a simple one-dimensional list and does not pass through the API, we discussed whether to use the Back-end and API for a long time. But finally, after testing, using Python as the Back-end can effectively reduce the workload of the Front-end and easily obtain the ranking results of the Bobing. So we chose to do Front-end and Back-end development, which gives us a deeper understanding of API and Back-end development.

3. The third event is about the network connection of applets. Due to time constraints, we finally failed to realize this function, but we learned the basic steps of applet networking, such as domain name configuration and SSL certificate generation. If we have the chance, we will try it again.

7. Summary

This lab is undoubtedly a great challenge for us. We spent a long time to determine the use of applet to realize the required function of Bobing, and then began to learn about the Front and Back-end development of applets and API related knowledge.
However, after completing the task, we feel a great sense of achievement for the work and study in the past 10 days, and believe that it will be very helpful for us to develop applets in the future.

...全文