Báo cáo cuối kỳ môn Kỹ thuật phát triển hệ thống web: Hệ thống vận tải hàng hoá

Mục tiêu nghiên cứu của đề tài là triển khai một hệ thống vận tải hàng hoá – được kì vọng sẽ dẫn đầu, tạo ra bước đi đột phá về khái niệm vận tải hàng hoá ở Việt Nam, phục vụ niềm tin của khách hàng cả nước.

ĐẠ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 18520981 TRƯƠNG QUỐC BẢO 18520501 NGUYỄN MINH KHÔI 18520944 NGUYỄN LƯƠNG TỒN 18521510 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 HỌ TÊN NHIỆM VỤ HOÀN THÀNH Xử lý backend, thiết 18520981 Đặng Ngọc Liêm kế thực liệu, làm báo cáo, 100% slide Xử lý tạo đơn, hiển 18520501 Trương Quốc Bảo thị đơn hàng,đăng nhập, đăng kí, làm 100% báo cáo, slide Các chức phía 18520944 Nguyễn Minh Khôi Admin, làm báo cáo, 100% làm slide Tra cứu đơn hàng, tra 18521510 Nguyễn Lương Toàn cứu kho hàng, đăng nhập đăng kí, làm báo cáo, slide 100% 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 CHƯƠNG CÁC CHỨC NĂNG CHÍNH 2.1 Đăng nhập, đăng ký 2.1.1 Đăng nhập 2.1.2 Đăng kí 2.2 Tra cứu đơn hàng 2.3 Ước tính cước phí 2.4 Tạo đơn 2.5 Hiển thị đơn hàng 13 2.6 Cập nhật thông tin người dùng 14 2.7 Tra cứu bưu cục 15 2.8 Các chức phía quản lý 16 2.8.1 Quản lý đơn hàng 16 2.8.2 Quản lý khách hàng 19 2.8.3 Quản lý kho hàng 20 CHƯƠNG 3: KẾT LUẬN 21 3.1 Ưu điểm 21 3.2 Nhược điểm 21 3.3 So sánh với Viettel Post 21 CHƯƠNG 4: HƯỚNG PHÁT TRIỂN 23 TÀI LIỆU THAM KHẢO 24 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ý 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 hố – 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ư: Viettel Post Giao hàng nhanh, Giao hàng giao hàng tiết kiệm, giao hàng hoả tốc Giao hàng nhanh Giao hàng tiết kiệm Giao hàng nhanh, Giao hàng tiết kiệm, giao hàng tiết kiệm giao hàng hoả tốc App Có Có Có Thu hộ Có Có Có Có Có Có Tra cứu kho hàng Có Có Khơng Thống kế tài Có Khơng Khơng Tra cứu hành trình đơn hàng 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 IE213.L21 – Kỹ thuật phát triển hệ thống web Orderdetail(mact, madonhang, chieucao, cannang, loaidonhang, loaigiaohang, tensp, soluong):Lưu thông tin chi tiết mặt hàng đơn hàng Kho(makho, tenkho, diachi, tinh, vido, kinhdo): Lưu thông tin kho Và bảng phụ dùng để bổ sung thơng tin cho bảng Sơ đồ giao diện: Hình 1: Sơ đồ liệu trang web IE213.L21 – Kỹ thuật phát triển hệ thống web STT Thông tin cung cấp Đơn vị tính Ghi Bao gồm họ tên người gửi, SĐT Thông tin người gửi địa liên lạc Thông tin người Bao gồm họ tên người nhận, SĐT nhận địa liên lạc Mô tả loại/tên cụ thể hàng hoá Tên hàng hoá gửi Trọng lượng hàng hoá Số lượng hàng hoá Tổng trọng lượng hàng hoá kg gửi Chiếc Số lượng hàng hố loại hàng hố có đơn hàng Dịch vụ chuyển hàng, gồm có: Dịch vụ hàng hoá Giao hàng nhanh, Giao hàng tiết kiệm Giao hàng hoả tốc Ảnh chụp mô tả hàng hoá bên Ảnh chụp hàng hoá cạnh thông tin mục (3) Bảng 2: Thông tin cần cung cấp tạo đơn 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 chi tiết đơn hàng xuất bên Chi tiết đơn gồm có thông tin sau: STT Thông tin cung cấp Thông tin người gửi Ghi Bao gồm họ tên, số điện thoại, địa Danh sách hàng hóa Hình ảnh hàng hóa Tên hàng hóa, trọng lượng, số lượng Bảng 3: Thông tin đơn hàng 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 cị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 Ngoà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 đơi 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 hàng online Có Có Đăng nhập với Google Khơng Có Tra cứu đơn hàng Có Có Tìm kiếm kho hàng Có Có Độ phức tạp Thấp Cao Tốc độ Chậm Nhanh Bảng 4: So sánh với Viettel Post 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 - 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-and-nodejs-build-a-full-stack-app-from-development-to-production-in-5-minutesa03bc019df6b, lass access: 15/07/2021 24 ... 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. .. – 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. .. thể hàng hố Tên hàng hoá gửi Trọng lượng hàng hoá Số lượng hàng hoá Tổng trọng lượng hàng hoá kg gửi Chiếc Số lượng hàng hoá loại hàng hố có đơn hàng Dịch vụ chuyển hàng, gồm có: Dịch vụ hàng