(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms

(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms(Đồ án tốt nghiệp) Application for making friends suggestion on the website and mobile platforms

TOPIC OVERVIEW

Reasons for choosing the topic

Our goal is to develop an application that fosters social interaction and helps users find friends with similar interests and personalities, enhancing their social circles The app aims to provide a platform for making new friends, offering entertainment after work or study to promote relaxation and enjoyment To ensure the app meets user needs, our team researched existing applications and conducted interviews to identify essential features and functionalities This user-centered approach helps us create a more comprehensive and effective social platform that caters to real user demands.

This engaging topic appeals to young people and fosters team spirit, making it an ideal project for collaboration Its broad scope allows for easy development and expansion in the future, serving as a foundation for creating a comprehensive application By leveraging this initiative, the team aims to lay the groundwork for innovative growth and long-term success in app development.

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 for building and programming HTTP web services It enables the creation of modern RESTful APIs, fully compliant with REST principles and standards Designed for today's online services and web applications, ASP.NET Web API offers optimized solutions for scalable and efficient web communication Utilizing this framework allows developers to build robust, flexible, and high-performance APIs tailored to modern digital needs.

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 to easily incorporate real-time web functionality into their applications It enables instant server-to-client communication, allowing content to be pushed automatically to connected users without the need for manual refreshes By simplifying the implementation of real-time features, SignalR enhances user engagement and ensures seamless data updates in your web applications.

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 lightweight, Python-based micro-framework designed for web development, offering a standalone environment with minimal reliance on external libraries Its modular structure results in fewer errors and dependencies, making it easier to identify and resolve security issues As a popular choice for developers, Flask provides a streamlined and efficient platform for building scalable and secure web applications.

WebRTC – Real Time Communication

WebRTC (Web Real-Time Communication), developed by the World Wide Web Consortium (W3C), is a powerful web API that enables real-time communication directly between browsers It supports video calls, voice calls, and peer-to-peer (P2P) data transmission without the need for additional plugins or external software This technology streamlines browser-to-browser interactions, enhancing communication efficiency and user experience across platforms.

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, general-purpose programming language developed by Google and officially standardized by ECMA (ECMA-408) It is widely used for building web, server, desktop, and mobile applications, making it a popular choice among developers As an object-oriented language, Dart features class definitions, garbage collection, and supports advanced programming concepts such as interfaces, mixins, abstract classes, generics, static typing, and sound type systems These features contribute to Dart’s robustness and flexibility for various software development projects.

SYSTEM ANALYSIS AND DESIGN

Survey of related products

Our platform enables users to register and log in via system accounts or Facebook, providing seamless access Users can browse suggested profiles, with options to sort by images, relevance, or recent activity, and view lists of matching users Advanced filtering allows searching by gender, age, country, city, and specific ranges, helping users find suitable matches Detailed profile views enable liking, messaging, or blocking other users, while also supporting favorite lists and activity tracking such as profile views and interactions The messaging system facilitates direct communication, and users can view their activity history, including liked profiles and viewed profiles, as well as manage their block list Personal profile management includes editing profile information, posting images, and setting individual privacy permissions Users can update their password securely by verifying current credentials and change their email addresses as needed System notification settings allow customization to enhance user experience and engagement.

Our platform offers all essential website features for suggesting friends and facilitating dating, providing a seamless user experience Users can easily access basic functions by registering a simple account, with the flexibility to update their personal information later The system automatically detects and utilizes the user's current location through geolocation to enhance matchmaking accuracy Additionally, users have control over their privacy by setting display permissions for individual profiles, ensuring a personalized and secure experience.

Some features of the platform, such as viewing compatibility between users and removing matches, require a membership upgrade Additionally, the interface is not visually appealing and can be difficult to navigate, which may hinder user experience Furthermore, the platform does not verify user accounts through email, raising concerns about security and authenticity.

Our platform allows users to register and log in using their system account, Facebook, or Google, providing seamless access Users can view their profiles, including an overview, photos, interests, and notifications, to stay updated and engaged They can easily post images to share moments and personalize their profiles Editing personal information such as relationship status and habits helps users showcase their unique personality The platform offers curated suggestions by displaying a list of compatible users based on matching personalities, as well as lists of users you like and users who like you, facilitating meaningful connections Users can view their message inbox, engage in private messaging, and add contacts to build their network Detailed user profiles enable users to like, send messages, or block others, fostering safe and interactive social experiences.

Our platform offers all the essential features of a dating website, including friend suggestions and matchmaking functions Users can easily register an account to access core features and have the flexibility to update their personal information at any time The user-friendly interface ensures a seamless experience, making navigation simple for all users Additionally, the system provides numerous filtering options, allowing users to customize search criteria for more accurate and compatible matches.

The disadvantages of this platform include a notably simplistic interface, which results in an inefficient layout of the user list display Additionally, the function tabs on the sidebar are poorly organized, hindering ease of navigation Furthermore, the platform lacks email verification for user accounts, raising concerns about security and account authenticity.

Our platform allows users to create an account and log in via email, system credentials, or Facebook for a seamless experience Users can verify their email addresses to ensure account security The app offers suggested and nearby users to foster local connections Users can view detailed profiles, including options to like, message, or block others Messaging functionality enables direct communication between users You can send a crush, add users to favorites, or send gifts to express interest Customize your experience by setting interests and distance preferences to find compatible friends The platform displays suggested users with matching personalities, as well as lists of users you like and who like you Additionally, users can edit their personal information, including relationship status, habits, and professional details, to enhance profile accuracy and compatibility.

Our platform offers several key advantages, including easy email verification to secure your account and a comprehensive user manual to assist new users It provides all essential features such as friend suggestions and dating options, accessible simply by registering an account Users can easily adjust their personal information later, and the website is designed with an intuitive, user-friendly interface to ensure a seamless experience.

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

Our app allows users to register an account using their phone number and log in seamlessly with options like Apple, Facebook, or their phone number, which includes OTP verification for secure access Users can discover people nearby using location services, view suggested profiles, and easily connect by swiping right to favorite or left to ignore potential friends The platform enables users to view their message list, engage in direct messaging with other users, and share images through posts Additionally, users can view and edit their personal profiles to find suitable friends more easily, manage contacts and blocked users, and customize system and distance settings to refine their search radius for nearby users.

This dating website offers essential features such as friend suggestions and matchmaking, providing a comprehensive user experience Users can easily update their personal information at any time, ensuring their profile remains accurate The platform boasts an intuitive, user-friendly interface that simplifies navigation for all users For added security, OTP verification is required during phone number login, safeguarding user accounts Additionally, the system includes convenient operations designed to enhance overall usability, making the platform highly accessible and efficient for users.

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

Our platform allows users to register accounts and log in easily via email or Facebook, ensuring quick access Users can view suggested contacts and browse messages from other users, facilitating seamless communication The app enables adding contacts, viewing detailed user profiles, and engaging with features like liking, messaging, or blocking other users Users can stay updated with a personalized feed showcasing recent activities and utilize location features to discover people nearby Additionally, the platform provides options to view and edit personal information, including relationship status and habits, creating a more personalized social experience.

Our platform offers all the essential features of a social and dating website, including friend suggestions and matchmaking options Simply registering an account provides access to these basic functions, making it easy to get started Users can easily update their personal information at any time, ensuring a personalized experience With a user-friendly and intuitive interface, the website ensures a seamless and enjoyable experience for all users.

• 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:

Our platform offers essential features for a seamless user experience, including easy registration via system account or Facebook login Users can browse and view suggested friends or matches, filter and search for users based on personalized criteria, and view their message inbox The messaging system enables direct communication with other users, while users can also view and edit their personal profiles to enhance matchmaking accuracy Additionally, the platform allows users to manage contacts, block certain users, and customize system and distance settings to find nearby users effortlessly.

Admins can monitor key metrics such as user access counts, registered account numbers, and growth rates to track platform performance They have the ability to view user traffic analytics segmented by website, Facebook, or Google accounts for comprehensive insights Additionally, administrators possess the authority to manage and switch the operating modes of user accounts, ensuring smooth platform operation and security.

Our mobile app allows users to log in seamlessly via system accounts or Facebook, explore suggested users by swiping, and easily view their message list for quick communication Users can message others, post images, and view or edit their personal profiles to find suitable friends The app also provides access to contact lists, blocked users, and comprehensive system and distance settings to discover nearby users Stay updated with notifications, view detailed user profiles, and engage with others by liking, messaging, or blocking users for a personalized social experience.

Requirements modeling

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

Guests can explore a list of the most popular members and view their posted photos before logging in If they do not have an account, they have the option to sign up and receive updates via email.

Users can log in using their system account or via Facebook, create a new account, or recover their account if they forget the password After logging in, the system suggests friends with similar personalities and interests to facilitate connection, while users can view detailed profiles of friends and browse their posted photos The platform enables messaging friends, searching for friends using various filters, and marking followers or favorites for friends and photos Additionally, users can edit their personal information and post pictures to enhance their profiles.

Admin can monitor key user metrics, including total access numbers, registered accounts, and growth rates, to assess platform performance They can analyze user traffic statistics across various channels such as website, Facebook, and Google accounts for comprehensive insights Additionally, administrators have the authority to manage and switch user account operating modes to optimize user experience and platform security.

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 upload an image to the main server, the image is then evaluated by a detection service which provides an appropriate rating This rating is subsequently retrieved and compared with predefined conditions stored in the database Based on this comparison, the system determines the final outcome, ensuring accurate and efficient image assessment.

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 intelligently suggests similar objects to users, enhancing their browsing experience Additionally, users can choose the mode to find objects based on their recent location, with results displayed according to the radius they select This feature ensures quick and relevant access to nearby objects, improving usability and search efficiency.

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

This screen displays the list of friends who have sent messages to the current user, allowing easy access to ongoing conversations Existing users can view the latest messages within each chat for quick updates By selecting a specific contact, users are directed to the complete messaging screen for detailed conversation.

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 up-to-date account information, allowing users to easily view and manage their profile details Users can upload new images directly from their device to share on the server, enhancing their content Additionally, the app provides quick access to detailed profile settings and other customization options, ensuring a seamless user experience.

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 was introduced by Jeffrey Palermo in 2008 as a modern approach to building more testable, maintainable, and dependable applications It aims to improve upon traditional 3-tier and n-tier architectures by addressing common issues such as tight coupling and poor separation of concerns This architecture enhances application flexibility and robustness by promoting clear boundaries between different application layers, ensuring better infrastructure integration like databases and services.

Figure 4.1: API Server Architecture diagram

Following instructor guidance, image uploads must be regulated to ensure compliance with social standards and customs To achieve this, our team has implemented an advanced detection service that monitors and promptly prevents inappropriate or violating images from being uploaded, maintaining a safe and compliant platform environment.

After extensive research and data collection, the team trained their model; however, due to the challenging nature of the data, they faced difficulties in obtaining sufficient data and performing comprehensive model validation Consequently, the model's performance was limited Lacking the necessary resources and facilities for large-scale CNN training, the team opted to utilize a pre-trained model available on GitHub to achieve better results efficiently.

This classification model categorizes images into five distinct classes Safe-for-work images include Drawings with 15,566 samples and Neutral images with 36,873 samples, representing non-controversial content The Unsafe categories comprise Hentai with 4,611 samples and Pornographic images totaling 57,289 samples, depicting explicit sexual acts Additionally, the Sexy class includes 15,957 images that are sexually explicit but not classified as pornography, highlighting the model’s ability to differentiate various levels of explicit content.

- 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 image prediction and scoring services It efficiently handles user-uploaded images by saving them on the server and sending them to the detection server for classification The predicted scores are then compared with administrator-defined thresholds to determine whether the image qualifies for publication This streamlined process makes Flask a practical choice for developing simple, reliable image analysis applications.

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 reach the limit of search results using the recent friend search feature in the app, the system prompts them to modify the search criteria Accepting this suggestion redirects users to the SettingsLocationScreen, where they can update their search preferences This process ensures a more effective friend search experience within 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

When users are active on the MessageScreen, they can view a list of contacts who have sent messages Tapping on a specific contact redirects users to the InPersonChatScreen, where they can start a chat session Additionally, the NotificationsScreen keeps users informed about new messages and updates, enhancing communication efficiency.

The NotificationsScreen is where users can view notifications from other users, including activities like likes, follows, picture interactions, and relationship updates It serves as a central hub to keep users informed about their social interactions within the app This screen enhances user engagement by providing real-time updates on activities that impact their profile and social connections.

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

The ProfileScreen displays essential personal information to users, providing a clear overview of their profile Users can easily upload images from their device to the server through the Storage layer, utilizing the Asset handler, and the connection is managed via the ImagesService Functionalities such as accepting calls and engaging in video conversations are integrated through dedicated screens like AcceptCallScreen and VideoCallScreen, ensuring seamless communication experiences The UsersProvider handler class facilitates user data management, enabling smooth interaction and data retrieval across the application.

When a user initiates a call within the application, the call information is transmitted in real-time through SignalRService Upon receiving an incoming call notification, the application automatically navigates to the AcceptCallScreen, where the user can accept or decline the call, ensuring a seamless calling experience.

When a user accepts a call, it is seamlessly forwarded to the VideoCallScreen, ensuring a smooth user experience Call-related information is organized within two object classes, IUser and UserSimilar, facilitating quick and easy access to essential data This structure enhances app efficiency by streamlining data retrieval during the call process.

During a video call, the frontend communicates with the backend to establish a connection between two users using the SignalRService class for real-time signaling When a user initiates the call, they are directed to the VideoCallScreen and await the recipient's acceptance to connect This real-time interaction ensures a seamless and efficient video calling experience.

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:

Our team has successfully developed a social networking application that facilitates friend recommendations This innovative platform allows users to search for and connect with new friends easily through the website, with seamless functionality optimized for mobile devices.

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

• 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

Our mobile platform offers essential features for seamless user interaction, including secure login via existing website accounts and the ability to search for compatible users based on proximity or preferences Users can view their friends list, access detailed profiles, and engage in real-time messaging with friends The app allows for following, favoriting, and establishing various relationships with other users, along with notifications for interactions Users can manage their profiles, adjust system settings, customize search parameters, change passwords, and control their blocked users list by blocking or unblocking 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

4 Enter the message the user wants to

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 a notification of

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

6 Click to select The method is selected 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 của người dùng

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” button

Display searched object information by surrounding location If

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

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

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 age Select age value

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 functions operate reliably; however, issues arise when users attempt to log in via Google or Facebook, as the system fails to accurately retrieve the user's age To ensure complete profile information, users are required to visit their personal profile page after social media login to update any missing or incorrect details, enhancing account accuracy and user experience.

• 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 functionalities for posting images on newsfeed and profile pages operate reliably; however, there are specific issues with certain image types Standard formats like jpg (including images of people) and gif can be posted easily, depending on the effectiveness of the system’s image detection service In contrast, animated images or drawings of characters often trigger manual approval, as the current detection service is not yet fully effective at processing these types of images.

The nearby friend search feature operates reliably, providing accurate and relevant results To use this function effectively, users must grant the system permission to access their current location, ensuring precise and personalized search outcomes.

Accurate and complete profile information is essential for effective friend filtering based on specific features When users update their details precisely, the system can recommend friends more tailored to their preferences, enhancing the overall social experience.

Our image detection feature allows administrators to enable or disable filtering and choose between manual or automatic moderation By setting filter parameters, admins can control the strictness of content screening—lower values result in stronger filters, while higher values relax the filtering When the filter is set to a high level, user-uploaded images require admin approval before appearing on profiles or newsfeeds, ensuring content complies with community standards.

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

Sometimes, when receiving calls from friends, users may experience duplicate notifications or effects despite having implemented controls to prevent data duplication This issue occurs due to processing delays, which can cause temporary discrepancies even after data approval and monitoring measures are in place.

Currently, the application's user messages do not successfully redirect users to the intended screens, leading to improper redirection issues This misalignment causes uncontrolled data loss, impacting user experience and data integrity.

• 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
Tác giả	Nguyen Thanh Tam, Le Quoc Nguyen Vuong, Tran Gia Han
Người hướng dẫn	M.Sc. Tran Cong Tu
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2021
Thành phố	Ho Chi Minh City

Định dạng
Số trang	113
Dung lượng	3,89 MB