Đồ án xây dựng ứng dụng quản lý quầy thuố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 ĐỒ ÁN XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUẦY THUỐC Giảng viên hướng dẫn : TS Đỗ Thị Thanh Tuyền Sinh viên thực : Hoàng Văn Phúc Mã sinh viên : 20521760 Sinh viên thực : Trần Minh Quang Mã sinh viên : 20521812 TP HỒ CHÍ MINH, 2023 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… Ngày… tháng… năm 2023 Người nhận xét Đỗ Thị Thanh Tuyền LỜI CẢM ƠN Công nghệ thông tin (CNTT) ngày lĩnh vực đa dạng phát triển nhanh chóng Các cơng nghệ trí tuệ nhân tạo (AI), học sâu (deep learning), Internet of Things (IoT), blockchain công nghệ khác tạo hội lớn cho doanh nghiệp cá nhân để sử dụng phát triển ứng dụng tăng cường suất Trong lĩnh vực phần mềm, việc sử dụng phương pháp phát triển phần mềm Agile DevOps giúp tăng cường tốc độ hiệu trình phát triển phần mềm CNTT thúc đẩy phát triển mạnh mẽ lĩnh vực khác y tế, giáo dục, kinh doanh giải trí Các ứng dụng ngành CNTT giúp cải thiện chất lượng sống tạo hội cho người Và đó, ứng dụng ngành CNTT lĩnh vực quản lý ứng dụng vô quan trọng Nó khơng giải phóng cơng sức cho người quản lý mà cịn đem lại xác nhanh nhạy việc quản lý Là sinh viên khoa Cơng Nghệ Phần Mềm, đồ án này, nhóm chúng em chọn thực đồ án “XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUẦY THUỐC” Nhóm em xin gửi lời cảm ơn chân thành đến cô Đỗ Thị Thanh Tuyền tận tình giảng dạy, hướng dẫn chúng em suốt thời gian học tập, nghiên cứu thực đồ án vừa qua Do kiến thức thời gian thực hạn chế, đồ án nhóm chúng em cịn nhiều thiếu sót Nhóm chúng em mong nhận góp ý Cơ bạn để đồ án nhóm hồn thiện TP.HCM, ngày 20, tháng 07 năm 2023 Nhóm sinh viên thực Hoàng Văn Phúc – Trần Minh Quang MỤC LỤC CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1.Đặt vấn đề 1.2.Giải Pháp 1.3.Mục tiêu đề tài 1.4.Đối tượng sử dụng 1.5.Công cụ sử dụng 1.6.Phạm vi nghiên cứu 1.7.Tổng quan đồ án CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1.Thiết kế giao diện Figma [1] 2.1.1.Khái niệm 2.1.2.Lịch sử hình thành 2.1.3.Ưu diểm 2.2.Ngơn ngữ lập trình JavaScript [2] 2.2.1.Khái niệm 2.2.2.Lịch sử phát triển 10 2.2.3.JavaScript Framework gì? 10 2.2.4.Ưu nhược điểm Javascript 11 2.3.ReactJS [3] 12 2.3.1.Khái niệm 12 2.3.2.Những thành phần ReactJS 13 2.3.3.Lợi ích sử dụng ReactJS 14 2.3.4.Tại JavaScript Developer sử dụng ReactJS? 15 2.4.NodeJS [4] 16 2.4.1.Khái niệm 16 2.4.2.Ý nghĩa đằng sau tên gọi Node.JS 16 2.4.3.Ưu nhược điểm Node.JS 16 2.4.4.Những ứng dụng nên viết Node.JS 17 2.4.5.Một số lý nên sử dụng NodeJS gì? 18 2.5.Trình soạn thảo code Visual Studio Code [5] 19 2.5.1.Khái niệm 19 2.5.2.Những ưu điểm bật Visual Studio Code 20 2.5.3.Tại nên sử dụng Visual Studio Code? 20 2.6.Github [6] 21 2.6.1.Khái niệm 21 2.6.2.Những tính bật GitHub gì? 22 2.6.3.Các loại tài khoản Github 23 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 24 3.1.Sơ đồ Use Case 24 3.2.Danh sách Use Case 25 3.3.Đặc tả Use case 27 3.3.1.Đăng nhập 27 3.3.2.Đăng xuất 28 3.3.3.Quản lý kho 28 3.3.4.Quản lý thuốc 31 3.3.5.Quản lý sản phẩm khác thuốc 33 3.3.6.Quản lý liều thuốc 35 3.3.7.Quản lý danh mục 36 3.3.8.Quản lý hóa đơn 38 3.3.9.Quản lý thông tin cá nhân 39 3.3.10.Quản lý tài khoản 40 3.3.11.Xem thống kê 42 3.4.Kiến trúc hệ thống 43 3.5.Xây dựng Tier Fontend 44 3.5.1.Hướng component 44 3.5.2.Quản lý global state với Redux 45 3.5.3.Mơ hình giao thức mạng 46 3.5.4.Thiết kế API theo tiêu chuẩn RESTful API 49 3.6.Xây dựng Tier Backend 50 3.6.1.Mơ hình Layer 50 3.6.2.Framework ExpressJS 51 3.7.Thiết kế liệu 52 3.7.1.Sơ đồ Logic 52 3.7.2.Mô tả chi tiết kiểu liệu 53 CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG 63 4.1.Danh sách hình 63 4.2.Mơ tả hình 65 4.2.1.Màn hình Đăng nhập 65 4.2.2.Màn hình Nhập kho 66 4.2.3.Màn hình Lịch sử nhập kho 67 4.2.4.Màn hình Chi tiết đơn nhập kho 68 4.2.5.Màn hình Kiểm kho 69 4.2.6.Màn hình Danh sách thuốc 70 4.2.7.Màn hình Chi tiết thuốc 71 4.2.8.Màn hình Thêm thuốc 72 4.2.9.Màn hình Danh sách sản phẩm khác thuốc (SPKT) 73 4.2.10.Màn hình Chi tiết SPKT 74 4.2.11.Màn hình Thêm SPKT 75 4.2.12.Màn hình Danh sách liều tạo liều 76 4.2.13.Màn hình Sửa liều 77 4.2.14.Màn hình Xóa liều 78 4.2.15.Màn hình Danh mục 79 4.2.16.Màn hình Tạo danh mục 80 4.2.17.Màn hình Xóa sửa danh mục 81 4.2.18.Màn hình Tài khoản khách hàng 82 4.2.19.Màn hình Tài khoản nhân viên 83 4.2.20.Màn hình Danh sách hóa đơn 84 4.2.21.Màn hình Chi tiết hóa đơn 85 4.2.22.Màn hình Kê đơn tạo hóa đơn 86 4.2.23.Màn hình Thêm thuốc sản phẩm tạo hóa đơn 87 4.2.24.Màn hình Xem trước hóa đơn 88 4.2.25.Màn hình Thơng tin cá nhân 89 4.2.26.Màn hình Thống kê 90 KẾT LUẬN 91 Kết đạt 91 Hạn chế 91 Hướng phát triển 91 TÀI LIỆU THAM KHẢO 92 DANH MỤC HÌNH ẢNH Hình Figma Hình 2 JavaScript Hình ReactJS 12 Hình NodeJS 16 Hình Visual Studio Code 19 Hình Github 21 Hình Sơ đồ Use Case 24 Hình Mơ hình kiến trúc hệ thống 43 Hình 3 Ảnh minh họa component thiết kế 44 Hình Mô áp dụng Redux React 45 Hình Mơ hình Client-Server 46 Hình Minh họa chức hoạt động giao thức http 47 Hình Minh họa RESTful API 49 Hình Minh họa chức Layer 50 Hình Sơ đồ sở liệu 52 Hình Màn hình Đăng nhập 65 Hình Màn hình Nhập kho 66 Hình Màn hình Lịch sử nhập kho 67 Hình 4 Màn hình Chi tiết đơn nhập kho 68 Hình Màn hình Kiểm kho 69 Hình Màn hình Danh sách thuốc 70 Hình Màn hình Chi tiết thuốc 71 Hình Màn hình Thêm thuốc 72 Hình Màn hình Danh sách sản phẩm khác thuốc 73 Hình 10 Màn hình Chi tiết SPKT 74 Hình 11 Màn hình Thêm SPKT 75 Hình 12 Màn hình Danh sách liều tạo liều 76 Hình 13 Màn hình Sửa liều 77 Hình 14 Màn hình Xóa liều 78 Hình 15 Màn hình Danh mục 79 Hình 16 Màn hình Tạo danh mục 80 Hình 17 Màn hình Xóa sửa danh mục 81 Hình 18 Màn hình Tài khoản khách hàng 82 Hình 19 Màn hình Tài khoản nhân viên 83 Hình 20 Màn hình Danh sách hóa đơn 84 Hình 21 Màn hình Chi tiết hóa đơn 85 Hình 22 Màn hình Kê đơn tạo hóa đơn 86 Hình 23 Màn hình Thêm thuốc sản phẩm 87 Hình 24 Màn hình Xem trước hóa đơn 88 Hình 25 Màn hình Thơng tin cá nhân 89 Hình 26 Màn hình Thống kê 90 4.2.14 Màn hình Xóa liều 4.2.14.1 Giao diện Hình 14 Màn hình Xóa liều 4.2.14.2 Mô tả cách sử dụng xử lý Bảng 15 Mơ tả cách sử dụng hình Xóa liều Biến cố Xử lý Bấm chọn “Đóng” Hủy phần xóa liều Bấm chọn “Xóa” Xóa liều thuốc hệ thống STT 78 4.2.15 Màn hình Danh mục 4.2.15.1 Giao diện Hình 15 Màn hình Danh mục 4.2.15.2 Mô tả cách sử dụng xử lý Bảng 16 Mô tả cách sử dụng hình Danh mục Biến cố Xử lý Bấm chọn “Chỉnh sửa” Hiện trang sửa xóa danh mục Bấm chọn “Thêm danh mục” Hiện trang thêm danh mục STT 79 4.2.16 Màn hình Tạo danh mục 4.2.16.1 Giao diện Hình 16 Màn hình Tạo danh mục 4.2.16.2 Mô tả cách sử dụng xử lý Bảng 17 Mơ tả cách sử dụng hình Tạo danh mục Biến cố Xử lý Thông tin cần thiết (Tên danh mục, Ghi chú…) Nhập thông tin cần thiết danh mục Bấm chọn “Hủy” Hủy phần tạo danh mục Bấm chọn “Tạo danh mục” Thêm danh mục vào hệ thống STT 80 4.2.17 Màn hình Xóa sửa danh mục 4.2.17.1 Giao diện Hình 17 Màn hình Xóa sửa danh mục 4.2.17.2 Mô tả cách sử dụng xử lý Bảng 18 Mơ tả cách sử dụng hình Xóa sửa danh mục Biến cố Xử lý Thông tin cần thiết (Tên danh mục, Ghi chú…) Sửa thơng tin danh mục Bấm chọn “Xóa” Xóa danh mục hệ thống Bấm chọn “Lưu” Lưu thay đổi thông tin danh mục hệ thống STT 81 4.2.18 Màn hình Tài khoản khách hàng 4.2.18.1 Giao diện Hình 18 Màn hình Tài khoản khách hàng 4.2.18.2 Mô tả cách sử dụng xử lý Bảng 19 Mơ tả cách sử dụng hình Tài khoản khách hàng Biến cố Xử lý Thông tin cần thiết (Tên, Tuổi…) Sửa thông tin khách hàng Bấm chọn “Xóa tài khoản” Xóa tài khoản khách hàng hệ thống Bấm chọn “Lưu” Lưu thay đổi thông tin khách hàng hệ thống Bấm chọn “Thêm tài khoản” Hiện trang thêm tài khoản STT 82 4.2.19 Màn hình Tài khoản nhân viên 4.2.19.1 Giao diện Hình 19 Màn hình Tài khoản nhân viên 4.2.19.2 Mô tả cách sử dụng xử lý Bảng 20 Mô tả cách sử dụng hình Tài khoản nhân viên Biến cố Xử lý Thông tin cần thiết (Tên, Tuổi…) Sửa thông tin khách hàng Bấm chọn “Thêm tài khoản” Hiện trang thêm tài khoản STT 83 4.2.20 Màn hình Danh sách hóa đơn 4.2.20.1 Giao diện Hình 20 Màn hình Danh sách hóa đơn 4.2.20.2 Mơ tả cách sử dụng xử lý Bảng 21 Mô tả cách sử dụng hình Danh sách hóa đơn Biến cố Xử lý Mã nhân viên, Mã khách hàng, Từ ngày, Đến ngày Nhập trường để lọc hóa đơn Bấm chọn “Hủy lọc” Ẩn lọc Bấm chọn “Tìm kiếm” Lọc hóa đơn theo lọc Bấm chọn “Chi tiết” Hiện trang chi tiết hóa đơn STT 84 4.2.21 Màn hình Chi tiết hóa đơn 4.2.21.1 Giao diện Hình 21 Màn hình Chi tiết hóa đơn 4.2.21.2 Mơ tả cách sử dụng xử lý Bảng 22 Mơ tả cách sử dụng hình Chi tiết hóa đơn STT Biến cố Xử lý Bấm chọn nút quay lại Quay lại trang danh sách hóa đơn 85 4.2.22 Màn hình Kê đơn tạo hóa đơn 4.2.22.1 Giao diện Hình 22 Màn hình Kê đơn tạo hóa đơn 4.2.22.2 Mơ tả cách sử dụng xử lý Bảng 23 Mô tả cách sử dụng hình Kê đơn tạo hóa đơn Biến cố Xử lý Nhập tên thuốc vào tìm kiếm trang kê đơn bấm chọn Thêm thuốc vào liều thuốc Thông tin cần thiết liều (Tên liều thuốc, Ghi chú…) Nhập đầy đủ thông tin cần thiết liều Bấm chọn “Làm rỗng” Làm trống danh sách thuốc trang kê đơn Bấm chọn “Thêm” Thêm liều thuốc vào hóa đơn Bấm chọn “Loại bỏ” Hủy sản phẩm, đơn thuốc trang tạo hóa đơn Bấm chọn “Xem trước” Hiện trang xem trước hóa đơn Bấm chọn “Thanh tốn in” Thêm hóa đơn vào hệ thống in hóa đơn STT 86 4.2.23 Màn hình Thêm thuốc sản phẩm tạo hóa đơn 4.2.23.1 Giao diện Hình 23 Màn hình Thêm thuốc sản phẩm 4.2.23.2 Mô tả cách sử dụng xử lý Bảng 24 Mơ tả cách sử dụng hình Thêm thuốc sản phẩm Biến cố Xử lý Nhập tên sản phẩm vào tìm kiếm chọn Thêm sản phẩm vào hóa đơn Bấm chọn “Loại bỏ” Hủy sản phẩm, đơn thuốc trang tạo hóa đơn Bấm chọn “Xem trước” Hiện trang xem trước hóa đơn Bấm chọn “Thanh tốn in” Thêm hóa đơn vào hệ thống in hóa đơn STT 87 4.2.24 Màn hình Xem trước hóa đơn 4.2.24.1 Giao diện Hình 24 Màn hình Xem trước hóa đơn 4.2.24.2 Mơ tả cách sử dụng xử lý Bảng 25 Mô tả cách sử dụng hình Xem trước hóa đơn STT Biến cố Xử lý Bấm chọn nút X Quay lại trang trước 88 4.2.25 Màn hình Thơng tin cá nhân 4.2.25.1 Giao diện Hình 25 Màn hình Thơng tin cá nhân 4.2.25.2 Mô tả cách sử dụng xử lý Bảng 26 Mơ tả cách sử dụng hình Thơng tin cá nhân Biến cố Xử lý Thông tin tài khoản (Tên, Tên đầy đủ…) Sửa thông tin tài khoản Bấm chọn “Lưu” Lưu thay đổi thông tin tài khoản hệ thống STT 89 4.2.26 Màn hình Thống kê 4.2.26.1 Giao diện Hình 26 Màn hình Thống kê 90 KẾT LUẬN Kết đạt • Hiểu nắm kiến thức phát triển Web • Hiểu biết thêm thiết kế giao diện người dùng tảng Figma, thiết kế liệu đặc tả Use Case draw.io, StarUML • Hiểu nắm cách xây dựng website Visual Studio Code • Hiểu học cách quản lý sửa đổi lịch sử project Github • Nắm rõ HTML, CSS, JavaScript framework ReactJS để thiết kế giao diện website phát triển phía Front-end • Nắm rõ NodeJS để phát triển phía Back-end Hạn chế • Hỗ trợ Chatbot: Vì việc trao đổi thơng tin từ xa người người quan Nó giúp cho người dùng giải đáp thắc mắc, hỗ trợ tích cực công việc nhân viên, người quản lý • Khả mở rộng quy mô quầy thuốc: Hiện nay, có nhiều chi nhánh nhà thuốc xây dựng nhiều nơi nên việc quản lý tài khoản nhân viên, khách hàng tương ứng nhà thuốc điều cần thiết • Tính tích điểm, mã giảm giá: Với khách hàng thân thiết ghé mua thuốc nhiều lần, việc tích điểm thưởng cung cấp mã giảm giá để hỗ trợ cho khách hàng có khả tốn Hướng phát triển • Bổ sung tính năng: Bổ sung tính chưa hồn thiện chatbot trao đổi thơng tin, tích điểm giảm giá cho khách hàng, quản lý nhiều nhà thuốc, liên kết nhà thuốc lại với • Xây dựng ứng dụng di động: Xây dựng phiên ứng dụng di động với người dùng khách hàng để thực giao dịch, đáp ứng nhu cầu khách hàng thiết bị di động nhắc nhở uống thuốc, giao thuốc tận nhà, thông báo bệnh dịch tiềm ẩn theo mùa, tra cứu thông tin thuốc… 91 TÀI LIỆU THAM KHẢO [1] N T H Trang, "Figma gì? Cơng cụ thiết kế giao diện có ưu điểm gì?," 27 2023 [Online] Available: https://www.thegioididong.com/game-app/figma-lagi-cong-cu-thiet-ke-giao-dien-co-uu-diem-gi-1421999 [Accessed 2023] [2] "JavaScript gì? Kiến thức JavaScript cho người bắt đầu 2022," 30 2022 [Online] Available: https://tenten.vn/tin-tuc/javascript-la-gi/ [Accessed 2023] [3] "ReactJS gì? Những điều bạn chưa biết ReactJS," [Online] Available: https://aptech.fpt.edu.vn/reactjs-la-gi.html [Accessed 2023] [4] N Hưng, "NodeJS gì? Tổng quan kiến thức Node.JS," 2023 [Online] Available: https://vietnix.vn/nodejs-la-gi/ [Accessed 2023] [5] L N H Qn, "Visual Studio Code gì? Các tính bật Visual Studio Code," 31 2022 [Online] Available: https://fptshop.com.vn/tintuc/danh-gia/visual-studio-code-la-gi-cac-tinh-nang-noi-bat-cua-visual-studiocode-146213 [Accessed 2023] [6] L Chi, "Github gì? Vì ngày nhiều lập trình viên sử dụng?," 10 12 2022 [Online] Available: https://fptshop.com.vn/tin-tuc/thu-thuat/github-la-gi151982 [Accessed 2023] 92