• 作业发布
  • 作业布置
  • 全部

EE308 LAB4

龟- 2021-10-10 01:43:55
The Link Your Classhttps://bbs.csdn.net/forums/MUEE308FZ
The Link of Requirement of This Assignmenthttps://bbs.csdn.net/topics/601188617
The Aim of This Assignmentthe development of a Bobing software
MU STU ID and FZU STU ID19104324_831901305
Teammate's MU STU ID and FZU STU ID19103310_831901314
Teammate's blog linkhttps://bbs.csdn.net/topics/601422725
GitHub linkhttps://github.com/lanshannn/EE308_LAB4
Video demo linkhttps://www.bilibili.com/video/BV1DL4y1z7p8/

 

1. PSP FORM

Personal Software Process StageEstimated Time/hourReal Time/hour
Planning11.5
Estimate22
Development33
Analysis45
Coding Standard1220
Coding1012
Code Review24
Test23
Reporting11.5
Summary37

52

 

2. Learning Progress Bar

N dayNew code/lineCumulative code/lineLearning time/hoursDebugTotal Learning Time (hours)Important growth
10.35050303Differences between app, applets and web
10.4100150255Fundamentals of applet design
10.51603107112Development of 

Front-end

10.74007106318Development of 

Back-end

10.832010305523Connector (API)
10.921012403726Improve 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 tool to design the procedure of the Bobing game as an applet. 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 wx.getUserProfile 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:

(In .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.

...全文
86 点赞 收藏 回复
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复

还没有回复,快来抢沙发~

相关推荐
发帖
福州大学-软件工程EE308-2021秋
创建于2021-09-10

185

社区成员

福州大学 梅努斯国际工程学院 软件工程 教学
帖子事件
编辑了帖子
2021-10-13 19:40
编辑了帖子
2021-10-10 01:51
创建了帖子
2021-10-10 01:43
社区公告
暂无公告