(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack

(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack(Đồ án tốt nghiệp) Xây dựng website đấu giá trực tuyến sử dụng công nghệ Mern Stack

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE ĐẤU GIÁ TRỰC TUYẾN SỬ DỤNG CƠNG NGHỆ MERN STACK SVTH : ĐỖ HỒNG ANH MSSV : 16110004 SVTH : TRẦN TUẤN KIỆT MSSV : 16110131 Khóa 2016 : Ngành : CƠNG NGHỆ THƠNG TIN GVHD : TS NGUYỄN THANH PHƯỚC Tp Hồ Chí Minh, tháng 12 năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE ĐẤU GIÁ TRỰC TUYẾN SỬ DỤNG CÔNG NGHỆ MERN STACK SVTH : ĐỖ HOÀNG ANH MSSV : 16110004 SVTH : TRẦN TUẤN KIỆT MSSV : 16110131 Khóa 2016 : Ngành : CÔNG NGHỆ THÔNG TIN GVHD : TS NGUYỄN THANH PHƯỚC Tp Hồ Chí Minh, tháng 12 năm 2020 LỜI CẢM ƠN Đầu tiên, nhóm chúng em học kỳ gửi lời cảm ơn chân thành đến Khoa Đào tạo Chất lượng cao Trong học kỳ này, sinh viên toàn trường khoảng thời gian dài khoảng ba tháng để nghỉ dịch COVID-19 Tuy nhiên, khoa kịp đưa lịch trình cách xử lí để tạo điều kiện cho chúng em tốt để hồn thành khóa luận tốt nghiệp Và chúng em gửi lời cảm ơn thầy cô môn Trong suốt năm học qua, thầy cô truyền đạt nhiều kiến thức hay, bổ ích, giúp nhóm vận dụng nhiều đồ án tốt nghiệp đặc biệt hành trang bước vào đời trường Cuối cùng, chúng em xin gửi lời cảm ơn sâu sắc đển thầy Nguyễn Thanh Phước Trước hết, cảm ơn thầy nhận hướng dẫn nhóm đồ án tốt nghiệp Lúc nhóm nhận đề tài từ thầy lúc mà đất nước chống dịch COVID-19, việc gặp gỡ trao đổi trực tiếp gần không thể, thay vào nhóm thầy phải trao đổi qua mạng, làm việc online, sau có thơng báo đến trường lại nhóm thầy gặp nhiều Những đóng góp ý kiến, sự hướng dẫn thầy giúp nhóm cải thiện chất lượng đồ án, đảm bảo tiến độ hồn thành đồ án tốt Một lần nữa, chúng em cảm ơn thầy nhiều chúc thầy mạnh khỏe, giữ vững lửa nhiệt huyết, truyền đạt kiến thức mới, hay bổ ích đến cho bạn sinh viên Sự thiếu sót đồ án điều khó tránh khỏi, mong nhận đóng góp ý kiến, phản hồi từ thầy bạn Chúng em xin chân thành cảm ơn Nhóm sinh viên Đỗ Hồng Anh – Trần Tuấn Kiệt iv LỜI MỞ ĐẦU Đây đề tài chúng em nghĩ nhận thấy xu hướng người tiêu dùng sử dụng trang web thương mại điện tử ngày nhiều, thời điểm dịch COVID hoành hành Tuy nhiên, đa phần trang web thương mại điện tử theo hình thức bn bán thơng thường, chưa có sự lạ cách giao dịch Vì nhằm tạo sân chơi cho người tiêu dùng, giúp cho họ thuận bn vừa bán, mua bán đồ vừa ý với thân họ Đó lí chúng em chọn đề tài Mục tiêu phát triển đề tài hồn thiện trang web mức cao có thể, chưa hồn thiện để sử dụng thị trường Củng cố lại chức làm bao gồm: đăng nhập, đăng ký, đấu giá, tạo sản phẩm đấu giá, xem lích sử đấu giá, tốn Từ phát triển chức nâng cao tạo cho khách hàng nhiều phươn thức để đấu giá hơn, đánh giá người bán qua sản phẩm mà người bán Sau deploy trang web online để tiếp cận đến người dùng Kết đạt nhóm khơng tốt lắm, hoàn thành tương đối chức bản, lên ý tưởng cho chức nâng cao deploy trang web online Vẫn chưa thực chức nâng cao đặc biệt chưa tối ưu hóa trang web Có thể nói ứng dụng đạt 70% mục tiêu đề v TÓM TẮT TÊN ĐỀ TÀI: - Xây dựng ứng dụng đấu giá trực tuyến sử dụng công nghê MERN STACK MỤC TIÊU ĐỀ TÀI: - Tìm hiểu MERN STACK – combo open source công nghệ liên quan đến Javascript bao gồm: MongoDB, ExpressJS, NodeJS, ReactJS - Nghiên cứu nghiệp vụ Đấu giá trực tuyến - Deploy ứng dụng sử dụng Heroku số công nghệ liên quan - Áp dụng kiến thức để triển khai xây dựng ứng dụng website Đấu giá trực tuyến công nghệ MERN STACK NỘI DUNG: - Nghiên cứu khái niệm, thành phần bản, cách hoạt động MERN STACK - Nghiên cứu deploy website sử dụng Heroku - Tìm hiểu quy trình n.ghiệp vụ chức thực ứng dụng đấu giá trực tuyến HƯỚNG TIẾP CẬN VÀ GIẢI QUYẾT VẤN ĐỀ: - Tra cứu, đọc tài liệu tham khảo liên quan đến công nghệ MERN STACK - Tìm hiểu thương mại điện tử, hình thức đấu giá trực tuyến từ website thương mại điện tử như: chilindo, ebay, … vi MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN i LỜI CẢM ƠN iv LỜI MỞ ĐẦU v CHƯƠNG 1: TỔNG QUAN 1.1 Khảo sát trạng 1.2 Giới thiệu sản phẩm 1.3 Mục tiêu đề tài 1.4 Cấu trúc khóa luận CHƯƠNG 2: GIỚI THIỆU VỀ CÔNG NGHỆ 2.1 Cơng nghệ MERN STACK gì? 2.1.1 MongoDB gì? 2.1.2 ExpressJS gì? 2.1.3 ReactJs gì? 2.1.4 NodeJS gì? 10 2.2 RESTful API 11 2.2.1 Khái niệm 11 2.2.2 Các phương thức HTTP sử dụng REST 11 2.2.3 Ưu điểm 11 2.3 JSON Web Token (JWT) gì? 12 2.3.1 Khái niệm 12 2.3.2 Thành phần 13 2.4 Heroku 14 2.4.1 Khái niệm 14 2.4.2 Ưu điểm 14 2.4.3 Nhược điểm 14 2.5 Firebase gì? 15 2.5.1 Khái niệm 15 vii 2.5.2 Ưu điểm 15 2.5.3 Nhược điểm 15 CHƯƠNG 3: ỨNG DỤNG ĐẤU GIÁ TRỰC TUYẾN 16 3.1 Giới thiệu ứng dụng 16 3.1.1 Khái niệm Đấu Giá Trực Tuyến 16 3.1.2 Khảo sát thị trường 16 3.1.3 Mô tả toán 16 CHƯƠNG 4: THIẾT KẾ HỆ THỐNG 18 4.1 Yêu cầu chức 18 4.1.1 Guest 18 4.1.2 User 19 4.1.3 Admin 21 4.2 Yêu cầu phi chức 21 4.3 Thiết kế sơ đồ use case 23 4.3.1 Sơ đồ use case 23 4.3.2 Đặc tả use case 23 4.4 Một số lược đồ Activity 34 4.4.1 Activity đăng nhập 34 4.4.2 Activity đăng kí 35 4.4.3 Activity xem danh sách sản phẩm 36 4.4.4 Activity xem chi tiết sản phẩm 37 4.4.5 Activity đăng sản phẩm 37 4.4.6 Activity đặt giá 38 4.4.7 Activity duyệt sản phẩm 39 4.5 Một số lược đồ tuần tự 40 4.5.1 Lược đồ tuần tự chức đăng nhập 40 4.5.2 Lược đồ tuần tự chức đăng kí 41 4.5.3 Lược đồ tuần tự chức xem danh sách sản phẩm 42 4.5.4 Lược đồ tuần tự chức xem chi tiết sản phẩm 42 viii 4.5.5 Lược đồ tuần tự chức đăng sản phẩm 43 4.5.6 Lược đồ tuần tự chức đặt giá 44 4.6 Mơ hình liệu quan hệ 44 4.6.1 Rành buộc 45 4.7 Thiết kế giao diện hệ thống 47 4.7.1 Màn hình 47 4.7.2 Màn hình đăng nhập 49 4.7.3 Màn hình đắng kí tài khoản 51 4.7.4 Màn hình danh sách sản phẩm 51 4.7.5 Màn hình chi tiết sản phẩm 54 4.7.6 Màn hình đăng sản phẩm 56 4.7.7 Màn hình lịch sử đấu giá - theo dõi đấu giá 58 4.7.8 Màn hình tốn 59 4.7.9 Màn hình thơng tin người dùng – hóa đơn – lịch sử 62 4.7.10 Màn hình đăng nhập admin 66 4.7.11 Màn hình quản lý người dùng – sản phẩm – đơn hàng 66 CHƯƠNG 5: KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 72 5.1 Kết đạt 72 5.2 Ưu điểm 72 5.3 Nhược điểm 72 5.4 Thực nghiệm 73 5.5 Phân tích 73 CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 74 6.1 Kết luận 74 6.2 Hướng phát triển 74 TÀI LIỆU THAM KHẢO 75 ix DANH SÁCH HÌNH ẢNH Hình 2.1: MEARN STACK Hình 2.2: MongoDB Hình 2.3: Express Hình 2.4: React Hình 2.5: NodeJs 10 Hình 2.6: Cách hoạt động JWT 12 Hình 2.7: Thành phần JWT 13 Hình 4.1: Sơ đồ Use Case 23 Hình 4.2: Activity đăng nhập 34 Hình 4.3: Activity đăng kí 35 Hình 4.4: Activity xem danh sách sản phẩm 36 Hình 4.5: Activity xem chi tiết sản phẩm 37 Hình 4.6: Activity đăng sản phẩm 37 Hình 4.7: Activity đặt giá 38 Hình 4.8: Activity duyệt sản phẩm 39 Hình 4.9: Lược đồ đăng nhập 40 Hình 4.10: Lược đồ đăng kí 41 Hình 4.11: Lược đồ xem danh sách sản phẩm 42 Hình 4.12: Lược đồ xem chi tiết sản phẩm 42 Hình 4.13: Lược đồ đăng sản phẩm 43 Hình 4.14: Lược đồ đặt giá 44 Hình 4.15: Mơ hình quan hệ liệu 45 Hình 4.17: Màn hình đăng nhập 49 Hình 4.18: Màn hình đăng kí 51 Hình 4.20: Màn hình chi tiết sản phẩm 55 Hình 4.21: Màn hình đăng sản phẩm 57 x Hình 4.22: Màn hình lịch sử đấu giá 58 Hình 4.23: Màn hình tốn 60 Hình 4.24: Màn hình thơng tin người dùng 64 Hình 4.25: Màn hình đăng nhập Admin 66 Hình 4.26: Màn hình doanh thu 70 xi Báo cáo đồ án tốt nghiệp Paypal Click paypal hiển thị hình đăng nhập Paypal sau đăng nhập toán xong nút paypal biến TDebit or Credit Card Click thị phần điền thơng tin tốn thẻ sau toán xong biến Thank you Chuyển trang chủ 4.7.9 Màn hình thơng tin người dùng – hóa đơn – xác nhận tốn - lịch sử Chương 4: Thiết kế hệ thống 62 Báo cáo đồ án tốt nghiệp Chương 4: Thiết kế hệ thống 63 Báo cáo đồ án tốt nghiệp Hình 4.23: Màn hình thơng tin người dùng – hóa đơn – xác nhận tốn - lịch sử Hình 4.23.1: Trạng thái nút lưu Hình 4.23.2: Modal đánh giá đơn hàng Chương 4: Thiết kế hệ thống 64 Báo cáo đồ án tốt nghiệp Hình 4.23.3: Modal thay đởi mật Bảng 4.29: Mơ tả hình thơng tin người dùng Chức Mô tả chức Thông tin người dùng Hiển thị tên người dùng, địa chỉ, số điện thoại, số đánh giá,… Chỉnh sửa (hình bút chì) Chỉnh sửa thông tin chỗ chọn chuyển nút chỉnh sửa thành nút lưu Lưu (hình ) Lưu thơng tin thay đổi chuyển nút lưu thành nút sửa Trở lại Chuyển trở trang chủ Thay đổi mật Hiển thị modal thay đổi mật để đặt lại mật Hóa đơn Hiển thị tên, số đánh giá, số tiền tại, trạng thái sản phẩm xác nhận toán Với sản phẩm chưa đánh giá click vào hiển thị modal đánh giá đơn hàng Modal đánh giá Sau đánh giá xuất thông báo “Đánh giá đơn hàng thành cơng! Cảm ơn bạn!” khóa đánh giá lại Xác nhận toán Hiển thị tên, số tiền đấu giá, trạng thái sản phẩm đấu giá thành công Chọn sản phẩm muốn xác nhận tốn click xác nhận Lịch sử Thơng tin sản phẩm tài khoản đăng lên đấu giá Xác nhận Chuyển qua trang tốn sản phẩm Chương 4: Thiết kế hệ thống 65 Báo cáo đồ án tốt nghiệp 4.7.10 Màn hình đăng nhập admin Hình 4.24: Màn hình đăng nhập Admin Bảng 4.30: Mơ tả hình đăng nhập Admin Chức Mô tả chức Login Đăng nhập tài khoản admin Username Password Nhập username password cung cấp 4.7.11 Màn hình quản lý Admin Chương 4: Thiết kế hệ thống 66 Báo cáo đồ án tốt nghiệp Hình 4.25: Màn hình quản lý user Hình 4.26: Màn hình quản lý sản phẩm Chương 4: Thiết kế hệ thống 67 Báo cáo đồ án tốt nghiệp Hình 4.26.1: Modal hình ảnh chi tiết sản phẩm Hình 4.27: Màn hình quản lý hóa đơn Chương 4: Thiết kế hệ thống 68 Báo cáo đồ án tốt nghiệp Hình 4.27.1: Modal tốn người bán Hình 4.28: Màn hình duyệt sản phẩm Chương 4: Thiết kế hệ thống 69 Báo cáo đồ án tốt nghiệp Hình 4.29: Màn hình thống kê doanh thu Bảng 4.31: Mô tả tổng quan hình trang Admin Chức Mơ tả chức Quản lý user Xem thông tin tài khoản người dùng Khóa Khóa tài khoản có đánh giá thấp Quản lý sản phẩm Thông tin tất sản phẩm bán Chọn vào sản phẩm hiển thị hiển thị Modal thông tin sản phẩm Modal thơng tin sản Hiển thị tất hình ảnh sản phẩm Click chọn hình ảnh để hiển thị lớn phẩm Quản lý hóa đơn Thơng tin tất hóa đơn xác nhận tốn Khi chọn vào đơn hàng có trạng thái “Hết hạn đổi” hiển thị modal toán Khi chọn vào đơn hàng có trạng thái “Đã nhận hàng” cho phép nút Hủy bỏ click Hủy bỏ Chương 4: Thiết kế hệ thống Khi click hủy bỏ đơn hàng đổi trạng thái thành Hủy bỏ 70 Báo cáo đồ án tốt nghiệp Duyệt sản phẩm Thông tin tất sản phẩm người dùng đăng đấu giá Duyệt Khi click cho phép sản phẩm đấu giá đăng lên Thống kê doanh thu Chọn năm để hiển thị số tiền doanh thu tháng năm Chương 4: Thiết kế hệ thống 71 Báo cáo đồ án tốt nghiệp CHƯƠNG 5: KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 5.1 Kết đạt Về bản, nhóm em tìm hiểu được: - Tổng quan công nghệ MEARN STACK, định nghĩa, cấu trúc cách hoạt động Hiểu cách thi triển xây dung website thông qua RESTful API Sử dụng Heroku để deploy backend Firebase để deploy ứng dụng phía frontend Biết thêm số kiến thức thương mại điện tử, đấu giá trực tuyến loại hình tốn trực tuyến phổ biến – tốn PayPal Xây dựng trang web đấu giá trực tuyến để minh họa cho mơ hình đấu giá trực tuyến sử dụng công nghệ MEARN STACK với số chức như: o Đăng nhập hệ thống o Đăng kí tài khoản o Đăng sản phẩm để người khác tham gia đấu giá o Cho phép thành viên tham gia đấu giá o Người dùng quản lý phiên đấu giá tham gia 5.2 Ưu điểm - Ứng dụng đơn giản dễ sử dụng - Khả bảo trì, mở rộng dễ dàng nhanh chóng - Có áp dụng tốn ví PayPal để người dùng có nhiều chọn lựa tốn - Áp dụng công nghệ - Giao diện bản, dễ nhận diện 5.3 Nhược điểm - Chưa áp dụng real-time kiến cho sản phẩm nhiều bất cập - Sản phẩm cịn nhiều chỗ chưa hồn thiện hồn tồn - Giao diện cịn nhiều thiếu xót, chưa bắt mắt - Ứng dụng quản lý cịn thiếu xót chưa hồn chỉnh - Nghiệp vụ làm việc cịn đơn giản chưa có nhiều gợi ý cho khách hàng đặt lịch - Vẫn có khả tồn lỗi Chương 5: Kết quả, thực nghiệm phân tích 72 Báo cáo đồ án tốt nghiệp 5.4 Thực nghiệm Về thực nghiệm, ứng dụng triển khai tới người dùng đầu cuối thành công Website đấu giá trực tuyến public địa chỉ: AK AUCTION (webapp-4bf67.web.app) 5.5 Phân tích Các thơng số ứng dụng deploy: MongoDB Atlas: Hình 5.1: Thơng số MongoDB Atlas Firebase: Hình 5.2: Thông số Firebase Chương 5: Kết quả, thực nghiệm phân tích 73 Báo cáo đồ án tốt nghiệp CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết luận Sau khoảng thời gian tháng nghiên cứu khóa luận, đề tài “Xây dựng Website đấu giá trực tuyến Việt Nam” ứng dụng công nghệ Mặc dù chưa đạt kì vọng chúng em có khoảng thời gian tìm hiểu làm việc với từ có thêm nhiều kiến thức mặt lập trình, cách làm việc nhận thiếu sót thân 6.2 Hướng phát triển - Hoàn thiện trang web cách chỉnh chu - Học hỏi thêm kiến thức để thiết kế backend lẫn giao diện frontend hợp quy chuẩn, đẹp bắt mắt hơn, thân thiện responsive thiết bị khác - Thêm nhiều tính lựa chọn để hấp dẫn khách hàng - Hỗ trợ nhiều ngôn ngữ Chương 6: Kết luận hướng phát triển 74 Báo cáo đồ án tốt nghiệp TÀI LIỆU THAM KHẢO Tiếng việt [1] MEARN STACK gì? https://viblo.asia/p/gioi-thieu-mern-stack-bWrZnv4vZxw [2] MongoDB gì? https://topdev.vn/blog/mongodb-la-gi/ [3] Express gì? https://topdev.vn/blog/express-js-la-gi/ [4] React gì? https://www.hostinger.vn/huong-dan/react-la-gi-va-no-hoat-dong-nhuthe-nao/ [5] NodeJS gì? https://freetuts.net/nodejs-la-gi-584.html [6] Heroku gì? https://topdev.vn/blog/heroku-la-gi/ [7] RESTful API gì? https://movan.vn/rest-api-gioi-thieu-rest-api/ [8] JWT gì? https://techmaster.vn/posts/33959/khai-niem-ve-json-web-token Tài liệu tham khảo 75 ... nghiệp vụ Đấu giá trực tuyến - Deploy ứng dụng sử dụng Heroku số công nghệ liên quan - Áp dụng kiến thức để triển khai xây dựng ứng dụng website Đấu giá trực tuyến công nghệ MERN STACK NỘI... dụng đấu giá trực tuyến 16 Báo cáo đồ án tốt nghiệp - Sau đấu giá thành viên đánh giá theo sản phẩm đấu giá Quản lý sản phẩm rao bán đấu giá theo thành viên Chương 3: Ứng dụng đấu giá trực tuyến. .. người bán đưa hàng cần đấu giá giá khởi điểm, người mua giá, kết thúc phiên đấu giá người bán bán hàng cho người mua có giá cao hợp lý Đấu giá trực tuyến hình thức cho phép người tham gia đấu giá