Báo cáo Hệ thống vận tải hàng hoá Fast Delivery

Nội dung text: Báo cáo Hệ thống vận tải hàng hoá Fast Delivery

1. ĐẠ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 TOÀN 18521510 TP.HỒ CHÍ MINH, 2021
2. 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 kế và hiện thực dữ 18520981 Đặng Ngọc Liêm 100% liệu, làm báo cáo, slide Xử lý tạo đơn, hiển thị đơn hàng,đăng 18520501 Trương Quốc Bảo 100% nhập, đăng kí, làm báo cáo, slide Các chức năng 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 cứu kho hàng, đăng 18521510 Nguyễn Lương Toàn 100% nhập đăng kí, làm báo cáo, slide
3. IE213.L21 – Kỹ thuật phát triển hệ thống web MỤC LỤC CHƯƠNG 1 TỔNG QUAN VỀ TRANG WEB 3 1.1 Khảo sát thị trường 3 1.2 Công nghệ sử dụng 4 1.3 Kiến trúc 4 1.4 Dữ Liệu 4 CHƯƠNG 2 CÁC CHỨC NĂNG CHÍNH 6 2.1 Đăng nhập, đăng ký 6 2.1.1 Đăng nhập 6 2.1.2 Đăng kí 7 2.2 Tra cứu đơn hàng 8 2.3 Ước tính cước phí 8 2.4 Tạo đơn 9 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 năng 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
4. IE213.L21 – Kỹ thuật phát triển hệ thống web DANH MỤC HÌNH ẢNH Hình 1: Sơ đồ dữ liệu của trang web 5 Hình 2: Form đăng nhập 6 Hình 3: Form đăng ký 7 Hình 4: Màn hình tra cứu đơn hàng 8 Hình 5: Màn hình component ước tính chi phí 8 Hình 6: Màn hình ước tính chi phí 9 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 quả sau khi 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 khi 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
5. 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 3 loại hình dịch vụ: Viettel Post, GHN và GHTK 3 Bảng 2: Thông tin cần cung cấp khi tạo đơn 10 Bảng 3: Thông tin về một đơn hàng 13 Bảng 4: So sánh với Viettel Post 22
6. IE213.L21 – Kỹ thuật phát triển hệ thống web LỜI MỞ ĐẦU Ngày nay, khi mà trên nhu cầu vận chuyển hàng hoá của con người không ngừng tăng lên, thì cuộc chạy đua giữa những thương hiệu vận chuyển hàng hoá ngày một trở nên khốc liệt. Những công nghệ mới liên tục được áp dụng, những thuật toán ra đời mỗi ngày để đẩy nhanh tốc độ trao đổi hàng hoá, nhằm đổi lại sự trung thành của khách hàng. Tuy vậy ở Việt Nam cuộc cạnh tranh này còn chưa thật sự bùng nổ như mong đợi, lý do một phần nằm ở việc các công ty vận tải còn chưa đáp ứng đủ số lượng và chất lượng giao dịch theo các tiêu chuẩn quốc tế. Hạ tầng còn yếu kém, khâu quản lý thiếu chặt chẽ cùng với đó là hệ thống công nghệ thông tin chưa được hoàn thiện đã khiến khách hàng chưa tin tưởng tuyệt đối nơi các dịch vụ vận tải. Nắm bắt được lý do đó, nhóm đã 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. Đồ án này gồm 4 phần: Chương 1: Tổng quan về trang web. Chương 2: Các chức năng chính. Chương 3: Kết luận. Chươgn 4: Hướng phát triển Trong quá trình thực hiện đồ án, do kiến thức chuyên ngành còn hạn chế nên nhóm chúng em vẫn còn nhiều thiếu sót. Rất mong nhận được sự quan tâm, đóng góp của thầy để đồ án của chúng em được đầy đủ và hoàn chỉnh hơn. Cuối cùng xin kính chúc thầy dồi dào sức khỏe và thành công trong sự nghiệp cao quý. Thành phố Hồ Chí Minh, tháng 7 năm 2021 Nhóm sinh viên thực hiện 1
7. 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 2
8. IE213.L21 – Kỹ thuật phát triển hệ thống web CHƯƠNG 1 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 đang cực kì sôi động, trong bối cảnh Việt Nam đang dần tiến vào con đường hội nhập với các cường quốc trên thế giới. Bên cạnh đó, tình hình kinh tế và đời sống của nhân dân Việt Nam đang dần được nâng cao. Với nhu cầu ngày mua hàng trực tuyến và giao hàng tận nhà ngày càng tăng, dẫn đến thị trường vận tải hàng hóa không còn gói gọn trong các thành phố lớn, mà dần mở rộng khắp các tỉnh thành trên toàn quốc. Trên thị trường Việt Nam hiện nay có khá nhiều các công ty cung cấp hệ thống vận tải hàng hóa khắp trên các tỉnh thành. Trong đó, quen thuộc nhất là các công ty như Viettel Post, Giao Hàng Nhanh, Giao Hàng Tiết Kiệm, Chuyển Phát Nhanh Các công ty này thường cung cấp cho các khách hàng – thường là các đại lý hoặc các sàn thương mại điện tử, các chức năng cơ bản của một hệ thống vận tải, như: Viettel Post Giao hàng nhanh Giao hàng tiết kiệm Giao hàng nhanh, Giao hàng nhanh, Giao hàng tiết kiệm, Giao hàng giao hàng tiết kiệm, giao hàng tiết kiệm giao hàng hoả tốc giao hàng hoả tốc App Có Có Có Thu hộ Có Có Có Tra cứu hành trình Có Có Có đơn hàng Tra cứu kho hàng Có Có Không Thống kế tài chính Có Không Không Bảng 1: Khảo sát 3 loại hình dịch vụ: Viettel Post, GHN và GHTK 3
9. IE213.L21 – Kỹ thuật phát triển hệ thống web Dựa trên những chức năng này, nhóm chúng em đã triển khai một trang web với các chức năng cơ bản 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 được phát triển sử dụng ReactJS và Redux để thiết kế giao diện, khi mà cả hai đang nổi lên là những framework có tính linh hoạt cao, dễ dàng tiếp cận và xử lý. Trong khi đó, nhóm chọn MySQL làm cơ sở dữ liệu để phù hợp với quy mô của đồ án môn học. Ngoài ra, NodeJS cũng được nhóm sử dụng để thao tác với dữ liệu từ back-end nhằm tải dữ liệu lên giao diện của trang web. 1.3 Kiến trúc Ứng dụng được tổ chức theo kiến trúc Model – View – Controller (MVC) trong ứng dụng Android. Khi View được tác động từ người sử dụng, một Event sẽ được trigger đến Controller. Controller chịu trách nhiệm tính toán, nếu cần thiết sẽ truy xuất dữ liệu trên Model. Model chịu trách nhiệm tương tác với dữ liệu trả về, ở đây là dữ liệu từ API trả về, sau đó chuyển dữ liệu đó cho Controller. Controller sau khi xử lí dữ liệu sẽ kết xuất dữ liệu chuyển đến View. 1.4 Dữ Liệu Dữ liệu của hệ thống được lưu vào MySQL – một hệ quản trị cơ sở dữ liệu mã nguồn mở, bao gồm một số bản chính như: Khachhang(makh,tenkh,sdt, diachi): Lưu thông tin của khách hàng User(madn, username, password, makh, refeshtoken): Lưu thông tin đăng nhập của user đăng ký thường Userbygoogle(logincode,username,makh,refeshtoken):Lưu thông tin đăng nhập của user đăng nhập bằng Google Order(madonhang, makh,phi,trangthai,nguoinhan,diachinhan,image,diachidi): Lưu thông tin cơ bản của một đơn hàng 4
10. 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 của các mặt hàng trong đơn hàng Kho(makho, tenkho, diachi, tinh, vido, kinhdo): Lưu thông tin của một kho Và còn các bảng phụ dùng để bổ sung thông tin cho các bảng chính. Sơ đồ giao diện: Hình 1: Sơ đồ dữ liệu của trang web 5
11. IE213.L21 – Kỹ thuật phát triển hệ thống web CHƯƠNG 2 CÁC CHỨC NĂNG CHÍNH 2.1 Đăng nhập, đăng ký 2.1.1 Đăng nhập Hình 2: Form đăng nhập Người dùng đăng nhập bằng tài khoản đã đăng kí trên Fast Delivery, bao gồm email và mật khẩu. 6
12. IE213.L21 – Kỹ thuật phát triển hệ thống web 2.1.2 Đăng kí Hình 3: Form đăng ký Người dùng đăng kí tài khoản Fast Delivery bằng email và mật khẩu, mật khẩu cần nhập hai lần và trùng khớp với nhau. Mỗi email chỉ đăng kí được một lần duy nhất. 7
13. IE213.L21 – Kỹ thuật phát triển hệ thống web 2.2 Tra cứu đơn hàng Hình 4: Màn hình tra cứu đơn hàng Khi gửi hàng thành công, người dùng sẽ được cung cấp một mã vận đơn. Có thể tra cứu thông tin và tình trạng đơn hàng một cách nhanh chóng bằng cách nhập mã này vào ô “Mã phiếu gửi” và nhấn nút “Tra cứu”. Thông tin chi tiết về đơn hàng như: Chi phí, người nhận, địa chỉ, trạng thái sẽ được hiển thị ngay bên dưới. 2.3 Ước tính cước phí Hình 5: Màn hình component ước tính chi phí 8
14. IE213.L21 – Kỹ thuật phát triển hệ thống web Hình 6: Màn hình ước tính chi phí Người dùng có thể ước tính chi phí gửi hàng bằng cách chọn tỉnh thành gửi, tỉnh thành nhận và trọng lượng hàng hóa vào form ở trang chủ hoặc trong trang ước tính. Máy tính sẽ tính toán dựa trên khoảng cách giữa hai tỉnh thành và khối lượng của hàng hóa rồi trả về cho người dùng chi phí và thời gian ước tính của cả hai dịch vụ (chuyển phát nhanh và chuyển phát thường). 2.4 Tạo đơn Fast Delivery tổ chức tạo mới các đơn hàng nhằm gửi đi yêu cầu của khách hàng về các mặt hàng có nhu cầu và mong muốn gửi đến các điểm đến xa xôi, nằm ngoài vị trí địa lý có thể gửi hàng cho người nhận của khách hàng. Khi khách hàng tạo mới một đơn hàng, ứng dụng sẽ ngay lập tức ghi nhận toàn bộ thông tin mà khách hàng đã cung cấp có liên quan đến đơn hàng. Tất cả những thông tin đó đều được bắt buộc phải cung cấp nhằm đảm bảo tính chính xác tuyệt đối với đơn hàng được khách hàng giao ký gửi, cũng như đảm bảo thông tin giao dịch giữa khách hàng (người gửi), người tiếp nhận và đơn vị thứ ba như Fast Delivery được minh bạch và công khai rõ ràng. Cụ thể, khi tạo mới một đơn hàng bất kì, khách hàng cần cung cấp các thông tin bắt buộc như sau: 9
15. 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 chú Bao gồm họ tên người gửi, SĐT 1 Thông tin người gửi và địa chỉ liên lạc. Thông tin người Bao gồm họ tên người nhận, SĐT 2 nhận và địa chỉ liên lạc. Mô tả loại/tên cụ thể của hàng hoá 3 Tên hàng hoá được gửi. Trọng lượng hàng Tổng trọng lượng của hàng hoá 4 kg hoá được gửi đi. Số lượng hàng hoá của một loại 5 Số lượng hàng hoá Chiếc hàng hoá có trong một đơn hàng. Dịch vụ chuyển hàng, gồm có: 6 Dịch vụ hàng hoá Giao hàng nhanh, Giao hàng tiết kiệm và Giao hàng hoả tốc. Ảnh chụp mô tả về hàng hoá bên 7 Ảnh chụp hàng hoá cạnh các thông tin trong mục (3) Bảng 2: Thông tin cần cung cấp khi tạo đơn 10
16. IE213.L21 – Kỹ thuật phát triển hệ thống web Dưới đây là hình ảnh về giao diện của danh mục tạo đơn hàng mới: Hình 7: Form tạo đơn Form thêm mới hàng hóa: Hình 8: Chi tiết form tạo đơn 11
17. IE213.L21 – Kỹ thuật phát triển hệ thống web Sau khi điền thông tin: Hình 9: Form tạo đơn với đầy đủ thông tin 12
18. IE213.L21 – Kỹ thuật phát triển hệ thống web 2.5 Hiển thị đơn hàng Sau khi tạo đơn thành công, thông tin các đơn gửi cũng như đơn nhận sẽ được ứng dụng lưu lại và hiển thị trong màn hình đơn hàng. Bên đơn gửi, mỗi mục sẽ hiển thị mã đơn hàng, tên, số điện thoại, địa chỉ người nhận và trạng thái hiện tại của đơn. Tương tự đối với bên đơn nhận, chỉ thay chỗ hiển thị thông tin người nhận bằng thông tin người gửi. Hình 10: Kết quả sau khi tạo đơn thành công Khi ấn vào mũi tên mỗi đơn hàng thì chi tiết của đơn hàng đó sẽ xuất hiện bên dưới. Chi tiết đơn gồm có các thông tin như sau: STT Thông tin cung cấp Ghi chú 1 Thông tin người gửi Bao gồm họ tên, số điện thoại, địa chỉ 2 Danh sách hàng hóa Tên hàng hóa, trọng lượng, số lượng 3 Hình ảnh hàng hóa Bảng 3: Thông tin về một đơn hàng 13
19. 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 có thể chỉnh sửa hoặc cập nhật những 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
20. 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 năng tra cứu bưu cục gợi ý một vài bưu cục tiêu biểu (thanh bên trái hình 2.4) và bản đồ đường đi. Hình 14: Màn hình tra cứu bưu cục Người dùng có thể nhập tên tỉnh thành muốn tra cứu vào thanh search và nhấn tìm kiếm, danh sách tên bưu cục kèm địa chỉ và số điện thoại của các bưu cục trong tỉnh thành đó sẽ được hiển thị ở thanh bên trái. Ngoài ra, người dùng có thể định vị đến vị trí hiện tại bằng cách nhấn vào icon định vị (mũi tên màu xanh chỉ đến), các bưu cục xung quanh vị trí của người dùng sẽ hiển thị trên bản đồ và từ đó người dùng có thể xem đường đi đến bưu cục. 15
21. IE213.L21 – Kỹ thuật phát triển hệ thống web 2.8 Các chức năng phía quản lý Để sử dụng những chức năng phía quản lý, người dùng cần có tài khoản được phân quyền quản lý. Hình 15: Giao diện đăng nhập admin Sau khi đăng nhập thành công, người dùng sẽ được đ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 năng quản lý đơn hàng, người quản lý có thể thể nắm bắt được tình hình các đơn hàng được tạo trên hệ thống, như các trạng thái đơn hàng. Người quản lý cũng có thể thay đổi trạng thái đơn hàng, hoặc xóa đơn hàng khỏi hệ thống. 16
22. 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
23. 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 khi chỉnh sửa Ngoài ra, khi bấm vào nút Delete, đơn hàng sẽ bị xóa khỏi hệ thống. 18
24. 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 năng quản lý khách hàng, người quản lý có thể dùng các bộ lọc để hỗ trợ tìm kiếm như 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ý có thể xóa khách hàng khỏi hệ thống bằng cách bấm vào nút xóa. 19
25. 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ý có thể quản lý thông tin thêm xóa sửa các kho hàng trong hệ thống 20
26. 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 quá trình phát triển trang web, nhóm đã nhận thấy trang web có một số ưu điểm nổi bật như: - Đáp ứng được một số tính năng cơ bản của một 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 những người lần đầu sử dụng dịch vụ. - Các quy trình được thực hiện đượ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 cả khách hàng và người quản trị. - Các tính năng tra cứu, tạo đơn hoạt động hiệu quả, bố cục rõ ràng, dễ dàng kiểm tra và tìm hiểu. 3.2 Nhược điểm Tuy nhiên, trang web vẫn tồn tại nhiều thiếu sót, có thể kể đến như: - Tốc độ tải trang còn chậm, load dữ liệu API đôi khi bị nghẽn do server backend miễn phí. - Các tính năng nâng cao chỉ dừng lại ở mức ý tưởng, chưa thể hiện thực hoá. - Tính thẩm mĩ của trang web chưa tối ưu hoá do thời gian hạn chế. - Và còn những thiếu sót nhỏ khác 3.3 So sánh với Viettel Post Fast Delivery Viettel Post 21
27. 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 hơn Cao hơn Tốc độ Chậm hơn Nhanh hơn Bảng 4: So sánh với Viettel Post 22
28. 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, do kiến thức chuyên ngành còn đôi chút hạn chế nên đồ án môn học của nhóm có đơn giản hơn so với thiết kế ban đầu. Vì vậy, trong thời gian tới, nhóm sẽ bổ sung thêm các tính năng độc đáo và nâng cao cho trang web. Các chức năng này bao gồm: - Thống kê tài chính: Ghi lại số liệu các giao dịch của khách hàng theo tuần, theo tháng, quý và năm, từ đó đánh giá mức độ hoạt động và sử dụng của khách hàng đối với trang web, đồng thời giúp khách hàng nắm bắt các khoản chi của mình. - COD (Thu hộ tiền hàng): Không chỉ đơn thuần là 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 có thể thu về giá trị tiền mặt của mặt hàng đã gửi cho người nhận theo cách nhanh chóng và an toàn tuyệt đối. - Vị trí thực của đơn hàng: Giúp khách hàng cũng như người quản trị theo dõi sát sao đơn hàng, để đưa ra các xử lý cần thiết khi cần sự giúp đỡ. - Giao hàng tận nhà: Với mong muốn đáp ứng người dân từ mọi miền đất nước, Fast Delivery đang lên kế hoạch xây dựng mô hình giao hàng tận nơi giống như các dịch vụ như Grab, BEAMIN, đã thực hiện. 23
29. IE213.L21 – Kỹ thuật phát triển hệ thống web TÀI LIỆU THAM KHẢO [1]. React tutorial, address: last access: 15/7/2021 [2]. Redux toturial, address: last access: 17/07/2021 [3]. Simon Saliba, React and Node.js: Build a Full Stack App From Development to Production in 5 Minutes, address: js-build-a-full-stack-app-from-development-to-production-in-5-minutes- a03bc019df6b, lass access: 15/07/2021 24