Đồ á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 1

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 hiện 1

:

Hoàng Văn Phúc

Mã sinh viên 1

:

20521760

Sinh viên thực hiện 2

:

Trần Minh Quang

Mã sinh viên 2

:

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 nay là một lĩnh vực rất đa dạng và phát
triển rất nhanh chóng. Các cơng nghệ mới như trí tuệ nhân tạo (AI), học sâu (deep
learning), Internet of Things (IoT), blockchain và các công nghệ khác đã tạo ra những
cơ hội lớn cho các doanh nghiệp và cá nhân để sử dụng và phát triển các ứng dụng
mới và tăng cường năng suất.
Trong lĩnh vực phần mềm, việc sử dụng các phương pháp phát triển phần mềm
như Agile và DevOps đã giúp tăng cường tốc độ và hiệu quả của quá trình phát triển
phần mềm. CNTT cũng đang thúc đẩy sự phát triển mạnh mẽ của các lĩnh vực khác
như y tế, giáo dục, kinh doanh và giải trí. Các ứng dụng của ngành CNTT đã giúp cải
thiện chất lượng cuộc sống và tạo ra những cơ hội mới cho con người.
Và trong đó, những ứng dụng của ngành CNTT trong lĩnh vực quản lý là những
ứng dụng vô cùng quan trọng. Nó khơng những giải phóng cơng sức cho những người
quản lý mà cịn đem lại sự chính xác và nhanh nhạy trong việc quản lý. Là sinh viên
khoa Công Nghệ Phần Mềm, trong đồ án 1 này, nhóm chúng em đã chọn và thực hiện
đồ á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 trong suốt thời gian học tập, nghiên cứu và thực
hiện đồ án vừa qua. Do kiến thức và thời gian thực hiện hạn chế, đồ án của nhóm
chúng em vẫn cịn nhiều thiếu sót. Nhóm chúng em rất mong nhận được sự góp ý của
Cơ và các bạn để đồ án của nhóm được hồn thiện.

TP.HCM, ngày 20, tháng 07 năm 2023
Nhóm sinh viên thực hiện
Hoàng Văn Phúc – Trần Minh Quang


MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI ..................................................................... 2
1.1.Đặt vấn đề ..................................................................................................... 2
1.2.Giải Pháp....................................................................................................... 2
1.3.Mục tiêu đề tài .............................................................................................. 2
1.4.Đối tượng sử dụng ........................................................................................ 3
1.5.Công cụ sử dụng ........................................................................................... 3
1.6.Phạm vi nghiên cứu....................................................................................... 4
1.7.Tổng quan về đồ án ...................................................................................... 5
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT ....................................................................... 7
2.1.Thiết kế giao diện Figma [1] ........................................................................ 7
2.1.1.Khái niệm .............................................................................................. 7
2.1.2.Lịch sử hình thành ................................................................................. 7
2.1.3.Ưu diểm ................................................................................................. 8
2.2.Ngơn ngữ lập trình JavaScript [2] ................................................................ 8
2.2.1.Khái niệm .............................................................................................. 9
2.2.2.Lịch sử phát triển ................................................................................. 10
2.2.3.JavaScript Framework là gì? ............................................................... 10
2.2.4.Ưu và nhược điểm của Javascript........................................................ 11
2.3.ReactJS [3].................................................................................................. 12
2.3.1.Khái niệm ............................................................................................ 12
2.3.2.Những thành phần chính của ReactJS ................................................. 13
2.3.3.Lợi ích khi sử dụng ReactJS ................................................................ 14


2.3.4.Tại sao 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 và nhược điểm của Node.JS .......................................................... 16
2.4.4.Những ứng dụng nên viết bằng Node.JS ............................................. 17

2.4.5.Một số lý do nên sử dụng NodeJS là 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 nổi bật của Visual Studio Code ................................. 20
2.5.3.Tại sao 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 năng nổi bật của GitHub là gì? ......................................... 22
2.6.3.Các loại tài khoản trê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 và 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 3 Layer .................................................................................. 50
3.6.2.Framework ExpressJS ......................................................................... 51
3.7.Thiết kế dữ liệu ........................................................................................... 52
3.7.1.Sơ đồ Logic .......................................................................................... 52
3.7.2.Mô tả chi tiết các kiểu dữ liệu .............................................................. 53
CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG ............................................................ 63
4.1.Danh sách các màn hình.............................................................................. 63
4.2.Mơ tả màn 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 và 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 và 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 khi tạo hóa đơn ..................................................... 86
4.2.23.Màn hình Thêm thuốc và sản phẩm khi 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 quả đạt được ............................................................................................... 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 2. 1. Figma .......................................................................................................... 7
Hình 2. 2. JavaScript ................................................................................................... 9
Hình 2. 3. ReactJS ..................................................................................................... 12
Hình 2. 4. NodeJS ..................................................................................................... 16
Hình 2. 5. Visual Studio Code .................................................................................. 19
Hình 2. 6. Github ....................................................................................................... 21
Hình 3. 1. Sơ đồ Use Case ........................................................................................ 24
Hình 3. 2. Mơ hình kiến trúc hệ thống ...................................................................... 43
Hình 3. 3. Ảnh minh họa component trong thiết kế .................................................. 44
Hình 3. 4. Mơ phỏng áp dụng Redux trong React .................................................... 45
Hình 3. 5. Mơ hình Client-Server.............................................................................. 46

Hình 3. 6. Minh họa chức năng hoạt động của giao thức http .................................. 47
Hình 3. 7. Minh họa về RESTful API ....................................................................... 49
Hình 3. 8. Minh họa chức năng 3 Layer ................................................................... 50
Hình 3. 9. Sơ đồ cơ sở dữ liệu ................................................................................... 52
Hình 4. 1. Màn hình Đăng nhập ................................................................................ 65
Hình 4. 2. Màn hình Nhập kho .................................................................................. 66
Hình 4. 3. Màn hình Lịch sử nhập kho ..................................................................... 67
Hình 4. 4. Màn hình Chi tiết đơn nhập kho .............................................................. 68
Hình 4. 5. Màn hình Kiểm kho ................................................................................. 69
Hình 4. 6. Màn hình Danh sách thuốc ....................................................................... 70
Hình 4. 7. Màn hình Chi tiết thuốc ........................................................................... 71
Hình 4. 8. Màn hình Thêm thuốc .............................................................................. 72
Hình 4. 9. Màn hình Danh sách sản phẩm khác thuốc .............................................. 73
Hình 4. 10. Màn hình Chi tiết SPKT ......................................................................... 74
Hình 4. 11. Màn hình Thêm SPKT ........................................................................... 75
Hình 4. 12. Màn hình Danh sách liều và tạo liều ...................................................... 76
Hình 4. 13. Màn hình Sửa liều .................................................................................. 77


Hình 4. 14. Màn hình Xóa liều .................................................................................. 78
Hình 4. 15. Màn hình Danh mục ............................................................................... 79
Hình 4. 16. Màn hình Tạo danh mục ........................................................................ 80
Hình 4. 17. Màn hình Xóa và sửa danh mục ............................................................. 81
Hình 4. 18. Màn hình Tài khoản khách hàng ............................................................ 82
Hình 4. 19. Màn hình Tài khoản nhân viên .............................................................. 83
Hình 4. 20. Màn hình Danh sách hóa đơn ................................................................. 84
Hình 4. 21. Màn hình Chi tiết hóa đơn ..................................................................... 85
Hình 4. 22. Màn hình Kê đơn khi tạo hóa đơn.......................................................... 86
Hình 4. 23. Màn hình Thêm thuốc và sản phẩm ....................................................... 87
Hình 4. 24. Màn hình Xem trước hóa đơn ................................................................ 88

Hình 4. 25. Màn hình Thơng tin cá nhân .................................................................. 89
Hình 4. 26. Màn hình Thống kê ................................................................................ 90


DANH MỤC BẢNG
Bảng 3. 1. Danh sách Use Case................................................................................. 25
Bảng 3. 2. Use Case Đăng nhập ................................................................................ 27
Bảng 3. 3. Use Case Đăng xuất ................................................................................. 28
Bảng 3. 4. Use Case Quản lý kho.............................................................................. 28
Bảng 3. 5. Use Case Quản lý thuốc ........................................................................... 31
Bảng 3. 6. Use Case Quản lý sản phẩm khác thuốc .................................................. 33
Bảng 3. 7. Use Case Quản lý liều thuốc .................................................................... 35
Bảng 3. 8. Use Case Quản lý danh mục .................................................................... 36
Bảng 3. 9. Use Case Quản lý hóa đơn ....................................................................... 38
Bảng 3. 10. Use Case Quản lý thông tin cá nhân ...................................................... 39
Bảng 3. 11. Use Case Quản lý tài khoản ................................................................... 40
Bảng 3. 12. Use Case Xem thống kê ......................................................................... 42
Bảng 3. 13. Bảng thuộc tính của Quyền hạn ............................................................. 53
Bảng 3. 14. Bảng thuộc tính của Tài khoản .............................................................. 53
Bảng 3. 15. Bảng thuộc tính của Đơn nhập kho ....................................................... 54
Bảng 3. 16. Bảng thuộc tính của Danh mục .............................................................. 55
Bảng 3. 17. Bảng thuộc tính của Đơn vị thuốc ......................................................... 55
Bảng 3. 18. Bảng thuộc tính của Thuốc .................................................................... 56
Bảng 3. 19. Bảng thuộc tính của Sản phẩm khác thuốc ............................................ 57
Bảng 3. 20. Bảng thuộc tính của Chi tiết đơn nhập thuốc ........................................ 58
Bảng 3. 21. Bảng thuộc tính của Chi tiết đơn nhập SPKT........................................ 58
Bảng 3. 22. Bảng thuộc tính của Hóa đơn ................................................................ 59
Bảng 3. 23. Bảng thuộc tính của Chi tiết đơn thuốc của hóa đơn ............................. 60
Bảng 3. 24. Bảng thuộc tính của Đơn thuốc ............................................................. 60
Bảng 3. 25. Bảng thuộc tính của Hướng dẫn dùng thuốc ......................................... 61

Bảng 3. 26. Bảng thuộc tính của Chi tiết SPKT của hóa đơn ................................... 61
Bảng 3. 27. Bảng thuộc tính của Chi tiết thuốc của hóa đơn .................................... 62
Bảng 3. 28. Bảng thuộc tính của Khách hàng vãng lai ............................................. 62


Bảng 4. 1. Bảng danh sách màn hình ........................................................................ 63
Bảng 4. 2. Mơ tả cách sử dụng màn hình Đăng nhập ............................................... 65
Bảng 4. 3. Mô tả cách sử dụng màn hình Nhập kho ................................................. 66
Bảng 4. 4. Mơ tả cách sử dụng màn hình Lịch sử nhập kho ..................................... 67
Bảng 4. 5. Mơ tả cách sử dụng màn hình Chi tiết đơn nhập kho .............................. 68
Bảng 4. 6. Mô tả cách sử dụng màn hình Kiểm kho ................................................. 69
Bảng 4. 7. Mơ tả cách sử dụng màn hình Danh sách thuốc ...................................... 70
Bảng 4. 8. Mô tả cách sử dụng màn hình Chi tiết thuốc ........................................... 71
Bảng 4. 9. Mơ tả cách sử dụng màn hình Thêm thuốc ............................................. 72
Bảng 4. 10. Mơ tả cách sử dụng màn hình Danh sách sản phẩm khác thuốc ........... 73
Bảng 4. 11. Mơ tả cách sử dụng màn hình Chi tiết SPKT ........................................ 74
Bảng 4. 12. Mô tả cách sử dụng màn hình Thêm SPKT........................................... 75
Bảng 4. 13. Mơ tả cách sử dụng màn hình Danh sách liều và tạo liều ..................... 76
Bảng 4. 14. Mơ tả cách sử dụng màn hình Sửa liều.................................................. 77
Bảng 4. 15. Mô tả cách sử dụng màn hình Xóa liều ................................................. 78
Bảng 4. 16. Mơ tả cách sử dụng màn hình Danh mục .............................................. 79
Bảng 4. 17. Mơ tả cách sử dụng màn hình Tạo danh mục ........................................ 80
Bảng 4. 18. Mô tả cách sử dụng màn hình Xóa và sửa danh mục ............................ 81
Bảng 4. 19. Mơ tả cách sử dụng màn hình Tài khoản khách hàng ........................... 82
Bảng 4. 20. Mô tả cách sử dụng màn hình Tài khoản nhân viên .............................. 83
Bảng 4. 21. Mơ tả cách sử dụng màn hình Danh sách hóa đơn ................................ 84
Bảng 4. 22. Mơ tả cách sử dụng màn hình Chi tiết hóa đơn ..................................... 85
Bảng 4. 23. Mơ tả cách sử dụng màn hình Kê đơn khi tạo hóa đơn ......................... 86
Bảng 4. 24. Mơ tả cách sử dụng màn hình Thêm thuốc và sản phẩm ...................... 87
Bảng 4. 25. Mô tả cách sử dụng màn hình Xem trước hóa đơn ............................... 88

Bảng 4. 26. Mơ tả cách sử dụng màn hình Thơng tin cá nhân .................................. 89


TÓM TẮT ĐỒ ÁN
“MediServe” là một website quản lý quầy thuốc, được xây dựng nên nhằm hỗ
trợ hiệu quả quản lý các loại thuốc, các sản phẩm khác thuốc. Với giao diện ưa nhìn
và dễ sử dụng, “MediServe” cung cấp các tính năng xem chi tiết sản phẩm, thêm sản
phẩm và phân loại giúp cho việc quản lý hàng hóa trở nên dễ dàng hơn.
Website này giúp cho người dùng quản lý được kho hàng gồm nhập hàng, lịch
sử nhập và kiểm kho. Ứng dụng cung cấp giao diện hỗ trợ nhanh chóng cho tính năng
nhập các mặt hàng mới về. Người chủ quầy thuốc có thể xem được lịch sử nhập hàng
của nhân viên và kiểm kho sau khi nhập.
Hơn nữa, “MediServe” cung cấp tính năng quản lý liều thuốc và quản lý danh
mục tạo điều kiện thuận lợi cho việc bán thuốc, kê đơn, cũng như phân loại dễ dàng
các loại thuốc khác nhau.
Quan trọng nhất không thể thiếu đó là ứng dụng cho phép người dùng quản lý
bán thuốc, bán sản phẩm khác thuốc, kê đơn và kê theo liều thuốc có sẵn. Giao diện
bắt mắt giúp cho việc bán hàng trở nên nhanh chóng và hiệu quả. Thêm nữa, đó là
tính năng quản lý tài khoản, ứng dụng hỗ trợ việc thêm tài khoản, theo dõi thông tin
của nhân viên, cũng như khách hàng khi đến quầy thuốc.
Ngồi ra, “MediServe” cịn có thể hiển thị các biểu đồ để thống kê doanh thu
bán hàng theo từng tháng, năm; thống kê số lượng thuốc, liều thuốc, danh mục thuốc;
thống kê mức sử dụng phổ biến của thuốc hay thống kê nhân viên với doanh thu cao
nhất.
Sau đây, nhóm chúng em xin phép được trình bày nội dung báo cáo đồ án qua
các chương như sau:
• Chương 1: Giới Thiệu Đề Tài
• Chương 2: Cơ Sở Lý Thuyết
• Chương 3: Phân Tích Thiết Kế Hệ Thống
• Chương 4: Xây Dựng Ứng Dụng

1


CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1.

Đặt vấn đề
Ngày nay, sức khỏe là chủ đề đang được quan tâm rất lớn. Trải qua thời kỳ

của đại dịch Covid thì mọi người lại càng chú trọng đến sức khỏe hơn nên các quầy
thuốc với quy mô vừa và nhỏ đã được mở bán với số lượng ngày càng tăng trên thị
trường trong nước. Tuy nhiên, có một số vấn đề đã nảy sinh như việc theo dõi hoạt
động kinh doanh, quản lý nhân viên, quản lý số lượng thuốc,... đã gây ra khơng ít khó
khăn trong q trình hoạt động. Việc quản lý thuốc chưa bao giờ là dễ dàng đối với
họ bởi lẽ chưa xuất hiện nhiều các công cụ, phần mềm hỗ trợ.
1.2.

Giải Pháp
Cho tới nay thì sự phát triển của cơng nghệ thơng tin được lan tỏa tồn cầu và

đã giải quyết được nhiều vấn đề bất cập trong cuộc sống, song bên cạnh đó chưa có
nhiều phần mềm hỗ trợ việc quản lý quầy thuốc. Vì thế, phần mềm của chúng em
được sinh ra với hi vọng phục vụ cho việc quản lý kinh doanh tại các quầy thuốc.
Các chức năng cơ bản của phần mềm này chính là quản lý đầu thuốc, thời hạn
thuốc, tối ưu việc kiểm kê xuất nhập, bán hàng, lên đơn cũng như kiểm sốt tình trạng
sử dụng... Nó là cơng cụ hỗ trợ đắc lực giúp cho việc thực hiện các thao tác quản lý
quầy thuốc trên phần mềm trở nên dễ dàng, tiết kiệm thời gian, công sức và đảm bảo
độ chính xác cao.
1.3.

Mục tiêu đề tài

-

Xây dựng hệ thống với các tính năng hỗ trợ trên web.

-

Xây dựng ứng dụng đề cao trải nghiệm người dùng, phát triển giao diện theo
xu hướng bắt mắt, hiện đại nhưng vẫn giữ được tính đơn giản trong q trình
sử dụng cho người dùng.

-

Xây dựng ứng dụng hỗ trợ đa người dùng (nhân viên, chủ quầy thuốc).

2


-

Đơn giản hóa các quy trình trong việc giao dịch, quản lý thuốc cũng như quản
lý việc xuất, nhập hàng các đơn thuốc. Nâng cao hiệu quả làm việc, tiết kiệm
thời gian và đảm bảo độ chính xác cao.

-

Cung cấp các công cụ hỗ trợ hiệu quả, các gợi ý hữu ích cho các thao tác quản
lý, giao tiếp giữa người và ứng dụng. Tạo ra các hiệu ứng độc đáo tạo cảm

giác thoải mái cho người dùng.

-

Ứng dụng trở thành công cụ tiện lợi và phổ biến trong việc quản lý thuốc, quản
lý kho hàng, quản lý liều thuốc, danh mục, quản lý hóa đơn, quản lý tài khoản,
cũng như tạo bảng biểu, thống kê.

1.4.

Đối tượng sử dụng
“MediServe” hướng đến các nhân viên bán thuốc, các dược sĩ, người quản lý

hay chủ quầy thuốc. Đối tượng sử dụng bao gồm các nhân viên có thể thực hiện việc
quản lý kho, quản lý thuốc, quản lý đơn hàng, hoặc các quyền khác và người chủ cửa
hàng hoặc người quản lý thực hiện tất cả các chức năng như quản lý tài khoản, quản
lý quyền đối với nhân viên. Ứng dụng này phù hợp cho các quầy thuốc, nhà thuốc
hay chuỗi quản lý các nhà thuốc.
1.5.

Cơng cụ sử dụng

• Cơng cụ thiết kế UI/UX: Figma.
• Cơng cụ dùng để phân tích, thiết kế cơ sở dữ liệu: draw.io, StarUML.
• Ngơn ngữ lập trình: Javascript.
• Thư viện sử dụng:
+ Front-end: ReactJs.
+ Back-end: NodeJs.
• Ngơn ngữ truy vấn dữ liệu: SQL.

3


• Cơ sở dữ liệu: PostgreSQL.
• Công cụ soạn thảo văn bản: Microsoft Word.
• Cơng cụ quản lý dự án: Github.
• Cơng cụ trao đổi, giao tiếp: Zalo, Messenger.
• Trình soạn thảo code: Visual Studio Code.
• Mơi trường làm việc: Notion.
1.6.

Phạm vi nghiên cứu

-

Nền tảng hỗ trợ: Triển khai trên Web (đối với nghiệp vụ quản lý quầy thuốc).

-

Chức năng:
+ Tra cứu thông tin thuốc theo tên, loại, chức năng, cơng dụng, thành phần.
+ Quản lý hóa đơn, các đơn thuốc, các đơn mua sản phẩm ngoài thuốc.
+ Quản lý liều thuốc có sẵn và tạo liều.
+ Quản lý danh mục thuốc.
+ Quản lý kho, các khâu như nhập kho, lịch sử các lần nhập kho, kiểm kho.
+ Thông báo các đơn thuốc sắp hết hàng/ sắp đến hạn/ hết hạn.
+ Phân tích, thống kê doanh thu của tiệm thuốc, xu hướng sử dụng thuốc của
người dùng, các bệnh dịch tiềm ẩn thường xuất hiện theo mùa ở địa
phương.
+ Quản lý nhân viên, phân quyền cho nhân viên, quản lý khách hàng.

+ Quản lý và áp dụng khuyến mãi cho khách hàng thành viên.

-

Chức năng phát triển trong tương lai:
+ Hướng dẫn dùng thuốc, nhắc nhở lịch trình uống thuốc của người bệnh.

4


+ Trao đổi online với dược sĩ để nhận tư vấn.
+ Nhận kê đơn thuốc online.
+ Tích lũy điểm cho khách hàng để trở thành khách hàng thành viên.
+ Cung cấp thông báo về dịch bệnh đang diễn ra trên địa bàn sinh sống, xem
và đăng tải bài viết chăm sóc sức khỏe, cảnh báo dịch bệnh và phương pháp
phịng tránh bệnh tại địa phương.
1.7.

Tổng quan về đồ án

Ứng dụng website “MediServe” là một hệ thống quản lý thuốc hỗ trợ việc
bán thuốc cho nhân viên và giúp tra cứu sản phẩm, tạo liều thuốc một cách
nhanh chóng, tiện lợi. Đồng thời, chủ quầy thuốc quản lý nhân viên, quản lý
kho hàng, quản lý lịch sử hóa đơn của nhân viên hiệu quả và tối ưu hóa quy
trình kinh doanh.
❖ Mơ tả quy trình thực hiện các cơng việc chính
• Bước 1: Xác định yêu cầu
+ Phân tích khả thi quy mơ thực hiện.
+ Tìm hiểu quy trình nghiệp vụ.
+ Tham khảo và trải nghiệm các ứng dụng liên quan.

+ Thu thập yêu cầu thông qua:
o Các văn kiện của bộ Y Tế
o Tìm hiểu nghiệp vụ quản lý hằng ngày tại các quầy thuốc bằng

cách phỏng vấn những người thân có làm việc tại quầy thuốc.
o Tìm hiểu các ứng dụng hiện có trên thị trường.
+ Tìm hiểu về các cơng nghệ (ReactJS, Node.js…), các cơng cụ hỗ trợ

(Figma).
• Bước 2: Thiết kế hệ thống
+ Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan.

5


• Bước 3: Thiết kế cơ sở dữ liệu
+ Thiết kế cơ sở dữ liệu tương ứng với từng loại yêu cầu của phần mềm
để đảm bảo được tính đúng đắn và tính tiến hóa với phần mềm, có
hiệu quả về mặt truy xuất và lưu trữ.
+ Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu
của phần mềm.
+ Xây dựng sơ đồ logic cụ thể của phần mềm.
• Bước 4: Thiết kế giao diện
+ Lập ra danh sách các màn hình khi người dùng tương tác với phần
mềm.
+ Mô tả các đối tượng trên từng màn hình.
+ Xác định những chức năng hiển thị trên từng màn hình.
• Bước 5: Code và kiểm thử
+ Xây dựng các dòng mã theo Redux Toolkit và được phân chia theo
các chức năng lớn.

+ Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

6


CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
Thiết kế giao diện Figma [1]

2.1.

2.1.1. Khái niệm

Hình 2. 1. Figma
⚫

Figma là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng
website. Với Figma, bạn có thể sáng tạo khơng giới hạn giao diện người dùng
(UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án
thiết kế khác.

2.1.2. Lịch sử hình thành
⚫

Với thành cơng của phiên bản dùng thử vào cuối năm 2015, Figma đã chính
thức ra mắt vào tháng 09 năm 2016 và tạo được vị trí riêng của mình trong
cộng đồng thiết kế. Đến tháng 10 năm 2019, Figma Community ra đời. Từ
đây, các nhà thiết kế có thể xuất bản tác phẩm của mình để người khác xem và
phối lại.

⚫

Tháng 04 năm 2021, Figma phát triển FigJam, một công cụ cho phép người
dùng sử dụng các công cụ ghi chú, vẽ hay thêm các biểu tượng cảm xúc vào
các dự án cộng tác.

7


2.1.3. Ưu diểm
⚫

Khả năng tương thích cao: Là một phần mềm trên nền tảng website, Figma có
thể được truy cập và sử dụng trên hầu hết các hệ điều hành phổ biến hiện nay
như Windows, MacOS hay thậm chí là Linux, chỉ cần thiết bị của bạn được
kết nối internet. Hiện tại, Figma cịn có các phiên bản ứng dụng trên máy tính
và điện thoại để người dùng có thể sáng tạo hay theo dõi các dự án ở bất cứ
nơi đâu.

⚫

Tính cộng tác cao: Ưu điểm hàng đầu của Figma phải kể đến tính cộng tác
trong thời gian thực. Với Figma, làm việc nhóm từ xa trở nên dễ dàng khi nó
cho phép những người khác trong dự án có thể cộng tác về thiết kế, cung cấp
phản hồi, kiểm tra tiến độ công việc hoặc gắn cờ các vấn đề có thể xảy ra theo
thời gian thực.

⚫

Trang bị nhiều công cụ plugin mạnh mẽ: Kho plugin khổng lồ và cực kỳ hữu
ích chỉ có ở Figma sẽ giúp bạn khắc phục được những lỗi nhỏ và tăng hiệu suất

làm việc. Việc quản lý màu sắc, nội dung hình ảnh hay hoạt ảnh đều trở nên
dễ dàng hơn bao giờ hết.

⚫

Thiết kế nhiều layout trong một sản phẩm: Tính năng quản lý nhiều artboard
cùng lúc cũng được tích hợp trên Figma. Với tính năng này, bạn có thể sáng
tạo nhiều layout với các kích thước khác nhau trên cùng một sản phẩm mà
không cần phải tạo thêm tệp mới.

⚫

Xuất được đa dạng file ảnh cực sắc nét: Figma thiết kế hình ảnh dưới dạng
vector nên chất lượng của hình ảnh sẽ khơng bị giảm khi bạn thay đổi kích
thước của chúng. Hình ảnh xuất ra cũng sẽ giữ được độ sắc nét với nhiều định
dạng khác nhau như PNG, SVG, JPG hay thậm chí là PDF.

⚫

Hỗ trợ lưu trữ đám mây: Figma sử dụng dịch vụ đám mây để lưu trữ và chỉnh
sửa dữ liệu, điều này tương tự như khi bạn thay đổi nội dung trên Google Docs.

2.2.

Ngôn ngữ lập trình JavaScript [2]

8


2.2.1. Khái niệm

Hình 2. 2. JavaScript
⚫

JavaScript là ngơn ngữ lập trình website phổ biến hiện nay, nó được tích hợp
và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai
trị như là một phần của trang web, thực thi cho phép Client-side script từ phía
người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.

⚫

JavaScript là một ngơn ngữ lập trình thơng dịch với khả năng hướng đến đối
tượng. Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ
lẫn nhau để xây dựng một website sống động, chuyên nghiệp:
+ HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên
website.
+ CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…
+ JavaScript: Tạo nên những nội dung “động” trên website. Cùng tìm hiểu
rõ hơn ở phần dưới đây.

⚫

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó
có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và

9


các thẻ HTML một cách dễ dàng. Hay nói cách khác, Javascript là một ngơn
ngữ lập trình trên trình duyệt ở phía client. Tuy nhiên, hiện nay với sự xuất

hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend.
2.2.2. Lịch sử phát triển
⚫

Brendan Eich chính là người đã phát triển JS tại Netscape với tiền thân là
Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thành
JavaScript.

⚫

Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và
đến năm 1999 thì ECMAScript 3 được ra mắt.

⚫

Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng,
đồng thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập
trình viên.

2.2.3. JavaScript Framework là gì?
• Là thư viện được xây dựng dựa trên JS phục vụ cho từng mục đích và lĩnh vực
khác nhau.JavaScript Framework là thư viện được xây dựng dựa vào ngơn ngữ
lập trình JavaScript. Từ đó, mỗi framework được tạo ra để phục cho từng lĩnh
vực khác nhau. Bạn có thể tìm hiểu kỹ hơn về framework là gì, sẽ giúp bạn có
thêm nhiều thơng tin rõ ràng hơn. Hiện nay, có rất nhiều JavaScript Framework
thông dụng như:
+ Reactjs: Thư viện dùng cho ứng dụng mobile.
+ Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy
chủ.
+ Angular: Dùng để xây dựng ứng dụng Single Page….

10


2.2.4. Ưu và nhược điểm của Javascript
⚫

Ưu điểm:
+ Chương trình rất dễ học.
+ Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách
nhanh chóng hơn.
+ Những trình duyệt web có thể dịch thơng qua HTML mà khơng cần sử
dụng đến một compiler.
+ JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.
+ Được các chuyên gia đánh giá là một loại ngơn ngữ lập trình nhẹ và nhanh
hơn nhiều so với các ngơn ngữ lập trình khác.
+ JS cịn có thể được gắn trên một số các element hoặc những events của các
trang web.
+ Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự
tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.
+ Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những
input thay vì cách kiểm tra thủ cơng thơng qua hoạt động truy xuất
database.
+ Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and
Drop, Slider để cung cấp đến cho người dùng một Rich Interface (giao diện
giàu tính năng).
+ Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với
nhau.

11

⚫

Nhược điểm:
+ JS Code Snippet khá lớn.
+ JS dễ bị các hacker và scammer khai thác hơn.
+ JS cũng không có khả năng đa luồng hoặc đa dạng xử lý.
+ Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử
dụng.
+ Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến
sự khơng đồng nhất.
+ Vì tính bảo mật và an tồn nên các Client-Side Javascript sẽ khơng cho
phép đọc hoặc ghi các file.
+ JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết
nối mạng.

2.3.

ReactJS [3]

2.3.1. Khái niệm

Hình 2. 3. ReactJS
⚫

ReactJS được hiểu nôm na là một thư viện mã nguồn mở chứa nhiều JavaScript
và người tạo ra ReactJS chính là ông trùm với cái tên quen thuộc Facebook,
được ra đời vào năm 2013. Mục đích của việc tạo ReactJS là tạo ra các ứng

12


dụng web nhanh, hiệu quả và hấp dẫn với nỗ lực viết mã tối thiểu. Mục tiêu
chính của ReactJS là bất kỳ trang web nào sử dụng ReactJS phải mượt mà,
nhanh chóng, khả năng mở rộng cao và dễ thực hiện.
⚫

Nhìn chung, các tính năng và điểm mạnh của ReactJS thường đến từ việc tập
trung vào các phần riêng lẻ. Do đó, khi làm việc với web thay vì tồn bộ ứng
dụng của một trang web bằng ReactJS, các nhà phát triển tính năng có thể tách
rời và chuyển đổi giao diện người dùng từ những cách phức tạp và biến nó
thành những phần đơn giản hơn.

2.3.2. Những thành phần chính của ReactJS
⚫

Redux:
+ Đây là một phần rất quan trọng của ReactJS và không ai sử dụng Redux
mà không biết. ReactJS khơng có mơ-đun chun dụng để xử lý dữ liệu, vì
vậy ReactJS chia chế độ xem thành các thành phần nhỏ hơn mà bạn thiết
lập độc lập và làm cho chúng liên quan chặt chẽ hơn.
+ Các liên kết và mối quan hệ giữa các thành phần trong ReactJS địi hỏi sự
chú ý đặc biệt, bởi vì luồng dữ liệu một chiều từ cấp độ mẹ đến cấp độ con
là luồng dữ liệu duy nhất trong ReactJS. Nó áp dụng cho các dự án, nhưng
bất chấp những điều cần lưu ý, nó có một mặt tốt đẹp khác. Đó là về việc
thúc đẩy tất cả các tính năng và vai trò khi ReactJS sử dụng engine.

⚫

Virtual Dom:
+ Đây là phần mà hầu như tất cả các framework đều sử dụng dom ảo và
ReactJS sử dụng nó khi dom ảo thay đổi. Điều đặc biệt ở đây là bạn không
phải thao tác trực tiếp với dom mà có thể xem các lượt xem và thay đổi.
+ Vì Virtual Dom hoạt động như một mơ hình và một khung nhìn, nên việc
thay đổi một trong hai yếu tố này sẽ thay đổi yếu tố kia và ngược lại mà
không cần thao tác trực tiếp. Tuy nhiên, có thể thực hiện cơ chế mù dữ liệu.

13