E pagestore xây dựng hệ thống cung cấp web page trong lĩnh vực kinh doanh trực tuyến (b2c)

Đề tài: E-PAGESTORE: Xây dựng hệ thống cung cấp web page trong lĩnh vực kinh doanh trực tuyến B2C 3.. Luận văn xây dựng được một hệ thống cung cấp các mẫu trang web trong lĩnh vực kinh d

TR NG I H C BÁCH KHOA KHOA KHOA H C & K THU T MÁY TÍNH

E-PAGESTORE: Xây d ng h th ng cung c p web page

trong l nh v c kinh doanh tr c tuy n (B2C)

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

GVHD: ThS Tr n Th Qu Nguy t GVPB: TS Lê H ng Trang

-o0o - SVTH 1: Lê Nh t Thành (1713148) SVTH 2: Võ Trung Quân (1712835)

TP H CHÍ MINH, 08/2021

- c l p - T do - H nh phúc

TR NG I H C BÁCH KHOA

KHOA: KH & KT Máy tính NHI M V LU N ÁN T T NGHI P

B MÔN: KHMT Chú ý: Sinh viên ph i dán t này vào trang nh t c a b n thuy t trình

2 Nhi m v (yêu c u v n i dung và s li u ban đ u):

E-PAGESTORE là m t h th ng cung c p web page cho các c a hàng kinh doanh tr c tuy n theo mô hình B2C tài c n thi t k và hi n th c quy trình bán t đ ng trong vi c cung c p giao di n đ n vi c tích h p v i n n t ng backend API c a ng i dùng ho c các open source có

s n trong l nh v c kinh doanh tr c tuy n B2C

Sinh viên tìm hi u nghi p v và các ki n th c n n t ng, phân tích, thi t k , hi n th c, đánh giá

và tri n khai m t website cung c p d ch v nh mô t trên

3 Ngày giao nhi m v lu n án: 28/02/2021

4 Ngày hoàn thành nhi m v : 12/08/202

5 H tên gi ng viên h ng d n: Ph n h ng d n:

1)ThS Tr n Th Qu Nguy t

2) 3)

N i dung và yêu c u LVTN đã đ c thông qua B môn

Ngày tháng n m

(Ký và ghi rõ h tên) (Ký và ghi rõ h tên)

TS Tr n Minh Quang ThS Tr n Th Qu Nguy t

PH N DÀNH CHO KHOA, B MÔN:

KHOA KH & KT MÁY TÍNH c l p - T do - H nh phúc

- Ngày tháng n m PHI U CH M B O V LVTN

(Dành cho ng i h ng d n/ph n bi n)

1 H và tên SV: Lê Nh t Thành – 1713148

Võ Trung Quân – 1712835 Ngành (chuyên ngành): Khoa h c Máy tính

2 tài: E-PAGESTORE: Xây d ng h th ng cung c p web page trong l nh v c kinh doanh tr c tuy n (B2C)

t tri n khai

- tài đ c tri n khai trên n n t ng AWS, v i tên mi n epagestore.online, đ c ki m th b ng công

c Katalon, và đánh giá b ng Google Page Speed Lighthouse v i k t qu trên n n t ng web t t

- Làm vi c chuyên c n và có k ho ch t t

7 Nh ng thi u sót chính c a LVTN:

- Các template còn đ n gi n, tính n ng cho phép hi u ch nh trên template c ng khá c b n, ch a x

lý đ c nh ng v n đ nh chuy n đ i màu s c,thay đ i kho ng tr ng, v.v

KHOA KH & KT MÁY TÍNH Độc lập - Tự do - Hạnh phúc

-

Ngày 10 tháng 08 năm 2021

PHIẾU CHẤM BẢO VỆ LVTN

(Dành cho người hướng dẫn/phản biện)

1 Họ và tên SV: Lê Nhật Thành và Võ Trung Quân

MSSV: 1713148 và 1712835 Ngành (chuyên ngành): KHMT

2 Đề tài: E-PAGESTORE: Xây dựng hệ thống cung cấp web page trong lĩnh vực kinh doanh trực tuyến (B2C)

3 Họ tên người hướng dẫn/phản biện: Lê Hồng Trang

4 Tổng quát về bản thuyết minh:

6 Những ưu điểm chính của LVTN:

-! Luận văn xây dựng được một hệ thống cung cấp các mẫu trang web trong lĩnh vực kinh doanh trực tuyến, tập trung vào việc cung cấp giải pháp cho sản phẩm Landing page Hệ thống gồm 3 nhóm chức năng chính: quản trị viên, khách hàng và nhân viên

-! Hệ thống hỗ trợ khá đa dạng về các chức năng Các chức năng được phân tích và thiết kế khá cẩn thận

-! Hệ thống được hiện thực và kiểm thử bằng Katalon, triển khai trên AWS Nhóm cũng nghiên cứu đánh giá và cải thiện hiệu suất dựa trên công cụ pagespeed ínight

-! Nhóm cũng đã thể hiện được các kỹ năng sử dụng công nghệ thông qua các kết quả kỹ thuật đạt được

7 Những thiếu sót chính của LVTN:

-! Bố cục luận văn có thể trình bày một cách gọn gàng hơn, ví dụ Chương 1&2 có thê gộp với nhau (vì chương 1 hiện khá ngắn), Chương 6&7 có thể gộp với nhau

-! Một số khuyết điểm nhỏ liên quan đến trình bày, băn bản nên được rà soát và khắc phục

8 Đề nghị: Được bảo vệ R Bổ sung thêm để bảo vệ o Không được bảo vệ o

9 Câu hỏi SV phải trả lời trước Hội đồng:

a

10 Đánh giá chung (bằng chữ: giỏi, khá, TB): Xuất sắc Điểm: 9.5/10

Ký tên (ghi rõ họ tên)

TS Lê Hồng Trang

2

L I CAM OAN Chúng tôi xin cam đoan đây là h th ng c a riêng nhóm tôi và đ c s h ng d n

c a Ths Tr n Th Qu Nguy t Các n i dung nghiên c u, k t qu trong đ tài này là trung

th c và ch a công b d i b t k hình th c nào tr c đây

N u phát hi n có b t k s gian l n nào, chúng tôi xin hoàn toàn ch u trách nhi m

v n i dung lu n v n c a mình và ch u m i hình th c k lu t tr c Ban ch nhi m Khoa

và Ban giám hi u nhà tr ng

3

L I C M N hoàn thành quá trình nghiên c u và hoàn thi n lu n v n này, l i đ u tiên, chúng

em xin chân thành c m n sâu s c đ n cô Tr n Th Qu Nguy t thu c Khoa Khoa h c và

K thu t Máy tính – Tr ng đ i h c Bách Khoa Cô đã tr c ti p ch b o và h ng d n chúng em trong su t quá trình th c hi n đ chúng em hoàn thi n lu n v n này

Ngoài ra chúng em xin chân thành c m n các th y, cô trong Khoa, nh ng ng i đã

t n tình truy n đ t ki n th c quý báu cho chúng em su t nh ng n m h c v a qua ó là

nh ng ki n th c n n t ng vô cùng quan tr ng không ch đ có th hoàn thành lu n v n này,

mà còn là hành trang không th thi u đ ti p t c s nghi p sau khi hoàn thành ch ng trình

h c

Nhân d p này, chúng em c ng xin c m n các cán b trong Khoa c ng nh ban giám

hi u nhà tr ng và các anh ch đang công tác t i các doanh nghi p đã giúp đ chúng em

đ t đ c r t nhi u kinh nghi m trong th i gian th c t p

Cu i cùng, chúng em xin c m n nh ng ng i thân, b n bè đã luôn bên chúng em,

đ ng viên chúng em hoàn thành khóa h c và lu n v n này

Tuy nhiên vì ki n th c chuyên môn còn h n ch và b n thân m i ng i còn thi u nhi u kinh nghi m th c ti n nên n i dung c a báo cáo không tránh kh i nh ng thi u sót, chúng em r t mong nh n s góp ý, ch b o thêm c a quý th y cô đ báo cáo này đ c hoàn thi n h n

M t l n n a xin g i đ n th y cô, b n bè l i c m n chân thành và t t đ p nh t! Trân tr ng c m n!

4

TÓM T T E-Pagestore là m t trang web cung c p web page template trong l nh v c kinh doanh

tr c tuy n E-Pagestore t p trung vào vi c cung c p gi i pháp cho s n ph m chính đó là Landing Page

Trong các chi n d ch qu ng cáo tr c tuy n, Landing Page là m t trang web đ n có

n i dung t p trung nh m d n d t và thuy t ph c ng i đ c th c hi n m t m c tiêu chuy n

đ i c th

i t ng ng i s d ng E-PAGESTORE đ c chia làm 3 nhóm:

- Qu n tr viên: là ng i qu n tr h th ng, có ch c n ng qu n lý các tài kho n,

ki m duy t các template, Landing Page

- Khách hàng: là các h kinh doanh nh l có nhu c u kinh doanh tr c tuy n, có ít

hi u bi t v công ngh , mu n xây d ng m t n n t ng s cho riêng mình

- Nhân viên: là nh ng thành viên trong n i b h th ng, có ch c n ng đ ng và

ch nh s a template

E-Pagestore h ng đ n vi c tr thành m t n n t ng cung c p gi i pháp toàn di n cho l nh v c kinh doanh tr c tuy n

hoàn thành đ tài này, chúng tôi đã th c hi n nh ng công vi c sau:

- Kh o sát các trang web h tr t o Landing Page, website

- Tìm hi u các ch c n ng c a Landing Page, các ph n t c b n ph i có c a Landing Page

- Tìm hi u cách tích h p nh ng ch c n ng m i cho Landing Page nh thêm bài

- S n ph m đã đ c ki m th b ng Katalon, tri n khai trên Amazon Web Service

v i tên mi n https://epagestore.online và đánh giá b ng Pagespeed Insight

Ch ng 2 th c hi n kh o sát các h th ng liên quan nh ladipage.vn,

wordpress.com sau đó đ a ra các tiêu chí t o nên E-PAGESTORE a ra các khái ni m

c b n c a E-PAGESTORE Gi i thi u các c s lý thuy t và công ngh s s d ng đ

hi n th c đ tài nh : ReactJS, Spring Boot, Postman, PostgreSQL, Amazon Web

Services

Ch ng 3: Phân tích và thi t k h th ng

Ch ng 3 trình bày use-case diagram và thi t k c s d li u chi ti t c a

PAGESTORE Thêm vào đó là các quy trình đ s d ng nh ng ch c n ng chính trong PAGESTORE

E-Ch ng 4: Hi n th c h th ng

Ch ng 4 trình bày các công c qu n lý mã ngu n, c u trúc mã ngu n và giao di n

c a h th ng

Ch ng 5: Tri n khai

Ch ng 5 s trình bày môi tr ng tri n khai là Amazon Web Services( AWS) và

M t Bão Các b c tri n khai nh t o key pair, VPS, k t n i server thông qua SSH, cách cài đ t các ch ng trình c n thi t, tri n khai database, tri n khai back-end, tri n khai front-end và tích h p d ch v bên th ba

Ch ng cu i trình bày v các u, nh c đi m c a h th ng E-pagestore ng th i

đ ra h ng phát tri n m r ng cho đ tài

6

M C L C

L I CAM OAN 2

L I C M N 3

TÓM T T 4

TÓM T T CH NG 5

M C L C 6

DANH SÁCH HÌNH NH 9

DANH SÁCH B NG 14

CH NG 1: GI I THI U TÀI 15

1 T ng quan 15

2 Ý ngh a 15

3 M c tiêu 15

4 Gi i h n đ tài 16

CH NG 2: KI N TH C N N T NG 17

1 Kh o sát h th ng hi n t i 17

2 M t s khái ni m trong h th ng 20

3 Công ngh 21

3.1 Front-end: ReactJS 21

3.2 Back-end: Java Spring Boot 22

3.3 C s d li u PostgreSQL 22

3.4 Cloud và các d ch v tích h p 23

CH NG 3: PHÂN TÍCH H TH NG 27

1 Phân tích nghi p v (use case diagram) 27

1.1 Use case khách l và khách hàng 27

1.2 Use case nhân viên 28

1.3 Use case qu n tr viên 29

2 C s d li u 30

2.1 Thi t k c s d li u ý ni m 30

2.2 Thi t k c s d li u v t lý 37

3 Lu ng ho t đ ng c a h th ng 38

3.1 Quy trình đ ng ký 38

3.2 Quy trình đ ng nh p 38

3.3 Quy trình t o m i và qu n lý template c a nhân viên 39

3.4 Quy trình t o m i Landing Page c a khách hàng 39

7

3.5 Quy trình qu n lý Landing Page c a khách hàng 40

3.6 Quy trình t o m i và qu n lý bài vi t c a khách hàng 41

3.7 Quy trình qu n lý tài kho n c a qu n tr viên 41

3.8 Quy trình qu n lý template c a qu n tr viên 42

3.9 Quy trình qu n lý Landing Page c a qu n tr viên 42

CH NG 4: HI N TH C H TH NG 43

1 Qu n lý mã ngu n 43

1.1 Github 43

1.2 C u trúc mã ngu n trong E-PAGESTORE 43

2 Giao di n (Truy c p E-PAGESTORE t i https://epagestore.online) 45

2.1 i v i quy n truy c p là khách (Ch a đ ng ký tài kho n) 45

2.2 i v i ng i qu n lý trang (Admin) 49

2.3 i v i Tài kho n Nhân viên (Staff) 52

2.4 i v i Tài kho n ng i dùng đã đ ng ký Tài kho n (Khách hàng) 54

CH NG 5: TRI N KHAI 88

1 Môi tr ng tri n khai 88

1.1 Amazon Web Services 88

1.2 M t Bão 88

2 Các b c tri n khai 89

2.1 T o key pair 89

2.2 T o Virtual Private Server( VPS) 91

2.3 K t n i đ n server thông qua SSH( Secure Shell Protocol) 96

2.4 Cài đ t các ch ng trình c n cho quá trình tri n khai 98

2.5 Tri n khai Database 100

2.6 Tri n khai back-end 104

2.7 Tri n khai front-end 105

2.8 C u hình Reverse Proxy b ng Nginx 106

2.9 Tr tên mi n t M t bão v trang web 109

2.10 Cài đ t ch ng ch SSL( Secure Sockets Layer) 111

2.11 Tích h p d ch v bên th ba 112

CH NG 6: KI M TH H TH NG 119

1 Ki m th h th ng 119

1.1 Ki m th h th ng là gì? 119

8

1.2 T i sao ki m th h th ng là c n thi t? 119

1.3 Các b c ki m th h th ng 120

2 Katalon 120

2.1 Katalon Studio 120

2.2 Katalon TestOps 124

CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T 127

1 Pagespeed Insights 127

2 K t qu đánh giá tr c khi c i thi n 129

3 Quá trình c i thi n hi u su t 130

3.1 Phân ph i hình nh đ nh d ng m i 130

3.2 Gi m JavaScript không dùng đ n 132

3.3 Gi m m c nh h ng c a mã bên th ba 133

3.4 M t s bi n pháp khác 134

4 K t qu đánh giá sau khi c i thi n 135

CH NG 8: T NG K T VÀ H NG PHÁT TRI N TÀI 136

1 K t qu đ t đ c 136

1.1 i v i nhi m v đ tài 136

1.2 i v i nhu c u th c ti n 137

1.3 i v i c s lý thuy t và công ngh 137

2 ánh giá 137

2.1 u đi m 137

2.2 Nh c đi m 138

3 H ng phát tri n m r ng 138

DANH M C TÀI LI U THAM KH O 139

9

DANH SÁCH HÌNH NH

Hình 2.1: ReactJS 21

Hình 2.2: Spring Boot 22

Hình 2.3: PostgreSQL 22

Hình 2.4: Postman 23

Hình 2.5: AWS 24

Hình 2.6: EmailJS 25

Hình 2.7: Email xác minh tài kho n v i Token 25

Hình 2.8: Email t o tài kho n thành công 26

Hình 3.1: Use case khách l và khách hàng 27

Hình 3.2: Use case nhân viên 28

Hình 3.3: Use case qu n tr viên 29

Hình 3.4: C s d li u d ng ERD 30

Hình 3.5: L c đ c s d li u v t lý 37

Hình 4.1: C u trúc mã ngu n E-PAGESTORE 43

Hình 4.2: C u trúc mã ngu n front-end 44

Hình 4.3: C u trúc mã ngu n back-end 44

Hình 4.4: C u trúc mã ngu n backup database 45

Hình 4.5: Giao di n Trang ch 46

Hình 4.6: Giao di n Liên h 46

Hình 4.7: Giao di n ng nh p 47

Hình 4.8: Giao di n ng ký 47

Hình 4.9: Giao di n Th vi n Template 48

Hình 4.10: Giao di n H ng d n 48

Hình 4.11: Giao di n Qu n lý Bi u đ s d ng Template 49

Hình 4.12: Giao di n Qu n lý Bi u đ s d ng Template 50

Hình 4.13: Giao di n Qu n lý Template 50

Hình 4.14: Giao di n Qu n lý Landing Page theo Tên mi n 51

Hình 4.15: Giao di n Qu n lý Landing Page theo ng i dùng - chi ti t 51

Hình 4.16 Giao di n sau khi đ ng nh p tài kho n nhân viên 52

Hình 4.17: Giao di n Qu n lý Template nhân viên 52

Hình 4.18: Giao di n T o m i Template 53

Hình 4.19: Giao di n sau khi ng ký tài kho n khách hàng 54

10

Hình 4.20: Giao di n B ng giá các Plan 55

Hình 4.21: Giao di n Các l a ch n Thanh toán Plan Pro 55

Hình 4.22: Giao di n C ng thanh toán Momo dùng trong Thanh toán Plan Pro 56

Hình 4.23: Giao di n Thanh toán Plan Pro thành công 56

Hình 4.24: Giao di n Qu n lý Landing Page c a Khách hàng 57

Hình 4.25: Giao di n l y mã QR Landing Page 57

Hình 4.26: Giao di n Xem d li u Landing Page 58

Hình 4.27: Giao di n D li u xu t ra trong Excel 58

Hình 4.28: Giao di n Th ng kê l t truy c p và D li u Landing Page 59

Hình 4.29: Giao di n Thi t l p tùy ch n Landing Page 59

Hình 4.30: Giao di n T o m i Landing Page - t tên 60

Hình 4.31: Giao di n T o m i Landing Page - Ch n tên mi n 60

Hình 4.32: Giao di n T o m i Landing Page - Thi t l p tu ch n 61

Hình 4.33: Giao di n T o m i Landing Page - Tu ch nh giao di n 61

Hình 4.34: Giao di n T o m i Landing Page - Xác nh n t o 62

Hình 4.35: Giao di n Qu n lý bài vi t 62

Hình 4.36: Giao di n Xem chi ti t bài vi t 63

Hình 4.37: Giao di n Ch nh s a bài vi t 63

Hình 4.38: Giao di n T o m i bài vi t 64

Hình 4.39: Giao di n Bài vi t trên Landing Page 64

Hình 4.40: Template Tuy n d ng nhân viên - ph n 1 65

Hình 4.41: Template Tuy n d ng nhân viên - ph n 2 66

Hình 4.42: Template bán vé nh c h i - ph n 1 67

Hình 4.43: Template Bán vé nh c h i - ph n 2 68

Hình 4.44: Template d ch v trang trí v n phòng 69

Hình 4.45: Template chuy n đ i đ n blog cá nhân 70

Hình 4.46: Template qu ng cáo nhà hàng, quán n 1 - ph n 1 71

Hình 4.47: Template Qu ng cáo nhà hàng, quán n 1 - ph n 2 72

Hình 4.48: Template Bán s n ph m th i trang - ph n 1 73

Hình 4.49: Template Bán s n ph m th i trang - ph n 2 74

Hình 4.50: Template Bán sách d y n u n - ph n 1 75

Hình 4.51: Template Bán sách d y n u n - ph n 2 76

Hình 4.52: Template Quán cafe, n c gi i khát 1 - ph n 1 77

11

Hình 4.53: Template Quán cafe, n c gi i khát 1 - ph n 2 78

Hình 4.54: Template Bán khóa h c 1 - ph n 1 79

Hình 4.55: Template Bán khóa h c 1 - ph n 2 80

Hình 4.56: Template Studio ch p nh c i - ph n 1 81

Hình 4.57: Template Studio ch p nh c i - ph n 2 82

Hình 4.58: Template Chuy n đ i đ n blog du l ch - ph n 1 83

Hình 4.59: Template Chuy n đ i đ n blog du l ch - ph n 2 84

Hình 4.60: Template Qu ng cáo nhà hàng, quán n - ph n 1 85

Hình 4.61: Template Qu ng cáo nhà hàng, quán n - ph n 2 86

Hình 4.62: Template Qu ng cáo nhà hàng, quán n - ph n 3 87

Hình 5.1: Vào trang t o key pair 89

Hình 5.2: Quá trình t o key pair 89

Hình 5.3: L u key pair v máy 90

Hình 5.4: Key pair v a t o đã xu t hi n trong danh sách 90

Hình 5.5: Vào trang t o m i VPS 91

Hình 5.6: Ch n Amazon Machine Image (AMI) 91

Hình 5.7: Ch n c u hình c b n cho server 92

Hình 5.8: Thi t l p m t s tùy ch n khác 92

Hình 5.9: Cài đ t b nh 93

Hình 5.10: G n th 93

Hình 5.11: Cài đ t b o m t 94

Hình 5.12: Xem l i các cài đ t tr c đó 94

Hình 5.13: Thêm key pair cho VPS 95

Hình 5.14: T o m i VPS thành công 95

Hình 5.15: Ch n Instance ID c a server v a t o 96

Hình 5.16: Ch n Connect đ ti p t c 96

Hình 5.17: Sao chép đo n mã đ k t n i đ n server 97

Hình 5.18: K t n i đ n server thành công 97

Hình 5.19: B t đ u quá trình backup database local 100

Hình 5.20: Backup database local thành công 100

Hình 5.21: T o k t n i m i đ n server 101

Hình 5.22: i n thông tin v k t n i đ n server 102

Hình 5.23: Th c hi n restore database 102

12

Hình 5.24: Quá trình restore database hoàn t t 103

Hình 5.25: Hoàn t t tri n khai database 103

Hình 5.26: Hoàn t t quá trình tri n khai back-end 104

Hình 5.27: Hoàn t t quá trình tri n khai front-end 105

Hình 5.28: Ch nh s a file nginx.conf 107

Hình 5.29: Hoàn t t quá trình c u hình Proxy Server b ng Nginx 108

Hình 5.30: Tìm ki m tên mi n 109

Hình 5.31: Vào trang qu n lý tên mi n 109

Hình 5.32: Danh sách tên mi n ta đang qu n lý 110

Hình 5.33: Tr tên mi n v trang web 110

Hình 5.34: Hoàn t t quá trình tr tên mi n t M t Bão v trang web 111

Hình 5.35:Trang ch t o ClientID 112

Hình 5.36:Các b c t o ClientID 113

Hình 5.37: Cách import th vi n react-google-login 113

Hình 5.38: Component Googlogin 113

Hình 5.39: Hàm reponseGoogleSuccess() 114

Hình 5.40: Hàm reponseGoogleFailed() 114

Hình 5.41: Sau khi hi n th c component Google Login 114

Hình 5.42: Giao di n sau khi ch n ng nh p b ng google 115

Hình 5.43: N i dung trang Plan 115

Hình 5.44: Tùy ch n, b ng giá Plan 116

Hình 5.45: Giao di n C ng thanh toán Momo dùng trong Thanh toán Plan Pro 116

Hình 5.46: Thông tin tích h p Momo 117

Hình 5.47: S đ x lý thanh toán trên website 117

Hình 5.48: Mô hình thành toán Momo 118

Hình 5.49: API m u thanh toán b ng Momo 118

Hình 6.1: Trang ch Katalon 121

Hình 6.2: Trang hi n th s n ph m Katalon 121

Hình 6.3: Katalon Studio 122

Hình 6.4: Katalon Studio Test Cases 122

Hình 6.5: Nh ng cách t o Test Case b ng Katalon Studio 123

Hình 6.6: Cách t o m t Test Suite b ng Katalon Studio 123

Hình 6.7: Cách ch y và lu ng c a Test Suite trong Katalon Studio 124

13

Hình 6.8: Trang hi n th s n ph m Katalon 125

Hình 6.9: Trang qu n lý c a TestOps sau khi hoàn t t c u hình 125

Hình 6.10: Các b c tích h p Katalon Studio và Katalon TestOps 126

Hình 6.11: D dàng qu n lý ki m th b ng Katalon TestOps 126

Hình 7.1: K t qu đánh giá tr c khi c i thi n trên máy tính là 54 đi m 129

Hình 7.2: K t qu đánh giá tr c khi c i thi n trên đi n tho i là 13 đi m 129

Hình 7.3: nh d ng nh *.png làm ch m quá trình t i 130

Hình 7.4: S d ng công c Convertio đ chuy n đ i đ nh d ng hình nh 130

Hình 7.5: Ch n đ nh d ng mu n chuy n đ i là *.webp 131

Hình 7.6: T i xu ng hình nh đã đ c chuy n đ i đ nh d ng 131

Hình 7.7: D th a JavaScript làm ch m quá trình t i 132

Hình 7.8: Ví d v vi c s d ng React.lazy() 132

Hình 7.9: Vi c t i mã JavaScript c a Plugin Messenger làm ch m trang web 133

Hình 7.10: S d ng thu c tính async đ t i b t đ ng b 134

Hình 7.11: K t qu đánh giá sau khi c i thi n trên máy tính là 77 đi m 135

Hình 7.12: K t qu đánh giá sau khi c i thi n trên đi n tho i là 25 đi m 135

14

DANH SÁCH B NG

B ng 2.1: Kh o sát các h th ng liên quan 18

B ng 2.2: Tiêu chí E-PAGESTORE 19

B ng 3.1: Th c th User 31

B ng 3.2: Th c th Customer 31

B ng 3.3: Th c th Staff 32

B ng 3.4: Th c th Plan 32

B ng 3.5: Th c th Template 32

B ng 3.6: Th c th Landingpage 33

B ng 3.7: Th c th Post 34

B ng 3.8: Th c th Access 34

B ng 3.9: Th c th Data 34

B ng 3.10: Quan h gi a Customer và Landingpage 35

B ng 3.11: Quan h gi a Customer và Plan 35

B ng 3.12: Quan h gi a Staff và Template 35

B ng 3.13: Quan h gi a Landingpage và Template 35

B ng 3.14: Quan h gi a Landingpage và Post 36

B ng 3.15: Quan h gi a Landingpage và Access 36

B ng 3.16: Quan h gi a Landingpage và Data 36

ng i phát tri n ph i áp d ng ki n th c công ngh l n và m t r t nhi u th i gian

Vì th , r t nhi u trang web, ph n m m h tr t o website ra đ i và phát tri n Nh ng

m i trang web đ u yêu c u ng i s d ng ph i hi u bi t v công ngh , nghiên c u nhi u tài li u và xem video h ng d n

V i tinh th n đó, chúng tôi quy t đ nh s xây d ng m t ng d ng web tên là PAGESTORE s d ng đ thi t k , chia s các Landing Page v i m c đích gi i thi u, qu ng cáo, buôn bán, Ngoài ra nó còn có th dùng đ kh o sát, tuy n d ng, l u gi nhi u thông tin có giá tr

E-2 Ý ngh a

Hi n nay, có r t nhi u các trang web n i ti ng đã h tr cho vi c t o nh ng trang web, tuy nhiên nh ng trang web đó yêu c u ng i s d ng ph i có hi u bi t v công ngh và xem nh ng tài li u, video h ng d n Do đó, chúng tôi mu n t o ra m t trang web b ng

Ti ng Vi t và h tr c hai lo i ng i s d ng: ng i có ki n th c n n và không có ki n

th c n n v công ngh Vì v y E-PAGESTORE ra đ i

E-PAGESTORE cung c p d ng d ch v t o Landing Page theo yêu c u c a ng i dùng

m t cách tr c quan, d dàng h n nh ng n n t ng tr c đó Các Landing Page đã đ c thi t

k đa d ng, s ng đ ng, b t k p xu th và đ y đ nh ng ph n t c n thi t

Ngoài ra, trang web cung c p quy trình thanh toán tr c tuy n b ng Momo, m t ví đi n

t đang r t ph bi n, ti n l i cho ng i dùng

Vi c t o ra E-PAGESTORE là c h i đ chúng tôi có thêm nhi u kinh nghi m, ki n th c

v vi c t o m t trang web th ng m i đi n t , cách deploy m t ng d ng Thêm vào đó là

h c đ c nh ng công ngh m i, ph bi n trên toàn th gi i nh ReactJS, Spring boot, Postman, Docker, …

V đ nh h ng trong t ng lai, E-PAGESTORE s phát tri n theo d ng m , m i ng i

có th cùng nhau đóng góp vào trang web, đ t t c đ u s d ng E-PAGESTORE hi u qu

và giúp E-PAGESTORE tr nên hoàn thi n h n

3 M c tiêu

M c tiêu c a đ tài là xây d ng m t trang web th ng m i đi n t b ng Ti ng Vi t, v i

lo i s n ph m ch y u là Landing Page E-PAGESTORE cung c p cho ng i dùng m t kho Landing Page có th s d ng, ch nh s a vào nhi u m c đích khác nhau nh : qu ng cáo, mua bán, thu th p khách hàng, trung gian chuy n đ i, Ngoài ra, ng i dùng có th theo dõi và th ng kê đ c s l ng truy c p và d li u c a ng i dùng, nh vào đó có th d dàng thay đ i sao cho phù h p v i m c đích

16

Không nh ng th , ng i dùng có th qu n lý Landing Page c a h m t cách d dàng, t o bài vi t, k t h p v i plugin c a messenger đ t ng tính th ng m i cho Landing Page c a mình

E-PAGESTORE nh m đ n m c đích th ng m i v i hai lo i Plan Pro và Plan Free có các đ c đi m và u đãi khác nhau, m i th có th thanh toán d dàng thông qua ví đi n t Momo

4 Gi i h n đ tài

E-PAGESTORE h ng đ n ng i dùng là cách khách hàng nh l , c n m t trang web

đ n gi n đ th hi n thông tin và không m t nhi u chi phí hay đòi h i cao v ki n th c công ngh Do đó, m t s tính n ng tùy bi n ph c t p khác, hay tích h p vào h th ng nh trong wordpress, t o m i các form và màu s c nh trong ladipage, đ c đ n gi n hoá cho ng i dùng t i phân khúc này

17

1 Kh o sát h th ng hi n t i

M c dù có m t s trang web h tr t o Landing Page Tuy nhiên, E-PAGESTORE

đ c t o ra nh m vào nh ng ng i dùng không hi u bi t quá nhi u v công ngh , không

c n đ c quá nhi u tài li u, tr c quan và d s d ng, thêm vào đó là m t s ch c n ng đ c

bi t M t s trang web chúng tôi ch n l a đ kh o sát đó là: Ladipage.vn,

Wordpress.com Chi ti t đ c trình bày d i đây:

+ Bán hàng

+ Trung gian chuy n đ i

- i t ng khách hàng:

+ Nhà qu ng cáo,

mu n qu ng cáo cho s n ph m

m i v i chi phí

th p Ho c

th ng là đã có trang web bán hàng riêng

+ H kinh doanh

nh l , s salephone sau khi khách hàng đi n thông tin

+ Ng i dùng không c n am

hi u nhi u v công ngh làm web

+ Ng i mu n ít

t n chi phí, đ ng

th i ít có nhu c u

v vi c hi n th c các ch c n ng cao c p

- M c đích:

+ Vi t các blog chia

s v du l ch, công ngh , cu c

s ng th ng ngày,

+ Website bán hàng + T o m t trang web đ n gi n đ

đ ng tin t c,

qu ng bá doanh nghi p,

+ Ng i dùng có

hi u bi t c b n

v công ngh làm web

+ Ng i mu n ít

t n chi phí, đ ng

th i không quan tâm nhi u v v n

đ b o m t, tính

n ng cao c p, d

th a d li u

- M c đích: t p trung vào Landing Page

+ Landing Page, hi n

th c t ng t nh trang ladipage.vn Dòng s n ph m này

s đ c hi n th c giai đo n 1

+ Cho phép ng i dùng

qu n lý l ng truy

c p và d li u khách hàng t ng ngày

- i t ng khách hàng: + Nhà qu ng cáo,

mu n qu ng cáo cho

s n ph m m i v i chi phí th p Ho c

th ng là đã có trang web bán hàng riêng + H kinh doanh nh

l , mu n có m t website bán hàng + Ng i mu n ít t n chi phí, đ ng th i ít

- Kh n ng tùy ch nh

template:

+ Thay đ i n i dung, c ch , màu s c

+ Thêm, b t các component

- Kh n ng cung c p s n template:

+ S d ng giao di n

m u

- Kh n ng tùy ch nh template:

+ Thay đ i n i dung, c ch , màu s c

+ Thêm, b t các component + Tùy ch nh b ng các đo n mã HTML t vi t

- Kh n ng cung c p s n template:

+ S d ng giao di n

m u

- Kh n ng tùy ch nh template:

+ Thay đ i hình nh, + Thay đ i n i dung

v n b n

+ K t h p Plugin Messenger và thêm bài vi t

- Deploy v i các tên

mi n khác

- Deploy tên mi n epagestore.online v i subdomain ng u nhiên

- Deploy tên mi n epagestore.online v i subdomain đ c c u hình

export ra file excel

ph c t p khi s d ng n gi n, phù h p v i m i ng i dùng

Kh n ng đóng góp, phát tri n Có

Chi phí phát tri n R so v i m t b ng chung, mi n phí 1 tháng

dùng th Plan Pro khi đ ng ký tài kho n thành công Chi phí phát tri n đã đ c t i

u v a đ các tính n ng phù h p cho phân khúc ng i dùng

nh hay các developer mu n có m t trang web cho riêng mình

li u c a ng i dùng qua bi u đ đ ng, d

đ nh h ng

Kh n ng ch nh s a, xoá Landing Page Có cung c p

Xu t file Landing Page Có cung c p d i d ng html

Thêm, xóa, s a bài vi t cho Landing Page Có, theo c ch CMS, khá d s d ng

- Landing Page: Nói theo cách hi u thông th ng, Landing Page là m t trang có giao

di n, n i dung và tên mi n g n gi ng nh m t trang web bình th ng Tuy nhiên nó đ n

gi n h n và ch t p trung vào m t n i dung nh t đ nh (VD: Ch ng trình khai tr ng c a hàng c a nhãn hàng X, gi i thi u s n ph m m i c a nhãn hàng Y, s ki n Z danh cho các doanh nhân tr …) và th m chí c ng có m t s giao di n Landing Page ch gói g n n i dung trong 1 trang duy nh t Có 3 lo i Landing Page c b n d a theo m c tiêu chuy n đ i: Thu

th p khách hàng ti m n ng, bán hàng, trung gian chuy n đ i

- Ng i dùng: Là ng i s d ng E-PAGESTORE

- Khách hàng: Là m c tiêu h ng đ n c a ng i dùng, là ng i s d ng Landing Page

- Bài vi t: Là nh ng bài vi t ng i dùng có th t o theo c ch CMS bao g m: Title,

N i dung và Hình nh Xu t hi n tr c ti p trên Landing Page mà h ch n

- Plugin messenger: Là cách tích h p tài kho n Messenger c a b n tr c ti p trên Landing Page và ng i dùng có th liên h v i b n m t cách d dàng

- Mã QR: M i đ ng link Landing Page mà ng i dùng t o đ u t ng ng v i m t

21

3 Công ngh

3.1 Front-end: ReactJS

Hình 2.1: ReactJS React là th vi n JavaScript ph bi n nh t đ xây d ng giao di n ng i dùng (UI)

Nó cho t c đ ph n h i tuy t v i khi user nh p li u b ng cách s d ng ph ng pháp m i

đ render trang web

Components c a công c này đ c phát tri n b i Facebook Nó đ c ra m t nh m t công c JavaScript mã ngu n m vào n m 2013 Hi n t i, nó đã đi tr c các đ i th chính

nh Angular và Bootstrap, hai th vi n JavaScript bán ch y nh t th i b y gi

22

3.2 Back-end: Java Spring Boot

Hình 2.2: Spring Boot Spring Boot là m t module c a Spring Framework, cung c p tính n ng RAD (Rapid Application Development) – Phát tri n ng d ng nhanh

Spring Boot đ c dùng đ t o các ng d ng đ c l p d a trên Spring

Spring Boot không yêu c u c u hình XML

Nó là m t chu n cho c u hình thi t k ph n m m, t ng cao n ng su t cho developer Tài li u tham kh o [7]

3.3 C s d li u PostgreSQL

Hình 2.3: PostgreSQL

23

PostgreSQL là m t h th ng qu n tr c s d li u quan h -đ i t ng

(object-relational database management system) có m c đích chung, h th ng c s d li u mã ngu n m tiên ti n nh t hi n nay

PostgreSQL đ c phát tri n d a trên POSTGRES 4.2 t i phòng khoa h c máy tính Berkeley, i h c California

PostgreSQL đ c thi t k đ ch y trên các n n t ng t ng t UNIX Tuy nhiên, PostgreSQL sau đó c ng đ c đi u ch nh linh đ ng đ có th ch y đ c trên nhi u n n

t ng khác nhau nh Mac OS X, Solaris và Windows

PostgreSQL là m t ph n m m mã ngu n m mi n phí Mã ngu n c a ph n m m kh

d ng theo license c a PostgreSQL, m t license ngu n m t do Theo đó, b n s đ c t

do s d ng, s a đ i và phân ph i PostgreSQL d i m i hình th c

PostgreSQL không yêu c u quá nhi u công tác b o trì b i có tính n đ nh cao Do

đó, n u b n phát tri n các ng d ng d a trên PostgreSQL, chi phí s h u s th p h n so

Postman h tr t t c các ph ng th c HTTP (GET, POST, PUT, PATCH, DELETE, …) Bên c nh đó, nó còn cho phép l u l i l ch s các l n request, r t ti n cho

vi c s d ng l i khi c n

Tài li u tham kh o [10]

24

3.4.2 Amazon Web Services

Hình 2.5: AWS Amazon Web Services (AWS) là n n t ng đám mây toàn di n và đ c s d ng

r ng rãi nh t, cung c p trên 175 d ch v đ y đ tính n ng t các trung tâm d li u trên toàn

th gi i Hàng tri u khách hàng bao g m các công ty kh i nghi p t ng tr ng nhanh nh t, các t p đoàn l n nh t c ng nh các c quan hàng đ u c a chính ph - đ u tin t ng vào AWS đ gi m chi phí, tr nên linh ho t h n và đ i m i nhanh h n

Tài li u tham kh o [9]

3.4.3 Momo Payment

thu n ti n cho vi c thanh toán – nâng c p các gói tài kho n ch c n ng trong h

th ng nh m nâng cao quy mô s d ng c a ng i dùng, h th ng còn đ c tích h p c ng thanh toán qua hình th c thanh toán b ng Ví đi n t Momo

Nh ng lý do mà nhóm ch n c ng thanh toán b ng ví đi n

t MoMo:

- Là m t c ng thanh toán đang khá ph bi n t i Vi t Nam

hi n nay đ c nhi u doanh nghi p trong n c s d ng

- H tr nhi u ngu n ti n khác nhau: ATM ngân hàng n i

đ a, th ghi n Visa, Mastercard ho c JCB

- C ng thanh toán MoMo h tr thanh toán trên nhi u n n

t ng khác nhau, có th m r ng d dàng sau này

Tài li u tham kh o [11]

Là th vi n mà chúng em ch n đ th c hi n thông báo sau khi xác minh tài kho n

và t o tài kho n thành công

Hình 2.7: Email xác minh tài kho n v i Token

26 Hình 2.8: Email t o tài kho n thành công

Tài li u tham kh o [12]

28 1.2 Use case nhân viên

Hình 3.2: Use case nhân viên

29 1.3 Use case qu n tr viên

Hình 3.3: Use case qu n tr viên

31

2.1.2 Mô t chi ti t ERD

Các th c th bao g m: User( g m 3 th c th con là Customer, Admin, Staff), Plan, Template, Landingpage, Post, Access, Data

FirstName Tên ng i dùng LastName H và tên đ m ng i dùng

B ng 3.1: Th c th User

b Th c th Customer

Customer

Verified Account false: tài kho n ch a xác th c email

true: tài kho n đã xác th c VerificationCode Mã xác th c

VerificationTime Th i gian t o mã xác th c ExpiredTime Th i gian h t h n c a plan Pro Status false: tài kho n b khóa

true: tài kho n không b khóa

B ng 3.2: Th c th Customer

c Th c th Admin

Th a k toàn b thu c tính t th c th cha User

PlanID nh danh cho plan

File Tên file template đ c l u trên h th ng DownloadLink Liên k t dùng đ download template CreationTime Th i gian template đ c t i lên h th ng Status false: template b khóa true: template không b khóa

B ng 3.5: Th c th Template

File Tên file Landing Page đ c l u trên h th ng AccessLink a ch dùng đ truy c p Landing Page

CreationTime Th i gian Landing Page đ c t o LastUpdatedTi

me Th i gian Landing Page đ c c p nh t g n nh t Status false: Landing Page b khóa true: Landing Page không b khóa

Message L i nh n CreationTime Th i gian d li u đ c t o

B ng 3.9: Th c th Data

B ng 3.11: Quan h gi a Customer và Plan m) Quan h gi a Staff và Template

Upload Nhân viên t i lên template M t nhân viên có th t i lên nhi u template, nh ng m t

template ch có th do m t nhân viên t i lên

B ng 3.12: Quan h gi a Staff và Template n) Quan h gi a Landingpage và Template

B ng 3.14: Quan h gi a Landingpage và Post p) Quan h gi a Landingpage và Access

Have_Access Landing page có truy c p M t landing page có th có nhi u truy c p, nh ng m t truy c p

ch thu c v duy nh t m t landing page

B ng 3.15: Quan h gi a Landingpage và Access q) Quan h gi a Landingpage và Data

B ng 3.16: Quan h gi a Landingpage và Data

37 2.2 Thi t k c s d li u v t lý

Hình 3.5: L c đ c s d li u v t lý