GIỚI THIỆU TỔNG QUAN
Thông tin nhóm
- Thành viên 1 o MSSV: 19522006 o Tên: Nguyễn Công Phi o Email: 19522006@gm.uit.edu.vn
- Thành viên 2 o MSSV: 19522055 o Tên: Lương Thiện Phước o Email: 19522055@gm.uit.edu.vn
Tổng quan đề tài
Trong thời đại công nghệ hiện nay, website đóng vai trò thiết yếu đối với các doanh nghiệp, mang lại nhiều tiện ích giúp tối ưu hóa quy trình kinh doanh Việc thiết kế và phát triển ứng dụng web không chỉ hỗ trợ doanh nghiệp tăng trưởng mà còn đảm bảo tính bảo mật thông tin khách hàng Nhiều framework và thư viện hiện có giúp quá trình phát triển ứng dụng web trở nên nhanh chóng và tiện lợi hơn bao giờ hết.
- Đây là công nghệ chính được sử dụng trong đồ án
Next.js là một framework React giúp bạn dễ dàng xây dựng ứng dụng React, được sử dụng rộng rãi trên hàng nghìn website lớn trên thế giới Với cộng đồng hỗ trợ mạnh mẽ, Next.js cho phép bạn phát triển ứng dụng nhanh chóng và hiệu quả Framework này giúp các nhà phát triển tạo ra giao diện website dựa trên hệ thống các component, dễ dàng quản lý, bảo trì và mở rộng Ngoài ra, các thư viện hỗ trợ của Next.js cũng giúp tạo ra trang web thân thiện với người dùng và giao diện thu hút khách hàng.
MongoDB is a document-oriented database and a type of NoSQL database that moves away from the table-based structure of traditional relational databases It utilizes a flexible schema known as BSON, which accommodates documents like JSON The collections in MongoDB are highly adaptable, allowing stored data to not adhere to a fixed structure.
Tailwind is a utility-first CSS framework similar to Bootstrap, offering built-in classes for developers to utilize With a wide array of classes encompassing various essential CSS properties, Tailwind CSS allows for easy customization and extension, enabling users to create new classes based on its existing ones.
I.2.3 Ứng dụng vào đồ án
Trong thời đại công nghệ số hiện nay, thiết bị thông minh như điện thoại và máy tính đã trở thành một phần thiết yếu trong công việc, học tập và giải trí Đại dịch COVID-19 đã khiến nhiều nhà sách ở Việt Nam và trên thế giới phải đóng cửa, làm giảm cơ hội tiếp cận sách Đọc sách không chỉ giúp chúng ta mở rộng kiến thức mà còn là chìa khóa để đạt được thành công nhanh chóng Mỗi cuốn sách là một bậc thang giúp ta tiến gần hơn đến một cuộc sống tốt đẹp Do đó, chúng tôi quyết định xây dựng một website bán sách online nhằm giúp mọi người dễ dàng tiếp cận những cuốn sách yêu thích của mình.
Để hiện thực hóa ý tưởng, nhóm chúng em cần một công nghệ hỗ trợ SEO hiệu quả khi triển khai trên internet, đồng thời dễ viết, dễ sửa lỗi và có nguồn tài liệu cùng cộng đồng hỗ trợ phong phú Sau thời gian tìm hiểu, chúng em đã quyết định chọn NextJS, một framework lập trình web dựa trên ReactJS, công nghệ đang rất phổ biến hiện nay.
TÌM HIỂU VỀ NEXTJS
NextJS là gì ?
II.1.1 Khái niệm II.1.2 Lịch sử ra đời
Next.js, một dự án mã nguồn mở, đã được phát hành lần đầu tiên trên GitHub vào ngày 25 tháng 10 năm 2016 Ban đầu, Next.js được phát triển dựa trên React, nhằm cung cấp một giải pháp đơn giản và hiệu quả cho việc xây dựng ứng dụng web.
Để tối ưu hóa hiệu suất, hãy tuân thủ 6 nguyên tắc sau: sử dụng các hàm tiện ích mà không cần thiết lập phức tạp, đảm bảo tất cả chức năng được viết bằng JavaScript, tự động phân tách mã và kết xuất trên máy chủ, tìm nạp dữ liệu có thể định cấu hình, dự đoán và phân tích yêu cầu một cách hiệu quả, và đơn giản hóa quy trình triển khai.
Vào tháng 3 năm 2017, Next.js 2.0 đã được cập nhật với nhiều cải tiến, giúp tối ưu hóa hiệu suất hoạt động của các trang web nhỏ và nâng cao hiệu quả xây dựng Bên cạnh đó, phiên bản này cũng cải thiện khả năng mở rộng cho các tính năng của module đóng.
- Tháng 9 năm 2018, Next.js 7.0 cải thiện khả năng xử lý lỗi, hỗ trợ API của React để cải thiện việc xử lý route, nâng cấp lên webpack 4
Vào tháng 2 năm 2019, Next.js 8.0 đã được phát hành, mang đến khả năng triển khai ứng dụng không máy chủ Phiên bản này cho phép mã được chia thành các hàm lambda chạy theo yêu cầu, giúp giảm thiểu tài nguyên cần thiết Ngoài ra, Next.js 8.0 còn hỗ trợ xuất tĩnh và cải thiện tính năng prefetch.
- Tháng 3 năm 2020, Next.js 9.3 được phát hành với khả năng tối ưu hoá với các Sass toàn cục và hỗ trợ CSS module
- Tháng 7 năm 2020, Next.js 9.5 có khả năng thêm tái tạo tĩnh, hỗ trợ redirect
Vào tháng 6 năm 2021, Next.js 11 đã được ra mắt, mang đến hỗ trợ cho webpack 5, cho phép chỉnh sửa mã và chạy trong thời gian thực, đồng thời chuyển đổi để tương thích với ReactApp.
Vào ngày 26 tháng 10 năm 2021, Next.js 12 đã chính thức ra mắt, mang đến nhiều tính năng mới nổi bật như trình biên dịch Rust giúp tăng tốc độ biên dịch, hỗ trợ định dạng AVIF, cũng như tính năng Edge Functions và Middleware Bản cập nhật này còn tích hợp Native ESM và URL Import, nâng cao khả năng phát triển ứng dụng web.
II.1.3 Tại sao nên sử dụng NextJS
Đối với trang web bán hàng, marketing là yếu tố quan trọng giúp người dùng chọn sản phẩm của mình thay vì của đối thủ Ngoài việc quảng cáo trên Google và mạng xã hội, các nhà phát triển cần tối ưu hóa SEO để nâng cao thứ hạng trang web, đảm bảo nó xuất hiện trên các trang đầu trong kết quả tìm kiếm.
Các công cụ tìm kiếm sử dụng Bot để thu thập dữ liệu, điều này khiến cho việc hỗ trợ tìm kiếm trên các trang web sử dụng ứng dụng CSR trở nên khó khăn hơn Mặc dù các Bot hiện tại có khả năng lấy dữ liệu từ ứng dụng CSR, nhưng khả năng này vẫn còn hạn chế.
Việc tích hợp SSR (Server Side Rendering) vào trang web bán hàng là lựa chọn tối ưu để nâng cao hiệu suất và tối ưu hóa SEO Next.js nổi bật với khả năng hỗ trợ SSR, giúp cải thiện tốc độ tải trang và tăng cường khả năng tìm kiếm trên các công cụ.
Rendering phía máy chủ (SSR) hoạt động bằng cách điều chỉnh luồng yêu cầu của ứng dụng React, cho phép tất cả các thành phần, ngoại trừ máy khách, gửi thông tin trực tiếp đến máy chủ.
➔ Do đó, việc sử dụng NextJS gần như là một lựa chọn hoàn hảo cho trang web mà nhóm em đang muốn thực hiện - ứng dụng web bán sách
II.1.4 So sánh với các công nghệ khác
Khi so sánh công nghệ CSR của NextJS với SSR của ReactJS, thời gian tải trang lần đầu của CSR thường lâu hơn do trình duyệt phải tải HTML, CSS và các script trước khi biên dịch thành nội dung sử dụng được Ngược lại, SSR tốn ít thời gian hơn cho việc tải trang lần đầu vì đã có sẵn HTML đã được biên dịch Tuy nhiên, từ lần tải thứ hai trở đi, CSR lại có lợi thế hơn khi chuyển từ trang này sang trang khác, vì các script cần thiết đã được tải sẵn, giúp giảm thời gian tải mà không cần gửi request tới server trừ khi cần tải thêm Javascript.
Để tăng tốc độ cho các ứng dụng web nặng, mọi trình duyệt và máy chủ web đều áp dụng cơ chế caching, giúp cải thiện thời gian tải cho cả Client-Side Rendering (CSR) và Server-Side Rendering (SSR) Tuy nhiên, chỉ có CSR mới mang lại một lợi ích đặc biệt trong việc tối ưu hóa hiệu suất.
CSR cho phép ứng dụng hoạt động mà không cần kết nối Internet, trừ khi cần gửi hoặc lấy dữ liệu Sau khi được tải, ứng dụng không cần gửi yêu cầu tới server nữa, giúp các ứng dụng web hoạt động tương tự như ứng dụng desktop khi được chuyển hướng.
SSR (Server-Side Rendering) yêu cầu gửi liên tục các yêu cầu đến server, dẫn đến thời gian tải trang cao hơn so với CSR (Client-Side Rendering) Tuy nhiên, việc caching đã cải thiện hiệu suất render cho SSR và giúp tải script từ cache nhanh hơn Đối với SEO, việc tối ưu hóa trang web doanh nghiệp cho các công cụ tìm kiếm là rất quan trọng Các bot tự động, hay còn gọi là crawlers, thường chú ý đến metadata hơn là nội dung thực tế của trang Do đó, cần đảm bảo rằng trang web của bạn có các metadata chuẩn SEO để thu hút sự chú ý từ các máy tìm kiếm.
CSR (Content-Security-Policy) đề cập đến việc nội dung trang web được tạo ra tự động thông qua Javascript, yêu cầu thay đổi metadata cũng phải thực hiện bằng Javascript Trước đây, các công cụ tìm kiếm không ưu tiên việc chạy Javascript trong quá trình quét trang web, nhưng hiện nay Google đã chấp nhận và cho phép việc này, cho thấy xu hướng đang thay đổi trong việc tối ưu hóa SEO.
Frontend
React.js là một thư viện Javascript ngày càng phổ biến trong xu hướng phát triển Single Page Application Khác với các framework khác theo mô hình MVC hoàn chỉnh, React nổi bật nhờ vào sự đơn giản và khả năng tích hợp dễ dàng với các thư viện Javascript khác Trong khi AngularJS cho phép nhúng mã Javascript vào HTML thông qua các thuộc tính như ng-model hay ng-repeat, React sử dụng JSX để nhúng mã HTML vào Javascript, giúp việc lồng ghép các đoạn HTML vào JS trở nên đơn giản hơn Sự kết hợp giữa Javascript và HTML trong JSX làm cho các component trở nên dễ hiểu hơn.
React được xây dựng dựa trên các component thay vì sử dụng template như các framework khác Trong React, trang web được xây dựng từ những thành phần nhỏ có thể tái sử dụng ở nhiều vị trí với các trạng thái và thuộc tính khác nhau Mỗi component có trạng thái riêng và có khả năng thay đổi, cho phép React tự động cập nhật khi có sự thay đổi Tất cả mọi thứ trong React đều là component, giúp dễ dàng bảo trì mã code trong các dự án lớn Một component đơn giản trong React chỉ cần một phương thức render.
Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo
There are two types of components in React: Functional (Stateless) components and Class components A Functional component is a JavaScript (or ES6) function that returns a React element These components are often referred to as stateless because they do not manage React state or lifecycle methods However, with the introduction of React Hooks in version 16.8, developers can now utilize state and other features within Functional components, enhancing their capabilities significantly.
7 o Class (Stateful) components: Các Class components là những class ES6
Chúng phức tạp hơn functional components ở chỗ nó còn có: phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data) class
ExampleComponent kế thừa Component, vì vậy React hiểu class này là một component, và nó renders (returns) 1 React Element
- componentWillMount đây là method sẽ được thực thi trước khi 1 component được render trên cả server side và client side
The componentDidMount method is executed when a component is rendered on the client side, serving as a crucial point for executing AJAX requests, updating the DOM, or modifying the component's state Additionally, this method can be utilized to connect with other JavaScript frameworks and to implement functions with delayed execution, such as setTimeout or setInterval.
The componentWillReceiveProps method is executed immediately when the properties are updated, prior to the component being re-rendered In the example below, we will utilize this method alongside setNewNumber to update the state effectively.
Phương thức shouldComponentUpdate trả về true hoặc false, quyết định xem một component có được cập nhật hay không, với giá trị mặc định là true Nếu bạn không muốn component render lại sau khi cập nhật state hoặc props, hãy trả về false Dưới đây là ví dụ để minh họa rõ hơn.
- componentWillUpdate được gọi khi chúng ta update state của component trước khi nó render lại
- componentDidUpdate sau khi componentWillUpdate ở trên được gọi xong thì đến lượt thằng này được goi
- componentWillUnmount được gọi khi chúng ta unmout 1 component kiểu như xóa nó khỏi react
- Việc sử dụng trong chương trình cũng phụ thuộc vào loại component đang sử dụng: o Functional Component - Stateless Components: Trái ngược với Class
Component, Functional Component trước đây không thể quản lý state phức tạp, nhưng với sự cập nhật của React Hooks, chúng ta có thể sử dụng các hàm như useState(), useEffect(), useRef() để thực hiện điều này Tùy vào nhu cầu, chúng ta có thể linh hoạt chọn giữa Class Components và Functional Components Hiện nay, Functional Components được ưa chuộng hơn vì dễ bảo trì và dễ hiểu hơn cho các developer trong dự án sau này.
Hooks trong React cho phép bạn truy cập vào trạng thái và các tính năng vòng đời từ các hàm components mà không cần sử dụng classes Các hooks phổ biến bao gồm useEffect, useState, useRef và useContext Cụ thể, useState nhận vào giá trị khởi tạo của một state và trả về một mảng gồm hai phần tử: phần tử đầu tiên là state hiện tại và phần tử thứ hai là hàm dùng để cập nhật state, tương tự như hàm setState trong các component class cũ.
useEffect giúp xử lý các side effects, tương đương với componentDidMount, componentDidUpdate và componentWillUnmount trong LifeCycle useReducer là phiên bản nâng cao của useState, cho phép quản lý trạng thái phức tạp hơn, giống như reducer trong Redux useMemo kiểm soát việc render thừa của các component con, hoạt động tương tự như shouldComponentUpdate, chỉ thực thi khi tham số thứ hai thay đổi useCallback tương tự như useMemo nhưng dùng cho các hàm callback của sự kiện, như onClick.
Redux JS là một thư viện JavaScript chuyên quản lý trạng thái ứng dụng, được phát triển dựa trên tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Redux thường được sử dụng kết hợp với React, nhưng cũng hoàn toàn tương thích với các framework khác như Angular, Angular2, Backbone, Falcor và Deku.
II.2.2 Điểm mới của NextJS
Để cải thiện SEO và khả năng chia sẻ, Next.js cung cấp component next/head, cho phép chúng ta thêm nội dung vào phần của trang HTML trả về cho người dùng Điều này cho phép tùy chỉnh thông tin như title, meta, hoặc image cho từng trang, giúp tối ưu hóa việc chia sẻ trên các nền tảng mạng xã hội như Facebook.
- Fetch dữ liệu từ server: Để có được các thông tin về trang để điền vào phần
Để nhận thông tin từ phía server trong NextJS, chúng ta có thể sử dụng hàm getInitialProps(), một hàm có chức năng tương tự như componentDidMount() nhưng hoạt động được với Server-Side Rendering (SSR) và có thể thay thế cho componentDidMount() trong các ứng dụng sử dụng SSR.
- Routing: Nextjs sẽ tự động tạo thành các router đối với các file mà bạn tạo trong folder page/
Next.js cung cấp component tương tự như component trong React Router, với tính năng bổ sung cho phép sử dụng tham số "as" để thực hiện việc rewrite URL.
II.2.3 Các công nghệ khác được sử dụng kết hợp
Tailwind là một framework CSS theo hướng utility-first, cung cấp nhiều class built-in cho người dùng Với hàng loạt class đa dạng và quan trọng, Tailwind CSS cho phép dễ dàng mở rộng và tạo mới class từ những class có sẵn So với Bootstrap, Tailwind mang đến sự tiện lợi vượt trội với nhiều class mới và quy tắc đặt tên thân thiện, giúp người dùng dễ dàng nhận biết chức năng của từng class Hơn nữa, khả năng tùy biến và mở rộng của Tailwind mang lại sự linh hoạt không giới hạn cho các dự án phát triển web.
TypeScript là một ngôn ngữ lập trình do Microsoft phát triển, có liên quan chặt chẽ đến JavaScript, với mục đích thiết kế và xây dựng các dự án ứng dụng quy mô lớn và phức tạp Việc sử dụng TypeScript mang lại nhiều lợi ích nổi bật, bao gồm khả năng phát triển dự án lớn dễ dàng, sự tương thích với nhiều Framework, hỗ trợ các tính năng mới nhất của JavaScript và tính chất mã nguồn mở.
Backend
Next.js không chỉ hỗ trợ việc tạo các tuyến trang web mà còn cho phép phát triển các tuyến API, mang đến khả năng linh hoạt trong việc xử lý dữ liệu và tương tác với các dịch vụ bên ngoài.
Next.js cung cấp một tính năng thú vị cho phép tạo giao diện người dùng từ dữ liệu được lưu trữ và truy xuất qua chính Next.js, sử dụng JSON thông qua các yêu cầu tìm nạp Các tuyến API được quản lý trong thư mục /pages/api/ và được ánh xạ tới /api/, điều này rất hữu ích cho việc phát triển ứng dụng.
Chúng tôi sử dụng mã Node.js cho các tuyến này, thay vì mã React, đánh dấu một sự chuyển đổi mô hình liền mạch từ front-end sang back-end.
- Chúng ta có một file /pages/api/*.js, có mục tiêu là trả lại dữ liệu dưới dạng JSON
Backend sử dụng nền tảng Node.js, một hệ thống phần mềm lý tưởng cho việc phát triển các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web Node.js được viết bằng JavaScript và áp dụng kỹ thuật điều khiển theo sự kiện cùng với nhập/xuất không đồng bộ, giúp tối thiểu hóa chi phí tổng thể và tối đa hóa khả năng mở rộng.
Database
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc loại NoSQL, được hàng triệu người sử dụng trên toàn thế giới.
MongoDB là một cơ sở dữ liệu tài liệu (document database) lưu trữ dữ liệu dưới dạng document kiểu JSON, giúp truy vấn diễn ra nhanh chóng Khác với các cơ sở dữ liệu quan hệ như MySQL hay SQL Server sử dụng bảng để lưu trữ dữ liệu, MongoDB sử dụng khái niệm collection thay cho bảng.
- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS
- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định
MongoDB là giải pháp lý tưởng cho các trang web bán hàng có lượng dữ liệu lớn về sách, nhờ vào khả năng đáp ứng nhanh và thực hiện truy vấn hiệu quả trước khối lượng yêu cầu lớn.
Ưu nhược điểm của NextJS
Next.js mang lại nhiều ưu điểm nổi bật cho các trang web, bao gồm khả năng tự động phân tách mã (split code) giúp tăng tốc độ tải trang, điều này lý giải tại sao nhiều trang web lớn chọn sử dụng Next.js Các trang web phát triển bằng Next.js không chỉ nhanh chóng mà còn dễ dàng tìm kiếm, nâng cao trải nghiệm người dùng, từ đó cải thiện thứ hạng trên công cụ tìm kiếm của Google nhờ vào ba yếu tố quan trọng: tốc độ, cấu trúc và trải nghiệm người dùng Sự độc lập trong thiết kế giúp các cửa hàng trực tuyến nổi bật hơn trong ngành thương mại điện tử Ngoài ra, Next.js cũng đảm bảo an toàn thông tin nhờ không có liên kết trực tiếp đến cơ sở dữ liệu hay thông tin nhạy cảm Với thời gian tải trang nhanh chóng nhờ vào việc tối ưu hóa tự động, khách truy cập sẽ hài lòng hơn với trải nghiệm Cộng đồng hỗ trợ lớn từ React cũng giúp người dùng nhanh chóng nhận được sự trợ giúp khi cần thiết Cuối cùng, việc sử dụng server-side rendering không chỉ cải thiện hiệu năng mà còn hỗ trợ tốt hơn cho SEO và chia sẻ trên mạng xã hội, đồng thời giảm thiểu vấn đề về khả năng tương thích trình duyệt.
Framework 13 là một hệ thống cố định, cung cấp phương pháp và bộ công cụ cụ thể cho người dùng trong việc phát triển ứng dụng.
Các bước thiết lập cấu trúc cơ bản của đồ án
- Tạo base cho dụng next js bằng lệnh npx creat-app-next + [tên]
- Cài đặt tailwind và config: o Cài đặt tailwind o Config tailwind o Thêm đường dẫn tailwind đến css o Chạy công cụ CLI cho tailwind
- Sử dụng ngôn ngữ TypeScript:
- Cấu hình redux cho ứng dụng: o Tải redux o Thiết lập reducer cho reducer cho redux Ví dụ:
- Connect Database và config với MongoDB o Tải mongoDB o Kết nối với database import mongoose from "mongoose"; const connection = {};
15 async function dbConnect() { if (connection.isConnected) { return;
} const db = await mongoose.connect("mongodb+srv://nguyencongphi:9bBOmN0r0lXYw0xS
@sellingbook.oo2ez.mongodb.net/test",
}); connection.isConnected = db.connections[0].readyState; console.log("Connect OK!");
III ÁP DỤNG CÔNG NGHỆ VÀO ĐỒ ÁN “ỨNG DỤNG BÁN SÁCH”
Giới thiệu chung về đồ án
III.1.1 Lý do chọn đề tài
Sách là nguồn kiến thức vô tận, vì vậy mọi người luôn khao khát sở hữu thông tin giá trị nhanh chóng và với giá tốt Để đáp ứng nhu cầu này, chúng tôi đã phát triển một website bán sách online, giúp khách hàng dễ dàng mua sách mong muốn với giá ưu đãi hấp dẫn.
III.1.2 Báo cáo khả thi
III.1.2.1 Giới thiệu dự án
Website mà nhóm em xây dựng, SellingBook, ban đầu là một nền tảng bán sách, sau đó đã tích hợp thêm nhiều tính năng hữu ích cho người dùng Chúng em hướng tới việc phát triển cộng đồng yêu sách, tạo ra không gian cho người dùng mua, tặng và đọc sách điện tử SellingBook sẽ tối ưu hóa trải nghiệm đọc sách mọi lúc, mọi nơi, đáp ứng nhu cầu của độc giả hiện đại.
III.1.2.2 Mục tiêu dự án
Dự án này nghiên cứu cách thu hút khách hàng đến cửa hàng và giúp họ nhận ra giá trị của sách Chúng tôi muốn làm rõ ý nghĩa của việc đọc sách và lợi ích mà khách hàng có thể nhận được từ việc mua sách online Mục tiêu là giúp mọi người hiểu rõ hơn về tầm quan trọng của việc đọc và giá trị mà sách mang lại cho cuộc sống.
Để đáp ứng các yêu cầu của dự án, sản phẩm cần đạt được những mục tiêu quan trọng như tạo ra nhiều voucher hấp dẫn để thu hút khách hàng, mang lại cảm giác tiện lợi cho người dùng ứng dụng, và thiết kế bố cục rõ ràng, trực quan Ngoài ra, việc cung cấp các bài blog sẽ giúp khách hàng hiểu rõ hơn về các khu du lịch mà họ quan tâm Cuối cùng, đánh giá chi tiết từng sản phẩm sẽ giúp người dùng có cái nhìn trực quan và sâu sắc hơn về sách cũng như thông tin liên quan.
III.1.2.3 Phân tích thiết kế:
III.1.2.3.2 Phạm vi dự án
- Dự án xây dựng ban đầu hướng đến người dùng tại Việt Nam và người dùng ngôn ngữ Tiếng Việt
III.1.2.3.3 Các chức năng chính
Người quản trị có thể thực hiện các chức năng quan trọng như thêm, xóa và sửa các mặt hàng trong hệ thống Họ cũng có khả năng quản lý người dùng một cách hiệu quả Bên cạnh đó, chức năng xác định trạng thái đơn hàng giúp theo dõi tiến trình giao hàng Cuối cùng, tính năng thống kê doanh thu của cửa hàng cung cấp cái nhìn tổng quan về hiệu quả kinh doanh.
Khách hàng có thể tận hưởng nhiều chức năng hữu ích như thêm hoặc xóa sản phẩm khỏi giỏ hàng, thực hiện mua hàng dễ dàng, và đăng ký hoặc đăng nhập tài khoản cá nhân Ngoài ra, họ cũng có thể cập nhật thông tin cá nhân, theo dõi tình trạng đơn hàng và đánh giá sản phẩm sau khi trải nghiệm.
III.1.2.3.4 Lợi ích của dự án
Công nghệ được sử dụng trong dự án bao gồm Node.js cho môi trường phát triển, với Express.js làm framework cho backend và Next.js cho frontend Để hỗ trợ phát triển, các thư viện như Redux, MUI và Tailwind được áp dụng Cơ sở dữ liệu được sử dụng là MongoDB, và ngôn ngữ lập trình chính là TypeScript.
III.1.2.3.5 Nguồn lực dự án
18 o Nguyễn Công Phi o Lương Thiện Phước
III.1.2.3.6 Rủi ro dự án
Rủi ro dự án được đánh giá là thấp, với phần mềm chỉ gây phiền hà về mặt thời gian cho người dùng ngay cả khi xảy ra sự cố nghiêm trọng Tuy nhiên, một trong những rủi ro tiềm ẩn là sự cố với cơ sở dữ liệu, có thể dẫn đến mất mát hoặc không sử dụng được dữ liệu.
▪ Giải pháp thay thế: Liên hệ người quản trị để được hổ trợ
III.1.2.4 Kế hoạch tài chính
III.1.2.4.1 Nguồn chi phí cho dự án
- Chi phí con người : Không có
- Chi phí tài liệu, công cụ: Không có
- Chủ yếu từ thành viên trong nhóm
III.1.2.5 Thuận lợi và thách thức
Nhóm phát triển phần mềm có nhiều thuận lợi, bao gồm sự định hướng rõ ràng về quy định phát triển từ trước, cùng với tài liệu phong phú về quy trình phát triển, đảm bảo chất lượng cao Nguồn tài liệu đa dạng giúp các nhà phát triển nhanh chóng làm quen với công nghệ mới Hơn nữa, tinh thần hăng say làm việc của nhóm và sự gần gũi của đề tài với nhóm phát triển cũng góp phần tạo nên môi trường làm việc tích cực và hiệu quả.
- Về mặt khó khăn: o Nhiều công nghệ mới yêu cầu nhóm phát triển phải tìm hiểu kỹ
III.1.3 Tầm nhìn và phạm vi
- Website bán sách online với mục tiêu giúp người dùng không mất quá nhiều thời gian để tìm kiếm những những cuốn sách yêu thích dành cho bản thân
III.1.3.2 Mục tiêu cần đạt BO-1: Ít nhất 90% người dùng hài lòng với sản phẩm
BO-2: Ứng dụng hổ trợ tối đa 24/24 thời gian thực hiện các nghiệp vụ được hổ trợ bởi hệ thống phần mềm
BO-3: Ứng dụng hổ trợ 12/24 thời gian thực chăm sóc khách hàng được hổ trợ bởi hệ thống quản lý
III.1.3.3 Các thước đo độ thành công SM-1: Tổng số người dùng ứng dụng tăng ít nhất 10% theo tháng
SM-2: Thời gian đáp ứng của sản phẩm / phản hồi yêu câu của khách hàng giảm xuống ít nhất 40%
SM-3: Giảm số lượng lỗi ít nhất có thể không quá 1-2 lỗi theo tháng Tránh ảnh hưởng đến trải nghiệm người dùng
SM-4: Mức đồ hài lòng của khách hàng tăng ít nhất 0.5 điểm trong thang điểm đánh giá chất lượng
III.1.3.4 Phạm vi và hạn chế
III.1.3.4.1 Mô tả yêu cầu người dùng
- Hệ thống cho phép người dùng đăng ký tài khoản để quản lý đơn hàng dễ dàng hơn
- Thuyết kế website có một cái nhìn trực quan, đơn giản và dễ sử dụng
- Có thống kê mặt hàng để cho quản lý dễ dàng quản lý doanh thu
- Thiết kế responsive tương thích với thiết bị
- Chăm sóc khách hàng trên ứng dụng (hổ trợ 12/24)
Quy trình thực hiện đồ án
- Thời gian thực hiện: 1/3/2022 đến 10/6/2022
- Quy trình thực hiện được thiết kế theo mô hình Scrum, mỗi sprint được kéo dài từ một đến hai tuần
Sprint Thời gian Công việc
- Xây dựng codebase của đồ án
- Xây dựng tính năng đăng ký, đăng nhập
- Xây dựng giao diện tính năng xem sách, quản lý sách
- Xây dựng tính năng profile người dùng
- Xây dựng tính năng giỏ hàng
- Xây dựng tính năng quản lý sách
- Xây dựng tính năng xem đơn hàng và quản lý đơn hàng
- Xây dựng tính năng bình luận và đánh giá
- Xây dựng tính năng quản lý người dùng Sprint 6 27/5/2022 -
- Kiểm tra lỗi và sửa lỗi
Danh sách tính năng
STT Tên yêu cầu Quy định Ghi chú
6 Xem thông tin cá nhân
7 Cập nhập thông tin cá nhân
8 Cập nhập ảnh đại diện
9 Theo dõi danh sách đơn hàng cá nhân
11 Xem danh sách đã mua
16 Quản lý danh sách sản phẩm
17 Quản lý danh sách người dùng
21 Quản lý danh sách hóa đơn
22 Thay đổi trạng thái hóa đơn
24 Thêm sản phẩm vào giỏ hàng
25 Xóa sản phẩm khỏi giỏ hàng
28 Xóa đánh giá sản phẩm
29 Nhập thông tin đơn đặt hàng
30 Chọn phương thức thanh toán
Yêu cầu phi chức năng
- Các yêu cầu phi chức năng o Hiệu năng hoạt động
Thời gian phản hồi cho các yêu cầu không được vượt quá 1 giây, đồng thời cần hiển thị thanh thời gian để người dùng dễ dàng theo dõi tiến trình thực hiện các thao tác.
Hệ thống cần phải có khả năng xử lý một lượng lớn dữ liệu để lưu trữ sách, hóa đơn và thông tin người dùng Đặc biệt, hệ thống lưu trữ hình ảnh yêu cầu tối thiểu 100GB dung lượng lưu trữ.
▪ Công suất tối đa: Hệ thống có thể phục vụ ít nhất 100 người dùng ở một thời điểm cụ thể o Tương thích:
▪ Hệ thống có thể chạy trên tất cả các trình duyệt với các tính năng và giao diện như nhau o Tính khả dụng:
▪ Phù hợp với nhu cầu sử dụng của người dùng
▪ Dễ dàng học cách sử dụng
▪ Truy cập ở bất kỳ đâu o Tính tin cậy:
▪ Sẵn sàng trong ít nhất 99% thời gian hoạt động
▪ Thời gian giữa các lần xảy ra sự cố gián đoạn không quá 20 phút o An toàn thông tin:
▪ Bảo mật, toàn vẹn thông tin
Thiết kế database
III.5.1 Danh sách các bảng
1 users Lưu trữ danh sách người dùng
2 receipts Lưu trữ danh sách hoá đơn
3 carts Lưu trữ danh sách các giỏ hàng
4 products Lưu trữ danh sách sản phẩm
5 categories Lưu trữ danh sách các loại sách
6 tags Lưu trữ danh sách các từ khoá
III.5.2 Chi tiết các bảng
III.5.1.1 Bảng users STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc duy nhất
2 username String Bắt buộc duy nhất
Tên đăng nhập của người dùng
3 password String Bắt buộc Mật khẩu đã mã hoá của người dùng
4 name String Bắt buộc Tên của người dùng
5 phone Number Bắt buộc Số điện thoại của người dùng
6 gender String Bắt buộc Giới tính của người dùng
7 role String Bắt buộc Vai trò của người dùng
8 mail String Bắt buộc Mail của người dùng
9 avatar String Bắt buộc Link ảnh đại diện của người dùng
10 cartID ObjectID Bắt buộc Mã của giỏ hàng liên kết với người dùng
11 birthday Date Bắt buộc Sinh nhật của người dùng
12 address Object Bắt buộc Địa chỉ của người dùng
III.5.1.2 Bảng receipts STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc duy nhất
2 username String Bắt buộc Mã người dùng
3 listProduct Array Bắt buộc Danh sách sản phẩm
4 address Object Bắt buộc Địa chỉ người dùng
5 totalMoney Number Bắt buộc Tổng tiền hoá đơn
6 payMethod String Bắt buộc Phương thức thanh toán
7 shipMoney Number Bắt buộc Tiền ship
8 date Date Bắt buộc Ngày của hoá đơn
9 status String Bắt buộc Trạng thái đơn hàng
10 note String Bắt buộc Ghi chú đơn hàng
11 userID ObjectID Bắt buộc Mã người dùng
12 mail String Bắt buộc Mail người dùng
III.5.2.3 Bảng carts STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc Mã giỏ hàng
2 userID ObjectID Bắt buộc Mã người dùng
4 products Array Bắt buộc Danh sách sản phẩm
III.5.2.4 Bảng products STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc duy nhất
2 name String Bắt buộc Tên sách
3 price Number Bắt buộc Giá của sách
4 historyPrice Array Bắt buộc Giá nhập của sách
5 imgUrl Array Bắt buộc Danh sách đường dẫn của sách
6 introduction String Bắt buộc Giới thiệu sách
7 category Array Bắt buộc Loại sách
8 updateList Array Bắt buộc Danh sách các lần chỉnh sửa sản phẩm
9 author String Bắt buộc Tác giả
10 publish String Bắt buộc Nhà xuất bản
11 publishYear Number Bắt buộc Năm xuất bản
12 quantity Number Bắt buộc Số lượng sách
13 descriptiom String Bắt buộc Mô tả sách
14 tag Array Bắt buộc Từ khoá của sách
15 pageAmount Number Bắt buộc Số trang của sách
16 priceImport Number Bắt buộc Giá nhập của sách
III.5.2.5 Bảng categories STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc duy nhất
2 name String Bắt buộc Tên loại sách
III.5.2.6 Bảng tags STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectID Bắt buộc duy nhất
2 tag String Bắt buộc Từ khoá
Thiết kế giao diện
- Giao diện được thiết kế trên figma
- Link: https://www.figma.com/file/gkZihQ6GkacSacT9pSXj3s/Book-
III.6.1 Danh sách các màn hình
STT Tên màn hình Ghi chú
3 Màn hình quên mật khẩu
9 Màn hình quản lý sản phẩm
10 Màn hình quản lý khách hàng
11 Màn hình thêm sản phẩm
12 Màn hình quản lý đơn hàng
III.6.2 Chi tiết các màn hình
III.6.2.1 Màn hình đăng nhập
III.6.2.2 Màn hình đăng ký
III.6.2.3 Màn hình quên mật khẩu
III.6.2.4 Màn hình trang chủ
III.6.2.5 Màn hình sản phẩm
III.6.2.7 Màn hình thanh toán
III.6.2.9 Màn hình quản lý sản phẩm
III.6.2.10 Màn hình quản lý khách hàng
III.6.2.11 Màn hình thêm sản phẩm
III.6.3.12 Màn hình quản lý đơn hàng
Đặc tả Usecase
III.7.1 Sơ đồ usecase tổng quát
III.7.2 Đặc tả chi tiết usecase
III.7.2.1 Đặc tả usecase đăng ký tài khoản
Tên yêu cầu Đăng ký tài khoản
Mô tả Đăng ký tài khoản cho người dùng
Tác nhân Người dùng Điều kiện trước Không có Điều kiện sau Không có
2 Chọn đăng ký tài khoản
3 Điền thông tin đăng ký tài khoản
4 Đăng ký tài khoản Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.2 Đặc tả usecase đăng nhập tài khoản
Tên yêu cầu Đăng nhập tài khoản
Mô tả Đăng nhập tài khoản cho người dùng
Tác nhân Người dùng Điều kiện trước Không có Điều kiện sau Không có
2 Chọn đăng nhập tài khoản
3 Điền thông tin tài khoản và mật khẩu
4 Đăng nhập Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.3 Đặc tả usecase cập nhật thông tin cá nhân
Tên yêu cầu Cập nhật thông tin tài khoản
Mô tả Cập nhật thông tin cho người dùng
Tác nhân Người dùng Điều kiện trước Đăng nhập tài khoản Điều kiện sau Không có
I Cập nhật thông tin tài khoản
1 Truy cập trang thông tin tài khoản
2 Chọn cập nhập thông tin tài khoản
3 Điền thông tin cần cập nhập
4 Lưu Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.4 Đặc tả usecase tạo đơn hàng người dùng
Tên yêu cầu Tạo đơn hàng
Mô tả Tạo đơn hàng cho người dùng
Tác nhân Người dùng Điều kiện trước Đăng nhập tài khoản Điều kiện sau Không có
1 Truy cập trang chủ và trang sản phẩm
2 Chọn sản phẩm cần thêm vào giỏ hàng
3 Truy cập trang giỏ hàng
4 Điền thông tin đơn hàng
5 Chọn phương thức thanh toán
6 Tạo đơn hàng Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.5 Đặc tả usecase quản lý người dùng
Tên yêu cầu Quản lý người dùng
Quản trị viên có khả năng xóa và thay đổi quyền truy cập của người dùng sau khi đăng nhập vào tài khoản quản trị viên.
1 Truy cập quản lý người dùng
2 Chọn người dùng cần xóa
3 Xác nhận xóa người dùng
II Sửa quyền truy cập người dùng
1 Truy cập quản lý người dùng
2 Chọn người dùng cần thay đổi quyền truy cập
3 Xác nhận Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.6 Đặc tả usecase quản lý hoá đơn
Tên yêu cầu Quản lý hóa đơn
Mô tả Giúp quản trị viên có thể thay đổi trạng thái hóa đơn
Tác nhân Quản trị viên Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau
1 Truy cập quản lý hóa đơn
2 Chọn hóa đơn để thay đổi trạng thái
3 Xác nhận thay đổi trang thái Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.7 Đặc tả usecase mua sản phẩm
Tên yêu cầu Mua sản phẩm
Mô tả Giúp người dùng có thể mua sản phẩm
Tác nhân Người dùng Điều kiện trước Đăng nhập tài khoản người dùng Điều kiện sau
2 Truy cập trang sản phẩm
II Thêm vào giỏ hàng
2 Truy cập trang sản phẩm
3 Nhấn vào nút mua sản phẩm Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.8 Đặc tả usecase quản lý sản phẩm
Tên yêu cầu Quản lý sản phẩm
Mô tả Giúp quản trị viên có thể quản lý sản phẩm
Tác nhân Quản trị viên Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau
Luồng xử lý I Xem danh sách sản phẩm
43 chính 1 Vào trang quản lý sản phẩm
1 Vào trang thêm sản phẩm
2 Truy cập trang thêm sản phẩm
4 Nhấn vào nút thêm sản phẩm III Sửa sản phẩm
1 Vào trang quản lý sản phẩm
2 Chọn sản phẩm cần chỉnh sửa
3 Điền thông tin cần chỉnh sửa
4 Chọn lưu để chỉnh sửa sản phẩm
1 Vào trang quản lý sản phẩm
2 Chọn sản phẩm cần xoá
3 Xác nhận xoá sản phẩm
4 Xác nhận để xoá sản phẩm Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.9 Đặc tả usecase quản lý loại sản phẩm
Tên yêu cầu Quản lý loại sản phẩm
Mô tả Giúp quản trị viên có thể quản lý loại sản phẩm
Tác nhân Quản trị viên Điều kiện trước Đăng nhập tài khoản quản trị viên
I Xem danh sách các loại sản phẩm
1 Vào trang quản lý sản phẩm
II Thêm loại sản phẩm
1 Vào trang quản lý sản phẩm
2 Chọn thêm loại sản phẩm
4 Nhấn vào nút thêm loại III Sửa loại sản phẩm
1 Vào trang quản lý sản phẩm
2 Chọn loại sản phẩm cần chỉnh sửa
4 Chọn lưu để chỉnh sửa
IV Xoá loại sản phẩm
1 Vào trang quản lý sản phẩm
2 Chọn loại sản phẩm cần xoá
3 Xác nhận xoá loại sản phẩm
4 Xác nhận để xoá Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
III.7.2.10 Đặc tả usecase quản lý các tag
Tên yêu cầu Quản lý các tag
Mô tả Giúp quản trị viên có thể quản lý các tag
Tác nhân Quản trị viên Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau
I Xem danh sách các tag
1 Vào trang quản lý sản phẩm
1 Vào trang quản lý sản phẩm
4 Nhấn vào nút thêm tag III Sửa loại sản phẩm
1 Vào trang quản lý sản phẩm
2 Chọn tag cần chỉnh sửa
4 Chọn lưu để chỉnh sửa
IV Xoá loại sản phẩm
1 Vào trang quản lý sản phẩm
4 Xác nhận xoá tag để xoá tag Luồng xử lý phụ
- Hệ thống thông báo thực hiện thao tác thành công
- Hệ thống thông báo lỗi
Sơ đồ hoạt động
III.8.1 Danh sách các sơ đồ III.8.2 Chi tiết các sơ đồ
III.8.2.1 Sơ đồ hoạt động đăng ký tài khoản
III.8.2.2 Sơ đồ hoạt động đăng nhập
III.8.2.3 Sơ đồ hoạt động cập nhật thông tin cá nhân
III.8.2.4 Sơ đồ hoạt động quên mật khẩu
III.8.2.5 Sơ đồ hoạt động theo dõi danh sách đơn hàng
III.8.2.6 Sơ đồ hoạt động xem sản phẩm
III.8.2.7 Sơ đồ hoạt động thêm sản phẩm
III.8.2.8 Sơ đồ hoạt động sửa sản phẩm
III.8.2.9 Sơ đồ hoạt động xoá sản phẩm
III.8.2.11 Sơ đồ hoạt động xem dashboard
III.8.2.12 Sơ đồ hoạt động xoá người dùng
III.8.2.13 Sơ đồ hoạt động mua sản phẩm
III.8.2.14 Sơ đồ hoạt động đánh giá sản phẩm
III.8.2.15 Chỉnh sửa quyền truy cập người dùng
III.8.2.14 Chỉnh sửa trạng thái hoá đơn
III.8.2.15 Sơ đồ hoạt động tạo đơn hàng cho người dùng
Kết quả
IV.1.1 Các tính năng đã làm được
- Kết thúc giai đoạn phát triển, đồ án đã đạt được các tính năng và yêu cầu mà nhóm đã đề ra
- Phần mềm đã có đầy đủ các tính năng đã đặt ra một trang web bán hàng
Hệ thống này sở hữu những tính năng nổi bật như quản lý sản phẩm, quản lý thông tin, quản lý đơn hàng, quản lý người dùng, cùng khả năng xem và đánh giá sản phẩm.
IV.1.2 Những điều chưa làm được
- Có một số trang còn chưa responsive 100%
- Khi chuyển trang truy vấn dữ liệu nhiều khi bị chậm.
Hướng phát triển tiếp theo
Dự án hiện đã đạt đến giai đoạn có thể sử dụng với đầy đủ tính năng bán hàng, kiểm tra đơn hàng và quản lý sách Tuy nhiên, để đáp ứng nhu cầu của khách hàng và người quản lý trang web, vẫn còn một số tính năng cần hoàn thiện và tối ưu hóa Phản hồi từ người dùng sẽ giúp cải thiện tính năng và giao diện, đảm bảo phù hợp nhất với nhu cầu của họ Sau khi hoàn thiện, dự án có thể mở rộng với các tính năng mới và độc đáo nhằm thu hút thêm người dùng.
Để cải thiện hiệu suất của trang web, cần khắc phục một số tồn tại như: đảm bảo tất cả các trang đều responsive 100%, nâng cấp giao diện của một số phần để người dùng có trải nghiệm dễ dàng hơn, và cải thiện tính năng lịch sử giá để người dùng có thể dễ dàng truy cập và sử dụng.
Đối với những người dùng có nhu cầu mua sách, có hai hướng phát triển chính Hướng phát triển thứ nhất là xây dựng một cộng đồng những người yêu sách, nơi mọi người có thể chia sẻ đam mê, kiến thức và kinh nghiệm đọc sách, từ đó tạo ra một môi trường tương tác tích cực và hỗ trợ lẫn nhau trong việc khám phá thế giới sách.
Trong cộng đồng, một số cá nhân có sức ảnh hưởng lớn có thể đăng bài review sản phẩm kèm theo một liên kết đặc biệt Khi người dùng nhấp vào liên kết đó và thực hiện mua hàng, những người đăng bài sẽ nhận được hoa hồng từ người bán.
Xây dựng một cộng đồng tương tự như Goodreads sẽ tạo ra không gian để thảo luận về các cuốn sách hay và những tác phẩm nên đọc, đồng thời khuyến khích việc chia sẻ cảm nhận sau khi đọc Hướng phát triển thứ hai là tối ưu hóa trải nghiệm người dùng, nhằm tạo ra những đột phá và mang đến những trải nghiệm mới mẻ cho người mua sách trong quá trình mua sắm và thưởng thức sách.
Xây dựng một hệ thống lưu trữ sách điện tử tương tự như Steam, cho phép người dùng mua, tặng và chia sẻ sách với người khác.
Xây dựng tính năng đọc sách tương thích với mọi thiết bị, giúp người dùng dễ dàng truy cập và đọc sách mọi lúc, mọi nơi chỉ với một trang web.
Đồ án trên có thể phát triển thêm tính năng gợi ý sách cá nhân hóa cho từng người dùng dựa trên lịch sử tìm kiếm và sách đã mua Bên cạnh đó, tính năng tìm kiếm từ khóa trong các cuốn sách đã mua hoặc trong danh sách sách điện tử có thể xem trước sẽ giúp người dùng dễ dàng tìm kiếm nguồn tài liệu và các đoạn sách theo ý muốn.
Đối với người quản lý trang web, việc sử dụng biểu đồ và hình ảnh trực quan trong tổng hợp và phân tích dữ liệu là rất quan trọng Bên cạnh đó, cần tăng cường các tính năng quản lý để nâng cao hiệu quả công việc.
▪ Xem chi tiết số đơn hàng của người dùng: Đơn hàng đã bán, tỉ lệ nhận hàng, tỉ lệ huỷ đơn hàng của từng người dùng
▪ Xem chi tiết quản lý sản phẩm:
• Sản phẩm được thêm vô giỏ hàng của bao nhiêu người dùng
• Sản phẩm được mua bao nhiêu lần kể từ khi thêm vào giỏ hàng
Đường dẫn Github
- https://github.com/LuongThienPhuoc/SellingBook-FE
Đường dẫn Figma
- https://www.figma.com/file/gkZihQ6GkacSacT9pSXj3s/Book-Selling?node- id"1%3A32
Bảng phân công công việc
1 Chuẩn bị, lên kế hoạch x x
2 Khảo sát, đặc tả yêu cầu x x
7 Xây dựng trang chi tiết sách x
8 Xây dựng trang giỏ hàng x
9 Xây dựng trang thông tin người dùng x
10 Xây dựng trang quản lý đơn hàng x
11 Xây dựng trang quản lý sản phẩm x
13 Đăng nhập, đăng ký quên mật khẩu x
14 Bình luận và đánh giá của người dùng x
15 Kiểm tra và sửa lỗi x x
16 Viết và tổng hợp báo cáo x x
Tỷ lệ công việc phân công 50% 50%