Báo cáo đồ án: Xây dựng website kinh doanh coffee (ReactJS & Spring Boot) - ĐH CNTT

Tải trọn bộ đồ án website kinh doanh coffee sử dụng ReactJS và Spring Boot. Báo cáo đầy đủ, chi tiết từ phân tích đến thiết kế CSDL và giao diện.

• Tác giả: Huỳnh Minh Nhật
• Người hướng dẫn: Huỳnh Tuấn Anh
• Trường học: Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng Website Kinh doanh Coffee
• Loại tài liệu: Đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Website Kinh Doanh Coffee

Đồ án website kinh doanh coffee là một dự án học tập toàn diện nhằm xây dựng một nền tảng thương mại điện tử chuyên biệt cho ngành cà phê. Với sự phát triển nhanh chóng của công nghệ thông tin, website kinh doanh coffee trở thành giải pháp tối ưu để kết nối người tiêu dùng với các cửa hàng cà phê. Đồ án này được thực hiện bởi sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP. Hồ Chí Minh, dưới sự hướng dẫn của giáo viên Huỳnh Tuấn Anh. Mục tiêu chính là áp dụng những kiến thức về lập trình, thiết kế hệ thống và phân tích yêu cầu vào việc phát triển một ứng dụng web hoàn chỉnh, đáp ứng nhu cầu thực tế của thị trường cà phê hiện đại.

1.1. Đặt Vấn Đề Và Nhu Cầu Thực Tế

Hiện nay, nhu cầu thưởng thức cà phê ngày càng tăng cao, nhưng nhiều người khó có thời gian ghé quán thường xuyên. Tải đồ án website coffee giải quyết vấn đề này bằng cách cung cấp nền tảng đặt hàng trực tuyến tiện lợi. Khách hàng có thể duyệt menu, chọn sản phẩm, thanh toán và nhận hàng mà không cần tốn nhiều thời gian. Giải pháp này không chỉ tiện lợi cho người dùng mà còn giúp các quán cà phê mở rộng thị trường khách hàng và tăng doanh số bán hàng đáng kể.

1.2. Mục Tiêu Chính Của Đề Tài

Đồ án website kinh doanh coffee đặt ra những mục tiêu rõ ràng: Thứ nhất, xây dựng một platform hoàn thiện với giao diện thân thiện, dễ sử dụng cho cả khách hàng và quản lý cửa hàng. Thứ hai, áp dụng công nghệ hiện đại như Spring Boot, ReactJs và TypeScript để đảm bảo hiệu suất cao. Thứ ba, tích hợp các chức năng quản lý đơn hàng, khách hàng, sản phẩm và khuyến mãi một cách toàn diện.

II. Công Nghệ Và Công Cụ Sử Dụng

Website kinh doanh coffee được phát triển với các công nghệ tiên tiến nhất hiện nay. Backend sử dụng Java và framework Spring Boot, cung cấp khả năng xử lý dữ liệu mạnh mẽ và bảo mật cao. Frontend được xây dựng với ReactJs và TypeScript, đảm bảo giao diện responsive và trải nghiệm người dùng mượt mà. Cơ sở dữ liệu được thiết kế logic hoàn chỉnh với nhiều bảng dữ liệu liên kết, bao gồm User, Product, Order, Discount và Currency. Nhóm phát triển cũng sử dụng các công cụ thiết kế chuyên nghiệp như Adobe Illustrator, Adobe Photoshop và Figma để tạo giao diện hấp dẫn.

2.1. Stack Công Nghệ Backend Và Frontend

Phía backend, đồ án website coffee sử dụng Spring Boot - framework Java phổ biến với khả năng xây dựng API RESTful mạnh mẽ. Phía frontend, ReactJs và TypeScript cung cấp tính linh hoạt và an toàn về kiểu dữ liệu. Kiến trúc này cho phép tách biệt rõ ràng giữa logic xử lý và giao diện người dùng, giúp code dễ bảo trì và mở rộng.

2.2. Thiết Kế Database Và Cơ Sở Dữ Liệu

Sơ đồ logic của website kinh doanh coffee bao gồm các bảng chính: User (người dùng), Product (sản phẩm), Order (đơn hàng), OrderProduct (chi tiết đơn hàng), Discount (khuyến mãi), UserDiscount (khuyến mãi cho người dùng), ProductGroup (nhóm sản phẩm), Role (vai trò), UserGroup (nhóm người dùng) và Currency (tiền tệ). Các bảng được thiết kế với quan hệ một-nhiều và nhiều-nhiều để đảm bảo tính toàn vẹn dữ liệu.

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

Quá trình phân tích yêu cầu của đồ án website kinh doanh coffee được thực hiện thông qua khảo sát thực tế, phỏng vấn những người quản lý quán cà phê và khách hàng tiềm năng. Nhóm phát triển đã phân loại các yêu cầu thành hai loại chính: yêu cầu hệ thống (requirements) liên quan đến hiệu suất, bảo mật, độ ổn định; và yêu cầu nghiệp vụ (business requirements) liên quan đến chức năng cụ thể như quản lý menu, xử lý đơn hàng, quản lý tài khoản. Thiết kế hệ thống sử dụng sơ đồ Use Case để mô tả các tương tác giữa người dùng và hệ thống một cách rõ ràng.

3.1. Khảo Sát Và Phân Tích Yêu Cầu

Tải đồ án website kinh doanh coffee dựa trên khảo sát sâu về nhu cầu thị trường. Phương pháp khảo sát bao gồm phỏng vấn trực tiếp, khảo sát qua bảng câu hỏi, và phân tích các ứng dụng cạnh tranh như Highland Coffee. Danh sách yêu cầu bao gồm: đăng ký/đăng nhập, xem menu sản phẩm, thêm vào giỏ hàng, thanh toán, theo dõi đơn hàng, quản lý tài khoản, quản lý khuyến mãi.

3.2. Sơ Đồ Use Case Tổng Quát

Sơ đồ Use Case của website kinh doanh coffee bao gồm hai loại tài khoản chính: Customer (khách hàng) và Admin (quản lý). Khách hàng có thể đăng nhập, xem sản phẩm, tạo đơn hàng, thanh toán và xem lịch sử mua hàng. Admin có quyền quản lý sản phẩm, đơn hàng, khuyến mãi, người dùng, nhóm sản phẩm, vai trò và tiền tệ. Mỗi loại tài khoản có quyền hạn cụ thể đảm bảo an toàn và hiệu quả hoạt động.

IV. Thiết Kế Giao Diện Và Chức Năng Chính

Đồ án website kinh doanh coffee được thiết kế với 21 màn hình chính, mỗi màn hình đều được thiết kế cẩn thận để đảm bảo trải nghiệm người dùng tốt nhất. Giao diện chính bao gồm: màn hình đăng nhập/đăng ký, trang chủ hiển thị menu sản phẩm, giỏ hàng, thanh toán, quản lý thông tin cá nhân, quên mật khẩu và đổi mật khẩu. Phía quản lý admin, website coffee cung cấp các màn hình để quản lý sản phẩm, đơn hàng, khuyến mãi, người dùng, vai trò và các hoạt động khác. Sơ đồ liên kết màn hình giúp người dùng dễ dàng điều hướng giữa các chức năng khác nhau.

4.1. Màn Hình Chính Cho Người Dùng

Giao diện người dùng của website kinh doanh coffee bắt đầu với màn hình đăng nhập, tiếp theo là trang chủ hiển thị danh sách sản phẩm. Người dùng có thể xem chi tiết sản phẩm, thêm vào giỏ hàng, xem giỏ hàng và tiến hành thanh toán. Mỗi màn hình được thiết kế với giao diện đẹp mắt, dễ sử dụng, tương thích trên các thiết bị khác nhau (desktop, tablet, mobile).

4.2. Chức Năng Quản Lý Admin

Tải đồ án website coffee cung cấp bộ công cụ quản lý hoàn chỉnh cho admin. Có thể quản lý danh sách sản phẩm, nhóm sản phẩm, đơn hàng, chi tiết đơn hàng, khuyến mãi, khuyến mãi cho người dùng, người dùng, nhóm người dùng, vai trò, loại tiền tệ và các hoạt động hệ thống. Interface quản lý được thiết kế thân thiện, cho phép admin dễ dàng thêm, sửa, xóa, tìm kiếm thông tin.

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

CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI  Ngày nay, sự phát triển của công nghệ thông tin cùng với là sự ra đời của hàng loạt các thiết bị điện tử như điện thoại, laptop, … đang gia tăng với tốc độ chóng mặt. Chúng được xem như là một trong những cầu nối quan trọng giữa hiện tại và tương lai, khiến cho công nghệ thông tin trở thành một trong những ngành phát triển bậc nhất trên Thế giới.  Hiện tại, ngày càng nhiều người biết đến các hàng quán bán coffee khác nhau.

Tuy nhiên, một số lớn những người muốn thưởng thức coffee có quỹ thời gian khá hạn hẹp không thể đến quán thường xuyên.  Nhận thấy được nhu cầu trên, và với sự phát triển của công nghệ thông tin nhóm chúng em đã quyết định chọn đề tài “XÂY DỰNG WEBSITE KINH DOANH COFFEE” (đồ án được thầy Huỳnh Tuấn Anh nắm vai trò giảng viên hướng dẫn).2 Giải pháp Để có thể hoàn thành được đề tài, nhóm chúng em đã nghiên cứu những nội dung như sau:  Tìm hiểu về ngôn ngữ Java và framework Spring để hỗ trợ cho việc lập trình backend  Tìm hiểu về Html,Css,ReactJs,TypeScript để hỗ trợ cho việc lập trình frontend  Tìm hiểu về UI/UX design, design thinking và công cụ thiết kế như Adobe illustrator, Adobe photoshop, Figma để hỗ trợ thiết kế giao diện cho ứng dụng  Nghiên cứu về việc nhu cầu của những người cần sử dụng các sản phẩm liên quán đến coffee, nghiện cứu các công ty đối thủ cạnh tranh trực tiếp và gián tiếp trên thị trường, các thông tin để tối ưu hoá được trải nghiệm người dùng và mang tính lôi kéo người dùng sử dụng ứng dụng lâu dài.3 Mục tiêu đề tài Mục tiêu cơ bản là thực hiện hóa các kiến thức nghiên cứu và áp dụng chúng trong quá trình thực hiện đồ án. Một website hoàn thiện về mặt giao diện, chính xác về xử lý thuật toán và mang cho người sử dụng một trải nghiệm người dùng tốt nhất. Xây dựng website hỗ trợ mua hàng cho những người có ít thời gian đến quán.

 Thực hiện được các chức năng quản trị các thông tin liên quan đến ứng dụng…  Các animation khi thực hiện các tác vụ trên ứng dụng 1.4 Phạm vi đề tài  Vì quá trình xây dựng ứng dụng và thực hiện đề tài có giới hạn, cùng với đó là mảng kiến thức về Spring và ReactJs là quá lớn, nên nhóm đã xác định phạm vi đề tài là thực hiện các chức năng và animation cơ bản của ứng dụng đồng thời đánh giá về khía cạnh hiệu quả của việc sử dụng ứng dụng, những ưu nhược điểm của ứng dụng.  Phạm vi người dùng: Hướng đến đối tượng là nhóm người dùng cuối hoặc cá nhân. Phạm vi người dùng sẽ được mở rộng trong tương lai khi ứng dụng có độ bao quát về các khía cạnh liên quan.  Phạm vị môi trường: Môi trường website.

 Phạm vi chức năng: Cung cấp các chức năng cơ bản như xem thông tin các sản phẩm, xem và sử dụng khuyến mãi, xem thông tin các cửa hàng trực thuộc doanh nghiệp. Bên cạnh đó cung cấp chức năng đặt hàng cho khách hàng và đăng ký, đăng nhập, lấy lại mật khẩu. Đối với quản trị viên sẽ được dùng để quản trị(CRUD) các thông tin liên quan của ứng dụng. Hệ thống sẽ có chức năng phân quyền cho từng loại tài khoản khác nhau.5 Công cụ sử dụng  Công cụ phát triển backend: Intellij.

 Công cụ dùng để phân tích, thiết kế: Adobe illustrator, Adobe photoshop, Figma.  Công cụ quản lý dự án: Github, Notion, Messenger.  Công cụ trao đổi thông tin giữa thành viên nhóm: Discord, Messenger, Teams  Công cụ soạn thảo báo cáo: Microsoft Word.6 Đối tượng nghiên cứu  Công nghệ xây dựng ứng dụng:  Ngôn ngữ lập trình Back-end: Java với Spring Boot, Spring Security, Swagger  Ngôn ngữ lập trình Front-end JavaScript, HTML, CSS, ReactJs, Bootstrap, Scss, TypeScript 1.7 Khảo sát, đánh giá các ứng dụng cạnh tranh hiện có: 1.1 Highlands Coffee Highlands Coffee  Highlands Coffee là trang web bán các sản phẩm coffee với nhiều sản phẩm dành cho người có ít thời gian đến quán.  Một số điểm nổi bật: + Có một cộng đồng thân thiện và việc trao đổi thông qua app cũng dễ dàng.

+ Có thể chia sẻ thông tin với nhân viên chăm sóc khách hàng để nhận được góp ý, hỗ trợ. + Lữu trữ các loại dữ liệu khác nhau của sản phẩm làm từ coffee… + Đảm bảo privacy cho người sử dụng app.  Một số hạn chế: + Giao diện không thân thiện với người dùng, cũng như không hấp dẫn người dùng. + Khó để hiểu và sử dụng hiệu quả tất cả các chức năng có của website.

+ Hiển thị thông tin không quá rõ ràng. + Mua hàng phải gọi điện CHƯƠNG 2. TỔNG QUAN CÔNG NGHỆ 2.1 Phương pháp làm việc Làm việc nhóm giữa 2 thành viên thông qua hình thức online, offline. Tương tác trao đổi với nhau online dưới sự hướng dẫn của giảng viên.2 Phương pháp nghiên cứu - Phân tích nhu cầu sử dụng của các đối tượng có liên quan.

- Nghiên cứu, phân tích và đánh giá các ứng dụng có sẵn trên thị trường.3 Phương pháp công nghệ và nền tảng - Tìm hiểu ngôn ngữ và framework để xây dựng Website:  Ngôn ngữ lập trình Back-end: Java với Spring Boot, Spring Security, Swagger  Ngôn ngữ lập trình Front-end JavaScript, HTML, CSS, ReactJs, Bootstrap, Scss, TypeScript 2.4 Giới thiệu Spring Boot,ReactJs và TypeScript  Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework. Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng.à một nền tảng đa ứng dụng. Tức là chỉ với những bản code, ta có thể sử dụng và chạy nó trên nhiều nền tảng ứng dụng khác nhau, giúp bạn tiết kiệm được công sức và thời gian đáng kể. + Ưu điểm: - 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 + Nhược điểm: - Thiếu kiểm soát.

Do style cố định, Spring Boot tạo ra nhiều phụ thuộc không được sử dụng dẫn đến kích thước tệp triển khai lớn. - Quá trình chuyển đổi dự án Spring cũ hoặc hiện có thành các ứng dụng Spring Boot nhiều khó khăn và tốn thời gian. - Không thích hợp cho các dự án quy mô lớn. Hoạt động liên tục với các microservices, theo nhiều nhà phát triển, Spring Boot không phù hợp để xây dựng các ứng dụng nguyên khối.

 ReactJs (còn được gọi là Reactjs hay React.js) là một Thư viện javascript được tạo ra bởi sự cộng tác giữa Facebook và Instagram. Nó cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng. + Ưu điểm: - Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều.

Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí. Chúng ta có thể viết một ví dụ đơn giản về ReactJS như sau. + Nhược điểm: - Reactjs chỉ phục vụ cho tầng View.

React chỉ là View Library nó không phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2-way binding hay là Ajax  TypeScript Typescript là một dự án được phát triển bởi microsoft và tặng free cho người sử dụng.

Nó được xem là ngôn ngữ mã nguồn mở phiên bản nâng cao của javascript bởi nhiều tính năng tiện lợi được bổ sung, cải tiến từ những điểm yếu của javascript như tùy chọn kiểu tĩnh và lớp hướng đối tượng. + Ưu điểm: - Code được viết bằng Typescript sẽ dễ dự đoán và debug hơn nhiều với static typing. - Tất cả mọi thông số, số liệu của bạn sẽ dễ dàng được lấy nhờ sự hỗ trợ của IDE và các trình biên dịch. - Giúp bạn tiết kiệm lượng lớn thời gian, công sức trong việc kiểm tra code và làm giảm tối đa phần trăm va chạm lỗi trong quá trình vận hành mà không cần thông qua bất kỳ một đối tượng nào khác.

- Mọi thao tác của Typescript không những đơn giản, nhanh chóng và tiết kiệm mà lại còn đem lại cho bạn những hiệu quả bất ngờ trong việc khắc phục lỗi và dễ đọc hơn nhiều. - Typescript giúp bạn tái cấu trúc phù hợp với nhu cầu tìm kiếm khi bạn muốn nâng cấp hệ thống của mình mà không gây náo loạn cho hệ thống. - Khả năng cảnh báo lỗi ngay trong khi viết code mà tỉ lệ mắc lỗi khi sử dụng Typescript trong hệ thống là rất thấp. + Nhược điểm: - Một tệp Typescript có đuôi là .js trên nền tảng node.js nếu muốn vận hành được thì bắt buộc phải cần tới trình biên dịch thì mới có thể sử dụng được.

- Để sử dụng được Typescript một cách hiệu quả, bạn cần đảm bảo rằng trình thử nghiệm, máy chủ node.js và webpack đều có thể hoạt động được với Typescript. KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU 3.1 Khảo sát hiện trạng 3.1 Phương pháp & kết quả khảo sát ● Phương pháp: Dựa trên những báo cáo, nghiên cứu chính thức. Ngoài ra còn thực hiện một cuộc khảo sát quy mô nhỏ và nhận được khoảng 105 responses đến từ khoảng 120 người được gửi bảng khảo sát đạt 87,5%. ● Kết quả nhận được từ khảo sát:  Lợi ích mà người đặt hàng từ website nhận được (Multiple choices):  79% người tham gia thấy giúp họ tiết kiệm thời gian  65% người thấy tiện lợi hơn khi đi làm  64% người cảm thấy hứng thú khi mua hàng online  Khi được hỏi rằng liệu người dùng có thích đặt các sản phẩm trên website hay không?  80% người tham gia thích  20% người tham gia không thích vì lý do sợ lộ thông tin cá nhân 3.