Xây dựng WEBSITE bán hàng với dữ liệu lớn

Ở đồ án này, chúng em xâydựng một website thương mại điện tử hướng tới mặt hàng chính là laptop, tuy nhiên với sự cải tiến về công nghệ và kĩ thuật đã được xây dựng từ đồ án 1, kèm theo

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

VƯƠNG THỊNH ĐẠT – 17520343 ĐINH HOÀNG NHI – 17520853

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE BÁN HÀNG VỚI DỮ LIỆU LỚN

GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH HỒ THỊ MỘNG TRINH

TP HỒ CHÍ MINH, 2021

LỜI MỞ ĐẦU

Ngày nay, nhờ có kĩ thuật số cuộc sống của con người được cải thiện rất nhiều,nhanh chóng và thuận tiện hơn Thương mại điện tử đang có xu hướng phát triển mạnhqua từng ngày Chúng ta có thể đặt những món hàng mình yêu thích ngay tại nhà chỉtrong vòng vài phút bằng những ứng dụng mua hàng trên điện thoại hoặc thông qua cácwebsite bán hàng online Từ đó có thể thấy nó giúp chúng ta tiết kiệm được khối lượnglớn thời gian để có thể tập trung vào những công việc khác

Từ đó có thể thấy được các lợi ích mà một website thương mại điện tử mang lại sẽtạo thành một thế mạnh để phát triển nền kinh tế đất nước Ở đồ án này, chúng em xâydựng một website thương mại điện tử hướng tới mặt hàng chính là laptop, tuy nhiên với

sự cải tiến về công nghệ và kĩ thuật đã được xây dựng từ đồ án 1, kèm theo việc sẽ tậptrung vào lượng dữ liệu thực tế lớn của một số trang thương mại điện tử

Đồ án vẫn sẽ giữ lại những chức năng quan trọng của một website bán hàngonline, tuy nhiên sẽ tập trung cải thiện hơn về mặt công nghệ sử dụng cũng như khốilượng dữ liệu đầu vào và nghiên cứu cách tối ưu khi xử lí dữ liệu

Nhóm cũng xin gửi lời cảm ơn chân thành nhất đến cô Huỳnh Hồ Thị Mộng Trinh

vì đã hỗ trợ nhiều ý tưởng và kĩ thuật trong quá trình phát triển đồ án này

Chúng em xin chân thành cảm ơn!

Nhóm thực hiện đồ án.

MỤC LỤC

Chương 1 MỞ ĐẦU 9

1.1 Lí do chọn đề tài 9

1.2 Mục đích chọn đề tài 9

1.3 Đối tượng và phạm vi nghiên cứu: 10

1.3.1 Đối tượng nghiên cứu 10

1.3.2 Phạm vi nghiên cứu 10

Chương 2 TỔNG QUAN 11

2.1 Một số vấn đề còn tồn tại từ đồ án 1 11

2.2 Vấn đề nghiên cứu 11

Chương 3 NGHIÊN CỨU 12

3.1 Các công nghệ sử dụng để cải tiến ứng dụng 12

3.1.1 Java Spring Framework 12

3.1.2 ReactJS Library 12

3.1.3 Redis 12

3.1.4 MariaDB 12

3.1.5 Python 3 13

3.2 Kĩ thuật lấy nguồn dữ liệu 13

3.3 Hosting ứng dụng 13

3.4 Một số kĩ thuật tối ưu trong việc xử lí dữ liệu 14

Chương 4 CÁCH THỰC HIỆN 14

4.1 Phân tích các công nghệ và cách ứng dụng vào đồ án 14

4.2 Kiến trúc hệ thống: 15

4.2.1 Kiến trúc tổng quan: 15

4.2.2 Mô tả kiến trúc: 17

4.3 Kiến trúc mã nguồn: 18

4.3.1 Link source code đồ án nhóm: 18

https://github.com/nhidh99/uitJ2EE/tree/master/laptop-store 18

4.3.2 Cấu trúc mã nguồn phía client-side: 18

4.3.3 Cấu trúc mã nguồn phía server-side: 18

4.4 Cách crawl dữ liệu từ một website: 19

4.4.1 Cấu trúc của module laptop-store-crawl: 19

4.4.2 Phân tích bài toán: 19

4.5 Kiểm thử RESTful Web Service được tạo: 20

4.5.1 Kiểm thử RESTful Web Service bằng Postman: 20

4.5.2 Thao tác trên Website: 22

4.5.3 Ghi chú 23

4.6 Phương pháp xử lí một số bài toán cơ bản: 24

4.6.1 Phân quyền người dùng truy cập trang: 24

4.6.2 Bảo mật và xác thực thông tin người dùng: 24

4.6.3 Tối ưu hóa tốc độ tải trang: 24

4.6.4 Tối ưu hóa công cụ tìm kiếm (SEO): 24

4.6.5 Bài toán xử lí số lượng: 25

4.6.6 Xác thực địa chỉ tại Việt Nam: 25

4.6.7 Nguồn dữ liệu mẫu: 25

4.6.8 Tối ưu dữ liệu: 25

4.7 Chức năng của các thành phần giao diện: 26

4.7.1 Mục lục điều hướng: 26

4.7.2 Thanh tìm kiếm theo tên: 26

4.7.3 Bộ lọc tìm kiếm: 26

4.7.4 Biển quảng cáo: 28

4.7.5 Phân mục sản phẩm 28

4.7.6 Mô tả tổng quan sản phẩm: 29

4.7.7 Thông tin chi tiết sản phẩm: 31

4.7.8 Danh mục sản phẩm tương tự: 32

4.7.9 Mục hỏi đáp sản phẩm: 32

4.7.10 Mục đánh giá sản phẩm: 34

4.7.11 Danh mục giỏ hàng: 35

4.7.12 Màn hình tạo đơn đặt hàng: 36

4.7.13 Mục lục điều hướng quản lí thông tin cá nhân: 37

4.7.14 Các màn hình quản lí thông tin cá nhân: 38

4.7.15 Các màn hình quản lí thông tin cửa hàng: 42

Chương 5 KẾT LUẬN 46

5.1 Các kết quả đạt được 46

5.2 Nhược điểm và hạn chế 47

Chương 6 HƯỚNG PHÁT TRIỂN 48

6.1 Hướng phát triển về mặt tính năng: 48

6.2 Hướng phát triển về mặt kĩ thuật: 48

Chương 7 TÀI LIỆU THAM KHẢO 49

DANH MỤC HÌNH

Hình 1 Kiến trúc luồng xử lí giữa client-side và server-side 16

Hình 2 ERD Cơ sở dữ liệu cho đồ án 17

Hình 3 Kiến trúc xử lí giữa client và server của một microservice 18

Hình 4 URL Endpoint và Content-Type header 21

Hình 5 Request body theo chuẩn JSON 21

Hình 6 Bearer Token JWT 21

Hình 7 Response khi request thành công 22

Hình 8 Database sau khi thực hiện request 22

Hình 9 Response khi request Unauthorized 22

Hình 10 Các trường thông tin được nhập 23

Hình 11 Popup thông báo khi yêu cầu không thể thực hiện 22

Hình 12 Danh sách địa chỉ đã bao gồm địa chỉ vừa tạo khi xử lí yêu cầu thành công 24

Hình 13 Phần code thực hiện POST request sử dụng Axios 23

Hình 14 Mục lục điều hướng 26

Hình 15 Thanh tìm kiếm theo tên 26

Hình 16 Bảng lọc tìm kiếm 27

Hình 17 Biển quảng cáo 29

Hình 18 Phân mục sản phẩm 290

Hình 19 Mô tả tổng quan sản phẩm 30

Hình 20 Thông tin chi tiết sản phẩm 32

Hình 21 Danh mục sản phẩm tương tự 33

Hình 22 Mục hỏi đáp sản phẩm 34

Hình 23 Mục đánh giá sản phẩm 35

Hình 24 Danh mục giỏ hàng 36

Hình 25 Màn hình tạo đơn đặt hàng 37

Hình 26 Mục lục điều hướng quản lí thông tin cá nhân 38

Hình 27 Màn hình quản lí thông tin người dùng 39

Hình 28 Màn hình quản lí sổ địa chỉ giao hàng 39

Hình 29 Màn hình quản lí mật khẩu 39

Hình 30 Màn hình danh sách đơn hàng 39

Hình 31 Màn hình theo dõi trạng thái đơn hàng 40

Hình 32 Màn hình theo dõi các cột mốc 41

Hình 33 Màn hình quản lí danh sách các đơn hàng 43

Hình 34 Màn hình quản lí danh sách laptop 44

Hình 35 Màn hình quản lí danh sách quà khuyến mãi 45

Hình 36 Màn hình quản lí đánh giá 46

Hình 37 Màn hình quản lí hỏi đáp và trả lời 47

TÓM TẮT ĐỒ ÁN

 Đồ án tập trung nghiên cứu hai vấn đề chính: cách thiết kế mô hình ứng dụng web (ởcấp độ cơ bản) và xử lí dữ liệu với khối lượng data khá lớn từ các nguồn dữ liệu thựctế

 Nhóm đã tiếp cận thông qua việc sử dụng và phân tích từ các sản phẩm thực tế như các

trang web thương mại điện tử lớn như thegioididong và Tiki, đồng thời tìm hiểu thêm

về một số yêu cầu kĩ thuật cần có trong trang web bán hàng online và xu hướng pháttriển web hiện đại, cộng thêm những kiến thức đã được cung cấp từ các thầy cô khoaCông nghệ phần mềm để lên kế hoạch thực hiện và triển khai thực hiện đề tài này

 Đồ án đã có một số thay đổi và cải tiến về cấu trúc, code base cũng như công nghệ sửdụng so với đồ án 1, tuy nhiên các công nghệ chủ đạo là Java và ReatJS vẫn giữnguyên

 Sau hơn 3 tháng nghiên cứu, phân tích, tìm hiểu và bảo trì, sản phẩm của nhóm đã cónhững cái tiến đáng kể về mặt xử lí khối lượng dữ liệu khá lớn và vẫn có khả năngscale với lượng data lớn hơn từ 5 – 10 lần nhưng vẫn đảm bảo hiệu năng, đây cũng cóthể xem như là một thành công trong việc xây dựng đồ án của nhóm

 Trong quá trình tìm hiểu và phát triển đồ án dĩ nhiên không thể tránh khỏi những thiếusót, nhóm cũng rất mong có thể nhận được sự đánh giá và góp ý từ các thầy cô để cóthêm kinh nghiệm trong việc phát triển phần mềm cần ứng dụng kiến thức của những

kĩ thuật này trong tương lai

Chương 1 MỞ ĐẦU

1.1 Lí do chọn đề tài

 Website thương mại điện tử phục vụ cho việc mua sắm trực tuyến không

còn quá xa lạ trong thời đại công nghệ ngày nay Tuy nhiên việc xây dựngmột trang web thương mại điện tử đòi hỏi khá nhiều chi phí thực hiện: nếu

sử dụng các template phục vụ tạo sẵn sẽ bị hạn chế về nhiều tính năng,chức năng, hiệu suất trang web và chi phí duy trì; mặt khác, nếu cần xâydựng một trang web theo ý muốn lại đòi hỏi nhiều về kĩ thuật và chi phíphát triển, cũng như áp dụng nhiều công nghệ mới cho việc phát triển mộtwebsite bán hàng thương mại điện tử

 Các bài toán về việc xây dựng một trang web bán hàng online luôn đầy tính thử thách và hấp dẫn với các lập trình viên, đặc biệt là về mặt kĩ

thuật lập trình, song song đó nếu thực hiện tốt, sản phẩm có thể trở thànhkhung mẫu (template) tùy biến theo từng đối tượng khách hàng

 Trong đồ án môn học này, kết hợp cùng các kiến thức đã học về quy

trinh, tìm hiểu nghiệp vụ, công nghệ phát triển phần mềm và đặc biệt là kĩthuật xây dựng một website thương mại điện tử, đồng thời nhằm cải thiệnnhững thiếu sót trong đồ án 1 và định hướng phát triển của giảng viênhướng dẫn Nhóm đã quyết định xây dựng một website bán hàng với dữliệu lớn với nhiều cải tiến hơn về mặt kĩ thuật, đồ án 2 cũng có thể gọi làmột dự án bảo trì và nâng cấp từ đồ án 1

1.2 Mục đích chọn đề tài

 Về tính kĩ thuật, việc bảo trì và nâng cấp một website khi lượng dữ liêu

đầu vào lớn là điều bắt buộc cần thực hiện so với một website chỉ xử lílượng dữ liệu nhỏ ban đầu; đồng thời sẽ có những cải tiến và áp dụng nhiều

kĩ thuật hơn khi khối lượng dữ liệu tăng cao…

 Về mặt chức năng, website thương mại điện tử đòi hỏi cần thực hiện rất

nhiều bài toán nghiệp vụ cần vận dụng các kiến thức về phân tích và xây

dựng phần mềm, đồng thời còn yêu cầu phát triển tính bảo mật, tối ưu hóatrang web, xử lí dữ liệu, và hơn hết là đảm bảo tốc độ tải trang không quálâu với lượng dữ liệu lớn

 Từ đó, trong quá trình thực hiện đồ án, nhóm sẽ thực hiện bảo trì được

một website bán hàng thương mại điện tử với dữ liệu lớn có đủ khả năngứng dụng thực tiễn lẫn nghiên cứu và áp dụng các công nghệ mới trong xuthế phát triển web hiện đại

1.3 Đối tượng và phạm vi nghiên cứu:

1.3.1 Đối tượng nghiên cứu

 Quy trình kiến trúc ứng dụng web và một số công nghệ sử dụng khi khối lượng

dữ liệu đầu vào lớn và cần chịu tải cao

 Một số kĩ thuật xử lí dữ liệu trong website thương mai điện tử nhằm tối ưu hiệusuất trang web trong việc xử lí các yêu cầu người dùng

1.3.2 Phạm vi nghiên cứu

 Vì đồ án sẽ tập trung vào việc bảo trì, nâng cấp cũng như có sự thay đổi về mặt

dữ liệu, nên phần lớn các nội dung trình bày sẽ thiên nhiều về hướng kĩ thuật vàkiến trúc

 Phần giao diện của website được xây dựng dựa trên bộ thư viện Javascript doFacebook phát hành là ReactJS – một trong các framework phát triển giao diệnweb (front-end) phổ biến nhất hiện tại

 Phần server được xây dựng trên công nghệ Java Spring với nhiều công nghệ hỗtrợ đi kèm khác phục vụ rất tốt cho việc phát triển ứng dụng web như SpringMVC, Spring Security, Spring Data…

 Ngoài ra nhóm còn nghiên cứu một số kĩ thuật, công nghệ cho website khi có

dữ liệu đầu vào lớn

Chương 2 TỔNG QUAN

2.1 Một số vấn đề còn tồn tại từ đồ án 1

 Công nghệ sử dụng phía backend đã cũ và chỉ phù hợp với các hệ thống

rất lớn (Microservice, Karaf, Kafka…) và tính hạ tầng khá sâu, phụ thuộcnhiều vào các công nghệ lỗi, nên đòi hỏi nhiều nỗ lực và chi phí bảo trì,nâng cấp trong việc thêm mới tính năng hoặc thay đổi

 Kiến trúc phía server vẫn còn sơ sài, còn một số lỗ hổng và không tốt cho

việc scale khi có nhiều yêu cầu, tính năng cũng như dữ liệu

 Công nghệ sử dụng phía frontend cần cải thiện về code base cũng như

cần thay đổi một số công nghệ sử dụng để có thể tối ưu hiệu suất tải tranghơn

 Lượng dữ liệu đầu vào trong vẫn có khối lượng nhỏ, mang tính thử

nghiệm để vận hành website, chưa có thể đảm bảo tính ứng dụng thực tiễncao khi được sử dụng trong thực tế

 Các kĩ thuật áp dụng chỉ tập trung vào hoàn thiện tính năng nhanh nhất

nhưng chưa tính đến việc scale up khi khối lượng dữ liệu và xử lí tăng cao,cũng như chưa thể deploy để hiểu rõ hơn về hiệu năng trong môi trườngthực tế

2.2 Vấn đề nghiên cứu

 Các công nghệ áp dụng để nâng cấp và bảo trì sản phẩm từ đồ án 1.

 Kĩ thuật lấy nguồn dữ liệu và tạo các bộ dữ liệu lớn và phương thức tối ưu

khi dữ liệu tăng cao

 Hosting ứng dụng và ảnh hưởng của chúng đến với hiệu suất xử lí dữ liệu

và hiệu năng trang web

 Một số kĩ thuật tối ưu trong việc xử lí dữ liệu để phục vụ các yêu cầu tài

nguyên từ phía người dùng



Chương 3 NGHIÊN CỨU

3.1 Các công nghệ sử dụng để cải tiến ứng dụng

3.1.1 Java Spring Framework

 Công nghệ, hoặc cũng có thể xem là một hệ sinh thái để xây dựng ứng dụngphân tán, nhưng phổ biến nhất vẫn được sử dụng trong phát triển ứng dụng web

 Mã nguồn mở, cộng đồng lớn và là nền tảng đã trưởng thành, cung cấp rất nhiều

bộ Integration API cho phát triển server, backend

 Framework đáng tin cậy và phổ biến nhất trong nền tảng Java cho đến thời điểmhiện tại

 Công nghệ phổ biến nhất hiện tại trong cache nhằm tăng hiệu suất đọc dữ liệu

 Khả năng cải thiện tốc độ đọc có thể tăng từ 3 – 10 lần, rất phù hợp với các ứngdụng thường xuyên lấy data từ server, đặc biệt là website thương mại điện tử,blog hoặc tin tức

3.1.4 MariaDB

 Cơ sở dữ liệu quan hệ mã nguồn mở, được phát triển dựa trên phần lớn cấu trúccủa MySQL, tuy nhiên đã có nhiều cải thiện hơn về mặt hiệu năng

 Hỗ trợ số connection lớn, storage engine nhiều và tốc độ đọc ghi dữ liệu tốttrong cơ sở dữ liệu quan hệ khá tốt và liên tục được cải thiện.

3.1.5 Python 3

 Ngôn ngữ lập trình được hỗ trợ nhiều thư viện mã nguồn mở rất phù hợp về cáckhía cạnh liên quan đến việc xử lí dữ liệu, cú pháp đơn giản và cộng đồng pháttriển đông đảo

 Tuy nhiên, trong phạm vi đồ án, nhóm chỉ sử dụng python về mảng crawl dữliệu từ các website thương mại điện tử

3.2 Kĩ thuật lấy nguồn dữ liệu

 Hai nguồn dữ liệu chính được lấy từ hai website thegioididong và Tiki

 Các thông tin sản phẩm của Tiki được thiết kế giao tiếp thông qua RestfulAPI và không bị giới hạn trong số lượng request vừa đủ để thực hiện crawl

dữ liệu, nhóm có thể gửi các request để lấy thông tin hình ảnh một sốlaptop, đánh giá, câu hỏi

 Tuy nhiên nguồn thông số dữ liệu chính vẫn đến từ thegioididong, nhưngchỉ được thiết kế dưới các công nghệ web lõi là HTML, CSS và VanillaJSnên nhóm đã thực lấy dữ liệu thông qua các automation step bằng Selenium

và trích xuất dữ liệu cho toàn bộ sản phẩm, thông số của các laptop trongthegioididong

 Ứng dụng các thư viện hỗ trợ trong Python 3, thực hiện crawl dữ liệu bằngSelenium với website thegioididong và Request với website Tiki

3.3 Hosting ứng dụng

 Để giảm thiểu thời gian trong việc tìm hiểu hosting ứng dụng và nghiên cứu

về hosting, server, nhóm đã thực hiện deploy các thành phần của ứng dụnglên các nền tảng đám mây do các nhà phát hành đáng tin cậy cung cấp nhưHeroku, Azure

 Tuy nhiên do một số hạn chế về mặt kinh phí và hỗ trợ từ phía nhà cungcấp, nhóm chỉ có thể sử dụng các gói hosting giá rẻ và phải thực hiện trêncác server đặt tại Mĩ, phần nào sẽ ảnh hưởng đến tốc độ của ứng dụng.

 Khi sử dụng các cloud service hosting từ các nhà phát hành lớn sẽ được hỗtrợ theo dõi metric rất tốt, giúp có cái nhìn tổng quan hơn về sản phẩmtrong thực tế

3.4 Một số kĩ thuật tối ưu trong việc xử lí dữ liệu

 Cài đặt index cho các trường trong table

 Caching dữ liệu phía server và người dùng

 Tối ưu hóa dung lượng và hiển thị hình ảnh trên các trang màn hình thíchhợp

 Kĩ thuật phân trang nhằm giảm thiểu việc tải các dữ liệu quá lớn không cầnthiết

 Tối ưu hóa frontend bằng việc hạn chế quá nhiều CSS và các thư viện giaodiện

Chương 4 CÁCH THỰC HIỆN

4.1 Phân tích các công nghệ và cách ứng dụng vào đồ án

 Redis và MariaDB: các ưu thế về công nghệ đã được mô tả tại mục 3.1.

 Java Spring Framework: hỗ trợ rất nhiều các API cho việc phát triển ứng dụng

phân tán, cụ thể nhóm đã tìm hiểu thực hiện ứng dụng các thư viện sau:

 Spring Boot: cung cấp môi trường để vận hành các thư viện trong

Spring

 Spring MVC: sử dụng @RestController nhằm tạo các controller xử

lí yêu cầu HTTP Request từ phía người dùng, đồng thời cũng cungcấp template để xử lí lỗi rất thuận tiện

 Spring Data: cung cấp các syntax PSQL, HQL, transaction template

và annotation do Hibernate cung cấp, rất thuận tiện và tường minh

trong việc cài đặt các phương thức giao tiếp với cơ sở dữ liệu vàrollback khi cần.

 Spring Security: thực hiện bảo mật quyền truy cập các URL và

HTTP request thông qua việc xác thực người dùng

 Các thư viện integrate khác trong Java: Lombok (giảm boiler plate

code trong việc define các Model, DTO), JWT, BCrypt, RedisCaching

 ReactJS Library: hỗ trợ tạo giao diện và các component rất tốt, nhóm đã tìm

hiểu và chọn ra một số công nghệ, thư viện có thể xem như là best-practicecho việc phát triển:

 React Hook: các API do React cung cấp nhằm tạo tính “động” của

một trang web như thay đổi trạng thái, lưu trữ thuộc tính, hàm

 Redux Toolkit: thư viện cung cấp các API quản lí State

Management trong Redux được đơn giản hóa và thuận tiện hơn choviệc phát triển

 Styled Component và Tailwind Css: các framework CSS có thể tích

hợp với React nhằm viết CSS nhanh và rõ ràng hơn

 Các thư viện khác: Axios (dùng cho các giao thức HTTP) và các

component giao diện

 Python 3: hỗ trợ nhiều thư viện cho việc phân tích và crawl dữ liệu như

Selenium, Requests, BeautifulSoup… với cú pháp đơn giản và dễ triển khai

4.2 Kiến trúc hệ thống:

4.2.1 Kiến trúc tổng quan:

 Phần giao diện (Frontend): Xây dựng giao diện dựa trên thư viện ReactJS

nhằm tạo các web component nhằm hiện thị thông tin và giúp người dùng tươngtác với website, các yêu cầu của người dùng sẽ được gọi thông qua WebServices do phía server cung cấp để xử lí nghiệp vụ

 Phần server (Backend): Ứng dụng Spring MVC định nghĩa các Web Services

cho việc xử lí yêu cầu nghiệp vụ dựa trên các giao thức HTTP và endpoint URL

qua RESTful API Sau đó các Web Services sẽ được khởi tạo dựa trên phươngthức triển khai mô hình Multi Service Instances per Host Các phần code xử línghiệp vụ sẽ được cài đặt tại các tầng dưới nơi các Controller sẽ gọi đến.

 Mô hình kiến trúc chính của đồ án dựa trên 2 mẫu thiết kế (Design Pattern)

chính là MVC (Model – View – Controller) kết hợp 3-layers Pattern

 Cơ sở dữ liệu cho đồ án sử dụng hệ quản trị cơ sở dữ liệu MariaDB.

Hình 1 Kiến trúc luồng xử lí giữa client-side và server-side

Hình 2 ERD Cơ sở dữ liệu cho đồ án

4.2.2 Mô tả kiến trúc:

 Phía client đảm nhiệm việc hiển thị các thông tin của website như danh sách

sản phẩm, chi tiết, màn hình quản lí và các thành phần hiển thị để người dùngthao tác như nút nhấn, hình chọn…

 Phía server gồm các RESTful Web Service được cung cấp bởi Tomcat (do

Spring Boot) với máy chủ là localhost nhằm xử lí yêu cầu nghiệp vụ, truy cậpthông qua các URL Endpoint và Allowed Method (các phương thức HTTPđược cho phép)

 Các thông tin, thao tác xử lí ở phía Client sẽ thông qua API Caller gọi đến

RESTful Web Service được cung cấp bởi Tomcat

 Các implement của Web Service sử dụng các Repository để thao tác với database, xử lí nghiệp vụ dữ liệu theo yêu cầu của người dùng.

 Service sau khi thực hiện yêu cầu sẽ trả về các thông tin cần thiết lại client để

tiếp tục xử lí nghiệp vụ thông qua response body, header và status code

Hình 3 Kiến trúc xử lí giữa client và server của một microservice

4.3 Kiến trúc mã nguồn:

4.3.1 Link source code đồ án nhóm:

https://github.com/nhidh99/uitJ2EE/tree/master/laptop-store

4.3.2 Cấu trúc mã nguồn phía client-side:

 Thành phần môi trường yêu cầu: package manager npm.

 Cách chia cây thư mục, components được chia theo kiểu đệ quy thư mục: một

màn hình sẽ gồm các thành phần và màn hình con, màn hình con cũng gồm cácthành phần và màn hình con khác… cứ thế đến khi màn hình đã được chia nhỏnhất đến mức có thể đảm bảo đủ đơn giản

 Phần giao diện thực hiện việc khởi tạo các UI-component nhằm hiển thị các

thông tin (hình ảnh, bảng, thông số…), hoặc giúp người dùng tương tác (nútnhấn, đường dẫn…)

 Đối với việc tương tác với phía server side, thư mục /service/api sẽ chứa các API calller sử dụng thư viện Axios đảm nhận việc gọi đến các RESTful Web

Services do phía server-side cung cấp, xử lí các request, response và handleerror giữa client và server

4.3.3 Cấu trúc mã nguồn phía server-side:

4.3.3.1 Thành phần môi trường yêu cầu:

 Java Spring Framework

 Tomcat Server

 Project Manager Tool Maven version 3.6.3

 Java SDK version 11

 Docker Desktop (không bắt buộc)

4.3.3.2 Cấu trúc các module project Java:

 laptop-store-api: gồm các thành phần kết nối trung gian trong việc xử lí dữ

liệu, cụ thể là trong các trường hợp: giao tiếp giữa ứng dụng Java vớiDatabase MariaDB, truy xuất thông tin từ request được client gửi đến server,trả về response cần thiết từ server lại cho client

 laptop-store-application:.gồm các file config cho website, server Redis, và

sản phẩm đã được export để deploy

 laptop-store-repository: truy xuất và thao tác với cơ sở dữ liệu nhờ công

nghệ Spring Data JPA, tập trung vào việc lưu trữ và truy vấn dữ liệu

 laptop-store-rest: cài đặt và cung cấp các RESTful Web Services – phương

thức giao tiếp giữa client-side và server-side

 laptop-store-security: tiền xử lí các request được gửi từ client đến server

nhằm thực hiện xác thực người dùng và xác minh quyền hạn truy cập tàinguyên, đảm bảo tính bảo mật của request trước khi thực hiện các nghiệp vụcần thiết

 laptop-store-service: cài đặt lớp trung gian của rest service và repository

(DAO)

4.4 Cách crawl dữ liệu từ một website:

 Trong phần này, nội dung sẽ tập trung vào việc sử dụng Python 3 để crawl

dữ liệu cần thiết từ website Tiki và thegioididong Kĩ thuật lấy nguồn dữliệu đã được mô tả tại mục 3.2

4.4.1 Cấu trúc của module laptop-store-crawl:

 addresses: tạo ngẫu nhiên các địa chỉ cho một user.

 base: chứa các file crawl dữ liệu của các laptop, image và các promotions.

 files: chứa các file dữ liệu dạng txt.

 orders: tạo ngẫu nhiên các order của từng giai đoạn (đã giao, huỷ, đóng gói,

…)

 questions: crawl dữ liệu bằng selenium từ website thegioididong, sau đó insert

vào database các questions ngẫu nhiên

 ratings: tạo ngẫu nhiên các ratings cho từng laptops.

 users: đăng ký các tài khoản ngẫu nhiên.

4.4.2 Phân tích bài toán:

 Dữ liệu có thể lấy được bằng cách gửi các request đến server của website Tikihoặc từ file html của website thegioididong

 Sau khi crawl dữ liệu, ghi dữ liệu vào các file excel hoặc file text (txt)

 Từ các file dữ liệu đã được tạo, dùng Python 3 để thêm dữ liệu vào database

4.5 Kiểm thử RESTful Web Service được tạo:

4.5.1 Kiểm thử RESTful Web Service bằng Postman:

 Authorization Header chứa Bearer JWT của người dùng thõa mãn quyền

hạn thực hiện

 Content-Type Header đúng kiểu “application/json”.

Hình 4 URL Endpoint và Content-Type header

Hình 5 Request body theo chuẩn JSON

Hình 1 Bearer Token JWT

 Kết quả sau khi thực hiện request: server trả về code 201 (Created), thông báo rằng

dữ liệu địa chỉ đã được tạo thành công

Hình 7 Response khi request thành công

 Kiểm tra dữ liệu trong database MariaDB:

Hình 8 Database sau khi thực hiện request

4.5.1.2 Trường hợp request không hợp lệ:

 Request không hợp lệ có thể có nhiều trường hợp như: JWT hết hạn

(expire), người dùng không có quyền hạn thực hiện request, JWT không hợp

lệ, server không ổn định, database lỗi, kiểu dữ liệu đầu vào không phù hợp,

4.5.2 Thao tác trên Website:

 Sau khi người dùng đăng nhập và đến trang tạo địa chỉ giao hàng mới, thực hiệncác thao tác sau:

 Điền đầy đủ các trường thông tin hợp lệ vào các input tương ứng

 Nhấn button “Lưu địa chỉ để thực hiện lưu”

 Nếu tạo địa chỉ thành công, trang web sẽ redirect về trang danh sách địa chỉ vừachứa địa chỉ mà người dùng vừa tạo mới

 Nếu có lỗi xảy ra, một popup sẽ hiện lên thông báo lỗi và địa chỉ không đượctạo

Hình 2 Các trường thông tin được nhập

Hình 3 Popup thông báo khi yêu cầu không thể thực hiện

Hình 12 Danh sách địa chỉ đã bao gồm địa chỉ vừa tạo khi xử lí yêu cầu thành công

Hình 13 Phần code thực hiện POST request sử dụng Axios đã config base URL là /api

4.5.3 Ghi chú

 Toàn bộ mục 4.5 tập trung vào việc kiểm thử một Microservice, cụ thể làRESTful Web Service, đối với các nghiệp vụ khác, việc tiếp cận, thiết kế vàtriển khai cũng sẽ theo trình tự tương tự như trên

4.6 Phương pháp xử lí một số bài toán cơ bản:

4.6.1 Phân quyền người dùng truy cập trang:

 Thiết kế database chứa trường lưu trữ vai trò người dùng (khách mua hàng hoặcquản lí)

 Khi người dùng đăng nhập, client thực hiện gửi request yêu cầu lấy thông tinngười dùng, trong đó sẽ chứa role người dùng, từ đó client sẽ giới hạn các page

mà người dùng đó có thể truy cập

4.6.2 Bảo mật và xác thực thông tin người dùng:

 Phần xác thực thông tin người dùng đã được mô tả tại mục 4.6.3 sử dụng JWT

 Bảo mật thông tin người dùng: mật khẩu người dùng sẽ không lưu trực tiếptrong database mà sẽ nhờ thư viện third-party BCrypt do java cung cấp để lưuchuỗi mật khẩu đã được mã hóa

 Các thao tác so sánh mật khẩu bản chất chỉ so sánh với chuỗi mã hóa, để tránhtrường hợp database bị chiếm quyền kiểm soát

4.6.3 Tối ưu hóa tốc độ tải trang:

 Kĩ thuật lazy-loading: được cài đặt ở phía client-side, trang web sẽ hiển thị hìnhảnh sản phẩm khi người dùng lăn chuột gần đến vị trí hiển thị của sản phẩm đó

để giảm xử lí và tăng thời gian hiển thị trang màn hình

 Kĩ thuật optimize hình ảnh: hình ảnh của laptop sẽ được convert sang dạng JPG(dạng hình ảnh phổ biến nhất dùng trong website thương mại điện tử vì kíchthước nhẹ nhưng vẫn đảm bảo chất lượng)

 Hình ảnh laptop sẽ được tạo thành 3 loại: thumbnail (ảnh nhỏ), image (ảnh vừa)

và big_image (ảnh lớn), tùy vào từng trang sẽ sử dụng kích thước ảnh thích hợp

để tối đa hóa tốc độ tải trang (ảnh kích thước càng lớn thì tải dữ liệu càng lâu)

4.6.4 Tối ưu hóa công cụ tìm kiếm (SEO):

 Nhóm chỉ áp dụng kĩ thuật đơn giản là tạo các alt-name (tên thay thế) dựa trêntên sản phẩm mà người dùng nhập vào, từ đó tối ưu hóa vào đường link củatrang chi tiết và trang so sánh sản phẩm bằng cách chèn vào đoạn alt-name đó