Bước vào thế kỷ 21, sự phát triển mạnh mẽ của khoa học công nghệ đã định hình một thế giới mới, với Công nghệ Thông tin đóng vai trò dẫn đầu và góp phần quan trọng trong sự phát triển chung. Trong những năm gần đây, vai trò của hệ thống thông tin trong doanh nghiệp ngày càng trở nên quan trọng và mạnh mẽ. Như một phần của lĩnh vực Công nghệ thông tin, Công nghệ web đang phát triển và lan rộng nhanh chóng nhờ vào những lợi ích to lớn mà nó mang lại cho cộng đồng. Và đó là lý do chúng em đã chọn đề tài Xây dựng website bán laptop, nhằm tìm hiểu và đề xuất những giải pháp tối ưu để hỗ trợ các doanh nghiệp cửa hàng muốn kinh doanh laptop và các sản phẩm máy tính xách tay. Bằng cách sử dụng nền tảng công nghệ web và thương mại điện tử, việc bán laptop thông qua website sẽ mang lại nhiều lợi ích và thuận lợi cho các công ty sản xuất laptop nói chung và các cửa hàng phân phối nói riêng. Điều này bao gồm việc tăng độ nổi tiếng và tên tuổi của các công ty và cửa hàng trên môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO...), mở cửa 2424 cho quá trình kinh doanh, giảm chi phí quảng cáo truyền thống như tiếp thị, quảng cáo dễ dàng qua các nền tảng đa phương tiện, và dễ dàng giao tiếp và trao đổi thông tin với khách hàng. Website bán laptop giúp doanh nghiệp cung cấp cho khách hàng các lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm. Khách hàng có thể dễ dàng tìm hiểu và xem thông tin chi tiết về sản phẩm, từ đó lựa chọn những chiếc laptop với thông số kỹ thuật phù hợp và giá cả phù hợp với khả năng tài chính của mình. Đối với các hãng sản xuất và cửa hàng đại lý, website thương mại bán laptop cũng mang lại tiện ích trong việc cập nhật và quản lý thông tin cho website, và dễ dàng tương tác với khách hàng. Nhóm chúng em mong muốn đóng góp vào sự phát triển và các lợi ích đã đề cập bằng cách áp dụng kiến thức đã học vào thực tế và xây dựng một website bán laptop với đầy đủ các chức năng để đáp ứng nhu cầu sử dụng của người dùng. Đó là lý do chính mà nhóm chúng em quyết định thực hiện đề tài Tìm hiểu công nghệ Spring Boot, React JS và xây dựng ứng dụng Website bán laptop.
CƠ SỞ LÝ THUYẾT
SPRING BOOT FRAMEWORK
Spring Boot là một phần mở rộng của Spring Framework, được thiết kế nhằm giúp các lập trình viên loại bỏ bước cấu hình phức tạp mà Spring yêu cầu Nó được phát triển bằng ngôn ngữ Java và thuộc hệ sinh thái của Spring Framework.
1.2 Lịch sử phát triển Spring Boot?
Phiên bản đầu tiên của Spring Boot, phiên bản 1.0.0, ra đời vào tháng 10 năm
2012 để đáp ứng yêu cầu tính năng trong Spring jira Từ đó, Spring Boot đã trải qua một quá trình phát triển liên tục với sự cải tiến và phát hành hàng loạt các phiên bản mới, mang lại nhiều lợi ích hữu ích cho người dùng.
Hiện tại, phiên bản cao nhất của Spring Boot là Spring Boot 2.6.6, được phát hành vào ngày 04 tháng 2022.
1.3 Tại sao lại sử dụng Spring Boot?
Spring Boot nên được sử dụng vì:
- Spring Boot sử dụng phương pháp Dependency Injection, giúp quản lý các phụ thuộc giữa các thành phần trong ứng dụng một cách dễ dàng và linh hoạt.
- Nó cung cấp khả năng quản lý transaction trong cơ sở dữ liệu mạnh mẽ, giúp đảm bảo tính nhất quán và độ tin cậy của các thao tác dữ liệu.
- Spring Boot cho phép nhà phát triển thiết lập và chạy các ứng dụng Spring độc lập, sẵn sàng cho môi trường sản xuất mà không cần phải triển khai chúng lên máy chủ web Điều này giúp giảm bớt quy trình triển khai phức tạp và tăng tính linh hoạt trong việc phát triển và triển khai ứng dụng Java.
1.4 Ưu và nhược điểm của Spring Boot? Ưu điểm
- Spring Boot được thiết kế để giúp kỹ sư phần mềm tăng tốc độ phát triển ứng dụng, loại bỏ việc thiết lập và cấu hình ban đầu tốn thời gian khi triển khai môi trường.
- Phát triển ứng dụng dựa trên Spring trở nên dễ dàng và tiết kiệm thời gian.
- Tự động cấu hình tất cả các thành phần cho một ứng dụng Spring cấp sản xuất.
- Hỗ trợ kiểm tra ứng dụng web dễ dàng với sự tích hợp của các máy chủ HTTP nhúng như Tomcat, Jetty, v.v., giúp loại bỏ việc triển khai các tệp WAR.
- Cung cấp tệp tin để đơn giản hóa cấu hình Maven.
- Loại bỏ yêu cầu cấu hình XML.
- Dễ dàng truy cập vào cơ sở dữ liệu và các dịch vụ hàng đợi như MySQL,
Oracle, MongoDB, Redis, ActiveMQ và nhiều dịch vụ khác.
- Có cộng đồng lớn và nhiều tài liệu hướng dẫn, giúp dễ dàng tiếp cận và tìm hiểu.
- Thiếu kiểm soát: Do kiểu phát triển cố định, Spring Boot có thể 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 ứng dụng Spring Boot có thể khó khăn và tốn thời gian.
- Không phù hợp cho các dự án quy mô lớn: Trong một số trường hợp, khi làm việc với các microservices, Spring Boot có thể không phù hợp cho việc xây dựng ứng dụng nguyên khối.
Spring Boot tuân theo kiến trúc phân lớp:
Hình 1-1: Kiến trúc Spring Boot
Lớp Presentation: Lớp này xử lý các yêu cầu HTTP, thực hiện chuyển đổi tham số JSON thành đối tượng và xác thực yêu cầu trước khi chuyển tiếp đến lớp Business.
Nó chịu trách nhiệm cho phần giao diện người dùng, bao gồm các khung nhìn và xử lý các yêu cầu xác thực và HTTP.
Lớp Business: Lớp này xử lý các logic nghiệp vụ của ứng dụng Nó bao gồm các Business Layer và sử dụng các dịch vụ được cung cấp bởi lớp truy cập dữ liệu Lớp Business thực hiện các quy trình logic nghiệp, xác nhận và ủy quyền.
Lớp Persistence: Lớp này chứa các thực thể và thực hiện các thao tác truy xuất và lưu trữ dữ liệu Nó tương tác với cơ sở dữ liệu và thực hiện các truy vấn, lưu trữ và truy xuất dữ liệu của ứng dụng Lớp Persistence cũng đảm bảo việc dịch đối tượng nghiệp vụ sang đối tượng cơ sở dữ liệu và ngược lại.
Lớp Database biểu diễn cơ sở dữ liệu mà ứng dụng sử dụng, như MySQL, PostgreSQL, MongoDB Nó gồm các bảng dữ liệu và cung cấp các hoạt động CRUD (Tạo, Đọc/Truy xuất, Cập nhật, Xóa) để quản lý dữ liệu trong cơ sở dữ liệu.
Các lớp này cùng hợp tác để xây dựng một ứng dụng Spring Boot hoàn chỉnh, từ xử lý yêu cầu đến thực hiện logic nghiệp vụ, truy xuất và lưu trữ dữ liệu trong cơ sở dữ liệu.
1.6 Security Spring Boot với JWT
JWT (JSON Web Token) là một phương tiện để truyền thông tin giữa Client và Server, và các thông tin trong JWT được định dạng bằng JSON JWT gồm ba phần chính: header, payload và signature, và các phần này được ngăn cách bằng dấu chấm
JWT được sử dụng rộng rãi trong các ứng dụng Web và di động, đặc biệt trong các hệ thống xác thực và phân quyền Nó cho phép truyền thông tin và xác thực người dùng một cách an toàn và dễ dàng qua các yêu cầu và phản hồi giữa Client và Server.
Hình 1-2: Khái niệm của Json Web Token
Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token
Nhìn vào sơ đồ, ta có thể thấy luồng đi như sau :
1.Người dùng có thể thực hiện đăng nhập bằng cách gửi ID/mật khẩu hoặc sử dụng tài khoản mạng xã hội lên Authentication Server.
ReactJS
ReactJS là một thư viện được phát triển bởi ngôn ngữ JavaScript, nhằm giúp việc xây dựng giao diện người dùng (UI) trở nên đơn giản hơn Mục tiêu chính của ReactJS là tạo ra các ứng dụng nhanh, đơn giản, có hiệu năng cao và dễ dàng mở rộng.
Thành phần cơ bản trong ReactJS là các components, trong đó mỗi chương trình có thể bao gồm nhiều components khác nhau Các components này có thể được kết hợp để tạo thành một giao diện hoàn chỉnh và phức tạp Việc sử dụng components cho phép thay thế và nâng cấp các chức năng một cách dễ dàng, chỉ cần tập trung vào component chứa chức năng đó.
ReactJS sử dụng virtual DOM (Document Object Model), giúp tăng hiệu năng của trang web Khi trạng thái (state) của một component thay đổi, React sẽ tạo một virtual DOM mới và so sánh với virtual DOM hiện tại Bằng cách tìm ra sự khác biệt giữa hai virtual DOM này, React chỉ cần render lại phần khác biệt đó trên DOM thực tế của trình duyệt.
Cách tiếp cận này giúp cải thiện hiệu năng cho ứng dụng, vì React chỉ làm việc với một phần nhỏ của DOM cần được cập nhật, thay vì làm việc với toàn bộ DOM. Điều này giúp giảm thiểu việc truy cập và cập nhật DOM, đồng thời tối ưu hóa quá trình rendering và cải thiện hiệu suất của ứng dụng.
Hình 1-16: DOM chỉ render lại nơi bị thay đổi
JSX (Javascript XML) là một cú pháp mở rộng của ngôn ngữ JavaScript và thường được sử dụng trong React JSX giúp việc xây dựng các đoạn mã HTML trong React trở nên dễ dàng hơn Tuy nhiên, việc sử dụng JSX không bắt buộc, vì cú pháp của JSX chỉ là một cách viết ngắn gọn của phương thức React.createElement trong React.
Redux là một thư viện được viết bằng JavaScript, thường được sử dụng kết hợp với React để quản lý state trong ứng dụng Redux giúp chia sẻ state giữa các component trong ứng dụng React, từ đó giúp đồng bộ state giữa các component trở nên dễ dàng hơn và làm cho ứng dụng React hoạt động một cách nhất quán.
Hình 1-17: Các state dùng chung được lưu vào Redux store
2.3.2 Lý do ra đời Redux
Trong các ứng dụng Single Page Application (SPA) sử dụng JavaScript, yêu cầu và độ phức tạp ngày càng tăng Điều này dẫn đến việc tăng số lượng và sự phức tạp của các component trong ứng dụng Do đó, nhu cầu quản lý state của các component cũng trở nên quan trọng hơn.
Redux được tạo ra để đáp ứng nhu cầu này Với Redux, state của ứng dụng được duy trì tại một nơi duy nhất gọi là "store", và mỗi component có thể truy cập vào bất kỳ state nào trong store này Điều này cho phép mỗi khi cần thay đổi state của một tập hợp component, ta chỉ cần thay đổi state tại store là đủ.
2.3.3 Các thành phần của Redux
Ba thành phần cơ bản của Redux gồm: Actions, Store và Reducers.
Actions là một object trong JavaScript, có hai thuộc tính chính là type (mô tả cho action) và payload (dữ liệu đi kèm với action) Action quyết định cách state sẽ được thay đổi Actions được gửi bằng cách gọi phương thức store.dispatch(actions), và sau khi gọi phương thức này, actions sẽ được chuyển đến reducer để xử lý.
Reducers là các hàm nguyên thủy, nhận vào state hiện tại và action được gửi đến, sau đó trả về một state mới dựa trên action Reducer quyết định cách state sẽ thay đổi dựa trên action nhận được Sau khi reducer trả về state mới, store sẽ ghi nhận và cập nhật lại state hiện tại.
Store là nơi lưu trữ state hiện tại của ứng dụng Mỗi ứng dụng Redux chỉ có một store duy nhất Store có các phương thức như getState() để truy cập state hiện tại,dispatch() để gửi actions đến reducers và subscribe() để đăng ký các listener khi state thay đổi.
My SQL
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational
Database Management System - RDBMS) hoạt động theo mô hình client-server.
MySQL có khả năng chạy trên hầu hết các nền tảng, bao gồm Linux, UNIX và
MySQL được sử dụng rộng rãi trong các ứng dụng web lớn như Facebook,
Twitter, YouTube, Google và Yahoo! bởi khả năng lưu trữ dữ liệu hiệu quả mà nó cung cấp MySQL thường được kết hợp với các ứng dụng web để quản lý và lưu trữ dữ liệu.
Với tính năng và khả năng của mình, MySQL trở thành một giải pháp phổ biến và đáng tin cậy trong việc lưu trữ dữ liệu cho các ứng dụng web, đáp ứng nhu cầu của các công ty và tổ chức lớn.
3.2 Ưu điểm và nhược điểm của MySQL Ưu điểm :
- MySQL là một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thị trường và được sử dụng rộng rãi trong các ứng dụng web và doanh nghiệp Nó có cộng đồng lớn và hỗ trợ tốt từ cộng đồng người dùng.
- MySQL có khả năng xử lý dữ liệu lớn và tốc độ truy vấn nhanh Nó hỗ trợ các chỉ mục và tối ưu hóa truy vấn, giúp tăng hiệu suất trong việc truy xuất và xử lý dữ liệu.
MySQL đảm bảo tính bảo mật cao thông qua các tính năng quản lý người dùng, phân quyền truy cập và mã hóa dữ liệu Ngoài ra, MySQL còn có khả năng xử lý các vấn đề bảo mật như xác thực và mã hóa thông tin, bảo vệ dữ liệu khỏi các truy cập trái phép và rò rỉ dữ liệu.
- MySQL có khả năng mở rộng và linh hoạt Nó cho phép bạn tăng cường khả năng xử lý và lưu trữ bằng cách sử dụng các cụm server (server clusters) hoặc kỹ thuật nhân rộng dữ liệu (sharding).
- MySQL có khả năng tương thích đa nền tảng, hoạt động trên nhiều hệ điều hành như Linux, UNIX và Windows.
- MySQL có giới hạn về quản lý dữ liệu phân tán (distributed data management) so với các hệ quản trị cơ sở dữ liệu lớn hơn như Oracle.
- Một số tính năng cao cấp như replikasi (replication) và clustering chỉ có sẵn trong phiên bản thương mại của MySQL (MySQL Enterprise Edition).
- Trong một số tình huống với khối lượng dữ liệu lớn và truy vấn phức tạp, MySQL có thể gặp phải hiệu suất giới hạn so với các hệ quản trị cơ sở dữ liệu mạnh hơn như Oracle hoặc PostgreSQL.
- MySQL có thể khó khăn trong việc quản lý và tối ưu hóa hiệu suất truy vấn khi mô hình dữ liệu phức tạp và yêu cầu truy vấn phức tạp hơn.
Post Man
Postman là một công cụ phổ biến phục vụ mục đích tương tác với API, tiêu biểu là API REST Thông qua Postman, người dùng có thể kiểm tra và thử nghiệm API một cách dễ dàng mà không cần triển khai viết code.
Chức năng chính của Postman là gì?
- Cho phép gửi HTTP Request với method GET, POST, PUT và DELETE.
- Người dùng có thể post dữ liệu dưới dạng text, form, json…
- Kết quả hiện về và trả về sẽ dưới dạng hình ảnh, text, XML, JSON,
- Có thể hỗ trợ authorization.
- Có thể thực hiện thay đổi header của các request.
RESTFUL API
REST là viết tắt của REpresentational State Transfer, đây là một kiểu kiến trúc được sử dụng để xây dựng các dịch vụ web Trong mô hình client-server, REST đề xuất sử dụng các quy tắc để tạo ra các dịch vụ web REST yêu cầu máy khách gửi yêu cầu và nhận phản hồi dưới dạng đối tượng dữ liệu REST sử dụng các phương thứcHTTP như GET, POST, PUT và DELETE để quản lý tài nguyên trên ứng dụng web.REST không định nghĩa logic code của ứng dụng và không bị ràng buộc bởi ngôn ngữ lập trình hoặc framework cụ thể, điều này cho phép mọi ngôn ngữ và framework có thể thiết kế một RESTful API.
Hình 1-19: Cách thức hoạt động của ResfulAPI
REST chủ yếu hoạt động trên giao thức HTTP và sử dụng các phương thức HTTP để thực hiện các hoạt động cơ bản Các phương thức này bao gồm:
GET: Sử dụng để truy vấn và nhận về một tài nguyên hoặc danh sách các tài nguyên.
POST: Sử dụng để tạo mới một tài nguyên.
PUT: Sử dụng để cập nhật thông tin của một tài nguyên.
DELETE: Sử dụng để xóa một tài nguyên.
Các phương thức này thường được gọi là CRUD, tương ứng với các hoạt độngCreate, Read, Update và Delete trên tài nguyên RESTful API sẽ sử dụng các phương thức này để quản lý tài nguyên trên ứng dụng web.
ChatGPT
Chat GPT (Generative Pre-trained Transformer) là một mô hình học sâu được đào tạo trên một lượng lớn dữ liệu ngôn ngữ tự nhiên, để có thể tạo ra các câu hoàn chỉnh và ý nghĩa Chat GPT là một trong những mô hình NLP (Natural Language
Chat GPT, một mô hình ngôn ngữ tiên tiến được OpenAI phát triển dựa trên kiến trúc GPT-3.5, có khả năng xử lý ngôn ngữ tự nhiên vượt trội Công cụ này có khả năng trả lời câu hỏi, đưa ra dự đoán và tạo văn bản sáng tạo dựa trên thông tin cung cấp Nhờ các tính năng mạnh mẽ này, Chat GPT được ứng dụng rộng rãi trong nhiều lĩnh vực như chatbot, dịch máy, phân tích tình cảm và sáng tác văn bản tự động.
Hình 1-20: Giao diện chat GPT
6.2 Các bước tích hợp chatGPT với website LaptopPT:
_Bước 1: Đăng nhập tài khoản OpenAI, sau đó truy cập Personal → View API key và chọn Create new secret key để tạo ra API key mới.
Hình 1-21: Giao diện tạo API key trên OpenAI
_ Bước 2: Lưu API key vừa tạo vào biến môi trường của react app.
Hình 1-22: Lưu API key vào biến môi trường
_Bước 3: Xây dựng các component cần thiết cho chat box.
Hình 1-23: Những component cho chat box
_Bước 4: Trong component Chat.js, khi người dùng gửi lên tin nhắn, ta sẽ gọi đến API của OpenAI với API key được truyền vào header Authorization.
Câu trả lời hoặc lỗi(nếu xảy ra) của chatGPT sẽ được lưu trong data mà API trả về và sẽ được lưu vào state messageListChatGPT của component Chat, sau đó render lên màn hình.
Hình 1-24: Gọi đến API của OpenAI
Chat RealTime
Mặc dù chatGPT có thể trả lời rất nhiều câu hỏi, nhưng đôi khi sẽ có những câu hỏi cần chính con người trả lời, hoặc chỉ đơn giản là khách hàng không muốn chat với máy.
Vì vậy nhóm chúng em đã xây dựng thêm một chat box realtime dùng để chat với admin của LaptopPT.
7.2 Các bước xây dựng chat box admin:
_Bước 1: Đăng nhập tài khoản Firebase và tạo project có tên LaptopShop.
Hình 1-25: Tạo project trên Firebase thành công
_ Bước 2: Kết nối project đã tạo ở bước 1 với react app, các thiết lập được thực hiện trong tệp firebaseConfig.js
_Bước 3: Xây dựng các function cần thiết để tương tác với realtime database của firebase trong tệp RealtimeDatabase.js
Hình 1-27: Ví dụ function đọc dữ liệu chat trên database
Trong component Chat.js, khi người dùng gửi lên tin nhắn, ta sẽ gọi function writeUserChatData để ghi tin nhắn này vào database.
Dịch vụ onValue của Firebase Cloud Firestore là nơi chúng ta đăng ký một hàm lắng nghe để khi dữ liệu thay đổi thì thực hiện hành động tương ứng (ví dụ như update danh sách các tin nhắn) Khi sử dụng hàm này thì danh sách tin nhắn giữa admin và khách hàng sẽ được cập nhật theo thời gian thực, mà không cần phải load lại trang, giúp cho trải nghiệm người dùng được tốt hơn.
Hình 1-29: Gọi function onValue trên node account user id
Paypal payment
- PayPal là một hình thức thanh toán trực tuyến.
- Nó cho phép người dùng kết nối tài khoản ngân hàng hoặc thẻ tín dụng để thực hiện các giao dịch trực tuyến.
- PayPal được sở hữu bởi công ty PayPal Holdings, Inc và có trụ sở tại California, Hoa Kỳ.
- PayPal cung cấp tính năng bảo mật và các công cụ giúp người dùng quản lý các giao dịch của họ.
- Các doanh nghiệp có thể sử dụng PayPal để chấp nhận thanh toán trực tuyến từ khách hàng của họ.
Truy cập và đăng ký tài khoản Paypal
Hình 1-30: Đăng ký tài khoản business trên Paypal Điền các thông tin cần thiết và đăng ký
Hình 1-31: Điền thông tin để tạo tài khoản Paypal business
Sau khi đăng ký thành công
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công
Confirm thông tin tài khoản
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal
Vào môi trường developer để thử nghiệp và tạo APP để gọi API
Hình 1-35: Vào môi trường developer của Paypal
Tạo xong sẽ sinh ra App
Hình 1-38: Client ID và Secret key được sinh ra
Gắn 2 key này vào ứng dụng trong file Application.properties
Hình 1-39: Lưu key vào source code
Telegram Bot
Telegram là một ứng dụng nhắn tin nhanh và bảo mật, cung cấp khả năng tương tác giữa người dùng và bot thông qua giao thức và API Telegram.
Telegram Bot là một ứng dụng hoạt động tự động trên nền tảng Telegram, được lập trình để tương tác với người dùng thông qua tin nhắn và cung cấp các dịch vụ và chức năng đa dạng.
9.2 Các đặc điểm và khả năng của Telegram Bot
Telegram Bot cho phép gửi và nhận tin nhắn từ người dùng thông qua giao diện chat.
Người dùng có thể tương tác với bot bằng cách gửi tin nhắn đơn giản hoặc sử dụng câu lệnh/commmand đã được định nghĩa trước.
Telegram Bot có thể cung cấp các dịch vụ như tra cứu thông tin, gửi tin nhắn tự động, cập nhật thông tin từ nguồn dữ liệu, tạo lịch trình và nhắc nhở, quản lý tài liệu và nhiều chức năng khác.
Bot cũng có khả năng phản hồi tự động với các thông báo hoặc hành động đúng theo yêu cầu của người dùng.
Telegram Bot có khả năng linh hoạt trong việc tạo và tùy chỉnh các câu lệnh và hành vi.
Bot có thể tích hợp với các dịch vụ và ứng dụng khác thông qua API, mở ra nhiều khả năng kết nối và tích hợp.
Bước 1: Mở ứng dụng Telegram trên điện thoại hoặc truy cập vào phiên bản web của Telegram trên máy tính.
Bước 2: Tìm kiếm BotFather trong ô tìm kiếm BotFather là một bot chính thức của Telegram.
Bước 3: Bắt đầu một cuộc trò chuyện với BotFather bằng cách nhấp vào tên bot hoặc gửi một tin nhắn mới.
Bước 4: Gửi tin nhắn "/newbot" để tạo một bot mới.
Bước 5: BotFather sẽ yêu cầu bạn đặt tên cho bot Hãy nhập tên của bot theo yêu cầu.
Bước 6: Tiếp theo, BotFather yêu cầu bạn đặt tên người dùng (username) cho bot Lưu ý rằng tên người dùng phải kết thúc bằng "bot" hoặc "Bot" Hãy nhập tên người dùng theo yêu cầu.
Sau khi hoàn thành các bước trước đó, BotFather sẽ tạo một bot mới và cung cấp cho bạn một mã token Mã token này là duy nhất và sẽ được sử dụng để truy cập API của bot.
Bước 8: Sao chép mã token được cung cấp bởi BotFather Bạn sẽ sử dụng mã token này trong mã của bạn để thiết lập kết nối và gửi/receive tin nhắn từ bot.
Sau khi bạn đã có mã token, bạn có thể sử dụng nó trong mã của mình để thiết lập kết nối với Telegram Bot API và xử lý tin nhắn từ người dùng.
KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU
KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ
Chúng em đã khảo sát thực tế trên 4 trang web bán các máy tính và linh kiện máy tính :
- https://www.thegioididong.com/ Ưu điểm chung:
- Giao diện đẹp , và dễ sử dụng thân thiện với người dùng
- Sắp xếp danh mục hợp lý và logic(theo nhu cầu tìm kiếm của khách hàng).
- Tốc độ load trang web nhanh
- Hỗ trợ nhiều chức năng, trả góp cùng nhiều hình thức thanh toán
Hình 2-1: Giao diện trang chủ ViettelStore Ưu điểm riêng:
- Sản phẩm mới được cập nhập trang đầu.
- Có thanh chat với nhân viên tư vấn.
- Thông tin sản phẩm đầy đủ (nhiều lựa chọn).
- Có đánh giá sản phẩm cho khách hàng
- Không có thông báo về sản phẩm mới ra mắt.
- Hình ảnh của sản phẩm chưa được bắt mắt , nên có thêm video sản phẩm để sống động và kích thích người dùng
Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore
Hình 2-3: Giao diện trang chủ NguyenKim
- Không có phần chat tư vấn với khách hàng
- Tìm kiếm chưa được tối ưu
Hình 2-4: Giao diện trang sản phẩm NguyenKim
- Tốc độ load trang web nhanh.
- Giao diện đẹp , thân thiện người dùng
- Sắp xếp danh mục hợp lý và logic (theo nhu cầu khách hàng).
- Thông tin sản phẩm chi tiết (tối ưu).
Hình 2-5: Giao diện trang chủ PhucAnh
- Tìm kiếm chưa được chính xác và tối ưu
Hình 2-6: Giao diện trang sản phẩm PhucAnh
Hình 2-7: Giao diện trang chủ thegioididong Ưu điểm :
- Tìm kiếm thông tin chính xác , nhanh chóng
- Sản phẩm được sắp xếp theo logo theo từng hãng rất phù hợp với người dung
- Hỗ trợ trả góp cùng nhiều hình thức thanh toán
- Thông tin sản phẩm chi tiết (tối ưu).
Hình 2-8: Giao diện trang sản phẩm thegioididong
MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU
Một website bán laptop đem lại trải nghiệm mua sắm tiện lợi và tuyệt vời Khách hàng có thể dễ dàng tìm hiểu chi tiết về các sản phẩm laptop, bao gồm các thông số kỹ thuật, để lựa chọn phù hợp với nhu cầu Đối với các hãng laptop và cửa hàng đại lý, website này giúp cập nhật và quản lý thông tin sản phẩm dễ dàng, đồng thời tương tác trực tiếp với khách hàng, trả lời câu hỏi và hỗ trợ mua bán thuận lợi Website bán laptop mang lại sự tiện dụng và linh hoạt, hỗ trợ cả khách hàng và đối tác kinh doanh trong thương mại điện tử laptop.
2.2 Đặc tả các dữ liệu cần thiết để xây dựng nên hệ thống web bán laptop
Dữ liệu về thông tin người dùng:Tên đăng nhập, Mật khẩu, Email,Tên, Địa chỉ,
Số điện thoại, Hình ảnh đại diện(nếu có), Trạng thái tài khoản, Quyền sử dụng hệ thống, …
Dữ liệu về sản phẩm được bán (laptop):Tên laptop, Loại laptop, Giá, Số lượng tồn kho, Hình ảnh laptop, Mô tả thông tin laptop, Phần trăm giảm giá(nếu có),…
Dữ liệu về đơn đặt hàng:Thông tin người nhận hàng (Họ tên liên hệ, Số điện thoại, Địa chỉ, Email), Ngày đặt, Ghi chú, Thông tin sản phẩm được đặt (Tên laptop,
Số lượng mua , phần trăm giảm giá, phí ship), tổng tiền đơn hàng, …
2.2.1 Các chức năng của Admin
- Quản lý tin tức: thêm, xóa và sửa tin tức
- Quản lý nhà cung cấp: thêm, xóa và sửa nhà cung cấp
- Quản lý sản phẩm: thêm, xóa và sửa sản phẩm
- Quản lý đơn hàng: hủy, duyệt, xem chi tiết, sửa đơn hàng
- Thống kê: thống kê doanh thu , đơn hàng , số lượng khách hàng
- Quản lí danh sách khách hàng
- Tương tác trực tiếp với người dung ( chat RealTime)
2.2.2 Các chức năng của Customer
- Xem, tìm kiếm sản phẩm
- Tìm kiếm sản phẩm bằng giọng nói
- Thêm sản phẩm vào giỏ
- Xem tình trạng đơn hàng đã đặt
- Xem lịch sử đơn hàng
- Lọc sản phẩm theo các tiêu chí
- Sắp xếp sản phẩm theo các tiêu chí
- Đặt mua và thanh toán online (paypal)
- Nhận email khi đăng ký
- Quản lý thông tin cá nhân
- Tương tác trực tiếp với cửa hàng ( chat RealTime)
- Được tự động cập nhật các tin tức mới nhất về sản phẩm cũng như thị trường laptop thông qua telegram
- Sử dụng ChatGPT free để tìm hiểu thông tin cần thiết của các loại máy tính ( và nhiều hơn thế nữa ).
MÔ HÌNH HÓA YÊU CẦU
Hình 2-9: Lược đồ Usecase tổng quát
3.1.1 Usecase chi tiết cho quản trị viên (Admin) :
Hình 2-10: Sơ đồ use case chi tiết quản trị viên
3.1.2 Use case chi tiết cho khách hàng:
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng
3.1.3 Use case chi tiết cho khách chưa có tài khoản:
Hình 2-12: Sơ đồ use case chi tiết cho khách
Bảng 2-1: Mô tả Usecase đăng kí tài khoản
Name Đăng ký tài khoản
Mô tả Đăng ký tài khoản cho người dùng.
Tiền điều kiện Người dùng đã truy cập trang chủ của hệ thống.
Hậu điều kiện Nếu đăng kí thành công: Người dùng sẽ có tài khoản để đăng nhập vào hệ thống.
Nếu không đăng ký thành công: Hệ thống sẽ thông báo đăng ký thất bại và không thể mua hàng được
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng đăng ký
1 Người dùng nhấp vào đăng ký.
2 Hệ thống hiển thị giao diện đăng ký
3 Người dùng nhập đầy đủ thông tin vào giao diện đăng kí và nhấp vào nút đăng ký.
4 Hệ thống gửi mã xác thực đến email người dùng đã nhập.
5 Người dùng nhập mã xác thực vào trang xác thực tài khoản.
6 Hệ thống thông báo đăng ký thành công và hiển thị giao diện Đăng nhập
Luồng sự kiện phụ Người dùng đăng ký một tài khoản đã tồn tại:
1 Hệ thống thông báo tài khoản đã tồn tại và đăng ký thất bại.
3.2.2 Xem chi tiết sản phẩm
Bảng 2-2: Mô tả Usecase xem chi tiết sản phẩm
Name Xem chi tiết sản phẩm
Mô tả Xem chi tiết sản phẩm mà người dùng đã tìm kiếm.
Tiền điều kiện Người dung truy cập vào thông tin chi tiết của sản phẩm.
Hậu điều kiện Nếu xem sản phẩm thành công: Người dùng sẽ xem thông tin chi tiết của sản phẩm.
Nếu xem sản phẩm không thành công: Hệ thống thông báo sản phẩm này không tồn tại
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng xem sản phẩm
1 Hệ thống hiển thị danh sách sản phẩm.
2 Người dùng chọn vào sản phẩm muốn xem
3 Hệ thống sẽ hiển thị thông tin chi tiết về sản phẩm đó.
Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm
Name Tìm kiếm sản phẩm
Mô tả Tìm kiếm những sản phẩm mà người dùng cần xem.
Tiền điều kiện Người dùng ở trang chủ của hệ thống.
Hậu điều kiện Nếu tìm kiếm sản phẩm thành công: Hệ thống sẽ hiển thị ra sản phẩm người dùng muốn xem.
Nếu tìm kiếm sản phẩm không thành công: Hệ thống sẽ thông báo sản phẩm không tồn tại.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng tìm kiếm sản phẩm
1 Người dùng nhập vào thanh tìm kiếm sản phẩm muốn xem.
2 Hệ thống sẽ hiển thị ra sản phẩm mà người dùng muốn tìm.
Luồng sự kiện phụ Người dùng tìm kiếm một sản phẩm mà hệ thống không có:
1 Hệ thống thông báo sản phẩm không tồn tại.
Bảng 2-4: Mô tả Usecase đăng nhập
Mô tả Đăng nhập vào tài khoản của người dùng.
Tiền điều kiện Người dùng chọn vào chức năng Đăng nhập
Hậu điều kiện Nếu đăng nhập thành công: Người dùng sẽ đăng nhập vào được hệ thống.
Nếu không đăng nhập thành công: Hệ thống sẽ thông báo người dùng nhập lại thông tin đăng nhập.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng đăng nhập
1 Hệ thống hiển thị giao diện đăng nhập.
2 Người dùng nhập đầy đủ thông tin giao diện đăng nhập.
3 Hệ thống sẽ thông báo đăng nhập thành công.
Luồng sự kiện phụ Người dùng đăng nhập một tài khoản sai hoặc không tồn tại:
1 Hệ thống thông báo đăng nhập thất bại.
3.2.5 Xem tình trạng đơn hàng
Bảng 2-5: Mô tả Usecase xem tình trạng đơn hàng
Name Xem tình trạng đơn hàng
Mô tả Xem tình trạng đơn hàng mà người dùng đã đặt hàng.
Tiền điều kiện Người dùng đã đăng nhập thành công vào hệ thống.
Hậu điều kiện Nếu xem tình trạng đơn hàng thành công: Người dùng xem tình trạng đơn hàng.
Nếu xem tình trạng đơn hàng thất bại: Hệ thống sẽ hiển thị đơn mua trống.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng xem tình trạng đơn hàng
1 Người dùng chọn Đơn mua
2 Hệ thống sẽ hiển thị những đơn hàng đã thanh toán và tình trạng của nó.
Luồng sự kiện phụ Người dùng xem tình trạng sản phẩm khi mới tạo tài khoản và chưa đặt sản phẩm nào.
1 Hệ thống sẽ không hiển thị sản phẩm và tình trạng sản phẩm ở giao diện Đơn mua.
Bảng 2-6: Mô tả Usecase đánh giá sản phẩm
Name Đánh giá sản phẩm
Mô tả Đánh giá sản phẩm khi người dùng nhận được sản phẩm
Tiền điều kiện Người dùng đăng nhập thành công và đã nhận được sản phẩm
Hậu điều kiện Nếu viết phản hồi thành công: Người dùng viết phản hồi về sản phẩm mình đã mua.
Nếu viết phản hồi không thành công: Hệ thống sẽ thông báo viết phản hồi thất bại.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng viết phản hồi
1 Người dùng chọn vào trang chi tiết sản phẩm muốn đánh giá
2 Hệ thống sẽ hiển thị giao diện Viết phản hồi
3 Người dùng nhập phản hồi và nhấn Hoàn thành
4 Hệ thống sẽ hiển thị thông báo Cảm ơn phản hồi của bạn
Luồng sự kiện phụ Người dùng viết phản hồi không đủ số lượng ký tự:
1 Hệ thống sẽ thông báo Người dùng nhập thêm.
Bảng 2-7: Mô tả Usecase đặt mua sản phẩm
Name Đặt mua sản phẩm
Mô tả Đặt mua sản phẩm mà người dùng muốn mua.
Tiền điều kiện Người dùng đã đăng nhập thành công vào hệ thống và đang xem sản phẩm
Hậu điều kiện Nếu người dùng đặt mua thành công: Người dùng đặt mua được sản phẩm cần mua.
Nếu người dùng đặt mua không thành công: Hệ thống sẽ thông báo Sản phẩm không đủ số lượng Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng đặt mua sản phẩm
1 Người dùng lựa chọn sản phẩm và nhấn nút Thêm vào giỏ.
2 Hệ thống sẽ thông báo Sản phẩm được thêm vào giỏ hàng và chuyển đến giao diện Giỏ hàng để tiến hành mua hàng.
Luồng sự kiện phụ Người dùng đặt mua sản phẩm không đủ số lượng:
1 Hệ thống sẽ hiển thị thông báo Sản phẩm không đủ số lượng bạn cần mua.
Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng
Name Cập nhật giỏ hàng
Mô tả Cập nhật giỏ hàng mà người dùng muốn thay đổi số lượng.
Tiền điều kiện Người dùng đã đăng nhập thành công vào hệ thống và đã nhấp giỏ hàng.
Hậu điều kiện Nếu cập nhật giỏ hàng thành công: Người dùng sẽ thay đổi được số lượng sản phẩm cần mua.
Nếu cập nhật giỏ hàng không thành công: Hệ thống sẽ thông báo Số lượng sản phẩm không đủ
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng cập nhật giỏ hàng
1 Hệ thống sẽ hiển thị giao diện Giỏ hàng
2 Người dùng thay đổi số lượng sản phẩm
3 Hệ thống sẽ cập nhật lại giá theo số lượng sản phẩm
Luồng sự kiện phụ Người dùng thay số lượng sản phẩm lớn hơn số lượng trong kho:
1 Hệ thống thông báo Số lượng sản phẩm không đủ
Bảng 2-9: Mô tả Usecase xóa giỏ hàng
Mô tả Xóa sản phẩm mà người dùng không muốn mua nữa ra khỏi giỏ hàng.
Tiền điều kiện Người dùng đã đăng nhập thành công vào hệ thống và đã nhấp giỏ hàng.
Hậu điều kiện Nếu xóa giỏ hàng thành công: Người dùng sẽ xóa được sản phẩm không còn muốn mua.
Nếu xóa giỏ hàng không thành công: Hệ thống sẽ không xóa sản phẩm nào.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng xóa giỏ hàng
1 Hệ thống sẽ hiển thị giao diện Giỏ hàng
2 Người dùng chọn xóa sản phẩm
3 Hệ thống sẽ xóa sản phẩm người dùng muốn xóa ra khỏi giỏ.
Luồng sự kiện phụ Người dùng muốn xóa giỏ hàng khi giỏ hàng trống:
1 Hệ thống không hiển thị sản phẩm và nút xóa sản phẩm
3.2.10 Hủy đơn hàng (Khách hàng)
Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng)
Name Hủy đơn hàng (Khách hàng)
Mô tả Người dùng hủy đơn hàng khi không muốn mua nữa.
Tiền điều kiện Khách hàng đăng nhập thành công tài khoản đã đăng ký
Hậu điều kiện Hủy đơn hàng thành công : Đơn hàng sẽ được hủy
Hủy đơn hàng thất bại : Không có đơn nào được hủy.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện vào đơn mua
1 Người dùng chọn Hủy đơn hàng
2 Hệ thống sẽ hủy đơn hàng và thông báo Hủy đơn hàng thành công
Luồng sự kiện phụ Nếu người dùng hủy đơn hàng không thuộc trạng thái “Chưa duyệt”
1 Người dùng không thể Hủy đơn hàng
Bảng 2-11: Mô tả Usecase thêm sản phẩm
Mô tả Thêm sản phẩm mới vào danh sách sản phẩm đang được bán.
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Thêm sản phẩm thành công : Sản phẩm sẽ được xóa và hệ thống thông báo thêm thành công
Thêm sản phẩm thất bại : Hệ thống sẽ không thêm được sản phẩm mới.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chọn chức năng thêm sản phẩm
1 Chọn chức năng thêm sản phẩm
2 Hệ thống hiển thị cửa sổ các thông tin sản phẩm cần nhập.
3 Người dùng nhập các thông tin của sản phẩm
4 Hệ thống kiểm tra các thông tin có hợp lệ về miền giá trị
5 Hệ thống thêm thông tin sản phẩm vào cơ sở dữ liệu, thông báo cho người dùng thành công
Luồng sự kiện phụ Nếu dữ liệu người dùng nhập thiếu, hoặc không đúng miền dữ liệu
1 Hiện thông báo cho người dùng lỗi thất bại.
2 Quay lại màn hình thêm sản phẩm để người dùng sửa lỗi
Bảng 2-12: Mô tả Usecase thêm nhà cung cấp
Name Thêm nhà cung cấp
Mô tả Thêm nhà cung cấp mới vào danh sách nhà cung cấp của cửa hàng.
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Thêm nhà cung cấp thành công : Thêm nhà cung cấp mới và hệ thống sẽ thông báo thành công.
Thêm nhà cung cấp thất bại : Hệ thống sẽ không thêm mới được nhà cung cấp cần thêm.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chọn quản lí nhà cung cấp và nhấp vào thêm nhà cung cấp
2 Hệ thống sẽ hiển thị giao diện để người dùng tạo một nhà cung cấp mới
3 Người dùng nhập đầy đủ thông tin nhà cung cấp và chọn thêm
4 Hệ thống sẽ thông báo thêm nhà cung cấp thành công
Luồng sự kiện phụ Nếu dữ liệu người dùng nhập thiếu, hoặc không đúng miền dữ liệu
1 Hệ thống sẽ thêm nhà cung cấp thất bại.
2 Hệ thống sẽ hiển thị trang thêm nhà cung cấp để người dùng nhập lại.
Bảng 2-13: Mô tả Usecase thêm tin tức
Mô tả Thêm tin tức vào danh sách tin tức của cửa hàng
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Thêm tin tức thành công : tin tức mới được thêm, hệ thống sẽ thông báo thêm thành công
Thêm tin tức thất bại : Hệ thống sẽ không thêm mới được tin tức
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chọn quản lí tin tức và chọn chức năng thêm tin tức
1 Hệ thống sẽ hiển thị giao diện để người dùng tạo một tin tức mới
2 Người dùng nhập đầy đủ thông tin tin tức và chọn thêm
3 Hệ thống sẽ thông báo thêm tin tức thành công
Luồng sự kiện phụ Nếu dữ liệu người dùng nhập thiếu, hoặc không đúng miền dữ liệu
1 Hệ thống sẽ thêm tin tức thất bại.
2 Hệ thống sẽ hiển thị giao diện cho người dùng nhập lại.
Bảng 2-14: Mô tả Usecase hủy đơn hàng
Mô tả Người dùng hủy đơn hàng khi khách hàng không muốn mua nữa.
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Hủy đơn hàng thành công : Đơn hàng sẽ được hủy
Hủy đơn hàng thất bại : Không có đơn nào được hủy.
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện vào đơn mua
1 Người dùng chọn Hủy đơn hàng
2 Hệ thống sẽ hủy đơn hàng và thông báo Hủy đơn hàng thành công
Luồng sự kiện phụ Nếu người dùng hủy đơn hàng không thuộc trạng thái “Chưa duyệt”
1 Hệ thống sẽ không hủy được đơn hàng
Bảng 2-15: Mô tả Usecase duyệt đơn hàng
Mô tả Người dùng duyệt đơn hàng để giao hàng cho khách
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Duyệt đơn hàng thành công : Đơn hàng sẽ được duyệt và chuyển trạng thái sang “Đã duyệt”
Duyệt đơn hàng thất bại : Đơn hàng sẽ không được duyệt
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chọn quản lý đơn hàng
1 Người dùng chọn đơn hàng cần duyệt
2 Hệ thống sẽ duyệt đơn hàng và thông báo Duyệt đơn hàng thành công
Luồng sự kiện phụ Nếu người dùng duyệt đơn hàng không thuộc trạng thái “Chưa duyệt”
1 Hệ thống sẽ không hủy được đơn hàng
3.2.16 Xác nhận đơn hàng đã giao
Bảng 2-16: Mô tả Usecase xác nhận đơn hàng đã giao
Name Xác nhận đơn hàng đã giao
Mô tả Người dùng xác nhận đơn hàng đã giao cho khách
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Duyệt đơn hàng thành công : Đơn hàng sẽ được duyệt và chuyển trạng thái sang “Đã giao”
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chọn quản lý đơn hàng
1 Người dùng chọn đơn hàng cần giao trong tab trang thái Đã duyệt
2 Hệ thống sẽ duyệt đơn hàng và thông báo Duyệt đơn hàng thành công
Bảng 2-17: Mô tả Usecase thống kê
Mô tả Người dùng thống kê doanh thu và những sản phẩm bán chạy
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Thống kê thành công : Hệ thống hiển thị doanh thu và số lượng đơn hàng
Luồng sự kiện chính Use case bắt đầu khi người dùng thực hiện chức năng thống kê
Hệ thống sẽ hiển thị doanh thu và những đơn hàng mới
Bảng 2-18: Mô tả Usecase thanh toán Paypal
Mô tả Thanh toán online bằng Paypal sản mà người dùng đã thêm vào giỏ hàng sau khi nhận hàng.
Tiền điều kiện Người dùng đã đăng nhập thành công và nhấp vào đặt hàng trong giỏ hàng
Hậu điều kiện Nếu thanh toán thành công: Người dùng thanh toán sản phẩm mình muốn đặt.
Nếu thanh toán không thành công: Hệ thống sẽ thông báo thanh toán thất bại.
Luồng sự kiện chính Usecase bằng đầu khi người dùng nhập đầy đủ thông tin địa chỉ cần giao và chọn phương thức thanh toán bằng Paypal:
1 Người dùng chọn Đặt hàng
2 Hệ thống sẽ chuyển tiếp đến trang Paypal và yêu cầu đăng nhập
3 Người dùng đăng nhập tài khoản thành công.
4 Hệ thống sẽ hiển thị thông tin đơn hàng để thanh toán
5 Người dùng chọn vào thanh toán
6 Hệ thống sẽ thông báo đặt hàng và thanh toán thành côn
Luồng sự kiện phụ Người dùng khi đặt nhập thành công nhưng quay lại không muốn thanh toán nữa:
- Hệ thống sẽ thống báo đặt hàng và thanh toán thất bại
Bảng 2-19: Mô tả Usecase quản lý User
Name Quản lý người dùng
Mô tả Quản lý danh sách người dùng
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Hiển thị người dùng : Hệ thống hiển thị thông tin danh sách người dùng
Luồng sự kiện chính Use case bắt đầu khi admin thực hiện chức năng quản lý người dùng
Hệ thống sẽ hiển thị danh sách người dùng và admin có thể xem thông tin của người dùng và xóa những người dùng.
Mô tả Tương tác chat với người dùng
Tiền điều kiện Admin đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện Hiển thị danh sách tin nhắn của khách hàng : Hệ thống hiển thị thông tin trò chuyện với người dùng
Luồng sự kiện chính Use case bắt đầu khi admin thực hiện chức năng chat trò chuyện với người dùng
Hệ thống sẽ hiển thị danh sách người dùng và admin có thể trao đổi chia sẻ thông tin trực tiếp real time với người dùng
3.3 LƯỢC ĐỒ TUẦN TỰ (MỖI USECASE LÀ 1 LƯỢC ĐỒ TUẦN TỰ)
Hình 2-13: Lược đồ tuần tự đăng ký tài khoản
3.3.2 Xem chi tiết sản phẩm
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm
Hình 2-15: Lược đồ tuần tự tìm kiếm sản phẩm
Hình 2-16: Lược đồ tuần tự đăng nhập
Hình 2-17: Lược đồ tuần tự đăng xuất
3.3.6 Xem tình trạng đơn hàng
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng
Hình 2-19: Lược đồ tuần tự đánh giá sản phẩm
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm
Hình 2-21: Lược đồ tuần tự cập nhập giỏ hàng
Hình 2-22: Lược đồ tuần tự xóa giỏ hàng
Hình 2-23: Lược đồ tuần tự hủy đơn hàng
Hình 2-24: Lược đồ tuần tự thêm sản phẩm
Hình 2-25: Lược đồ tuần tự thêm nhà cung cấp
Hình 2-26: Lược đồ tuần tự thêm tin tức
Hình 2-27: Lược đồ tuần tự hủy đơn hàng
3.3.16 Xác nhận đơn hàng đã giao
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng
Hình 2-29: Lược đồ tuần tự duyệt đơn hàng
Hình 2-30: Lược đồ tuần tự thống kê
Hình 2-31: Lược đồ tuần tự thanh toán Paypal
3.3.20 Sửa địa chỉ giao hàng
Hình 2-32: Lược đồ tuần tự sửa địa chỉ giap hàng
Hình 2-33: Lược đồ tuần tự đổi mật khẩu
3.3.22 Cập nhật thông tin tài khoản
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản
Hình 2-35: Lược đồ tuần tự quên mật khẩu
Hình 2-36: Lược đồ tuần tự login Google
3.3.25 Thêm sản phẩm yêu thích
Hình 2-37: Lược đồ tuần tự thêm sản phẩm yêu thích
PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN LAPTOP 83 1 Thiết kế cơ sở dữ liệu
Thiết kế wireframe customer
Hình 3-4: Wireframe trang sản phẩm
2.3 Trang chi tiết sản phẩm
Hình 3-5: Wireframe trang chi tiết sản phẩm
Hình 3-6: Wireframe trang giỏ hàng
Hình 3-7: Wireframe trang thông tin đặt hàng
Hình 3-8: Wireframe trang liên hệ
Hình 3-9: Wireframe trang tin tức
2.8 Trang chi tiết tin tức
Hình 3-10: Wireframe trang chi tiết tin tức
Thiết kế Wireframe Admin
Hình 3-11: Wireframe trang chủ admin
Hình 3-12: Wireframe trang đơn hàng mới
Hình 3-13: Wireframe trang đơn hàng đã duyệt
Hình 3-14: Wireframe trang đơn hàng đang giao
Hình 3-15: Wireframe trang đơn hàng đã giao
Hình 3-16: Wireframe trang đơn hàng đã hủy
Hình 3-17: Wireframe trang quản lý người dùng
Hình 3-18: Wireframe trang chỉnh sửa người dùng
Hình 3-19: Wireframe trang quản lý sản phẩm
Hình 3-20: Wireframe trang quản lý nhà cung cấp
Hình 3-21: Wireframe trang quản lý tin tức
TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH
Môi trường cài đặt
- CPU có tốc độ tối thiểu 2,8 GHz
- Dung lượng ổ đĩa cứng tối thiểu 20 GB
- Bộ nhớ RAM tối thiểu 8 GB
- CPU có tốc độ tối thiểu 2 GHz
- Bộ nhớ RAM tối thiểu 4 GB
- IDE backend: Intellij ( hoặc eclipse)
- IDE front end: Visual studio code
- Quản lý mã nguồn: Github
- Quản trị cơ sở dữ liệu: MySQL Workbench 8.0 CB
- Thiết kế các bản vẽ: https://app.diagrams.net/
1.3 Yêu cầu các phiên bản ngôn ngữ và công nghệ sử dụng
- Ngôn ngữ sử dụng: Java 8
- Phiên bản Spring Boot: Spring Boot (Chọn 2.7.4)
Kiến trúc của chương trình
Hình 4-1: Kiến trúc tổ chức source backend
Hình 4-2: Kiến trúc tổ chức source backend
Thư mục gốc (Root directory):
Chứa các file cấu hình dự án như pom.xml (đối với Maven) hoặc build.gradle (đối với Gradle) Các file này định nghĩa các dependencies, plugins và cấu hình khác của dự án.
Có thể bao gồm các file khác như gitignore để xác định các file hoặc thư mục không được theo dõi bởi hệ thống quản lý phiên bản Git.
Thư mục mvn hoặc gradle: Đây là thư mục riêng của Maven và Gradle, chứa các file cấu hình và script cho công cụ quản lý dự án tương ứng Thường không cần thay đổi hay loại bỏ nó khỏi source code.
Chứa mã nguồn (source code) của dự án Thư mục này thường được chia thành các thư mục con như src/main và src/test để phân biệt giữa mã nguồn chính và mã nguồn kiểm thử.
Trong thư mục src/main, có thể có các thư mục như java (chứa mã nguồn Java), resources (chứa các file tài nguyên như file cấu hình, file properties, hình ảnh, v.v.) và web app (chứa các file HTML, CSS, JavaScript cho ứng dụng web).
Thư mục build (hoặc target): Được tạo ra sau khi dự án được xây dựng (build) Chứa các file đã biên dịch như file class, file JAR hoặc các file khác tương ứng với công cụ build được sử dụng
(target đối với Maven, build đối với Gradle).
Thư mục này thường không được lưu trữ trong hệ thống quản lý phiên bản và sẽ được tái tạo khi cần thiết.
Tuân theo mô hình 3 lớp :
Lớp Controller: Đặt trong thư mục "controller" Các class controller thường có hậu tố "Controller" để đánh dấu, ví dụ: UserController, AuthController,
Lớp Service: Đặt trong thư mục "service" Các class service thường có hậu tố
"Service" và tương ứng với các controller, ví dụ: UserService,
Lớp Data Access: Layer này bao gồm các thư mục sau đây:
Thư mục "repository": Chứa các interface hoặc class có hậu tố tương tự là
"Repository" để xử lý truy vấn cơ sở dữ liệu, ví dụ: UserRepository,
Thư mục "dto" hoặc "model": Chứa các class DTO (Data Transfer Object) hoặc model để đại diện cho dữ liệu trong hệ thống, ví dụ: UserDTO, ProductModel,
Thư mục "entity" hoặc "model": Chứa các class entity hoặc model tương ứng với cấu trúc dữ liệu trong cơ sở dữ liệu, ví dụ: UserEntity, Product Entity,
Thư mục "util": Chứa các class util (tiện ích) để xử lý các tác vụ linh tinh, ví dụ: DateUtil, CalculationUtil,
Thư mục "common": Chứa các class định nghĩa chung, như enum, interface, class dùng chung, ví dụ: Constants, Enums,
Thư mục "exception": Chứa các class có nhiệm vụ xử lý exception trong ứng dụng, ví dụ: Custom Exception, ErrorHandler,
Thư mục "component": Chứa các bean hoặc class định nghĩa khác mà không thuộc vào các layer đã nêu, ví dụ: EmailSender, FileUploader,
_ Cấu trúc chung được tạo bởi lệnhnpx create-react-app react-admin, gồm các thư mục và tệp như public, src, package.json,…
Hình 4-3: Kiến trúc tổ chức source front end admin
Tệp package.json và package-lock.json lưu trữ thông tin về các thư viện sẽ được cài đặt trong dự án Node.js Khi chạy lệnh "npm i", thư mục node_modules sẽ được tạo và chứa các thư viện đó Nội dung của package.json và package-lock.json xác định những thư viện nào sẽ được cài đặt.
_ Thư mục public, chứa tệp index.html(là nơi các component được render) và một số tài nguyên cần thiết cho project như là các tệp css, icon, hình ảnh,…
Hình 4-4: Kiến trúc tổ chức thư mục public front end admin
_ Thư mục src, là nơi chứa các component, redux action, redux reducer,… của project.
● components: Chứa các react component của project.
● config: Chứa tệp cấu hình cho api URL.
● constants: Chứa các hằng số được khai báo sẵn để dùng khi cần thiết.
● firebase: Chứa tệp khởi tạo firebase.
● pages: Là các component trang, trong mỗi trang sẽ có các component con.
● redux: Chứa các action và reducer.
● utils: Chứa hàm thực thi gọi API.
● App.js và index.js: Tệp index.js sẽ render component App vào tệp index.html đầu tiên.
● routes.js: Là nơi chứa các khai báo để điều hướng trang web.
Hình 4-5: Kiến trúc tổ chức thư mục src front end admin
Phần này được làm theo cấu trúc giống với Admin.
_ Cấu trúc chung được tạo bởi lệnhnpx create-react-app react-customer, gồm các thư mục và tệp như public, src, package.json,…
Hình 4-6: Kiến trúc tổ chức source front end customer
_ Tệp package.json và package-lock.json dùng để thiết lập các thư viện sẽ được cài đặt trong project, thư mục node_modules được tạo bởi lệnhnpm i, bên trong node_modules chứa các thư viện đã được cài đặt theo mô tả trong tệp package.json và package-lock.json.
_ Thư mục public, chứa tệp index.html(là nơi các component được render) và một số tài nguyên cần thiết cho project như là các tệp css, icon, hình ảnh,…
Hình 4-7: Kiến trúc tổ chức thư mục public front end customer
_ Thư mục src, là nơi chứa các component, redux action, redux reducer,… của project.
● components: Chứa các react component của project.
● config: Chứa tệp cấu hình cho api URL.
● constants: Chứa các hằng số được khai báo sẵn để dùng khi cần thiết.
● firebase: Chứa tệp khởi tạo firebase.
● pages: Là các component trang, trong mỗi trang sẽ có các component con.
● redux: Chứa các action và reducer.
● utils: Chứa hàm thực thi gọi API.
● App.js và index.js: Tệp index.js sẽ render component App vào tệp index.html đầu tiên.
● routes.js: Là nơi chứa các khai báo để điều hướng trang web.
Hình 4-8: Kiến trúc tổ chức thư mục src front end customer
Các chức năng của website đã được cài đặt thành công
3.1 Chức năng dành cho Customer
- Đăng nhập tài khoản bằng Google
- Xem, tìm kiếm sản phẩm
-Tìm kiếm sản phẩm bằng giọng nói
- Thêm sản phẩm vào giỏ
- Xem tình trạng đơn hàng đã đặt
- Xem lịch sử đơn hàng
-Lọc sản phẩm theo các tiêu chí
-Sắp xếp sản phẩm theo các tiêu chí
-Đặt mua và thanh toán online (paypal)
-Nhận email khi đăng ký, quên mật khẩu
-Quản lý thông tin cá nhân
-Thêm sản phẩm yêu thích
-Tương tác trực tiếp với cửa hàng ( chat RealTime)
-Sử dụng Chat GPT free để tìm hiểu thông tin cần thiết của các loại máy tính ( và nhiều hơn thế nữa ).
3.2 Chức năng dành cho Admin
- Quản lý tin tức: thêm, xóa và sửa tin tức
- Quản lý nhà cung cấp: thêm, xóa và sửa nhà cung cấp
- Quản lý sản phẩm: thêm, xóa và sửa sản phẩm
- Quản lý đơn hàng: hủy, duyệt, xem chi tiết, sửa đơn hàng
- Thống kê: thống kê doanh thu , đơn hàng , số lượng khách hàng
- Quản lí danh sách khách hàng
- Tương tác trực tiếp với người dung ( chat RealTime)
3.3 Một số giao diện website đã được cài đặt
Hình 4-9: Giao diện trang chủ customer
Hình 4-10: Giao diện Đăng nhập
Hình 4-11: Giao diện trang danh sách sản phẩm
Hình 4-12: Giao diện trang giỏ hàng
Hình 4-13: Giao diện trang đặt hàng
Hình 4-14: Giao diện dashboard của admin
Hình 4-15: Giao diện quản lí đơn hàng
Hình 4-16: Giao diện quản lí sản phẩm
Hình 4-17: Giao diện quản lí nhà cung cấp
Hình 4-18: Giao diện quản lí tin tức
KIỂM THỬ PHẦN MỀM
Kế hoạch kiểm thử
1.1 Trong phạm vi kiểm thử
Nhóm em tiến hành kiểm kiểm thử phần mềm chủ yếu về mặt logic, luận lý của các chức năng chính sau:
- Chức năng xác thực tài khoản: o Đăng nhập. o Đăng ký tài khoản. o Chức năng xác thực tài khoản
- Chức năng tìm kiếm sản phẩm:
- Chức năng quản lý giỏ hàng.
- Chức năng quản lý đơn hàng
1.2 Ngoài phạm vi kiểm thử
- Giao diện thân thiện thao tác cho mỗi chức năng có thân thiện dễ sử dụng hay không.
- Độ ổn định của trang web và tốc độ load trang
Mục tiêu kiểm thử
Trước kiểm thử, cần xác định thông tin cơ bản về dự án và các thành phần chức năng được kiểm thử và không được kiểm thử.
Sau đó, liệt kê các yêu cầu kiểm thử, chọn chiến lược kiểm thử phù hợp và ước lượng tài nguyên và chi phí.
Cuối cùng, tạo các tài liệu liên quan sau khi hoàn thành kiểm thử.
Phương pháp kiểm thử
3.1 Tổng quan về phương pháp kiểm thử sử dụng trong đề tài
Kiểm thử hộp đen tập trung vào việc kiểm tra giá trị đầu vào và đầu ra của hệ thống mà không quan tâm đến cách thức hoạt động bên trong Nó đánh giá chất lượng của hệ thống dựa trên kết quả cuối cùng.
3.2 Các loại test(Levels Test)
Unit Test là phương pháp kiểm thử các đơn vị hoặc thành phần đơn lẻ của phần mềm để xác định tính chính xác và kết quả của chúng.
Integration Test là phương pháp kiểm thử tích hợp các module hoặc chức năng riêng lẻ để đảm bảo tích hợp chính xác và tương tác đúng giữa chúng.
System Test là phương pháp kiểm thử toàn bộ hệ thống, bao gồm tất cả chức năng và thành phần, để đảm bảo hệ thống hoạt động chính xác và đáp ứng yêu cầu kiểm thử.
3.3 Các mục tiêu test Đảm bảo các chức năng hoạt động đúng yêu cầu đề ra.
Công cụ kiểm thử
Thực hiện kiểm thử
Bảng 5-1: Bảng thực hiện kiểm thử
Mô tả Các bước thực hiện
Kết quả thực tế Trạng thái
1 Kiểm thử chức năng đăng ký tài khoản.
- Nhập đầy đủ thông tin đăng ký.
- Kiểm tra email đăng kí và nhập vào xác thực.
Thông báo đăng ký thành công và chuyển sang trang đăng nhập.
Thông báo đăng ký thành công và chuyển sang trang đăng nhập. Đạt
2 Kiểm thử chức năng đăng nhập
- Nhập đầy đủ thông tin đăng nhập.
Thông báo đăng nhập thành công và chuyển sang trang chủ
Thông báo đăng nhập thành công và chuyển sang trang chủ Đạt
3 Kiểm thử chức năng đăng xuất
- Chọn Đăng xuất Đăng xuất thành công Đăng xuất thành công Đạt
4 Kiểm thử chức năng tìm kiếm sản phẩm
- Chọn tên sản vào ô tìm kiếm
Hiển thị sản phẩm muốn tìm kiếm
Hiển thị sản phẩm muốn tìm kiếm Đạt
5 Kiểm thử chức năng xem chi tiết sản phẩm
- Chọn vào một sản phẩm muốn xem chi tiết
Hiển thị chi tiết thông tin của sản phẩm
Hiển thị chi tiết thông tin của sản phẩm Đạt
6 Kiểm thử chức năng đặt mua sản phẩm
- Chọn vào một sản phẩm muốn mua sau đó nhấn thêm vào giỏ hàng
Hệ thống sẽ thông báo thêm thành công
Hệ thống sẽ thông báo thêm thành công Đạt
7 Kiểm thử chức năng cập nhật giỏ hàng
- Thay đổi số lượng của sản phẩm đã thêm vào giỏ thêm mong muốn
Số lượng sản phẩm tăng theo yêu cầu
Số lượng sản phẩm tăng theo yêu cầu Đạt
8 Kiểm thử chức năng đặt hàng và thanh toán
- Chọn sản phẩm muốn mua trong giỏ
- Nhập đầy đủ thông người nhận
- Nhấp tiếp tục mua hàng
Hệ thống thông báo đặt hàng thành công
Hệ thống thông báo đặt hàng thành công Đạt
9 Kiểm thử chức năng xem chi tiết đơn hàng
- Tùy chọn các trạng thái
Hệ thống hiển thị đơn hàng và trạng thái đơn hàng
Hệ thống hiển thị đơn hàng và trạng thái đơn hàng Đạt
10 Kiểm thử chức năng hủy đơn hàng của khách hàng
- Chọn trạng thái Chưa duyệt
- Chọn đơn hàng muốn hủy bỏ
- Chọn Hủy bỏ Đơn hàng sẽ được hủy Đơn hàng sẽ được hủy Đạt
11 Kiểm thử chức năng xóa giỏ hàng
- Chọn sản phẩm muốn xóa
Hệ thống sẽ xóa sản phẩm ra khỏi giỏ hàng
Hệ thống sẽ xóa sản phẩm ra khỏi giỏ hàng Đạt
12 Kiểm thử chức năng xem tình đang đơn hàng
- Chọn Đơn mua Hệ thống sẽ hiển thị đơn hàng và trạng thái của đơn hàng
Hệ thống sẽ hiển thị đơn hàng và trạng thái của đơn hàng Đạt
13 Kiểm thử chức năng thêm nhà cung cấp
- Đăng nhập tài khoản quản trị viên
- Chọn quản lí nhà cung cấp
- Chọn thêm nhà cung cấp
- Nhập đầy đủ thông tin muốn của nhà cung cấp mới
Hệ thống sẽ thêm nhà cung cấp mới của và thông báo thêm thành công
Hệ thống sẽ thêm nhà cung cấp mới của và thông báo thêm thành công Đạt
14 Kiểm thử chức năng thêm tin tức
- Đăng nhập tài khoản quản trị viên
- Chọn quản lí tin tức
- Nhập đầy đủ thông tin tin tức
Hệ thống sẽ thêm tin tức mới và thông báo thêm thành công
Hệ thống sẽ thêm tin tức mới và thông báo thêm thành công Đạt
15 Kiểm thử chức năng sửa tin tức
- Đăng nhập tài khoản quản trị viên
- Chọn quản lí tin tức
- Chọn vào tin tức muốn sửa
- Nhập đầy đủ thông tin muốn sửa của tin tức
Hệ thống sẽ thay đổi tin tức vừa sửa và thông báo sửa thành công
Hệ thống sẽ thay đổi tin tức vừa sửa và thông báo sửa thành công Đạt
16 Kiểm thử chức năng thêm sản phẩm mới
- Đăng nhập tài khoản quản trị viên
- Chọn quản lý sản phẩm
- Chọn vào thêm sản phẩm mới
- Nhập đầy đủ thông tin của sản phẩm
Hệ thống sẽ thêm sản phẩm mới và thông báo thêm thành công
Hệ thống sẽ thêm sản phẩm mới và thông báo thêm thành công Đạt
17 Kiểm thử chức năng sửa sản phẩm
- Đăng nhập tài khoản quản trị viên
- Chọn quản lí sản phẩm
- Chọn vào sản phẩm muốn sửa
- Nhập đầy đủ thông tin muốn sửa của sản phẩm
Hệ thống sẽ thay đổi sản phẩm vừa sửa và thông báo sửa thành công
Hệ thống sẽ thay đổi sản phẩm vừa sửa và thông báo sửa thành công Đạt
18 Kiểm thử chức năng duyệt đơn hàng
- Đăng nhập tài khoản quản trị viên
- Chọn quản lý đơn hàng
- Chọn trạng thái đơn chưa duyệt
- Chọn sản phẩm muốn duyệt
Hệ thống sẽ thông báo duyệt đơn hàng thành công
Hệ thống sẽ thông báo duyệt đơn hàng thành công Đạt
19 Kiểm thử chức năng xác nhận đơn hàng đã giao
- Đăng nhập tài khoản quản trị viên
- Chọn quản lý đơn hàng
- Chọn trạng thái đơn đã duyệt
- Chọn sản phẩm muốn xác nhận
Hệ thống sẽ thông báo xác nhận đơn hàng đã giao thành công
Hệ thống sẽ thông báo xác nhận đơn hàng đã giao thành công Đạt
20 Kiểm thử chức năng hủy đơn hàng
- Đăng nhập tài khoản quản trị viên
- Chọn quản lý đơn hàng
- Chọn trạng thái đơn chưa duyệt
- Chọn sản phẩm muốn hủy
Hệ thống sẽ thông báo hủy đơn hàng thành công
Hệ thống sẽ thông báo hủy đơn hàng thành công Đạt
21 Kiểm thử chức năng thống kê
- Đăng nhập tài khoản quản trị viên
- Thống kê doanh thu tháng và đơn hàng mới
Hệ thống sẽ hiển thị ra doanh thu và đơn hàng mới được đặt
Hệ thống sẽ hiển thị ra doanh thu và đơn hàng mới được đặt Đạt
