Xây dựng website đấu giá trực tuyến sử dụng công nghệ mern stack

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 toá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 DANH SÁCH BẢNG Bảng 4.1: Yêu cầu chức Guest 18 Bảng 4.2: Yêu cầu chức User 19 Bảng 4.3: Yêu cầu chức Admin 21 Bảng 4.4: Yêu cầu phi chức 21 Bảng 4.5: Use case đăng nhập 23 Bảng 4.6: Use case đăng kí 24 Bảng 4.7: Use case xem trang chủ 25 Bảng 4.8: Use case xem danh sách sản phẩm 26 Bảng 4.9: Use case xem chi tiết sản phẩm 26 Bảng 4.10: Use case quản lý tài khoản 27 Bảng 4.11: Use case quản lý sản phẩm 28 Bảng 4.12: Use case đấu giá sản phẩm 29 Bảng 4.13: Use case theo dõi sản phẩm 29 Bảng 4.14: Use case mua sản phẩm 30 Bảng 4.15: Use case đánh giá 30 Bảng 4.16: Use case toán 31 Bảng 4.17: Use case đăng xuất 31 Bảng 4.18: Use case thống kê doanh thu 32 Bảng 4.19: Use case quản lý sản phẩm Admin 32 Bảng 4.20: Use case xem thông tin người dùng 33 Bảng 4.21: Mơ tả hình 47 Bảng 4.22: Mơ tả hình đăng nhập 50 Bảng 4.23: Mơ tả hình đăng kí tài khoản 51 Bảng 4.24: Mô tả hình danh sách sản phẩm 53 Bảng 4.25: Mô tả hình chi tiết sản phẩm 55 Bảng 4.26: Mơ tả hình đăng sản phẩm 57 iv Bảng 4.27: Mơ tả hình lịch sử đấu giá 59 Bảng 4.28: Mơ tả hình toán 61 Bảng 4.29: Mơ tả hình thơng tin người dùng 65 Bảng 4.30: Mơ tả hình đăng nhập Admin 66 Bảng 4.31: Mô tả tổng quan hình trang Admin 70 v Báo cáo đồ án tốt nghiệp CHƯƠNG 1: TỔNG QUAN 1.1 Khảo sát trạng Cùng với sự phát triển mạnh mẽ hạ tầng công nghệ thông tin Internet, thương mại điện tử giai đoạn bùng nổ, nhiều trang web thương mại điện tử doanh nghiệp lớn (Amazon, Alibaba,…) giới đời Trong thương mại điện tử giúp nhiều doanh nghiệp marketing, đặc biệt marketing thị trường quốc tế, cắt giảm nhiều chi phí (chi phí nhân lực, chi phí bán hàng, chi phí liên lạc, chi phí mặt bằng,…) bán hàng qua mạng, liên kết nhà cung ứng, hỗ trợ khách hàng từ xa Do vậy, doanh nghiệp không ngừng ứng dụng thương mại điện tử nhằm tạo cho lợi riêng, đồng thời mở rộng mạng lưới kinh doanh, phân phối sản phẩm nâng cao chất lượng dịch vụ Trong website thực sự trở thành kênh kinh doanh mới, hiệu kinh tế cho hầu hết doanh nghiệp Việt Nam Website giúp doanh nghiệp khơng quảng bá hình ảnh doanh nghiệp, sản phẩm với chi phí thấp tiện lợi mà cịn mở rộng hội tìm kiếm khách hàng, nhà cung cấp không nước mà cịn phạm vi tồn cầu Để có website thương mại điện tử đại có nhiều chức năng, doanh nghiệp cần nghiên cứu, phân tích thiết kế module chức cung ứng hàng hóa, quản trị khách hàng, tốn, bảo mật,…kết hợp chặt chẽ với việc ứng dụng tiêu chuẩn cơng nghệ tiên tiến, phù hợp Do đó, việc nghiên cứu khảo sát mơ hình thiết kế xây dựng mơ hình website thương mại điện tử với đầy đủ module chức nhằm giúp doanh nghiệp tối đa hóa hoạt động sản xuất kinh doanh việc cần thiết Cùng trở lại với đề tài, đề tài xây dựng website đấu giá trực tuyến khảo sát trực tuyến Việt Nam mẻ, chưa người ý tới nhiều so với trang thương mai điện tử thông thường Mặc dù vậy, đấu giá chức hay ho, có tiềm thực tế, website thương mại điện tử lớn hầu hết có chức đấu giá facebook có nhiều group nhóm đấu giá có số lượng thành viên lên đến hàng chục ngàn người Về phần xử lí giao diện, nói trang web đấu giá online cịn nên tụi em xử lí giao diện trơng giống hầu hết trang web bán hàng Tuy nhiên tụi em có tinh chỉnh cho phù hợp trơng tốt Ngồi ra, phần cơng nghệ phần nhóm chúng em có bạn tiếp cận tới cơng nghệ q trình thực tập rồi, cụ thể Reactjs nên chúng em định chọn MERN STACK để dễ dàng tương tác bổ trợ lẫn Chương 1: Tổng quan Báo cáo đồ án tốt nghiệp 1.2 Giới thiệu sản phẩm Sản phẩm nhóm chúng em xây dựng thơng qua việc sử dụng cơng nghệ MERN STACK coi đáp ứng yêu cầu trang web đấu giá trực tuyến Người dùng vào trang web chúng em đăng sản phẩm lên để đấu giá, tạo bước giá thời gian đấu giá tùy ý phù hợp với nhu thị yếu, … Từ tạo sự thoải mái, khơng bị gị bó đơn giản để người dùng dễ dàng tiếp cận trang web cách hoàn hảo Về cơng nghệ ngơn ngữ lập trình JavaScript ngơn ngữ lập trình vơ phổ biến giới năm qua Nó ba ngơn ngữ lập trình web: HTML, CSS, JavaScript Và nhắc đến JavaScript khơng thể khơng kể đến MERN STACK Đây công cụ để lập trình trang web full stack từ back end đến front end bao gồm: MongoDB, ExpressJS, ReactJS, NodeJS Hệ thống website đấu giá chúng em hướng đến mặt hàng điện tử Tuy nhiên, cần thiết tinh chỉnh mở rộng để sử dụng để đấu giá nhiều mặt hàng đa dạng quần áo, giày dép, xe cộ, số đồ dùng khác mà người dùng có nhu cầu 1.3 Mục tiêu đề tài - Nắm nghiệp vụ trang web hoạt động: Do trang web chúng em xây dựng trang web đấu giá nên mạnh trang web nghiệp vụ chức trải nghiệm người dùng tối quan trọng Dựa vào việc khảo sát trạng, từ nắm nghiệp vụ chức hiểu luồng xử lý, cách hoạt động chức trang web lớn giúp xây dựng hệ thống tốt, chức hoàn thiện đảm bảo mặt trải nghiệm người dùng - Tìm hiểu cơng nghệ sử dụng cho trang web MERN STACK MERN STACK cơng nghệ áp dụng việc xây dựng hệ thống Công nghệ viết ngôn ngữ JavaScript bao gồm thành phần là: o MongoDB: Là noSQL database hot MongoDB thường với Mongoose – library để giao tiếp với MongoDB dễ dàng o ExpressJS: Là web framework xây dựng Javascript chạy Node.js Nó hỗ trợ thêm nhiều tính cần có web framewok như: routing, middlewares, template engines, vv o ReactJS: React Js thư viện javascript dùng để xây dựng UI, UI dùng tảng Web Mobile Ở lĩnh vực Web, sử Chương 1: Tổng quan Báo cáo đồ án tốt nghiệp Bảng 4.28: Mơ tả hình tốn Chức Mơ tả chức Submit Điền đầy đủ thông tin submit bạn muốn toán trực tiếp nhận hàng Sau chuyển trang Chương 4: Thiết kế hệ thống 61 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 toá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 toán Khi chọn vào đơn hàng có trạng thái “Hết hạn đổi” hiển thị modal tố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 toán trực tuyến phổ biến – toá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 đơ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 ... thức đấu giá chưa phổ biến 3.1.3 Mơ tả tốn Website ĐẤU GIÁ TRỰC TUYẾN tạo môi trường cho thành viên sắm, tham gia đấu giá mang sản phẩm rao bán đấu giá - Hệ thống xây dựng tổ chức sàn đấu giá. .. sản phẩm lên sàn đấu giá, cung cấp thông tin sản phẩm, giá khởi điểm, bước giá, thời gian đấu giá Thành viên tham gia đấu giá đấu giá sản phẩm Chương 3: Ứng dụng đấu giá trực tuyến 16 Báo cáo... phẩm theo hình thức đấu giá 3.1.1 Khái niệm Đấu Giá Trực Tuyến Đấu giá trình mua bán cách 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