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 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 THESIS ADVISOR Dr. NGUYEN THANH BÌNH MSc. VU MINH SANG HO CHI MINH CITY, 2022 ASSESSMENT COMMITTEE The Assessment Committee is established under the Decision. 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. ACKNOWLEDGEMENT 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.
Table of Contents Chapter 1: (QV€IFVÏCWU.1 Urgency of the subject.2 In the World.4 Survey and the different of the Street Anywhere 1.2 The difference of the Street Anywhere. Chapter 2: Background knowledge.2 Core concept of ReactJS 2.3 ReactJS with Street Anywhere: 2.2 Core concept NodeJS.3 NodeJS with Street Anywhere 2.1 Structure of ExpressJS 2.2 Router in Express 2.3 Express with Street Anywhere.2 Features of PostgreSQL 2.3 Compare MySQL and PostgreSQL .4 PostgreSQL with Street Anywhere 2.1 Introduction to TypeScript.2 Features of TypeScript.3 Compare TypeScript vs JavaScript 2.1 About Mapbox API.2 Mapbox API services.3 Pros and Cons of Working with Mapbox API. Chapter 3: System Analysis and Design 3.1 Design System Architecture.2 Design Function Tree diagram.1 Entity Relational Diagram 3.2 Detail description of data tables.4 Design Use Case diagram.1 Use Case diagram .2 Description of Actor .3 Use Case Specification .5 Design Activity diagram.6 Design Sequence diagram 3. Chapter 4: Implementation and DepDÏOVHICHÍ.1 Snapshot main (Ì€SÌ(OD.1 Screen create a MCW DOSĂ.
2121112 11121221012 1H22 HH HH0 TH TH gi 104 4.2 Deploy EnVÏr0OnIm€TIÍ. 117 Chapter 5: Future WĐOF.0145 esessssssssssesessÊ ,2 (J Table of Figures Figure 1 - Social Media users in Vietnam between 2021 and 2022.-- 6 Figure 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+ 13 Figure 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 25 Figure 10 - Example of a functional Compoment .c ce eceeeeeeeeeeeeeseeseenesneeseeeeens 27 Figure 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.
28 Figure 14 - Example of how props are passed down from a parent component to a lln11s/00i19105157 200272777. 29 Figure 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.- --- -‹- 36 Figure 20 - Stack Overflow's Most Favorite Developers Database Survey of 2022 38 Figure 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 Figure 24 - System Architecture nh.
55 Figure 25 - Function Tree diagram .ccccccccscessecsseeeeseeeseeeseeeseensecesecsseeseeeeeeseens 56 Figure 26 - Entity Relationship DDIagraim.- - c2 3+1 E3 +EEseEEsersrrrerrrrrerrre 57 Figure 27 - Use Case overviews the SYSf€IN.c Sc 1v nS vn HH vn veg 64 Figure 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 66 Figure 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 .ecceeceesceeseeeeeeeseeeseeeeeeeeeeeeaeteneens 78 Figure 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.132 EEEsissirsrrrsrerrre 81 Figure 38 - Activity diagram: Delete pOSE. --- óc + vn ngư 82 Figure 39 - Activity diagram: Create a new COIN€TI.- 25552255 **+s*s++ss+2 83 Figure 40 - Activity diagram: Update comm€TI.- 5 5 5s 3+2 *++*v++ev+sexss 84 Figure 41 - Activity diagram: Delete comrmef(.- 5+ ++s*++++v+sex+eexsxx 85 Figure 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 88 Figure 45 - Activity diagram: Update reaction .cceecceeceeseeseeeneeeseeeeeeteeeeenseens 88 Figure 46 - Activity diagram: Delete reaction 0. cece ee eceseeseeeeeneeeceeseeaeresateeeens 89 Figure 47 - Activity diagram: Follow .cceccecceesceeceeeeceeeeseeeeeeeeecneeeeeeeeeaeeeneens 90 Figure 48 - Activity diagram: UnfOlÏOW. 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Í. 93 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 95 Figure 56 - Sequence diagram: Create new bookmarK.- --- 5+5 s+++s++ss++ 9S Figure 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 99 Figure 64 - Wireframes Detail Post paB€.- - 2c 22 23233211 EEEsreree 100 Figure 65 - Wireframes User Information page. - -- + + **+++ssserssesssers 101 Figure 66 - Wireframes User Detail paB€.112 1 Eteirseirsrrrsrses 102 Figure 67 - Wireframes Admin Dashboard.- --- 5 5 + svsvsseeseeserske 103 Figure 68 - Screen create a new post Ì. 5c 3321121331111 Eeree 105 Figure 69 - Screen create a NeW POSt 2. 105 Figure 70 - Screen create a NeW POSt 3.
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. 109 Figure 76 — Landing page 3 - Can navigate to pages "Short”.-+- 110 Figure 77 - Deployment ÏD1aØTa1.- - -- ¿+ 3+ 332111325 E35EEEESESEEerekrereerersee 110 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 43 Table 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 58 Table 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 60 Table 11 - Detail description of data table postReactions .--‹‹---+++s<ss++ 60 Table 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 61 Table 15 - Detail description of data table tags 00. ccc eecceesseseseeeteeseteeesteeeseensaes 61 Table 16 - Detail description of data table uS€TS .- 5-5 2S *++sksseeressxes 62 Table 17 - Detail description of data table folÏOWWeFS.
¿5+ s++cxssexsserss 62 Table 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. 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 Table 28 - Table Use Case Specification : Create a new bookmark.
-- -- Table 29 - Table Use Case Specification : Unbookmarked. ----- << << <<+ Table 30 - Table Use Case Specification : Create a new reactIon.----- Table 31 - Table Use Case Specification : Update reacfion.- c2 Table 32 - Table Use Case Specification : Delete reaction. Table 33 - Table Use Case Specification: Table 34 - Table Use Case Specification ABSTRACT 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 service that allows users to add, annotate, edit and share bookmarks of web documents.
Useful features from Social Bookmarking have made everyone's work and life more efficient. 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.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.