Luận văn tốt nghiệp Khoa học máy tính: Xây dựng hệ thống hỗ trợ người viết blog về công nghệ

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA KHOA HỌC & KỸ THUẬT MÁY TÍNH

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

XÂY DỰNG HỆ THỐNG HỖ TRỢ NGƯỜIDÙNG VIẾT BLOG VỀ CÔNG NGHỆ

NGÀNH: KHOA HỌC MÁY TÍNH

HỘI ĐỒNG: Khoa học máy tính 4GVHD: ThS Nguyễn Đình ThànhGVPB: TS Lê Hồng Trang

SVTH 1: Đinh Quang Trung (1814504)SVTH 2: Lê Quang Cảnh (1833011)

TP HỒ CHÍ MINH, 12/2022

Chúng tôi xin cam đoan rằng, luận văn tốt nghiệp "Xây dựng hệ thống hỗ trợ ngườidùng viết blog về công nghệ" là công trình nghiên cứu của chúng tôi dưới sự hướng dẫncủa ThS Nguyễn Đình Thành, xuất phát từ nhu cầu thực tiễn và nguyện vọng tìm hiểucủa bản thân chúng tôi Ngoại trừ kết quả tham khảo từ các công trình khác đã ghi rõtrong luận văn, các nội dung trình bày trong luận văn này là kết quả nghiên cứu do chínhchúng tôi thực hiện và kết quả của luận văn chưa từng công bố trước đây dưới bất kỳhình thức nào.

Thành phố Hồ Chí Minh, 12/2022Nhóm tác giả

Đầu tiên, chúng tôi xin gửi lời cảm ơn chân thành nhất đến ThS Nguyễn Đình Thành,chính nhờ sự hướng dẫn tận tình cũng như những kiến thức khoa học mà thầy truyền đạtđã giúp chúng tôi hoàn thành tốt nhất luận văn này.

Chúng tôi cũng gửi lời cảm ơn đến các giảng viên trường Đại học Bách Khoa Thànhphố Hồ Chí Minh, đặc biệt là các thầy cô trong Khoa Khoa học và Kỹ thuật Máy tính,những người đã truyền đạt những kiến thức quý báu trong hơn bốn năm học qua.

Cuối cùng, chúng tôi xin gửi lời cảm ơn tới gia đình, bạn bè, những người đã độngviên, hỗ trợ chúng tôi trong suốt thời gian hoàn thành chương trình bậc Đại học.

Thành phố Hồ Chí Minh, 12/2022Nhóm tác giả

Xây dựng một hệ thống hỗ trợ người dùng viết và chia sẻ kiến thức về công nghệ.Hệ thống sẽ tham khảo 1 số tính năng của các trang blog nổi tiếng như medium, hacker-noon, Hệ thống cho phép người dùng viết và chia sẻ những kiến thức của họ Các bàiviết được đăng và duyệt theo các quy trình được định nghĩa trước (có thể hỗ trợ tự độnghóa) Hệ thống có chức năng đánh giá như like, share, comment, thảo luận trên nội dungbài viết Hệ thống cần có cơ chế đánh giá, xếp hạng các bài viết theo đa dạng tiêu chí.Ngoài ra hệ thống còn có các tính năng khác như tạo chủ đề, bảng xếp hạng, xu hướng,phân loại bài theo tác giả, chủ đề, khoảng thời gian Giao diện người dùng thân thiện,dễ thao tác với người mới sử dụng.

Hy vọng với kết quả nghiên cứu này, chúng tôi sẽ đóng góp một phần vào trong cácnghiên cứu về chủ đề này về sau.

2.2 Phân tích chức năng chính của các trang 5

2.3 Đề xuất một số chức năng cho hệ thống 11

2.3.1 Chức năng cơ bản 11

2.3.2 Chức năng nâng cao 11

3Cơ sở lý thuyết133.1 Các công nghệ phía Client 13

3.1.1 Single Page Application 13

3.1.2 ReactJs 15

3.1.3 Framework NextJs 19

3.1.4 Trình soạn thảo văn bản với CkEditor 20

3.1.5 Thư viện Ant Design 20

3.2 Các công nghệ phía Server 21

3.2.1 Kiến trúc Restful API 21

3.2.2 Ngôn ngữ sử dụng NodeJS 23

iv

3.2.4 Cơ sở dữ liệu PostgreSQL 25

4.1.1 Bài toán phân loại hình ảnh 29

4.1.2 Bài toán phát hiện ngôn ngữ 31

4.1.3 Kiểm duyệt nội dung bản quyền 32

4.2 Xếp hạng bài viết 33

4.2.1 Tính điểm bài viết 33

4.2.2 Xếp hạng bài viết và tag dựa trên điểm của các bài viết 35

4.2.3 Xếp hạng bình luận 35

4.3 Hệ thống đề xuất bài viết 36

4.3.1 Giải thuật Neighborhood-based Collaborative Filtering 36

4.3.2 Áp dụng giải thuật Neighborhood-based Collaborative Filteringcho hệ thống 39

4.4 Cơ chế xếp hạng thành viên 40

5Phân tích và thiết kế hệ thống415.1 Các actor xuất hiện trong hệ thống 41

5.2 Phân tích yêu cầu nghiệp vụ 41

5.2.1 Người dùng chưa có tài khoản 41

5.2.2 Người dùng đã có tài khoản 41

5.5.3 Xem bài viết 47

5.5.4 Tìm kiếm thông tin 47

5.5.5 Xem trang cá nhân tác giả 48

5.5.6 Xem trang bảng tin 48

5.5.7 Tùy chỉnh bố cục danh sách bài viết 49

5.5.8 Tùy chỉnh chế độ tối sáng 49

5.5.10 Viết bài 50

5.5.11 Đăng bài 51

5.5.12 Lưu bản nháp 51

5.5.13 Xem dashboard 52

5.5.14 Xem/sửa thông tin cá nhân 52

5.5.15 Xem/Xóa danh sách tác giả đã theo dõi 53

5.5.16 Xem/Xóa Bookmark 53

5.5.17 Xem/xóa/sửa danh sách bài đã viết 54

5.5.18 Quản lý quy định duyệt bài 54

5.5.19 Xem bài viết 55

5.5.20 Bình luận về bài viết 55

5.5.21 Like bài viết 56

5.5.22 Báo cáo bài viết 56

5.5.23 Xem trang cá nhân của tác giả 57

5.5.24 Theo dõi tác giả 57

5.5.25 Báo cáo người dùng 57

5.5.26 Nhắn tin 58

5.5.27 Xem các báo cáo về nội dung và người dùng 58

5.5.28 Xem danh sách bài viết đã duyệt 59

5.5.29 Xem danh sách người dùng 59

5.5.30 Cấm đăng bài đối với tác giả 60

5.5.31 Xem tin nhắn của người dùng 60

5.5.32 Xem danh sách tác giả bị cấm đăng bài 61

6.1 Môi trường triển khai server backend 92

6.1.1 Triển khai database lên Neon 95

6.1.2 Triển khai redis trên Redis Enterprise Cloud 97

7.1.1 Đối với tìm hiểu quy trình nghiệp vụ 105

7.1.2 Đối với công nghệ 105

7.1.3 Đối với phân tích và thiết kế hệ thống 105

7.1.4 Kết quả hiện thực 106

7.1.5 Hạn chế 106

7.2 Hướng phát triển đề tài 107

4.1 So sánh hiệu quả giữa các mô hình trong việc phân loại hình ảnh khiêu

dâm 30

4.2 So sánh nhận diện hình ảnh bạo lực giữa các mô hình Deep learning 30

4.3 Tập dữ liệu của nhóm được sử dụng để phân loại hình ảnh 31

4.4 Bảng ví dụ ma trận Utility 37

4.5 Bảng ma trận Utility với các giá trị trung bình mỗi hàng 37

4.6 Bảng Normalized Utility Matrix 38

4.7 Bảng Similarity Matrix 38

4.8 Bảng Normalized Utility Matrix đầy đủ 39

5.1 Đặc tả quá trình đăng nhập 46

5.2 Đặc tả quá trình đăng xuất 46

5.3 Đặc tả quá trình xem bài viết 47

5.4 Đặc tả quá trình tìm kiếm thông tin 47

5.5 Đặc tả quá trình xem trang cá nhân tác giả 48

5.6 Đặc tả quá trình xem bảng tin 48

5.7 Đặc tả quá trình tùy chỉnh bố cục danh sách bài viết 49

5.8 Đặc tả quá trình tùy chỉnh chế độ tối sáng 49

5.9 Đặc tả quá trình chia sẻ bài viết 50

5.10 Đặc tả quá trình viết bài 50

5.11 Đặc tả quá trình đăng bài 51

5.12 Đặc tả quá trình lưu bản nháp 51

5.13 Đặc tả quá trình xem dashboard 52

5.14 Đặc tả quá trình Xem/sửa thông tin cá nhân 52

5.15 Đặc tả quá trình Xem/Xóa danh sách tác giả đã theo dõi 53

5.16 Đặc tả quá trình Xem/Xóa Bookmark 53

5.17 Đặc tả quá trình Xem/xóa/sửa danh sách bài đã viết 54

5.18 Đặc tả quá trình Quản lý duy định duyệt bài 54

5.19 Đặc tả quá trình Xem bài viết 55

5.20 Đặc tả quá trình Bình luận về bài viết 55

5.21 Đặc tả quá trình Like bài viết 56

5.22 Đặc tả quá trình báo cáo bài viết 56

viii

5.24 Đặc tả quá trình Theo dõi tác giả 57

5.25 Đặc tả quá trình Báo cáo người dùng 57

5.26 Đặc tả quá trình Nhắn tin 58

5.27 Đặc tả quá trình Xem các báo cáo về nội dung và người dùng 58

5.28 Đặc tả quá trình Xem danh sách bài viết đã duyệt 59

5.29 Đặc tả quá trình Xem danh sách người dùng 59

5.30 Đặc tả quá trình Cấm đăng bài đối với tác giả 60

5.31 Đặc tả quá trình Xem tin nhắn của người dùng 60

5.32 Đặc tả quá trình Xem danh sách tác giả bị cấm đăng bài 61

5.33 Đặc tả quá trình Gỡ lệnh cấm đăng bài 61

5.42 Bảng mô tả thực thể yếu reportArticles 67

5.43 Bảng mô tả thực thể yếu reportComment 67

5.44 Bảng mô tả thực thể yếu reportUsers 67

5.45 Bảng mô tả thực thể yếu comments 68

5.46 Bảng mô tả thực thể yếu AdminArticles 68

5.47 Bảng mô tả thực thể yếu feedacks 68

5.48 Bảng mô tả mối quan hệ (n:n) interactives 68

5.49 Bảng mô tả mối quan hệ (n:n) commmentLikes 69

5.50 Bảng mô tả mối quan hệ (n:n) tagArticles 69

5.51 Bảng mô tả mối quan hệ (n:n) mediaDraft 69

5.52 Bảng mô tả mối quan hệ (n:n) mediaArticles 69

5.53 Bảng mô tả mối quan hệ (n:n) recommends 69

5.54 Bảng mô tả mối quan hệ (n:n) messages 69

5.55 Bảng mô tả mối quan hệ (n:n) follows 69

5.56 Bảng mô tả thực thể notifications 70

5.57 Link repository github 87

6.1 Link các server triển khai trên Heroku 94

3.1 Hình ảnh ví dụ về single page application 14

5.7 Trang tài khoản cá nhân 74

5.8 Trang quản lý tài khoản 75

5.9 Trang tạo bài viết 76

5.10 Trang danh mục 77

5.11 Trang chi tiết bài viết 78

5.12 Trang chủ responsive 79

5.13 Trang chi tiết danh mục responsive 80

5.14 Trang chi tiết bài viết responsive 81

5.15 Trang bảng tin responsive 82

5.16 Trang tài khoản cá nhân responsive 83

5.17 Trang quản lý tài khoản responsive 84

5.18 Trang tạo bài viết responsive 86

5.19 Cấu trúc mã nguồn Web app dành cho người dùng 88

5.20 Cấu trúc mã nguồn Web app dành cho admin 89

5.21 Cấu trúc mã nguồn Server chính 90

5.22 Cấu trúc mã nguồn Server xử lý bài viết 91

6.1 Bước 1 cấu hình Backend trên Heroku 92

6.2 Bước 2 cấu hình Backend trên Heroku 93

6.3 Bước 3 cấu hình Backend trên Heroku 93

6.4 Bước 4 cấu hình Backend trên Heroku 94

x

6.6 Bước 6 cấu hình Backend trên Heroku 94

6.7 Bước 1 triển khai database trên Neon 95

6.8 Bước 2 triển khai database trên Neon 95

6.9 Bước 3 triển khai database trên Neon 96

6.10 Bước 4 triển khai database trên Neon 96

6.11 Tạo 1 subscription mới bằng việc chọn New subcription 97

6.12 Bước 1 cấu hình Redis Enterprise Cloud 97

6.13 Bước 2 cấu hình Redis Enterprise Cloud 97

6.14 Bước 3 cấu hình Redis Enterprise Cloud 98

6.15 Ví dụ làm việc với postman 100

6.16 Kết quả kiểm thử với Jest 102

6.17 Kết quả độ bao phủ testcase với Jest 103

1.1.2Giải quyết vấn đề

Blog, gọi tắt của weblog, là một dạng nhật ký trực tuyến, bùng nổ từ cuối thập niên1990 Các blogger (người viết blog), có thể là cá nhân hoặc nhóm, đưa thông tin lênmạng với mọi chủ đề, thông thường có liên quan tới kinh nghiệm hoặc ý kiến cá nhân1.Blog công nghệ là nơi chủ yếu cung cấp thông tin đề cập tới những chủ đề chọn lọc, liênquan đến công nghệ, dành cho đối tượng người đọc yêu thích công nghệ.

Chính do blog được lập nên bởi cá nhân hoặc một nhóm người, nên đòi hỏi cá nhânhay nhóm người đó phải cập nhật xu hướng liên tục, phải nắm được các tag xu hướnghiện nay để có thể cung cấp cho người đọc cái nhìn đa chiều về thế giới công nghệ,nhưng thực tế số blog đáp ứng được điều này và còn tồn tại thì rất ít Do đó, đề tài “Xây

1

dựng hệ thống hỗ trợ người dùng viết blog về công nghệ” ra đời, cho các blogger và độcgiả có thêm sự lựa chọn, nhằm giải quyết các vấn đề mà các blog hiện nay còn thiếu:

• Blog được viết bởi bất kỳ ai đăng ký thành viên, giúp giải quyết vấn đề các nộidung luôn đảm bảo được cập nhật liên tục, và có góc nhìn đa chiều đối với cùngmột chủ đề.

• Vì hoạt động như một mạng xã hội, nên vấn đề xu hướng hay các bình luận nổi bậtvề các tag xu hướng hiện nay cũng sẽ được giải quyết.

• Bên cạnh đó, trang còn có chức năng xếp hạng bài viết, đề xuất bài viết mới, giúpcho độc giả luôn được cung cấp thông tin kịp thời và đáng tin cậy.

1.2Phạm vi đề tài

Đối tượng sử dụng là người Việt Nam yêu thích công nghệ.

Các chức năng về SEO chỉ thực hiện ở mức cơ bản, không đi quá sâu vào vấn đề này.

được xử lý như thế nào, mục tiêu của luận văn là gì, mình cần làm gì để cải thiện so vớinhững giải pháp đã được đưa ra.

động trên thị trường.

Chương 3: Cơ sở lý thuyết, giới thiệu kiến thức cơ sở và công cụ để hiện thực các giảipháp để giải quyết vấn đề đặt ra.

Chương 4: Bài toán và giải pháp, nêu ra các bài toán trong hệ thống và cách giảiquyết.

Chương 5: Phân tích thiết kế hệ thống, tiến hành phân tích các yêu cầu nghiệp vụ vàxây dựng sơ đồ usecase, ERD, kiến trúc hệ thống cũng như cách hiện thực mã nguồn.

Chương 6: Triển khai và kiểm thử, cách hệ thống được triển khai, quy trình kiểm thửvà kết quả.

Chương 7: Tổng kết, đánh giá kết quả đạt được và hướng phát triển của đề tài.

Giải pháp liên quan

2.1Giới thiệu một vài trang blog công nghệ

2.1.1Trang Medium

Medium là một nền tảng mạng xã hội đơn giản, được xây dựng bởi nhà đồng sánglập Twitter là Evan Williams và Biz Stone Medium cho phép mọi người có thể tự đăngtải bài viết của mình trên tất cả những lĩnh vực ngành nghề và đời sống khác nhau.

Ra đời vào tháng 2 năm 2012 và ngày càng thu hút cộng đồng người dùng, đặc biệtở nước ngoài rất nhiều người thích dùng Medium Tính đến tháng 5 năm 2017, Mediumđã có tới 60 triệu khách truy cập mỗi tháng.

2.1.2Trang HackerNoon

HackerNoon là một trong những blog công nghệ hàng đầu để tìm hiểu về lập trình,blockchain và khởi nghiệp Với hơn 7000 người viết và 200.000 người đọc hàng ngày,HackerNoon đã trở thành tiếng nói của giới công nghệ trên toàn thế giới.

2.1.3Trang Viblo

Viblo bắt đầu được tiến hành phát triển từ khoảng tháng 11/2014, từ một ý tưởngcủa anh Kobayashi Taihei, lúc đó còn đang là COO của Framgia Với phương châm "xâydựng một cộng đồng nơi mọi người có thể tự do chia sẻ kiến thức về IT, bằng tiếng Việt,cho người Việt" Viblo được biết đến là cộng đồng chia sẻ kiến thức về công nghệ thôngtin tại Việt Nam, một dịch vụ miễn phí - nơi mọi người có thể viết và đăng tải nội dungliên quan đến các vấn đề kỹ thuật.

4

2.1.4Trang HubPages

HubPages là một nền tảng blog đa trang được ra mắt vào năm 2006 Những ngườisáng lập là ba cựu nhân viên của Microsoft - Jay Reitz, Paul Deeds và Paul Edmondson.HubPages khởi đầu là một trang web duy nhất dành cho các nhà văn tự do nhưng đãđược mở rộng vào năm 2014 sau khi tiếp quản và sáp nhập với Squidoo.

Là một nền tảng có nội dung do người dùng tạo ở cốt lõi của mô hình kinh doanh,HubPages cũng cho phép người dùng tham gia vào các diễn đàn về các chủ đề cụ thể,đăng câu hỏi và câu trả lời trong phần Hỏi & Đáp của nó, cũng như nhận xét về nội dungcủa người khác và theo dõi những người dùng khác Đến nay, nền tảng này tự hào cólượng người xem hàng tháng là 29 triệu lượt xem Hơn 700.000 bài báo đã được xuất bảntrên 46.000 trung tâm và có hơn 4,1 triệu bài đăng trên diễn đàn.

2.1.5Trang Dev.to

Dev Community là một cộng đồng với hơn 640.000 lập trình viên đang cùng nhauhọc tập và giúp đỡ lẫn nhau Ở đây bạn có thể tìm thấy nhiều bài viết hay được phân loạitheo tuần, tháng, năm dựa trên sự đánh giá của các lập trình viên khác.

2.1.6Trang Tinh tế

Tinhte là tạp chí về công nghệ thông tin lớn nhất hiện nay Các bài đăng trên webđược chính những thành viên cập nhật liên tục mỗi ngày Bạn sẽ được tư vấn về các thiếtbị như máy tính, điện thoại, camera, xe, trên trang Ngoài ra, web còn có chuyên mụcrao vặt, nơi bạn có thể bán hoặc tìm mua những thiết bị công nghệ thông tin.

2.2Phân tích chức năng chính của các trang

2.3Đề xuất một số chức năng cho hệ thống

2.3.1Chức năng cơ bản

Đăng nhập / Đăng xuất.Đăng ký.

Viết bài.Đánh giá.

Like / Share / Comment.Bảng xếp hạng.

Vblog: cho phép đăng bài viết dưới dạng video.

Đăng tin ngắn: cho phép đăng những video ngắn dưới 30 giây được hiển thị ở mộtmục riêng.

Chế độ bài viết: riêng tư (chỉ tác giả thấy được), công khai (mọi người đều có thểthấy), người theo dõi (chỉ những người theo dõi mới thấy được).

Theo dõi: người dùng có thể theo dõi để xem thông tin bài viết của tác giả.Trang cá nhân: quản lý bài viết, theo dõi, cấp bậc người dùng .

Báo cáo: báo cáo những bài viết hoặc người dùng xấu cho quản trị viên có thể xemxét.

Trách nhiệm bài viết: bài viết sẽ được tác giả gắn mác và chịu trách nhiệm về bàiđăng của mình (có thể là quan điểm cá nhân, những thông tin hoàn toàn chính xác )

Bảng tin: cá nhân hóa trải nghiệm người dùng khi những thông tin người dùng quantâm và người dùng theo dõi sẽ được hiển thị ở đây.

2.3.2Chức năng nâng cao

Lưu bản nháp: khi gặp sự cố khi soạn thảo hoặc tùy chọn vào lưu bản nháp thì bài viếtsẽ được lưu lại dưới dạng bản nháp Người dùng có thể xem bản nháp trong Dashboardvà tiếp tục hiệu chỉnh Bản nháp sẽ luôn được lưu lại trừ khi người dùng chọn không lưu.Phân loại người dùng: phân loại người dùng theo nhiều cấp bậc (sơ cấp, trung cấp,cao cấp, chuyên gia) Người dùng khi thỏa các điều kiện về lượt xem, theo dõi và đánhgiá sẽ được nâng cấp.

Phân loại bài viết theo nhiều tiêu chí:

• Chủ đề: chia thành nhiều chủ đề lớn và người dùng có thể gán thủ công trong lúcviết bài hoặc tự động gán dựa vào tag.

• Tag: mỗi bài viết cho gán tối đa 4 tag và gán thủ công khi viết bài.

• Theo cấp bậc tác giả: các bài viết của chuyên gia sẽ được phân loại riêng.

Tự động hóa duyệt bài: đưa ra những quy định chặt chẽ cho bài viết và có hệ thốngkiểm tra bài viết để những bài viết đạt yêu cầu có thể tự động được đăng duyệt.

Lịch đăng bài: những bài viết đã đạt tiêu chuẩn kiểm duyệt có thể đăng ngay lập tứchoặc được lên lịch đăng bài trong một khoảng thời gian được định trước Có thể cài đặtthời gian thông báo cho người theo dõi về khoảng thời gian bài viết được đăng.

Tùy chỉnh bố cục: cho phép người dùng tùy chỉnh bố cục của trang web.

Cơ sở lý thuyết

3.1Các công nghệ phía Client

3.1.1Single page application

Single page application (SPA) là một ứng dụng web giúp nâng cao trải nghiệm ngườidùng bằng cách sử dụng HTML5 và AJAX Đầu tiên khi tải một trang web bất kỳ, SPA sẽtải một trang HTML đơn, sau đó dựa trên request của người dùng, SPA sẽ tiếp tục tải cácHTML khác trong cùng một trang đó, SPA có thể sử dụng một vài thư viện JavaScriptnhư AngularJS, Backbone.js, Durandal

Hiểu một cách đơn giản, thì toàn bộ resource của web bao gồm các file CSS, Javascript,master layout hay cấu trúc web page sẽ được tải lần đầu tiên khi chúng ta bắt đầu duyệtmột website nào đó Ở những lần sau, khi chuyển trang khác, client sẽ gửi những ajaxrequest để nhận dữ liệu cần thiết (thường là phần nội dung) Việc này mang đến trảinghiệm cho người dùng web tốt hơn, giảm thời gian phải tải lại toàn bộ trang web, tiếtkiệm băng thông cũng như thời gian chờ đợi Việc này là trái ngược hoàn toàn với trangweb truyền thống khi toàn bộ trang web phải tải lại mỗi khi chuyển trang.

13

Để có cái nhìn dễ hiểu hơn, bạn hãy nhìn hình minh họa bên dưới về SPA:

Hình 3.1: Hình ảnh ví dụ về single page application

Vùng màu xanh được coi là khung hay master page của 1 website, vùng màu đỏ làcontent của web page sẽ hiển thị và thay thế mỗi khi chuyển trang.

Nhược điểm

• Không thể sử dụng các thủ thuật SEO cao cấp.

• Không phù hợp với các lập trình viên thiếu kinh nghiệm frontend.

• Chia tách 2 team frontend và backend sẽ làm tăng chi phí (quản lý, giao tiếp, xử lýxung đột ).

• Gia tăng khối lượng công việc.

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bảnthân nó là một thư viện Javascript được dùng để xây dựng các tương tác với các thànhphần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữliệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa.

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diệnngười dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phảilàm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tậphợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ cóthể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card, Giả sử bạn đanglập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưngý và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêmsản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi người dùng vào xem=> xử lý tương tác.

Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn trong việc sửdụng “Vanilla JavaScript”(JavaScript thuần) và JQuery để xây dựng UI Điều đó đồngnghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi rohơn Vì vậy vào năm 2011, Jordan Walke – một nhân viên của Facebook đã khởi tạoReactJS với mục đích chính là cải thiện quá trình phát triển UI.

Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ratrong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụngcode) bằng cách đưa ra 2 khái niệm quan trọng bao gồm: JSX và Virtual DOM.

Hình 3.2: Cấu trúc HTML DOM

Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents Trìnhduyệt đọc những document này để hiển thị nội dung của website trên máy tính, tablet,điện thoại của bạn Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là DocumentObject Model (DOM) – một tree đại diện cho cấu trúc website được hiển thị như thế nào.Lập trình viên có thể thêm bất kỳ dynamic content nào vào những dự án của họ bằngcách sử dụng ngôn ngữ JavaScript để thay đổi cây DOM.

JSX (JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi câyDOM bằng các HTML-style code đơn giản Và kể từ lúc ReactJS browser hỗ trợ toàn bộnhững trình duyệt hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào màbạn đang làm việc.

Virtual DOM

Hình 3.3: Virtual Dom

Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để cậpnhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang màngười dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơngiản, website tĩnh Nhưng đối với các website lớn, đặc biệt là những website thiên về xửlý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng cực kỳ nghiêm trọngbởi vì toàn bộ cây DOM phải tải lại mỗi lần người dùng nhấn vào tính năng yêu cầu phảitải lại trang.

Tuy nhiên, nếu bạn sử dụng JSX thì bạn sẽ giúp cây DOM cập nhật cho chính DOMđó, ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo) Virtual DOM (bản chấtcủa nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, và ReactJS sử dụngbản copy đó để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ một sự kiệnnào đó khiến thành phần trong nó thay đổi (chẳng hạn như user nhấn vào một nút bấtkỳ).

Ví dụ, khi người dùng bình luận vào bất kỳ bài Blog nào trên website của bạn và nhấn“Enter” Dĩ nhiên, người dùng của bạn sẽ cần phải thấy được bình luận của mình đã đượcthêm vào danh sách bình luận Giả sử trong trường hợp không sử dụng ReactJS, toàn bộcây DOM sẽ phải cập nhật để báo hiệu sự thay đổi mới này Còn khi bạn sử dụng React,nó sẽ giúp bạn duyệt qua Virtual DOM để xem những gì đã thay đổi sau khi người dùngthực hiện hành động trên (trong trường hợp này, thêm mới bình luận) và lựa chọn đúngnơi đúng chỗ cần cập nhật sự thay đổi mà thôi.

Với việc cập nhật đúng chỗ như vậy, tiết kiệm cho chúng ta rất nhiều tài nguyên cũngnhư thời gian xử lý Ở các website lớn và phức tạp như thương mại điện tử, đặt mónăn, bạn sẽ thấy việc này là vô cùng cần thiết và quan trọng để làm tăng trải nghiệm củakhách hàng và performance được cải thiện đáng kể.

Ưu điểm

• Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễdàng hơn bởi vì bạn không cần phải lập trình nhiều như khi tạo trang web thuầnchỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạncó thể dùng cho nhiều trường hợp.

• Tái sử dụng các component: Nếu bạn xây dựng các component đủ tốt, đủ linh hoạtđể có thể thoả các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian xâydựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau Không chỉ riêng mỗiReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điềuđó, ví dụ Flutter chẳng hạn.

• Có thể sử dụng cho cả ứng dụng Mobile: hầu hết chúng ta đều biết rằng ReactJSđược sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra khôngchỉ làm mỗi đều đó Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụngthêm React Native – một framework khác được phát triển cũng chính Facebook,bạn có thể dễ dàng “chia sẻ” các component hoặc sử dung lại các business logictrong ứng dụng.

• Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debugtrong quá trình phát triển ứng dụng Điều đó giúp tăng tốc quá trình release sảnphẩm cũng như quá trình lập trình của bạn.

• Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website củabạn lên top đầu tìm kiếm của Google Bản chất ReactJS là một thư viện JavaScript,Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiênbạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!

• Công cụ phát triển web nổi nhất hiện nay: nếu bạn nhìn vào số liệu thống kê từGoogle Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàngđầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị tríReact Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biếnhiện tại của ReactJS trên thị trường Việt Nam là như thế nào.

Nhược điểm

• ReactJS chỉ phục vụ cho tầng View React chỉ là view library nó không phải là mộtMVC framework như những framework khác Đây chỉ là thư viện của Facebookgiúp render ra phần View Vì thế React sẽ không có phần Model và Controller, màphải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay làAjax.

• Tích hợp ReactJS vào các framework MVC truyền thống, yêu cầu cần phải cấuhình lại.

• React khá nặng nếu so với các framework khác, React có kích thước tương tươngvới Angular (Khoảng 35KB so với 39KB của Angular) Trong khi đó Angular làmột framework hoàn chỉnh.

• Khó tiếp cận cho người mới học web.

3.1.3Framework NextJS

NextJS là một framework dùng để phát triển các ứng dụng React theo tư tưởng mophic (Universal), được phát triển bởi Zeit Nhờ NextJS chúng ta có thể dễ dàng tạođược một ứng dụng React theo tư tưởng Isomophic, có bao gồm chức năng Server SideRedering (SSR).

Iso-Về cơ bản thì với việc SSR thì NextJS giới thiệu là sẽ cung cấp cho chúng ta một sốthứ như:

• Hiệu năng tốt hơn so với ứng dụng CSR

• Mang lại khả năng SEO tốt hơn mà CSR không có như là việc chia sẻ bài viết.

Serverside rendering (SSR) và Clientside rendering (CSR)

Điểm khác biệt chính ở đây là với SSR, server sẽ trả về cho browser file HTML củapage đã được rendered, trong khi CSR sẽ trả về file HTML gần như empty cùng với linkstới file JS.

Trong cả 2 trường hợp, React sẽ đều cần được tải về và trải qua các tiến trình tương tựnhau để xây dựng Virtual DOM và gắn các events để khiến page có thể tương tác được –tuy nhiên với SSR, người dùng có thể bắt đầu nhìn thấy trang web ngay trong khi tất cảquá trình đó đang diễn ra.

Đối với CSR, ta sẽ cần chờ tới khi tất cả các quá trình trên hoàn thành đến khi VirtualDOM được chuyển vào browser DOM để website có thể xem được.

Ưu điểm

• Ưu điểm chính của NextJS là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO Với tấtcả thông tin trên server, nó sẽ xử lý để generate ra thông tin HTML của trang Sauđó Client có thể gửi một yêu cầu đến Server và nhận toàn bộ trang HTML thay vìyêu cầu từng thành phần riêng lẻ với Client Render.

• Ứng dụng NextJS tải nhanh hơn đáng kể so với ứng dụng React do được renderphía Server.

• Hỗ trợ các tính năng cho static web.

• Tự động code splitting cho các page nhằm tối ưu hoá performance khi load trang.• Dễ dàng xây dựng các API internal thông qua các API routes tích hợp sẵn và tạo

3.1.4Trình soạn thảo văn bản với CkEditor

CKEditor (còn gọi là FCKeditor) là một trình soạn thảo mã nguồn mở theo kiểuWYSIWYG (tay làm - mắt thấy) của CKSource Chương trình này có thể tích hợp vàocác website mà không cần cài đặt Phiên bản đầu tiên được phát hành năm 2003 và đếnnay được rất nhiều người sử dụng.

Nền tảng của Ckeditor là javascript và là mã nguồn mở nên bạn có thể chỉnh sửa bấtkì những gì theo ý của bạn.

CKEditor tương thích được với hầu hết các trình duyệt Internet.

Ưu điểm

Ngoài chức năng soạn thảo thì Ckeditor cung cấp bộ plugin lớn và đa dạng giúp tốiưu trải nghiệm người dùng

Nhược điểm

Do có quá nhiều chức năng nên sẽ rất nặng, giảm tốc độ trang web

3.1.5Thư viện Ant Design

Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế củaAnt UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các com-ponent thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket,v.v Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider chophép bạn thay đổi ngôn ngữ trên toàn ứng dụng.

Có thể coi Ant Design cho React là tập hợp của hầu hết các thư viện về React Nóđáp ứng được hầu hết các yêu cầu của project của bạn mà bạn không phải cài thêm bấtcứ thư viện nào nữa Dưới đây là danh sách các component mà nó cung cấp:

• General: Button, Icon.• Layout: Grid, Layout.

• Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps.

• Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber,Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker,Upload.

• Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover,Tree, Tooltip, Timeline, Tag, Tabs, Table.

• Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm,Spin, Skeleton.

• Other: Anchor, BackTop, Divider, LocaleProvider.

3.2.1Kiến trúc Restful API

RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho ứng dựng webđể quản lí resource RESTful là một trong những kiểu thiết kế API được sử dụng phổbiến ngày nay để cho các ứng dụng (web, mobile, webservice ) khác nhau có thể giaotiếp với nhau.

Cấu trúc của RESTful API:

• API là viết tắt của Application Programming Interface (Giao diện lập trình ứngdụng) là một tập hợp các định nghĩa, giao thức, và công cụ chương trình con đểxây dựng phần mềm và ứng dụng Hiểu đơn giản API là một trung gian phần mềmcho phép hai ứng dụng giao tiếp với nhau API có thể trả về dữ liệu mà bạn cầncho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML VớiAPI, bạn có thể tiếp cận, truy xuất dữ liệu từ máy chủ thể hiện chúng trên ứng dụngphần mềm hoặc website của mình một cách dễ dàng hơn Tính tới nay, API đã pháttriển với nhiều loại ứng dụng và phần mềm khác nhau Thế hệ mới nhất của web/app API có thể ứng dụng được ở mọi hệ thống từ cơ sở dữ liệu, hệ điều hành, hệthống nền web, thư viện hay thậm chí là phần cứng máy tính.

• REST hay ReST (REpresentational State Transfer) là một dạng chuyển đổi cấutrúc dữ liệu được đề xuất bởi nhà khoa học máy tính Roy Thomas Fielding vàonăm 2012 REST là một kiểu kiến trúc được sử dụng trong việc giao tiếp giữacác máy tính (máy tính cá nhân và máy chủ của trang web) trong việc quản lý cáctài nguyên trên internet REST được sử dụng rất nhiều trong việc phát triển cácứng dụng Web Services sử dụng giao thức HTTP trong giao tiếp thông qua mạnginternet Các ứng dụng sử dụng kiến trúc REST này thì sẽ được gọi là ứng dụngphát triển theo kiểu RESTful Một RESTful API đơn giản là một API tuân thủ cácnguyên tắc và ràng buộc của REST REST bao gồm 3 bộ phận cơ bản như: bộ máychủ ngoài chứa dữ liệu (external server), máy chủ API và máy chủ khách (client).Trong đó, máy khách có thể là bất cứ thứ gì, ứng dụng trên nền web, thư viện hoặcthậm chí là các phần mềm khác nhau của một phần mềm máy tính REST cho phépcác máy khách truy cập máy chủ API và thực hiện các lệnh lấy về, chỉnh sửa hayxóa dữ liệu từ external server Các lập trình viên có thể thoải mái truy xuất, chỉnhsửa dữ liệu từ máy chủ mà không cần biết hệ thống hoạt động như thế nào.

Ưu điểm

• REST cũng có ưu điểm khi sử dụng giao thức stateless (không trạng thái) Hệ thốngnày không sử dụng session, cookie, không cần biết những thông tin đó trong mỗilần request đến máy chủ ngoài Điều này giúp REST giảm tải cho máy chủ ngoài,nâng cao hiệu suất làm việc.

• Tính khả biến: với các hệ thống cần thay đổi các tài nguyên liên tục, sử dụng RESTvới việc tạo request đơn giản sẽ giúp mọi chuyện trở nên đơn giản hơn.

• Tính mở rộng: các hệ thống REST có khả năng mở rộng rất cao nhờ sự tách biệtgiữa các thành phần và các quy ước giao tiếp được quy định sẵn.

• Tính linh hoạt: việc chuẩn hoá interface giúp hệ thống trở nên linh hoạt hơn, có thểsử dụng cho nhiều nền tảng khác nhau, mobile, web,

• Trong sáng: trong giao tiếp giữa các thành phần, các request trở nên rất rõ ràng, dễhiểu.

Nhược điểm

• REST Chỉ hoạt động trên các giao thức HTTP.

• Ưu điểm của việc sử dụng các cấu trúc HTTP lại cũng chính là một hạn chế Bởicác hạn chế của HTTP cũng trở thành các hạn chế của kiến trúc REST Ví dụ:HTTP không lưu trữ thông tin về trạng thái giữa các chu kỳ khi phản hồi yêu cầu,và như vậy các ứng dụng dựa trên REST rơi vào tình trạng không rõ trạng thái vàmọi tác vụ quản lý trạng thái phải được máy khách thực hiện.

3.2.2Ngôn ngữ sử dụng NodeJS

NodeJS là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng.NodeJS sử dụng Google V8 JavaScript engine để thực thi mã, và một tỷ lệ lớn cácmô-đun cơ bản được viết bằng JavaScript Các ứng dụng NodeJS thì được viết bằngJavaScript.

NodeJS chứa một thư viện built-in cho phép các ứng dụng hoạt động như một server mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS.

Web-NodeJS cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking I/O API,tối ưu hóa thông lượng của ứng dụng và có khả năng mở rộng cao.

Mọi hàm trong NodeJS là không đồng bộ (asynchronous) Do đó, các tác vụ đềuđược xử lý và thực thi ở chế độ nền (background processing)

Ưu điểm

• Đặc điểm nổi bật của NodeJS là nó nhận và xử lý nhiều kết nối chỉ với một thread Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi khôngphải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưu điểm non-blocking I/O của Javascript mà NodeJS tận dụng tối đa tài nguyên của server màkhông tạo ra độ trễ như PHP

single-• JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hìnhkết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằngJSON.

• Ứng dụng trên 1 trang( Single page Application) Nếu bạn định viết 1 ứng dụng thểhiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm Với khả năng xử lý nhiềurequests đồng thời thời gian phản hồi nhanh Các ứng dụng bạn định viết khôngmuốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanhđể thể hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọn của bạn.

• Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức là NodeJScó thể xử lý hàng nghìn process và trả ra 1 luồng khiến cho hiệu xuất hoạt độngđạt mức tối đa nhất và tuyệt vời nhất.

• Streamming Data (Luồng dữ liệu) Các web thông thường gửi HTTP request vànhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn,NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạtđộng cho các luồng dữ liệu khác.

• Ứng dụng Web thời gian thực, với sự ra đời của các ứng dụng di động & HTML5 nên NodeJS rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook,Twitter, .

Nhược điểm

• Ứng dụng nặng tốn tài nguyên, nếu bạn cần xử lý các ứng dụng tốn tài nguyênCPU như encoding video, convert file, decoding encryption hoặc các ứng dụngtương tự như vậy thì không nên dùng NodeJS (Lý do: NodeJS được viết bằng C++Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút) Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệusuất tối đa !

• NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python NET thì việc cuối cùnglà phát triển các App Web NodeJS mới sơ khai như các ngôn ngữ lập trình khác.Vậy nên bạn đừng hi vọng NodeJS sẽ không hơn PHP,Ruby,Python ở thời điểmnày Nhưng với NodeJS bạn có thể có 1 ứng dụng như mong đợi, điều đó là chắcchắn !

3.2.3Framework Express.Js

ExpressJS là một framework được xây dựng trên nền tảng của NodeJS Nó cung cấpcác tính năng mạnh mẽ để phát triển web hoặc mobile ExpressJS hỗ trợ các methodHTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.

Ưu điểm

• ExpressJS có thể giảm một nửa thời gian viết mã mà vẫn giúp nhà phát triển xâydựng các ứng dụng web hiệu quả ExpressJS còn cung cấp các tính năng khác nhaugiúp tiết kiệm công sức rất nhiều.

• ExpressJS được sử dụng tương đối dễ dàng vì có hỗ trợ JavaScript Javascript rấtdễ học đối với bất kỳ ai Do đó, ExpressJS là một công cụ tuyệt vời cho nhữngngười mới bắt đầu tham gia vào lĩnh vực phát triển ứng dụng web và gặt hái đượcthành công.

• Bên cạnh đó, ExpressJS được phát triển dựa trên nền tảng NodeJS Đây là một kiếntrúc hướng sự kiện và có khả năng xử lý hàng nghìn yêu cầu của khách hàng cùngmột lúc, điều mà PHP không thể thực hiện được NodeJS được thiết kế dành riêngđể hỗ trợ các ứng dụng web thực.

• Điều quan trọng kế tiếp của doanh nghiệp là việc sử dụng tiền sao cho hiệu quảđể tối đa hóa lợi nhuận ExpressJS lại là một ứng dụng web miễn phí và mã nguồnmở, do đó không có lý do gì để không sử dụng framework này.

3.2.4Cơ sở dữ liệu PostgreSQL

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ và đối tượng relational database management system) miễn phí và nguồn mở (RDBMS) tiên tiến nhấthiện nay khả năng mở rộng cao và tuân thủ các tiêu chuẩn kỹ thuật Nó được thiết kếđể xử lý một loạt các khối lượng công việc lớn, từ các máy tính cá nhân đến kho dữ liệuhoặc dịch vụ Web có nhiều người dùng đồng thời.

(object-Ưu điểm

• Được sử dụng để chạy trang web và ứng dụng web động.

• Cho phép lưu lại nhật ký và hình thành cơ sở dữ liệu hỗ trợ sửa lỗi.• Mã nguồn mở để người dùng chỉnh sửa, nâng cấp.

• Hỗ trợ khách hàng dựa trên vùng địa lý.• Cách sử dụng đơn giản.