Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu về đề tài 1.1 Tầm quan trọng sách Từ trước đến nay sự phát triển của nhân loại luôn gắn liền với sách. Sách được con người sử dụng để lưu giữ lại những kiến thức và truyền lại cho các thế hệ sau. Sách chứa đựng những thông tin, giá trị vật chất và tinh thần của nhân loại, chứa đựng những tình cảm vào trong những vấn đề của cuộc sống. Mỗi cuốn sách lại là những chủ đề, lĩnh vực khác nhau nhưng đều với mục đích hướng tới cho bạn đọc những tri thức mới, giá trị nhân loại.
Sách chứa đựng nguồn kiến thức khổng lồ và giúp con người giao lưu với thế giới bên ngoài, tiếp cận với nền văn minh của nhân loại, nhờ có sách mà xã hội mới có thể phát triển được. Cho dù xã hội có phát triển tới đâu thì những giá trị to lớn mà sách đem lại cho con người vẫn không thể nào xóa bỏ được. Việc gìn giữ những giá trị lịch sử cho đời sau và là nguồn tri thức quý giá thì chỉ có sách mới có thể đem lại cho con người được. Sách đóng vai trò tất yếu trong quá trình phát triển của xã hội loài người.2 Lý do chọn đề tài Hiện nay với sự phát triển vượt bâc của internet cũng như hệ thống vận tải logictics thì các ngành nghề kinh doanh, thương mại điện tử đang ngày càng phát triển.
Các công ti, tập đoàn sẵn sàng chi lượng lớn tiền vào ngành này. Hệ thống thương mại điện tử hiện nay có nhiều sự vượt trội hơn so với các ngành nghề thương mại truyền thống. Chỉ với vài thao tác đơn giản trên các thiết bị thông minh người dùng dễ dàng lựa chọn các sản phẩm mình mong muốn. chúng sẽ được vận chuyển đến tận nhà của họ.
Đi cùng với sự phát triển của xã hội, nhu cầu về sách ngày càng lớn. Sách không chỉ được sử dụng để phục vụ mục đích học tập và tra cứu thông tin mà sách còn được sử dụng cho mục đích giải trí. Nhu cầu về sách ngày càng lớn, các hình thức kinh doanh 1 sách truyền thống càng bộc lộ nhiều điểm yếu như nguồn sách thiếu phong phú, khó tiếp cận đối với các khách hàng ở xa. Nắm bắt được các yếu tố trên nhóm chúng em quyết định lựa chọn để tài “Xây dựng website bán sách điện tử” để phục vụ cho nhu cầu tìm kiếm và mua các đầu sách chính thống có bản quyền của sách hàng.2 Khảo sát hiện trạng Hiện nay trên thị trường có nhiều website bán sách online như “fahasa.vn” nhưng hầu hết các website vẫn chưa tập trung hoàn toàn vào việc bán sách mà thường kết hợp với một vài ngành hàng khác như đồ chơi, văn phòng phẩm.
Do vậy nhóm quyết định xây dựng một website chỉ chuyên phục vụ khách hàng tìm kiếm, mua sách.3 Đối tượng nghiên cứu Đồ án này hướng đến nghiên cứu các đối tượng sau: ❖ Các công nghệ: o NodeJs o ExpressJs o JSON Web Token o MongoDB o Cloundinary o ReactJs o Redux o Ant design o Tailwind css ❖ Đối tượng trong phạm vi đề tài hướng đến: o Các nhà sách mong muốn mở rộng việc kinh doanh của mình sang hình thức online. o Các khách hàng mong muốn tìm kiếm, tra cứu mà mua sách theo hình thức online 2 1.4 Phạm vi nghiên cứu Đề tài tập trung vào nghiên cứu về ứng dụng website bán sách, phục vụ việc kinh doanh online của các nhà sách.5 Phương pháp nghiên cứu Nhóm đã sử dụng các phương pháp nghiên cứu: - Phương pháp đọc tài liệu. - Phương pháp phân tích các ứng dụng hiện có.6 Nhiệm vụ của đề tài Đề tài “Xây dựng website bán sách” là một ứng dụng chạy trên nền web đáp ứng các yêu cầu sau: - Cung cấp đầy đủ các tính năng tìm kiếm, mua bán sách cho nhiều đối tượng khách hàng khác nhau (có hoặc chưa có tài khoản). - Cung cấp đầy đủ các tính năng phục vụ việc kiểm soát, quản lí tài nguyên và hoạt động kinh doanh của nhà sách.7 Mục tiêu của đề tài - Tìm hiểu cách xây dựng ứng dụng web - Tìm hiểu về kiến trúc hệ thống, những công nghệ liên quan - Xây dựng thành công ứng dụng website bán sách 3 Chương 2 - CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về ReactJs 2.1 Giới thiệu React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application.
Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được. React được sử dụng tại Facebook trong production, và instagram được viết hoàn toàn trên React. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau.
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.2 Cách hoạt động Với React, chúng ta hoàn toàn có thể viết code HTML bằng Javascript. Không giống như những DOM element của trình duyệt, React element là những “plain object” (đối tượng đơn giản). React DOM giữ vai trò cập nhật DOM để phù hợp với các React element. ❖ Cách render một element Một ứng dụng thường chỉ có một DOM node gốc.
Để render một React element vào node gốc ta cần tuyền tất cả vào hàm ReactDOM. ❖ Cách cập nhật một element Tất cả React element đều là immutable. Khi tạo ra một element, bạn không thể thay đổi các thành phần con hoặc thuộc tính của nó. Cách duy nhất để cập nhật nó là truyền nó vào hàm ReactDOM.render() React sẽ so sánh element và các thành phần con của nó với cái trước đó và chỉ cập nhật những node cần thiết lên DOM thật 4 2.3 Ưu nhược điểm 2.1 Ưu điểm ❖ Dễ tiếp cận React là thư viện khá dễ tiếp cận và sử dụng.
Trong mô hình MVC (Model- View-control) thì React đảm nhận nhiệm vụ ‘V’ (View). Nó hoạt động bằng cách kết hợp HTML và Javascript thuần, vì thế cú pháp trong React khá là dễ hiểu. ❖ Tăng tốc độ tải trang với Virtual DOM Việc sử dụng Real DOM cấu trúc dạng tree với kích thước lớn, khi thay đổi gía trị, cây DOM được cập nhật lại toàn bộ gây tốn thời gian và rủi ro. Để giải quyêt vấn đề trên, React sử dụng Virual DOM (DOM ảo), mỗi khi render thì React sẽ tạo ra một DOM ảo và lưu nó vào trong bộ nhớ, khi thay đổi state của component thì DOM ảo sẽ được cập nhật lại và so sách với DOM ảo cũ (được đồng bộ với DOM thật trước đó) bằng thuật toán “diffing”, để tìm ra những node cần thay đổi và cuối cùng cập nhật lại những node đó trên DOM thật.
Vì thế quá trình cập nhật lại cây DOM sẽ không bị gián đoạn và làm chậm phản hồi, giúp website chạy mượt mà và nhanh hơn. ❖ Tái sử sụng dễ dàng với các Component React giúp lập trình viên hoàn toàn có thể sử dụng lại các component đã khai báo trước đó để phát triển các ứng dụng khác nhau có cùng chứ năng. Đây là một điểm mạnh cũng như lợi thế của ReactJS giúp các lập trình viên có thể dễ thở hơn trong các dự án. ❖ Viết component dễ dàng với JSX Khi nhắc đến React ta không thể bỏ qua JSX (Javascript + XML), đây là cú pháp mở rộng gần giống XML, người dùng có thể lập trình React bằng cú pháp của XML thay vì sử dụng Javascript mà không làm thay đổi ý nghĩa của Javascript, nó giúp chúng ta dễ dàng định nghĩa và quản lý các component phức tạp cũng như việc dễ dàng đọc hiểu được ý nghĩa của các component hơn.
5 ❖ Thân thiện với SEO Một vai trò quan trọng trong tối ưu SEO là tốc độ tải trang. React có thể tăng tốc dộ tải trang của ứng dụng thông qua Virtual DOM, nên rất có hiệu quả với việc cải thiện kết quả SEO. Mặt khác, React có khả năng tạo ra các giao diện người dùng có thể truy cập vào các công cụ tìm kiếm. Tuy nhiên React không thể cải thiện 100% khả năng SEO của trang web, còn cần phải phụ thuộc vào các thư viện bổ sung, nội dung trang web, định tuyến, tương tác người dùng, ….
❖ Dễ tích hợp và kiểm thử Như đã giới thiệu ở trên, React chỉ là một thư viện giúp tạo ra giao diện người dùng (View) nên có thể dễ dàng tích hợp vào các framework khác như Angular, BackbooneJS, …. React được thiết kế với việc tạo ra các component riêng lẻ, nên việc kiểm thử UI, chức năng cũng được đơn giản hóa theo từng component. Bằng cách tích hợp các thư viện kiểm thử như Jest, Enzyme, React Testing Library … sẽ giúp cho việc kiểm thử dễ dàng hơn.2 Nhược điểm ❖ Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó không phải là một MVC framework như những framework khác.
Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2- way binding hay là Ajax. ❖ Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.
❖ React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh. ❖ Khó tiếp cận cho người mới học Web.2 Tổng quan về Redux Toolkit 2.1 Giới thiệu Redux là công cụ quản lý state phổ biến nhưng có nhiều trang cãi vì redux dài dòng và khó sử dụng. Vì để tạo ra một store hoàn chỉnh thì phải qua khá nhiều bước, tạo nhiều file với các đoạn code lặp lại khá nhiều, ngoài ra redux không hề xây dựng một quy chuẩn rõ ràng cho việc viết logic, cũng như ngoài redux thì đôi khi ta cần cài đặt thêm một số thư viện nữa như middleware, selectors.
thì mới có thể viết hoàn chỉnh logic quản lý state. Nên là redux-toolkit (là một package) sinh để giải quyết phần lớn những vấn đề kể trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code redux nhanh gọn, hoàn chỉnh theo một quy chuẩn thống nhất.2 Cách sử dụng Cài đặt redux toolkit bằng npm install @reduxjs/toolkit hoặc yarn add @reduxjs/toolkit. Tạo slice file: - Khai báo createSlice của @reduxjs/toolkit. - Tạo 1 initialState: vai trò là khung dữ liệu của state và giữ giá trị khởi tạo.