Đồ án tốt nghiệp: Xây dựng website bán quần áo và phụ kiện trực tuyến

Tham khảo đồ án tốt nghiệp xây dựng website bán quần áo và phụ kiện chi tiết. Đồ án ứng dụng công nghệ Spring Boot, Angular và Microservices.

• Tác giả: Nguyễn Thị Trúc My
• Người hướng dẫn: ThS. Nguyễn Minh Đạo
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Hệ Thống Website Bán Hàng Trực Tuyến Bằng Spring Boot & Angular
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2015 - 2019
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Website Bán Quần Áo Bằng Spring Boot Angular

Đồ án xây dựng website bán quần áo là một dự án khóa luận tốt nghiệp được thực hiện bởi sinh viên Khoa Công Nghệ Thông Tin, Trường Đại Học Sư Phạm Kỹ Thuật TP.HCM. Dự án này kết hợp hai công nghệ hiện đại: Spring Boot cho backend và Angular cho frontend, nhằm xây dựng một hệ thống website thương mại điện tử hoàn chỉnh. Mục tiêu chính là tạo một nền tảng bán hàng trực tuyến cho phép khách hàng dễ dàng tìm kiếm, xem chi tiết và mua sắm quần áo một cách tiện lợi. Hệ thống được thiết kế theo kiến trúc Microservices, giúp tối ưu hóa hiệu suất và khả năng mở rộng của ứng dụng.

1.1. Định Nghĩa Và Mục Đích Của Dự Án

Website bán quần áo là một ứng dụng web thương mại điện tử cho phép người dùng đăng ký, đăng nhập, duyệt sản phẩm, quản lý giỏ hàng và thanh toán trực tuyến. Mục đích của dự án là tìm hiểu sâu về Spring Boot, Angular 5 và kiến trúc Microservices, đồng thời ứng dụng chúng vào một hệ thống thực tế có tính nhân rộng cao và dễ bảo trì.

1.2. Công Nghệ Chính Sử Dụng

Dự án sử dụng Spring Boot để phát triển các API RESTful mạnh mẽ, Angular để xây dựng giao diện người dùng tương tác, và cơ sở dữ liệu quan hệ để lưu trữ dữ liệu. Ngoài ra, hệ thống áp dụng Spring Security cho xác thực người dùng và Spring Data để quản lý dữ liệu hiệu quả.

II. Phân Tích Yêu Cầu Và Thiết Kế Hệ Thống

Giai đoạn phân tích yêu cầu là bước quan trọng trong phát triển dự án. Nhóm phát triển thực hiện khảo sát nhu cầu của khách hàng, xác định các chức năng cần thiết và nhận diện các tác nhân (actors) trong hệ thống. Dựa trên phân tích này, nhóm lập ra sơ đồ Use Case chi tiết, mô tả các tương tác giữa người dùng và hệ thống. Sau đó, công việc thiết kế cơ sở dữ liệu được thực hiện để đảm bảo tính toàn vẹn dữ liệu, định nghĩa các bảng, quan hệ và ràng buộc. Thiết kế giao diện cũng được chú trọng để tạo trải nghiệm người dùng tốt nhất.

2.1. Mô Tả Chi Tiết Các Use Case

Hệ thống bao gồm các Use Case chính như đăng nhập/đăng ký, duyệt sản phẩm, quản lý giỏ hàng, đặt hàng và quản lý hóa đơn. Mỗi Use Case được mô tả chi tiết bằng sơ đồ Sequence, hiển thị luồng tương tác giữa các đối tượng trong hệ thống và thứ tự các bước thực hiện.

2.2. Thiết Kế Giao Diện Người Dùng

Giao diện được chia thành hai phần: giao diện khách hàng (home, chi tiết sản phẩm, giỏ hàng, thanh toán) và giao diện quản trị viên (quản lý sản phẩm, người dùng, đơn hàng, thống kê). Mỗi trang được thiết kế theo nguyên tắc UX/UI hiện đại để đảm bảo tính trực quan và dễ sử dụng.

III. Phát Triển Backend Và Frontend

Quá trình phát triển backend bắt đầu với việc xây dựng các API RESTful sử dụng Spring Boot. Các API được phát triển theo từng chức năng: API xác thực, API quản lý sản phẩm, API giỏ hàng, và API quản lý đơn hàng. Spring Security được tích hợp để bảo vệ dữ liệu và kiểm soát quyền truy cập. Song song đó, frontend được xây dựng bằng Angular, với các component, service và directive tương ứng. Công việc mapping API với giao diện tiếp theo nhằm kết nối các API backend với các trang web, cho phép truyền tải dữ liệu giữa client và server một cách seamless.

3.1. Xây Dựng Các API Spring Boot

Các API được phát triển theo REST architecture, với các endpoint rõ ràng cho các operationen CRUD (Create, Read, Update, Delete). Spring Data JPA được sử dụng để tương tác với cơ sở dữ liệu, giảm thiểu mã boilerplate. Mỗi API có xác thực token để đảm bảo tính bảo mật và quyền truy cập phù hợp.

3.2. Phát Triển Frontend Angular

Angular được sử dụng để xây dựng giao diện động và tương tác. Các component được chia nhỏ theo chức năng, service được tạo để gọi API, và routing được cấu hình để điều hướng giữa các trang. Two-way data binding của Angular giúp đơn giản hóa quá trình cập nhật giao diện khi dữ liệu thay đổi.

IV. Kiểm Thử Triển Khai Và Kết Quả Đạt Được

Sau khi hoàn tất phát triển, bước kiểm thử chức năng được thực hiện để đảm bảo tất cả các tính năng hoạt động đúng. Nhóm thực hiện demo hệ thống, chạy các test case và fix các lỗi phát sinh. Kết quả dự kiến đạt được bao gồm một website bán hàng trực tuyến hoàn chỉnh với đầy đủ tính năng, giao diện thân thiện, hiệu suất cao và khả năng mở rộng. Dự án cũng góp phần giúp sinh viên nắm vững Spring Boot, Angular và kiến trúc Microservices, nâng cao kỹ năng phát triển phần mềm thực tiễn.

4.1. Quy Trình Kiểm Thử Và Đảm Bảo Chất Lượng

Kiểm thử đơn vị được thực hiện cho từng API và component, kiểm thử tích hợp đảm bảo các phần hoạt động cùng nhau, và kiểm thử hệ thống xác minh toàn bộ ứng dụng. Các lỗi được ghi lại, ưu tiên và fix trước khi triển khai. Báo cáo kiểm thử chi tiết được soạn lập.

4.2. Ý Nghĩa Khoa Học Và Thực Tiễn

Dự án này có ý nghĩa khoa học trong việc nghiên cứu các công nghệ hiện đại, kiến trúc phần mềm tiên tiến. Về mặt thực tiễn, nó cung cấp nền tảng sẵn có cho các cửa hàng bán quần áo trực tuyến, giảm chi phí phát triển và rút ngắn thời gian đưa sản phẩm ra thị trường.

Trích đoạn nội dung tài liệu

CHƯƠNG 1. CÁC CÔNG NGHỆ SỬ DỤNG 1. TỔNG QUAN VỀ ANGULAR 1. Giới thiệu Angular Angular là một Framwork mạnh mẽ được phát triển bởi Google.

Nó được sử dụng để xây dựng các ứng dụng tương tác với người dùng thông qua giao diện Web. Angular cho cung cấp cho lập trình viên nền tảng công nghệ hiện đại và cho phép tích hợp với hàng loạt các nền tảng công nghệ lập trình hiện đại như .Net, Java, Php … Với đặc trưng mạnh mẽ của các phiên bản trước kia như Angular 1.x, từ phiên bản Angular 2 (Hiện nay là phiên bản Angular 5) trở đi , nền tảng công nghệ có sự thay đổi lớn, ở đây ngôn ngữ lập trình được thực hiện đó là TypeScript (Ngôn ngữ lập trình hiện đại và hướng đối tượng), và framework này cũng phân chia việc phát triển ứng dụng thành nhiều các module riêng biệt, điều này giúp cho lập trình viên có thể tiếp cận theo cách hướng mô hình một cách dễ dàng hơn. Ngoài ra theo hướng tiếp cận này giúp cho lập trình viên phát triển và nâng cấp ứng dụng dễ dàng và đỡ tốn kém hơn. Kiến trúc của ứng dụng Ứng dụng được xây dựng và phát triển trên nền tảng Angular 4,5 có thể được mô tả theo sơ đồ cây tổng quát sau: Hình 1.1 Kiến trúc Angular Components: Được dịch là thành phần, nó chứa đựng các chức năng tương tác phía giao diện với người dùng.

Component có chứa Html, css hoặc scss, và các đoạn mã 1 được viết bằng ngôn ngữ Typescript nhằm thực hiện gắn kết (Tương tác) giữa giao diện ứng dụng và các dịch vụ (service ) ở phía Server. Trong hình vẽ trên thì các component trực thuộc Module. Và nó được nạp vào ứng dụng là nhờ Module. Component sử dụng Dịch vụ (Service) để lấy dữ liệu hoặc thao tác với dữ liệu và hiển thị chúng thông qua các đoạn mã chương trình được viết bằng TypeScript.

Component có thể sử dụng các đối tượng là thể hiện của dịch vụ thông qua cơ chế Dependency Injection (Thể hiện của Dependency Injecttion - DI là rất dễ hiểu, lập trình viên bchỉ cần khai báo đối tượng thông qua hàm khởi tạo của lớp). Dữ liệu có thể được hiển thị tương ứng với các file html trong component. Angular cung cấp cơ chế gắn kết dữ dữ liệu với giao diện (template) của component cơ chế đó được gọi là databinding. Thông qua cơ chế Databinding, bất kỳ thay đổi dữ liệu trong Angular, thì giao điện tương tác sẽ tự động cập nhật các thay đổi dữ liệu đó.

Tương tác về sự thay đổi dữ liệu trong Angular với phía giao diện có thể theo hướng 1 chiều hoặc 2 chiều. Các thành phần của Angular 5 1. Giới thiệu Module: Angular 5 chia sự phát triển ứng dụng thành các Module khác nhau. Tất cả các ứng dụng của Angular đều có 1 module gốc, module gốc được gọi là AppModule và có ít nhất một lớp NgModule.

Tùy theo quy mô của ứng dụng, với ứng dụng nhỏ chỉ cần một module là đủ. Tuy nhiên với các ứng dụng lớn có thể có chứa rất nhiều các Module khác nhau. Trong một Module có thể chứa nhiều các Module con khác. Các module con được gọi là các SubModule.

Mỗi Module có chứa @ngModule. Với các đặc trưng có chứa Metadata nhằm để định nghĩa các thuộc tính được sử dụng như sau:  Declarations: Khai báo các lớp View (Bao gồm Component, directive và Pipe nhằm thực hiện hiển thị thông tin do vậy người ta gọi là các lớp hiển thị (View class).  Exports: Khi chúng ta sử dụng các Component tại Module, chúng ta muốn các Component này được sử dụng tiếp ở các Module khác thì chúng ta sẽ khai báo các Component này tại mảng đối tượng trực thuộc từ khóa Export này. 2  Imports: Chúng tả muốn sử dụng các Module khác trong module này, thì chúng ta phải khai báo chúng tại mảng đối tượng trực thuộc từ khóa Imports.

 Providers : Khai báo các service được sử dụng trong module. Hình sau mô tả các thành phần của Module: Hình 1.2 Mô tả các thành phần thuộc tính của Module 1. Cách phân chia ứng dụng theo Module: Khi xây dựng ứng dụng với quy mô từ trung bình trở lên, người ta thường hay sử dụng ngôn ngữ mô hình hóa ví dụ như UML để thực hình mô hình hóa hệ thống phần mềm. Trong ngôn ngữ UML có nhiều các biểu đồ khác nhau.

Để mô hình hóa chức năng của hệ thống, các kỹ sư sẽ sử dụng biểu đồ Usecase để mô hình hóa 1 chức năng hoặc một nhóm chức năng của phần mềm, Khi muốn gom nhóm các chức năng lại với nhau thì người ta sẽ sử dụng biểu đồ biểu đồ thành phần (Component Diagram – Chứa nhiều biểu đồ Usecase). Vởi các ứng dụng được viết bằng Angular 5 chúng ta có thể ánh xạ biểu đồ thành phần sang thành các Module ứng dụng. Với các SubModule tương ứng với các biểu đồ Usecase trực thuộc biểu đồ thành phần. Ví dụ ta xây dựng 1 chương trình quản lý nhân sự, chương trình này bao gồm có chứa ít nhất 2 biểu đồ thành phần (1 biểu đố Authortication – Dùng để kiểm tra truy cập hệ thống và 1 biểu đồ thành phần sử dụng để Quản lý nhân sự - Hrm).

Tương ứng sang Angular 5 ta cũng sẽ có 3 modules đó là : Application Module (Đóng vai trò là RootModule) và 2 module thành phần bao gồm AuthorModule và HrmModule. Hình dưới đây mô tả Module gốc của ứng dụng: 3 Hình 1.3 Module gốc của ứng dụng Hình mô tả Module xác thực thông tin (AuthModule) của ứng dụng: Hình 1.4 Module Auth ứng dụng Chúng ta dễ dàng nhận thấy trong hình số 3,4 đó là hình ảnh của Module có chứa các router nhằm định tuyến các đường dẫn của ứng dụng. Trong hình số 4, AuthorModule chứa các component như: Login Component, Forgot Password 4 Component… Đó chính là các thành phần tương ứng với các Usecase như Login Usecase, Forgot Password Usecase. TỔNG QUAN VỀ SPRING BOOT 1.

Giới thiệu Spring Boot Mặc dù Spring là một Framework tuyệt vời để phát triển phần mềm nhưng nó vẫn tồn tại một số nhược điểm / hạn chế (Quá nhiều cấu hình…) Spring Boot được xây dựng để khắc phục những nhược điểm đó, đồng thời cũng cung cấp một hướng phát triển phần mềm mới trong tương lai. Spring Boot là một dự án nổi bật trong hệ sinh thái Spring Framework. Spring Boot được dùng để tạo các ứng dụng độc lập dựa trên Spring. Nếu như trước đây, công đoạn khởi tạo một dự án Spring khá vất vả từ việc khai báo các dependency trong file pom.xml cho đến cấu hình bằng XML hoặc annotation phức tạp, thì giờ đây với Spring Boot, chúng ta có thể tạo các ứng dụng Spring một cách nhanh chóng và cấu hình cũng đơn giản hơn.

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. Dưới đây là một số tính năng nổi bật của Spring Boot:  Có các tính năng của Spring Framework.  Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web).  Nhúng trực tiếp các ứng dụng server (Tomcat, Jetty…) do đó không cần phải triển khai file WAR.

 Cấu hình ít, tự động cậu hình bất kì khi nào có thể (Giảm thời gian viết code, tăng năng suất).  Không yêu cầu XML config.  Cung cấp nhiều plugin.  Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các thư viện hỗ trợ…).

Hiện tại, Spring Boot có 2 version chính là: v1. Các tính năng, đặc điểm của String Boot 1. String Application: SpringApplication là một class cung cấp cách thuận tiện để khởi chạy ứng dụng từ hàm main(). Để start ứng dụng, chỉ cần gọi method run().5 Ví dụ start ứng dụng 1.

Externalized Configuration: Spring Boot cho phép chúng ta cấu hình từ bên ngoài (externalize), do đó một ứng dụng có thể chạy trên nhiều môi trường khác nhau. Chúng ta có thể sử dụng file YAML, file properties, các biến môi trường và tham số command-line để thực hiện externalize configuration. Các thuộc tính cấu hình có thể inject trực tiếp vào bean bằng cách sử dụng annotation @Value hoặc thông qua object với @ConfigurationProperites… Ví dụ: Hình 1.6 Ví dụ Externalized Configuration 1. Profiles: Spring Boot Profiles cung cấp một cách để phân chia các cấu hình cho mỗi môi trường.

Các annotation @Component hoặc @Configuration có thể được đánh dấu @Profile để giới hạn khi nào được tải lên. Ví dụ chỉ tải trong môi trường product… Hình 1.7 Ví dụ về profiles 6 1. Loggin: Spring Boot sử dụng common logging cho tất cả các chức năng log nội bộ. Các depencdeny logging được quản lý mặc định, chúng ta không nên / cần sửa dependency logging nếu khồng có yêu cầu tùy biến (customization) thực sự cần.

TỔNG QUAN VỀ MICROSERVICES 1. Giới thiệu về Microservices Thời gian gần đây microservice cũng đang dần trở thành một từ khóa hot. Micro là rất nhỏ, service là dịch vụ, vậy microservice nghĩa là… dịch vụ vô cùng nhỏ. Nói đơn giản, microservice là một kiếu kiến trúc phần mềm.

Các module trong phần mềm này được chia thành các service rất nhỏ (microservice). Ưu điểm của Microservices Thứ nhất, giúp đơn giản hóa hệ thống. Với tổng số chức năng không đổi, kiến trúc Microservices chia nhỏ hệ thống ra làm nhiều dịch vụ nhỏ lẽ dể dàng quản lý và triển khai từng phần so với kiến trúc nguyên khối. Mỗi dịch vụ thì được định nghĩa để giao tiếp với các dịch vụ khác thông qua RPC (Remote Procedure Call) hay message-driven API.

Kiến trúc Microservices thúc đẩy việc phân tách rạch ròi các dịch vụ nhỏ, việc khó có thể làm nếu xây dựng ứng dụng bằng kiến trúc một khối. Trên hết với mỗi dịch vụ nhỏ, chúng ta sẽ có thời gian phát triển nhanh hơn, dễ nắm bắt cũng như bảo trì hơn. Thứ hai, kiến trúc này cho phép việc mỗi dịch vụ được phát triển độc lập bởi những team khác nhau. Cũng như cho phép developer có thể tự do chọn lựa technology stack cho mỗi dịch vụ mình phát triển.

Dĩ nhiên tự do lựa chọn nhưng không phải là tạo ra một mớ hỗn độn về technology, điều này thì chằng có một dự án hay sản phẩm nào mong muốn cả. Tuy nhiên, sự tự do này có nghĩa là các developer không còn phải bắt buộc phải sử dụng các công nghệ lỗi thời có thể đã tồn tại vào lúc bắt đầu dự án. Khi viết một dịch vụ mới, họ có tùy chọn của việc sử dụng công nghệ bắt kịp với xu thế. Hơn nữa, vì dịch vụ là tương đối nhỏ, việc viết lại một dịch vụ cũ dựa trên nền tảng công nghệ mới hơn là hoàn toàn khả thi.

Thứ ba, kiến trúc Microservices cho phép mỗi dịch vụ có thể được triển khai một cách độc lập. Cùng với đó thì việc triển khai hệ thống theo kiểu continuous deployment là hoàn toàn có thể.