Xây dựng website bán sách online sử dụng công nghệ mern stack

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN SÁCH ONLINE SỬ DỤNG CÔNG NGHỆ MERN STACK GVHD: TS HUỲNH XUÂN PHỤNG SVTH: LƯU ĐÌNH CHUẨN PHAN THỊ THU TRANG SKL009514 Tp Hồ Chí Minh, tháng 06, năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CƠNG NGHỆ THÔNG TIN -o0o - LƯU ĐÌNH CHUẨN: 18110085 PHAN THỊ THU TRANG: 18110217 Đề tài: XÂY DỰNG WEBSITE BÁN SÁCH ONLINE SỬ DỤNG CƠNG NGHỆ MERN STACK KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN TS HUỲNH XN PHỤNG KHỐ 2018 – 2022 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Lưu Đình Chuẩn MSSV : 18110085 Họ tên Sinh viên 2: Phan Thị Thu Trang MSSV : 18110217 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán sách online sử dụng công nghệ mern stack Họ tên Giáo viên hướng dẫn: TS HUỲNH XUÂN PHỤNG NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày 16 tháng 06 năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Lưu Đình Chuẩn MSSV : 18110085 Họ tên Sinh viên 2: Phan Thị Thu Trang MSSV : 18110217 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán sách online sử dụng công nghệ mern stack Họ tên Giáo viên hướng dẫn: TS HUỲNH XUÂN PHỤNG NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày 16 tháng 06 năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Để hoàn thành tốt đề tài báo cáo này, chúng em xin gửi lời cảm ơn chân thành đến Thầy Huỳnh Xuân Phụng, người trực tiếp hỗ trợ chúng em suốt trình làm đề tài Chúng em xin gửi lời cảm ơn chân thành quý thầy cô khoa Đào tạo Chất Lượng Cao nói chung ngành Cơng Nghệ Thơng Tin nói riêng tận tình truyền đạt kiến thức cần thiết giúp chúng em có tảng để làm nên đề tài này, tạo điều kiện để chúng em tìm hiểu thực tốt đề tài Cùng với đó, chúng em xin gửi cảm ơn đến bạn khóa cung cấp nhiều thông tin kiến thức hữu ích giúp chúng em hồn thiện đề tài Đề tài báo cáo chúng em thực khoảng thời gian ngắn, với kiến thức hạn chế nhiều hạn chế khác mặt kỹ thuật kinh nghiệm việc thực dự án phần mềm Do đó, q trình làm nên đề tài có thiếu sót điều tránh khỏi nên chúng em mong nhận ý kiến đóng góp quý báu thầy để kiến thức chúng em hoàn thiện chúng em làm tốt lần sau Chúng em xin chân thành cảm ơn Cuối lời, chúng em kính chúc thầy ln dồi sức khỏe thành công nghiệp trồng người Một lần chúng em xin chân thành cảm ơn TP.HCM, ngày 16 tháng 06 năm 2022 Nhóm sinh viên thực CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên Sinh viên 1: Lưu Đình Chuẩn MSSV : 18110085 Họ tên Sinh viên 2: Phan Thị Thu Trang MSSV : 18110085 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng website bán sách online sử dụng công nghệ mern stack GV hướng dẫn: TS HUỲNH XUÂN PHỤNG Nhiệm vụ tiểu luận: Nghiên cứu MERN stack Nghiên cứu cách viết REST API cách ứng dụng Sử dụng thư viện Mongoose để tạo Model cho liệu MongoDB Sử dụng ExpressJS để làm cơng việc phía server-side Viết REST API để thao tác liệu ExpressJS MongoDB Dùng ReactJs để làm front-end theo kiểu Single page application Kết hợp thành phần lại để xây dựng website bán sách tảng MERN stack Hướng dẫn cài đặt kiểm thử phần mềm Đề cương viết luận văn : MỤC LỤC Chương 1: Tổng quan 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Cách tiếp cận phương pháp nghiên cứu - Đối tượng nghiên cứu - Phạm vi nghiên cứu 1.4 Kết dự kiến đạt Chương 2: Cơ sở lý thuyết 2.1 Tổng quan Mern Stack 2.2 Tổng quan Node JS 2.3 Tổng quan Express JS 2.4 Tổng quan React JS 2.5 Tổng quan MonggoDB 2.6 Tổng quan kiểm thử tự động Chương 3: Khảo sát trạng xác định yêu cầu 3.1 Khảo sát trạng 3.2 Xác định yêu cầu Chương 4: Phân tích thiết kế hệ thống 4.1 Phân tích yêu cầu chức 4.2 Thiết kế usecase diagram 4.3 Thiết kế sở liệu 4.4 Thiết kế giao diện 4.5 Thiết kế xử lý 4.6 Thiết kế lược đồ lớp 4.7 Thiết kế activity diagram Chương 5: Cài đặt kiểm thử ứng dụng 5.1 Cài đặt ứng dụng 5.2 Kiểm thử phần mềm 5.3 Danh sách API Chương 6: Kết luận Tài liệu tham khảo KẾ HOẠCH THỰC HIỆN STT Thời gian Công việc Ghi 07/03/2022 – 20/03/2022 Thay đổi GlobalState sang Redux 21/03/2022 – 10/04/2022 Chỉnh sửa lại chức 11/04/2022 – 24/04/2022 Thiết kế viết chức đánh giá, bình luận 25/04/2022 – 15/05/2022 Thiết kế viết chức khuyến 16/05/2022 – 29/05/2022 Thiết kế giao diện viết chức thống kê 30/05/2022 – 12/06/2022 Viết đăng ký nhận thông báo qua email Kiểm tra sửa lỗi 13/06/2022 – 19/06/2022 Viết báo cáo hoàn chỉnh đồ án Ngày 16 tháng 06 năm 2022 Người viết đề cương Ý kiến giáo viên hướng dẫn (ký ghi rõ họ tên) MỤC LỤC DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU VII DANH MỤC CÁC TỪ VIẾT TẮT XIV Chương 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Cách tiếp cận phương pháp nguyên cứu 1.4 Các giả thiết, ràng buộc rủi ro 1.5 Kết dự kiến đạt Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan MERN stack 2.1.1 Khái niệm MERN stack 2.1.2 Các thành phần MERN stack 2.1.3 Cách thức hoạt động MERN stack 2.1.4 Ưu điểm MERN Stack 2.2 Tổng quan Node js 2.2.1 Khái niệm Node Js 2.2.2 Nguyên tắc hoạt động Node Js 2.2.3 Ưu nhược điểm Node Js 2.3 Tổng quan Express js 2.3.1 Khái niệm Express Js 2.3.2 Công dụng Express Js 2.4 Tổng quan React js 10 2.4.1 Khái niệm React Js 10 2.4.2 Kiến trúc React Js 10 2.4.3 Ưu nhược điểm React Js 11 2.5 Tổng quan Mongodb 12 2.5.1 Khái niệm MongoDB 12 2.5.2 Các tính MongoDB 12 2.5.3 Ưu nhược điểm MongoDB 13 2.6 Tổng quan kiểm thử tự động 14 2.6.1 Khái niệm kiểm thử phần mềm 14 2.6.2 Kiểm thử tự động 15 2.6.3 Tổng quan Selenium Webdriver 15 Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17 3.1 Khảo sát trạng 17 3.1.1 Các nguồn khảo sát 17 3.1.2 Một số website bán sách thị trường 17 3.1.3 Kết khảo sát 23 3.2 Xác định yêu cầu 24 3.2.1 Chức website 24 3.2.2 Các yêu cầu phi chức 25 3.2.3 Ma trận quyền – Permission matrix 26 3.2.4 Đối tưởng sử dụng 27 3.2.5 Môi trường hoạt động 27 3.2.6 Sơ đồ nghiệp vụ 28 Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29 4.1 Phân tích yêu cầu chức 29 4.1.1 Chức đăng ký 29 4.1.2 Chức đăng nhập 29 4.1.3 Chức xem trang chủ 29 4.1.4 Chức đăng xuất 30 4.1.5 Chức đổi mật 30 4.1.6 Chức quên mật 31 4.1.7 Chức chỉnh sửa thông tin 31 4.1.8 Chức tìm kiếm sản phẩm 31 4.1.9 Chức xem chi tiết sách 32 4.1.10 Chức xem danh mục 32 4.1.11 Chức lọc sản phẩm 32 4.1.12 Chức quản lý giỏ hàng 33 Click Orders Chọn Filters Đã Xác Nhận Truy cập vào trang web: https://kltn-bookstorewebsite.vercel.app/ Kiểm tra chức Đăng nhập với tài khoản Hiện thơng tin BookStore tìm đơn _027 hàng theo tên user Admin Click Admin Panel Click Orders đơn hàng user vừa Pass tìm Nhập Enter your search Bấm Enter từ bàm phím Truy cập vào trang web: https://kltn-bookstoreKiểm tra hiển BookStore _028 website.vercel.app/ Hiển thị danh sách thông tin lượng Đăng nhập với tài khoản đơn hàng Admin User trang Click Admin Panel trang tối đa 10 Click Orders đơn thị theo số Pass Chọn Open x10 Kiểm tra chức Truy cập vào trang web: thay đổi BookStore _029 https://bookstore-ecommerce- trạng thái đơn beta.herokuapp.com/ hàng Trạng thái chuyển Pass Đăng nhập với tài khoản thành công Admin 189 Click Admin Panel Click Orders Chuyển đơn hàng có trạng thái 'Chờ xác nhận' thành 'Đã xác nhận' 5.3.3 Kiểm thử tự động sử dụng Selenium 5.3.3.1 Kịch kiểm thử tự động Đồ án trình bày số test case Selenium WebDriver thực báo cáo kết Quy trình kiểm thử tự động bao gồm: tester sử dụng kịch tự động (automation scripts) thực thi script để chạy ứng dụng với giúp sức automation tool Các hoạt động kiểm thử tự đông: - Phân tích u cầu, xác định mơi trường, cơng cụ kiểm thử - Xác định tiêu chí đầu - Lên kế hoạch kiểm soát - Thiết lập môi trường kiểm thử - Triển khai thiết kế kiểm thử - Thực thi kiểm thử - Phân tích, báo cáo Các bước tiến hành thực thi kiểm thử dựa test case viết cho kiểm thử thủ cơng, từ dó dựa vào kết thực tết mong đợi để đánh giá 5.3.3.2 Chức kiểm thử tự động Do hạn chế kinh nghiệm thời gian sử dụng tool, nhóm tiến hành viết kiểm thử cho số chức bản: - Chức đăng ký - Chức đăng nhập 190 - Chức quản lý user: thêm user, chỉnh sửa user xoá user - Chức quản lý danh mục: thêm danh mục, chỉnh sửa xoá danh mục - Chức quản lý đơn hàng - Chức quản lý sản phẩm 5.4 Danh sách API 5.4.1 API đăng nhập – phương thức POST Hình 5.9 API đăng nhập Bảng 5.7 Mơ tả API đăng nhập Route https://appbookstorekltn.herokuapp.co Method Post Request JSON - email: string - password: string Response JSON Mô tả accesstoken: Xác thực tài string khoản đăng nhập m/user/login 191 5.4.2 API đăng ký – phương thức POST Hình 5.10 API đăng ký Bảng 5.8 Mô tả API đăng ký Route https://appbookstore- Method Post Request JSON - name: string Response JSON msg: string - email: string kltn.herokuapp.co m/user/register Mô tả Thông báo tạo tài khoản thành công - password: string 5.4.3 API lấy thông tin sản phẩm – phương thức GET Hình 5.11 API lấy thơng tin sản phẩm 192 Bảng 5.9 Mô tả API lấy thông tin sản phẩm Route https://app- Method Request JSON Get Response JSON product: object Mô tả Hiển thị bookstore- thông tin chi kltn.herokuapp.co tiết sản phẩm m/api/products/_id 5.4.4 API tạo user – phương thức POST Hình 5.11 API tạo user Bảng 5.10 Mơ tả API tạo user Route https://appbookstore- Method Post Request JSON - email: string - name: string kltn.herokuapp.co Response JSON msg: string Mô tả Thông báo tạo tài khoản thành công m/user/create_info - phone: string r - address:string - password: string - role: number 193 5.4.5 API chỉnh sửa user – phương thức PUT Hình 5.12 API chỉnh sửa user Bảng 5.11 Mơ tả API chình sửa user Route https://appbookstore- Method Put Request JSON - email: string - name: string kltn.herokuapp.co Response JSON msg: string Mô tả Thông báo tạo tài khoản thành công m/user/create_info - phone: string r - address:string - password: string - role: number 194 5.4.6 API thêm sản phẩm – phương thức POST Hình 5.13 API thêm sản phẩm Bảng 5.12 Mô tả API thêm sản phẩm Route https://appbookstore- Method Post Request JSON - category: string - publisher: string kltn.herokuapp.co m/api/products - author: string Response JSON msg: string Mô tả Thông báo thêm sản phẩm thành công - content: string - price: number - title: string - product_id: string - images: images 195 5.4.7 API chỉnh sửa sản phẩm – phương thức PUT Hình 5.14 API chỉnh sửa sản phẩm Bảng 5.13 Mô tả API chình sửa sản phẩm Route https://appbookstore- Method Put Request JSON - category: string - publisher: string kltn.herokuapp.co m/user/create_info r Response JSON msg: string Mô tả Thông chỉnh sửa sản phẩm - author: string báo thành công - content: string - price: number - title: string - product_id: string - images: images 196 5.4.8 API thêm danh mục – phương thức POST Hình 5.15 API thêm danh mục Bảng 5.14 Mơ tả API thêm danh mục Route https://app- Method Post Request JSON - name: string Response JSON msg: string Mô tả Thông báo bookstore- thêm danh kltn.herokuapp.co mục m/api/category/ thành công 5.4.9 API lấy thông tin đơn hàng – phương thức GET Hình 5.16 API lấy thơng tin đơn hàng 197 Bảng 5.15 Mô tả API lấy thông tin đơn hàng Route https://app- Method Get Request JSON Response JSON order: object Mô tả Hiển thị bookstore- thông tin đơn kltn.herokuapp.co hàng m/api/order công thành 198 Chương 6: KẾT LUẬN 6.1 Kết đạt Kỹ làm việc nhóm tốt, kỹ giao tiếp team, phân công công việc làm dự án ngắn ngày Kỹ tìm kiếm tài liệu, kỹ tìm kiếm giải pháp mạng cho khúc mắc trình xây dựng đồ án Biết cách áp dụng sở liệu không quan hệ (noSQL) để xây dựng database cho hệ thống, xây dựng web server Restfull API phục vụ cho ứng dụng web Hiểu quy trình cách hoạt động kiểm thử phần mềm, biết cách tạo kế hoạch kiểm thử, thiết kế thực thi test case Giải vấn đề đặt phần khảo sát trạng Giao diện đơn giản, dễ sử dụng từ lần đầu Các sản phẩm trình bày theo danh mục sản phẩm gồm có nhiều cấp danh mục, tìm kiếm sản phẩm cách dễ dàng thơng qua cơng cụ tìm kiếm dựa cách trình bày theo danh mục sản phẩm Khách hàng đăng ký tài khồn nhiều hình thức, quản lý thơng tin cá nhân đơn giản, theo dõi đơn đặt hàng vào thời điểm, kiểm soát chi tiết đơn đặt hàng Được quyền huỷ đơn hàng trạng thái hiển thị chờ xác nhận Về phía người bán với vai trị admin quản lý thơng tin khách hàng, sản phẩm, danh mục quản lý đơn hàng Với đơn hàng admin quyền chuyển trạng thái đơn hàng nhiên không chuyển lùi trạng thái 6.2 Ưu nhược điểm 6.2.1 Ưu điểm Website thiết kế với giao diện dễ nhìn, thân thiện với người dùng Thao tác đặt mua toán đơn giản Đáp ứng chức website Bằng việc gợi ý hiệu sản phẩm, giúp người dùng cảm thấy thuận tiện, thích thú website Và điều giúp tăng lợi nhuận cho cửa hàng Với việc tìm kiếm nhiều cách khác đặc biệt tìm kiếm giọng nói giúp người dùng thuận tiện hơn, cảm thấy tìm kiếm khơng nhàm chán 199 6.2.2 Nhược điểm Về giao diện, cịn nhiều thiếu sót việc thiết kế nên website tương thích với máy tính cịn nhiều trang thiết kế chưa thực tốt Về chức năng, nghiệp vụ kinh nghiệm nên nhiều thiếu xót, chưa đa dạng hình thức tốn Về vấn đề tương tác admin với khách hàng, khơng tích hợp chat box nên khách hàng có cách để phản hồi với admin thông qua email 6.3 Hướng phát triển Mở rộng phát triển từ thành chuỗi cửa hàng Tích hợp thêm nhiều cổng toán Zalo Pay, MoMo, Internet Banking Thêm tính chat với khách hàng Phát triển chức flash sale 200 TÀI LIỆU THAM KHẢO Tiếng Việt: [1] Hoàng Mirs (2017) Giới thiệu MERN Stack, , 01/11/2021 [2] Freetuts Mongodb bản, , 15/10/2021 [3] Khoa Công nghệ thơng tin, Giáo trình Kiểm Thử Phần Mềm mơn Kiểm Thử Phầm Mềm, Chương 3,4 Kỹ thuật kiểm thử hộp trắng [4] Khoa Cơng nghệ thơng tin, Giáo trình Kiểm Thử Phần Mềm môn Kiểm Thử Phầm Mềm, Chương Kỹ thuật kiểm thử hộp đen [5] Khoa Công nghệ thông tin, tài liệu Kiểm Thử Phần Mềm, Mẫu test case, bug report [6] Tong Hoang Vu (2020) Bất đồng JavaScript, , 28/10/2021 Tiếnh Anh: [7] David Herron (2020) Node.js Web Development Packt [8] Jean-Christian Llobet (2016) Asynchronous vs synchronous API in NoSQL databases, , 03/10/2021 [9] Pretag (2021) Auto Refresh Timer with React JS and setTimeout won't stop, , 22/10/2021 Hình ảnh: [1] MongoDB What is the MERN Stack?, ‘https://www.mongodb.com/mern-stack’, 30/08/2021 201 [2] Nguyen Dat Những điều cần biết Node.js ‘https://viblo.asia/p/nhung-dieu-can-bietve-nodejs-6J3Zgx2LlmB’, 30/08/2021 [3] Sing Li React: Create maintainable, high-performance UI components, ‘https://developer.ibm.com/tutorials/wa-react-intro/?fbclid=IwAR19y9VYU2vc2VfiCmX P51pTArd-a4h1rdMiiz2AJ4T DT9u9u_Juip2gqUc’, 31/08/2021 [4] Tiki, ‘https://tiki.vn/’, 23/08/2021 [5] Fahasa, ‘https://www.fahasa.com/’, 23/08/2021 [6] Vinabook, ‘https://www.vinabook.com/’ , 23/08/2021 [7] Shopee, ‘https://shopee.vn/’, 23/08/2021 [8] Newshop, ‘https://newshop.vn/’, 23/08/2021 202