Da1 17520021 se121 n11 pmcl nguyenconghoan

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN TÌM HIỂU DOCKER VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn: ThS Nguyễn Công Hoan Lớp: SE121.N11.PMCL Sinh viên thực hiện: Nguyễn Thanh Trung 17520021 Tp Hồ Chí Minh, 2022 LỜI CẢM ƠN Đầu tiên, em gửi lời cảm ơn chân thành đến tập thể quý thầy cô trường Đại học Công nghệ thông tin – Đại học Quốc gia Tp Hồ Chí Minh q thầy khoa Cơng nghệ phần mềm giúp cho em có kiến thức làm tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới thầy Nguyễn Cơng Hoan trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến quý báu giúp em hồn thành tốt báo cáo mơn học Trong thời gian đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, em khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía thầy nhằm hoàn thiện kiến thức mà em học tập hành trang để em thực tiếp đề tài khác tương lai NHẬN XÉT CỦA GIẢNG VIÊN ………………………………………………………………………………………… … ……………………………………………………………………………………… …… …………………………………………………………………………………… ……… ………………………………………………………………………………… ………… ……………………………………………………………………………… …………… …………………………………………………………………………… ……………… ………………………………………………………………………… ………………… ……………………………………………………………………… …………………… …………………………………………………………………… ……………………… ………………………………………………………………… ………………………… ……………………………………………………………… …………………………… …………………………………………………………… ……………………………… ………………………………………………………… ………………………………… ……………………………………………………… …………………………………… …………………………………………………… ……………………………………… ………………………………………………… ………………………………………… ……………………………………………… …………………………………………… …………………………………………… ……………………………………………… ………………………………………… ………………………………………………… ……………………………………… …………………………………………………… …………………………………… ……………………………………………………… ………………………………… ………………………………………………………… ……………………………… …………………………………………………………… …………………………… ……………………………………………………………… ………………………… ………………………………………………………………… ……………………… …………………………………………………………………… …………………… ……………………………………………………………………… Mục lục Chương GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài 1.1.1 Về Docker 1.1.2 Về ứng dụng website thương mại điện tử 1.2 Đối tượng nghiên cứu 1.3 Phạm vi nghiên cứu 1.4 Phương pháp nghiên cứu 1.5 Bố cục Chương KIẾN THỨC NỀN TẢNG 2.1 Tổng quan Docker 2.1.1 Định nghĩa 2.1.2 Các thành phần 2.1.3 Một số khái niệm 2.1.4 Ưu điểm Docker 10 2.1.5 Triển khai Docker Ubuntu 10 2.1.6 So sánh Docker Virtual Machine 16 2.2 Giới thiệu Node.js 18 2.2.1 Khái niệm 18 2.2.2 Ưu điểm 18 2.3 Giới thiệu Express.js 19 2.3.1 Khái niệm 19 2.3.2 Ưu điểm 19 2.4 Giới thiệu React.js 19 2.4.1 Khái niệm 19 2.4.2 Ưu điểm 20 2.5 Giới thiệu MongoDB 20 2.5.1 Khái niệm 20 2.5.2 Ưu điểm 20 Chương XÂY DỰNG HỆ THỐNG 22 3.1 Xây dựng kiến trúc hệ thống 22 3.1.1 Xác định yêu cầu hệ thống 22 3.1.2 Phân tích yêu cầu hệ thống 22 3.2 Phân tích thiết kế hệ thống 26 3.2.1 Sơ đồ use case 26 3.2.2 Sơ đồ lớp 34 3.2.3 Phân tích thiết kế CSDL 42 3.3 Thiết kế giao diện 44 3.3.1 Giao diện người dùng 44 3.3.2 Giao diện quản lý (dành cho người quản trị) 57 Chương KẾT LUẬN 64 4.1 Kết đạt 64 4.2 Hạn chế 64 4.3 Thuận lợi khó khăn 64 4.4 Hướng phát triển 64 TÀI LIỆU THAM KHẢO 65 Chương GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài 1.1.1 Về Docker Với phát triển hàng loạt loại công nghệ tại, ứng dụng tạo cập nhập liên tục, nhiều loại ngơn ngữ lập trình hình thành Đi kèm với ngơn ngữ lại yêu cầu phần mềm hỗ trợ, gói thư viện mơi trường khác Có số ngơn ngữ chạy tảng Java, Python, nhiên có số ngơn ngữ lại kén chọn khơng thể khỏi phụ thuộc vào môi trường, hệ điều hành C# hay Swift, phát triển xong phần mềm phải deploy ứng dụng phải tiến hành cài đặt nhiều mơi trường Đó chưa kể vấn đề xong đột phần mềm, trùng port, khác biệt phiên môi trường phát triển, Nếu thứ dừng lại mức khó cài đặt cịn chấp nhận thật kinh khủng xảy xung dột phần mềm làm ảnh hưởng đến hoạt động ứng dụng điều khơng thể Chính cơng nghệ ảo hóa đời Docker số chúng Là tảng dành cho lập trình viên, nhà quản trị hệ thống Docker giúp phát triển, triển khai chạy ứng dụng container Việc đóng gói thành container giúp giảm thiểu rủi ro xung đột môi trường phát triển môi trường vận hành giúp ứng dụng hoạt đông cách ổn định 1.1.2 Về ứng dụng website thương mại điện tử Trong thời đại 4.0 cơng nghệ phát triển nay, việc kinh doanh online trở thành xu hết số lý sau: – Khơng chi phí th mặt cửa hàng – Tiết kiệm chi phí lưu trữ hàng hóa – Tiết kiệm chi phí th nhân viên – Phục vụ khách hàng hiệu – Bán hàng 24/7 – Công cụ bán hàng quảng cáo online phát triển mạnh – Số người sử dụng internet đông ngày nhiều Kết luận: Chính tính tiện dụng, hiệu phát triển mạnh mẽ website, ứng dụng thương mại điện tử với khả hỗ trợ phát triển ứng dụng tuyệt vời đến từ công nghệ Docker, em định chọn đề tài “Tìm hiểu Docker xây dựng ứng dụng minh họa” để nghiên cứu phát triển cho môn đồ án 1.2 Đối tượng nghiên cứu – Các công nghệ: + Docker + JavaScript + Node.js + React.js + MongoDB – Đối tượng phạm vi đề tài hướng đến: + Những doanh nghiệp, nhà bán hàng nước + Người tiêu dùng nước 1.3 Phạm vi nghiên cứu – Ứng dụng website xây dựng theo MERN Stack: MongoDB, Express.js, React.js, Node.js – Phát triển cài đặt ứng dụng Docker 1.4 Phương pháp nghiên cứu Em sử dụng phương pháp nghiên cứu: – Phương pháp đọc tài liệu – Phương pháp phân tích ứng dụng TMĐT tương tự có Qua khảo sát tìm hiểu, website/ ứng dụng TMĐT nói chung ứng dụng kinh doanh sản phẩm quần áo nói riêng, em nhận thấy ứng dụng có mơ hình xử lý hàng hóa sau: – Nhập kho: + Nhập hàng hóa từ nhà cung cấp + Cập nhật hàng hóa lên sở liệu – Bán hàng: + Khách hàng đặt hàng ứng dụng + Hệ thống chuyển đơn hàng Webservice để nhân viên xử lý – Đóng gói: + Nhân viên lấy hàng kho theo đơn hàng đóng gói + Nhân viên cập nhật lại số lượng hàng kho – Vận chuyển: + Nhân viên giao hàng chuyển hàng theo địa khách hàng + Nhân viên cập nhật tình trạng đơn hàng – Hậu mãi: + Nhân viên giải đáp thắc mắc khách hàng + Xử lý hàng hóa khơng có người nhận + Xử lý hàng hóa bị khách hàng trả lại 1.5 Bố cục Báo cáo gồm có chương: Chương giới thiệu đề tài, đề cập đến đối tượng phạm vi phương pháp nghiên cứu Cuối chương phần bố cục báo cáo Chương trình bày tảng, công nghệ sử dụng trình xây dựng phát triển ứng dụng Chương trình bày chi tiết quy trình xây dựng hệ thống, từ xác định phân tích yêu cầu toán xây dựng CSDL, cuối xây dựng giao diện cho úng dụng Chương kết luận, rút ưu nhược điểm ứng dụng đề hướng phát triển tương lai Chương KIẾN THỨC NỀN TẢNG 2.1 Tổng quan Docker 2.1.1 Định nghĩa Docker tảng mở dành cho lập trình viên, quản trị hệ thống dùng để xây dựng, vận chuyển chạy ứng dụng cách dễ dàng tảng ảo hóa Docker đưa giải pháp cho vấn đề ảo hóa, thay tạo máy ảo chạy độc lập kiểu hypervisors (tạo phần cứng ảo cài đặt hệ điều hành lên đó), ứng dụng đóng gói lại thành Container riêng lẻ Các Container chạy chung nhân hệ điều hành qua LXC (Linux Containers), chia sẻ chung tài nguyên máy mẹ, đó, hoạt động nhẹ nhanh máy ảo dạng hypervisors 2.1.2 Các thành phần Các thành phần Docker bao gồm: – Docker Engine: thành phần Docker, cơng cụ để đóng gói ứng dụng – Docker Hub: dịch vụ cloud để chia sẻ ứng dụng tự động hóa chuỗi cơng việc liên tục, thao tác pull/push với images 2.1.3 Một số khái niệm Một số khái niệm phổ biến Docker: – Docker images: “read-only template” Chẳng hạn, image chứa hệ điều hành Ubuntu cài đặt sẵn Vim – Docker registries: kho chứa images Người dùng tạo images tải lên tải images chia sẻ – Docker container: hoạt động giống thư mục (directory), chứa tất thứ cần thiết để ứng dụng chạy Mỗi docker container tạo từ docker image Các thao tác với container: chạy, bật, tắt, di chuyển, xóa – Dockerfile: file chứa tập hợp lệnh để Docker đọc thực để đóng gói image theo yêu cầu người dùng – Orchestration: công cụ, dịch vụ dùng để điều phối quản lý nhiều containers cho chúng làm việc hiệu 2.1.4 Ưu điểm Docker – Tiện lợi: giúp giảm tải phức tạp cài đặt loại công nghệ đồng phiên cơng nghệ – Dễ dàng sử dụng: dễ dàng cho lập trình viên, quản trị hệ thống, sử dụng Docker sử lợi container để xây dựng kiểm tra ứng dụng cách nhanh chóng – Khả di động: mơi trường phát triển dựng lên docker chuyển từ người sang người khác mà không làm thay đổi cấu hình 2.1.5 Triển khai Docker Ubuntu *Cài đặt Docker Bước 1: Cập nhập OS câu lệnh sudo apt-get update Bước 2: Gỡ phiên cũ Docker(Bỏ qua bước chưa cài Docker) sudo apt-get remove docker docker-engine docker.io Bước 3: Cài Docker câu lệnh sudo apt install docker.io Bước 4: Chạy tự động hóa Docker sudo systemctl start docker sudo systemctl enable docker Bước 5: kiểm tra phiên Docker docker sevsion Chạy câu lệnh với Docker docker run hello-world 10 51 3.3.1.9 Giao diện chi tiết sản phẩm Đây giao diện cho phép khách hàng xem đầy đủ thông tin chi tiết sản phẩm có hệ thống Ngồi ra, khách hàng xem bình luận đánh giá sản phẩm, để lại bình luận đánh giá riêng trả lời bình luận đánh giá khách hàng khác Chỉ khách hàng đăng nhập vào hệ thống bình luận trả lời bình luận 52 53 3.3.1.10 Giao diện xem trước giỏ hàng Đây giao diện cho phép khách hàng xem trước sản phẩm thêm vào giỏ hàng Giao diện cung cấp hình ảnh, tên, số lượng, mức giá sản phẩm tổng giá trị toàn sản phẩm giỏ hàng Khách hàng click vào nút “Xem giỏ hàng” để đến giao diện xem giỏ hàng cung cấp đầy đủ thông tin cho phép người dùng thao tác giỏ hàng 3.3.1.11 Giao diện xem giỏ hàng Đây giao diện cho phép khách hàng xem thông tin danh sách sản phẩm thêm vào giỏ hàng Khách hàng tăng/giảm số lượng sản phẩm thêm loại bỏ sản phẩm khỏi giỏ hàng Nếu chắn sản phẩm muốn mua, khách hàng click vào nút “Thanh toán” để đến giao diện toán đặt hàng, khách hàng muốn tiếp tục chọn lựa mua sắm thêm sản phẩm click vào nút “Tiếp tục mua sắm” để quay trở trang chủ xem danh sách sản phẩm có 54 3.3.1.12 Giao diện toán đặt hàng Đây giao diện tốn đặt hàng, cho phép khách hàng nhập thơng tin giao hàng, phương thức tốn, xem tóm tắt đơn hàng tiến hành đặt mua sản phẩm Phần thông tin người nhận tự động điền tương ứng với thông tin tài khoản khách hàng nhắm tiết kiệm tối đa thời gian mua sắm, khách hàng thay đổi thơng tin muốn Chức toán đặt hàng yêu cầu khách hàng phải đăng nhập vào hệ thống sử dụng 55 3.3.1.13 Giao diện đặt hàng thành công Sau khách hàng đặt hàng thành công, hệ thống tiến hành ghi nhận đơn hàng hiển thị hình thông báo đặt hàng thành công 56 3.3.2 Giao diện quản lý (dành cho người quản trị) 3.3.2.1 Giao diện đăng nhập Đây giao diện đăng nhập, cho phép người dùng đăng nhập vào hệ thống quản lý tài khoản dành riêng cho quản trị viên 3.3.2.2 Giao diện thống kê Đây giao diện cung cấp số liệu doanh thu số lượng bán sản phẩm hệ thống Màn hình hiển thị bao gồm biểu đồ ô thông tin nhỏ loại danh mục sản phẩm có hệ thống biểu đồ thứ cấp thông tin doanh thu tháng 12 tháng Biểu đồ thứ hai cung cấp thông tin số lượng bán danh mục sản phẩm tương ứng với tháng 12 tháng Các ô thông tin danh mục sản phẩm cung cấp tổng doanh thu tổng số lượng bán tương ứng tính đến thời điểm 57 3.3.2.3 Giao diện quản lý sản phẩm 3.3.2.3.1 Giao diện xem danh sách tìm kiếm sản phẩm Đây giao diện hiển thị danh sách sản phẩm có hệ thống Quản trị viên nhanh chóng tìm kiếm sản phẩm từ danh sách cách nhập từ khóa sử dụng lọc (phân loại, trạng thái) xếp (theo mức giá tăng dần giảm dần) 58 3.3.2.3.2 Giao diện xem chi tiết sản phẩm Khi quản trị viên click vào nút “xem sản phẩm” (nút màu hồng có hình mắt mở), hệ thống hiển thị cửa sổ cung cấp thông tin chi tiết sản phẩm click 3.3.2.3.3 Giao diện thêm sản phẩm Khi quản trị viên click vào nút “thêm sản phẩm” (nút màu hồng có hình dấu cộng phía bên phải), hệ thống hiển thị cửa sổ cho phép người dùng tạo thêm sản phẩm hệ thống 59 3.3.2.3.4 Giao diện cập nhật sản phẩm Khi người quản trị viên click vào nút “cập nhật sản phẩm” (nút màu xanh có hình bút), hệ thống hiển thị cửa sổ cho phép người dùng cập nhật lại thông tin cho sản phẩm click 3.3.2.4 Giao diện quản lý đơn hàng 3.3.2.4.1 Giao diện xem danh sách tìm kiếm đơn hàng Đây giao diện hiển thị danh sách đơn hàng mà khách hàng đặt Quản trị viên nhanh chóng tìm kiếm đơn hàng từ danh sách cách nhập tìm kiếm từ khóa (mã đơn hàng, tên người nhận số điện thoại), sử dụng lọc (trạng thái đơn hàng) tìm kiếm đơn hàng khoảng ngày định 60 3.3.2.4.2 Giao diện xem chi tiết đơn hàng Khi quản trị viên click vào nút “xem đơn hàng” (nút màu hồng có hình mắt mở), hệ thống hiển thị cửa sổ cung cấp thông tin chi tiết đơn hàng click 61 3.3.2.4.3 Giao diện cập nhật trạng thái sản phẩm Khi quản trị viên click vào nút “cập nhật trạng thái đơn hàng” (nút màu xanh có hình bút), hệ thống hiển thị cửa sổ cho phép người dùng cập nhật lại trạng thái thời điểm cho đơn hàng click 3.3.2.4 Giao diện quản lý bình luận sản phẩm Ở giao diện xem chi tiết sản phẩm phía người tiêu dùng, phần bình luận đánh giá sản phẩm, người dùng đăng nhập với tư cách quản trị viên, hệ thống hiển thị thêm hai lựa chọn thao tác bên cạnh nút “Trả lời” “Xóa” “Cấm” Quản trị viên thực xóa bình luận đánh giá cấm tài khoản người dùng thực bình luận đánh giá hệ thống Đồng thời quản trị viên bình luận, hệ thống hiển thị tên người bình luận “ZShop – Mua sắm thời trang” hiển thị ảnh đại diện khác với ảnh đại diện người dùng thông thường 62 63 Chương KẾT LUẬN 4.1 Kết đạt – Hồn thành u cầu đặt ban đầu, có đầy đủ tính cần thiết ứng dụng website thương mại điện tử – Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng theo tác ứng dụng – Tốc độ phản hồi thao tác nhanh, tối ưu hóa suất người dùng – Sinh viên thực nắm cách thức làm ứng dụng website thương mại điện tử, hiểu biết Docker, MERN Stack 4.2 Hạn chế – Website cịn hạn chế số tính năng: + Chưa tích hợp tốn trực tuyến + Chưa trích xuất hóa đơn file excel hay word + Chưa mở rộng danh mục sản phẩm cần bán + Chưa có gợi ý sản phẩm cho người mua 4.3 Hướng phát triển – Xây dựng chứa cịn thiếu, hồn thiện chức có – Tích hợp tốn trực tuyến qua ví điện tử MoMo,VnPay thẻ ngân hàng,… – Tối ưu hóa CSDL hợp lý – Cho phép mở rộng doanh mục sản phẩm – Thêm gợi ý sản phẩm dựa vào sản phẩm mua người dùng 64 TÀI LIỆU THAM KHẢO Trong trình xây dựng phát triển ứng dụng website, tham khảo cácnguồn tài liệu sau: Tài liệu Docker: https://www.docker.com/ Tài liệu React.js: https://reactjs.org/ Tài liệu Node.js: https://nodejs.org/en/docs/ Tài liệu Express.js: https://expressjs.com/ Tài liệu MongoDB: https://www.mongodb.com/ Tài liệu Mongoose: https://mongoosejs.com/ Tài liệu Recoil.js: https://recoiljs.org/ Tài liệu React Router Dom: https://reactrouter.com/web/guides/quick-start Tài liệu React Query: https://react-query.tanstack.com/ Tài liệu Axios: https://github.com/axios/axios Tài liệu Formik: https://formik.org/docs/overview Tài liệu Yup: https://github.com/jquense/yup Tài liệu Recharts: https://recharts.org/en-US/ Tài liệu Nodemailer: https://nodemailer.com/about/ Tài liệu Cloudinary: https://cloudinary.com/ Tài liệu JSON Web Tokens: https://jwt.io/ 65