Sprint Essay 4 about Implementation of comment section and online chat by FZU Flying Club

---

This assignment belongs to which course	EE308FZ Software Engineering https://bbs.youkuaiyun.com/forums/ssynkqtd-04
Where this assignment is required	https://bbs.youkuaiyun.com/topics/617606376
Team name	FZU Flying Club
The goal of this assignment	Help students understand Alpha Sprint and promote course project progress
Other references	None

1 Project burn chart

2 Video demonstration of Implementation of comment section and online chat

2.1 Comment section

Sprint Plan 4 demonstration video comment module

2.2 Online chat

Sprint Plan 4 demonstration video online chat module

3 Task code embedding area

3.1 Comment section

{% if page.meta.comments %}
  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
  <!-- Insert generated snippet here -->
  <script src="https://giscus.app/client.js"
        data-repo="MIECer/FZU-flying-book"
        data-repo-id="R_kgDOI405vQ"
        data-category="Announcements"
        data-category-id="DIC_kwDOI405vc4CT_WM"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>
  <!-- Synchronize Giscus theme with palette -->
  <script>
    var giscus = document.querySelector("script[src*=giscus]")

    // Set palette on initial load
    var palette = __md_get("__palette")
    if (palette && typeof palette.color === "object") {
      var theme = palette.color.scheme === "slate"
        ? "transparent_dark"
        : "light"

      // Instruct Giscus to set theme
      giscus.setAttribute("data-theme", theme) 
    }

    // Register event handlers after documented loaded
    document.addEventListener("DOMContentLoaded", function() {
      var ref = document.querySelector("[data-md-component=palette]")
      ref.addEventListener("change", function() {
        var palette = __md_get("__palette")
        if (palette && typeof palette.color === "object") {
          var theme = palette.color.scheme === "slate"
            ? "transparent_dark"
            : "light"

          // Instruct Giscus to change theme
          var frame = document.querySelector(".giscus-frame")
          frame.contentWindow.postMessage(
            { giscus: { setConfig: { theme } } },
            "https://giscus.app"
          )
        }
      })
    })
  </script>
{% endif %}

Comment:

The code is mainly used to integrate the Giscus comment system on the page and contains some custom theme colour logic.

1. {% if page.meta.comments %}: This is a conditional statement that checks if the comments field exists in the meta object of the page. If it exists, it indicates that the comments system needs to be displayed.

2. <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>: If the comments system exists, display a title on the page with the content from lang.t("meta.comments"), where the lang object is used for multilingual support. .

3. <script src="https://giscus.app/client.js" ... ></script>: This is the client-side script for the Giscus comment system. It introduces the JavaScript client for Giscus and sets some properties such as information about the repository, the comment category, the language, and so on.

4. <script> ... </script>: This is some custom JavaScript code that handles the logic for the Giscus theme colours. It consists of two parts:

   • The first part checks if there is any saved theme colour information when the page loads, and if there is, sets the Giscus theme colour based on the information.
   • The second part registers an event listener after the page is loaded to modify the theme colour of the comment system via the API provided by Giscus when the theme colour changes on the page.

Overall, the purpose of this code is to embed the Giscus comment system on the page and provide some custom theme colour functionality in the user interface.

---
title: 留言板

hide:
  #  - navigation # show right
  #  - toc # show left
  #  - footer
  #  - feedback  
comments: true  # Comments are not enabled by default

Comment:

This snippet of code is a configuration file to configure the site display and functionality options.

Specifically:

1. title: Message Board: This is a title for the page or the whole site, which is displayed as “Message Board”.

2. hide: This is a configuration for hiding page elements. In the comments, there are some options commented out, which means that by default these elements are visible. To hide these elements, simply uncomment the corresponding lines. For example, uncommenting the navigation line will show the right navigation bar.

3. comments: true: This setting indicates that comments are enabled by default. This may be used to specify whether the page allows users to leave comments at the bottom of the page. If set to false, the page will not display comments by default.

Overall, this code is a simple configuration file that controls the title of the site or page, the hiding and showing of display elements, and whether or not comments are enabled by default.

3.2 Online chat

Code:

<script src="//code.tidio.co/xebxozhlo9v7x3z0njoxqmhskzce9fav.js" async></script>

Effective display diagram:

Chat interface:

You can send text messages, emoji, transfer files.

We can set the style in the test:

4 Task code github repository

Link：
https://github.com/MIECer/FZU-flying-book

*Need VPN

5 Test Report about Comment section

1. Introduction

The main purpose of this test is to verify the stability, security and user-friendliness of the comment area function of the website, to ensure that users can post, view and manage comments smoothly.

2. Test scope

• Posting and displaying comments
• Deletion of comments
• Comment formatting and security
• User rights management

3. Test cases

3.1 Posting and displaying comments

• Verify that the user is able to post comments successfully.

• Ensure that the posted comments can be displayed correctly on the relevant pages.

• Test for delays or errors in the posting and display of comments in different network environments.

3.2 Deletion of Comments

• Ensure that edited comments are displayed correctly on the relevant page.

• Verify that users are able to successfully delete their posted comments.

• Ensure that deleted comments are correctly removed from the page.

3.3 Comment Formatting and Security

• Test that text entered in comments in different formats (e.g., bold, italic, hyperlinks) displays correctly.

• Verify that entering special characters and scripts in comments is correctly filtered to ensure protection against malicious attacks.

3.4 User rights management

• Verify that regular users cannot edit or delete comments posted by other users.

• Ensure that administrators are able to successfully edit and delete any comments.

• Verify that unlogged-in users can access the comments feature and ensure that only registered users can post comments.

4. Test Results

• The posting and displaying of comments functioned stably and users were able to post and view comments without any problems.
• In terms of editing and deleting comments, user rights management is well implemented.
• In terms of comment formatting and security, the system correctly filters special characters and scripts to ensure the security of user input.

5. Recommendations and Improvements

• In response to the delay problem in some network environments, it is recommended to optimise the performance of comment submission and display.
• Add support for rich text format so that users can express their comments more richly.
• Conduct regular security checks on the commenting system to ensure that it can effectively prevent potential malicious attacks.
• Provide more detailed error tips to help users better understand and solve problems.

6. Test Summary

Through this test, we have comprehensively verified the function of the comment area of the website to ensure its stability and security. It is recommended to conduct regular functionality and security tests before releasing new versions to ensure that users can always enjoy a stable, secure and user-friendly commenting experience.

6 Test Report about Online chat

1. Introduction

The main purpose of this test is to verify the stability, real-time, security and user-friendliness of the online chat function of the website, and to ensure that users can chat and communicate smoothly.

2. Test Scope

• Sending and receiving chat messages
• Emoticons and multimedia messaging support

3. Test cases

3.1 Sending and Receiving Chat Messages

• Verify that the user can successfully send text messages.

• Ensure that the sent message can be received by other users in real time.

• Test for delays or errors in sending and receiving messages in different network environments.

3.2 Emoticons and Multimedia Messaging Support

• Verify that users can successfully send symbols and Emoji.

• Ensure that users can successfully send multimedia messages such as emails, pictures, files and so on.

• Test that multimedia messages are displayed and played correctly on different PCs.

4. Test Results

• The sending and receiving of chat messages was stable, and users were able to communicate with each other in real-time without any problems.
• Emoticons and multimedia messages are well supported, and users can freely send rich forms of expression.

5. Suggestions and Improvements

• Optimise the performance of message sending and receiving to reduce the delay under different network environments.
• Provide richer emoticons and Emoji libraries to enhance users’ chatting experience.
• Conduct regular security checks on the chat system to ensure that it can effectively prevent potential malicious attacks.

6. Test Summary

Through this test, we have fully verified the online chat function of the website to ensure its stability and security. It is recommended to conduct regular feature and security testing before releasing a new version to ensure that users can always enjoy a stable, secure and user-friendly online chat experience.