BÁO cáo CUỐI kỳ môn kỹ THUẬT PHÁT TRIỂN hệ THỐNG WEB đề tài hệ THỐNG vận tải HÀNG HOÁ FAST DELIVERY

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO CUỐI KỲ MÔN: KỸ THUẬT PHÁT TRIỂN HỆ THỐNG WEB ĐỀ TÀI: HỆ THỐNG VẬN TẢI HÀNG HOÁ FAST DELIVERY GIẢNG VIÊN HƯỚNG DẪN: ThS VÕ NGỌC TÂN ĐẶNG NGỌC LIÊM TRƯƠNG QUỐC BẢO NGUYỄN MINH KHƠI NGUYỄN LƯƠNG TỒN TP.HỒ CHÍ MINH, 2021 IE213.L21 – Kỹ thuật phát triển hệ thống web BẢNG PHÂN CÔNG CÔNG VIỆC MSSV 18520981 18520501 18520944 18521510 IE213.L21 – Kỹ thuật phát triển hệ thống web MỤC LỤC CHƯƠNG TỔNG QUAN VỀ TRANG WEB 1.1 Khảo sát thị trường 1.2 Công nghệ sử dụng 1.3 Kiến trúc 1.4 Dữ Liệu 2.1 2.1.1 2.1.2 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.8.1 2.8.2 2.8.3 CHƯƠNG 3: KẾT LUẬN 3.1 Ưu điểm 3.2 Nhược điểm 3.3 So sánh với Viettel Post CHƯƠNG 4: HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO IE213.L21 – Kỹ thuật phát triển hệ thống web DANH MỤC HÌNH ẢNH Hình 1: Sơ đồ liệu trang web Hình 2: Form đăng nhập Hình 3: Form đăng ký .7 Hình 4: Màn hình tra cứu đơn hàng Hình 5: Màn hình component ước tính chi phí Hình 6: Màn hình ước tính chi phí Hình 7: Form tạo đơn 11 Hình 8: Chi tiết form tạo đơn 11 Hình 9: Form tạo đơn với đầy đủ thông tin 12 Hình 10: Kết sau tạo đơn thành công 13 Hình 11: Chi tiết đơn hàng tạo 14 Hình 12: Chỉnh sửa form tạo đơn 14 Hình 13: Màn hình tra cứu bưu cục 15 Hình 14: Màn hình tra cứu bưu cục 15 Hình 15: Giao diện đăng nhập admin .16 Hình 16: Giao diện trang admin .16 Hình 17: Trang quản lý đơn hàng 17 Hình 18: Quản lý thông tin đơn hàng .17 Hình 19: Chỉnh sửa trạng thái đơn hàng 18 Hình 20: Trạng thái đơn hàng sau chỉnh sửa 18 Hình 21: Quản lý khách hàng 19 Hình 22: Tìm khách hàng tên Khôi 19 Hình 23: Quản lý kho hàng .20 IE213.L21 – Kỹ thuật phát triển hệ thống web DANH MỤC BẢNG Bảng 1: Khảo sát loại hình dịch vụ: Viettel Post, GHN GHTK Bảng 2: Thông tin cần cung cấp tạo đơn 10 Bảng 3: Thông tin đơn hàng 13 Bảng 4: So sánh với Viettel Post 22 IE213.L21 – Kỹ thuật phát triển hệ thống web LỜI MỞ ĐẦU Ngày nay, mà nhu cầu vận chuyển hàng hố người khơng ngừng tăng lên, thì chạy đua thương hiệu vận chuyển hàng hố ngày trở nên khốc liệt Những cơng nghệ liên tục áp dụng, thuật toán đời ngày để đẩy nhanh tốc độ trao đổi hàng hoá, nhằm đổi lại trung thành khách hàng Tuy Việt Nam cạnh tranh chưa thật bùng nổ mong đợi, lý phần nằm việc công ty vận tải chưa đáp ứng đủ số lượng chất lượng giao dịch theo tiêu chuẩn quốc tế Hạ tầng yếu kém, khâu quản lý thiếu chặt chẽ với hệ thống cơng nghệ thơng tin chưa hoàn thiện khiến khách hàng chưa tin tưởng tuyệt đối nơi dịch vụ vận tải Nắm bắt lý đó, nhóm triển khai hệ thống vận tải hàng hoá – kì vọng dẫn đầu, tạo bước đột phá khái niệm vận tải hàng hoá Việt Nam, phục vụ niềm tin khách hàng nước Đồ án gồm phần: Chương 1: Tổng quan trang web Chương 2: Các chức Chương 3: Kết luận Chươgn 4: Hướng phát triển Trong trình thực đồ án, kiến thức chuyên ngành hạn chế nên nhóm chúng em cịn nhiều thiếu sót Rất mong nhận quan tâm, đóng góp thầy để đồ án chúng em đầy đủ hồn chỉnh Cuối xin kính chúc thầy dồi sức khỏe thành công nghiệp cao quý Thành phố Hồ Chí Minh, tháng năm 2021 Nhóm sinh viên thực IE213.L21 – Kỹ thuật phát triển hệ thống web NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … ………………………………………………………………………………………………………… … IE213.L21 – Kỹ thuật phát triển hệ thống web CHƯƠNG TỔNG QUAN VỀ TRANG WEB 1.1 Khảo sát thị trường Hiện nay, thị trường vận chuyển hàng hóa cực kì sơi động, bối cảnh Việt Nam dần tiến vào đường hội nhập với cường quốc giới Bên cạnh đó, tình hình kinh tế đời sống nhân dân Việt Nam dần nâng cao Với nhu cầu ngày mua hàng trực tuyến giao hàng tận nhà ngày tăng, dẫn đến thị trường vận tải hàng hóa khơng cịn gói gọn thành phố lớn, mà dần mở rộng khắp tỉnh thành tồn quốc Trên thị trường Việt Nam có nhiều công ty cung cấp hệ thống vận tải hàng hóa khắp tỉnh thành Trong đó, quen thuộc công ty Viettel Post, Giao Hàng Nhanh, Giao Hàng Tiết Kiệm, Chuyển Phát Nhanh… Các công ty thường cung cấp cho khách hàng – thường đại lý sàn thương mại điện tử, chức hệ thống vận tải, như: Giao hàng App Thu hộ Tra cứu hành trình đơn hàng Tra cứu kho hàng Thống kế tài Bảng 1: Khảo sát loại hình dịch vụ: Viettel Post, GHN GHTK IE213.L21 – Kỹ thuật phát triển hệ thống web Dựa chức này, nhóm chúng em triển khai trang web với chức như: Đăng nhập, đăng kí, tạo đơn hàng, quản lí, tra cứu đơn hàng, tra cứu kho lưu trữ 1.2 Công nghệ sử dụng Ứng dụng phát triển sử dụng ReactJS Redux để thiết kế giao diện, mà hai lên framework có tính linh hoạt cao, dễ dàng tiếp cận xử lý Trong đó, nhóm chọn MySQL làm sở liệu để phù hợp với quy mô đồ án mơn học Ngồi ra, NodeJS nhóm sử dụng để thao tác với liệu từ back-end nhằm tải liệu lên giao diện trang web 1.3 Kiến trúc Ứng dụng tổ chức theo kiến trúc Model – View – Controller (MVC) ứng dụng Android Khi View tác động từ người sử dụng, Event trigger đến Controller Controller chịu trách nhiệm tính tốn, cần thiết truy xuất liệu Model Model chịu trách nhiệm tương tác với liệu trả về, liệu từ API trả về, sau chuyển liệu cho Controller Controller sau xử lí liệu kết xuất liệu chuyển đến View 1.4 Dữ Liệu Dữ liệu hệ thống lưu vào MySQL – hệ quản trị sở liệu mã nguồn mở, bao gồm số như: Khachhang(makh,tenkh,sdt, diachi): Lưu thơng tin khách hàng User(madn, username, password, makh, refeshtoken): Lưu thông tin đăng nhập user đăng ký thường Userbygoogle(logincode,username,makh,refeshtoken):Lưu thông tin đăng nhập user đăng nhập Google Order(madonhang, makh,phi,trangthai,nguoinhan,diachinhan,image,diachidi): thông tin đơn hàng Lưu 10 IE213.L21 – Kỹ thuật phát triển hệ thống web Dưới hình ảnh giao diện danh mục tạo đơn hàng mới: Hình 7: Form tạo đơn Form thêm hàng hóa: Hình 8: Chi tiết form tạo đơn 11 IE213.L21 – Kỹ thuật phát triển hệ thống web Sau điền thơng tin: Hình 9: Form tạo đơn với đầy đủ thông tin 12 IE213.L21 – Kỹ thuật phát triển hệ thống web 2.5 Hiển thị đơn hàng Sau tạo đơn thành công, thông tin đơn gửi đơn nhận ứng dụng lưu lại hiển thị hình đơn hàng Bên đơn gửi, mục hiển thị mã đơn hàng, tên, số điện thoại, địa người nhận trạng thái đơn Tương tự bên đơn nhận, thay chỗ hiển thị thông tin người nhận thông tin người gửi Hình 10: Kết quả sau tạo đơn thành cơng Khi ấn vào mũi tên đơn hàng thì chi tiết đơn hàng xuất bên Chi tiết đơn gồm có thơng tin sau: STT 13 IE213.L21 – Kỹ thuật phát triển hệ thống web Hình 11: Chi tiết đơn hàng tạo 2.6 Cập nhật thông tin người dùng Người dùng chỉnh sửa cập nhật thơng tin cá nhân thiếu để phục vụ cho việc tạo đơn Hình 12: Chỉnh sửa form tạo đơn 14 IE213.L21 – Kỹ thuật phát triển hệ thống web 2.7 Tra cứu bưu cục Hình 13: Màn hình tra cứu bưu cục Tính tra cứu bưu cục gợi ý vài bưu cục tiêu biểu (thanh bên trái hình 2.4) đồ đường Hình 14: Màn hình tra cứu bưu cục Người dùng nhập tên tỉnh thành muốn tra cứu vào search nhấn tìm kiếm, danh sách tên bưu cục kèm địa số điện thoại bưu cục tỉnh thành hiển thị bên trái Ngồi ra, người dùng định vị đến vị trí cách nhấn vào icon định vị (mũi tên màu xanh đến), bưu cục xung quanh vị trí người dùng hiển thị đồ từ người dùng xem đường đến bưu cục 15 IE213.L21 – Kỹ thuật phát triển hệ thống web 2.8 Các chức phía quản lý Để sử dụng chức phía quản lý, người dùng cần có tài khoản phân quyền quản lý Hình 15: Giao diện đăng nhập admin Sau đăng nhập thành công, người dùng điều hướng đến trang dashboard: Hình 16: Giao diện trang admin 2.8.1 Quản lý đơn hàng Với chức quản lý đơn hàng, người quản lý thể nắm bắt tình hình đơn hàng tạo hệ thống, trạng thái đơn hàng Người quản lý thay đổi trạng thái đơn hàng, xóa đơn hàng khỏi hệ thống 16 IE213.L21 – Kỹ thuật phát triển hệ thống web Hình 17: Trang quản lý đơn hàng Hình 18: Quản lý thơng tin đơn hàng 17 IE213.L21 – Kỹ thuật phát triển hệ thống web Hình 19: Chỉnh sửa trạng thái đơn hàng Hình 20: Trạng thái đơn hàng sau chỉnh sửa Ngoài ra, bấm vào nút Delete, đơn hàng bị xóa khỏi hệ thống 18 IE213.L21 – Kỹ thuật phát triển hệ thống web 2.8.2 Quản lý khách hàng Hình 21: Quản lý khách hàng Với chức quản lý khách hàng, người quản lý dùng lọc để hỗ trợ tìm kiếm tìm kiếm theo số điện thoại, tìm theo họ tên hay mã khách hàng: Hình 22: Tìm khách hàng tên Khơi Người quản lý xóa khách hàng khỏi hệ thống cách bấm vào nút xóa 19 IE213.L21 – Kỹ thuật phát triển hệ thống web 2.8.3 Quản lý kho hàng Hình 23: Quản lý kho hàng Người quản lý quản lý thơng tin thêm xóa sửa kho hàng hệ thống 20 IE213.L21 – Kỹ thuật phát triển hệ thống web CHƯƠNG 3: KẾT LUẬN 3.1 Ưu điểm Trong trình phát triển trang web, nhóm nhận thấy trang web có số ưu điểm bật như: - Đáp ứng số tính trang web vận chuyển: tạo đơn hàng, tra cứu đơn hàng, quản lý đơn hàng, tra cứu kho hàng, quản lý kho hàng - Trang web có giao diện đơn giản, thân thiện, dễ dàng tiếp cận với người lần đầu sử dụng dịch vụ - Các quy trình thực kiếm soát chặt chẽ, đảm bảo yếu tố bảo mật cao, đáp ứng tính minh bạch cho khách hàng người quản trị - Các tính tra cứu, tạo đơn hoạt động hiệu quả, bố cục rõ ràng, dễ dàng kiểm tra tìm hiểu 3.2 Nhược điểm Tuy nhiên, trang web tồn nhiều thiếu sót, kể đến như: - Tốc độ tải trang chậm, load liệu API bị nghẽn server backend miễn phí - Các tính nâng cao dừng lại mức ý tưởng, chưa thể thực hố - Tính thẩm mĩ trang web chưa tối ưu hoá thời gian hạn chế - Và cịn thiếu sót nhỏ khác 3.3 So sánh với Viettel Post Fast Delivery 21 Viettel Post IE213.L21 – Kỹ thuật phát triển hệ thống web Tạo Đăn Tr Tìm 22 IE213.L21 – Kỹ thuật phát triển hệ thống web CHƯƠNG 4: HƯỚNG PHÁT TRIỂN Trong khuôn khổ môn học, kiến thức chun ngành cịn đơi chút hạn chế nên đồ án mơn học nhóm có đơn giản so với thiết kế ban đầu Vì vậy, thời gian tới, nhóm bổ sung thêm tính độc đáo nâng cao cho trang web Các chức bao gồm: - Thống kê tài chính: Ghi lại số liệu giao dịch khách hàng theo tuần, theo tháng, quý năm, từ đánh giá mức độ hoạt động sử dụng khách hàng trang web, đồng thời giúp khách hàng nắm bắt khoản chi mình - COD (Thu hộ tiền hàng): Không đơn dịch vụ giao hàng, Fast Delivery mong muốn tích hợp dịch vụ COD để giúp người gửi hàng thu giá trị tiền mặt mặt hàng gửi cho người nhận theo cách nhanh chóng an tồn tuyệt đối - Vị trí thực đơn hàng: Giúp khách hàng người quản trị theo dõi sát đơn hàng, để đưa xử lý cần thiết cần giúp đỡ - Giao hàng tận nhà: Với mong muốn đáp ứng người dân từ miền đất nước, Fast Delivery lên kế hoạch xây dựng mô hình giao hàng tận nơi giống dịch vụ Grab, BEAMIN, thực 23 IE213.L21 – Kỹ thuật phát triển hệ thống web TÀI LIỆU THAM KHẢO [1] React tutorial, address: https://reactjs.org, last access: 15/7/2021 [2] Redux toturial, address: https://redux.js.org, last access: 17/07/2021 [3] Simon Saliba, React and Node.js: Build a Full Stack App From Development to Production in Minutes, address: https://medium.com/swlh/react-andnode-js-build-a-full-stack-app-from-development-to-production-in-5-minutesa03bc019df6b, lass access: 15/07/2021 24 ... Kỹ thuật phát triển hệ thống web 2.8.3 Quản lý kho hàng Hình 23: Quản lý kho hàng Người quản lý quản lý thơng tin thêm xóa sửa kho hàng hệ thống 20 IE213.L21 – Kỹ thuật phát triển hệ thống web. .. IE213.L21 – Kỹ thuật phát triển hệ thống web Hình 17: Trang quản lý đơn hàng Hình 18: Quản lý thơng tin đơn hàng 17 IE213.L21 – Kỹ thuật phát triển hệ thống web Hình 19: Chỉnh sửa trạng thái đơn hàng. ..IE213.L21 – Kỹ thuật phát triển hệ thống web BẢNG PHÂN CÔNG CÔNG VIỆC MSSV 18520981 18520501 18520944 18521510 IE213.L21 – Kỹ thuật phát triển hệ thống web MỤC LỤC CHƯƠNG TỔNG QUAN VỀ TRANG WEB