Application for making friends suggestion on the website and mobile platforms faculty of high quality training graduations thesis of the information technology

TOPIC OVERVIEW

Reasons for choosing the topic

To create an engaging application that fosters connections among individuals with shared interests and personalities, the development team conducted thorough research, including consultations of existing apps and interviews with potential users This process aimed to identify essential features that would enhance the app's functionality, ultimately helping users make new friends and enjoy leisure time after work or study.

This engaging topic appeals to young individuals and fosters a strong sense of team spirit Additionally, its broad scope allows for easy development and expansion in the future, as the team aims to use this project as a foundational step toward building a comprehensive application.

Target of researching the topic

The team has three main targets when we were implementing this project:

• The application has ability to find friends based on similar features, such as interests, personality and age

• The application has ability to real-time communicating, users can send real-time messages and video call to each other

• Authenticate methods are required to ensure user information is kept confidential The team divided the time to make this project into two phases

In the Major Essay phase, the team has completed some basic functions for the website:

• Login, register with confirmation by email

• Completed the similarity calculation algorithm

• Sign up for newsletter via MailChimp

In the Graduation Dissertation phase, the team has many features that want to be improved (compared to Major Essay) and integrate some new features, such as:

• User interfaces need to be improved for eye-catching and ease-to-use

• Install an SSL certificate that we can use third-party integrations that require a trusted connection

• Using Deep Learning to detect the “bad” images which are not suitable for social networking and our application becomes healthier

• Develop and integrate real-time notifications to users

• Integrating Voice/Video call function.

Technologies

The team develop the project consists of two parts: o Back-end:

+ Using the ASP.NET Core programming language to create the APIs

+ Using SQL Server to store the database o Front-end:

+ Mobile platform: Flutter with Dart.

THEORETICAL BASIS

ASP.NET Web API

ASP.NET Web API is a powerful framework designed for building HTTP web services, functioning as a modern RESTful API It adheres to the principles of REST and other relevant standards, making it ideal for today’s web applications and online services.

Web API possesses outstanding advantages compared to an old API, helping it to gain a lot of trust from website developers and programmers.

ASP.NET SignalR

ASP.NET SignalR is a powerful library designed for ASP.NET developers, enabling them to easily incorporate real-time web functionality into their applications This functionality allows servers to instantly push content to connected clients, enhancing user experience and interactivity.

It is different from the normal HTTP protocol: the server waits for requests from the client and returns the corresponding content.[1]

Flask API Python

Flask is a micro-framework for web development, created using the Python programming language As a standalone environment, it relies minimally on external libraries, making it lightweight and reducing the likelihood of errors caused by dependencies This simplicity allows for easier detection and management of security vulnerabilities.

WebRTC – Real Time Communication

WebRTC (Web Real-Time Communication) is a web API created by the World Wide Web Consortium (W3C) that enables direct communication between browsers through video calls, voice calls, and peer-to-peer (P2P) data transmission, all without the need for additional plugins or external software.

Flutter with Dart

Flutter is Google's mobile UI framework for creating high-quality interfaces on iOS and Android in a short amount of time.[4]

Dart is a versatile programming language created by Google and standardized by ECMA (ECMA-408) It is designed for developing web, server, desktop, and mobile applications As an object-oriented language, Dart features class definitions and automatic garbage collection Additionally, it supports various programming concepts, including interfaces, mixins, abstract classes, generics, static typing, and sound typing.

SYSTEM ANALYSIS AND DESIGN

Survey of related products

The platform offers essential functions such as account registration and login via system accounts or Facebook Users can explore a list of suggested profiles, sorting by image, relevance, or last activity, and can filter matches based on gender, age, country, and city Detailed user information is accessible, allowing interactions like liking profiles, messaging, or blocking users An advanced search feature enables filtering by appearance and lifestyle, while users can manage conversations through categorized lists (received, favorites, sent, trash) and create message filters Activity tracking allows users to see who liked or viewed their profiles, as well as their own interactions with others Personal profiles can be edited for better matchmaking, and users can post images and set display permissions Additionally, account security is maintained through password changes and email updates, alongside customizable system notification settings.

This platform offers essential features for social networking and dating, allowing users to easily register for an account to access its basic functions Users can modify their personal information at any time, and the system conveniently utilizes geolocation to determine their current location Additionally, it provides the option to customize display permissions for individual profiles, enhancing user privacy and control.

The platform has several disadvantages, including the necessity for a membership upgrade to access certain features such as viewing compatible users and removing matches Additionally, the interface lacks visual appeal and can be challenging to navigate Furthermore, there is no option for email verification of accounts, which may raise concerns about security and authenticity.

The platform offers a range of functions for users, including the ability to register and log in using a system account, Facebook, or Google Users can view their profile, which includes an overview, photos, interests, and notifications They can post images and edit personal information such as relationship status and habits Additionally, users can access lists of suggested users with compatible personalities, see users they have liked, and view those who like them The messaging feature allows users to view their message list, communicate with others, and add contacts Furthermore, users can view detailed information about other users, send likes, message them, or block them as needed.

This platform offers essential features for socializing and dating, allowing users to easily register for an account and access its basic functions Personal information can be updated at any time, ensuring flexibility With a user-friendly interface, navigating the site is straightforward Additionally, the system provides numerous options for users to customize their search criteria, enhancing the accuracy of finding the right match.

The platform has several disadvantages, including a simplistic interface that may not meet user expectations, an inadequately arranged user list layout, and poorly organized function tabs on the sidebar Additionally, the lack of email verification for account setup raises concerns about security and user experience.

The platform allows users to register and log in using their system account or Facebook, and requires email verification for account security It features suggestions for nearby users and provides detailed profiles, enabling users to like, message, or block others Users can send "Crush" notifications, add favorites, and give gifts, while also setting preferences for interests and distance to find compatible friends Additionally, users can view lists of suggested matches based on personality, see who they have liked, and discover who likes them in return Personal information such as relationship status, habits, and work can also be edited for a more tailored experience.

Registering an account on our platform allows you to access essential features for suggesting friends and dating, all while enjoying a user-friendly interface New users can easily verify their accounts via email and refer to the available user manual for guidance Additionally, personal information can be adjusted later, ensuring flexibility and convenience for all users.

• Disadvantages: o The system has very few requirements on factors such as hobbies, work, so finding the right person will not be accurate

The platform offers a seamless registration process using a phone number and allows users to log in via their Apple account, Facebook, or phone number, with OTP verification for phone logins Users can discover nearby individuals by leveraging location services and can interact with suggested users by swiping left to ignore or right to favorite them The messaging feature enables communication with other users, while a message list keeps track of conversations Users can post images, view and edit personal profiles to enhance their search for compatible friends, and manage their contacts, including blocked users Additionally, the system settings allow users to adjust distance preferences for locating nearby individuals.

This platform offers a comprehensive suite of essential features for social networking and dating, ensuring a seamless user experience Users can easily modify their personal information as needed, and the interface is designed to be intuitive and user-friendly Enhanced security is provided through OTP verification during phone number logins, adding an extra layer of protection Additionally, the system includes convenient operations that enhance usability for all members.

• Disadvantages: o There are many limited functions, requiring users to upgrade their accounts to use good functions

The platform offers a variety of functions, including the ability to view suggested users and access a message list for seamless communication Users can engage in messaging, add contacts, and view detailed profiles, where they can like, message, or block others Additionally, the platform displays a feed of recent activities and utilizes location services to help users discover nearby individuals Users also have the option to view and edit their personal information, such as relationship status and habits, enhancing their overall experience.

This platform offers essential features for social networking and dating, allowing users to easily register and access basic functionalities Users can later modify their personal information as needed, ensuring flexibility With its intuitive and user-friendly interface, navigating the site is a seamless experience.

• Disadvantages: o Has less functionality than the web version o Do not verify your account via email

Through the survey that the team conducted, the team extracted the functions that should be developed for the project:

The platform offers essential website features for friend suggestions and dating, allowing users to register and log in via the system or Facebook Users can explore suggested profiles, filter and search for compatible matches by adjusting specific criteria, and view their message list for communication with others Additionally, users can access and edit personal profiles to enhance their chances of finding suitable friends, manage contacts, and view blocked users The system also includes settings for personal preferences and distance to help users connect with individuals nearby.

The administrator has the ability to monitor user statistics, including the total number of active users, registered accounts, and growth rates Additionally, the admin can analyze user traffic data sourced from websites, Facebook, or Google accounts Furthermore, the administrator possesses the authority to manage and change the operational modes of user accounts.

The mobile app allows users to log in using their system account or Facebook, making it easy to connect with others Users can swipe to discover suggested friends and access their message list for seamless communication The platform enables users to post images, view and edit personal profiles to find compatible friends, and manage their contacts, including blocked users Additionally, users can adjust system and distance settings to search for nearby individuals, view notifications, and access detailed user information, including the option to like or block other users.

Requirements modeling

The application of making friends suggestions has user groups as guest, logged in user, and system administrator

Before logging in, guests can view a list of popular members and browse their posted photos If they don't have an account, guests have the option to sign up Additionally, they can subscribe to receive updates via email.

Users can log in using their system account or through Facebook, and they have the option to create a new account or recover a forgotten password Once logged in, the system suggests friends with similar personalities and interests, allowing users to connect with others Users can view detailed profiles of their friends, including a list of photos posted on their profiles They can also send messages to friends and search for them using various filter criteria Additionally, users can mark friends or photos as followers or favorites, and they have the ability to edit their personal information and upload pictures to their profiles.

Administrators have the ability to monitor user statistics, including the total number of active users, registered accounts, and overall growth rate They can analyze user traffic data from various sources such as the website, Facebook, or Google accounts Additionally, administrators possess the authority to manage and change the operational modes of user accounts.

Table 3.1: The functions of system

Use cases Guest User logged in Admin

UC_1 View the list of the most liked people

UC_2 View the list of newcomers

UC_3 Sign up to receive information via email

UC_5 Login with system account

Use Case No UC_1 Use Case Version 1.0

Use Case Name Post images

Author Lê Quốc Nguyên Vương

- Allows users to add personal photos

- User must log in to the system

- Success: the user can add photos to the list of photos

Step Actor Action System Response

Users click on the User Icon in the right corner of the screen

Redirect to the user's profile page

Click "Add Image" button The system appears a dialog box to drop photos and use the message

3 User selects image (with png extension)

The system will add the image to the backend

No Actor Action System Response

Users post photos with different extensions png and jpg

The image will be corrupted in the photo list

- Select the correct Icon on the right corner of the screen, then click post image b Filter/search users

Table 3.3: Filter/search users

Use Case Name Filter/search users

- Allows users to find friends with desired characteristics such as education, age, gender, etc

- Filter out people with desired characteristics

- Success: The list of filtered people appears

- Fail: Could not find the desired people

1 Click on "Search on the

Redirect to user filter page

2 Choose the characteristics of the desired people

The tags that the user selects appear in the tag bar

Click “Filter user” The system loads and displays a list of users with matching characteristics

No people were found matching the request

Use Case Name Detect image

- When a user posts an image, the image will be evaluated, if it meets the conditions, it will be published

- Pictures are properly rated Pictures are properly rated Prevent bad images and allow non-bad images

- Fail: Image blocked by detection service

1 Upload an image Load spinner

To begin the process, the image is uploaded to the main server, where it undergoes evaluation by the detection service Following this assessment, a rating is generated and retrieved from the database to determine the relevant condition Finally, the rating is compared with the condition to produce the results.

The image does not meet the conditions, report images for violation and under review

2 The image meet the conditions, successful upload notification d Real-time messaging

Table 3.5: Real-time messaging

Use Case Name Real-time messaging

- Allows users to message each other real-time

- Can chat real-time while both are online

- Success: The message was sent successfully, and the receiver received the notification

1 View a user's profile then tap the message button

2 Enter the text of the message

The message content is displayed

Your message has been sent to

Message: “Cannot send message at this time”

Business Rules: e Real-time Voice/Video Call

Table 3.6: Real-time Voice/Video Call

Use Case Name Real-time Voice/Video call

- Allows users to call video with each other real-time

- Can call video real-time while both are online

- Success: Users can talk to each other via video call

1 View a user's profile then tap the message button

Click the button with the icon “Phone”

The system will connect the video call with the other user And the other user will get a notification

1 Click the button with the icon “Phone”

(Account is locked or not online)

Message: “Cannot send message at this time”

Business Rules: f Block Video Call

Table 3.7: Block Video Call

Use Case Name Block messaging

- Allows users to block video call from a person

- Unable to receive or send video call to the blocked person

1 User enters the messaging page

The list of messengers is displayed

Click on a message from the person he wants to block

Messages between 2 people are displayed

3 Click the button in the upper right corner

4 Click “Block Video call” Message: “Video call blocked from

Business Rules: User logged in

3.2.3.2 Mobile platform a View users with similar suggestions

Table 3.8: View users with similar suggestions

Use Case Name View users with similar suggestions

- Allow users to view users with similar suggestions in Home Screen

- User can view users with similar suggestions

- User must log into the system

- Success: Can view users with similar suggestions

1 Access Home tab on the navbar

Click the button “Similar suggestion”

Similar users are displayed as cards, with avatars and basic information Drag right to see other users

Press “Heart” icon to follow/favorite

Press “Profile” icon to view profile information

The system changes the white icon to red and vice versa That user's favorites will increase or decrease

Redirect to user’s Profile Screen

The system will change the state for these 2 buttons

5 Click “Block” icon Block popup is displayed

6 Click “Relationship” at upper right corner

List of relationship is displayed

Click on dropdowns about Information, Hobby, Search

Information of each type will be displayed

1 There are too few similarities

The system cannot find similar users to display

Business Rules: User must log into the system b View a list of users near the area

Table 3.9: View a list of users near the area

Use Case Name View a list of users near the area

- Allow users to view a list of users near the area in Home Screen

- User can view a list of users near the area

- User must login to the system

- Success: Can view a list of users near the area

1 Access Home tab on the navbar

2 Click the button “Users near the area”

Suggested setting popup is displayed

3 Press “Setting” button Redirect to Search location settings Screen

4 Edit search information Information is displayed on textboxes

The system will delete the information that the user has just entered on textboxes

The system will save the information and display the nearby users

Press “Heart” icon to follow/favorite

Press “Profile” icon to view profile information

The system changes the white icon to red and vice versa That user's favorites will increase or decrease

Redirect to user’s Profile Screen

The system will change the state for these 2 buttons

8 Click “Block” icon Block popup is display

9 Click “Relationship” at upper right corner

List of relationship is displayed

Click on dropdowns about Information, Hobby, Search

Information of each type will be displayed

1 There are too few similarities

The system cannot find similar users to display

Business Rules: User must log into the system c View list of friends

Table 3.10: View list of friends

Use Case Name View list of friends

- Allows users to view list of friends

- User can see the list of friends

- Success: View the list of friends

1 Access Friend tab on the navbar

Redirect to List of friends Screen

2 Enter name of friend The corresponding friends will be displayed

3 Click “Profile” button Redirect to friend’s Profile Screen

4 Click “Photo” button Redirect to the screen that user can view the photo of their friend

User entered the correct friend’s name, but the server crashed

2 User entered the incorrect friend’s name

Business Rules: User must log into the system d View list of conversations

Table 3.11: View list of conversations

Use Case Name View list of conversations

- Allows users to view list of conversations

- User can view list of conversations

- Success: View list of conversations

1 Access Message tab on the navbar

Redirect to List of conversations Screen

2 Enter name of friend The corresponding conversation with friends will be displayed

Click on the conversation Redirect to Message Screen

Messages between two users are displayed

Type any message, attach image or icon

Message, image, icon is displayed

User entered the correct friend’s name, but the server crashed

2 User entered the incorrect friend’s name

Business Rules: User must log into the system e View user profile

Table 3.12: View user profile

Use Case Name View user profile

- Allows users to view user profile

- User can view user profile

1 Access Profile tab on the navbar

Redirect to Profile Screen of user

Click “Profile” button Redirect to Personal Profile Screen

User can view and edit their information on this screen

Click “Setting” button Redirect to Setting Screen of system

User can change password, view list of users blocked, search location settings

Click “Add images” button The system appears a dialog box to drop photos and use the message

5 Click “Post” button The system will save the posted images and display on the screen

1 The server crashed Message: “Server error”

Business Rules: User must log into the system.

Sequence diagram

Figure 3.2: - Post images sd Post Image

Client ImagesController ImagesServcie StorageService ImageDetectService ImagesRepository

:scores saveStatus() saveImage (img) detectImage(img) checkCondition(imageScores, approvalScores)

Figure 3.3: - Real-time messaging sd Nhan tin

3.3.3 Video call and voice call

Figure 3.4: - Real-time Video call sd WebRTC

Client A SignalR Client B server setRemotePeerConnection() addCandidate() offer() addStreamToPeerConnection() sendCandidate() offer() CreateOffer() getUserMedia() answer() setRemotePeerConnection() answer() createAnswer() sendCandidate()

ICE Candidate() addStreamToPeerConnection() createPeerConnection() sendCandidate() sendCandidate()

Database design

Id Name WeightRate IsCalculated IsSearchFeature

Id Active AutoFilter Drawings Hentai Neutral Porn Sexy UpdatedAt

Id FromId ToId Type CreatedAt

IdEmailUserNamePhoneNumberPassWordRoleTypeAccountFullNameGenderAvatarPath

User interface design

Figure 3.10: Result of search friends

Figure 3.14: Zinger Screen (Home page)

The HomePage screen offers users suggestions for similar objects, enhancing their browsing experience Additionally, when users choose to search for objects based on recent locations, the results will be tailored to display items within their specified radius.

Figure 3.15: Filter setting Screen

The screen shows a list of friends that the user has followed User can view profile or image of tracked object

The screen displays a list of friends who have sent messages to the current user Existing users can view the content of the most recent message By tapping on a specific friend, the user will be directed to the messaging screen associated with that friend.

This screen shows the entire conversation between the user and the selected object The user can message with the object in this screen

The screen shows the latest messages received from the object to the user

The screen displays the account's current information, allowing users to upload new images from their device to post on the server Additionally, users can access their detailed profile and navigate to other settings within the app.

Figure 3.22: Setting Location Screen

Figure 3.23: Voice/Video calling Screen

Screen is calling with friends in two modes of video call and normal call.

INSTALL PRODUCT CODE

Back-end

The Onion Architecture, introduced by Jeffrey Palermo in 2008, enhances application development by improving testability, maintainability, and reducing dependency on infrastructure components such as databases and services Its primary goal is to overcome the limitations of traditional 3-tier or n-tier architectures, effectively addressing issues related to coupling and promoting a clear separation of concerns.

Figure 4.1: API Server Architecture diagram

To ensure compliance with social standards and fine customs, the team has implemented a monitoring service that controls image uploads within the system, preventing users from freely submitting inappropriate photos.

After conducting thorough research, the team faced challenges in data collection and model validation due to the unique characteristics of the data, resulting in suboptimal model performance Lacking the necessary resources and facilities for extensive training using CNNs, the team opted to utilize pre-trained models available on GitHub to enhance their results.

The classification model categorizes images into five distinct classes: two are deemed safe (Drawings and Neutral), one is considered suggestive (Sexy), and two are classified as unsafe (Hentai and Porn) The safe category includes 15,566 samples of drawings and 36,873 samples of neutral images The unsafe category comprises 4,611 samples of hentai and 57,289 samples of pornographic images, while the suggestive class contains 15,957 samples of sexually explicit images that do not qualify as pornography.

- The dataset has a total of 130,296 JPG format images, with different sizes

- Model’s input, output: o Input: Image, JPG, PNG, GIF format o Output: Accuracy/classes, score is float number

The data is trained using by CNN and Inception V3 network architecture - the famous CNN architecture developed by Google, which gives very high accuracy, safety and is more user-friendly

From the confusion matrix, we can see that the accuracy on each class is very high, over 93% and can meet the needs of the system

Flask is a lightweight Python web framework ideal for applications focused on specific tasks, such as image prediction and scoring Upon image upload, the file is saved on the server and sent to the detection server for class scores These scores are then compared against the administrator's configuration, and if they meet the required criteria, the image is published.

Front-end

The team using Flutter with Dart to build the front-end for mobile application The following is a general description of the Flutter architecture for building application

Figure 4.4: General architecture of mobile

Figure 4.5: Overview of mobile structure a ZingerScreen

When the user is active on the ZingerScreen screen, user can activate functions to jump to the screens such as:

- View the details of another user, then the user will be redirected to the ProfileDetailsScreen screen

- View another user's image, then the user will be redirected to the ImagesScreen screen to be able to see the entire image of the selected user

When users exhaust the number of friends found using the recent friend search function in the application, the system prompts them to adjust their search attributes Upon acceptance, users are redirected to the SettingLocationScreen to update their settings, allowing them to refine their search on the FriendsScreen.

When the user is active on the FriendsScreen screen, user can see a list of other users that they are following in the application c MessageScreen

On the MessageScreen, users can view a list of individuals who have sent them messages By selecting a specific user, they will be directed to the InPersonChatScreen, where they can initiate a chat with that person Additionally, users can access the NotificationsScreen for updates.

The NotificationsScreen serves as a hub for users to view important notifications from others, including likes, follows, and relationship updates This feature enhances user engagement by keeping individuals informed about interactions that matter to them.

Notifications Provider to store and process the functionality at the NotificationsScreen screen e ProfileScreen

The ProfileScreen displays essential user information and offers functionality through the UsersProvider handler class Users can upload images from their devices to the server using the storage layer, Asset, and the connection layer, ImagesService Additionally, the AcceptCallScreen and VideoCallScreen enhance user interaction.

When a user initiates a call through the application, real-time information is transmitted to the SignalRService Upon receiving a notification of an incoming call, the application seamlessly transitions to the AcceptCallScreen, where the user waits to accept the call.

Upon accepting the call, users will be directed to the VideoCallScreen The call's information will be organized within two object classes, IUser and UserSimilar, ensuring easy access to essential details.

In the VideoCallScreen, communication occurs between the frontend and backend to establish a call connection between two users through the SignalRService class When a user initiates the call, they are directed to the VideoCallScreen and must wait for the recipient to accept the connection.

COMPARATIVE RESULTS, EXPERIMENTS, ANALYSIS 62

Comparative results

For both stages of project development: The Major Essay and the Graduation Dissertation The team set out to build a Friend Suggestion System with the following basic functions:

• The application has ability to find friends based on similar features, such as interests, personality and age

• The application has ability to real-time communicating, users can send real-time messages and video call to each other

• Authenticate methods are required to ensure user information is kept confidential

In the Major Essay phase, the team has completed some basic functions for the website:

• Login, register with confirmation by email

• Completed the similarity calculation algorithm

• User interaction: Like, follow, like photos

• Sign up for newsletter via MailChimp

At the end of the development phase for the project, the team has completed a number of functions as follows:

The team has successfully created a friend-suggestion application that operates as a social network, allowing users to search for and connect with friends through both the website and mobile devices.

• Installed an SSL certificate that we can use third-party integrations that require a trusted connection

• Used Deep Learning to detect the “bad” images which are not suitable for social networking and our application becomes healthier

• Developed and integrated real-time notifications to users

• Integrated Voice/Video call function

The mobile platform offers essential features for user interaction, including the ability to log in with an existing account registered via the website Users can discover and connect with others based on compatibility or through a targeted search within a specified range The app allows users to view their friends list and access profile information, as well as send real-time messages to friends Additional functionalities include following and favoriting other users, managing notifications for user interactions, and viewing personal profile details Users can customize system settings, adjust their search scope, change passwords, and manage a list of blocked users by blocking or unblocking them as needed.

Experiments

Test Case ID ZW_1 Test Case Description Test for chatting function

Created By TG_Han Reviewed By LQN_Vuong Version 1.0

Tester's Name TG_Han Date Tested 06/07/2021 Test Case

1 Access to Zinger website 1 Message = “Alo alo 1234”

2 Login to the software successfully

Step # Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended

Home page is displayed As expected Pass

2 Click on conversation icon at upper right corner

List of conversations is also displayed Displays the conversation with the user who messaged most recently

3 Click on any username in the list on the left

The conversation between the user and the other user is displayed

The message is displayed on the textbox

5 Press “Enter” button on keyboard

The message is sent successfully to the other user and displayed on the conversation

As expected Pass b Voice/Video call function

Table 5.2: Voice/Video call function (1)

Test Case ID ZW_2 Test Case Description Test for Voice/Video call function

2 Click on conversation icon at upper right corner

List of conversations is also displayed Displays the conversation with the user who messaged most recently

3 Click on any username in the list on the left

The conversation between the user and the other user is displayed

4 Click on phone icon at upper right corner

The system starts to connect and make voice call with the other party

5 Click on camera icon at upper right corner

The system starts to connect and make video call with the other party

Test Case ID ZW_3 Test Case Description Test for Voice/Video call function

(Receive the call from other user)

2 At any page on the website, when receiving

The message is displayed on the screen

As expected Pass a voice/video call from another user

3 Click on “Chấp nhận” button

The call is connected between two users

4 Click on “Từ chối” button

The call is not be made and disconnected

5 Click on red phone button

The call is stopped As expected Pass c Post image on newsfeed function

Table 5.4: Post image on newsfeed function

Test Case ID ZW_4 Test Case Description Test for posting image on newsfeed function

1 Access to Zinger website 1 Image = “quansu.jpg”

The newsfeed screen is displayed

3 Click on “Đăng hình ngay” button

The image posting interface is displayed

4 Drag and drop the image to the place to post or click on “Thêm hình ảnh” button

The selected image is displayed where the image is posted

5 Enter the caption into the textbox

The caption is displayed on the textbox

6 Click on “Cập nhật” button

- A message about browsing is displayed

(example.gif) - A message about browsing is displayed

Case 3: Fail d Filter user function

Test Case ID ZW_5 Test Case Description Test for filtering user function

1 Access to Zinger website 1 Age = “Từ 18 đến 25”

2 Click on “Bộ lọc” button on navbar

The filter interface is displayed

3 Click to select age: “Từ 18 đến 25”

The range of age is selected

4 Click to select gender: “Nữ”

The gender is selected As expected Pass

5 Click to select body shape:

The body shape is selected

6 Click to select education: “Đại học”

The education is selected As expected Pass

7 Click on “Lọc người dùng” button

Eligible users are displayed on the screen

As expected Pass e Set up the image detect filter function Table 5.6: Set up the image detect filter function

Test Case ID ZW_6 Test Case Description Test for setting up the image detection filter function

1 Access to Zinger website 1 Image filtering method = “Tự động”

2 Click on Avatar at upper right corner

3 Click on “Quản lý người dùng”

The user management interface is displayed

4 Click on “Lọc hình ảnh” button

The image filter interface is displayed

5 Click to turn on the filter

Filter is activated As expected Pass filter: “Tự động”

7 Adjust the filter's strong/weak parameters

The parameters is displayed on scroll bar

Adjustments are saved As expected Pass

Test Case ID ZM_1 Test Case Description Test for logging in function

Created By LQN_Vuong Reviewed By TG_Han Version 1.0

Tester's Name LQN_Vuong Date Tested 06/07/2021 Test Case

1 Open the ZingerMobile software application

1 Enter email in the empty box

Email was filled in successfully

2 Enter password in the empty box

Password is successfully filled in as *

3 Press on “Đăng nhập” button

The system will check the login information

As expected Pass b Post image function

Table 5.8: - Post image function

Test Case ID ZM_2 Test Case Description Test for posting image function

Step # Step Details Expected Results Actual Results Pass / Fail /

1 Press on add image button

The phone's photo album selection screen appears

2 Select the image that users want to upload

The selected images are displayed on the

As expected Pass from your phone application screen for users to view

3 Enter a description when posting pictures on the system

Image description is filled in successfully

4 Press on “Cập nhật” button to start uploading images to the system

The image uploaded to the system successfully, displays a successful message box

(Case 1) As expected (Case 2) As expected

Fail c Delete selected image function Table 5.9: - Delete selected image function

Test Case ID ZM_3 Test Case Description Test for deleting selected image function

4 Select any number of images from the phone album

Step # Step Details Expected Results Actual Results

Pass / Fail / Not executed / Suspended

1 Press on the image that users want to delete in the list of selected images

The selected image is removed from the list If there is only one image left in the list, exit image posting mode

As expected Pass d Update profile function

Table 5.10: - Update profile function

Test Case ID ZM_4 Test Case Description Test for updating profile function

1 Press the profile button in the Profile screen

Redirect to “Chi tiết cá nhân” Screen

Hiển thị các giá trị nằm trong chủ đề thông tin

3 Press on “Chỉnh sửa” icon

The software changes the color of people's values, allowing users to change their information

4 Select the information that user wants to update and change it

5 Press on “Cập nhật” button

The information starts to be updated on the server side, showing a success message dialog

As expected Pass e View recommended friends Table 5.11: - View recommended friends function

Test Case ID ZM_5 Test Case Description Test for viewing recommended friends function

1 Press on Zinger icon on the menu tab

2 Press on “Gợi ý tương đồng” button

Display suggested object information to the user If the suggested object is exhausted, the user will be notified

3 Hold the object's picture card and drag it to the right or left to see the next person

As expected Pass f Search friend by location function Table 5.12: - Search friend by location function

Test Case ID ZM_5 Test Case Description Test for searching friend by location function

1 Press on Zinger icon on the menu tab

2 Press on “Bạn bè gần đây”

Display searched object information by

As expected Pass the object is searched, the user will be notified

3 Hold the object's picture card and drag it to the right or left to see the next person

As expected Pass g Like user function

Table 5.13: - Like user function

Test Case ID ZM_7 Test Case Description Test for liking user function

The number of user favorites is changed If you don't like it, it will increase by one and vice versa

As expected Pass h Follow user function

Table 5.14: - Follow user function

Test Case ID ZM_8 Test Case Description Test for following user function

The user's follower count increases by one

As expected Pass i View user’s profile function Table 5.15: - View user’s profile function

Test Case ID ZM_9 Test Case Description Test for viewing user’s profile function

Redirect to “Chi tiết cá nhân” Screen Display information of selected object

As expected Pass j Block user function

Table 5.16: - Block user function

Test Case ID ZM_10 Test Case Description Test for blocking user function

3 Selected the object and at the Detailed Profile Screen

4 Display message blocked user successfully

As expected Pass k Search followed friend function Table 5.17: - Search followed friends function

Test Case ID ZM_11 Test Case Description Test for searching followed friends function

Step # Step Details Expected Results Actual Results Pass / Fail / Not executed /

1 Press on user icon on the menu tab

Displays the search mode and previous search results

3 Enter the name that user wants to search

Displays a list of objects with matching names

4 Press on the object that user is looking for in the list of results

The screen displays information about the selected object

As expected Pass l Chat function

Test Case ID ZM_12 Test Case Description Test for chatting function

“Message” icon on the menu tab

Redirect to the InPersonChat screen

Display message content between user and friend

3 Enter the message that wants to send

Message content is filled in successfully

The content is sent successfully and the content is displayed in the screen

As expected Pass m Voice/Video call function Table 5.19: - Voice/Video call function (1)

Test Case ID ZM_13 Test Case Description Test for Voice/Video call function

Step # Step Details Expected Results Actual Results Pass / Fail / Not executed /

1 Press on camera icon to connect the call with selected user

Redirect to Video Call Screen and waiting the user accept the call

2 Once the user accepts, the monitor displays the subject's video and can talk to each other

Table 5.20: - Voice/Video call function (2)

Test Case ID ZM_14 Test Case Description Test for accepting the call function

3 Receive call notification from another user

1 Receive a video call, the user is rediected to AcceptCaller Screen

2 Press on green phone icon to accept the call

Redirect to the Video Call screen, which shows the user's video and can talk to each other

Test Case ID ZM_15 Test Case Description Test for declining the call function

3 Receive call notification from another user

1 Receive a video call, the user is redirected to AcceptCaller Screen

2 Press on red phone icon to decline the call to the previously used screen

As expected Pass n Make relationship with friend function Table 5.22: - Make relationship function

Test Case ID ZM_16 Test Case Description Test for making relationship function

3 Selected user and at the

1 Press on See more icon

Display the function dialog box

3 Select the value of the relationship that want to create with the user

4 Press on “Cập nhật” button to make relationship

As expected Pass o Accept the notification to make a relationship fuunction Table 5.23: - Accept the notification to make a relationship (1)

Test Case ID ZM_17 Test Case Description Test for accepting the notification to make a relationship

3 Have a sender that creates a relationship

1 Displays a notification that an object is want to make a relationship with the user

2 Press on ring icon on the menu tab

3 Press on “Chấp thuận” button

Agree to create a relationship with the object

Table 5.24: - Accept the notification to make a relationship (2)

Test Case ID ZM_18 Test Case Description Test for declining the notification to make a relationship

3 Have a sender that creates a relationship

1 Displays a notification that an object is want to make a relationship with the user

2 Press on ring icon on the menu tab

3 Press on “Từ chối” button

Decline to create a relationship with the object

As expected Pass p Unblock user function

Table 5.25: - Unblock user function

Test Case ID ZM_19 Test Case Description Test for unblocking user function

2 Press on “Danh sách chặn” button

Redirect to Block List Screen

3 Select the user you want to unblock Press on “Mở chặn” button

Display an unblock message successfully

As expected Pass q Change password function Table 5.26: - Change password function

Test Case ID ZM_20 Test Case Description Test for changing password function

2 Press on “Đổi mật khẩu” button

Redirect to Change Password Screen

The old password was filled in successfully

The new password was filled in successfully

The confirm password was filled in successfully Displayed as *

As expected Pass r Setting the search range function Table 5.27: - Setting the search range function

Test Case ID ZM_21 Test Case Description Test for setting the search range function

2 Press on “Cài đặt vị trí tìm kiếm” button

Redirect to Setting Search Location Screen

Displays the values of gender Select gender value

4 Select the age Displays the values of As expected Pass

Radius value filled in successfully

6 Press on “Cập nhật” button

As expected Pass s View user’s photos function Table 5.28: - View user’s photos function

Test Case ID ZM_22 Test Case Description Test for viewing user’s photo function

Redirect to the Image screen of the selected object

Analysis

Through testing some outstanding functions of the website platform, the team found that some problems are as follows:

The login and new account registration features are functioning smoothly; however, there is an issue when users attempt to log in using their Google or Facebook accounts, as the system fails to accurately retrieve the user's age Consequently, users who register through social accounts must visit their personal profile page to update their information accordingly.

• Like and follow user functions work stably

• Real-time messaging function works stably with text messages The system does not yet support sending messages as attachments and images

• Voice and Video call functions work stably User can get notification of call in any page

The functionality for posting images on newsfeeds and profile pages is generally stable; however, issues arise with specific image formats Posting jpg images of people or gif images is straightforward, relying on the system's image detection capabilities In contrast, animated images or illustrations require manual approval before posting, as the current image detection service struggles to effectively process these types of visuals.

The friend search feature operates reliably, delivering accurate results by utilizing the user's current location However, users must grant permission for the system to access their location information to take advantage of this functionality.

To enhance friend suggestions, users must accurately and completely update their relevant information, allowing the system to filter and recommend friends that align more closely with their preferences.

The image detection feature allows administrators to enable or disable filtering and choose between manual or automatic settings By adjusting the filter parameters, a lower setting results in a stronger filter, while a higher setting is less restrictive If the filter is overly stringent, user-uploaded images will require admin approval before being visible on personal profile pages or newsfeeds.

Through testing some outstanding functions of the mobile platform, the team found the following problems:

• The processing functions have not been optimized leading to jerky, slow

Receiving calls from friends can occasionally result in duplicate notifications Despite our efforts to manage and verify data to prevent duplication, processing delays may still lead to these occurrences.

The application's displayed messages currently fail to redirect users to the intended screen, leading to a disorganized flow and potential data loss.

• The properties are not visible on mobile platforms in the ProfileDetails screen if the user has not previously been updated on the web.

CONCLUSION AND FUTURE WORKS

Tiêu đề	Application for Making Friends Suggestion on the Website and Mobile Platforms
Trường học	Faculty of High Quality Training
Chuyên ngành	Information Technology
Thể loại	Thesis

Định dạng
Số trang	109
Dung lượng	2,74 MB