1. Trang chủ
  2. » Luận Văn - Báo Cáo

Khóa luận tốt nghiệp Hệ thống thông tin: Building a social bookmark system

132 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Building a Social Bookmark System
Tác giả Truong Thi Ngoc Linh, Nguyen Duy Phuong
Người hướng dẫn Dr. Nguyen Thanh Binh, MSc. Vu Minh Sang
Trường học University of Information Technology
Chuyên ngành Information Systems
Thể loại Graduation Thesis
Năm xuất bản 2022
Thành phố Ho Chi Minh City
Định dạng
Số trang 132
Dung lượng 64,62 MB

Nội dung

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 1

VIETNAM 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 2

VIETNAM 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 3

ASSESSMENT 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 4

The 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 5

1.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 6

2.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 7

Chapter 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 8

Table 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 9

Figure 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 10

Figure 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 11

Table 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 12

Table 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 13

With 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 14

Chapter 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 15

Bookmark 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 16

e 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 17

understanding 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 18

CELLULAR 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 20

That 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 21

THE 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 22

Save 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 23

1.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 24

Diigo

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 25

1.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 26

b 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 27

a 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 28

b 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 29

NY 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 30

d 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 31

We 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 32

Anywhere" 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 33

Pinterest 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 34

viral 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 35

Chapter 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 36

e 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 37

Node.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 38

need 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 39

Figure 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

Ngày đăng: 23/10/2024, 09:19

TÀI LIỆU CÙNG NGƯỜI DÙNG

  • Đang cập nhật ...

TÀI LIỆU LIÊN QUAN