Tìm hiểu REACTJS và xây dựng WEBSITE bán đồ gia dụng (báo cáo cuối kì đồ án 1)

1 ĐẠ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ÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN ĐỒ GIA DỤNG Giảng viên hướng dẫn: ThS HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: LÊ THANH TUẤN –MSSV: 19522467 VÕ ĐÔNG PHÚ –MSSV: 19522025 Thành phố Hồ Chí Minh, tháng 06 năm 2022 ĐẠ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ÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN ĐỒ GIA DỤNG Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: LÊ THANH TUẤN –MSSV: 19522467 VÕ ĐÔNG PHÚ –MSSV: 19522025 Thành phố Hồ Chí Minh, tháng 06 năm 2022 Lời cảm ơn Đồ án môn đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp Đây mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, công sức để nghiên cứu, tìm tịi xây dựng Đồng thời, hội để sinh viên thực hành học suốt năm đại học học hỏi thêm nhiều kiến thức, kinh nghiệm kỹ phục vụ cho công việc sau Cho nên xem thử thách hội để sinh viên rèn luyện, hoàn thiện thân kĩ tích lũy suốt q trình làm đồ án Để đến đoạn cuối hành trình nỗ lực, cố gắng kiên trì Đồng hành sinh viên vượt qua thử thách có mặt giúp đỡ người thầy tận tâm cơng việc Nhóm xin chân thành cảm ơn Huỳnh Hồ Thị Mộng Trinh tận tình giúp đỡ nhóm em hồn thành đồ án Chính nhờ góp ý, động viên giúp đồ án nhóm hồn thiện chun nghiệp nhiều Bên cạnh đó, nhóm học hỏi nhiều kiến thức, kinh nghiệm học thú vị q trình làm khố luận, hành trang hữu ích cho nhóm sau Nhóm xin chân thành cảm ơn anh chị, bạn bè giúp đỡ nhóm q trình thực đồ án Nhờ người mà nhóm có nhiều góc nhìn khác đề tài làm, từ giúp hồn thiện đồ án nhóm Một lần nữa, nhóm xin chân thành cảm ơn người NHẬN XÉT (Của giáo viên hướng dẫn) …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… MỤC LỤC Lời cảm ơn CHƯƠNG I: GIỚI THIỆU CHUNG 1 Đề tài Lý chọn đề tài Tóm tắt đề tài Mục tiêu đề tài Phương pháp nghiên cứu Ý nghĩa hướng đề tài 6.1 Về mặt tài liệu 6.2 Về mặt sản phẩm CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN Reactjs 1.1 Giới thiệu 1.2 Tính bật ReactJs: 1.3 Lý sử dụng ASP.NET Web API 2.1 Giới thiệu 2.2 Tính bật ASP.NET Web API: 2.3 Lý sử dụng ASP.NET Web API: PostgreSQL 3.1 Giới thiệu 3.2 Lý sử dụng PostgreSQL CHƯƠNG III: PHÂN TÍCH HỆ THỐNG Danh sách yêu cầu hệ thống Đặt tả Use-case 10 2.1 Đặc tả Use-case “Đăng ký” 12 2.2 Đặc tả Usecase “Đăng nhập” 13 2.3 Đặc tả Use-case “Thêm sản phẩm” 15 2.4 Đặc tả Use-case “Sửa sản phẩm” 16 2.5 Đặc tả Use-case “Xóa sản phẩm” 17 2.6 Đặc tả Use-case “Tìm kiểm sản phẩm” 18 2.7 Đặc tả Use-case “Xem thông tin sản phẩm” 19 2.8 Đặc tả Use-case “Xem danh mục sản phẩm” 20 2.9 Đặc tả Use-case “Thêm giỏ hàng” 21 2.10 Đặc tả Use-case “Kiểm tra giỏ hàng” 22 2.11 Đặc tả Use-case “Xóa sản phẩm khỏi giỏ hàng” 23 2.12 Đặc tả Use-case “Cập nhật sản phẩm giỏ” 24 2.13 Đặc tả Use-case “Đặt hàng” 25 Sơ đồ liệu 27 3.1 Bảng User 28 3.2 Bảng Admin 28 3.3 Bảng Product 29 3.4 Bảng DetailProduct 30 3.5 Bảng Category 30 3.6 Bảng Discount 31 3.7 Bảng Transaction 31 CHƯƠNG V: THIẾT KẾ GIAO DIỆN 32 Trang Home 32 Trang sản phẩm 36 Trang khuyến 37 Trang giỏ hàng 38 Trang Liên hệ 39 Chi tiết sản phẩm 40 CHƯƠNG VI: TỔNG KẾT 42 Công nghệ sử dụng 42 Độ hoàn thiện chức 42 3.Kết đạt hướng phát triển 43 3.1 Kết đạt 43 3.2 Hướng phát triển 44 CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC 45 CHƯƠNG VIII: TÀI LIỆU THAM KHẢO 47 ReactJS: https://reactjs.org/ 47 PostgreSQL: https://www.postgresql.org/ 47 ASP.NET Web API: https://docs.microsoft.com/en-us/aspnet/web-api/ 47 Redux: https://redux.js.org/ 47 Axios: https://github.com/axios/axios 47 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 đồ gia dụng - Cơng nghệ sử dụng: • Frontent: Reactjs, Axios, Redux • Backent: ASP.NET Web API - Cơ sở liệu: Postgres Lý chọn đề tài Trong thời kì cơng nghệ ngày phát triển, Internet ứng dụng khắp nơi nhu cầu mua sắm trang thiết bị gia dụng người thay đổi Từ đó, nhóm định xây dựng trang web bán đồ gia dụng để đáp ứng cầu tìm hiểu, lựa chọn mua sắm thiết bị gia dụng cho gia đình Ngồi ra, để xây dựng giao diện website linh động nhóm tìm hiểu định chọn cơng nghệ Reactjs, cơng nghệ lập trình giao diện đơng đảo lập trình viên sử dụng để phát triển phần mềm Tóm tắt đề tài Website bán hàng gia dụng xây dựng để đáp ứng cầu tìm hiểu, lựa chọn mua sắm gia đình Mục tiêu đề tài - Xây dựng trang web từ công nghệ Reactjs với cách chức đáp ứng nhu cầu người dùng Bên cạnh đó, học hỏi thêm nhiều cơng nghệ kiến thức lập trình website, API, Services Từ hồn thiện thêm kĩ lập trình để tiếp tự phát triển dự án cho mơn học Đồ án - Tìm hiểu cơng nghệ thích hợp xây dựng ứng dụng - Hồn thành báo cáo môn học Phương pháp nghiên cứu - Nghiên cứu Website có sẵn thị trường, nhận xét ưu khuyết điểm Website - Nghiên cứu tài liệu đặc tả Website tương tự Website https://www.dienmayxanh.com/, https://www.nguyenkim.com/, … - Tìm hiểu cơng nghệ thị trường, nhận xét chọn cơng nghệ thích hợp để xây dựng website Ý nghĩa hướng đề tài 6.1 Về mặt tài liệu - Sử dụng nguồn tài liệu tham khảo Reactjs, ASP.NET Web API, PostgreSQL - Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mơ hình thiết kế giao diện 6.2 Về mặt sản phẩm - Tạo website mua sắm với số tính - Chức phù hợp với tình hình thực tế dễ sử dụng CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN Reactjs 1.1 Giới thiệu • ReactJS thư viện JavaScript tạo để xây dựng giao diện người dùng có khả tương tác tốt nhanh chóng cho ứng dụng web di động Nó thư viện mã nguồn mở, xây dựng dựa component, giao diện người dùng chịu trách nhiệm cho tầng view ứng dụng • Nó sử dụng công ty lớn, thành lập công ty thành lập như: Netflix, Airbnb, Instagram New York Times v v ReactJS mang lại nhiều lợi cho lập trình viên, khiến trở thành lựa chọn tốt so với Framework khác Angular • Trong kiến trúc Model View Controller (MVC), tầng view chịu trách nhiệm giao diện ứng dụng ReactJS tạo Jordan Walke, kỹ sư phần mềm Facebook Hình 1.1: Logo Reactjs 1.2 Tính bật ReactJs: - JSX – JavaScript Syntax Extension: JSX tên gọi nó, phần mở rộng cú pháp cho JavaScript Nó sử dụng với ReactJS để mô tả giao diện người dùng trông Bằng cách sử dụng JSX, viết cấu trúc HTML tệp chứa mã JavaScript Điều làm cho mã dễ hiểu dễ gỡ lỗi hơn, tránh việc sử dụng cấu trúc DOM JavaScript phức tạp - Virtual DOM: Virtual DOM định dạng liệu JavaScript, với khối lượng nhẹ dùng để thể nội dung DOM – Document Object Model – Mơ hình Đối tượng Tài liệu thời điểm định Khi trạng thái đối tượng thay đổi, VDOM thay đổi đối tượng DOM thực thay cập nhật tất đối tượng - Performance: ReactJS sử dụng VDOM, giúp ứng dụng web chạy nhanh nhiều so với ứng dụng phát triển với Framework front-end khác - Redux: Redux phần quan trọng ReactJS Bản thân ReactJS không sở hữu module chuyên dụng nhằm để xử lý liệu Vì thế, ReactJS triển khai cách độc lập chia nhỏ View thành component nhỏ khác nhau, điều giúp cho việc quản lý dễ dàng hơn, thành phần liên kết chặt chẽ với - One-way Data Binding - Component: ReactJS xây dựng xoay quanh component, đó, Framework khác dùng template Để tạo component có đầy đủ đặc tính, bạn cần sử dụng phương thức createClass dùng để nhận tham số mô tả đặc tính 1.3 Lý sử dụng Dễ dàng tạo ứng dụng động: ReactJS giúp tạo ứng dụng web động dễ dàng u cầu mã hóa cung cấp nhiều chức hơn, trái ngược với JavaScript, nơi việc viết mã thường trở nên phức tạp nhanh Cải thiện hiệu với Virtual DOM: ReactJS cho phép người dùng xây dựng Virtual DOM host chúng nhớ Ưu điểm giúp Vitural thay đổi DOM thực tế có thay đổi Cập nhật liên tục giúp ứng dụng tránh tình trạng bị gián đoạn Người dùng sử dụng liên tục, website ổn định giúp doanh thu trì tăng trưởng vượt bậc Các component tái sử dụng: • Các thành phần khối xây dựng ứng dụng ReactJS ứng dụng đơn lẻ thường bao gồm nhiều thành phần • Các thành phần có logic điều khiển chúng, chúng sử dụng lại toàn ứng dụng, làm giảm đáng kể thời gian phát triển ứng dụng ASP.NET Web API 2.1 Giới thiệu ASP.NET Web API framework (khung làm việc), cung cấp Microsoft, giúp dễ dàng xây dựng API Web, tức dịch vụ dựa giao thức HTTP ASP.NET Web API tảng lý tưởng để xây dựng dịch vụ Restful đỉnh.NET Framework Hình 2.1: Logo ASP.NET Web API STT Tên thuộc tính Kiểu Ràng Ý nghĩa/ghi buộc id int PK Mã bảng Discount title nvarchar NotNull Tên kiện giảm giá image varchar NotNull Hình ảnh kiện giảm giá description nvarchar NotNull Mô tả kiện giảm giá discount_slug varchar NotNull Đường dẫn đến discount 3.7 Bảng Transaction Bảng 3.3.7: Bảng Transaction STT Tên thuộc tính id Kiểu int Ràng buộc PK Ý nghĩa/ghi Khóa ngoại trỏ đến bảng USER, thể thông tin người thực theo dõi kiện status int NotNull Khóa ngoại trỏ đến bảng EVENT, thể thông tin kiện theo dõi amount int NotNull Thời gian thực theo dõi payment varchar NotNull Số tiền toán payment_infor nvarchar NotNull Phương thức toán message nvarchar NotNull product_id Int FK Khóa ngoại trỏ đến bảng Product user_id int FK Khóa ngoại trỏ đến bảng User CHƯƠNG V: THIẾT KẾ GIAO DIỆN Trang Home Hình 5.1.1: Trang Home Hình 5.1.2: Trang Home Hình 5.1.3: Trang Home Hình 5.1.4: Trang Home Hình 5.1.5: Trang Home * Mô tả chung xử lý kiện hình: Khi người dung truy cập vào trang web hình Home lên Các component: - Helmet - Header - HeroSlider - ProductView - Footer Trang sản phẩm Hình 5.2.1: Trang sản phẩm Hình 5.2.2: Trang sản phẩm * Mô tả chung xử lý kiện hình: Màn hình điều hướng click button “Sản phẩm” component Header Sau truy cập, hình hiển thị danh mục sản phẩm danh sách sản phẩm kèm theo Các component: - Header - Category - Product List - Footer Trang khuyến Hình 5.3.1: Trang khuyến * Mô tả chung xử lý kiện hình: Giao diện chưa hồn thiện Trang giỏ hàng Hình 5.4.1: Trang giỏ hàng * Mơ tả chung xử lý kiện hình: Màn hình hiển thị sau người dùng thêm sản phẩm vào giỏ hàng học chọn “Mua” chọn button “Giỏ hàng” Các component: - Header - Danh sách sản phẩm - Form thành tiền - Button Đặt hàng, Tiếp tục mua hàng - Button xóa sản phẩm khỏi giỏ hàng Trang Liên hệ Hình 5.5.1: Trang liên hệ * Mô tả chung xử lý kiện hình: Khi người dùng click chọn “Liên hệ” website điều hướng tới trang Liên hệ Các component: - Header - Form Liên hệ - Button Gửi - Footer Chi tiết sản phẩm Hình 5.6.1: Trang chi tiết sản phẩm Hình 5.6.2: Trang chi tiết sản phẩm Hình 5.6.3: Trang chi tiết sản phẩm * Mô tả chung xử lý kiện hình: Màn hình hiển thị sau người dùng click vào sản phầm Các component: - Header - Form Chi tiết sản phẩm - Danh sách sản phẩm đề xuất CHƯƠNG VI: TỔNG KẾT Công nghệ sử dụng - Công nghệ Reactjs dựa ngôn ngữ JavaScript, HTML, CSS - Công nghệ ASP.NET Web API dựa ngôn ngữ C# - Sử dụng thư viện Axios gọi API từ services - Sử dụng Server: IIS - Sử dụng sở liệu Postgres để lưu trữ liệu Độ hoàn thiện chức Bảng 6.1: Độ hoàn thiện chức STT Tên chức Mức độ hoàn Ghi thành Đăng ký, đăng nhập 50% Hoàn thành Backend, chưa hoàn thành Frontend Hiển thị danh sách 100% sản phẩm Hiển thị danh mục 100% sản phẩm Hiển thị sản phẩm 100% theo danh mục Xem chi tiết sản phẩm 100% Thêm sản phẩm vào 100% giỏ hàng Xóa sản phẩm khỏi 100% giỏ hàng Xem thông tin khuyến 100% Quản trị sản phẩm 50 Hoàn thành Backend, chưa hoàn thành Frontend 3.Kết đạt hướng phát triển 3.1 Kết đạt Về lý thuyết: - Tìm hiểu nắm quy trình xây dựng website - Tìm hiểu vận dụng kiến thức liên quan đến phương pháp phát triển phần mềm hướng đối tượng, quy trình phát triển phần mềm vào trình xây dựng ứng dụng - Tìm hiểu áp dụng services vào website - Ngồi ra, nhóm tìm hiểu nắm cách sử dụng số framework hữu ích Entity Framework, Kỹ mềm: - Phát triển hoàn thiện kỹ sử dụng công cụ hỗ trợ lập trình viên như: GitHub, Trello, figma… - Học tập phát triển kỹ làm việc nhóm, kỹ phân chia điều phối công việc, kỹ xếp thời gian Sản phẩm: - Phần mềm đạt chức cần có website Bên cạnh số chức khác đặt hàng, quản trị web site chưa hoàn thành mặt giao diện - Giao diện thân thiện, dễ sử dụng 3.2 Hướng phát triển • Tiếp tục phát triển, hồn thiện chức website như: Đặt hàng, quản trị website, tìm kiếm sản phẩm, mở rộng quy mơ website,… • Phát triển thêm chức hỗ trợ giúp người dùng tối ưu hóa hoạt động bán hàng Một số tính dự định phát triển thời gian tới: - Phân quyền: Admin, người dùng - Hỗ trợ tìm kiếm sản phẩm - Tính đánh giá chất lượng sản phẩm - Gợi ý sản phẩm cho người dùng CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC Bảng 7: Bảng phân công công việc STT Nội dung Ngày Ngày kết Người công việc bắt thúc đảm đầu Chọn đề tài 01/03/2022 03/03/2022 Trạng thái nhận Thanh Tuấn Hồn thành Đơng Phú Phân tích u cầu 03/03/2022 08/03/2022 Thanh Hồn thành Tuấn Đơng Phú Thiết lập 08/03/2022 13/03/2022 Thanh actor, chức Tuấn Đông Phú Vẽ sơ đồ Use case, đặc tả Usecase 13/03/2022 15/03/2022 Thanh Tuấn Hoàn thành Hoàn thành Viết SRD 15/03/2022 10/03/2022 Viết phân tích 20/03/2022 25/03/2022 Thanh Tuấn Thanh sơ đồ lớp mức Tuấn phân tích Đơng Phú Học Reactjs 03/03/2022 25/14/2022 Thanh Hồn thành Hồn thành Hồn thành Tuấn Đơng Phú Học ASP.Net 20/03/2022 20/04/2022 Thanh Tuấn Hoàn thành Thanh Tuấn Hoàn thành Postgres Thiết kế CSDL 20/03/2022 28/03/2022 11 Cài đặt React, 28/03/2022 05/04/2022 Thanh Hồn thành Tuấn Postgres Đơng Phú 12 13 Xây dựng 05/04/2022 10/06/2022 Thanh hình Tuấn Reactjs Đơng Phú Xây dựng sở 15/04/2022 28/05/2022 Thanh Tuấn liệu, Chưa hoàn thành 100% Chưa hoàn thành 100% backend, gọi API 14 Kiểm thử ứng dụng 28/05/2022 10/06/2022 Thanh Tuấn Hoàn thành 15 Viết báo cáo, 03/06/2022 10/06/2022 Thanh Tuấn Hoàn thành slide CHƯƠNG VIII: TÀI LIỆU THAM KHẢO ReactJS: https://reactjs.org/ PostgreSQL: https://www.postgresql.org/ ASP.NET Web API: https://docs.microsoft.com/en-us/aspnet/web-api/ Redux: https://redux.js.org/ Axios: https://github.com/axios/axios ...ĐẠ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ÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN ĐỒ GIA DỤNG Giảng viên hướng dẫn:... ứng dụng khắp nơi nhu cầu mua sắm trang thiết bị gia dụng người thay đổi Từ đó, nhóm định xây dựng trang web bán đồ gia dụng để đáp ứng cầu tìm hiểu, lựa chọn mua sắm thiết bị gia dụng cho gia. .. tài: Tìm hiểu Reactjs xây dựng website bán đồ gia dụng - Công nghệ sử dụng: • Frontent: Reactjs, Axios, Redux • Backent: ASP.NET Web API - Cơ sở liệu: Postgres Lý chọn đề tài Trong thời kì cơng