Đồ án xây dựng website bán giày thể thao và báo cáo kinh doanh thông minh

Tải đồ án xây dựng website bán giày thể thao bằng ReactJS, NodeJS. Tích hợp báo cáo kinh doanh thông minh với Power BI, tài liệu đầy đủ chức năng.

• Tác giả: Nguyễn Ngọc Tuân
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Website Bán Giày Thể Thao Và Báo Cáo Kinh Doanh Thông Minh
• Loại tài liệu: Đồ Án Môn Học
• Năm xuất bản: 2022
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Website Bán Giày Thể Thao

Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, đồ án website bán giày thể thao đã được xây dựng nhằm đáp ứng nhu cầu mua sắm trực tuyến ngày càng tăng của khách hàng. Cuộc sống hiện đại ngày càng bận rộn khiến khách hàng ưu tiên mua hàng online thay vì đến các cửa hàng truyền thống. Một đôi giày thể thao tốt cần mang đến sự êm ái, nhẹ nhàng và phù hợp với nhu cầu sử dụng. Tuy nhiên, việc chọn lựa trong các cửa hàng truyền thống tốn rất nhiều thời gian và công sức. Website bán giày thể thao là giải pháp tối ưu, cho phép khách hàng lựa chọn sản phẩm đa dạng, so sánh giá cả và đặt mua hàng một cách tiện lợi từ nhà. Đây chính là cơ hội để áp dụng công nghệ thông tin vào lĩnh vực kinh doanh bán lẻ, giúp các cửa hàng quảng bá sản phẩm hiệu quả và tiết kiệm chi phí.

1.1. Bối cảnh và Động lực Thực hiện

Internet đã trở thành công cụ không thể thiếu trong kinh doanh hiện đại. Thương mại điện tử mang lại tốc độ giao dịch nhanh hơn, chi phí thấp hơn và tầm tiếp cận rộng hơn so với phương thức truyền thống. Mạng xã hội và website thương mại điện tử đã thay đổi hành vi mua sắm của người tiêu dùng. Vì thế, việc xây dựng platform bán hàng online cho ngành giày thể thao là một bước đi hợp lý và chiến lược.

1.2. Tầm Quan Trọng của Dự Án

Website bán giày thể thao không chỉ là nền tảng kinh doanh mà còn là công cụ quảng bá mạnh mẽ. Khách hàng có thể duyệt, so sánh và mua hàng mà không cần ra khỏi nhà. Cửa hàng từ đó tiếp cận được khách hàng rộng khắp, tăng doanh thu và mở rộng thị trường. Đó là lý do dự án này có giá trị thực tiễn cao.

II. Mục Tiêu và Phạm Vi Của Đồ Án

Mục tiêu chính của đồ án website bán giày thể thao và báo cáo Power BI là xây dựng một nền tảng thương mại điện tử hoàn chỉnh với giao diện thân thiện, chức năng đa dạng và báo cáo kinh doanh thông minh. Website cần có nội dung phong phú, màu sắc hài hòa, bố cục hợp lý để tạo trải nghiệm tốt nhất cho người dùng. Bên cạnh đó, cần xây dựng dashboard báo cáo kinh doanh giúp chủ cửa hàng theo dõi tình hình bán hàng, tồn kho, doanh thu và đưa ra quyết định kinh doanh chính xác. Phạm vi dự án bao gồm triển khai trên môi trường web với đầy đủ chức năng cho người dùng bình thường, người dùng đã đăng ký tài khoản và quản trị viên.

2.1. Mục Tiêu Chức Năng

Dự án đặt ra mục tiêu xây dựng website bán hàng với các chức năng cốt lõi: đăng nhập/đăng ký, quản lý danh mục sản phẩm, quản lý tài khoản khách hàng, quản lý đơn đặt hàng, giỏ hàng, thanh toán, tìm kiếm và lọc sản phẩm. Website quản trị viên cần cung cấp các công cụ quản lý thông tin chi tiết và tiện dụng. Tất cả chức năng đều phải hoạt động ổn định, an toàn và thân thiện với người dùng.

2.2. Mục Tiêu Báo Cáo Kinh Doanh Thông Minh

Xây dựng báo cáo Power BI với bố cục rõ ràng, thông tin cụ thể về doanh số bán hàng, số lượng khách hàng, tỷ lệ chuyển đổi, doanh thu theo thời gian. Báo cáo giúp chủ cửa hàng có cái nhìn tổng quan nhanh chóng về tình hình tài chính và kinh doanh, từ đó đưa ra quyết định hợp lý.

III. Công Nghệ và Stack Công Nghệ Sử Dụng

Để xây dựng website bán giày thể thao chất lượng cao, dự án sử dụng stack công nghệ hiện đại bao gồm React JS cho front-end, Node JS và Express JS cho back-end, MongoDB cho cơ sở dữ liệu, và Power BI cho báo cáo kinh doanh thông minh. React JS cho phép tạo giao diện động, tương tác cao, tạo trải nghiệm người dùng mượt mà. Node JS và Express JS là nền tảng mạnh mẽ cho xử lý yêu cầu phía máy chủ với tốc độ cao. MongoDB là cơ sở dữ liệu NoSQL linh hoạt, dễ mở rộng. Stripe được tích hợp để xử lý thanh toán an toàn. Power BI cung cấp công cụ trực quan hóa dữ liệu và ngôn ngữ DAX để xây dựng báo cáo kinh doanh phức tạp. Github được sử dụng để quản lý source code và kiểm soát phiên bản.

3.1. Công Nghệ Front end và Back end

React JS là thư viện JavaScript phổ biến giúp xây dựng giao diện người dùng tương tác cao, hỗ trợ component-based architecture. Node JS cung cấp môi trường chạy JavaScript phía máy chủ, còn Express JS là framework tối giản giúp xây dựng RESTful API nhanh chóng. Stripe được tích hợp để xử lý thanh toán an toàn, đáng tin cây cho khách hàng.

3.2. Cơ Sở Dữ Liệu và Báo Cáo Thông Minh

MongoDB là cơ sở dữ liệu NoSQL cho phép lưu trữ dữ liệu dạng JSON, linh hoạt và dễ mở rộng. Power BI kết hợp với ngôn ngữ DAX tạo ra báo cáo kinh doanh động, trực quan, giúp phân tích dữ liệu bán hàng, khách hàng và tài chính một cách hiệu quả, hỗ trợ chủ cửa hàng trong ra quyết định.

IV. Kết Quả Mong Đợi và Giá Trị Thực Tiễn

Kết quả mong đợi của đồ án website bán giày thể thao và báo cáo Power BI là xây dựng một sản phẩm hoàn chỉnh, có thể triển khai thực tế ngay lập tức. Website phải đáp ứng đầy đủ các yêu cầu về giao diện, chức năng, tính bảo mật và hiệu năng. Người thực hiện sẽ nắm vững các công nghệ mới, hiểu rõ nghiệp vụ của thương mại điện tử, áp dụng được các kiến thức về phân tích và thiết kế hệ thống phần mềm, quản lý dự án. Website được thiết kế linh hoạt, dễ dàng mở rộng chức năng mới theo nhu cầu tương lai. Báo cáo Power BI giúp chủ cửa hàng theo dõi kinh doanh hiệu quả, từ đó tăng lợi nhuận. Dự án này không chỉ mang giá trị học tập mà còn giá trị thương mại cao, có thể trở thành sản phẩm thực tế phục vụ các cửa hàng giày thể thao.

4.1. Kỹ Năng và Kiến Thức Đạt Được

Thông qua đồ án website bán giày thể thao, sinh viên sẽ nắm vững React JS, Node JS, MongoDB, Power BI và các công nghệ hiện đại khác. Hiểu rõ quy trình phát triển phần mềm từ phân tích yêu cầu, thiết kế, xây dựng đến kiểm thử. Nắm bắt được quy trình UX/UI design, phát triển tư duy hệ thống và khả năng giải quyết vấn đề phức tạp.

4.2. Tính Khả Thi và Giá Trị Thương Mại

Website bán giày thể thao hoàn thành có thể triển khai ngay lập tức hoặc mở rộng theo nhu cầu. Nó cung cấp giải pháp thương mại điện tử toàn diện, tiết kiệm chi phí cho các cửa hàng. Báo cáo Power BI giúp chủ cửa hàng quản lý kinh doanh hiệu quả hơn, tăng lợi nhuận, mở rộng thị trường bán hàng trực tuyến.

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

Chương 1: GIỚI THIỆU ĐỀ TÀI 1. Tên đề tài: XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO VÀ BÁO CÁO KINH DOANH THÔNG MINH 1. Mô tả đề tài: Thể thao giúp chúng ta có sức khỏe và tinh thần thoải mái, thư giãn sau những ngày làm việc và học tập căng thẳng hằng ngày, đi kèm với những môn thể thao ấy như bóng đá, cầu lông, bóng chuyền, … không thể thiếu đi sự trợ giúp của những đôi giày thể thao chuyên dụng. Giày thể thao mang lại trải nghiệm tốt nhất, dễ chịu, thoải mãi đố i với đôi chân khi sử dụng trong lúc tập luyện hay vui chơi thể thao.

Tuy nhiên, việc lựa chọn cho mình một đôi giày thể thao ưng ý về màu sắc, chất liệu, giá cả là chuyện khá tốn thời gian, hơn nữa với cuộc sống bận rộn như ngày nay việc đi đến cửa hàng mua một đôi giày thể thao cũng làm cho ta mất thời gian cũng như không có nhiều lựa chọn theo ý muốn. Chính vì thế hình thức mua giày thể thao online sẽ giúp người tiêu dùng có nhiều lựa chọn hơn và không tốn gian của mình. Với sự phát triển nhanh chóng của internet, hình thức mua hàng qua mạng trở nên phổ biến và dần thay thế cách bán hàng truyền thống. Các website mua bán hàng qua mạng giúp người dùng có nhiều lựa chọn về mẫu mã, giá cả và trên hết là tiết kiệm thời gian.

Thấy được sự quan trọng và lợi ích này nhóm chúng em đã quyết dịnh xây dựng dự án “Xây dựng website bán giày thể thao và báo cáo kinh doanh thông minh”. Đề tài được lấy ý tưởng từ các trang thương mại điện tử như Tiki, Lazada, Shopee ,. Với mặt hàng là những đôi giày thể thao đa dạng về màu sắc, kích thước, giới tính và thương hiệu. Website bán giày thể thao với mục tiêu mang lại trải nghiệm tốt cho người dùng, chúng em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một website mua hàng trực tuyến đồng thời nhóm cũng xây dựng trang quản lý cho chủ cửa hàng kèm theo đó là báo cáo kinh doanh được nhóm xây dựng dựa trên công nghệ PowerBi nhằm giúp chủ cửa hàng không những thuận tiện trong việc bán giày thể thao mà còn có cái nhìn tổng quan về bức tranh tài chính để từ đó có định hướng phát triển cửa hàng trong tương lai.

Website bán giày thể thao được xây dựng bằng Reactjs kết hợp với nhiều thư viện hỗ trợ khác giúp tạo giao diện đẹp cùng trải nghiệm tốt cho khách hàng. Website còn liên kết với Stripe bên thứ ba giúp thanh toán trực tuyến nhanh chóng. Ngoài ra, đề tài còn có báo cáo kinh 3 doanh được xây dựng trên công nghệ PowerBi giúp chủ cửa hàng có cái nhình t ổng quan về bức tranh tài chính. Lý do chọn đề tài: Với sự phát triển của Internet, nhu cầu mua hàng trực tuyến trên không gian mạng trở nên phổ biến và đang dần thay thế hình thức bán hàng truyền thống với ưu điểm nhanh, tiện lợi, ít chi phí mà trên hết là trải nghiệm của khách hàng.

Trước đây khi hình thức mua hàng trực tuyến chưa phổ biến đa phần chúng ta đều phải đi ra cửa hàng mới có thể mua được món đồ mà mình đang cần và đôi khi cửa hàng hết hàng hoặc không có mẫu mã mà ta muốn kèm theo đó là người dùng không được so sánh giữa các sản phẩm, điều này dẫn đến trải nghiệm không tốt cũng như tốn thời gian đối với người tiêu dùng. Hình thức mua hàng trực tuyến được sinh ra để khắc phục những bất cập trên. Các website mua hàng trực tuyến hiện nay rất phổ biến có thể kể đến như Tiki, Lazada, Shopee, … Nhưng để tìm kiếm một website bán giày thể thao thì khá ít và đa phần những website này có giao diện còn khá đơn giản cũng như chưa có nhiều mẫu mã, hình ảnh của sản phẩm giúp người tiêu dùng lựa chọn. Chúng em quyết định lựa chọn đề tài “Xây dựng website bán giày thể thao và báo cáo thông minh” vì mong muốn ủng hộ mọi người trong việc luyện tập thể thao, rèn luyện sức khỏe, bảo vệ đôi chân của mình, kèm theo đó là mong muốn tạo ra một website mang lại trải nghiệm tốt nhất cho người dùng với giao bắt mắt, dễ sử dụng, nhiều hình ảnh, mẫu mã giúp mọi người tiết kiệm được thời gian, chi phí, có nhiều lựa chọn hơn khi chọn lựa một đôi giày thể thao cho mình.

Bên cạnh đó nhóm còn xây dựng “Báo cáo thông minh” giúp ch ủ cửa hàng có thể thuận tiện trong việc theo giõi mua bán, cũng như định hướng phát triển cửa hàng của mình. Khảo sát hiện trạng: Hiện nay, thị trường đã có rất nhiều website bán giày thể thao trực tuyến nổi tiếng được mọi người biết đến như trivela.vn, … Với giao diện bắt mắt, dễ sử dụng, cùng với số lượng giày thể thao khổng lồ, mẫu mã đa dạng, chúng nhanh chóng trở thành những website bán giày thể thao trực tuyến hàng đầu. Các chức năng của những website này đều tập trung vào trải nghiệm mua hàng thoải mái nhất cho người dùng với nhiều lựa chọn về mẫu mã, kích thước, màu sắc, giới tính. Chúng em cũng sẽ xây dựng một website bán giày thể thao trực tuyến với những tính năng mua hàng cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng, 4 kết hợp với trang thanh toán Stripe bên thứ ba giúp thuận tiện hơn trong việc thanh toán hóa đơn, và sự bảo mật, uy tín từ phía cửa hàng đối với người dùng.

Bên cạnh đó chúng em còn xây dựng báo cáo kinh doanh thông minh giúp chủ cửa hàng thuận tiện trong việc theo giõi kinh doanh và định hướng phát triển của cửa hàng. Công nghệ sử dụng: - ReactJS - NodeJS - ExpressJS - Axios - MongoDB - Stripe - Power BI 1. Môi trường thiết kế: - Visual Studio Code. Công cụ hỗ trợ: - Trình duyệt Cốc Cốc, Chrome, FireFox.

5 Chương 2: CƠ SỞ LÝ THUYẾT 2. Tổng quan về ReactJS: 2. Giới thiệu về ReactJS: ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra mắt vào 2013. ReactJS hỗ trợ việc xây dựng những thành phần trên website có tính tương tác cao, có trạng thái và có thể sử dụng lại được.

Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở dưới client. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM (Document Object Model). Khái niệm cơ bản trong ReactJS: 2. Virtual DOM: Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng.

Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này. Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật.1: Mô tả cách Virtual DOM hoạt động. JSX: - JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript.

- Đặc điểm: 6 • Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. • Safer: an toàn hơn.

Ngược với Javascript, JSX là kiểu statically -typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn.

JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng.2: Một đoạn code mẫu về JSX. Props và State: - Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến. - State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI.

Cách ReactJS hoạt động: - Tạo đại diện của nút DOM thông qua tạo hàm Element trong React. Đây là một ví dụ: Hình 2.3: Ví dụ về tạo một element trong React. - Cú pháp trong HTML code ở trên rất giống với XML components. Tuy nhiên, thay vì sử dụng DOM class truyền thống, React sử dụng className.

- Thẻ JSX có tên thẻ, con và thuộc tính. Dấu ngoặc kép trong các thuộc tính JSX đại diện cho chuỗi. Yếu tố này tương tự như JavaScript. - Ngoài ra, các giá trị số và biểu thức phải được viết bên trong dấu ngoặc nhọn.4: Ví dụ về React được viết bằng JSX.

• <MyCounter> được gọi là Số đếm, hiển thị biểu thức số là giá trị của nó. • GameScores là một đối tượng theo nghĩa đen có hai cặp giá trị prop. • <DashboardUnit> là khối XML được render trên trang. • scores={GameScores}}: thuộc tính điểm nhận được giá trị từ GameScores, đã được xác định trước đó.

Ưu điểm của ReactJS: - Phù hợp với đa dạng thể loại website. - Tái sử dụng các Component. - Có thể sử dụng cho cả Mobile application. - Thân thiện với SEO.

- Debug dễ dàng. - Công cụ phát triển web hot nhất hiện nay. NodeJS là gì? Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng. NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế.

NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ. Cách NodeJS hoạt động: Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng. Bởi vì, Node js có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao.