Tìm hiểu spring boot, reactjs xây dựng website quản lý cửa hàng bán linh kiện điện tử

PHƯƠNG PHÁP THỰC HIỆN Tìm hiểu các kiến thức cần thiết để thực hiện đề tài: ● Các kỹ thuật phân tích thiết kế hệ thống ● Tìm hiểu về REST API, Spring , Spring boot ● Tìm hiểu về Spring D

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

TÌM HIỂU SPRING BOOT, REACTJS XÂY DỰNG WEBSITE QUẢN LÝ CỬA HÀNG BÁN

LINH KIỆN ĐIỆN TỬ

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG

Lời mở đầu, nhóm chúng em xin được phép gửi lời cảm ơn đến với Khoa CôngNghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đãtạo điều kiện cho nhóm chúng em được học tập, phát triển nền tảng kiến thức và thựchiện đề tài lần này.

Kế đến thì nhóm chúng em cũng xin được gửi đến thầy Nguyễn Hữu Trung lờicảm ơn sâu sắc nhất khi thầy đã giúp đỡ và nhận lời hướng dẫn nhóm chúng em thựchiện bài luận của mình

Nhận được sự đào tạo từ các thầy cô Khoa Công Nghệ Thông Tin từ trước đếngiờ đã giúp cho chúng em tiếp thu thêm được nhiều kiến thức, kinh nghiệm để thựchiện bài luận văn tốt nghiệp, nó sẽ giúp ích rất nhiều cho công việc và học vấn trongtương lai Đây sẽ là hành trang vô cùng lớn của chúng em trước khi bước ra một cuộcsống mới

Tuy nhiên với khả năng và chuyên môn còn nhiều hạn chế của mình so vớilượng kiến thức vô tận, chúng em luôn rất cố gắng hết sức để hoàn thành một cách tốtnhất Vì vậy việc xảy ra những thiếu sót của chúng em là điều khó tránh khỏi trong quátrình học hỏi và thực hiện bài luận Chúng em hi vọng nhận được sự thông cảm và góp

ý tận tình, quý báu của quý thầy (cô) Thông qua đó chúng em có thể rút ra được bàihọc kinh nghiệm, song với đó là hoàn thiện và nâng cấp lại sản phẩm của mình tốt hơnnữa

Một lần nữa chúng em xin gửi lời cảm ơn sâu sắc nhất đến với thầy NguyễnHữu Trung và tập thể các quý thầy, cô Khoa Công Nghệ Thông Tin – Trường Đại Học

Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh vì tất cả những điều thầy cô đã gửi gắm

và chỉ dạy chúng em Nhóm xin kính chúc các thầy cô luôn có sức khỏe thật tốt và

3.1.14 Thêm sản phẩm mới 57

2 DANH SÁCH HÌNH

Hình 2.3 Màn hình hiển thị sản phẩm bán chạy theo loại sản phẩm của GEARVN 29

Hình 2.7 Trang thông tin người dùng và lịch sử của GEARVN 31

Hình 2.11 Trang quản lý tài khoản, đơn hàng, điểm thưởng của FPT Shop 34

Hình 2.13 Phần tương tác, đánh giả sản phẩm của FPT Shop 35

Hình 4.9 Lược đồ tuần tự tìm kiểm sản phẩm 72Hình 4.10 Lược đồ tuần tự xem thông tin chi tiết sản phẩm 73

Hình 5.27 Màn hình kho ưu đãi trên web 135

Bảng 5.13 Bảng mô tả màn hình chỉnh sửa 106

Bảng 5.22 Bảng mô tả màn hình reset password trên website 124

Bảng 5.24 Bảng mô tả màn hình chi tiết giỏ hàng trên website 128.Bảng 5.25 Bảng mô tả màn hình trang cá nhân trên Website 130Bảng 5.26 Bảng mô tả màn hình voucher của tôi trên Website 132Bảng 5.27 Bảng mô tả màn hình địa chỉ người dùng trên web 134

Bảng 5.29 Bảng mô tả màn hình đơn hàng của tôi trên web 137Bảng 5.30 Bảng mô tả màn hình chi tiết đơn hàng của tôi trên web 139

Bảng 6.3 Kiểm thử các chức năng quản lý danh mục, sản phẩm 157

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại mà mà cuộc sống của mỗi người đã và đang được tiếp cận với sựphát triển vượt bậc và nhanh chóng của khoa học và công nghệ Một thời đại mà ứng

đều sở hữu cho mình một chiếc máy tính cá nhân là điều rất cần thiết và những thứkhông thể thiếu với một chiếc máy tính chính là những linh kiện cấu thành nên chúng

Ta có thể thấy, ở thời điểm hiện tại nhóm chúng em đang thực hiện bài luận vănnày, tình hình dịch Covid – 19 ở nước ta đang tuy đã gần như là đưọc kiểm soát hoàntoàn Nhưng nhìn về một khoảng thời gian trước khi các chỉ thị giản cách liên tục đượctiếp tục áp dụng trong khoảng thời gian dài, khiến cho cuộc sống của mọi người ngàycàng gặp nhiều khó khắn Trước diễn biến phức tạp cũng như tình hình xã hội căngthẳng như vậy thì việc mua bán online trở nên phổ biến hơn cả và vẫn còn duy trì chođến ngày nay Chính vì thế nhóm em muốn xây dựng lên một website và app bán linhkiện máy tính để khách hàng có thể dễ dàng tìm kiếm, kiểm tra thông số của linh kiệntrước ở nhà rồi sau đó có thể đến cửa hàng để mua hoặc cũng có thể đặt hàng về đếntận nhà Việc mua linh kiện máy tính trở nên dễ dàng, nhanh chóng, tiện lợi và hiệuquả hơn

2 MỤC TIÊU ĐỀ TÀI

● Xây dựng website cho quản trị viên quản trị cơ sở dữ liệu

● Xây dựng website cho người dùng có thể mua linh kiện máy tính online

● Xây dựng app mobile cho người dùng có thể mua linh kiện máy tính online

● Vận dụng thành các công công nghệ mới, ngôn ngữ lập trình hiện đại vào đểxây dựng website và app mobile của đề tài

● Tìm hiểu và vận dụng thành công Spring, Spring boot, ReactJS và React Nativevào đề tài

3 PHƯƠNG PHÁP THỰC HIỆN

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu về REST API, Spring , Spring boot

● Tìm hiểu về Spring Data JPA để tương tác với CSDL nhanh chóng

● Tìm hiểu về Spring Security, JWT và Oauth2 để tăng độ bảo mật cho trang web

● Tìm hiểu về ReactJS, React Native để thiết kế phần UI

● Tìm hiểu và sử dụng Postman để thuận tiện cho việc code riêng biệt Frontend vàBacken

5 PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT1.1 Spring

1.1.1 Giới thiệu về Spring

Hình 1.1 Logo của Spring Framework [1]

Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàngtriệu lập trình viên Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụnglại code

Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB;trong suốt: hoạt động một cách trong suốt với lập trình viên)

Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng ngườidùng rất lớn

Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là:Dependency Injection và Aspect Oriented Programming

Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triểnJava Desktop, ứng dụng mobile, Java Web Mục tiêu chính của Spring là giúp pháttriển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (PlainOld Java Object)

1.1.2 Ưu điểm

Spring cho phép lập trình viên sử dụng POJOs Việc sử dụng POJOs giúp bạnkhông phải làm việc với EJB, ứng dụng, các luồng chạy, cấu hình… đơn giản hơn rất

Spring được tổ chức theo kiểu mô đun Số lượng các gói và các lớp khá nhiều,nhưng bạn chỉ cần quan tâm đến những gì bạn cần và không cần quan tâm đến phầncòn lại.

Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các loggingframework, JEE, các thư viện tạo lịch trình (Quartz và JDK timer)…

Module Web của Spring được thiết kế theo mô hình MVC nên nó cung cấp đầy

đủ các tính năng giúp thay thế các web framework khác như Struts

1.2 Spring boot

1.2.1 Giới thiệu về Spring boot

● Auto config: tự động cấu hình thay lập trình viên, bạn chỉ cần viết code và tiến hành chạy hệ thống là được

● Dựa trên các Annotation để tạo lập các bean thay vì XML

● Server Tomcat có thể được nhúng ngay trong file JAR build ra và có thể chạy ở bất kì đâu mà java chạy được

1.2.2 Ưu điểm nổi bật của Spring Boot

Những tính năng nổi bật của Spring Boot mà bạn không thể bỏ qua như:

● Phát triển web một cách đơn giản và nhanh chóng

● Config an toàn

● Có thể hỗ trợ YAML

● Có tính quản trị cao

● Dễ dàng ứng dụng Spring và các sự kiện.

● Có thể cấu hình ở bên ngoài và tạo ra những tệp thuộc tính

● Tính bảo mật cao

● Ghi log

1.2.3 Đặc điểm nổi bật của Spring Boot

● Spring Application: Đây là class được dùng để khởi chạy ứng dụng từ hàmmain() Vì thế, khi khởi chạy ứng dụng, các lập trình viên chỉ cần gọi methodrun() là được

● Externalized Configuration: Spring Boot cho phép người dùng có thể sử dụngcấu hình (config) từ bên ngoài Chính vì vậy mà mỗi ứng dụng được tạo ra cóthể chạy được trên nhiều môi trường khác nhau

● Profiles: Dùng để phân chia các loại cấu hình cho các môi trường khác nhau

● Loggin: Sử dụng phục vụ cho toàn bộ chức năng log trong phạm vi nội bộ.Những logging này sẽ được quản lý một cách mặc định

Ngoài ra còn rất nhiều các tính năng tương tự khác của Spring Boot như: Developingweb Applications, Working with SQL Technologies, Security, Messaging, Caching,Calling rest Services with RestTemplate/WebClient, Sending Email, Validation,…

Sau đó JSON này sẽ được mã hóa Base64Url và thêm vào phần đầu tiên củaJWT token.

● Payload

Phần thứ 2 của token là payload, chứa các nội dung của thông tin (claim).Thông tin được truyền đi có thể là mô tả của một thực thể hoặc có thể là thông tin bổsung cho phần Header Có 3 kiểu claims: registered, public, và private claims

Registered claims: Một tập hợp các nội dung thông tin đã được quy định sẵn,chúng không bắt buộc nhưng tùy vào các ứng dụng thực hiện thì khuyến khích sử dụng

để tạo ra các điều kiện bắt buộc đối với những thông tin cần thiết Ví dụ iss (thời giantạo token), exp (thời gian token hết hạn), sub (tiêu đề)

Public claims: Những thông tin có thể tự định nghĩa tùy theo ý muốn của người

sử dụng ví dụ role, username, v.v Nhưng để tránh trùng lặp với các Registered claimschúng ta nên quy định các claims được liệt kê trong IANA JSON Web Token Registry

Private claims: Đây cũng là những thông tin tự định nghĩa hoặc các thông tinthêm, thường được sử dụng để chia sẻ thông tin giữa các Client

● Signature

Để tạo ra phần chữ ký này cần có encoded header, và encoded payload đã được

mã hóa ở trên cùng kèm theo một khóa bí mật (chuỗi secret) và một thuật toán đượcchỉ định trong phần header

Để đảm bảo tính đúng đắn của dữ liệu, chữ ký được sử dụng để xác minh thôngđiệp vẫn nguyên vẹn trong quá trình truyền nhận Nếu thông tin đã bị ai đó cố ý thayđổi trong phần header hoặc payload và gửi mạo danh đến server (nơi tạo và ký token)thì quá trình xác nhận thông tin sẽ không hợp lệ

1.4 React JS

1.4.1 Giới thiệu

Hình 1.3 Logo của ReactJS [7]

ReactJS ra mắt vào năm 2013, là một mã nguồn mở được phát triển bởiFacebook, bản thân nó được biết đến là một thư viện Javascript dùng để xây dựng cácgiao diện người dùng hay UI một cách dễ dàng và tiện lợi Điểm nổi bật nhất củaReactJS đó là việc render dữ liệu được thực hiện cả ở trên tầng Server và ở dướiClient

Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việcchính trên 2 thành phần sau: UI và xử lý tương tác của người dùng Điểm đến cuốicùng của việc sử dụng ReactJS đó là đảm bảo tốc độ nhanh, mượt và có khả năng mởrộng cao

1.4.2 Đặc trưng

JSX: Trong React, lập trình viên sẽ thường dùng JSX thay vì thường xuyên sử

dụng JavaScript để thiết kế bố cục trang web JSX là một cú pháp mở rộng củaJavascript, nó cho phép lập trình viên viết HTML trong React một cách dễ dàng Khibiên soạn, JSX tối ưu hóa code, vì thế nó chạy nhanh hơn so với code JavaScript tươngđương

Redux: Redux là một vùng chứa trạng thái có thể dự đoán được hay còn biết

đến là một thư viện của JavaScript Redux được thiết kế nhằm hỗ trợ lập trình viên khiviết các ứng dụng của JavaScript có thể hoạt động trong các môi trường khác nhau.Mặc dù Redux chủ yếu được sử dụng như một công cụ quản lý trạng thái với React,

1.5 React Native

1.5.1 Giới thiệu

React Native là một framework được tạo bởi Facebook React Native vượt trội

ở chỗ chỉ cần viết một lần là có thể build ứng dụng cho cả iOS lẫn Android

Mục tiêu cốt lõi của thư viện này là nhằm cung cấp hiệu suất làm việc cao nhất

vì cần tìm hiểu 2 hệ sinh thái hoàn toàn khác biệt (IOS, Android)

Cho phép các lập trình viên sử dụng JavaScript để làm mobile apps trên cảAndroid và iOS với có trải nghiệm và hiệu năng như native

1.5.2 Đặc trưng

React Native cho phép lập trình viên viết ứng dụng trực tiếp trên Javasript

Dễ tiếp cận đối với người đã kiến thức lập trình căn bản về Javascript

Do react native cung cấp một cấu trúc dựa trên component, tức là cáccomponent là những mảnh ghép được ghép lại thành một ứng dụng

Mỗi component sẽ tự quyết định nó render như thế nào và logic riêng bên trong

đó - Có thể tái sử dụng lại các component này tại bất kì nơi nào

Bộ công cụ phát triển cho lập trình là một yếu tố quan trọng khi chọn nền tềnphát triển

CHƯƠNG 2 KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ

2.1 Phân tích hiện trạng

Công nghệ kĩ thuật là một trong những lĩnh vực quan trọng trong cơ cấu kinh tếViệt Nam cũng như quan trọng cho việc phát triển đất nước ngày càng hiện đại hơnTheo số liệu nghiên cuứu cuối quý năm 2021 chứng kiến số lượng máy tính để bàn,máy tính xách tay bán ra tăng 1% so với cùng kỳ năm 2020, đạt 92 triệu chiếc Thànhtích này góp phần vào tổng doanh số máy tính cả nhân toàn cầu trong năm 2021 là 341triệu chiếc, tăng 15% so với năm 2020

Giới chuyên môn nhận định, số máy tính bán ra tăng cao chưa từng thấy, vượt tới27% so với thời điểm trước dịch là năm 2019, là minh chứng rõ nét cho tiến trìnhchuyển đổi số được thúc đẩy mạnh mẽ do đại dịch covid-19 Số lượng bán ra tăng caongoài mọi kỳ vọng cũng cho thấy người dùng đang tích cực mua bổ sung máy tínhmới, nâng cấp các máy tính đang sử dụng với những linh kiện hiện đại hơn, có hiệusuất cao hơn như Card màn hình, nâng cấp Ram, ổ cứng, …

Để phần nào giải quyết nhu cầu mua máy tính, nhóm chúng em xây dựng website

và app mobile bán linh kiện máy tính giúp cho việc xây dựng máy tính từ những linhkiện này có thể dễ dàng hàng nhờ việc mua chúng một cách thật thuận tiện nhất có thể

2.2 Khảo sát một số phần mềm

2.2.1 GearVN

Các màn hình chính

Hình 2.2 Màn hình đăng nhập của GEARVN

Hình 2.3 Màn hình hiển thị sản phẩm bán chạy theo loại sản phẩm của GEARVN

Hình 2.4 Màn hình chi tiết một sản phẩm của GEARVN

Hình 2.6 Màn hình giỏ hàng của trang GEARVN

Hình 2.7 Trang thông tin người dùng và lịch sử của GEARVN

Bảng 2.1 Chức năng và hạn chế của GEARVN

2.2.2 FPT Shop

Các màn hình chính

Hình 2.9 Trang sản phẩm theo phân loại của FPT Shop

Hình 2.10 Trang chi tiết sản phẩm của PFT Shop

Hình 2.11 Trang quản lý tài khoản, đơn hàng, điểm thưởng của FPT Shop

Hình 2.13 Phần tương tác, đánh giả sản phẩm của FPT Shop

2.2.3 Ứng dụng Shopee

Hình 2.14 Màn hình trang chính của shopee

Hình 2.15 Màn hình chi tiết sản phẩm của Shopee

Hình 2.17 Màn hình đánh giá của Shopee

cho phép đăng tải ảnh, video

- Hệ thống ưu đãi đa dạng, thu hút

người sử dụng

- Một số màn hình chứa nhiều thông tin, gây khó khăn với những người mới sử dụng

Bảng 2.3 Chức năng và hạn chế của Shopee

2.3 Phân tích yêu cầu của dự án

Xây dựng ứng dụng để bán các linh kiện máy tính cho phép người dùng thực hiệnlựa chọn, đặt hàng và thanh toán đơn hàng Bên cạnh đó là website để quản trị hệthống bằng quyền Quản trị viên Các chức năng chính của chương trình bao gồm:

- Quản lý tài khoản người dùng

- Thống kê lượt truy cập của sản phẩm

● Lịch sử mua hàng

- Thanh toán

● Thanh toán COD

● Thanh toán VNPAY

2.5 Danh sách yêu cầu chức năng hệ thống

- Thống kê lượt mua của từng sản phẩm

- Thêm, xóa, cập nhật sản phẩm

2.6 Danh sách yêu cầu phi chức năng

- Hệ thống có chức năng bảo mật và phân quyền

- Mật khẩu, thông tin nhạy cảm của người dùng được mã hóa trước khi ghi vào cơ sở

dữ liệu

CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU3.1 Lược đồ Usecase

Hình 3.1 Usecase người dùng

Hình 3.2 Usecase admin

3.1.1 Đăng nhập

Mô tả nhanh Đăng nhập để thực hiện các chức năng tương ứng với chức vụ trong trang Web.

Các đối tượng Admin, Khách hàng, Shipper

Điều kiện tiên quyết Người dùng đã có tài khoản trong hệ thống.

Khi thành công Người dùng được xác thực và hệ thống hiển thị chức năng tương ứng với vai trò của

4 Hệ thống xác định vai trò của người dùng.

5 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng.

Thất bại Nếu đăng nhập không thành công: Người dùng không truy cập được vào hệ thống,

cần phải kiểm tra lại thông tin đăng nhập.

Nếu người dùng nhập sai tên đăng nhập hoặc mật khẩu, cũng có thể là cả hai Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do xác thực bị sai.

2 Hệ thống lưu ý người dùng đăng nhập lại.

3 Khi người dùng nhập lại tên đăng nhập và mật khẩu, bước 3 ở Basic flow được thực hiện.

Điểm mở rộng Không có.

6

3.1.2 Đăng ký

Mô tả nhanh Dùng để tạo mới tài khoản cho Khách hàng khi họ cần sử dụng các chức năng – Đặt

mua sản phẩm, xem và chỉnh sửa thông tin cá nhân, theo dõi lịch sử giao dịch.

Các đối tượng Khách chưa có tài khoản

Điều kiện tiên quyết Tài khoản đăng kí không trùng với tài khoản hiện có trong CSDL và các thông tin

đăng kí phải hợp lệ với yêu cầu.

Khi thành công Đăng ký thành công sẽ thêm thông tin vào cơ sở dữ liệu

Luồng tương tác

Thành công 1 Chọn chức năng “Đăng ký”

2 Nhập tên đăng nhập, mật khẩu, thông tin cá nhân, của khách hàng

3 Hệ thống kiểm tra sự hợp lệ của thông tin vừa nhập

4 Hiện thông báo đăng ký thành công và chuyển về chỗ Đăng nhập.

Thất bại Nếu khách hàng không thể tạo được tài khoản Những công việc sau được thực

hiện:

1 Hệ thống mô tả lý do xác thực bị sai (thông tin chưa hợp lệ hoặc tên đăng nhập này đã tồn tại).

2 Hệ thống lưu ý người dùng kiểm tra lại lần nữa.

3 Quay lại bước 2 ở Basic flow nếu muốn tiếp tục thao tác.

3.1.3 Đăng xuất

Mô tả nhanh Thoát khỏi các chức năng tương ứng với vai trò trong Web.

Các đối tượng Admin, Khách hàng, Shipper

Điều kiện tiên quyết Người dùng đang đăng nhập trong hệ thống.

Khi thành công Chuyển người dùng về trang chủ, phần bên phải trở về chữ “Đăng nhập” hoặc trở về

trang “Đăng nhập” nếu là admin hoặc shipper

Luồng tương tác

Thành công 1 Người dùng nhấn “Đăng xuất”

2 Hệ thống thoát khỏi tài khoản người dùng, trả về trang chủ của web hoặc trở

về trang “Đăng nhập” nếu là admin hoặc shipper.

Thất bại Nếu việc đăng xuất thất bại thì những công việc sau được thực hiện:

1 Hệ thống giữ nguyên trạng thái hiện tại.

Điểm mở rộng Không có.

3.1.4 Xem thông tin cá nhân

Mô tả nhanh Dùng để kiểm tra, xem lại thông tin liên quan tới vấn đề cá nhân.

Các đối tượng Khách hàng

Điều kiện tiên quyết Đăng nhập vào trang web.

Khi thành công Thông tin được hiển thị ra màn hình.

Luồng tương tác

Thành công 1 Hệ thống xác thực Tên đăng nhập và Mật khẩu

2 Chọn chức năng “Thông tin cá nhân”

3 Hiển thị các thông tin tương ứng mà người dùng đã nhập khi tạo tài khoản.

Thất bại Nếu người dùng không load được trang cá nhân Những công việc sau được thực hiện:

1 Hệ thống hiện thông báo yêu cầu người dùng chờ trong giây lát.

2 Quay lại bước 2 ở Basic flow nếu muốn tiếp tục thao tác xem thông tin.

Điểm mở rộng Không có.