KHÓA LUẬN TỐT NGHIỆP MÔ HÌNH PICK UP LATER CHO TÒA NHÀ VĂN PHÒNG VÀ TRƯỜNG HỌC

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TĂNG HỒNG ÂN ĐẬU ĐỨC VIỆT ANH KHĨA LUẬN TỐT NGHIỆP MƠ HÌNH PICK UP LATER CHO TỊA NHÀ VĂN PHÒNG VÀ TRƯỜNG HỌC Pickup Later Model for Office Buildings and Schools KỸ SƯ/ CỬ NHÂN NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CƠNG NGHỆ PHẦN MỀM TĂNG HỒNG ÂN – 16520020 ĐẬU ĐỨC VIỆT ANH – 16520029 KHÓA LUẬN TỐT NGHIỆP MƠ HÌNH PICK UP LATER CHO TỊA NHÀ VĂN PHÒNG VÀ TRƯỜNG HỌC Pickup Later Model for Office Buildings and Schools KỸ SƯ/ CỬ NHÂN NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HOÀNG VĂN HÀ ThS NGUYỄN CƠNG HOAN TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin LỜI CẢM ƠN Lời đầu tiên, chúng em xin gửi lời cảm ơn đến ban giám hiệu, quý thầy cô Trường Đại Học Công Nghệ Thông Tin, đặc biệt thầy cô Khoa Cơng nghệ Phần mềm tận tình giảng dạy, trang bị cho chúng em kiến thức cần thiết năm tháng học tập trường Chúng em xin gửi lời cảm ơn đến thầy Hoàng Văn Hà, thầy Nguyễn Cơng Hoan tận tình hướng dẫn giúp đỡ suốt trình thực luận văn để chúng em hồn thành luận văn Cuối cùng, chúng em xin gửi lòng biết ơn sâu sắc đến cha mẹ, gia đình, anh chị Khoa Công nghệ Phần mềm tạo điều kiện vật chất, tinh thần, động viên, khích lệ hỗ trợ chúng em suốt thời gian qua Mặc dù cố gắng hoàn thành luận văn với tất nổ lực, luận văn chắn không tránh khỏi thiếu sót, chúng em kính mong nhận ý kiến đóng góp từ phía Hội đồng bảo vệ khóa luận nhằm hồn thiện thiếu sót để hoàn thiện đề tài Chúng em xin chân thành cảm ơn! TP Hồ Chí Minh, tháng năm 2021 Sinh viên (Ký tên ghi rõ họ tên) Tăng Hoàng Ân Sinh viên (Ký tên ghi rõ họ tên) Đậu Đức Việt Anh MỤC LỤC LỜI CẢM ƠN DANH MỤC HÌNH DANH MỤC BẢNG 10 Chương 1: TỔNG QUAN 1.1 Đặt vấn đề 1.2 Mục tiêu phạm vi đề tài 1.2.1 Mục tiêu 1.2.2 Phạm vi đề tài 1.3 Đối tượng sử dụng 1.4 Phương thức thực 1.5 Kết dự kiến Chương TÌM HIỂU VỀ MƠ HÌNH PICK UP LATER 2.1 - Giới thiệu mơ hình Pickup Later 2.2 - Sơ đồ mơ hình Pickup Later 2.3 - Diễn giải sơ đồ 2.4 - Ưu điểm mơ hình Chương TÌM HIỂU VỀ VÍ ĐIỆN TỬ 3.1 Khái niệm 3.2 Lợi ích ví điện tử 3.3 Chức ví điện tử 3.4 Ưu điểm, nhược điểm ví điện tử 3.4.1 Ưu điểm 3.4.2 Nhược điểm 3.5 Vai trị ví điện tử 3.6 Áp dụng vào đề tài 10 Chương CÁC CÔNG NGHỆ ÁP DỤNG 11 4.1 Go Gin Framework 11 4.1.1 Go 11 4.1.2 Gin-gonic 13 4.1.3 Lý sử dụng 13 4.1.4 Áp dụng vào đề tài 14 4.2 gRPC 14 4.2.1 RPC gì? 14 4.2.2 Protobuf gì? 16 4.2.3 gRPC gì? 17 4.2.4 Áp dụng vào đề tài 18 4.3 PostgreSQL 18 4.3.1 PostgreSQL gì? 18 4.3.2 Lý sử dụng 19 4.3.3 Áp dụng vào đề tài 20 4.4 React 20 4.4.1 Giới thiệu 20 4.4.2 Khái niệm 20 4.4.3 Virtual DOM (DOM ảo) 20 4.4.4 JSX 21 4.4.5 One-way data binding 21 4.4.6 Component 22 4.4.7 Props State 22 4.4.8 Áp dụng vào đề tài 23 4.5 React Native 23 4.5.1 Khái niệm 23 4.5.2 Các khái niệm liên quan cần biết 23 4.5.3 Ưu nhược điểm React Native 23 4.5.4 Áp dụng vào đề tài 24 4.6 MQTT 24 4.6.1 Giới thiệu Message Queue 24 4.6.2 Giới thiệu MQTT - Message Queuing Telemetry Transport 25 4.6.3 Vị trí MQTT mơ hình IoT 26 4.6.4 Tính đặc điểm bật 26 4.6.5 Ưu điểm MQTT 26 4.6.6 - Cơ chế hoạt động 27 4.6.7 - Áp dụng vào đề tài 28 4.7 JWT 28 4.7.1 JWT gì? 28 4.7.2 Khi nên dùng JSON Web Token? 29 4.7.2 Áp dụng vào đề tài 29 Chương PHÁT BIỂU BÀI TOÁN 30 5.1 Giới thiệu ứng dụng 30 5.2 Khảo sát ứng dụng tương tự thị trường 30 5.2.1 Ứng dụng Utop 30 5.2.2 Ứng dụng The Coffee House 31 5.3.1 Yêu cầu chức 32 5.3.2 Yêu cầu phi chức 33 Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG 34 6.1 Sơ đồ phân rã chức 34 6.2 Mơ hình Use-case 35 6.2.1 Sơ đồ usecase 35 6.2.2 Danh sách người dùng 36 6.2.3 Danh sách use-case 36 6.3 Các sơ đồ luồng xử lý 37 6.3.1 Đăng nhập 37 6.3.2 Tìm kiếm sản phẩm 38 6.3.3 Quản lý giỏ hàng 38 6.3.4 Theo dõi đơn hàng 39 6.3.5 Quản lý sản phẩm 40 6.3.6 Quản lý danh mục 41 6.3.7 Thanh toán 43 6.3.8 Quản lý thực đơn 44 6.3.9 Quản lý khách hàng 45 6.3.10 Quản lý cửa hàng 46 6.3.11 Tìm kiếm cửa hàng 47 6.3.12 Đăng xuất 48 6.4 Thiết kế kiến trúc 49 6.4.1 Mơ hình kiến trúc 49 6.4.2 Mô tả 49 6.5 Thiết kế sở liệu 50 6.5.1 Sơ đồ lớp 50 6.5.2 Tổng quan sở liệu 51 6.5.3 Mô tả chi tiết class 51 6.6 Thiết kế giao diện 56 6.6.1 Trang chủ 56 6.6.2 Tìm kiếm 57 6.6.3 Danh sách sản phẩm 58 6.6.4 Chi tiết sản phẩm 59 6.6.5 Giỏ hàng 60 6.6.6 Thanh toán 61 6.6.7 Đăng nhập & tài khoản 62 6.6.8 Lịch sử mua hàng 63 6.6.9 Chi tiết đơn hàng 64 6.6.10 Danh sách đơn hàng (cửa hàng) 65 6.6.11 Chi tiết đơn hàng (cửa hàng) 66 Chương 7: KIỂM THỬ ỨNG DỤNG 67 7.1 Môi trường kiểm thử 67 7.1.1 Thiết bị iOS 67 7.1.2 Thiết bị Android 67 7.2 Thực thi kiểm thử 67 7.2.1 Kiểm thử giao diện 67 7.2.2 Kiểm thử chức 68 Chương 8: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 70 8.1 Kết luận 70 8.2 Hướng phát triển 70 TÀI LIỆU THAM KHẢO 71 DANH MỤC HÌNH Hình 2.1: Sơ đồ mơ hình Pickup later Hình 3.1: Mơ hình ví điện tử Hình 3.2: Một số chức ví điện tử Hình 3.3: Một số ví điện tử phổ biến Hình 4.1: Giới thiệu Go Hình 4.2: Biên dịch thơng dịch Hình 4.3: Mơ hình giao tiếp client -server RPC Hình 4.4: So sánh kích thước tốc độ kiểu liệu Hình 4.5: Sơ đồ gRPC Hình 4.6: Các hệ quản trị sở liệu phổ biến Hình 4.7: Cơ chế cập nhật DOM React Hình 4.8: Data binding React Hình 4.9: Một số điểm bật React Native Hình 4.10: Các thành phần MQTT Hình 4.11: Vị trí MQTT hệ thống IoT Hình 4.12: Mơ hình publish subcribe qua broker MQTT Hình 5.1: Ứng dụng Utop Hình 5.2: Ứng dụng The Coffee House Hình 6.1: Sơ đồ usecase Hình 6.14: Mơ hình kiến trúc hệ thống Hình 6.15: Sơ đồ lớp hệ thống Hình 6.16: Màn hình trang chủ Hình 6.17: Màn hình kết tìm kiếm Hình 6.18: Màn hình danh sách sản phẩm Hình 6.19: Màn hình chi tiết sản phẩm Hình 6.20: Màn hình giỏ hàng Hình 6.21: Màn hình tốn Hình 6.22: Màn hình đăng nhập thơng tin tài khoản Hình 6.23: Màn hình lịch sử mua hàng Hình 6.24: Màn hình chi tiết đơn hàng Hình 6.25: Màn hình danh sách đơn hàng (trên ứng dụng mobile) DANH MỤC BẢNG Bảng 6.1: Danh sách người dùng Bảng 6.2: Bảng danh sách use-case Bảng 6.3: Bảng quan sở liệu Bảng 6.4: Class user Bảng 6.5: Class orders Bảng 6.6: Class order details Bảng 6.7: Class order audits Bảng 6.8: Class carts Bảng 6.9: Class cart details Bảng 6.10: Class groups Bảng 6.11: Class combos Bảng 6.12: Class products Bảng 6.13: Class stores Bảng 6.14: Class locations Bảng 7.1: Bảng kiểm thử giao diện Bảng 7.2: Bảng kiểm thử chức 6.6.2 Tìm kiếm Hình 6.17: Màn hình kết tìm kiếm Mơ tả: Đây trang tìm kiếm sản phẩm Nhập từ khố tìm kiếm vào textbox kết tìm kiếm hiển thị sau nhập từ khoá 57 6.6.3 Danh sách sản phẩm Hình 6.18: Màn hình danh sách sản phẩm Mô tả: Liệt kê tất sản phẩm thuộc danh mục 58 6.6.4 Chi tiết sản phẩm Hình 6.19: Màn hình chi tiết sản phẩm Mơ tả: Hiển thị tất thông tin sản phẩm bao gồm hình ảnh, tên giá (gốc sale) 59 6.6.5 Giỏ hàng Hình 6.20: Màn hình giỏ hàng Mơ tả: Tất sản phẩm thêm vào giỏ hàng hiển thị • Trên danh sách sản phẩm • Ngay bên nút Xoá tất Chạm vào để xoá tất sản phẩm khỏi giỏ hàng • Khu vực hình bao gồm tổng giá trị giỏ hàng nút chuyển đến trang Thanh toán 60 6.6.6 Thanh toán Hình 6.21: Màn hình tốn Mơ tả: Trang nhập thơng tin đơn hàng tốn Đây bước cuối quan trọng trước đặt đơn hàng Trang chia thành phần chính: • Thơng tin người nhận hàng: Tên số điện thoại người nhận hàng quầy; lưu ý khách hàng đơn hàng Số điện thoại số mà khách hàng dùng để đăng nhập • Tóm tắt (summary) đơn hàng: sản phẩm, tổng tạm tính, discounted price… • Chọn hình thức tốn (CoD ví MoMo) khuyến có • Khu vực hình bao gồm tổng giá trị đơn hàng nút đặt đơn Khi chạm vào nút để tiến hàng đặt hàng, có trường hợp xảy ra: • Nếu khách hàng chọn hình thức tốn quầy nhận hàng (CoD) điều hướng đến trang chi tiết đơn hàng vừa đặt 61 • Nếu khách hàng chọn hình thức tốn ví MoMo sẽ chuyển app MoMo để tiến hành toán cho đơn hàng vừa đặt 6.6.7 Đăng nhập & tài khoản Hình 6.22: Màn hình đăng nhập thơng tin tài khoản Mơ tả: • Màn hình đăng nhập: Người dùng nhập số điện thoại bấm nút Gửi mã OTP Một tin nhắn SMS chứa mã OTP gửi đến số điện thoại Sử dụng mã để xác thực với hệ thống, người dùng đăng nhập thành cơng mua hàng • Giao diện tài khoản: Khi đăng nhập, người dùng nhìn thấy giao diện Nó hiển thị hình thức sidebar, bao gồm: • Thơng tin người dùng - tên số điện thoại đăng nhập 62 • Nút đăng xuất: đăng xuất khỏi số điện thoại • Liên kết đến trang Lịch sử mua hàng 6.6.8 Lịch sử mua hàng Hình 6.23: Màn hình lịch sử mua hàng Mơ tả: Hiển thị tất đơn hàng đặt số điện thoại đăng nhập 63 6.6.9 Chi tiết đơn hàng Hình 6.24: Màn hình chi tiết đơn hàng Mơ tả: Trang nhập thông tin chi tiết đơn hàng Trang chia thành phần sau: • Thơng tin đơn hàng: Bao gồm thông tin ID đơn hàng, ngày đặt đơn, thơng tin người nhận • Trạng thái đơn hàng: cho phép khách hàng theo dõi thời gian thực tình trạng đơn hàng • Tóm tắt (summary) đơn hàng: sản phẩm, tổng tạm tính, discounted price… • Thơng tin tốn, bao gồm thơng tin: • Số tiền cần phải trả cho đơn hàng 64 • • Hình thức tốn • Tình trạng toán Nút Huỷ đơn hàng dành cho đơn hàng chưa cửa hàng xác nhận khách hàng không muốn đặt hàng 6.6.10 Danh sách đơn hàng (cửa hàng) Hình 6.25: Màn hình danh sách đơn hàng (trên ứng dụng mobile) Mô tả: Hiển thị tất đơn hàng cửa hàng có hệ thống, chia thành nhóm (ứng với tab hình): • “Mới”: hiển thị đơn tạo và đơn hệ thống vừa nhận • “Đang thực hiện”: hiển thị đơn xác nhận đơn chuẩn bị sẵn sàng giao tới tay khách hàng • “Đã hồn thành”: hiển thị đơn hoàn thành (đã giao) đơn bị huỷ (bởi cửa hàng lẫn khách hàng) 65 6.6.11 Chi tiết đơn hàng (cửa hàng) Hình 6.26: Màn hình chi tiết đơn hàng (trên ứng dụng mobile) Mơ tả: Trang nhập thông tin chi tiết đơn hàng dành cho chủ cửa hàng Trang chia thành phần sau: • Thơng tin đơn hàng: Bao gồm thông tin ID đơn hàng, ngày đặt đơn, thơng tin người nhận • Trạng thái đơn hàng: cho phép theo dõi thời gian thực tình trạng đơn hàng • Tóm tắt (summary) đơn hàng: sản phẩm giá trị đơn hàng • Thơng tin tốn, bao gồm thơng tin: • Số tiền cần phải trả cho đơn hàng • Hình thức tốn • Tình trạng tốn • Các hành động mà cửa hàng thực đơn hàng (ví dụ: xác nhận đơn, huỷ đơn, đánh giấu đơn sẵn sàng giao hoàn tất) 66 Chương 7: KIỂM THỬ ỨNG DỤNG 7.1 Môi trường kiểm thử 7.1.1 Thiết bị iOS Tên thiết bị: iPhone Plus Phiên Safari - Version 13.5 Hệ điều hành iOS 13.5 Màn hình độ phân giải Full HD (1080 x 1920 pixels) Cấu hình thiết bị: Apple A11, RAM 3GB, Storage 64GB 7.1.2 Thiết bị Android Tên thiết bị: Pixel Hệ điều hành Android 11 Màn hình độ phân giải Full HD+ (1080 x 2160 pixels) Cấu hình thiết bị: Snapdragon 845, RAM 4GB, Storage 128GB 7.2 Thực thi kiểm thử 7.2.1 Kiểm thử giao diện STT Yêu cầu Test Yêu cầu kết Kết Màu sắc hiển Màu sắc phải ý tưởng thiết kế ban đầu: Sử Passed thị ứng dụng màu trắng xám nhạt làm tông màu chủ dụng đạo màu xanh làm màu phụ để phối màu, tạo nên tổng thể UI hài hoà màu sắc có điểm nhấn Hiển thị Kích thước đối tượng với ý tưởng thiết kế, Passed thành phần vị trí hợp lý, tương quan hài hồ với Khơng phần tử UI có tượng phần tử UI chồng lấn lên Trải nghiệm Các phần tử phải bố trí hợp lý người dùng hình phần mềm để người dùng thao tác (UX) tốt, phù thuận tiện hợp Bảng 7.1: Bảng kiểm thử giao diện 67 Passed 7.2.2 Kiểm thử chức STT Yêu cầu Test Yêu cầu kết Kết Kiểm tra chức Đăng nhập Người dùng nhập số điện thoại hợp lệ OTP tên đăng nhập mật xác đăng nhập vào hệ thống Passed Kiểm thử chức đặt đơn hàng toán MoMo Người dùng tiến hành đặt đơn chuyển sang app MoMo để toán Sau tốn thành cơng, người dùng chuyển trở lại trang chi tiết đơn hàng Passed Kiểm thử chức tìm kiếm nhanh Người dùng nhập từ khố ký tự trở xuống, trang web khơng tìm kiếm Người dùng nhập từ khoá dài ký tự, kết tìm kiếm sản phẩm hiển thị sau vài giây Passed Bấm vào nút (+) sản phẩm, số lượng sản phẩm giỏ hàng tăng lên Bấm vào nút (-) sản phẩm, số lượng sản phẩm giỏ hàng giảm Passed • Tất thông tin đơn hàng hiển thị xác (ID, ngày tạo, thơng tin người nhận, đơn hàng, thơng tin tốn) Passed • Đơn hàng mới, xử lý, hoàn thành hiển thị đầy đủ xác có phân trang Thơng tin đơn hàng hiển thị đầy đủ xác, Trạng thái đơn hàng cập nhật xác Passed Kiểm thử chức chỉnh sửa giỏ hàng Kiểm thử chức xem chi tiết đơn hàng Kiểm thử chức quản lý đơn hàng • • • • • • 68 Kiểm chức quản lý sản phẩm • • • Kiểm thử chức quản lý danh mục • • • Danh sách sản phẩm hiển thị đầy đủ, có phân trang Chi tiết sản phẩm hiển thị đầy đủ xác Sau chỉnh sửa thơng tin sản phẩm, nhìn thấy thay đổi Passed Danh sách danh mục hiển thị đầy đủ, có phân trang Chi tiết danh mục hiển thị đầy đủ xác Sau chỉnh sửa thơng tin danh mục, nhìn thấy thay đổi Passed Bảng 7.2: Bảng kiểm thử chức 69 Chương 8: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 8.1 Kết luận Sau trình thực đề tài kết từ trình thực nghiệm, kiểm thử nhóm đạt số kết sau: - Tìm hiểu mơ hình Pickup Later phát triển nay, quy trình, cách thức hoạt động lợi ích mà mang lại - Tìm hiểu cổng tốn qua ví điện tử sốt nay: quy trình, mơ hình triển khai thực tế, biết cách để tích hợp tốn ví điện tử - Tìm hiểu sử dụng ngơn ngữ lập trình, library framework, hệ quản trị sở liệu để phục vụ ngành kỹ thuật phần mềm như: go, PostgreSQL, ReactJS, React Native, … - Tìm hiểu số công nghệ như: gRPC, MQTT, Elasticsearch, … - Về ứng dụng: • Nhóm thiết kế xây dựng hệ thống bán hàng từ online to offline bao gồm: client, server, mobile app, payment gateway, sở liệu • Hệ thống nhóm xây dựng có hầu hết tính ứng dụng đặt hàng online đáp ứng yêu cầu mơ hình Pickup Later • Các ứng dụng hệ thống có giao diện trực quan, dễ tiếp cận, dễ sử dụng người dùng 8.2 Hướng phát triển Qua q trình thực khóa luận, tính tới thời điểm tại, nhóm nhận thấy khóa luận cịn thiếu sót cần khắc phục phát triển tương lai như: • Hệ thống gợi ý sản phẩm • Hệ thống voucher, khuyến mãi, coupon • Hệ thống tích điểm, thành viên • Đa dạng hố hình thức tốn trực tuyến (nhiều ví điện tử hơn, quốc tế, ) • Tăng cường bảo mật cho hệ thống 70 TÀI LIỆU THAM KHẢO [1] Go: https://golang.org/ [2] GORM: https://gorm.io/index.html [3] Gin-gonic: https://github.com/gin-gonic/gin [4] gRPC: https://www.grpc.io/ [5] MQTT: https://mqtt.org/ [6] ReactJS: https://reactjs.org/ [7] React Native: https://reactnative.dev/docs/getting-started [8] Google Place API: https://console.cloud.google.com/google/maps-apis/overview [9] PostgreSQL: https://www.postgresql.org/ [10] Elasticsearch: https://www.elastic.co/ [11] Redux: https://redux.js.org/ [12] Momo documents: https://developers.momo.vn/#/ 71 ... trên, mơ hình Pickup Later đời với việc cho phép khách hàng đặt hàng từ xa web / mobile app tới quầy nhận sau cửa tiệm chuẩn bị 2.2 - Sơ đồ mơ hình Pickup Later Hình 2.1: Sơ đồ mơ hình Pickup later1 ... TÌM HIỂU VỀ MƠ HÌNH PICK UP LATER 2.1 - Giới thiệu mơ hình Pickup Later 2.2 - Sơ đồ mơ hình Pickup Later 2.3 - Diễn giải sơ đồ 2.4 - Ưu điểm mơ hình ...ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TĂNG HOÀNG ÂN – 16520020 ĐẬU ĐỨC VIỆT ANH – 16520029 KHĨA LUẬN TỐT NGHIỆP MƠ HÌNH PICK UP LATER CHO TÒA