Building social media platform for sharing images

Trang 1 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING SOCIAL MEDIA PLATFORM FOR SHARING IMAGE

INTRODUCTION

Project name

Research and build a social media platform that focuses on sharing the image.

The urgency of the project

Globalization has transformed human life, erasing geographical boundaries and fostering a sense of unity known as the Global Village A key driver of this change is the internet, which has revolutionized communication and human interaction through rapid technological advancements The shift from conventional to digital communication, coupled with the rise of smartphone technology, has made the internet increasingly accessible In Vietnam, the impact is evident, with 68.72 million internet users, representing 70.3% of the population in 2021.

Social media has emerged as a primary reason for internet access, becoming an integral part of daily life for nearly everyone Its accessible nature and ability to bridge communication gaps across time and space exemplify how social media serves as an extension of the human experience This aligns with Marshall McLuhan's Global Village theory, which describes social media as a medium that enhances human faculties and fosters new forms of interaction As a result, virtual migration has become a reality, evolving communication from traditional face-to-face interactions to dynamic online engagements.

Social media has become a dominant force in our lives, significantly influenced by advancements in information and technology The widespread availability of internet access has transformed how we interact, bringing both benefits and challenges that users of social media must navigate.

In today's digital age, social media has become an essential platform for users to share their daily images with one another As individuals develop their skills and competencies, they are increasingly able to share their daily experiences thoughtfully, reflecting the impact of the 4.0 industrial revolution on communication and social interaction.

In today's fast-paced world, the demand for social media has become essential as individuals seek constant connection and the ability to share every moment of their lives effortlessly The Vivacon project aims to fulfill this need by fostering an engaging platform where users can connect and share experiences in real-time, all within a safe and trustworthy environment.

Purpose of the topic

Our social media system allows customers to easily log in and engage in various activities, including posting updates, uploading images, sharing content, and chatting with others This user-friendly platform enhances interaction and connectivity among users, ensuring a seamless experience for all participants.

The administrator has the ability to oversee the system by utilizing fundamental administrative functions, which include analyzing data and making decisions to approve or reject reports related to posts, comments, or user accounts.

 Backend: Learn and build RESTful API based on relational database

PostgreSQL and Java backend Spring framework

 Front-end Website: Learn and connect API to create a website interface through the ReactJS library.

Objectives and scope of the project

The objective is to build a social media system for users to access and perform behaviors like posting images, sharing, chatting, receiving notifications in real-time, and applying personal settings

Along with that, the administrator can manage the system with essential functions including viewing the data analysis, resolving the report request, and managing accounts on the platform

THEORETICAL BASIS

HTTP protocol and REST architectural pattern

The Hypertext Transfer Protocol (HTTP) is a fundamental application-level protocol that underpins data communication on the World Wide Web since 1990 As a generic and stateless protocol, HTTP facilitates distributed and collaborative hypermedia information systems, and it can be adapted for various purposes through extensions of its request methods, error codes, and headers.

HTTP is a TCP/IP-based communication protocol essential for delivering various data types, such as HTML and image files, across the World Wide Web Operating primarily on TCP port 80, it establishes a standardized method for computer communication The HTTP specification outlines the structure and transmission of client requests to servers, as well as the corresponding responses from the servers.

There are three basic features that make HTTP a simple but powerful protocol:

HTTP is a connectionless protocol where the client, typically a browser, initiates a request and waits for the server's response Once the server processes the request and sends back the response, the client disconnects, resulting in a scenario where the client and server only recognize each other during that specific interaction Subsequent requests are made over new connections, making the client and server appear unfamiliar with each other.

HTTP is media independent, allowing any type of data to be transmitted as long as both the client and server can process the content To facilitate this, it is essential for both parties to specify the content type using the correct MIME type.

HTTP is a stateless protocol, meaning that the server and client only recognize each other during a single request, after which they lose all memory of the interaction This connectionless nature prevents clients and browsers from retaining information between different requests across web pages.

The following diagram shows a very basic architecture of a web application and depicts where HTTP sits:

The HTTP protocol operates as a request/response system within a client/server architecture, where web browsers, search engines, and robots function as HTTP clients, while web servers serve as the server component.

The HTTP client communicates with the server by sending a request that includes a request method, URI, and protocol version, along with a MIME-like message that contains request modifiers, client information, and potential body content, all transmitted over a TCP/IP connection.

The HTTP server sends a status line that indicates the protocol version and includes a success or error code This is followed by a MIME-like message that contains server information, entity meta information, and potential entity-body content.

REST API, which stands for Representational State Transfer, is an architectural pattern for building web services, developed by Roy Fielding in 2000 It has resulted in a significant number of RESTful web services that adhere to its principles Application developers widely utilize REST APIs because they facilitate straightforward communication between machines, even during complex operations compared to other protocols like COBRA, RPC, or SOAP.

REST is a set of best practices for data sharing between clients and servers, serving as a design style for building HTTP and other APIs It mandates the use of CRUD functions—Create, Read, Update, and Delete—regardless of application complexity RESTful applications utilize HTTP methods such as GET, POST, DELETE, and PUT, focusing on component scalability and interface simplicity.

Neglecting certain tools may seem counterintuitive, but it encourages the simplification of complex behaviors This approach results in more straightforward methods and facilitates easier integration with other REST APIs.

Not all HTTP APIs are REST APIs The API needs to meet the following architectural requirements to be considered a REST API:

REST applications operate on a client-server model, where the server is responsible for managing application data and state, while the client focuses on user interactions This clear separation of concerns allows for independent updates and improvements to each component, enhancing overall application flexibility and maintainability.

- Stateless: Servers don’t maintain client state, clients manage their own

6 application state The client’s requests to the server contain all the information required to process them.

Servers should indicate whether their responses are cacheable to enhance performance, allowing systems and clients to store responses when appropriate This practice helps prevent the use of outdated information by ensuring that non-cacheable data is discarded.

REST is distinguished by its uniform interface, which is a fundamental principle that sets it apart from other network-based architectures According to Fielding, this central feature emphasizes a consistent interaction between components, allowing REST services to present data as resources within a uniform namespace.

- Layered system: Components in the system cannot see beyond their layer This confined scope allows you to easily add load-balancers and proxies to improve authentication security or performance.

These constraints establish a robust application architecture characterized by well-defined boundaries and a distinct separation of concerns The client requests data from the server, processes or presents this information, and informs the server of any changes in state In REST APIs, data is not hidden from the client; rather, it is the implementation details that are abstracted away.

Web Socket and its sub protocol

WebSockets is a protocol designed for two-way communication, primarily utilized in web browsers It initiates with a handshake, typically an HTTP request, and subsequently transmits a basic message frame over TCP The primary advantage of WebSockets is their ability to eliminate the need for multiple HTTP connections, as seen with AJAX (XMLHttpRequest), iframes, and long polling methods.

Not all browsers support WebSockets, making it essential to use the SockJS protocol for fallback options that simulate the WebSocket API After the initial HTTP handshake with SockJS, communication transitions to a TCP connection, allowing for the transmission of a continuous stream of bytes, whether text or binary This flexibility enables the use of various messaging architectures, such as asynchronous or event-driven messaging Additionally, implementing sub-protocols like STOMP (Simple/Streaming Text Oriented Message Protocol) can enhance messaging formats, ensuring better compatibility between client and server.

The Map Reduce programming approach

MapReduce is a distributed computing model and processing technique based on Java, consisting of two key tasks: Map and Reduce The Map task transforms a set of data into another format, breaking it down into tuples (key/value pairs) Following this, the Reduce task takes the output from the Map task and consolidates these data tuples into a smaller set As indicated by its name, the Reduce task is always executed after the Map task.

MapReduce offers a significant advantage in its ability to easily scale data processing across multiple computing nodes In this model, data processing is divided into components known as mappers and reducers Although breaking down a data processing application into these components can be complex, once developed in the MapReduce framework, scaling the application to operate on hundreds or even thousands of machines requires only a simple configuration change This straightforward scalability is a key reason why many programmers are drawn to the MapReduce model.

- Generally the MapReduce paradigm is based on sending the computer to where the data resides!

- MapReduce program executes in three stages: map stage, shuffle stage, and reduce stage

- Map stage − The map or mapper’s job is to process the input data Generally,

The input data is stored in the Hadoop file system (HDFS) and is provided as a file or directory This input file is then processed by the mapper function on a line-by-line basis, resulting in the creation of multiple small data chunks.

The Reduce stage combines the Shuffle and Reduce processes, where the Reducer processes data received from the mapper Upon completion, it generates a new output set that is stored in the HDFS.

- During a MapReduce job, Hadoop sends the Map and Reduce tasks to the appropriate servers in the cluster

- The framework manages all the details of data-passing such as issuing tasks, verifying task completion, and copying data around the cluster between the nodes

- Most of the computing takes place on nodes with data on local disks which reduces the network traffic

- After completion of the given tasks, the cluster collects and reduces the data to form an appropriate result, and sends it back to the Hadoop server.

The algorithm of suggesting “Account to follow”

Figure 2.6 Graph programming approach illustration

A graph is a non-linear data structure made up of nodes, also known as vertices, and edges, which are the lines or arcs that connect pairs of nodes.

In the above Graph, the set of vertices V = {0,1,2,3,4} and the set of edges E 10

Graphs play a crucial role in addressing various real-life issues by representing complex networks, such as city pathways, telephone systems, and circuit networks Additionally, they are integral to social media platforms like LinkedIn and Facebook, where each individual is depicted as a vertex (or node) These nodes serve as structures that encapsulate essential information, including personal ID, name, gender, and locale.

Figure 2.7 Connecting between accounts in social media platform

The most effective friendship suggestions typically originate from existing friends The central concept is that when two individuals share numerous mutual friends yet remain unconnected, the system should propose that they establish a friendship.

Friendships in social networks like Facebook, Google+, and LinkedIn are typically undirected, meaning if A is a friend of B, then B is also a friend of A While directed friendships, as seen on Twitter, can also be considered, this article will concentrate on the undirected friendship system.

If Jonathan follows Frank, Fred, Frida, and Fernando, and they all follow Zeke, then Jonathan should also follow Zeke since he is not currently doing so.

The input data consists of an adjacency list formatted with unique user IDs followed by a comma-separated list of their friends For example, this structure allows for a clear representation of relationships between users Visualizing these connections in a graph enhances the understanding of user interactions.

The graph illustrates that user 0 is not directly friends with users 4 and 5; however, user 0 shares mutual friends 1, 2, and 3 with user 4, and mutual friend 1 with user 5 Therefore, we recommend users 4 and 5 as potential friends for user 0.

The output recommended friends will be given in the following format

The recommended friends for USER are displayed based on the number of mutual friends, which can be verified through the accompanying graph The output is organized in descending order, highlighting the connections that matter most.

To address the problem of recommending friends using a single MapReduce job, we can consider User 0, who has friends 1, 2, and 3 This results in the pairs , , , , , and having User 0 as a mutual friend We can emit key-value pairs such as and , where 'r' signifies a recommended friend and 'm' denotes a mutual friend During the reduce phase, we can aggregate these results to calculate the number of mutual friends between users However, a challenge arises when User A and the recommended User B are already friends To resolve this, we can introduce an attribute called isFriend in the emitted value to prevent recommending existing friends Alternatively, we can simplify the implementation by using m = -1 to indicate that they are already friends, thus avoiding the need for an additional field.

Define that fromUser is, and toUser is one of in the input data, and then, the algorithm can be given by

To indicate that a user (fromUser ) is friends with multiple users (toUser ), we emit *n* records, where *n* represents the number of toUser friends Each emitted record signifies the existing friendship between fromUser and toUser , with the value of m set to -1 to denote that the friendship status is already established.

- Emit for all the possible combination of

12 toUser1, and toUser2 from toUser, and they have a mutual friend, fromUser

Totally, there are n^2 emitted records in the map phase, where n is the number of friends has

To determine mutual friends between two individuals, we calculate the total number of mutual friends represented by the key, while the value indicates the count If either individual has a mutual friend count of -1, we refrain from making a recommendation, as this indicates they are already friends.

- Sort the result based on the number of mutual friends

Figure 2.8 Account to follow algorithm illustration

Encrypt chat message algorithm

Figure 2.9 Encrypt chat message algorithm

Messages are encrypted and decrypted with AES256-GCM AES is a symmetric encryption cipher and requires a symmetric key

User A encrypts messages with key X

User A sends the encrypted messages to user B

User B decrypts messages with key X

Finding a secure method to exchange cryptographic keys is challenging A simplistic approach, such as sending the key directly over a network, poses significant risks If a man-in-the-middle intercepts this key, they can decrypt all communications between the two users, compromising the security of their messages.

A more effective approach to exchanging the AES key is through an out-of-band method, where participants can meet in person to share the key using QR codes or USB drives Although this method enhances security, it may not be the most convenient option for all users.

Implementing a key exchange policy can complicate the regular updating of keys, yet it fosters mutual trust between users, ensuring confidence in the exchanged keys.

We implement a Diffie–Hellman key exchange This is a smart method to establish a shared key between two parties over a public channel without ever sending the key over the channel

The server will generate a Common key, that represents the relation between 2 actors user A and user B

At the client, users A and B create a private key.

A Common key will be sent to per user, and this common key will be mixed with per user’s secret key and generate their public key

User B sends his public key to user A and reverses

User A takes his private key and the public key from user B and derives the shared key

User B takes his private key and the public key from user A and derives the shared key

Both parties created the same key without sending the key itself over the wire User A takes the shared key and encrypts a message

User A sends the encrypted message to User B

User B decrypts the message with a shared key.

REQUIREMENTS CAPTURING AND MODELING

Current status survey

3.1.1 Review the pros and cons of similar services:

Facebook is an American online social media and social networking service owned by Meta Platforms Founded in 2004 by Mark Zuckerberg with fellow Harvard College students and roommates

Facebook is accessible on various internet-enabled devices, including personal computers, tablets, and smartphones Users can share text, photos, and multimedia with others who have accepted their friend requests.

Users can connect with friends on Facebook through various privacy settings, allowing for both private and public interactions They can communicate directly via Facebook Messenger, join groups based on shared interests, and stay updated on the activities of their friends and the pages they follow.

Users can communicate with others on multiple platforms and can use applications anywhere

The speed of application loading is fast

It’s necessary to provide real-time interactions between users with each other Very smart search, and product suggestion support

The subject of numerous controversies, Facebook has often been criticized over issues such as user privacy

Facebook faces criticism for its psychological impacts, including addiction and low self-esteem The platform has also been embroiled in controversies related to the spread of fake news, conspiracy theories, copyright infringement, and hate speech.

Instagram is a free photo and video sharing app available on iPhone and

Users can upload and share photos or videos on our platform, connecting with their followers or a chosen group of friends Additionally, they can engage with content shared by friends on Instagram through viewing, commenting, and liking posts.

Instagram is an excellent platform for photography enthusiasts who enjoy sharing their images instantly With its quick upload feature, users can effortlessly take a photo and share it across multiple social media accounts, including Facebook, Twitter, and Tumblr, enhancing their online presence.

Instagram is an essential social media platform for businesses, offering effective marketing strategies and high engagement rates Its user-friendly interface allows business owners to easily connect with their audience, resulting in positive feedback and impactful outcomes.

Instagram allows users to resize images and improve photo quality with various filters like Early Bird and X-Pro II These tools serve as valuable assets for businesses looking to enhance their marketing strategies.

Instagram is exclusively available as an app for iPhone and Android devices, limiting access for users on Windows Mobile, BlackBerry, or Linux platforms Consequently, businesses using Instagram for promotion may miss out on reaching a significant number of potential consumers.

Instagram has limited features, It enables the users to resize the images and enhance the pictures through a variety of filters, It has 18 effects in all such as X-Pro

II, Rise, and Early Bird, and each new option needs to be installed or has a fee

The admin holds the highest authority within the system, possessing the ability to view critical information, including the top accounts and a comprehensive list of reports related to accounts, posts, and comments Additionally, the admin can access detailed information about each report and has the power to approve or reject them as necessary.

Admin can view the chart which contains total the number of any topic and can compare that between a lot of months or years

Users have 2 types: Logged in users and not the logged-in users

Not logged-in users only have a login feature to access more feature of users

Logged-in users have the ability to view and engage with the newsfeed, chat with others, and initiate new conversations or group chats Additionally, they can share and report posts, as well as follow other users.

3.1.3 Assess the current situation and solutions

Through the survey, we found a list of important feature like:

- We would have a mechanism for suggesting two accounts to become a friend to each other.

- Users must have the ability to interact with other users by chat, like, comment, share,… and receive notifications of actions created by other users on their resources.

- The UX/UI should be continuously infinity loading on many where (including newsfeeds, messages, notifications,…)

- Meets the majority of privacy requirements including content marked as personal content like messages, and private posts.

- Provide users the ability to change their preferences on login activity, notification, and email But we still see some limitations

Many websites lack support for login options or third-party authentication through platforms like Google or Facebook As a result, users must repeatedly input their recipient information each time they make a purchase, increasing the likelihood of errors such as incorrect phone numbers or addresses Additionally, the tracking of order information often presents significant limitations.

- Many websites append too many advertisements which affects the user experience.

Requirements capturing

Building a website for the user group is Guest (visitor) and User (users who already have an account)

Building a website for the group of users who are Admins (administrators of the system)

3.2.2 Functional and non-functional requirements

3.2.3.1 Requirements of the customer user group:

Allow customers to register for an account and ensure confidentiality of information

View and change account information, and password

The newsfeed will feature an infinite loading simulation, showcasing posts from users' followed accounts, as well as recommendations from similar accounts they might enjoy, along with targeted advertising content.

Post creating process will be a rich and diverse UX/UI for users to make them easily make their personal impression on the post

The platform would create a suitable UI for chatting and receiving messages in a real-time manner

The conversation is not only between 2 accounts but also over that by expanding it to a group with more account could attempt

User can share their post or other’s post via message

Users will receive tailored suggestions for accounts that align with their favorite categories Additionally, they can manage their notification settings, ensuring they receive timely updates via notifications or emails related to their interests.

Let user manage their settings about privacy to decide what is the boundaries that other users could not reach to their resources

Allow users to search quickly other accounts on the system via username or full name

Users should have the ability to report comments, posts, and accounts to administrators, enabling appropriate actions against violations of community guidelines This reporting feature must include various options and be user-friendly, ensuring that users can easily submit reports without significant effort.

3.2.3.2 Requirements of the system administrator user group:

Summary about who is the most trending account, which is the most trending posts, most recent posts

Summary about statistics of monthly, quarterly, yearly post counting and account creating counting, Hashtag trending

Perform actions to approve or reject a report in Comment or Post or Account

20 level from the user to deactivate this specific domain subject

Have the ability to create and manage advertising campaigns to make a profit

The UI/UI would be created to be easy to use for users, they can feel comfortable and utilize it without reading any instructions

The reaction time of an action that calls HTTP and WebSocket server would be fast and should be less than 1 second

Confidentiality of user information The privacy of exchange messages between server and client and also between participants in a conversation would be encrypted and not be revealed through the network

Requirements modeling

Overview of the actors in the system

1 Guest User who has not logged into the system

2 User The user has an account in the system

VC-USER-01 View another account profile

View information of user include name and following, followers, VC-USER-02 Change the language Change the language of application

VC-USER-03 Create the post Create a new post that contains one or more images and captions

VC-USER-04 Surf the newsfeed Surf to view some news, and users can interact with them

VC-USER-05 View post details View more information of post as comments list, comments child, VC-USER-06 Like a post Like an interesting post

VC-USER-07 Comment on a post Comment the message or emoji on any post

VC-USER-08 Sharing a post Share a post as a message to one or more other users

VC-USER-09 Delete a post Delete a post that the owner doesn’t want to save on the wall

VC-USER-10 Report a post Report the post that the user detects the abnormal activity or content

VC-USER-11 Follow another account

VC-USER-12 Chat with another account

Sends a message, image, or any post to one or more another user

VC-USER-13 View notification View all or unread notifications sent to the user

VC-USER-14 Update account profile information

Change new information of account (avatar, username, full name, )

Admin can view the dashboard which contains a lot of information related to data analysis

Admin can reject or approve the report

View another account profile

Figure 3.2 View another account profile Table 3.3 View another account profile specification

Name VC-USER-01 View another account profile

Brief description Allows users to view information another account profile

1 On the home page, user can enter the username on the navbar which has icon search to view another account information

2 The web show popup to show suggested account username found by keyword user have entered

3 User can click on the popup show to go to the account profile user want to view

4 Navigate user to the detail account information page which users have searched

Click owner of a post or comment

On post or comment, if a target is owner of that post or that comment, user can click the representation username to navigate

Click an item of list interaction

1 User click list of following, list followers or list user who like the post to show the list interaction users

2 Per item contains username, user click that username to navigate

User User who are logged in with role USER to access the system

Successfully navigate user to the account profile page which user have searched

Failed The system reports an error

Figure 3.3 Change the language Table 3.4 Change the language specification

Name VC-USER-02 Change the language

Brief description Allow users to change the language

1 On the footer, user choose the dropdown to select language to change

2 User click on the option in the dropdown to change language to English or Vietnamese

Internal server error The system displays the error message

Success Successfully change the language

Figure 3.4 Create the post Table 3.5 Create the post specification

Name VC-USER-03 Create the post

Brief description Allow the user to create the post

1 On the screen, when user click the icon “+” on the navbar, the window opens the modal to create one or multiple images User can edit image and write caption sequence step by step

2 On the step one, users can choose one or multiple images to upload

3 Next on the step two, users can adjust the image by finetune, apply filter, watermark and resize image, v.v

4 On the last step, users can write caption and set private status by public, only me or follower Note that, users can go to next step or forward back to previous step to manipulation again

5 After three steps, user have completed done create a post

Figure 3.5 Surf the newsfeed Table 3.6 Surf the newsfeed specification

Name VC-USER-04 Surf the newsfeed

Brief description Allows users to surf the newsfeed

1 On the home page, the system shows a lot post to user Each post contains information about username who has created the post, total like, images, total comment number and content of post

2 Users can scroll down to view more posts

3 Users can comment about the post by entering the comment and click button send to create comment for the post or like the post by clicking the heart icon

4 Besides that, user can view who liked the post in newsfeed by clicking the total like account or sharing the post to another by clicking the icon sharing

5 A popup shows up who liked the post Users hover the mouse in the popup to view more information about account profile e.g.: number of

29 posts, number of followings, number of followers

Success Users can surf the newsfeed and view more information about the post during surfing Failed The system reports an error

Figure 3.6 View post details Table 3.7 View post details specification

Name VC-USER-05 View post details

Brief description Allow users to view post details

1 On the home page, the website shows many posts Users can click on the post which user want to view

2 A modal will show up User can see detail information about post egg images, author who created the post, all comment about this post, total like count, content of post

3 User can click on button left or right of the carousel to view between images of that post

View in any user’s wall

Users access their personal information page and select the tab of posts then choose one of those post

Users can view post details by entering a post ID in the URL or by clicking on a notification about likes, comments, or shared messages related to that post This action will redirect them to the post details page for more information.

Success Successfully view a detail post

Figure 3.7 Like a post Table 3.8 Like a post specification

Name VC-USER-06 Like a post

Brief description Allow user to like a post

1 On the home page, the web shows many posts

2 Users click on the heart icon to like the post

Like a post of user’s wall

1 Go to target profile page and scroll down, list of target’s post will show

2 User clicks on any post

3 Users click on the heart icon to like the post

Like via post detail page

1 User go to any post details page

2 Users click on the heart icon to like the post Entry condition(s)

Success Users successfully like a post

Figure 3.8 Comment a post Table 3.9 Comment a post specification

Name VC-USER-07 Comment a post

Brief description Allow user to comment a post

1 On the home page, the web shows many post

2 User types content in the comment input

3 After entering, users click on the button send to create a comment for the post

1 User go to post details page or click any post on newsfeed page

2 User types content in the comment input

3 After entering, users click on the button send to create a comment for the post

Reply comment 1 User go to post details page or click any post on newsfeed page

2 Choose comment that user wants to reply, click the reply label, the reply comment input will show

3 User types content in the reply comment input

4 After entering, users click on the button send to create a reply comment

Success Users successfully comment a post

Figure 3.9 Sharing a post Table 3.10 Sharing a post specification

Name VC-USER-08 Sharing a post

Brief description Allow user to sharing a post

2 Users click on the icon sharing, a popup will show up

3 User can enter the username to find the one or more accounts user wants to share or click on the suggest account that system recommended

4 After that, user can choose one or more accounts that user want to share to

5 And the last step, user click on the button share to complete sharing a post to another account

Share at post option 1 User go to any post, click a “three dots” icon on the right side of post, the post option will show

3 Do the same steps (3, 4, 5) as flow of events

Success Users successfully sharing a post

Figure 3.10 Delete a post Table 3.11 Delete a post specification

Name VC-USER-09 Delete a post

Brief description Allow user to delete a post

2 Users click on the post user want to view detail

3 A modal show, user can view detail post on that modal

4 User click on the icon three dots

5 A popup shows five options include report, share, copy post URL, delete and cancel

6 User click on option delete to complete delete a post

Delete at user wall 1 Go to my profile and scroll down, list of my posts will show

2 Do the same steps (2, 3 ,4, 5, 6) as flow of events

Success Users successfully delete a post

Figure 3.11 Report a post Table 3.12 Report a post specification

Name VC-USER-10 Report a post

Brief description Allow user to report a post

4 User click on the icon three dot

5 A popup shows five options include report, share, copy post URL, delete and cancel

6 User click on option report, choose the reason why you report, click send report button to complete

Report post at another user’s wall

1 Go to target profile and scroll down, the list of posts will show

2 Do the same steps (2, 3 ,4, 5, 6) as flow of events

Success Users successfully report a post

Figure 3.12 Follow another account Table 3.13 Follow another account specification

Name VC-USER-11 Follow another account

Brief description Allow user to follow another account

3 User hover into the name who created the post

4 A mini popup shows up information about total post, total follower, image of post

5 User click on button follow to follow another account

Follow at target wall 1 Go to target profile

2 Click follow button on the right side of profile

1 User click a list like users who like a post, list followings of any user of followers list

2 User click on button follow to follow another account

Success Users successfully follow another account

Chat with another account

Figure 3.13 Chat with another account Table 3.14 Chat with another account specification

Name VC-USER-12 Chat with another account

Brief description Allow user to chat with another account

1 On the home page, user click icon chat on the navbar

2 Navigate user to the chat page

3 On the left side of page, user can see list of conversations

4 On the right side, user click on the button create new conversation, a popup will show up

5 User can enter the username to find the account profile user want to chat or click on the suggested account that system recommended

6 After that, user click on button next on the right of popup

7 Now that, at the left that user see one account user that user want to chat

8 User enter the content in the chat input

9 After done typing, user click on the button send to chat with another account

Click existed conversation and chat with them

1 Do the same steps (1, 2) as flow of events

2 Click an existed conversation on the left side

3 Do the same steps (8, 9) as flow of events Entry condition(s)

Success Users successfully chat with another account

Figure 3.14 View notification Table 3.15 View notification specification

Name VC-USER-13 View notification

Brief description Allow user to view notification

1 On the home page, user click on the icon notification

2 A small popup will show up, user can see notification about who like post, who follow you, who comment user’s post, vv

Success Users successfully view notification

Update account profile information

Figure 3.15 Update account profile information

Table 3.16 Update account profile information specification

Name VC-USER-14 Update account profile information Brief description Allow user to update account profile information

1 On the home page, user click on the avatar

2 A dropdown will show up option include view your profile, setting

3 User choose option setting, navigate user to page update account profile information

4 User fills in the form completely information e.g., avatar, username,

44 email, bio, phone number, gender that user want to update

5 After that, user click on button send to complete update account profile information

Change avatar at profile page directly

1 Do the same steps (1, 2) as flow of events

3 On user profile page, user hover to your avatar, button change will show

4 User click change button, choose 1 image and click upload

Success Users successfully update account profile information Failed The system reports an error

Figure 3.16 View admin dashboard Table 3.17 View admin dashboard specification

Name VC-ADMIN-01 View admin dashboard

Brief description Allow admin to view more information about the system's data

2 Click an item which user want to view (top most accounts, chart, list report, )

Admin User who are logged in with role ADMIN to access the system

Success Successfully view information admin dashboard

Figure 3.17 Approve/Reject report Table 3.18 Approve/Reject report specification

Name VC-ADMIN-02 Approve/Reject report

Brief description Allow Admin to approve or reject

1 Admin click Post report tab, Account report tab or Comment report tab, the screen will show the table of chosen topic

2 Admin click any row want to view details of target which is reported

3 After admin view target details completely, admin can approve or reject that report by that reliability

Admin User who are logged in with role ADMIN to access the system

Success Successfully manage product colors in the system Failed The system reports an error

SYSTEM DESIGN

Architecture Diagram

Figure 4.1 Architecture diagram Architecture diagram Table 4.1 Architecture diagram Architecture diagram description

+ Is the main running server for the main back-end operations

+ Responsible for responding to and executing requests called from the client and the chatbot server

+ As a secondary server for the function of interacting with chatbots

+ It is responsible for receiving requests from the client through commands by message, converting the request to a specific API request form, and sending it to the

Application Server, after receiving the response, it will return to the client in the form of a message

+ Use ReactJS library in website version and React Native in mobile version

+ Is the main e-commerce sales page that communicates between customers and the system

+ There are functions to help customers access products and support orders, installment payments, and personal information management,

Sequence Diagram

User can log in to the website via username or email

Users with statuses such as inactive, banned, unverified, or those logging in from a new device must enter the verification code sent to their email to proceed.

Correct verify code case: the system will navigate the user to the newsfeed page

If the user’s status is active, the system will navigate the user to the newsfeed page

Figure 4.2 User login

Users can create a post by uploading one or more images, editing their style of them, writing a caption, and choosing the privacy of the post

Figure 4.3 Post creating

Users can type the message including text and emoji, send an image to another user, or group chat

Figure 4.4 Chat message

User can type and submit the comment including text and emoji and reply an another user’s comments

Figure 4.5 Comment creating

Administrator can view the post report details which are reported and can approve or reject that base on the reason

Figure 4.6 Report request

Activity Diagram

Figure 4.7 Post creating

Figure 4.8 Forgot password

State machine Diagram

Figure 4.9 Notification

Database design

1 Account Represent account information such as name, email

2 Post Represent post information such as content of post

3 Like Represent like information such as information about who liked, which post user have liked

4 Comment Represent comment information such as content of comment

5 Device_Meta_Data Represent device information such as device name, location name, which user has access the system

6 Collection Represent collection information such as name collection, who create the collection

7 Collection_Post Represent the table map between table collection and post

8 Avatar Represent the table map between table account and attachment

Represent the table map between table post and attachment

10 Hashtag_Rel_Post Represent the table map between table post and hashtag

11 Role Represent role information such as which

56 role user have eg account or user

12 Notification Represent notification information such as type notification, content

13 Setting Represent setting information such as type setting, value, who setting

14 Participant Represent participant information such as who joined the conversation

15 Conversation Represent conversation information such as name of conversation

16 Message Represent message information such as which message include in conversation, who send message, who received message, content message

17 Attachment Represent attachment information such as url to image, name of image

18 Hashtag Represent hash tag information such as name of hash tag

19 Report_Template Represent report information such as content report, sensitive type

20 Post_Report Represent the table map between table post and report template

21 Account_Report Represent the table map between table account and report template

22 Comment_Report Represent the table map between table comment and report template

1 id Bigint Unique ID for an account

The username of an account

The email of an account

The password of an account

The full name of an account

6 role_id Bigint The role of an account

The bio of an account

The gender of an account

The phone number of an account

10 status Boolean The status of an account

The access token of an account

12 access_token_expi red_date

Timestamp The access token expired date of an account

13 refresh_token character The refresh token of an account

14 refresh_token_exp ired_date

Timestamp The refresh token expired date of an account

15 created_by_accou nt_id

Bigint The id of who created

16 created_at Timestamp The date of account created

17 last_modified_by_ account_id

Bigint The id of who modified

18 last_modified_at Timestamp The date of account modified

1 id Bigint Unique ID for a post

3 privacy integer The privacy of a post

4 created_by bigint The id of who created

5 created_at Timestamp The date of account created

6 last_modified_by Bigint The id of who modified

7 last_modified_at Timestamp The date of account modified

1 id bigint Unique ID for a comment

2 content character varying The caption of a comment

3 post_id bigint The id of a post

4 parent_comment_id bigint The id of a parent comment

6 created_at timestamp The date of account created

7 last_modified_by bigint The id of who modified

8 last_modified_at timestamp The date of account modified

1 id bigint Unique ID for a notification

2 type character varying The type of a notification

3 presentation_id bigint The presentation id of a notification

4 trace_id bigint The trace id of a notification

5 action_author_id bigint The action author id of a notification

6 receiver_id bigint The receiver id of a notification

7 content character varying The content of a notification

8 timestamp timestamp The date of notification created

9 status integer The status of a notification

1 id bigint Unique ID for a conversation

2 name character varying The name of a conversation

3 timestamp timestamp The date of conversation created

1 id bigint Unique ID for a participant

2 conversation_id bigint The id of a conversation

3 account_id bigint The id of account who participant

4 timestamp timestamp The date of participant created

1 id bigint Unique ID for a message

2 sender_id bigint The id of an account sender

3 recipient_id bigint The id of a conversation

4 content character varying The content of a message

5 timestamp timestamp The created date of the message

6 status integer The status of message

7 message_type integer The type of message

1 id bigint Unique ID for an avatar

2 account_id bigint The id of an account for avatar

3 attachment_id bigint The id of attachment

1 id bigint Unique ID for an attachment

2 unique_name character varying The unique name of an attachment

3 actual_name character varying The actual name of an attachment

4 url character varying The url of an attachment

Table 4.12 Report template table specification

1 id bigint Unique ID for a report

2 content character varying The content of a report

3 sentitive_type character varying The sentitive type of a report

User interface design

Figure 4.11 Screen flow diagram

Screen Flow Diagram for e-commerce website Screen Flow description for an e-commerce website

Table 4.13 Screen flow diagram description

B000 Navbar The main navigation of website

The home of the website, contains a lot of posts of other users, whom a current user can interact with

Contains details of a post, including a list, like users, and list comments, a current user can comment or report in there

Contains the user information including my profile and other user profiles In there, we can follow/unfollow that user and can watch a list of posts of that user

The popover feature displays various notifications, including new followers, likes, and comments on posts It updates instantly to inform the user of any new activity.

At this page, users can update or change a new user’s information as an avatar, username, or full name,

At this page, the user can change a new password by typing a current user password and new password to change

At this page, the user can display receiving notifications via email

At this page, users can display receiving notifications via this website

User can create a new post in this modal, user can choose one or more images, can edit them, and create a caption

This modal present 3 types of models, including listing the following user, listing followers, and listing liked user of the post

An input for searching all users on this website, a user can search other users by username or full name

This modal presents two types of modals, include searching for a user, choosing one or more other users, and sharing a post or creating a new message with them

The page contains a lot of conversations among users On this page, the user can chat with other users and can create a new message with one or more other users

B014 Login Page Users can log in with the existed account in the system

B015 Register Page Users can register a new account there by typing full information

After the user submits the information on the register page, the website will navigate the user to there to type a verify code, which was sent to the registered email

Completing this step will complete the registered account

B017 Report Modal This modal appears at 3 positions: report user account, report a post, and report a comment

65 if a current user wants to report them

User can get a new password in case the user forgot the password, typing an email and verify to get a new password there

4.6.1.2 Detailed specifications of each screen

Figure 4.12 Navbar Table 4.14 < User Website> Navbar specification

1 Home Button Click to navigate to Home Page

2 Search Input Type to search the user by username or full name

3 Create post Button Click to create new post

4 Home Button Click to navigate to Home Page

5 Chatting Button Click to navigate to Chat Page

6 Notification Button Click to show notification list

7 Profile Button Click to navigate to Profile Page

8 Setting Button Click to navigate to Setting Page

9 Logout Button Click to logout

Figure 4.13 Newsfeed Page Table 4.15 Newsfeed Page specification

1 Owner user Label Click to navigate to owner profile page

2 Post detail Image Click to show detail post modal

3 Like Icon Click to like a post

4 Comment Icon Click to focus a comment input

5 Share Icon Click to share a post

6 List of likes Label Click to show list of users who like that post

7 Emoji Icon Click to show list of emoji for user to comment

Input Input Click to focus input and type a comment text

9 Post Button Click to submit comment at comment input

Figure 4.14 Post detail Table 4.16 Post detail specification

1 Post option Icon Click to show the option of a that post

2 Owner user Label Click to navigate user to owner profile page

Label Click to reply the top level (parent) comment

Label Click to show list of child comments

5 Reply child Label Click to reply the child comment

6 Like Icon Click to like a post

7 Comment Icon Click to focus a comment input

8 Share Icon Click to share a post

9 List of likes Label Click to show list of users who like that post

10 Emoji Icon Click to show list of emoji for user to comment

11 Comment Input Input Click to focus input and type a comment text

12 Post Button Click to submit comment at comment input

13 Previous post Button Click to go to a previous post

14 Next post Button Click to go to a next post

15 Previous image Button Click to show a previous image of post

16 Next image Button Click to show a next image of post

17 Reply emoji Icon Click to show list of emoji for user to reply comment

Input Click to focus input and type a reply comment text

19 Post reply Button Click to submit reply comment at reply comment input

Figure 4.15 User Profile (1)

Figure 4.16 User Profile (2) Table 4.17 User Profile specification

1 Change avatar Label If that profile is my account, this label is shown

- Hover avatar to show this label

- Click to change avatar of user

Button - Click to navigate user to change information page

3 User setting Icon Click to navigate user to user setting page

Click to show list of users who follow current user profile

List following Label Click to show list of users who current user follow

6 Posts tab Tab Click to go to the posts tab This tab contains a lot of posts that current user posted

7 Avatar tab Tab Click to go to the avatar tab This tab contains a lot of avatar image that current user on the last and now

8 Post Image An Image is a first image of post if that post contains a lot of images

Click to show the specific post

9 Message Button Click to navigate user to chat page with that current user

10 Follow Button Click to follow that user

11 User option Icon Click to show the option of that user (report account, )

12 Unfollow Button Click to open confirm unfollow dialog

Button Click to unfollow that user

14 Cancel Button Click to cancel dialog

Figure 4.17 Notification Popover Table 4.18 Notification Popover specification

All filter Button Click to show all notifications

2 Unread filter Button Click to show only some notifications that user doesn’t read

Div Click to navigate user to user profile that follow me

Div Click to navigate user to that target post

Figure 4.18 < User Website> Edit Profile page Table 4.19 < User Website> Edit Profile page specification

1 Edit profile Tab Click to go to edit profile tab

2 Change password Tab Click to go to change password tab

3 Emails notification Tab Click to go email notifications tab

4 Push notifications Tab Click to go to push notifications tab

5 Privacy and security Tab Click to go to privacy and security tab

6 Login activity Tab Click to go to login activity tab

7 Change avatar Label Click to change avatar

8 User’s name Input Display user’s full name

9 User’s username Input Display user’s username

10 User’s bio Input Display user’s bio

11 User’s email Input Display user’s email

12 Confirm email Button Click to confirm your email to change

13 User’s phone number Input Display user’s phone number

Button Click to confirm your phone number to change

15 User’s gender Input Display user’s gender

Checkbox Click to accept that recommend user include your account

17 Submit Button Click to submit change user profile

Figure 4.19 Change Password page Table 4.20 Detail Page specification

1 Old password Input Type an old password

2 New password Input Type a new password

3 Confirm password Input Type again a new password there

4 Change password Button Submit to change new password

5 Forgot password Label Click to navigate user to forgot password page

Figure 4.20 Email Notification Page Table 4.21 Email Notification Page specification

1 Report emails Checkbox Accept receive report notification via email or not

2 Reminder emails Checkbox Accept receive reminder information via email or not

Figure 4.21 Push Notification Page Table 4.22 Push Notification Page specification

Turn on or off receive notifications relate like my post

Turn on or off receive notifications relate comments my post

Turn on or off receive notifications relate somebody follows me

Figure 4.22 Create post Modal (step 1)

Figure 4.25 Create post Modal (Delete all confirm dialog)

Table 4.23 Create post Modal specification

1 Upload image(s) Image Upload 1 or more image(s) at step 1

2 Back Button Back to step 1

3 Next Button Next to final step if done action at step 2

4 Save Button Save image after editing

5 Add more image Div Add more image (can edit that) at step 2

6 Back Button Back to step 2

7 Post Button Complete post the post after displaying full information of that post

8 Choose privacy Select Choose privacy of that post (public, private, )

9 Write caption Input Type the caption of that post

10 Emoji Icon Click to show the list of emoji to add to caption

11 Add more image Div Add more image (cannot edit that) at final step

12 No Button Close a confirm dialog

13 Yes Button Confirm remove the draft of post

Figure 4.26 Interaction Modal Table 4.24 Checkout Page specification

1 Follow Button Click to follow that user

2 Username Label Click to navigate user to that user profile page

3 Message Button Click to navigate to chat page to chat with that user

4 Unfollow Button Click to show confirm unfollow dialog and confirm it

Figure 4.27 App Search Table 4.25 App Search specification

1 Search Input Type the user’s name that a user wants to find

2 Clear all Label Click to clear the saved list of searches before

3 Remove Icon Click to remove that item

4 User info Div Click to navigate to that user profile page

5 View more Label Click to view more result of search (if available)

Figure 4.28 Share post Modal Table 4.26 Share post Modal specification

1 Search Input Type text to search user

2 Check user Checkbox Check user(s) to share with via chat message

3 Remove Icon Remove that user out of list

4 Share Button Click to share that post with per user of list

Figure 4.29 Chat Page Table 4.27 Chat Page specification

Div Click to change current conversation on the right of screen

2 Search Icon Click to search conversation

3 Create new message Icon Click to search and create new message

4 Target user Label Click to navigate that user profile

5 Chat option Icon Click to show chat option

Icon Click to show emoji list to add to an input message

7 Message Input Type the text to chat with other

8 Upload image Icon Upload image to send to target user

9 Quick like Icon Click to send heart icon to user

10 Share post message Div Click to navigate to that post

11 Image message Image Click to show the image modal

Figure 4.30 Login Page Table 4.28 Login Page specification

1 Username Input Type the username

2 Password Input Type the password

3 Hide password Icon Click to show plain text of password or not

Label Click to navigate user to forgot password page

Click to submit and login with username and password

6 Register Label Click to navigate user to register page

Figure 4.31 Register Page

Table 4.29 Register Page specification

1 Email Input Type the email

2 Full name Input Type the full name

3 Username Input Type the username

4 Password Input Type the password

5 Hide password Icon Click to show plain text of password or not

Input Type the confirm password

Icon Click to show plain text of confirm password or not

8 Forgot password Label Click to navigate user to forgot password page

9 Register Button Click to submit and register with username and password

Figure 4.32 Verify Register Page Table 4.30 Verify Register Page specification

1 Verify code Input Type verify code contains 6 number digital

2 Resend code Label Click to receive again new verify code via email

3 Cancel Button Click to cancel register account

4 Submit Button Click to submit the verify code to register

Figure 4.33 Report Modal Table 4.31 Report Modal specification

1 Choose report reason Div Click to choose the reason why reporting

2 Back Icon Click to go back

3 Send a report Button Click to send a report after read the reason and detail of report

4 Block Button Click to block author user

5 Unfollow Button Unfollow author user (if available)

6 Close Button Close a modal after report

Figure 4.34 Forgot Password page Table 4.32 Forgot Password page specification

1 Email Input Type an email to find existed account

2 Cancel Button Cancel forgot password process

3 Search Button Click to search an account that was registered before with that email

4 Not you Button Click to go back previous step

5 Continue Button Click to go to the next step

6 Verify code Input Type the verify code that contains

7 Resend code Label Click to receive again verify code via email

8 Submit Button Click to go to the final step

9 New password Input Type the new password

10 Hide new password Icon Click to show the plain text of new password or not

11 Confirm password Input Type the confirm password

12 Hide confirm password Icon Click to show the plain text of confirm password or not

13 Change password Button Click to complete information and submit to change password

Figure 4.35 Screen flow diagram

Screen Flow Diagram for Administration Website Screen Flow description for Table 4.33 < Administration Website> Screen flow diagram description

A001 Dashboard Page Statistical management page for information about number of posts, user account, top most account

A002 Post Report Page Admin can watch post reports list there and can approve or reject that report

A003 Comment Report Page Admin can watch comment reports list there and can approve or reject that report

A004 Account Report Page Admin can watch account reports list there and can approve or reject that report

A005 Report detail Modal Admin can watch the details of a report include content of target that was reported and can approve or reject that report

A006 Chart Detail Admin can watch the details of chart and specific number of targets

4.6.2.2 Detailed specifications of each screen

Figure 4.36 Dashboard Page Table 4.34 Dashboard Page specification

1 Dashboard Tab Click to go to dashboard tab

2 Post report Tab Click to go to post report tab

3 Comment report Tab Click to go to comment report tab

4 Account report Tab Click to go to account report tab

5 Analysis Tab Click to go to analysis tab

6 Posts chart Div Click to show a chart that show the number of posts filtered by month, quarter, year

7 User account chart Div Click to show a chart that show the number of user accounts filtered by month, quarter, year

Figure 4.37 Post Report Page Table 4.35 Post Report Page specification

Select Change to show number of items per table page

2 Item Div Click to show report detail modal contain a summary of the reported target

Figure 4.38 Comment Report Page

Table 4.36 Comment Report Page specification

Figure 4.39 Account Report Page

Table 4.37 Account Report Page specification

Figure 4.40 Product information Modal

Table 4.38 Product information Modal specification

1 Cancel Button Click to close a modal

2 Info Tooltip Hover to watch the details of report title

3 Reject Button Click to show a confirm reject dialog

4 Approve Button Click to show a confirm approve dialog

5 Confirm approve Button Click to confirm approve this report

6 No Button Click to close a dialog

7 Confirm reject Button Click to confirm reject this report

Figure 4.41 Chart Detail Table 4.39 Chart Detail specification

1 Chart Div Hover to watch details of day’s chart value

2 Month Button Click to filter a chart by month

3 Quarter Button Click to filter a chart by a quarter of year

4 Year Button Click to filter a chart by year

5 Close Icon Click to close a chart

IMPLEMENTATION AND TESTING

Implementation

Tools and techniques used for the project

IDE Intellij IDE, Visual Code

5.1.2 Deploy on cloud environment (AWS)

Figure 5.1 Deploy on cloud diagram

- Run the Sonarqube scan on the Maven build stage and take the Jacoco test cover result to decide whether it passes the minimum code coverage restriction or not

- If it passes the qualifications, we will run our docker-compose.yml to create the container images and then push these to Docker Hub

- We will access the AWS EC2 to pull down the images to run it as a service that serves HTTP services and WebSocket services in our application

- We build the ReactJS optimized production bundle file

We utilize AWS CLI to manage our S3 bucket, which functions as a server for serving static files, and subsequently update the content within the build folder to this bucket.

- The production DBMS is RDS Postgres SQL

- We use AWS Cloudfront for the CDN approach

- We use AWS Load Balancer and Auto Scale Group powered by AWS Elastic Beanstack

We can achieve the application via the start point: http://vivaconapplication.s3-website-ap-southeast-1.amazonaws.com/

5.1.3.1 Compile and start backend server on local

Clone or download the project from the Github link: https://github.com/hungdoan- tech/Vivacon-Services.git

Open the folder which has been cloned from Git Provider, open the terminal, run the command:

./mvnw clean install package java -jar /target/Vivacon-0.0.1-SNAPSHOT.jar

The sever which serves the HTTP service and WebSocket service now can be accessed at port 8080

5.1.3.2 Compile and serve frontend as static file on local

Clone or download the project from the Github link: https://github.com/hungdoan-tech/Vivacon-UI.git

Open the folder which has been cloned from Git Provider, open the terminal, run the command: npm install -g serve (to install the serve command) npm run build

The sever which serve our static production build bundle file of ReactJS app now can be accessed at port 4000.

Testing

This section mainly describes the method for planning, organizing, and managing the test process of the platform

System testing delivers essential insights throughout various testing phases, enabling a comprehensive evaluation of the system against established criteria This process facilitates targeted enhancements, ultimately improving the sales system's efficiency and effectiveness.

- Purpose: Test the main functions of the system (important)

1 Guest Login Guest can log in to the system by username and password A system will respond a result in both cases success and failure

2 User Chat with other user or group

User can chat with other users, create a group chat and create a new conversation

When another user engages with a target user by commenting on, liking their posts, or following them, the target user will receive a notification regarding these interactions.

4 User Search user and save user

When current user wants to find somebody and go to target’s profile

Table 5.3 Guest Login

ID Description Test steps Test data Expected result Actual result Status

Type a username and password, which are existed in system and it have a USER role

A system will response a snack bar with content:

“You login successfully” and navigate user to newsfeed page

Type a username and password, which are not existed in system

“Username or password is invalid”

Type only username and empty password

The border of password input will change to red color and the text below that with content:

+ Click login button “Password is required” will show

Type a username and password, which are existed in system and it have a ADMIN role

“You login successfully” and navigate user to dashboard page

5.2.3.2 User chat with another user or group

Table 5.4 Guest filter installment information

ID Description Test steps Test data Expected result Actual result

Click existed conversation with one or more users on chat page and send any message to that

+ Open website and go to chat page

+ Click random conversation item in conversations list

On target user will receive a message

105 conversation input and press Enter keyboard

+ Login by target’s user account to receive the result

Click existed conversation with one or more users on chat page and send any image to that conversation

+ Click upload image icon at the page bottom and choose image “random.png” file + Login by target’s user account to receive the result

On target user will receive an image immediately and can click to watch bigger size of image

Share any a post with one or more user via chat message

+ Open website and go to newsfeed page

+ Click a share message icon at bottom any post

At both accounts xuanthuy, trucvan will receive a new message from owner user with a summary of shared post Both can navigate to that

+ Click share button in that modal

+ Login by target’s user account to receive the result post details page by clicking a summary

Create a new conversation and send a first message to user who not exist in previous conversations list

+ Click a create new icon on left column of chat page

+ Click next button in that modal

+ Typing “Hello” on message input and press Enter keyboard

At both accounts xuanthuy, trucvan will receive a new message in top conversation which is a group include xuanthuy, trucvan and owner A new message will show on there

Create a new conversation but not send any message to user who not exist in previous conversations list

A target not receive any new activity on chat page

About owner, new virtual conversation with name “xuanthuy, trucvan, me” will appear but there is not message on right column

When owner refresh page, this virtual conversation will disappear

Search a target user and this target is existed in conversations list

At owner page, the conversation item will go to the top of conversations list after click next At this time, a target

+ Typing “Hello” on message input and press Enter keyboard

+ Login by target’s user account to receive the result didn’t have any new activity

When “Hello” message was sent, a target will receive this message immediately

When owner is focus on message input, a target will receive a notification that owner is typing message

+ Click and focus to message input

A target will receive a new notification on message list screen:

At owner chat page, nothing happen

Other user comment target’s post

+ Open website and go to target’s post

+ Typing “Hello” on comment input and click post button

A target will receive notification immediately with content: ‘Xuan Thuy comment your post’, and when target click that, the screen will navigate user to that post detail page

Other user like target’s post

+ Open website and go to target’s post

A target will receive notification immediately with content: ‘Truc Van like your post’, and when target click that, the screen will navigate user to that post detail page

Other user follow target user

+ Open website and go to target’s profile

+ Click follow button on the right side of target’s information

A target will receive notification immediately with content: ‘Truc Van follow you’, and when target click that, the screen will navigate user to that owner profile

TC_UN Other user unfollow target

+ Open website and go to Follow owner’s

A target won’t receive anything from this

+ Click unfollow button on the right side of target’s information name:

Table 5.6 Search user

The first time user search but don’t type anything on search input

+ Open website and click to app search

Nothing happen As expected Pass

The first time user search and type any content on search input

+ Type the content on search input

The popover will show and the user list whose name have

+ Click the first item (if has result) hungdoan, …

When click to any item, the screen will navigate user to that user’s profile

The second or later time user search and don’t type anything

The clicked item before was saved and show on the recent list users

The second or later time user search and type the content, after that user clean all search content

+ Type the content on search input

+ Wait the result that was shown, clean all search content

First, the recent user who were clicked before will show

When search new content, the result will show

Clean all search content, the recent user list will show again

CONCLUSION

Result

We have developed a comprehensive social media platform that allows users to engage in activities such as posting images, sharing content, commenting, chatting, and receiving real-time notifications, while also enabling personal settings customization Additionally, administrators have access to essential management features, including data analysis, report resolution, and account management, ensuring a smooth and efficient user experience.

- We have enhanced and proved that we have teamwork communication skills and analytical work effort when working on a short-term project.

- We know how to apply the theoretical basis to build the database, the HTTP server that can serve the applications as Single Page Applications by using ReactJS.

- Apply and take advantage of the Web-Socket and its sub-protocol STOMP to create an application that has multiple useful features in a real-time manner.

Strengths and Drawbacks

The website boasts a user-friendly interface that allows users to effortlessly create posts, edit images, share post links, and send messages while following each other without the need for instructions Its design includes alternative flows that enhance usability, ensuring a quick and efficient user experience.

- The platform has the ability to handle multiple time zones and multiple languages, that suit international applications which can be used by users in other nations

- Supporting users to communicate and interact with each other easily over the network in a real-time manner with a chatting, and notification feature

- Support user to configure their personal settings on email, notifications, and login activities,

The platform is designed for high availability and scalability, utilizing a containerized approach with Docker and leveraging the robust infrastructure of Amazon Web Services (AWS) for deployment.

- Implement the "Account to follow" feature which utilizes the Graph and Map Reduce programming approach

- Implement the End to End encryption when communicating by messaging between two users

- We still have not implemented the right model for image classification to take this data and suggest the suite images and account on the newsfeed and discover tab

Due to the limited timeframe, we are unable to address all testing scenarios, particularly in stress and load testing This is crucial, as we lack real customers or users to evaluate whether our application can manage high throughput effectively.

The newsfeed algorithm primarily focuses on delivering content from accounts that users follow, limiting exposure to attractive posts from non-followed accounts This limitation is largely due to the absence of an effective image classification model.

Lessons learned

Effective project management involves identifying when to push forward and recognizing bottlenecks that require focused intervention By understanding these critical points, teams can streamline processes and enhance productivity, ensuring successful project outcomes.

- Learn the business use-cases of a social media application Learn the techniques of Spring framework ecosystem in servlet stack which contains web, data, testing, caching, and messaging supporting libraries

- Learn the techniques of building a friendly and flexible user interface, it will easily be maintained in the future with the ReactJS library

- Learn package application as the container via Docker and deploy it into AWS cloud

- Have the chance to research topics “Account to follow” algorithm and End to End encrypted chat.

Future work

After three months of building and enhancing features, the team identified key ideas to create a robust system that addresses the limitations of the current platform Due to time constraints, they decided to postpone these developments for future implementation, anticipating the platform's potential growth and wider adoption.

- We will resolve and enhance some features which have been listed in the

- Implement an advertising feature for business advertising, integrating contacts and payment options for this to make a profit from our platform

- Support posting and editing video on the platform via the Short Sharing feature which is a small post that only exists and can be seen in 24 hour lifetime

To accommodate a growing user base, it is essential to implement an autoscaling mechanism for both the application and database layers This may require transitioning from a monolithic architecture to a microservices approach to enhance scalability and performance.

APPENDICES

Doan Quoc Hung - Analyze and design use-case diagrams.

- Plan tasks and divide these into tickets.

- Research Spring framework to build the durable backend server.

- Build the web socket handling mechanism for real-time functions

- Research about the Map Reduce approach to suggest the “accounts should follow”.

- Deploy our app’s infrastructure in AWS.

- Analyze and design use-case diagrams.

- Research ReactJS library to build a social media website and management website.

- Research and build test cases and test functions and interfaces on websites.

- Serve Web Socket handling for real-time functions at the client side.

- Research about building an encrypted chat app with the Web Cryptography API.

- Deploying the website in the AWS S3 to serve as a static page.

Truong Minh Khoa - Analyze and design use-case diagrams.

- Building the tool to generate the large data for testing purposes

- Building entire features of the administrator role and implementing authorization, and verification in the application.

- Containerize the application by using Docker.

- Design data and algorithm on Newsfeed.

- Writing scripts for building store procedures and functions in PostgreSQL.

1 Spring framework https://spring.io/projects/spring-framework

2 Spring messaging https://link.springer.com/book/10.1007/978-1-4842-1224-0

3 ReactJS Library https://reactjs.org/

4 STOMP client https://stomp-js.github.io/stomp-websocket/codo/extra/docs- src/Usage.md.html

5 Building suggesting “Account Should Follow” algorithm http://www.cems.uwe.ac.uk/~pmatthew/blog/2014/03/04/teaching- mapreduce/

6 Building encrypted chat app with the Web Cryptography API https://golb.hplar.ch/2020/05/cryptochat.html

Tiêu đề	Building Social Media Platform For Sharing Images
Tác giả	Doan Quoc Hung, Nguyen Huynh Anh Truc, Truong Minh Khoa
Người hướng dẫn	MSc. Nguyen Tran Thi Van
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	capstone project
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	135
Dung lượng	7,96 MB