MÔ HÌNH PICKUP LATER CHO TOÀ NHÀ văn PHÒNG và TRƯỜNG học (đồ án SE121 l21)

ĐẠ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ài: MƠ HÌNH PICKUP LATER CHO TỒ NHÀ VĂN PHỊNG VÀ TRƯỜNG HỌC Giảng viên hướng dẫn: ThS NGUYỄN CÔNG HOAN Sinh viên thực hiện: Tăng Hồng Ân - 16520020 TP HỒ CHÍ MINH, 2021 NHẬN XÉT CỦA GIẢNG VIÊN ii LỜI CẢM ƠN Lời em xin gửi lời cảm ơn chân thành tới giảng viên hướng dẫn Đồ Án 1, thầy Nguyễn Cơng Hoan tận tình giúp đỡ em thời gian qua Vì thời gian lực cịn có hạn chế nên khơng thể tránh khỏi sai sót thực đồ án Rất mong góp ý bổ sung thầy để đề tài em ngày hoàn thiện Bên cạnh đó, em xin gửi lời cảm ơn chân thành đến tất anh chị, bạn lớp kịp thời hỗ trợ, chia sẻ tài liệu đưa nhận xét, góp ý chân thành nhằm giúp đồ án em hoàn thiện Em xin chân thành cảm ơn! TP Hồ Chí Minh, tháng năm 2021 iii MỤC LỤC LỜI CẢM ƠN iii MỤC LỤC iv 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 CÁC CÔNG NGHỆ ÁP DỤNG 3.1 Go Gin Framework 3.1.1 Go 3.1.2 Gin-gonic 3.1.3 Lý sử dụng 3.1.4 Áp dụng vào đề tài 3.2 PostgreSQL 3.2.1 PostgreSQL gì? 3.2.2 Lý sử dụng 3.2.3 Áp dụng vào đề tài 10 3.3 React 10 3.3.1 - Giới thiệu 10 3.3.2 - Khái niệm 10 3.3.3 - Virtual DOM (DOM ảo) 10 3.3.4 - JSX 11 iv 3.3.5 - One-way data binding 12 3.3.6 - Component 12 3.3.7 - Props State 12 3.3.8 - Áp dụng vào đề tài 13 3.4 MQTT 13 3.4.1 - Giới thiệu Message Queue 13 3.4.2 - Giới thiệu MQTT - Message Queuing Telemetry Transport 13 3.4.3 - Vị trí MQTT mơ hình IoT 14 3.4.4 - Tính đặc điểm bật 14 3.4.5 - Ưu điểm MQTT 15 3.4.6 - Cơ chế hoạt động 15 3.4.7 - Áp dụng vào đề tài 16 3.5 JWT 16 3.5.1 JWT gì? 16 3.5.2 Khi nên dùng JSON Web Token? 17 3.5.3 Áp dụng vào đề tài 18 Chương PHÁT BIỂU BÀI TOÁN 19 4.1 Giới thiệu ứng dụng 19 4.3.1 Yêu cầu chức 19 4.3.2 Yêu cầu phi chức 20 Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21 5.1 Sơ đồ phân rã chức 21 5.2 Mơ hình Use-case 22 5.2.1 Sơ đồ usecase 22 5.2.2 Danh sách người dùng 23 5.2.3 Danh sách use-case 23 5.3 Các sơ đồ luồng xử lý 24 5.3.1 Đăng nhập 24 5.3.2 Tìm kiếm sản phẩm 25 5.3.3 Quản lý giỏ hàng 25 5.3.4 Theo dõi đơn hàng 26 5.3.5 Quản lý sản phẩm 27 v 5.3.6 Quản lý danh mục 28 5.4 Thiết kế kiến trúc 30 5.4.1 Mơ hình kiến trúc 30 5.4.2 Mô tả 30 5.5 Thiết kế sở liệu 32 5.5.1 Sơ đồ lớp 32 5.5.2 Tổng quan sở liệu 32 5.6 Thiết kế giao diện 33 5.6.1 Trang chủ 33 5.6.2 Tìm kiếm 34 5.6.3 Danh sách sản phẩm 35 5.6.4 Chi tiết sản phẩm 36 5.6.5 Giỏ hàng 37 5.6.6 Thanh toán 38 5.6.7 Đăng nhập & tài khoản 39 5.6.8 Lịch sử mua hàng 40 5.6.9 Chi tiết đơn hàng 41 5.6.10 Danh sách đơn hàng (cửa hàng) 42 5.6.11 Chi tiết đơn hàng (cửa hàng) 43 Chương 6: KIỂM THỬ ỨNG DỤNG 44 6.1 Môi trường kiểm thử 44 6.2 Thực thi kiểm thử 44 6.2.1 Kiểm thử giao diện 44 6.2.2 Kiểm thử chức 45 Chương 7: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 47 7.1 Kết luận 47 7.2 Hướng phát triển 47 TÀI LIỆU THAM KHẢO 48 vi Chương 1: TỔNG QUAN 1.1 Đặt vấn đề Ngày với phát triển vũ bão cơng nghệ thơng tin nói chung lĩnh vực thương mại điện tử nói riêng, mức sống người phát triển ngày đại Một nhu cầu tiêu biểu mua sắm online, cụ thể nhu cầu đặt đồ ăn thức uống Mặt khác, mơ hình cho th văn phòng theo dạng cao ốc, tập trung nhiều văn phịng cơng ty tồ nhà cao tầng trở nên phổ biến, đặc biệt thành phố lớn Các tồ nhà có đặc thù nhu cầu “ăn tiệm uống tiệm” nhân viên làm việc bên cao, có một vài quán ăn bên nhà để phục vụ nhu cầu Thơng thường họ xuống tiệm ăn để xếp hàng đặt đồ ăn thức uống ăn chỗ đem Tuy nhiên, mua đồ ăn thức uống theo hình thức truyền thống có điểm bất cập tốn thời gian xếp hàng, biết tình trạng cịn hàng/hết hàng ăn Nhận thấy tiền đề thực tiễn trên, nhóm có ý tưởng định thực hệ thống cho phép người dùng lựa chọn đặt yêu thích, theo dõi đơn hàng thời gian thực; cho phép chủ cửa hàng xử lý đơn hàng nhanh chóng, thuận tiện, tạo cài đặt thực đơn ăn dễ dàng với tính độc đáo chia sẻ giỏ hàng nhiều thiết bị mà chưa hệ thống khác làm tới thời điểm Với việc sử dụng công nghệ “thời thượng” Golang, React, React Native, dịch vụ đem lại trải nghiệm tối ưu tuyệt vời cho người dùng Với ý tưởng này, nhóm tự tin sản phẩm bước tiên phong, đột phá lĩnh vực thương mại điện tử vốn sân chơi động nhiều hội đầy tính cạnh trạnh khốc liệt; phục vụ cho nhu cầu thực tiễn xã hội với nhóm khách hàng cụ thể đầy tiềm 1.2 Mục tiêu phạm vi đề tài 1.2.1 Mục tiêu - Tìm hiểu mơ hình pick up later - Tìm hiểu Golang framework Gin-gonic - Tìm hiểu ReactJS - Tìm hiểu PostgreSQL - Xây dựng ứng dụng tìm kiếm đặt ăn tảng web - Xây dựng hệ thống quản lý ăn, đơn hàng theo thời gian thực - Có khả thực chương trình khuyến mãi, giảm giá ăn - Khắc phục hạn chế như: chờ đợi đơn hàng xử lý lâu, bom hàng, chủ động thời gian để nhận đơn hàng - Cơng cụ để tìm kiếm quán ăn khu vực lân cận theo số tiêu chí đề 1.2.2 Phạm vi đề tài Sau nghiên cứu tìm hiểu sơ nhu cầu sử dụng người dùng, nhóm định phạm vi thực đề tài sau: - Phạm vi địa lý: Ứng dụng sử dụng Thành phố Hồ Chí Minh - Phạm vi chức năng: + Quản lý ăn + Quản lý đơn hàng + Tìm kiếm ăn đặt hàng (cá nhân theo nhóm) + Theo dõi tình trạng đơn hàng theo thời gian thực + Chống tình trạng bom hàng, quên nhận hàng 1.3 Đối tượng sử dụng - Các chủ cửa hàng bán thực phẩm, đồ ăn - Sinh viên, nhân viên văn phịng có nhu cầu tìm kiếm quán ăn khu vực lân cận 1.4 Phương thức thực - Xây dựng web server Golang với framework Gin-gonic - Xây dựng web client ReactJS - Database xây dựng PostgreSQL 1.5 Kết dự kiến - Hoàn thành ứng dụng tảng web, cung cấp chức cho phép khách hàng lựa chọn ăn yêu thích, theo dõi trạng thái đơn hàng đặt - Xây dựng trang quản lý tảng web, cung cấp chức cho phép chủ cửa hàng thiết lập thực đơn, quản lý sản phẩm, đơn hàng - Cơng cụ tìm kiếm qn ăn khu vực lân cậ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 ● Như đề cập chương “Tổng quan”, cao ốc tồ nhà văn phịng phổ biến với đặc thù nhu cầu ăn uống tiệm nhân viên làm việc bên cao Những nhà thường có vài quán ăn để phục vụ nhu cầu ăn uống nhân viên văn phịng Thơng thường, họ xuống tiệm ăn để xếp hàng mua đồ ăn thức uống Tuy nhiên, hình thức truyền thống có điểm bất cập tốn thời gian xếp hàng để order, khơng thể biết tình trạng cịn hàng/hết hàng ăn xảy tình trạng thời gian chết lúc đợi cửa hàng chuẩn bị ● Từ lý 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 Sơ đồ mơ hình Pickup later nhóm triển khai 2.3 - Diễn giải sơ đồ Bước 1, 3: Người dùng phát sinh nhu cầu ăn uống Lúc thay xuống cửa tiệm để chọn xếp hàng tốn, họ truy cập web app Pickup Later chọn điện thoại mình, đồng thời biết tình trạng cịn hàng/hết hàng Bước 4: Người dùng chốt (giỏ hàng) cách đặt đơn web app Có thể lựa chọn hình thức tốn nhận hàng COD Bước 5: Chủ cửa hàng nhận đơn hàng sau khách hàng đặt đơn (cập nhật danh sách đơn hàng thời gian thực) Bước 6: Cửa hàng phản hồi đơn hàng theo cách: - Xác nhận đơn: tiếp tục thực hoàn thành đơn Sau bước này, đơn hàng huỷ - Huỷ đơn: Không thực đơn báo cho khách hàng biết Cửa hàng phải nêu rõ lý huỷ đơn Bước 7: Sau xác nhận đơn hàng, cửa hàng tiến hành chuẩn bị cho đơn Bước 8: Sau đơn hàng chuẩn bị, cửa hàng đánh dấu đơn hàng sẵn sàng giao thông báo cho khách xuống lấy tin nhắn SMS gửi đến số điện thoại đăng nhập khách Bước 9: Khách hàng tới quầy tốn (nếu chọn hình thức tốn COD) nhận Đơn hàng hồn tất 2.4 - Ưu điểm mơ hình ● Tiết kiệm thời gian cơng đoạn chờ chuẩn bị Khách hàng tiếp tục cơng việc lúc chờ cửa hàng chuẩn bị đơn hàng ● Loại bỏ công đoạn xếp hàng để order cửa tiệm Khách hàng xuống cửa tiệm nhận chuẩn bị trước ● Loại bỏ tình trạng xuống tận nơi biết hết (out of stock) ● Nhiều lựa chọn thuận tiện cho khách hàng: Khách hàng dễ dàng lướt thực đơn online lựa chọn u thích cửa tiệm 5.6.2 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á 34 5.6.3 Danh sách sản phẩm Mô tả: Liệt kê tất sản phẩm thuộc danh mục 35 5.6.4 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) 36 5.6.5 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 tốn 37 5.6.6 Thanh 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) 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, khách hàng điều hướng đến trang chi tiết đơn hàng vừa đặt 38 5.6.7 Đăng nhập & 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 ● 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 39 5.6.8 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 40 5.6.9 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: ● 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 ● 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 41 5.6.10 Danh sách đơn hàng (cửa hàng) 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 ● “Đã hoà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) 42 5.6.11 Chi tiết đơn hàng (cửa hàng) 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 dấu đơn sẵn sàng giao hoàn tất) 43 Chương 6: KIỂM THỬ ỨNG DỤNG 6.1 Môi trường kiểm thử Thiết bị kiểm thử STT Tên thiết bị Hệ điều hành Màn hình Cấu hình Full HD Apple A11, RAM 3GB, (1080x1920 pixels) Storage 64GB Full HD+ Snapdragon 845, RAM (1080x2160 pixels) 4GB, Storage 128GB iPhone Plus Pixel iOS 13.5 Android 11 6.2 Thực thi kiểm thử 6.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 thị ứng dụng Màu sắc phải ý tưởng thiết kế ban đầu: Sử dụng màu trắng xám nhạt làm tông màu chủ đạo màu xanh làm màu phụ để phối màu, tạo nên tổng thể UI hài hồ màu sắc có điểm nhấn Passed Hiển thị thành phần phần tử UI Kích thước đối tượng với ý tưởng thiết kế, vị trí hợp lý, tương quan hài hồ với Khơng có tượng phần tử UI chồng lấn lên Passed Trải nghiệm người dùng (UX) tốt, phù hợp Các phần tử phải bố trí hợp lý hình phần mềm để người dùng thao tác thuận tiện Passed 44 6.2.2 Kiểm thử chức STT Yêu cầu Test Yêu cầu kết Kiểm tra chức Người dùng nhập số điện thoại Đăng nhập hợp lệ OTP tên đăng nhập Kết Passed mật xác đăng nhập vào hệ thống Kiểm thử chức - Người dùng nhập từ khoá ký tự trở xuống, trang web tìm kiếm nhanh Passed 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 Kiểm thử chức - Bấm vào nút (+) sản phẩm, số lượng sản phẩm giỏ chỉnh sửa giỏ hàng Passed 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 Kiểm thử chức - Tất thông tin đơn hàng hiển thị xác (ID, xem chi tiết đơn hàng Passed ngày tạo, thông tin người nhận, đơn hàng, thông tin toán) Kiểm thử chức - Đơn hàng mới, xử lý, hoàn thành hiển thị đầy đủ quản lý đơn hàng xác có phân trang 45 Passed - 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 Kiểm chức quản lý sản phẩm - Danh sách sản phẩm hiển Passed 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 Kiểm thử chức - Danh sách danh mục hiển thị đầy đủ, có phân trang quản lý danh mục - 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 46 Passed Chương 7: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.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 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 7.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 - Tích hợp nhiều hình thức tốn (ví điện tử, thẻ visa, mastercard, …) - Hệ thống voucher, khuyến mãi, coupon - Hệ thống tích điểm, thành viên - Tăng cường bảo mật cho hệ thống 47 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/ [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/ 48 ... 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 ... MƠ HÌNH PICK UP LATER 2.1 - Giới thiệu mơ hình Pickup Later ● Như đề cập chương “Tổng quan”, cao ốc nhà văn phòng phổ biến với đặc thù nhu cầu ăn uống tiệm nhân viên làm việc bên cao Những tồ nhà. .. 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