BÁO CÁO BÀI TẬP LỚN THUỘC HỌC PHẦN: Phần mềm mã nguồn mở XÂY DỰNG WEBSITE BÁN Ô TÔ TRÊN NỀN TẢNG NODEJS

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN =====***===== BÁO CÁO BÀI TẬP LỚN THUỘC HỌC PHẦN: Phần mềm mã nguồn mở XÂY DỰNG WEBSITE BÁN Ô TÔ TRÊN NỀN TẢNG NODEJS Giảng viên: Lớp: Nhóm: Thành viên: Ths Nguyễn Thái Cường 202110503149003 15 Lưu Công Quang Vũ Tống Cao Cường Vũ Trường Giang Nguyễn Văn Liệu Đỗ Đình Nam Hà Nội, 2021 LỜI MỞ ĐẦU Trước tiên, nhóm muốn gửi lời cảm ơn đến thầy cô khoa CNTT truyền đạt kiến thức quan trọng cho chúng em đặc biệt xin gửi lời cảm ơn sâu sắc đến thầy giáo, ThS Nguyễn Thái Cường, người tận tình hướng dẫn chúng em suốt trình làm tập lớn Cùng với nhóm em xin gửi lời cảm ơn đến tồn thể bạn lớp nhiệt tình đóng góp ý kiến để nhóm hồn thành tốt tập lớn Trong thời gian làm bài, chúng em cố gắng tận dụng tối đa thời gian cơng sức để hồn thành tốt tài liệu cịn hạn chế, thiếu sót Vì vậy, chúng em mong nhận góp ý từ thầy bạn để chúng em hồn thiện sản phẩm Chúng em xin chân thành cảm ơn! MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài Chủ đề đề tài Xây dựng website bán ô tô phần mềm mã nguồn mở cụ thể web bán ô tô tảng nodejs Với mục tiêu áp dụng kiến thức mã nguồn mở để thực hành xây dựng trang web bán ô tô Qua biết cách ứng dụng framework vào sản phẩm thực tế, đồng thời rèn luyện kĩ làm việc nhóm Ngồi tình hình Covid-19 xảy làm thay đổi xu hướng tiêu dùng khiến cho việc sử dụng Internet để mua sắm online bùng nổ Website bán ô tô cho phép khách hàng truy cập để tiến hành xem ô tô với thông tin đầy đủ tiến hành đặt hàng cách thuận tiện 1.2 Lí chọn đề tài Trong vài năm trở lại đây, với “lên ngôi” thương mại điện tử, thị trường bán lẻ tiêu dùng chứng kiến đua doanh nghiệp việc đầu tư vào công nghệ phát triển kênh bán hàng online Các web bán hàng xuất nhiều thị trường ngày phát triển mạnh mẽ Khi lựa chọn để tài bọn em muốn tiếp xúc sâu lập trình web cụ thể web bán hàng - tảng lớn mạnh, giúp người dùng mua sắm trực tuyến thông qua internet Lựa chọn sản phẩm dựa tảng nodejs, chúng em thử sức tạo nên website thực tế giúp nâng cao phần kinh nghiệm thân kiến thức kỹ lập trình Có hội làm việc với số ứng dụng hữu ích 1.3 Tính cấp thiết đề tài Như biết cách mạng 4.0 điễn nhanh mạnh lĩnh vực, việc đòi hỏi ngành nghề áp dụng công nghệ để theo kịp với thời đại Để theo kịp thời đại việc ứng dụng công nghệ phần mềm mã nguồn mở vào xây dựng sản phẩm phần mềm ưu tiên hàng đầu ưu điểm mà mạng lại như: có cộng đồng lớn lập trình viên tham gia phát triển, cộng với hàng ngàn người sử dụng phản hồi, sử kiểm duyệt đơn vị phát hành nên có tính bảo mật cao Tốc độ cập nhật lỗi nhanh kiểm chứng cộng đồng… Web bán hàng online tảng phát triển cho doanh nghiệp Môi trường mua sắm online bùng nổ, phần thắng thuộc doanh nghiệp biết thay đổi nhanh chóng nắm bắt hội nhanh Do dịch bệnh diễn biến phức tạp nên nhu cầu mua sắm online ngày trở nên cần thiết Chúng em mong muốn tạo nên ý tưởng website bán hàng với giao diện tính thân thiện với người dùng giúp người dùng mua sắm dễ dàng, nhanh chóng, có độ tin cậy cao Công cụ, ngôn ngữ thực đề tài: ReactJS, Visual Studio Code, Case Studio, Mockup, IBM Rational Rose, MongoDB, Github  ReactJS Giới thiệu:  • • •  ReactJs thư viện JavaScript cha đẻ ReactJS ơng lớn với tên biết Facebook Phát hành : Là công cụ JavaScript mã nguồn mở đời năm 29/05/2013 Áp dụng : Sử dụng phổ biến để xây dựng giao diện người dùng Ưu điểm : • Lợi ích mà ReactJS việc tạo cho thân dom ảo, nơi mà component tồn • Lợi ích thứ hai mà ReactJS đem lại việc viết đoạn code JS trởi nên dễ dàng sử dụng cú pháp đặc biệt cú pháp JSX nghĩa cú pháp cho phép ta trộn code HTML Javascript  Visual Studio Code  Giới thiệu: • Visual Studio Code trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hồn hảo IDE Code Editor • Hỗ trợ nhiều ngơn ngữ lập trình • Hỗ trợ đa tảng • Hỗ trợ Github • Hỗ trợ viết code • Hỗ trợ web  Ứng dụng: Xây dựng web Case Studio  Giới thiệu: Là công cụ vẽ mơ hình liệu chun nghiệp tùy chỉnh  hỗ trợ lập trình viên hay nhân viên thiết kế liệu việc vẽ mô hình Entity Relationship Diagrams (ERD) Data Flow Diagrams (DFD) tạo script SQL cho nhiều sở dự liệu cách tự động Ứng dụng :  • Dựng mơ hình liên kết thực thể • Render Script tự động việc tạo database  Mock-up  Giới thiệu: • Mock-up tạo khn mẫu giao diện cho đối tượng thiết bị tạo dựa thiết kế cụ thể theo tỉ lệ kích thước đầy đủ • Mock-up xây dựng để truyền đạt ý tưởng chung sản phẩm thực tế, sử dụng chủ yếu nhà thiết kế để có thơng tin phản hồi từ người dùng • Mock-up cung cấp phương pháp hữu hiệu tiết kiệm nhiều thời gian tiền bạc việc thử nghiệm thiết kế Ứng dụng :  • Mock-up giúp hỗ thiết kế giao diện website để tiện cho việc thiết kế giao diện • Mô hoạt động cụ thể chức ứng dụng thực tế  IBM Rational Rose Giới thiệu:  • IBM Rational Rose phần mềm dành cho nhà phát triển xây dựng thiết kế hệ thống phần mềm, ứng dụng ngôn ngữ mơ hình hóa UML • Nó cung cấp cơng cụ vẽ trực quan, nhanh chóng tn thủ kí pháp định nghĩa sẵn Phần mềm đánh giá mơi trường phát triển extend hồn hảo cho nhà phân tích thiêt kế  Ứng dụng : Xây dựng mơ hình use case  MongoDB  Giới thiệu: • MongoDB sở liệu mã nguồn mở noSQL hàng đầu viết C++ • NoSQL dạng CSDL mã nguồn mở không sử dụng Transact-SQL để truy vấn thông tin NoSQL viết tắt bởi: None-Relational SQL, hay có nơi thường gọi NotOnly SQL • Phát hành : 11/02/2009 • Áp dụng : lưu trữ liệu • Ngồi ra, MongoDB sở liệu đa tảng, hoạt động khái niệm Collection Document, cung cấp hiệu suất cao, tính khả dụng cao khả mở rộng dễ dàng • MongoDB hoạt động tiến trình ngầm service, ln mở cổng (Cổng mặc định 27017) để lắng nghe yêu cầu truy vấn, thao tác từ ứng dụng gửi vào sau tiến hành xử lý  Ưu điểm: • Ít schema • Cấu trúc đối tượng rõ ràng • Khơng có Join phức tạp • Khả mở rộng cực lớn • Sử dụng nhớ để lưu giữ cửa sổ làm việc cho phép truy cập liệu nhanh  Github  Giới thiệu: • GitHub hệ thống quản lý dự án phiên code thông qua commit Các lập trình viên clone lại mã nguồn từ repository Github dịch vụ máy chủ repository cơng cộng, người tạo tài khoản để tạo kho chứa riêng để làm việc • GitHub có 14 triệu người sử dụng với 35 triệu kho mã nguồn, làm cho trở thành máy chủ chứa mã nguồn lớn giới, trở thành yếu tố có sức ảnh hưởng cộng đồng phát triển mã nguồn mở  Ứng dụng : • Quản lý mã nguồn • Phân chia nhánh(branch) để phân chia công việc cho người để xử lý module CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ 2.1 Phân tích hệ thống 2.1.1 Usecase 2.1.2 Mô tả Usecase: 2.1.2.1 Usecase: Xem ô tô 2.1.2.1.1 Mơ tả tóm tắt • Tên ca sử dụng: Xem tơ • Mục đích: Người dùng xem danh sách tơ hệ thống • Tác nhân: Người dùng 2.1.2.1.2 Các luồng kiện Luồng kiện • Ca sử dụng bắt đầu người dùng chọn tìm kiếm tơ 10 Hình 7: Xem tin tức  Liên hệ 49 Hình 8: Liên hệ Hình 9: Liên hệ  Giỏ hàng 50 Hình 10: Giỏ hàng  Đặt hàng Hình 11: Đặt hàng  Bảng giá 51 Hình 12: Bảng giá  Giới thiệu Hình 13: Giới thiệu  Mua xe trả góp 52 Hình 14: Mua xe trả góp 3.1.2 Giao diện phía quản trị  Đăng nhập Hình 15: Giao diên đăng nhập Admin  Thống kê 53 Hình 16: Giao diện quản lý thống kê  Sản phẩm Hình 17: Giao diện quản lý sản phẩm  Nhận báo giá 54 Hình 18: Giao diện quản lý nhận báo giá  Đánh giá Hình 19: Giao diện quản lý đánh giá  Đăng tin 55 Hình 20: Giao diện quản lý đăng tin  Bảng giá Hình 21: Giao diện quản lý bảng giá  Thay đổi slider 56 Hình 22: Giao diện quản lý thay đổi slider  Quản lý tài khoản Hình 23: Giao diện quản lý tài khoản 57  Đăng xuất Hình 24: Giao diện quản lý đăng xuất 3.2 Kiểm thử chức hệ thống 3.2.1 Kiểm thử chức phía khách hàng STT Case Đầu vào Kiểm tra chức đăng ký nhận báo giá Kiểm tra chức tìm kiếm sản phẩm Nhập vào họ tên, số diện thoại, sản phẩm Nhập từ khóa sản phẩm cần tìm có tồn Kiểm tra chức xem chi tiết sản phẩm Nhập từ khóa sản phẩm cần tìm khơng tồn Khi ấn vào sản phẩm Kiểm tra chức đánh giá sản phẩm Khi ấn vào nút “Đánh giá” Đầu mong muốn Đăng ký nhận báo giá thành công Kết Hiển thị tất sản phẩm chứa từ khóa vừa nhập Khơng tìm thấy sản phẩm Pass Xem thông tin chi tiết sản phẩm Thêm đánh giá Pass Pass Pass Pass 58 10 11 Kiểm tra chức thêm sản phẩm vào giỏ hàng Kiểm tra chức xem giỏ hàng giao diện xem chi tiết sản phẩm, nhập thông tin email, đánh giá Khi ấn vào nút đặt hàng bên cạnh sản phẩm Khi ấn vào giỏ hàng hiển thị danh sách đánh giá sản phẩm Thêm sản phẩm vào giỏ hàng Hiển thị danh sách sản phẩm có giỏ hàng Kiểm tra chức Ấn vào biểu Cập nhật xóa sản phẩm tượng xóa sản phẩm giỏ hàng cạnh sản phẩm giỏ hàng thành công Kiểm tra chức Ấn vào nút Cho phép đặt hàng “Tiến hành khách hàng toán” tiếp tục đặt hàng toán Kiểm tra chức Ấn vào nút Xem xem thông tin liên hệ “Liên hệ” thơng tin liên menu hệ Kiểm tra chức Ấn vào nút Xem xem tin tức “Tin tức” tin tức có menu website Kiểm tra chức Ấn vào nút Xem xem bảng giá “Bảng giá” bảng giá sản phẩm Bảng 1: Kiểm thử chức phía khách hàng Pass Pass Pass Pass Pass Pass Pass 3.2.2 Kiểm thử chức phía quản trị STT Case Kiểm tra chức đăng nhập Đầu vào Nhập vào tài khoản mật Đầu mong muốn Đăng nhập thành công Kết Pass 59 Kiểm tra chức dashboard Kiểm tra chức quản lý sản phẩm admin Kích chọn dashboard Hiển thị thống kê số lượng sản phẩm, khách hàng nhận báo giá, đơn đặt hàng Có thể thêm, sửa, xóa sản phẩm hiển thị danh sách sản phẩm Kiểm tra chức Ấn vào “Nhận Có thể xóa quản lý báo báo giá” khách hàng giá nhận báo giá liên hệ với khách khàng Kiểm tra Khi ấn vào “Đánh Có thể xóa đánh chức quản giá” giá liên hệ lý với khách hàng đánh giá Kiểm tra chức Khi ấn vào “Đăng Có thể thêm, quản lý tin” sửa, xóa sản đăng tin phẩm hiển thị danh sách tin tức Kiểm tra Khi ấn vào “Bảng Hiển thị chức quản giá” bảng giá lý bảng giá Pass Kiểm tra chức quản lý toán Pass Kiểm tra chức Khi ấn vào “Sản phẩm” Pass Khi ấn vào “Thanh tốn” Admin xác nhận toán, xem chi tiết đơn hàng, chỉnh sửa , xóa thơng tin đơn liên hệ với khách hàng Khi ấn vào “Thay Chỉnh sửa đổi slider” ảnh Pass Pass Pass Pass Pass 60 10 11 quản lý slide slider Kiểm tra Khi ấn vào “Quản Xem chức lý tài khoản” tài khoản quản lý tài khoản admin Kiểm tra chức Khi ấn vào đăng Trở lại giao diện đăng xuất xuất đăng nhập Bảng 2: Kiểm thử chức phía quản trị Pass Pass 61 KẾT LUẬN Kết luận: Kết thực nghiệm đạt được:  Hoàn thành khảo sát phân tích thiết kế hệ thống, thiết kế sở liệu, thiết kế giao diện  Hệ thống xây dựng chức theo yêu cầu ban đầu: tìm kiếm, xem chi tiết sản phẩm, đăng nhập, đăng ký, đặt hàng toán, quản lý sản phẩm, quản lý khách hàng, quản lý mã giảm giá, quản lý đơn hàng, v.v  Hệ thống thiết kế tương đối rõ ràng chi tiết ca sử dụng chức giới thiệu, mô tả chi tiết dễ hình dung Mặc dù việc áp dụng giải pháp cơng nghệ thuật tốn vào xây dựng hệ thống cịn thiếu sót nhóm em cố gắng hồn thành phát triển thêm thời gian tới Hạn chế:  Chưa áp dụng tính phí vận chuyển theo vị trí giao nhận hàng Hướng phát triển: - Tiếp tục tìm hiểu để hồn thiện chức cịn thiếu sót nêu mục - Kết hợp truyền thông online website để tăng tương tác bán hàng dựa vào trang mạng xã hội Facebook, Twitter, Youtube, v.v 62 TÀI LIỆU THAM KHẢO [1] Nguyễn Thị Thanh Huyền, Ngơ Thị Bích Thúy, Phạm Thị Kim Phượng (2011), “Giáo trình phân tích thiết kế hệ thống”, NXB Giáo dục VN [2] Vũ Thị Dương, Phùng Đức Hịa, Nguyễn Thị Hương Lan (2015), “Giáo trình Phân tích thiết kế hướng đối tượng”, NXB Khoa học Kỹ thuật PHỤ LỤC Link Website: Mua bán ô tô Huyndai (cars-shop-vuluu.netlify.app) Link mã nguồn chương trình(github) : https://github.com/LuuCongQuangVu/Cars_Website 63 ... tài Chủ đề đề tài Xây dựng website bán ô tô phần mềm mã nguồn mở cụ thể web bán ô tô tảng nodejs Với mục tiêu áp dụng kiến thức mã nguồn mở để thực hành xây dựng trang web bán tơ Qua biết cách... dụng công nghệ để theo kịp với thời đại Để theo kịp thời đại việc ứng dụng cơng nghệ phần mềm mã nguồn mở vào xây dựng sản phẩm phần mềm ưu tiên hàng đầu ưu điểm mà mạng lại như: có cộng đồng lớn. .. bùng nổ Website bán ô tô cho phép khách hàng truy cập để tiến hành xem ô tô với thông tin đầy đủ tiến hành đặt hàng cách thuận tiện 1.2 Lí chọn đề tài Trong vài năm trở lại đây, với “lên ngôi” thương