Besides Social Media, Social Bookmarking is an online servicethat allows users to add, annotate, edit and share bookmarks of web documents.Useful features from Social Bookmarking have ma
Trang 1VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY
ADVANCED PROGRAM IN INFORMATION SYSTEM
GRADUATION THESIS
BUILDING A SOCIAL BOOKMARK SYSTEM
BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS
HO CHI MINH CITY, 2022
Trang 2VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY
ADVANCED PROGRAM IN INFORMATION SYSTEM
TRUONG THỊ NGỌC LINH — 18521000
NGUYEN DUY PHƯƠNG - 18521276
BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS
Trang 3ASSESSMENT COMMITTEE
The Assessment Committee is established under the Decision đate by the Rector of the University of Information
Technology.
— eee eee cece eee eee — Chairman.
PA eee eeeeeeeneeeeneeneneees — Secretary.
— cece cere eee eeeeeeteeen eens — Member.
Trang 4The thesis team sincerely thanks Dr Nguyen Thanh Binh for closely following the project implementation process, and contributing useful ideas so that the group can complete the thesis topic in the most complete way.
The group would like to thank family and friends for encouraging and encouraging the group to complete the thesis.
The team also would like to thank all the teachers of the University of Information Technology - Vietnam National University, Ho Chi Minh City, especially the teachers in the Information Systems Department for their help and support.
Sincerely, thank you!
Ho Chi Minh City, December 28, 2022
Author team.
Trang 51.4.2 The difference of the Street Anywhere
Chapter 2: Background knowledge
2.1 Street Anywhere
2.2 ReactJS
2.2.1 About ReactJS
2.2.2 Core concept of ReactJS
2.2.3 ReactJS with Street Anywhere:
2.3 NodeJS
2.3.1 About NodelS
2.3.2 Core concept NodeJS
2.3.3 NodeJS with Street Anywhere
2.5.3 Compare MySQL and PostgreSQL
2.5.4 PostgreSQL with Street Anywhere
2.6 TypeScript
2.6.1 Introduction to TypeScript
Trang 62.6.2 Features of TypeScript
2.6.3 Compare TypeScript vs JavaScript
2.7 APIs MAP
2.7.1 About Mapbox API
2.7.2 Mapbox API services
2.7.3 Pros and Cons of Working with Mapbox API 2.7.4 Mapbox vs Google Maps
Chapter 3: System Analysis and Design
3.1 Design System Architecture.
3.2 Design Function Tree diagram
3.3 Design Database
3.3.1 Entity Relational Diagram
3.3.2 Detail description of data tables
3.4 Design Use Case diagram
3.4.1 Use Case diagram
3.4.2 Description of Actor
3.4.3 Use Case Specification
3.5 Design Activity diagram
Trang 7Chapter 4: Implementation and DepDÏOVHICHÍ -555<<S<SSsSessssesseseeeesÊ (⁄{
4.1 Snapshot main (Ì€SÌ(OD œ5 5< 2 É 9 4 Họ 0 10000001 06 104
4.1.1 Screen create a MCW DOSĂ c1 2121112 11121221012 1H22 HH HH0 TH TH gi 104
Chapter 5: Future WĐOF <<<<<« — ::
Chapter 6: References <5 << SA 1K H114 01.0145 esessssssssssesessÊ ,2 (J
Trang 8Table of FiguresFigure 1 - Social Media users in Vietnam between 2021 and 2022 6Figure 2 - Social Media users in the World in October 2022 ‹ «++x++ 8
Figure 3 - People aged 13 and above around the world use Pinterest in July 2022 9
Figure 4 - Number of Students using Social Networks s-cccs<sss<ss+ 13Figure 5 - Frequency using Social Bookmark of VNU cccccceesseeeteeeeteeseteenenes 15
Figure 6 - Use types of Social NetWOTKS - ác càng HH nhe 16 Figure 7 - Necessary Function which user VOf€ eeeesseeeeenetseeeeneeaees 17
Figure 8 - Survey chart of using social shar1ng - -c + scc + ‡+ssexsseeesseess 18
Figure 9 - Stack Overflow survey of the most used technologies by developers in
2022 oieeeeccsesecscssenesseesenseseeseescecsesecessecsceesseeseescesseescsesseeseeesaesaeessesaeeseeesaeeaseasateaees 25Figure 10 - Example of a functional Compoment c ce eceeeeeeeeeeeeeseeseenesneeseeeeens 27Figure 11 - Example of a class-based COMPONENE - ¿+ +-ss++ss++sssx+ses++ 27
Figure 12 - Two type of data in ]€aC( - - 2c 221212 1E 1 ng re 28
Figure 13 - Example of a simple component with a render function 28Figure 14 - Example of how props are passed down from a parent component to a
lln11s/00i19105157 200272777 29Figure 15 - Example of how state is used within a class-based component 30
Figure 16 - Stack Overflow survey of the most used technologies by developers in
Jl\V⁄⁄aaaiiiiÍÚÁ 32
Figure 17 - This is the structure of ExpressJS - cSĂ S3 vs sseirserxes 35
Figure 18 - To use the Router in Express ccccccccccssesscesseeseeeseesseeseeeeeseesseenseens 35
Figure 19 — Example to handle a GET request to the root path - - -‹- 36Figure 20 - Stack Overflow's Most Favorite Developers Database Survey of 2022 38Figure 21 - This is data from Google Trends showing search trends over the past
year for both Frontend languages ccccccccsecsseeseeeseceseeseeeseceseceseenseceeeeneeeneeeseeenees 44
Figure 22 - Stack Overflow's Most Favorite Developers Language Survey of 2022
Trang 9Figure 24 - System Architecture nh - 55
Figure 25 - Function Tree diagram ccccccccscessecsseeeeseeeseeeseeeseensecesecsseeseeeeeeseens 56Figure 26 - Entity Relationship DDIagraim - - c2 3+1 E3 +EEseEEsersrrrerrrrrerrre 57Figure 27 - Use Case overviews the SYSf€IN - -.c Sc 1v nS vn HH vn veg 64Figure 28 - Details Use Case 2: Search by CTIf€rla s5 +s<ss++scsseereseees 65
Figure 29 — Details Use Case 3: Manage PoSt cccescccscesscesseeseeeteeeseeereeseeeeenseens 65
Figure 30 — Detail Use Case 4: Manage Bookmark - 5+ 5-s++xcsveseeses 66Figure 31 — Detail Use Case 5: Manage Reaction ccccecccecesseeeseeeeteeesteeeseessees 66
Figure 32 — Details Use Case 6: Manage Follow ccccccccesseesseeseeeeeseeeseeeeeeseens 66 Figure 33 — Detail Use Case 7: Manage Comment ¿+ +s++s++sx+sxsx 67
Figure 34 — Activity overviews the SyStem 0 ecceeceesceeseeeeeeeseeeseeeeeeeeeeeeaeteneens 78Figure 35 — Activity diagram: Search by CTIf€TIa - 5c + s+ccs+ksserseerseerske 79
Figure 36 — Activity diagram: Create a MeW pDOSf - c c1 cv tr ssirsrrsrs 80 Figure 37 — Activity diagram: Update DOSE - 5c 22c 3.132 EEEsissirsrrrsrerrre 81
Figure 38 - Activity diagram: Delete pOSE - óc + vn ngư 82Figure 39 - Activity diagram: Create a new COIN€TI - 25552255 **+s*s++ss+2 83Figure 40 - Activity diagram: Update comm€TI - 5 5 5s 3+2 *++*v++ev+sexss 84Figure 41 - Activity diagram: Delete comrmef( .- 5+ ++s*++++v+sex+eexsxx 85Figure 42 - Activity diagram: Create new bookimaFÏK - - «55c ssveseeseesee 86
Figure 43 - Activity diagram: Unbookmarked - ¿5 52+ £++x£+sx+scxss 87
Figure 44 - Activity diagram: Create mew reaction ceceeecceseeesseeeseeeeseeeeaeeeaes 88Figure 45 - Activity diagram: Update reaction cceecceeceeseeseeeneeeseeeeeeteeeeenseens 88Figure 46 - Activity diagram: Delete reaction 0.0 cece ee eceseeseeeeeneeeceeseeaeresateeeens 89Figure 47 - Activity diagram: Follow 0 cceccecceesceeceeeeceeeeseeeeeeeeecneeeeeeeeeaeeeneens 90
Figure 48 - Activity diagram: UnfOlÏOW - + 12 1212 112111111111 1 1x re 91 Figure 49 - Sequence diagram: Search by CTIf€TI4 - + se ssersserrrerrrs 92 Figure 50 - Sequence diagram: Create a new DOSÍ - nh 92
Figure 51 - Sequence diagram: Update post cccccccccessceesceeneeeeneeeseeeseessseensaes 93
Figure 52 - Sequence diagram: Delete DOSÍ - St S2 93
Trang 10Figure 53 - Sequence diagram: Create a new COMMENE - 5 5+5 ++s<5+2 94 Figure 54 - Sequence diagram: Update comimenf - 5 +2 *++s++£+sex+sexss 94
Figure 55 - Sequence diagram: Delete comimenf - - ¿5+ + *++ss+svx+sex+eexssz 95Figure 56 - Sequence diagram: Create new bookmarK - - 5+5 s+++s++ss++ 9SFigure 57 - Sequence diagram: Unbookmarked - ‹ s+++ss**+ssxx+seexssexss 96
Figure 58 - Sequence diagram: Create new r€aCfIOI -c cc stress 96 Figure 59 - Sequence diagram: Update reaCfIOI + cs* + ssvseesreeeeske 97
Figure 60 - Sequence diagram: Delete reaction ccceccccsseeeseeeeteeeseeeseesseeensaes 97
Figure 61 - Sequence diagram: Create new follow ccccccccecseeseeseesseeseeeeeneeens 98 Figure 62 - Sequence diagram: Unfollow ccccecccecesceesseeteeeseeeeeeneeeneeeeeeseeneeens 98
Figure 63 - Wireframes Register DAB nh ng HH nh nh ng 99Figure 64 - Wireframes Detail Post paB€ - - 2c 22 23233211 EEEsreree 100
Figure 65 - Wireframes User Information page - + + **+++ssserssesssers 101 Figure 66 - Wireframes User Detail paB€ c2 32.112 1 Eteirseirsrrrsrses 102
Figure 67 - Wireframes Admin Dashboard - - 5 5 + svsvsseeseeserske 103Figure 68 - Screen create a new post Ì 5c 3321121331111 Eeree 105Figure 69 - Screen create a NeW POSt 2 0 220111 111211111 11111111811 81 re 105
Figure 70 - Screen create a NeW POSt 3 c3 112 12 re, 106
Figure 71 - Screen detail post 1n nGIAIAIAIẠIAẠỌỤỌỤẠI -.- 107
Figure 72 - Screen detail post 2 cccccccccccsscesscesscesscsseesecesseesecessesseesseeeeeeeeseeses 107 Figure 73 - Screen detail post 3 - "Track your friends" feature 108 Figure 74 — Landing page 1 cceccecceeseesseesseeseeeseesseceeeeseeeseeeseenseenseeeeeeeeetenaeeaes 109
Figure 75 — Landing page 2 - Follow the poster or bookmark the post 109Figure 76 — Landing page 3 - Can navigate to pages "Short” -+- 110Figure 77 - Deployment ÏD1aØTa1 - - ¿+ 3+ 332111325 E35EEEESESEEerekrereerersee 110
Trang 11Table of Tables
Table 1 - Survey question to collect User ODIRIODS - - 5 5s xssvxseerss 12 Table 2 - Compare some necessary functions for a website that integrates Social
Media and Social BookimarK - ĩ- 5 + s1 91 211911 1 1v nh nh HH Hưng n 19
Table 3 - Compare MySQL and PostgreSQL SĂ 2S 13+ srsserssexes 43Table 4 - Compare TypeScript vs JavaScript -.- cv re 47
Table 5 - Mapbox vs Google Maps: Pricing CompariSOn - 55555 +++s+ 52
Table 6 - Detail description of data table bookmark - 5 55+ c+csecsxs 58Table 7 - Detail description of data table posts -.- 2-5 2255 *‡+<xssvexssexss 59
Table 8 - Detail description of data table comments ¿5255 + 5+ *++s++s+ 59 Table 9 - Detail description of data table categories ccecceseeseeteeeeeteeeteeeseees 60
Table 10 - Detail description of data table postCaf€ðOTIeS -ccs-c++s s52 60Table 11 - Detail description of data table postReactions ‹‹ -+++s<ss++ 60Table 12 - Detail description of data table postTags ¿+55 sex 61
Table 13 - Detail description of data table reactions 5 52s *++x+scxsx 61
Table 14 - Detail description of data table roÏ€S - ¿55c + S+c*++c+svrssereeessee 61Table 15 - Detail description of data table tags 00 ccc eecceesseseseeeteeseteeesteeeseensaes 61Table 16 - Detail description of data table uS€TS -.- 5-5 2S *++sksseeressxes 62Table 17 - Detail description of data table folÏOWWeFS ¿5+ s++cxssexsserss 62Table 18 - Detail description of data table comment - - + ++xc+c<+2 63
Table 19 - Detail description of data table notificafions 555cc s+ssss 63
Table 20 - Table Description Of À COT - - c1 1121113911119 1111111111811 re 67
Table 21 - Table Use Case Specification: Search by CTIf€TI4 . s-c++<<++s+ 68 Table 22 - Table Use Case Specification: Create new pOSf cà 69
Table 23 - Table Use Case Specification: Update post - . -c c2 69
Table 24 - Table Use Case Specification: Delete post ¿5c ccc sex 70 Table 25 - Table Use Case Specification: Create a new comment -‹ 70 Table 26 - Table Use Case Specification: Update comment - ‹- -«- -«- 71
Table 27 - Table Use Case Specification: Delete comment - ‹ 5+ 72
Trang 12Table 28 - Table Use Case Specification
Table 29 - Table Use Case Specification
Table 30 - Table Use Case Specification
Table 31 - Table Use Case Specification
Table 32 - Table Use Case Specification
Table 33 - Table Use Case Specification:
Table 34 - Table Use Case Specification
: Create a new bookmark : Unbookmarked - << << <<+
: Create a new : Update reacfion .- c2: Delete reaction - << << << s <<
Trang 13With the development of modern technology, the concept of "Social Media" seems
to be too familiar because of its popularity, utility, and coverage to a large number of
users Nowadays social media is a part of social media and it is indispensable in everyone's life Social media is an increasingly popular communication channel.
Social media is a powerful communication tool and a way for people to communicate
with each other and exchange their resources and services Its impact on people is
gaining significance Besides Social Media, Social Bookmarking is an online servicethat allows users to add, annotate, edit and share bookmarks of web documents.Useful features from Social Bookmarking have made everyone's work and life moreefficient
However, to optimize all the functions of Social Bookmarking and Social Media, it
is necessary to have a system that supports people bookmarking anywhere, sharing
with anyone at anytime, viral anytime It also supports many other basic functions,but in this project we will focus on the three main functions above This project is
developed and built by two technologies that are ReactJS and NodeJS.
Trang 14Chapter 1: Overview
1.1 Urgency of the subject
In today's world, the internet has developed to the point where it is possible to find
almost any information through search engines However, this ease of access comeswith its own set of issues One major concern is the fact that not all information foundonline is necessarily accurate or verified In addition, paid content often takes
precedence over more relevant or reliable sources This can be seen in the way that people who sell goods online frequently run ads and create multiple clone fan pages
in order to take advantage of Google's keywords This can make it difficult for users
to access the information they are actually looking for.
At the same time, there is a growing need for people to be able to save and share
information about a variety of topics, including delicious restaurants, quality goods for sale at a good price, and interesting locations There is also a need to save links to
songs, interesting YouTube videos, and other forms of media Furthermore, there is
a desire to spread knowledge and to communicate quality knowledge with others.
To address these needs, the Street Anywhere system was developed Its primary goal
is to help users bookmark, share, and viral knowledge as quickly and widely as possible The system is being deployed in two phases Phase 1, the focus of this thesis,
is aimed at creating a data sharing portal In addition, Street Anywhere will aim toprovide three solutions in Phase 1: sharing with anyone; bookmarking anywhere; andviral anytime
Phase 2 will involve the deployment of a mechanism to evaluate user reputation based
on saved and shared knowledge The system will also seek profit models to ensure its
sustainability Overall, Street Anywhere is designed to be a comprehensive platformthat brings together the best of social media and social bookmarking in order to meet
the needs of its users.
Trang 15Bookmark anywhere: You often come across excellent or very useful content, tools
or websites But how can you find them later if you have nowhere to look? What if
they no longer appear in your search engine results? You will do that on “Street
Anywhere” you can archive them as soon as you want to view them later, and youcan also see a summary of a list of links that have been classified by keywords (tags)
or through the help of our project search engines.
Share anyone anytime: In this project we allow users to share their personal articles
with anyone, anytime in the form of a URL (supporting some special platforms) or
an Image “Street Anywhere” allows you to share, discuss and gain knowledge from
the community
Viral anytime: With the combination of two factors, bookmark anytime anywhereand share with anyone anytime “Street Anywhere” is the first choice for you in the
future when you are confused between hundreds of other applications out there, but
it does not meet all of your individual needs
In addition, some of the key features of "Street Anywhere" include the ability tobookmark a page wherever you are, share it with anyone at any time, and go viral atany time These features, along with others, such as the ability to share your live
location, find stuff around you, follow your friends, and navigate with ease, make
"Street Anywhere" the go-to a valuable and convenient tool for users In addition,
"Street Anywhere"'s simple interface and easy-to-use features make it an attractivechoice for anyone looking for a comprehensive social platform This will be the socialplatform you require
1.2 Applicability
A website that has a combination of Social Media and Social Bookmarking features can provide users with a variety of abilities, including:
Trang 16e Creating profiles: Social Media features allow users to create profiles and
connect with friends and family.
e Posting updates and photos: Users can share updates and photos with their
friends and connections on Social Media platforms
e Connecting with others: Users can connect with others who have similar
interests and engage in discussions with them on Social Media and SocialBookmarking platforms
e Saving and organizing links: Social Bookmarking features allow users to save
and organize links to their favorite websites
e Sharing links: Users can share links to their own content or that of others on
Social Bookmarking platforms, helping to promote that content to a wideraudience
e Following brands and businesses: Users can follow the accounts of their favorite
brands and businesses on Social Media platforms and receive updates from them
A website that combines Social Bookmarking and Social Media features can provide
users with a wide range of benefits, including the ability to connect with others, discover new content, and engage in discussions on specific topics or interests This type of website can also encourage users to return regularly, as there are always new
updates and discussions to take part in
1.3 Current status
In the previous section, we established the applicability of the recommended SocialBookmarking and Social Media platform for our application needs and goals In this
section, we will focus on the status quo of Social Media and Social Bookmarking
platforms, both in Vietnam and globally By examining current systems, processesand technology, we aim to identify any gaps or areas that require improvement Thisanalysis of the current state will provide valuable insights into the need for the
proposed platform and the potential benefits it could offer Additionally,
Trang 17understanding the current state will be important for later stages of the systemdevelopment life cycle, including the analysis and design phases.
1.3.1 In VietnamThis will be the section where we focus specifically on the current state of these
platforms in Vietnam We will look at the popularity of social media in Vietnam,
as well as specific platforms that are popular among the Vietnamese community.
This information will help us understand the needs and preferences of theVietnamese market, and inform our design and development efforts for the
proposed platform.
Up to the present time, the strong development of science and technology has brought to mankind many new utilities in connection and social communication.
The advent of online Social Media created a major turning point in indirect
communication With its attractiveness, Social Media has become an indispensable part of people's lives, especially young people [1]
Social Media statistics for Vietnam in 2022.
There were 76.95 million social media users in Vietnam in January 2022.
The number of Social Media users in Vietnam at the start of 2022 was equivalent
to 78.1 percent of the total population, but it’s important to note that Social Media
users may not represent unique individuals (see our detailed notes on data to learn
why) [1]
Kepios analysis reveals that Social Media users in Vietnam increased by 5.0
million (+6.9 percent) between 2021 and 2022 [1]
Trang 18CELLULAR MOBILE INTERNET ACTIVE SOCIAL
CONNECTIONS USERS MEDIA USERS
URBANISATION w POPULATION vs POPULATION 6 POPULATION
we are “<KEPIOS
Some key features of TinhTe:
— Quickly update the news on science and technology.
— Exchange and share information with members of the community
— Ask questions and get advice from members
— Subscribe and watch the latest videos from TinhTe
e Viblo:
Viblo - Known as a large knowledge-sharing community about information
technology in Vietnam; a free service - where anyone can write and post content related to technical issues such as:
— Development (programming, infrastructure )
Trang 19— Design (design during software production).
— QA (testing, project quality assurance )
— Management (project management).
In 2018, Viblo applied techniques in Machine Learning, Deep Learning and
especially Natural Language Processing to solve outstanding problems on the
system to improve user experience, as well as further promote Viblo'sdevelopment in the future
Applications using Viblo's Machine Learning techniques are published at
https://machine-learning.viblo.asia , typically such as:
— Programming Language Detection
We looked at the current status of Social Media and Social Bookmarking
platforms in Vietnam in section 1.3.1 In the next section, section 1.3.2, we willexpand our focus to look at the current state of these platforms globally We'll
analyze the prevalence of Social Media use and Social Bookmarking worldwide,
as well as specific platforms that are popular among users This information will
be helpful to understand the broader market landscape and inform our design anddevelopment efforts for the proposed platform
Analysis from Kepios shows that there are 4.74 billion social media users around
the world in October 2022, equating to 59.3 percent of the total global population.
Social Media user numbers have continued to grow over the past 12 months too,
with 190 million new users joining Social Media since this time last year
Trang 20That equates to an annualized growth of 4.2 percent, at an average rate of 6 newusers every single second.
NUMBER OF SOCIAL QUARTER-ON-QUARTER YEAR-ON-YEAR CHANGE AVERAGE DAILY TIME SPENT AVERAGE NUMBER OF SOCIAL
MEDIA USERS CHANGE IN SOCIAL MEDIA USERS IN SOCIAL MEDIA USERS USING SOCIAL MEDIA PLATFORMS USED EACH MONTH
SOCIAL MEDIA USERS SOCIAL MEDIA USERS SOCIAL MEDIA USERS FEMALE SOCIAL MEDIA USERS MALE SOCIAL MEDIA USERS
vs TOTAL POPULATION vs POPULATION AGE 13+ vs TOTAL INTERNET vs TOTAL SOCIAL MEDIA USERS vs TOTAL SOCIAL MEDIA USERS
How many Pinterest users are there in 2022?
Pinterest is one of the world’s top social platforms, but just how many people use Pinterest today?
Data published in the company’s most recent investor earnings report [2]shows that Pinterest had a total of 433 million monthly active users around
the world in July 2022.
These figures suggest that 7.0% of all people aged 13 and above around the world use Pinterest today [Kepios analysis of data published in Pinterest Inc.’s 2Q 2022 investor earnings announcement (July 2022), compared with
the latest population data published by the United Nations and the U.S.Census Bureau.]
Trang 21THE POTENTIAL AUDIENCE THAT MARKETERS CAN REACH WITH ADS ON PINTEREST
PINTEREST AD REACH PINTEREST AD REACH FEMALE PINTEREST AD REACH MALE PINTEREST AD REACH
vs TOTAL INTERNET USERS vs POPULATION AGED 13+ vs TOTAL PINTEREST AD REACH vs TOTAL PINTEREST AD REACH
® tậi ọ ở
<< KEPIOS
Figure 3 - People aged 13 and above around the world use Pinterest in July 2022
Pinterest is a visual discovery tool for finding ideas like recipes, fashion and style inspiration, or whatever you want and more With billions of Pins on Pinterest,
you'll always find a way to get inspired As you discover your favorite Pins, you'llsave them to a board to keep your ideas organized and easy to find You can also
create Pins to share ideas with other users on Pinterest.
Some of Pinterest's salient features:
— Browse your home feed: Your home feed is where you'll find Ghims, people
and businesses that Pinterest thinks you'll like, based on your recent activity
Printest will also show you Ghims from people and boards you choose to
follow
You can also search for Ghims by entering keywords in the search bar Try
typing "Banana Cake Recipes" into the search bar to see cake ideas, cakedecorating etc
— Discover ideas: Use the search bar to discover ideas, people, and trends.
Explore recommended themes or search for your own
Trang 22Save and share: Ghim are bookmarks that people use to save (also calledbookmarks) the content they love on Pinterest Pins can be images, videos,
edit a Ghim's information at any time and move the Ghim to any board
You can create Idea Ghims to shoot multiple videos and add images, lists, and
custom text in a single Ghim Use Ideas Ghim to create a step-by-step guide or
organize a collection of ideas.
Digg:
Digg is a Social Media and news aggregator site where users submit stories
to promote and then vote on The most popular stories are posted on the front
page, which can attract a lot of traffic to the respective websites Digg isabout helping users navigate a media environment that makes it easy to
identify and consume the most important Internet stories, videos, and trends
of the day
Some of Digg's salient features:
- Save a story: If you find an article and want to refer to it in the future,
you can save it You can then access your saved stories from a link at the
top that says “Saved”
- Share a story: If you want to share a story you read on Digg to other
social media, you can do so by selecting any of the icons listed below the
post.
- View stories by tags: Just below each post title are the tags by which they
are categorized If you want to see more articles on that topic, all you have to do is click on the link, and it will direct you to a page containing
all the articles submitted with a particular tag
10
Trang 231.4 Survey and the different of the Street Anywhere
While there is a clear demand for Social Media and Social Bookmarking platforms,
it is also important to consider the specific needs and preferences of users To better
understand the current state of Social Media and Social Bookmarking and how our project "Street Anywhere" compares, we conducted a survey of a diverse group of
users.
1.4.1 Survey
With the most suitable criteria, we created a small survey to collect user opinions
as well as to build a "Street Anywhere" that is most suitable for everyone.
Investigate which bookmark platforms users often use Get users' opinions on thepurposes and benefits of using bookmarks for social sharing Here is our little
survey information:
1.4.1.1 Survey questions
Observation form: (link google forms:
https://forms.gle/ouSwNoVZN4JCQqSt5)
Num | Question Answer
1 What is your gender? e Male.
3 Do you frequently use social | Answer on a scale of 1 to 5 (from
sharing bookmarks? not heavily)
4 Which social sharing e Pinterest.
bookmarking platform do you e Digg
often use? e Reddit
e Fark
11
Trang 24Diigo
Other
Which of the following functions
do you consider necessary for a
social sharing bookmark?
Save (playlist, type, )
Other ( find Looking for ideas ,
sources cold excited, ).
What are the benefits when you
use social sharing bookmarks?
Relieve stress
Connect with people easily
Learn a lot of useful information
Collect many good songs.
Other ( Increase power rate labor, Find _ sword People shared
department like , )
Table I - Survey question to collect user opinions
12
Trang 251.4.1.2 Objects of survey scope
Students of universities in Vietnam (mainly students of Information
Technology University - National University of Ho Chi Minh City ) use social media.
Through the survey, we can see that the first-year students participated in
the survey the most with a rate of 54%, followed by year two, year threeand year four at 29%, 9% and 8% respectively
student
@ Freshman Second-vear student
® Third-year student
Final year students
Figure 4 - Number of Students using Social Networks
1.4.1.3 Methods of implementation
a Survey time:
e Time for research and report writing: July 1, 2022 - July 11, 2022
e The process of researching and searching for documents related to
the survey from July 1, 2022.
e The survey was conducted from July 1, 2022 to July 5, 2022.
13
Trang 26b Survey method:
e There are two sources of information that need to be collected:
Secondary data and primary data
— Secondary data: Data collected through research documents on
books, articles, electronic devices, forums on the Internet, etc.
Related to social platforms
— Primary data is data that is passed through a survey using
survey questions on Google Forms.
e Design a questionnaire on Google Forms
e Send surveys to students through university groups on social media
e Analyze the results obtained and plot the graph
c A number of survey samples:
e Survey sample: 100 students.
e Submit 100 forms and get 100 valid forms
d Data analysis method:
Descriptive statistics method, using descriptive statistics such as:
e Sample mean
e Min: the smallest value in the sample
e Max: the maximum value in the sample
e Percent: frequency in percentage
1.4.1.4 Survey results and analysis
14
Trang 27a How often do you use social sharing bookmarks?
Frequency using Social Sharing Bookmark of VNU
Figure 5 - Frequency using Social Bookmark of VNU
It can be seen that the majority of students use Social Sharing Bookmark a
lot with a rate of 48%, 29% of students choose to use a lot, 18% choose to
use it normally, the percentage of students who use it less is only 5% and there are no students who do not use the Social Sharing Bookmark.
15
Trang 28b Which social sharing bookmarks do you often use?
42%
1% 534 7%
MPinterest MDigg MReddit MFark NTumbr MDigo MB
Etc
Figure 6 - Use types of Social Networks
Through the survey, we can get the results that the printest moment sharing
platform is the most used by students, also because of the beautiful
interface, the way to set up the layout is novel,and different from the rest of
the market Along with that is the focus on the trend of sharing beauty with
everyone.
16
Trang 29NY cŸ
Bi Student
Figure 7 - Necessary Function which user vote
Through the survey, we can see, the necessary functions for a social
bookmark are relatively similar to the rest of the market, and users arefamiliar with the functions that can be said to be "of course there are” above
A social sharing platform, besides that, users also pay attention to the
suggestion function according to the topics they have followed before, this will have two sides, side 1: help them update hotBookmarks to the same topic they love , side 2: will occupy the spotlight of other topics, causing
boredom or forcing users to take an extra step to search for another topic
17
Trang 30d Purpose of using social sharing
Survey chart of using social sharing
Figure 8 - Survey chart of using social sharing
Social sharing is an indispensable market share in the 4.0 environment,
which can see the usage level is almost 100% for Genz, has many differentpurposes: , and of course it still holds the right job As the original purpose
it was founded: creating an entertainment and sharing environment,
connecting people
1.4.2 The difference of the Street Anywhere
After conducting a survey to gather user opinions on social sharing bookmarking
platforms, we can move on to discussing the differences between StreetAnywhere and other platforms like Digg and Pinterest In particular, we will
focus on the target audience, the types of bookmarking available, the methods of sharing, and the potential for viral content on each platform By analyzing these
factors, we can determine how Street Anywhere stands out from its competitors
and how it can provide unique value to its users.
Trang 31We have filtered out some necessary functions for a website that integrates SocialMedia and Social Bookmark The table below shows some of the functions of
Street Anywhere, Digg, Foody and Pinterest Take a look at the comparison table below to see our differences clearly:
Sharing anywhere
anytime: Viral anywhere
Bookmark e With location anytime:
e Track your friends e¢ Trending
Pinterest Yes No Yes
Table 2 - Compare some necessary functions for a website that integrates Social Media and
Social Bookmark
a Bookmark anytime anyone:
"All three platforms — Pinterest, Digg, and "Street Anywhere" — offer usersthe convenience of bookmarking websites and accessing them from any
device with an internet connection through the "bookmark anywhere, anytime" feature In addition to this feature, these platforms offer a variety
of tools and features for bookmarking and sharing websites Pinterest is a visual discovery tool that allows users to find and save ideas and inspiration
on various topics, and organize them into boards Digg is a social
bookmarking platform that allows users to discover and share new content,
as well as engage with the community by commenting on and sharing other users' bookmarks "Street Anywhere" is similar to both Pinterest and Digg,
offering users the ability to share new content, memorable moments, or ideas,
which can be organized using tags or categories Users can also join "Street
19
Trang 32Anywhere" to comment and share with others The platform also has an to-use interface, allowing users to save memorable articles on any page, not
easy-just the collection, and access them later through the bookmark feature.
Sharing anyone any time:
All three platforms — Pinterest, Digg, and "Street Anywhere" — offer users
the convenience of sharing content with others at any time This feature, called "sharing anyone, anytime," allows users to share links, ideas, and
inspiration with their friends, family, and connections on the platform, aswell as with a wider audience
Pinterest is a visual discovery tool that allows users to find and save ideas
and inspiration on various topics, and organize them into boards Users can share their boards or individual pins with others, either by sending a direct
link or by embedding the content on their own website or blog
Digg is a Social Bookmarking platform that allows users to discover andshare new content, as well as engage with the community by commenting onand sharing other users' bookmarks Users can share content with their
connections or with the wider Digg community by submitting links to articles, videos, and other media.
The "Sharing anyone, anytime" feature on "Street Anywhere" allows users
to share their content with a wide audience at any time, regardless of location
or time of day This feature is convenient for users who want to promote their
content and reach a larger audience.
Viral anytime:
"All three platforms — Pinterest, Digg, and "Street Anywhere" — offer usersthe ability to create and share content that has the potential to go viral When
content goes viral, it means that it is shared and liked by a large number of
people in a short period of time, often leading to increased visibility and
popularity.
20
Trang 33Pinterest is a visual discovery tool that allows users to find and save ideasand inspiration on various topics, and organize them into boards Users can
create and share content that has the potential to go viral by creating
high-quality, seemingly appealing pins that are relevant and interesting to theirtarget audience
Digg is a Social Bookmarking platform that allows users to discover andshare new content, as well as engage with the community by commenting on
and sharing other users' bookmarks Users can create and share content that
has the potential to go viral by sharing links to articles, videos, and othermedia that are informative, entertaining, and engaging
"Street Anywhere" may also offer similar viral sharing features, allowingusers to create and share new content, memorable moments, or ideas that
have the potential to go viral "Street Anywhere" provides a page called
"Trending" which collects all the bookmark with the highest interaction andallows users to identify the tags, categories, and authors that are attractingthe attention of users at the moment Users can create high-quality, relevant,
and interesting content that resonates with their audience and encourages
them to share it with others With the potential to go viral, users can increasethe visibility and popularity of their content on all three platforms
Our survey results showed that many users are looking for a platform that combinesthe best features of both social media and social bookmarking, such as the ability to
connect with others, discover new content, and share links There will be no perfect app, only the most suitable app The above is all that we have experienced and gives the most objective comparison results for the mentioned applications You can see
that compared to Digg, Foody and Pinterest, our Street Anywhere has quite the full
range of functions people need Our project, "Street Anywhere," aims to meet these needs by offering users a comprehensive platform that includes a range of features
such as bookmarking anytime anywhere, sharing with anyone anytime, and going
21
Trang 34viral anytime The biggest advantage of Street Anywhere that people can see is
“Explore” and “Location + Track your friends” Additionally, "Street Anywhere"
includes other useful features such as the ability to share live locations, search for
content around you, track friends, and navigate easily, making it an appealing choicefor anyone looking for a comprehensive social platform
22
Trang 35Chapter 2: Background knowledge
In order to bring the best experience and meet the needs of both social media andsocial bookmarking, we have researched and implemented a new project called
"Street Anywhere" In chapter 1, we provided an overview of the urgency of the subject and the applicability of a platform that combines social media and social
bookmarking features In chapter 2, we will delve into the method used to developand implement the "Street Anywhere" project This will include a discussion of the
technologies and frameworks used, such as ReactJS, Nodejs, Expressjs, Typescript, and PostgreSQL We will also discuss the steps taken to ensure that "Street
Anywhere" is user-friendly and easy to use By the end of chapter 2, readers will have
a clear understanding of the technical aspects of the "Street Anywhere" project and
how it was brought to life.
2.1 Street Anywhere
Street Anywhere is a Social Media and Social Bookmarking platform that combines
the best features of both types of platforms It allows users to create profiles, connect
with friends and family, share updates and photos, and engage in discussions withothers who have similar interests It also provides users with the ability to save andorganize links to their favorite websites, share links to their own content or that of
others, and follow their favorite brands and businesses.
Street Anywhere is built using ReactJS and NodeJS, two popular technologies that are well-suited for building scalable, high-performance web applications ReactJS is
used for building the user interface, while NodeJS is used for building the server-sidelogic and handling requests from the client
The main features of Street Anywhere include:
e Bookmark anywhere anytime: Users can bookmark and save links to their
favorite websites from any device, at any time.
e Sharing anyone anywhere: Users can share links to their own content or that of
others with anyone, from any device
23
Trang 36e Viral anytime: With the ability to share links and engage in discussions with
others, Street Anywhere is designed to help content go viral and reach a wider
audience
2.2 ReactJS
With other popular technologies like Angular, Developers have to apply and learn to program a lot of different code They had to use many different frameworks and always faced the challenge of coding from scratch if there was any change from the
component What they want then is a framework that can break down complexstructures, as well as reuse old code to help the project complete faster
And ReactJS appeared at the right time, providing the solution they were looking for
right away This technology uses JSX (short for JavaScript XML, as an extended syntax that makes the code faster and easier to use) This technology is extremely
useful in structuring code used in artificial intelligence or synchronizing components
into a file that only needs to be authenticated once.
It is also the second most preferred technology by developers after NodeJS
(According to Stack Overflow's survey of the most used technologies in 2022) [4] You can see it in figure 9.
24
Trang 37Node.js React.js
Figure 9 - Stack Overflow survey of the most used technologies by developers in 2022
2.2.1 About ReactJS
React is a JavaScript library for building user interfaces It was developed by
Facebook and is widely used for building web and mobile applications.
One of the main advantages of ReactJS is its declarative programming style,
which makes it easier to reason about the code and debug problems Instead of describing the specific steps to achieve the desired outcome, you describe the desired outcome itself This makes it easier to understand and maintain the code
over time
React also uses a virtual DOM (Document Object Model) to improve the
performance of applications The virtual DOM is a lightweight in-memory representation of the actual DOM When a component's state changes, ReactJS
updates the virtual DOM and then determines the minimal set of changes that
25
Trang 38need to be made to the actual DOM This helps to improve the performance ofapplications built with React.
Another key feature of React is the use of components A component is a
self-contained piece of code that represents a part of a user interface Components can
be reused throughout an application, making it easier to build and maintain complex user interfaces.
With Street Anywhere, ReactJS is the right tool for building user interfaces
2.2.2 Core concept of ReactJS
e Virtual DOM: At the core of React is the concept of the "virtual DOM." The
virtual DOM is a lightweight in-memory representation of the actual DOM,which is the structure of the HTML elements that make up a web page Whenthe state of a React component changes, the virtual DOM is updated to reflectthe new state React then compares the virtual DOM with the actual DOM
and makes efficient updates to the actual DOM by only changing the parts that are necessary This process is known as "reconciliation."
e Components are a piece of code that represents a part of a user interface.
Components are reusable and can be thought of as small, self-contained units
that can be combined to build more complex user interfaces
There are two types of components in React: functional components andclass-based components
— Functional components are simple, stateless functions that take in props
(short for properties) and return a React element They do not have access
to component state or lifecycle methods, and are usually used for simple,presentational components Here is an example of a functional
component:
26
Trang 39Figure 10 - Example of a functional component
Class-based components, on the other hand, are created using JavaScript
classes and have additional features such as state and lifecycle methods.They are typically used for more complex components that require
additional logic or behavior Here is an example of a class-based
Figure 11 - Example of a class-based component
In React Components, the render function is the most important It is the
function that handles the HTML tag generation as well as ademonstration for processing via Virtual-DOM The render function is a
method that is used to render the component's JSX to the DOM
27
Trang 40(Document Object Model) It is called every time the component's state
or props are updated
Figure 12 - Two type of data in React
Here is an example of a simple component with a render function:
<div>
<hi>Hello, World!</h1>
</div>
Figure 13 - Example of a simple component with a render function
e Props: Props (short for properties) are immutable values that are passed down
from a parent component to a child component They are used to pass data
from one component to another, and are read only within the child
component This means that a child component cannot modify its own props,but can pass them down to other child components if necessary
Here is an example of how props are passed down from a parent component
to a child component:
28