Đồ án tìm hiểu reactjs expressjs framework

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN MƠN HỌC ĐỒ ÁN TÌM HIỂU REACTJS-Expressjs FRAMEWORK Giảng viên hướng dẫn : ThS Nguyễn Công Hoan Sinh viên thực : Lý Sô Ly Mã sinh viên 19521136 : Sinh viên thực : Nguyễn Khánh Thành Mã sinh viên 19522237 : Tp HCM, tháng năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN MƠN HỌC ĐỒ ÁN TÌM HIỂU REACTJS-Expressjs FRAMEWORK Giảng viên hướng dẫn : ThS Nguyễn Công Hoan Sinh viên thực : Lý Sô Ly Mã sinh viên 19521136 : Sinh viên thực : Nguyễn Khánh Thành Mã sinh viên 19522237 : Tp HCM, tháng năm 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Tìm hiểu ReactJS – Express Framework Tên đề tài tiếng Anh: Learn ReactJS – Express Framework Cán hướng dẫn: ThS Nguyễn Công Hoan Thời gian thực hiện: Từ ngày 05/09/2022 đến tháng 31/12/2022 Sinh viên thực hiện: Lý Sô Ly - 19521136 Nguyễn Khánh Thành – 19522237 Nội dung đề tài: Giới thiệu: Javascript ngơn ngữ lập trình sử dụng rộng rãi nay, dễ đọc hỗ trợ nơi Mà Expressjs lại hỗ trợ Javascript, bạn biết đến Javascript chắn việc lập trình Express.js vơ đơn giản Ngay người bắt đầu tham gia vào lĩnh vực phát triển web sử dụng Expressjs Javascript ngơn ngữ lập trình dễ học với người khơng có kiến thức ngơn ngữ lập trình khác Chính tính phổ biến, dễ học dễ sử dụng mà Express.js cho phép tài trẻ tham gia đạt nhiều thành công phát triển ứng dụng web Thơng qua đề tài này, nhóm xây dựng website bán hàng trực tuyến Website cung cấp cho người dùng nhiều lựa chọn đáp ứng nhu cầu điện thoại phù hợp với nhu cầu người mua với nhiều mẫu mã khác Website cập nhật tất điện thoại mắt phù hợp nhu cầu sử dụng, mẫu mã nhằm đáp ứng nhu cầu người mua Hệ thống có chức hiển thị order, upload mặt hàng mới, gợi ý nhu cầu người dùng, chức tìm kiếm theo dạng text, … Về phía quản trị viên có chức như: quản lý mặt hàng, số lượng, thông tin đơn hàng, quản lý tài khoản người dùng, … Mục tiêu: - Xây dựng website mua bán trực tuyến với nhiều mặt hàng phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website E-Commerce - Xây dựng website dành cho quản trị viên với chức quản lý thông tin đa dạng tiện dụng Phạm vi: • Phạm vi mơi trường: o Triển khai sản phẩm đề tài môi trường web • Phạm vi chức năng: o Quản lý thơng tin sản phẩm o Quản lý tài khoản người dùng o Quản lý thơng tin đơn hàng o Tìm kiếm sản phẩm theo nhu cầu o Phân loại sản phẩm theo thể loại, hay top lượt tìm kiếm, o Cho phép thêm vào giỏ hàng trước định toán o Cho phép upload sản phẩm o Dễ dàng cho quản trị viên xử lý đơn hàng Đối tượng: - Người dùng khách - Người dùng có tài khoản - Quản trị viên (Admin) Phương pháp thực hiện: - Tìm hiểu ReactJS, NodeJS, MongoDB - Khảo sát website bán điện có thị trường, từ tiến hành phân tích, xác định yêu cầu, tính cụ thể cho đề tài - Phân tích thiết kế hệ thống website - Tìm hiểu quy trình thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho người dùng website cho quản trị viên - Tiến hành triển khai kiểm thử Công nghệ: - Front-end: ReactJS - Back-end: NodeJS, ExpressJS - Database: MongoDB Kết mong đợi - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website bán điện thoại trực tuyến - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng website sản phẩm đề tài - Xây dựng website bán điện thoại trực tuyến đáp ứng yêu cầu giao diện chức đề - Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Thời gian Nội dung 05/09/2022 – 16/09/2022 Tìm hiểu đề tài, đánh giá thị trường, xác định chức hệ thống 17/09/2022 – 07/10/2022 Tìm hiểu, nghiên cứu cơng nghệ 08/10/2022 – 17/10/2022 Phân tích thiết kế hệ thống website 18/10/2022 – 08/11/2022 Tìm hiểu quy trình thiết kế UX/UI thiết kế giao diện cho website 09/11/2022 – 06/12/2022 Cài đặt phần back-end, xử lý hệ thống 06/12/2022 – 24/12/2022 Kiểm thử hệ thống hoàn thiện báo cáo TP HCM, ngày 18 tháng 02 năm 2022 Xác nhận GVHD Sinh viên Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Nguyễn Công Hoan Lý Sô Ly Nguyễn Khánh Thành LỜI CẢM ƠN Đầu tiên, nhóm thực đề tài “Xây dựng website nghe mua điện thoại online” xin gửi lời cảm ơn đến quý thầy cô giảng dạy chúng em trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh kiến thức tảng vững để nhóm tự tìm hiểu hồn thiện đề tài cách tốt Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Nguyễn Công Hoan tận tình hướng dẫn góp ý, đề xuất q báu dành cho nhóm q trình thực đồ án Trong suốt thời gian qua, nhóm tự tìm hiểu cơng nghệ kết hợp với kiến thức tảng trình học tập, nghiên cứu vận dụng để thực đề tài Với quỹ thời gian có hạn kinh nghiệm xây dựng sản phẩm cịn thiếu, sản phẩm đồ án cuối mắc phải số sai sót chúng em mong nhận góp ý cô để bổ sung, cải tiến sản phẩm nâng cao kiến thức để xây dựng sản phẩm chu hoàn thiện hơn, tích luỹ thêm cho kinh nghiệm q giá để đáp ứng tốt cho công việc thực tế tương lai Một lần nữa, xin cảm ơn cô đồng hành chúng em suốt học kỳ I năm học Sinh viên thực Lý sô Ly - Nguyễn Khánh Thành NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày … tháng năm 2022 GVHD ThS Nguyễn Công Hoan MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Chương 1: GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài: 1.2 Mô tả đề tài: 1.3 Lý chọn đề tài: 1.4 Khảo sát trạng: 1.5 Công nghệ sử dụng: 1.6 Môi trường thiết kế: 1.7 Công cụ hỗ trợ: Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan ReactJS: 2.1.1 Giới thiệu ReactJS: 2.1.2 Khái niệm ReactJS: 2.1.2.1 Virtual DOM: 2.1.2.2 JSX: Error! Bookmark not defined 2.1.3 Cách ReactJS hoạt động: 2.1.4 Ưu điểm ReactJS: 2.2 NodeJS: 2.2.1 NodeJS gì? 2.2.2 Cách NodeJS hoạt động: 2.2.3 Ưu điểm NodeJS: 2.3 ExpressJS: 2.3.1 ExpressJS gì? 2.3.2 Tính ExpressJS: 2.4 MongoDB: 2.4.1 MongoDB gì: 2.4.2 Một số câu lệnh bản: 10 2.4.3 Ưu điểm MongoDB: 10 Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12 3.1 Sơ đồ Use-case: 12 3.1.1 Đăng nhập: 12 3.1.2 Đăng xuất: 13 3.1.3 Đăng ký thành viên: 14 3.1.4 Giỏ hàng: 15 3.1.5 Thay đổi thông tin nhân: 15 3.1.6 Quản lý thông tin cá nhân: 17 3.1.7 Tìm kiếm: 19 3.1.8 Xem thông tin sản phẩm: 19 Chương 4: THIẾT KẾ GIAO DIỆN 21 4.1 Trang đăng nhập, đăng ký: 21 4.1.1 Giao diện: Error! Bookmark not defined 4.1.2 Mô tả: 21 4.2 Trang chủ: 22 4.2.1 Giao diện: 22 4.2.2 Mô tả: 23 4.3 Trang thông tin sản phẩm: 24 4.3.1 Giao diện: 24  Mô tả  Use-case đề xuất máy cho người dùng họ tìm kiếm điện thoại Actor  Hệ thống Điều kiện kích hoạt  Người dùng tìm điện thoại chọn hiển thị điện thoại đề xuất Tiền điều kiện  Người dùng sử dụng tài khoản Website đăng nhập vào hệ thống chọn máy để mua Hệ thống cung cấp cho người dùng loại điện thoại đề xuất Hậu điều kiện  Luồng kiện chính  Luồng kiện phụ  Hệ thống tìm đến điện thoại mà khách hàng cần mua Hệ thống hiển thị mẫu điện thoại đề xuất Bảng 3.6: Đặc tả hiển thị thông tin sản phẩm: Use – Case  Nội Dung  Tên Use – Case     Mô tả  Hiển thị lời sản phẩm Actor  Hệ thống Điều kiện kích hoạt  Người dùng chọn vào sản phẩm chọn biểu tượng hiển thị thông tin sản phẩm Tiền điều kiện  Người dùng sử dụng tài khoản Website đăng nhập vào hệ thống chọn máy để mua Hệ thống cung cấp cho người dùng các loại máy đề xuât Hậu điều kiện  Luồng kiện chính  Luồng kiện phụ  Use-case hiển thị sản phẩm người dùng họ chọn sản phẩm Hệ thống tìm kiếm thơng tin sản phẩm Hệ thống hiển thị thông tin sản phẩm Khơng tìm thấy thơng tin sản phẩm: Hệ thống hiển thị khơng tìm thấy thơng tin sản phẩm 3.1.5 Thay đổi thơng tin nhân: Hình 3.6: Sơ đồ use-case thay đổi thông tin cá nhân Bảng 3.7: Đặc tả thông tin cá nhân: Use – Case  Nội Dung  Tên Use – Case     Mô tả  Thay đổi thông tin cá nhân Actor  Thành viên Điều kiện kích hoạt  Người dùng chọn Account Tiền điều kiện  Đã đăng nhập tài khoản Website Hậu điều kiện  Người dùng thay đổi thơng tin thành cơng Luồng kiện chính  Luồng kiện phụ  Use-Case cho phép người dùng thay đổi thông tin Hệ thống hiển thị trang thông tin cá nhân Người dùng chọn Chỉnh sửa hồ sơ Người dùng nhập thông tin chọn lưu Hệ thống lưu thông tin Kết thúc Use-case Thông tin không hợp lệ :  Hệ thống hiển thị thông báo lỗi Quay lại bước Luồng kiện chính.   Người dùng chọn Hủy :  Hệ thống trở lại trang Thông tin cá nhân 3.1.6 Quản lý thơng tin cá nhân: Hình 3.7: Sơ đồ use-case quản lý giỏ hàng cá nhân Bảng 3.8: Đặc tả thêm sản phẩm : Use – Case  Nội Dung  Tên Use – Case     Mô tả  Thêm sản phẩm Actor  Thành viên Điều kiện kích hoạt  Người dùng chọn Add Tiền điều kiện  Đã đăng nhập tài khoản Website Hậu điều kiện  Người dùng thêm sản phẩm thành công Luồng kiện chính  Luồng kiện phụ  Use-Case cho phép người dùng thêm sản phẩm Hệ thống hiển thị sản phẩm Người dùng chọn sản phẩm lưu Kết thúc Use-case Không nhập tên :  Hệ thống hiển thị thông báo lỗi Quay lại bước Luồng kiện Bảng 3.9: Đặc tả xoá sản phẩm: Use – Case  Nội Dung  Tên Use – Case     Mơ tả  Xố sản phẩm Actor  Thành viên Điều kiện kích hoạt  Người dùng chọn Delete Tiền điều kiện  Đã đăng nhập tài khoản website Hậu điều kiện  Người dùng xoá sản phẩm thành cơng Luồng kiện chính  Use-Case cho phép người dùng xóa sản phẩm có Hệ thống hiển thị thơng báo xác nhận xóa Người dùng chọn có Hệ thống xóa sản phẩm Kết thúc Use-case Luồng kiện phụ  Người dùng chọn hủy :  Hệ thống trở lại trang giỏ hàng 1.1.7 Tìm kiếm: Hình 3.8: Sơ đồ use-case tìm kiếm Bảng 3.10: Đặc tả tìm kiếm: Use – Case  Nội Dung  Tên Use – Case     Mơ tả  Tìm kiếm Actor  Tất Điều kiện kích hoạt  Người dùng chọn Search Tiền điều kiện  Không Hậu điều kiện  Không Use-Case cho phép người dùng tìm kiếm máy, nhà sản xuất, … Luồng kiện chính  Hệ thống hiển thị trang tìm kiếm Người dùng nhập từ khóa Hệ thống hiển thị kết tìm kiếm Kết thúc Use-case Luồng kiện phụ  Người dùng xóa tồn từ khóa:  Hệ thống hiển thị danh sách thể loại Quay lại bước Luồng kiện chính.   Người dùng chọn thể loại: Hệ thống hiển thị sản phẩm liên quan đến thể loại 1.1.8 Xem thông sản phẩm: Hình 3.9: Sơ đồ use-case xem thơng tin sản phẩm Bảng 3.11: Đặc tả xem thông tin đơn hàng: Use – Case  Nội Dung  Tên Use – Case     Mô tả  Xem thông tin đơn hàng Actor  Tất Điều kiện kích hoạt  Người dùng chọn đơn gàng Tiền điều kiện  Không Hậu điều kiện  Không Luồng kiện chính  Luồng kiện phụ  Use-Case cho phép người dùng xem thông tin đơn hàng Hệ thống hiển thị trang thông tin đơn hàng Kết thúc Use-case Chương 4: THIẾT KẾ GIAO DIỆN 4.1 Trang đăng nhập, đăng ký: Mô tả: 4.1.1 - Khi click vào nút Log in, dẫn vào trang đăng nhập Website Hình 4.1 Giao diện nút trang đăng nhập sau click Log in - Khi click vào nút quên mật khẩu, dẫn vào trang nhập mail lấy lại mật sau xác nhận mật Hình 4.2 Giao diện sau click vào nút quên mật - Khi click vào nút Sign up, dẫn vào trang đăng ký tài khoản Website Hình 4.3 Giao diện nút trang đăng ký sau click Sign up - Sau đăng nhập thành công, trang tự chuyển hướng trang chủ 4.2 Trang chủ: 4.2.1 Giao diện: Hình 4.4 Giao diện trang chủ 4.2.2 Mơ tả: - Với người dùng khách, tính xem loại máy, chọn mức giá, sản phẩm yêu thích Hình 4.5 Thanh setting sau mở rộng 4.3 Trang thơng tin sản phẩm: 4.3.1 Giao diện: Hình 4.6: Giao diện trang thông tin chi tiết sản phẩm 4.3.2 Mô tả: - Nhấn click vào sản phẩm, dẫn đến trang chi tiết sản phẩm - Trang cá nhân hiển thị tên sản phẩm, hình ảnh, giá thành thơng số 4.4 Trang tìm kiếm: 4.4.1 Giao diện: Hình 4.7: Giao diện trang tìm kiếm 4.4.2 Mô tả: - Mặc định, website hiển thị sẵn đa dạng thể loại, chủ đề chẳng hạn như: top sản phẩm (những sản phẩm thuộc top), thể loại sản phẩm Hình 4.8: Giao diện kết sau tìm kiếm điện thoại - Khi gõ vào tìm kiếm từ khố, cơng cụ tìm kiếm thể kết loại điện thoại liên quan tới từ khố Hình 4.9: Giao diện kết sau tìm kiếm với từ khố “SamSung A20” 4.5 Trang thông tin giỏ hàng: 4.5.1 Giao diện: Hình 4.10: Giao diện thơng tin giỏ hàng 4.5.2 Mơ tả: - Khi click vào giỏ hàng dẫn đến trang thơng tin đơn hàng - Trang có nhiệm vụ chính: • Kiểm tra số lượng sản phẩm đặt mua • Thanh đến thánh tốn sản phẩm • Nút Thanh Toán: click vào đổi sang trạng thái nhập thông tin khách hàng nhận đơn hàng trạng thái đơn hàng Hình 4.11: Giao diện thông tin nhận hàng 4.6 Trang thông tin vận chuyển: 4.6.1 Giao diện: Hình 4.12: Giao diện trang thơng tin vận chuyển 4.6.2 Mô tả: - Khi click “Tiếp tục” dẫn đến trang thông tin vận chuyển - Trang liệt kê danh sách thành phần mà người dùng order lần mua hàng - Cuối tới chấp nhận toán Chương 5: KẾT LUẬN 5.1 Nhận xét: 5.1.1 Thuận lợi: - Các tài liệu, video, giảng công nghệ sử dụng đồ án chia sẻ internet, giúp việc tìm hiểu chủ động chi phí bỏ thấp - Vận dụng quy trình xây dựng sản phẩm từ môn học trước áp dụng cho đồ án - Giảng viên hướng dẫn tận tình, ln hỗ trợ chia sẻ, góp ý q trình thực đồ án 5.1.2 Khó khăn: - Vì cơng nghệ sử dụng cho đồ án tiếp cận lần đầu nhóm nên việc Đánh giá: 5.1.3 Ưu điểm đồ án: - Hồn thành chức phía người dùng dành cho website mua điện thoại trực tuyến - Thiết kế giao diện đại, dễ sử dụng 5.1.4 Nhược điểm đồ án: - Một số tính xử lý khơng tốt vấn đề liệu từ API - Chưa xây dựng hệ thống quản trị đề từ đầu 5.2 Hướng phát triển đồ án: - Xây dựng hệ thống quản trị để quản lý đối tượng bổ sung nhiều tính hữu ích cho website - Thiết kế hoàn thiện lại giao diện để phù hợp với loại thiết bị sử dụng - Phát triển thêm tính để website ngày phổ biến đến người dùng TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2021), Slide giảng môn Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [2] Phạm Thế Sơn (2021), Bài tập thực hành Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [3] Jon DuCkeTT (2011), HTML & CSS Design and Build Websites, John Wiley & Sons, Inc [4] Giới thiệu ReactJS - Phần I (Các khái niệm bản): https://viblo.asia/p/gioi-thieuve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [5] React gì? Và hoạt động nào? https://www.hostinger.vn/huong-dan/reactla-gi-va-no-hoat-dong-nhu-the-nao [6] NodeJS gì? Những điều nên biết NodeJS bạn cần biết năm 2022: https://niithanoi.edu.vn/nodejs-la-gi-tong-hop-day-du-ve-nodejs-ban-can-biet.html [7] NodeJS gì? Tổng quan kiến thức Node.JS: https://vietnix.vn/nodejs-la-gi/ [8] Expressjs gì? Tại nên sử dụng Expressjs lập trình? https://itnavi.com.vn/blog/expressjs-la-gi/?amp [9] MongoDB gì? Cơ sở liệu phi quan hệ: https://viblo.asia/p/mongodb-la-gi-co-sodu-lieu-phi-quan-he-bJzKmgoPl9N [10] Trang chủ React: https://reactjs.org/ [11] Trình quản lý thư viện NPM: https://www.npmjs.com [12] F8 – Học lập trình để làm: https://fullstack.edu.vn/ ... PHẦN MỀM ĐỒ ÁN MƠN HỌC ĐỒ ÁN TÌM HIỂU REACTJS- Expressjs FRAMEWORK Giảng viên hướng dẫn : ThS Nguyễn Công Hoan Sinh viên thực : Lý Sô Ly Mã sinh viên 19521136 : Sinh viên thực : Nguyễn Khánh Thành... đồ án - Giảng viên hướng dẫn tận tình, ln hỗ trợ chia sẻ, góp ý q trình thực đồ án 5.1.2 Khó khăn: - Vì công nghệ sử dụng cho đồ án tiếp cận lần đầu nhóm nên việc Đánh giá: 5.1.3 Ưu điểm đồ án: ... Khó khăn: 29 5.2 Đánh giá: 29 5.2.1 Ưu điểm đồ án: 29 5.2.2 Nhược điểm đồ án: 29 5.3 Hướng phát triển đồ án: 29 TÀI LIỆU THAM