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)

I H C QU C GIA TP.HCM 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 IH C E-PAGESTORE: Xây d ng h th ng cung c p web page l nh v c kinh doanh tr c n (B2C) NGÀNH: KHOA H C MÁY TÍNH H I NG 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 TR I H C QU C GIA TP.HCM -NG I H C BÁCH KHOA C NG HÒA XÃ H I CH NGH A VI T NAM c l p - T - H nh phúc NHI M V LU N ÁN T T NGHI P KHOA:KH & KT Máy tính B MƠN:KHMT Chú ý: Sinh viên ph i dán t vào trang nh t c a b n thuy t trình H VÀ TÊN: Lê Nh t Thành MSSV: 1713148 H VÀ TÊN: Võ Trung Quân MSSV: 1712835 NGÀNH: KHOA H C MÁY TÍNH L P: u đ lu n án: E-PAGESTORE: Xây d ng h th ng cung c p web page cho c a hàng kinh doanh tr c n theo mô hình B2C Nhi m v (yêu c u v n i dung s li u ban đ u): E-PAGESTORE m t h th ng cung c p web page cho c a hàng kinh doanh tr c n theo mơ hình B2C tài c n thi t k hi n th c quy trình bán t đ ng 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 open source có s n l nh v c kinh doanh tr c n B2C Sinh viên tìm hi u nghi p v ki n th c n n t ng, phân tích, thi t k , hi n th c, đánh giá tri n khai m t website cung c p d ch v nh mô t Ngày giao nhi m v lu n án: 28/02/2021 Ngày hoàn thành nhi m v : 12/08/202 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 yêu c u LVTN đ c thông qua B môn Ngày tháng n m CH NHI M B MÔN (Ký ghi rõ h tên) GI NG VIÊN H TS Tr n Minh Quang PH N DÀNH CHO KHOA, B MÔN: Ng i t (ch m s b ): n v : _ Ngày b o v : i m t ng k t: _ N i l u tr lu n án: _ NG D N CHÍNH (Ký ghi rõ h tên) ThS Tr n Th Qu Nguy t TR NG I H C BÁCH KHOA KHOA KH & KT MÁY TÍNH C NG HỊA XÃ H I CH NGH A VI T NAM c l p - T - H nh phúc -Ngày tháng n m PHI U CH M B O V LVTN (Dành cho ng ih ng d n/ph n bi n) H 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 tài: E-PAGESTORE: Xây d ng h th ng cung c p web page l nh v c kinh doanh tr c n (B2C) H tên ng i h ng d n: ThS Tr n Th Qu Nguy t T ng quát v b n thuy t minh: S trang: S ch ng: S b ng s li u S hình v : S tài li u tham kh o: Ph n m m tính tốn: Hi n v t (s n ph m) T ng quát v b n v : -S b nv : B n A1: B n A2: Kh khác: - S b n v v tay S b n v máy tính: Nh ng u m c a LVTN: tài cung c p m t d ch v cho phép ng i dùng có th l a ch n template, tri n khai trang web landing page v i domain riêng hi u ch nh n i dung, hình nh, vi t, qu n lý liên h tích h p facebook messenger theo nhu c u, tích h p tóan Momo Ng i dùng có th t i source html đ t tri n khai tài đ c tri n khai n n t ng AWS, v i tên mi n epagestore.online, đ c ki m th b ng công c Katalon, đánh giá b ng Google Page Speed Lighthouse v i k t qu n n t ng web t t - Làm vi c chuyên c n có k ho ch t t Nh ng thi u sót c a LVTN: - Các template đ n gi n, tính n ng cho phép hi u ch nh template c ng 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 - Giao di n c n c i ti n thêm ngh : cb ov  B sung thêm đ b o v  câu h i SV ph i tr l i tr c H i đ ng: a b c 10 ánh giá chung (b ng ch : gi i, khá, TB): Gi i Không đ i m : 9.5 /10 Ký tên (ghi rõ h tên) cb ov  TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KH & KT MÁY TÍNH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - 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) Họ tên SV: Lê Nhật Thành Võ Trung Quân MSSV: 1713148 1712835 Ngành (chuyên ngành): KHMT Đề tài: E-PAGESTORE: Xây dựng hệ thống cung cấp web page lĩnh vực kinh doanh trực tuyến (B2C) Họ tên người hướng dẫn/phản biện: Lê Hồng Trang Tổng quát thuyết minh: Số trang: 138 Số chương: Số bảng số liệu: 18 Số hình vẽ: 147 Số tài liệu tham khảo: 14 Phần mềm tính tốn: Hiện vật (sản phẩm) Tổng quát vẽ: - Số vẽ: Bản A1: Bản A2: Khổ khác: - Số vẽ vẽ tay Số vẽ máy tính: Những ưu điểm LVTN: -! Luận văn xây dựng hệ thống cung cấp mẫu trang web 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 nhóm chức chính: quản trị viên, khách hàng nhân viên -! Hệ thống hỗ trợ đa dạng chức Các chức phân tích thiết kế cẩn thận -! Hệ thống thực kiểm thử Katalon, triển khai AWS Nhóm nghiên cứu đánh giá cải thiện hiệu suất dựa cơng cụ pagespeed ínight -! Nhóm thể kỹ sử dụng công nghệ thông qua kết kỹ thuật đạt Những thiếu sót LVTN: -! Bố cục luận văn trình bày cách gọn gàng hơn, ví dụ Chương 1&2 có thê gộp với (vì chương ngắn), Chương 6&7 gộp với -! Một số khuyết điểm nhỏ liên quan đến trình bày, băn nên rà sốt khắc phục Đề nghị: Được bảo vệ R Bổ sung thêm để bảo vệ o Không bảo vệ o 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 L I CAM OAN L I CAM OAN Chúng xin cam đoan h th ng c a riêng nhóm tơi đ 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 đ tài trung th c ch a công b d i b t k hình th c tr c N u phát hi n có b t k s gian l n nào, chúng tơi xin hồn tồn ch u trách nhi m v n i dung lu n v n c a ch u m i hình th c k lu t tr c Ban ch nhi m Khoa Ban giám hi u nhà tr ng L IC M L IC M N N hoàn thành q trình nghiên c u hồ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 K thu t Máy tính – Tr ng đ i h c Bách Khoa Cô tr c ti p ch b o h ng d n chúng em su t q trình th c hi n đ chúng em hồn thi n lu n v n Ngoài chúng em xin chân thành c m n th y, cô 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 ó nh ng ki n th c n n t ng vô quan tr ng khơng ch đ có th hồn thành lu n v n này, mà cịn hành trang khơng th thi u đ ti p t c s nghi p sau hồ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án b Khoa c ng nh ban giám hi u nhà tr ng anh ch công tác t i doanh nghi p giúp đ chúng em đ t đ c r t nhi u kinh nghi m 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è bên chúng em, đ ng viên chúng em hồn thành khóa h c lu n v n Tuy nhiên ki n th c chuyên mơn cịn h n ch b n thân m i ng i 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 đ báo cáo đ c hồ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 t t đ p nh t! Trân tr ng c m n! TÓM T T TÓM T T E-Pagestore m t trang web cung c p web page template l nh v c kinh doanh tr c n E-Pagestore t p trung vào vi c cung c p gi i pháp cho s n ph m Landing Page Trong chi n d ch qu ng cáo tr c n, Landing Page m t trang web đ n có n i dung t p trung nh m d n d t 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 nhóm: - Qu n tr viên: ng i qu n tr h th ng, có ch c n ng qu n lý tài kho n, ki m t template, Landing Page - Khách hàng: h kinh doanh nh l có nhu c u kinh doanh tr c n, có hi u bi t v cơng ngh , mu n xây d ng m t n n t ng s cho riêng - Nhân viên: nh ng thành viên n i b h th ng, có ch c n ng đ ng 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 n - hồ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 trang web h tr t o Landing Page, website Tìm hi u ch c n ng c a Landing Page, 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 vi t, plugin messenger Tìm hi u cách th ng kê l t truy c p, d li u khách hàng Landing Page cho ng i dùng Áp d ng hai lo i Plan Pro Free có đ c m u đãi khác nhau, nh m m c đích th ng m i Tích h p m t s bên th ba đ t ng tính chuyên nghi p cho h th ng nh : tốn Plan qua ví n t Momo, đ ng nh p b ng tài kho n Google, g i email t đ ng b ng EmailJS S n ph m đ c ki m th b ng Katalon, tri n khai Amazon Web Service v i tên mi n https://epagestore.online đánh giá b ng Pagespeed Insight TÓM T T CH TÓM T T CH Ch NG NG ng 1: T ng quan đ tài B t đ u báo cáo ph n gi i thi u t ng quan, m c tiêu, ý ngh a th c ti n, ý ngh a khoa h c c ng nh ph m vi gi i h n c a đ tài Ch ng 2: Ki n th c n n t ng Ch ng th c hi n kh o sát h th ng liên quan nh ladipage.vn, wordpress.com sau đ a tiêu chí t o nên E-PAGESTORE a khái ni m c b n c a E-PAGESTORE Gi i thi u c s lý thuy t 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 thi t k h th ng Ch ng trình bày use-case diagram thi t k c s d li u chi ti t c a EPAGESTORE Thêm vào quy trình đ s d ng nh ng ch c n ng EPAGESTORE Ch ng 4: Hi n th c h th ng Ch ng trình bày cơng c qu n lý mã ngu n, c u trúc mã ngu n giao di n c a h th ng Ch ng 5: Tri n khai Ch ng s trình bày mơi tr ng tri n khai Amazon Web Services( AWS) 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 ch ng trình c n thi t, tri n khai database, tri n khai back-end, tri n khai front-end tích h p d ch v bên th ba Ch ng 6: Ki m th h th ng Ch ng trình bày cách ki m th h th ng b ng Katalon Studio qu n lý ki m th b ng Katalon TestOps Ch ng 7: ánh giá c i thi n hi u Ch ng trình bày cách đánh giá c i thi n hi u su t s d ng công c PageSpeed Insight Ch ng 8: T ng k t Ch ng cu i trình bày v u, nh đ h ng phát tri n m r ng cho đ tài c m c a h th ng E-pagestore ng th i M CL C M CL C L I CAM OAN L I C M N TÓM T T TÓM T T CH NG M C L C DANH SÁCH HÌNH NH DANH SÁCH B NG 14 CH NG 1: GI I THI U TÀI 15 T ng quan 15 Ý ngh a 15 M c tiêu 15 Gi i h n đ tài 16 CH NG 2: KI N TH C N N T NG 17 Kh o sát h th ng hi n t i 17 M t s khái ni m h th ng 20 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 d ch v tích h p 23 CH NG 3: PHÂN TÍCH H TH NG 27 Phân tích nghi p v (use case diagram) 27 1.1 Use case khách l khách hàng 27 1.2 Use case nhân viên 28 1.3 Use case qu n tr viên 29 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 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 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 M CL C 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 qu n lý 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 Qu n lý mã ngu n 43 1.1 Github 43 1.2 C u trúc mã ngu n E-PAGESTORE 43 Giao di n (Truy c p E-PAGESTORE t i https://epagestore.online) 45 CH 2.1 i v i quy n truy c p khách (Ch a đ ng ký tài kho n) 45 2.2 i v i ng 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 qu n lý trang (Admin) 49 i dùng đ ng ký Tài kho n (Khách hàng) 54 NG 5: TRI N KHAI 88 Môi tr ng tri n khai 88 1.1 Amazon Web Services 88 1.2 M t Bão 88 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 ch ng trình c n cho 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 Ki m th h th ng 119 1.1 Ki m th h th ng gì? 119 CH NG 6: KI M TH H TH NG Hình 6.8: Trang hi n th s n ph m Katalon + Ch n Manage your tests, t o Organization -> t o Team -> t o Project s đ c hình nh sau: Hình 6.9: Trang qu n lý c a TestOps sau hồn t t c u hình + tích h p Katalon Studio vào Katalon TestOps, tr TestOps ng d ng Studio + Các b c tích h p nh sau: c tiên ph i Integration 125 CH Hình 6.10: Các b NG 6: KI M TH H TH NG c tích h p Katalon Studio Katalon TestOps + Sau tích h p ki m th , d li u s đ c trình bày m t cách tr c quan TestOps, giúp d s d ng, d qu n lý h n Hình 6.11: D dàng qu n lý ki m th b ng Katalon TestOps Tài li u tham kh o [14] 126 CH CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T Pagespeed Insights M t trang web ch t l ng đ c t vi c xây d ng th ng hi u c ng nh Pagespeed Insights cơng c đánh giá trang web, t đ a nh i u hóa t t s có vai trị đ c bi t quan tr ng t ng kh n ng ti p c n khách hàng m c tiêu h u hi u vi c h tr ng i dùng phân tích ng đ xu t ch nh s a cho hoàn thi n nh t Pagespeed Insights m t công c Google phát tri n Công c đ c nhi u chuyên gia trang web l a ch n nh m t i u hi u su t ng th i c ng đánh giá ch t l ng cho trang web c a mình, d a nh ng tiêu chu n đánh giá c a Google Khi dùng Pagespeed Insight, ng i dùng có th nh n báo cáo v hi u su t Website c máy tính di đ ng Ngồi ra, công c c ng s cung c p cho ng i dùng nh ng đ xu t nh m t i u trang web thông qua báo cáo UX c a Chrome Khi đánh giá m t trang web đ c t i u hay ch a, Pagespeed Insights c ng có nh ng tiêu chu n c th đ c n c vào đánh giá Nh ng tiêu chu n bao g m: - Trang web nên h n ch s d ng redirect trang đích đ n - C n kích ho t ch c n ng compress d li u tr c g i v trình t - Th i gian tr l i c a server nên đ c th c hi n nhanh nh t có th - Ch c n ng l u tr b nh cache trình t nên đ c m r ng - Các tài nguyên CSS Javascript có website ph i đ c gi i nén - Gi m dung l ng trang web b ng cách th c hi n vi c nén dung l ng hình nh - Quy trình chèn th m c CSS vào website c n đ c t i u hóa m t cách ch t ch - Các th t đ c u tiên n i dung website ph i đ c thi t l p m t cách rõ ràng, c th - B ch đ ch n Javascript CSS tr c t i trang - T n d ng t i đa thu c tính không đ ng b Khi m t trang web đ m b o đ c nh ng tiêu chu n m i đ c xem m t trang web “chu n” Pagespeed Insights s phát hi n nh ng nh ng y u t mà website ch a đ m b o Công c s thơng báo l i cho ng i dùng đ có bi n pháp kh c ph c c i thi n ch t l ng trang web PageSpeed Insights s cung c p nh ng thông tin ph n ch s v hi u n ng Nh ng thông tin đ c cung c p bao g m theo trình t nh sau: - Speed score Speed score hay g i m t c đ i m s đ c tính d a th ng kê Lighthouse lab - Field data Field data bao g m ph n First Contentful Paint (FCP) First Input Delay (FID) Thông tin đ c thu th p d a tr i nghi m th c t c a c a ng i dùng Chrome Chúng s đ c ki m nghi m th i gian nh t 30 ngày 127 CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T - Lab Data S li u v Lab data s thu đ c d a s li u đ c thu th p phân tích t Lighthouse m ng 3G c ng nh thi t b di đ ng - Opportunities Trong ph n Opportunities, PageSpeed Insights s thu th p thông tin v th i gian hi u su t t i trang T s đ a đ xu t v hi u su t M c đích nh m giúp ng i dùng c n c vào đ c i thi n th i gian t i trang - Diagnostics Diagnostics ph n mà PageSpeed Insights s cung c p cho ng i dùng nh ng đ xu t v công c đ xu t mà website c a ng i dùng nên đ c thêm vào - Passed audits Trong ph n Passed Audits, Pagespeed Insights s đ a m t b ng t ng h p v nh ng hi u n ng mà trang web đ t đ c, không c n thi t ph i b sung ho c thay đ i t i u hi u su t cho website v i Pagespeed Insights, ng i dùng c n th c hi n theo ph ng pháp nh sau: - Dùng ph ng pháp gi i nén cho server Vi c gi i nén cho server b ng PageSpeed Insights s giúp ng i dùng phát hi n tài nguyên c a web đ c nén t server truy n qua HTTP requests i u s giúp ti t ki m b ng thông truy n t i d li u, t t ng t c đ t i xu ng c a trang web - Gi m thi u tài nguyên website V i tính n ng c a PageSpeed Insights, kích th c, dung l ng c a tài nguyên trang web gi m xu ng thông qua vi c minify Công c s thông báo đ ng i dùng thao tác gi m thi u tài nguyên trang web làm đ c u này, ng i dùng c n lo i b nh ng comment code ng th i xóa đo n code khơng c n thi t Sau đ t tên cho bi n hàm ng n h n đ h n ch t n tài nguyên Cu i xóa b dịng tr ng khơng dùng t i - Gi m th i gian ph n h i l i c a server Khi th i gian ph n h i c a máy ch nhanh h n 200 m/s, công c s phát hi n thông báo đ n ng i dùng Vi c c a ng i dùng lúc s d ng server ch t l ng h n v c ph n c ng l n k t n i internet đ gi m th i gian ph n h i l i c a server - Lo i b JavaScript nh m ch n hi n th n i dung Khi HTML khơng g i JavaScript bên ngồi ch n ph n hình đ u tiên c a trang, ch c n ng c a Pagespeed Insights s đ c kích ho t d a vi c render m t page đ c xây d ng DOM tree b ng cách phân tích d li u HTML M c đích nh m lo i b JavaScript gây tình tr ng ch n hi n th n i dung - Nâng cao l u vào b nh cache trình t web Khi ph n h i t server c a trang web không bao g m ch đ nh cache ho c tài nguyên đ c ch đ nh cache m t kho ng th i gian ng n, Pagespeed Insights s ti n hành thông báo đ ng i dùng ti n hành nâng cao l u vào b nh cache trình t web - T i u hóa kích th c c a hình nh T i u hóa hình nh m t thao tác c n thi t xây d ng m t trang web thân thi n d dàng ti p c n khách hàng Công c Pagespeed Insights s phát hi n thơng báo hình nh trang web ch a đ t yêu c u ng th i đòi h i ng i dùng ph i ti n hành t i u hóa nh m gi m b t dung l ng C n l u ý không nên gây nh h ng đ n ch t l ng hình nh 128 CH K t qu đánh giá tr NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T c c i thi n Hình 7.1: K t qu đánh giá tr c c i thi n máy tính 54 m Hình 7.2: K t qu đánh giá tr c c i thi n n tho i 13 m 129 CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T Quá trình c i thi n hi u su t 3.1 Phân ph i hình nh Hình 7.3: đ nh d ng m i nh d ng nh *.png làm ch m trình t i Nh n th y nh ng hình nh mà h th ng s d ng *.png, đ nh d ng s làm trình t i trang web ch m h n Do chúng tơi quy t đ nh thay đ i đ nh d ng nh sang *.wepb, đ th c hi n u s d ng công c Convertio -B c 1: Ta ch n “Ch n t p tin” t i lên nh ng hình nh c n chuy n đ i đ nh d ng Hình 7.4: S d ng công c Convertio đ chuy n đ i đ nh d ng hình nh 130 CH -B NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T c 2: Ta ch n đ nh d ng mu n chuy n đ i *.webp ch n “Chuy n đ i” Hình 7.5: Ch n đ nh d ng mu n chuy n đ i *.webp - B c 3: Ta t i v nh ng hình nh đ hình nh c c chuy n đ i đ nh d ng thay th cho nh ng Hình 7.6: T i xu ng hình nh đ c chuy n đ i đ nh d ng 131 CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T 3.2 Gi m JavaScript khơng dùng đ n Hình 7.7: D th a JavaScript làm ch m trình t i JavaScript m t nh ng tài nguyên ch n trang, có ngh a vi c hi n th HTML có th b ch n hay làm ch m b i Javascript Vi c t i file JavaScript n ng lúc có th làm ch m q trình t i trang, th c hi n bi n pháp sau: - Lo i b nh ng file JavaScript không dùng đ n - S d ng React.lazy() đ ch t i Component th c s c n thi t Nó giúp c i thi n hi u su t c a ng d ng, đ ng th i có th giúp ta ti t ki m r t nhi u tài ngun Hình 7.8: Ví d v vi c s d ng React.lazy() 132 CH 3.3 Gi m m c nh h NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T ng c a mã bên th ba Hình 7.9: Vi c t i mã JavaScript c a Plugin Messenger làm ch m trang web Nh n th y trang ch có s d ng Plugin Messenger đ h tr khách hàng có th nh n tin đ n fanpage c a Vi c t i đo n mã JavaScript c a Plugin Messenger vơ tình làm ch m q trình t i trang web Do chúng tơi s d ng thu c tính async đ cho phép t i mã JavaScript b t đ ng b T c vi c hi n th HTML s không b ch n cho đ n mã JavaScript c a Plugin Messenger hồn t t q trình t i xu ng 133 CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T Hình 7.10: S d ng thu c tính async đ t i b t đ ng b 3.4 M t s bi n pháp khác Ngoài theo đ xu t c a PageSpeed Insights chúng tơi cịn s d ng bi n pháp khác nh : - t chi u r ng chi u cao rõ ràng đ i v i ph n t hình nh đ gi m s thay đ i v b c c c i thi n hi u su t - Phân phát hình nh có kích th gian t i c phù h p đ ti t ki m d li u di đ ng c i thi n th i - Gi m nh ng quy t c không dùng đ n bi u đ nh ki u trì hỗn CSS ch a s d ng cho n i dung hình đ u tiên đ gi m s byte mà ho t đ ng m ng s d ng 134 CH NG 7: ÁNH GIÁ VÀ C I THI N HI U SU T K t qu đánh giá sau c i thi n Hình 7.11: K t qu đánh giá sau c i thi n máy tính 77 m Hình 7.12: K t qu đánh giá sau c i thi n n tho i 25 m 135 CH CH K t qu đ t đ 1.1 1.1.1 NG 8: T NG K T VÀ H NG 8: T NG K T VÀ H NG PHÁT TRI N NG PHÁT TRI N TÀI TÀI c i v i nhi m v đ tài i v i phân tích thi t k h th ng Phân tích đ c ch c n ng, v đ c use-case, t o đ c danh sách user story, v ERD, t o b ng quan h , xác đ nh đ c lu ng ch y c a h th ng b ng cách s d ng công c design UI framer 1.1.2 sau: 1.1.3 i v i hi n th c h th ng Chúng hi n th c đ c h th ng E-PAGESTORE v i ch c n ng nh Hi n th c đ c m t trang web chu n theo th ng m i n t Hi n th c lu ng đ ng nh p, đ ng ký chuyên nghi p, phù h p v i th tr ng Hi n th c đ c quy trình t o m t trang Landing Page d dàng, tr c quan cho ng i dùng T o đ c nhi u template đ p, đ y đ thông tin, đa d ng s l a ch n cho ng i dùng Ngồi có th tích h p đ c thêm vi t cho Landing Page theo c ch CMS Tích h p plugin Messenger cho c trang web c cho riêng t ng Landing Page c a ng i dùng Hi n th c đ c bi u đ hi n th l ng truy c p d li u khách hàng c a ng i dùng, giúp ng i dùng d qu n lý Landing Page c a Landing Page có th t i v , tái s d ng n n t ng khác Tích h p ph ng th c toán Momo cho vi c toán Plan Qu n lý d li u ng i dùng, template, Landing Page ch t ch b ng tài kho n admin Th ng kê l t s d ng template b ng tài kho n admin Hi n th c đ c quy trình t i, qu n lý template cho tài kho n nhân viên i v i ki m th , tri n khai đánh giá V ki m th , tri n khai đánh giá h th ng E-PAGESTORE: - Tìm hi u cơng c Google PageSpeed Insights c i ti n theo đ xu t Ki m th ph n m m b ng Katalon Studio Katalon TestOps Tri n khai máy ch Amazon Web Service có tên mi n https://epagestore.online 136 CH 1.2 NG 8: T NG K T VÀ H NG PHÁT TRI N TÀI i v i nhu c u th c ti n Hoàn thành đ c m t trang web th ng m i n t v i lo i s n ph m Landing Page đ c tri n khai máy ch có tên mi n Ng i dùng có th s d ng đ t o Landing Page cho riêng b ng lu ng x lý tr c quan, d hi u nhanh chóng Thêm vào đó, h th ng đ c hi n th c hoàn toàn b ng Ti ng Vi t, áp d ng ví n t Momo vào ng d ng đ toán tr c n G i email sau đ ng ký thành công, t o ni m tin cho ng i dùng Ngoài s n ph m đ c ki m th đánh giá b ng công c tin c y, đ c nhi u công ty s d ng nh Katalon, PageSpeed Insight 1.3 i v i c s lý thuy t cơng ngh Tìm hi u, b sung đ c k n ng l p trình web nh : Xây d ng trang web theo mơ hình MVC, cách t o server, tri n khai trang web, giao ti p qua api gi a front-end back-end, cách t ch c d li u c a PostgreSQL Tìm hi u, trau d i đ c nhi u công ngh m i ví d nh : + Front-end: React Js, API, … + Back-end: Java Spring Boot, … + Database: PostgreSQL + S d ng Postman đ test API tr c s d ng + S d ng Amazon Web Services đ làm server ánh giá 2.1 u m Qua trình dài hi n th c, E-PAGESTORE đ c hoàn thành v i u m nh sau: - T o đ c Landing Page nhanh, hồn ch nh, có nh ng ch c n ng c b n m t cách d dàng, tr c quan, không c n ph i hi u bi t nhi u v công ngh c tri n khai b ng Ti ng Vi t, d dàng s d ng v i ng i dùng Vi t Nam - Lu ng tri n khai h p lý, chuyên nghi p - Tích h p đ c v i d ch v khác nh : đ ng nh p b ng Google Account, g i email b ng EmailJS, toán tr c n b ng ví n t Momo - Phân chia, t o c s d li u, phân quy n h p lý giúp cho vi c qu n lý d dàng ã đ c ki m th b ng h sinh thái Katalon ã đ c đánh giá b ng PageSpeed Insight 137 CH 2.2 Nh NG 8: T NG K T VÀ H NG PHÁT TRI N TÀI c m Bên c nh nh ng u m, h th ng v n m t s nh c m: - Giao di n trang web nhi u thi u sót, ch a b t m t đ i v i ng i dùng - Do vi c h ng t i ng i dùng nh ng khách hàng nh , c n m t trang web đ n gi n, v y m t s ch c n ng đ c đ n gi n hố nh m m c đích thân thi n v i ng i dùng h n - Vi c ngh nhi u ch c n ng d n đ n phân tích h th ng g p ph i nhi u xung đ t c n gi i quy t, d n đ n ph i l c b m t s tính n ng hay, nhiên nhóm s c g ng phát tri n ti p t ng lai H ng phát tri n m r ng V i nh ng u m nh c m trên, nhóm đ xu t đ c h ng phát tri n EPAGESTORE nh sau: - V i m c tiêu ban đ u, nhóm s c n ph i phát tri n thêm nh ng tính n ng t t h n vi c thi t k m t Landing Page nh : liên k t link, di chuy n kh i d li u, chèn thêm nh, … - T i u code, t ng hi u su t, responsive t t c thi t b - T o thêm nhi u Landing Page đ p, h p th hi u xu th - Hi n th c đ c m c tiêu giúp E-PAGESTORE mang tính c ng đ ng, m i ng i có th đóng góp, chia s template v i 138 DANH M C TÀI LI U THAM KH O DANH M C TÀI LI U THAM KH O [1] L p trình web c b n, CSS, ReactJS , HTML URL: https://www.w3schools.com/ (Truy c p l n cu i: 09/07/2021) [2] Blog th o lu n, gi i thích v cơng ngh , h ng d n l p trình ti ng vi t URL: https://viblo.asia/ (Truy c p l n cu i: 09/07/2021) [3] Trang web t o landing page n i b t URL: https://ladipage.vn/ (Truy c p l n cu i: 09/07/2021) [4] Trang web t o website n i b t URL: https://wordpress.com/ (Truy c p l n cu i: 09/07/2021) [5] Trang web buôn bán themes templates n i b t URL: https://themeforest.net/ (Truy c p l n cu i: 09/07/2021) [6] ReactJS URL: https://reactjs.org/ (Truy c p l n cu i: 09/07/2021) [7] Spring boot URL: https://spring.io/projects/spring-boot/ (Truy c p l n cu i: 09/07/2021) [8] PostgreSQL URL: https://www.postgresql.org/ (Truy c p l n cu i: 09/07/2021) [9] Amazon Web Services URL: https://aws.amazon.com/ (Truy c p l n cu i: 09/07/2021) [10] Postman URL: https://www.postman.com/ (Truy c p l n cu i: 09/07/2021) [11] Momo payment URL: https://developers.momo.vn/#/docs/aiov2/ (Truy c p l n cu i: 09/07/2021) [12] EmailJS URL: https://www.emailjs.com (Truy c p l n cu i: 09/07/2021) [13] Github URL: https://github.com (Truy c p l n cu i: 09/07/2021) [14] Katalon URL: https://www.katalon.com (Truy c p l n cu i: 09/07/2021) 139 ... n! TÓM T T TÓM T T E- Pagestore m t trang web cung c p web page template l nh v c kinh doanh tr c n E- Pagestore t p trung vào vi c cung c p gi i pháp cho s n ph m Landing Page Trong chi n d ch qu... n án: E- PAGESTORE: Xây d ng h th ng cung c p web page cho c a hàng kinh doanh tr c n theo mơ hình B2C Nhi m v (u c u v n i dung s li u ban đ u): E- PAGESTORE m t h th ng cung c p web page cho... true: Landing Page có s d ng tính n ng vi t HasMessenger false: Landing Page không s d ng plugin Messenger true: Landing Page có s d ng plugin Messenger MessengerCode Mã th c thi cho plugin Messenger