Tìm hiểu reactjs và xây dựng website bán giày

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM Đồ án TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN GIÀY Giảng viên hướng dẫn Ths THÁI THỤY HÀN UYỂN Tp Hồ Chí Minh, 2022 Sinh viên thực hiện: STT Họ tên Trương Thị Kim Liên Nguyễn Vũ Thành Long MSSV 19521748 19521795 NHẬN XÉT ĐỒ ÁN (Của cán giảng viên) Lời cảm ơn Sau trình học tập rèn luyện khoa Công nghệ Phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, chúng em trang bị kiến thức kỹ để hồn thành đồ án mơn học Đồ án môn học mang lại cho sinh viên nhìn việc áp dụng kiến thức có để giải vấn đề thực tế Môn học thử thách hội để sinh viên rèn luyện hồn thiện thân qua kinh nghiệm, kỹ làm đồ án Chúng em xin gửi lời cảm ơn đến THÁI THỤY HÀN UYỂN tận tình quan tâm, giúp đỡ hướng dẫn nhóm suốt trình làm đồ án Qua lời góp ý, bảo mà nhóm hồn thành đồ án tốt Nhóm xin cảm ơn tất thầy cô, anh chị, bạn bè giúp đỡ, hỗ trợ suốt q trình nhóm hồn thành đồ án Trong q trình học tập hồn thiện đồ án cịn gặp nhiều sai sót, chúng em mong nhận góp ý q thầy bạn để hồn thiện Chúng em xin chân thành cảm ơn! Mục lục CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài Lý chọn đề tài Đối tượng nghiên cứu Phạm vi nghiên cứu Phương pháp nghiên cứu 6 6 7 CHƯƠNG II:TÌM HIỂU REACTJS Giới thiệu Lịch sử phát triển ReactJs Tính ReactJs Lợi ích sử dụng ReactJs 8 8 10 CHƯƠNG 3: TÌM HIỂU CÁC CƠNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 12 Tổng quan JS 12 Tổng quan MongoDB 13 Tổng quan NodeJS 14 CHƯƠNG 4: XÂY DỰNG HỆ THỐNG Mơ hình Use-case Sơ đồ lớp Sơ đồ Thiết kế giao diện 15 15 32 35 35 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Thành đạt Ưu nhược điểm 50 50 50 CHƯƠNG 6: TÀI LIỆU THAM KHẢO 51 CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC 52 CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài - Tên đề tài: Tìm hiểu ReactJS xây dựng website bán giày - Công nghệ sử dụng: ● Front-end: ReactJS, Axios ● Back-end: Restful API, NodeJS - Cơ sở liệu: MongoDB Lý chọn đề tài Hiện nay, thương mại điện tử trở nên phổ biến với doanh nghiệp hầu hết người dân nước phát triển phát triển Không thể phủ nhận lợi ích to lớn mà mang lại, từ giúp cho thương mại điện tử trở thành phần tách rời chiến lược phát triển kinh doanh doanh nghiệp Nắm bắt tiềm phát triển thương mại điện tử tình hình dịch bệnh COVID-19 bùng nổ, doanh nghiệp nắm bắt tình hình tập trung đẩy mạnh phát triển hình thức quảng cáo, mua bán dựa thương mại điện tử để mang lại nhiều lợi ích tiếp cận, đáp ứng yêu cầu khách hàng cách nhanh chóng Và doanh nghiệp buôn bán giày không bỏ qua hội phát triển mà thương mại điện tử mang lại Chính thế, nhóm định thực xây dựng trang web bán giày để đáp ứng nhu cầu tìm kiếm, lựa chọn mua sắm giày cho người tiêu dùng Ngồi ra, để hịa thiện trang web, nhóm tìm hiểu định sử dụng cơng nghệ ReactJS trở nên phổ biến tính linh hoạt đơn giản cho lập trình viên trình phát triển phần mềm Đối tượng nghiên cứu - Người làm đề tài: ● Sinh viên học tập nghiên cứu trường Đại học Công nghệ Thông tin – ĐHQG Tp Hồ Chí Minh - Cơng nghệ, cơng cụ phát triển: ● Visual Studio Code ● ReactJS ● Restful API ● NodeJS ● MongoDB - Thiết kế giao diện: ● Phác thảo thiết kế giao diện sử dụng công cụ Figma - Đối tượng phạm vi đề tài hướng đến: ● Quản lý hệ thống bán hàng ● Những doanh nghiệp phân phối hàng hóa nước ● Người tiêu dùng nước (có thể) ngồi nước Phạm vi nghiên cứu - Website nhóm xây dựng phát triển ReactJs mơi trường web - Tìm hiểu ReactJs để áp dụng vào phần mềm hỗ trợ người dùng có nhìn tổng quan sản phẩm trước lựa chọn mua hàng Phương pháp nghiên cứu - Cách tiếp cận: Website xây dựng dựa mơ hình MVC môi trường đa tảng - 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 website xây dựng cách sử dụng ReactJs ● Phương pháp thực nghiệm CHƯƠNG II:TÌM HIỂU REACTJS Giới thiệu ReactJs thư viện Javascript mã nguồn mở phát triển Facebook để tạo trang web hấp dẫn, nhanh hiệu với mã hóa tối thiểu Mục đích cốt lõi ReactJS không khiến cho trang web phải thật mượt mà phải nhanh, khả mở rộng cao đơn giản ReactJs phân tách trang web thành thành phần riêng lẻ Chính vậy, thay làm việc tồn ứng dụng web, ReactJs cho phép lập trình viên phân tách giao diện người dùng phức tạp thành thành phần đơn giản Lịch sử phát triển ReactJs - React tạo Jordan Walke – kỹ sư phần mềm Facebook Ông cho phát hành nguyên mẫu React gọi “FaxJS” Nó triển khai lần News Feed Facebook vào năm 2011 sau Instagram vào năm 2012 - Nó mở mã nguồn (open-sourced) JSConf US tháng năm 2013 - Vào ngày 26 tháng năm 2017, React 16.0 phát hành công chúng - Vào ngày 16 tháng năm 2019, React 16.8 phát hành công chúng Bản phát hành giới thiệu React Hooks - Vào ngày 10 tháng năm 2020, React v17.0 phát hành công chúng, đáng ý phát hành lớn khơng có thay đổi lớn API dành cho nhà phát triển React - Phiên v18.0.1 Tính ReactJs Tính chất ReactJs: - ReactJs mang tính chất khai báo - ReactJs đơn giản - ReactJs dựa thành phần riêng lẻ - ReactJs hỗ trợ phía máy chủ - ReactJs ứng dụng rộng rãi - ReactJs nhanh - ReactJs dễ để học 3.1 JSX JSX phần mở rộng cú pháp cho JavaScript Trong React, thay sử dụng JavaScript thơng thường để tạo khn mẫu, sử dụng JSX JSX JavaScript đơn giản cho phép trích dẫn HTML sử dụng cú pháp thẻ HTML để hiển thị thành phần Cú pháp HTML xử lý thành lệnh gọi Javascript React Framework Tuy nhiên, nhà phát triển không thiết phải sử dụng JSX phát triển React, có khác biệt lớn việc viết tài liệu React.js JSX JavaScript 3.2 Redux Redux predictable state management tool cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook Do Redux thường dùng kết hợp với React 3.3 Single Way Data Flow React.js thiết kế để hỗ trợ liệu chảy xi dịng, theo hướng Nếu liệu phải chảy theo hướng khác, bạn cần tính bổ sung React chứa tập hợp giá trị bất biến chuyển đến trình kết xuất thành phần dạng thuộc tính thẻ HTML Các thành phần sửa đổi trực tiếp thuộc tính hỗ trợ chức gọi lại để thực sửa đổi 3.4 Virtual DOM React chứa đại diện DOM thực nhớ gọi Virtual DOM Thao tác DOM thực chậm nhiều so với VDOM khơng có vẽ hình Khi trạng thái đối tượng thay đổi, VDOM sửa đổi đối tượng DOM thực thay cập nhật tồn đối tượng Điều làm cho thứ di chuyển nhanh chóng, đặc biệt so với công nghệ front-end khác phải cập nhật đối tượng đối tượng thay đổi ứng dụng web Lợi ích sử dụng ReactJs ● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng bạn khơng cần phải code nhiều tạo trang web dùng JavaScript, HTML cung cấp cho bạn đủ loại “đồ chơi” để bạn dùng cho nhiều trường hợp ● Tái sử dụng Component: Nếu bạn xây dựng Component đủ tốt, đủ flexible để thỏa “yêu cầu” nhiều dự án khác nhau, bạn tốn thời gian xây dựng ban đầu sử dụng lại toàn dự án sau Không riêng ReactJS mà framework cho phép thực điều đó, ví dụ Flutter chẳng hạn ● Có thể sử dụng cho Mobile application: Hầu hết biết ReactJS sử dụng cho việc lập trình website, thực chất sinh khơng làm Nếu bạn cần phát triển thêm ứng dụng Mobile, sử dụng thêm React Native – framework khác phát triển Facebook, bạn dễ dàng “chia sẻ” Component sử dụng lại Business Logic ứng dụng ● Thân thiện với SEO: SEO phần thiếu để đưa thông tin website bạn lên top đầu tìm kiếm Google Bản chất ReactJS thư viện JavaScript, Google Search Engine crawl index code JavaScript, nhiên bạn cần thêm vài thư viện khác để hỗ trợ điều nhé! 4.4 Trang Products 4.5 Trang ProductInfo 4.6 Trang Carts 4.7 Trang Account 4.8 Trang Favorites 4.9 Trang Orders CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Thành đạt - Thông qua đồ án, nhóm tìm hiểu cơng nghệ ReactJs, NodeJs, phẩm mềm hỗ trợ Figma nhằm phục vụ cho công việc sau thành viên - Tìm hiểu học quy trình để xây dựng website - Ngoài ra, nhóm cịn củng cố vững kiến thức học sơ đồ use-case, sơ đồ lớp,… - Nâng cao kỹ lập trình, làm việc nhóm giải vấn đề Ưu nhược điểm 2.1 Ưu điểm - Giao diện đơn giản, bố cục hợp lý, dễ tiếp cận thao tác cho người dùng - Nhóm hồn thành mục tiêu đề 2.2 Nhược điểm - Chưa tối ưu hóa code - Chưa có chức đặc biệt hóa 2.3 Hướng phát triển - Xây dựng phát triển chức cịn thiếu, chưa hồn thiện - Nâng cao tính bảo mật sản phẩm - Bổ sung chức nhằm hỗ trợ trải nghiệm người dùng tốt như: ● Hỗ trợ tìm kiếm sản phẩm ● Hỗ trợ tốn qua nhiều hình thức CHƯƠNG 6: TÀI LIỆU THAM KHẢO ReactJs: https://reactjs.org/ https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5 WzjblO7 Javascript: https://www.javascript.com/ https://hocjavascript.net/tong-quan/tong-quan-ve-javascript/#:~:text=JavaScr ipt%20l%C3%A0%20m%E1%BB%99t%20ng%C3%B4n%20ng%E1%BB %AF%20script%20th%E1%BA%ADt%20s%E1%BB%B1%20quan%20tr %E1%BB%8Dng,Microsystems%20v%C3%A0%20Netscape%20ph%C3% A1t%20tri%E1%BB%83n.&text=N%C3%B3%20%C4%91%C6%B0%E1 %BB%A3c%20d%C3%B9ng%20%C4%91%E1%BB%83%20t%E1%BA% A1o,t%C6%B0%C6%A1ng%20t%C3%A1c%20v%E1%BB%9Bi%20ng% C6%B0%E1%BB%9Di%20d%C3%B9ng MongoDB: https://www.mongodb.com/ https://viblo.asia/p/tong-quan-ve-mongodb-EoDkQoxqGbV NodeJs: https://nodejs.org/en/ https://viblo.asia/p/tong-quan-ve-node-js-AeJ1vOdQRkby CHƯƠNG 7: BẢNG PHÂN CƠNG CƠNG VIỆC STT Nội dung cơng việc Ngày bắt đầu Ngày kết thúc Người đảm nhận Trạng thái Chọn đề tài 21/02/202 22/02/202 - Trương Thị Kim Liên - Nguyễn Vũ Thành Long Hồn thành Phân tích 22/02/202 29/02/202 - Trương Thị Kim Liên - Nguyễn Vũ Thành Long Hoàn thành Đặc tả yêu 29/02/202 cầu 14/03/202 - Nguyễn Vũ Thành Long Hoàn thành Thiết kế giao diện 14/03/202 28/03/202 - Trương Thị Kim Liên Hồn thành Tìm hiểu ReactJs 28/03/202 20/03/202 - Trương Thị Kim Liên - Nguyễn Vũ Thành Long Hồn thành Tìm hiểu 28/03/202 Axios, Restful API, NodeJs, MongoDB 20/03/202 - Trương Thị Kim Liên - Nguyễn Vũ Thành Long Hoàn thành Thiết kế sở liệu 20/03/202 27/03/202 - Nguyễn Vũ Thành Long Hoàn thành Cài đặt ReactJs 27/03/202 28/03/202 - Trương Thị Kim Liên Hoàn thành Xây dựng hình 28/03/202 04/06/202 - Trương Thị Kim Liên Hoàn thành 10 Xây dựng sở liệu, tạo API 28/03/202 04/06/202 - Nguyễn Vũ Thành Long Hoàn thành 11 Kiểm thử 04/06/202 07/06/202 - Trương Thị Kim Liên - Nguyễn Vũ Thành Long Hoàn thành 12 Viết báo cáo, slide 07/06/202 15/06/202 - Trương Thị Kim Liên - Nguyễn Vũ Thành Long Hoàn thành ... CÔNG VIỆC 52 CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài - Tên đề tài: Tìm hiểu ReactJS xây dựng website bán giày - Công nghệ sử dụng: ● Front-end: ReactJS, Axios ● Back-end: Restful API, NodeJS - Cơ sở liệu:... nhóm định thực xây dựng trang web bán giày để đáp ứng nhu cầu tìm kiếm, lựa chọn mua sắm giày cho người tiêu dùng Ngồi ra, để hịa thiện trang web, nhóm tìm hiểu định sử dụng cơng nghệ ReactJS trở... ReactJs Tính chất ReactJs: - ReactJs mang tính chất khai báo - ReactJs đơn giản - ReactJs dựa thành phần riêng lẻ - ReactJs hỗ trợ phía máy chủ - ReactJs ứng dụng rộng rãi - ReactJs nhanh - ReactJs