đồ án 2 phát triển ứng dụng hỗ trợ quản lý quầy thuốc

Mô tả cách sử dụng màn hình Danh sách sản phẩm khác thuốc .... Mô tả cách sử dụng màn hình Danh sách hóa đơn .... Mô tả cách sử dụng màn hình Thêm thuốc và sản phẩm .... Với giao diện ưa

ĐẠ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 2

PHÁT TRIỂN ỨNG DỤNG HỖ TRỢ QUẢN LÝ QUẦY THUỐC

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yế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

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Người nhận xét

Trần Thị Hồng Yế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 2 này, nhóm chúng em đã chọn và thực hiện đồ án “PHÁT TRIỂN ỨNG DỤNG HỖ TRỢ QUẢN LÝ QUẦY THUỐC”

Nhóm em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yế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 hoàn thiện

TP.HCM, ngày 30 tháng 12 năm 2023

Nhóm sinh viên thực hiện

2.1.3Lợi ích khi sử dụng ReactJS 9

2.1.4Tại sao JavaScript Developer sử dụng ReactJS? 10

2.2React Native [7] 11

2.2.1Khái niệm 11

2.2.2Ưu điểm của React Native 12

2.2.3Nhược điểm của React Native 12

CHƯƠNG 3:PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13

3.1Sơ đồ Use Case 13

3.2Danh sách Use Case 14

3.3.8Quản lý hóa đơn 29

3.3.9Quản lý thông tin cá nhân 31

3.3.10 Quản lý tài khoản 31

3.3.11 Xem thống kê 33

3.3.12 Quản lý Bài Đăng 34

3.3.13 Xem bài đăng 36

3.3.14 Xem thông tin thuốc và sản phẩm đang bán 37

3.3.15 Điểm danh vào làm 38

3.3.16 Xem lịch sử điểm danh 39

4.2.19 Màn hình Tài khoản nhân viên 74

4.2.20 Màn hình Danh sách hóa đơn 75

4.2.21 Màn hình Chi tiết hóa đơn 76

4.2.22 Màn hình Kê đơn khi tạo hóa đơn 77

4.2.23 Màn hình Thêm thuốc và sản phẩm khi tạo hóa đơn 78

4.2.24 Màn hình Xem trước hóa đơn 79

4.2.25 Màn hình Thông tin cá nhân 80

4.2.26 Màn hình Thống kê 81

4.2.27 Màn hình Điểm danh 82

4.2.28 Màn hình Lịch sử điểm danh 83

4.2.29 Màn hình Danh sách bài đăng 84

4.2.30 Màn hình Tạo bài đăng 85

4.3.9Màn hình Danh sách đơn thuốc 95

4.3.10 Màn hình Chi tiết đơn thuốc 96

KẾT LUẬN 97

TÀI LIỆU THAM KHẢO 98

Hình 4 19 Màn hình Tài khoản nhân viên 74

Hình 4 20 Màn hình Danh sách hóa đơn 75

Hình 4 21 Màn hình Chi tiết hóa đơn 76

Hình 4 22 Màn hình Kê đơn khi tạo hóa đơn 77

Hình 4 23 Màn hình Thêm thuốc và sản phẩm 78

Hình 4 24 Màn hình Xem trước hóa đơn 79

Hình 4 25 Màn hình Thông tin cá nhân 80

Hình 4 26 Màn hình Thống kê 81

Hình 4 27 Màn hình Điểm danh 82

Hình 4 28 Màn hình Lịch sử điểm danh 83

Hình 4 29 Màn hình Danh sách bài đăng 84

Hình 4 30 Màn hình Tạo bài đăng 85

Hình 4 40 Màn hình Danh sách đơn thuốc 95

Hình 4 41 Màn hình Chi tiết đơn thuốc 96

DANH MỤC BẢNG

Bảng 3 1 Danh sách Use Case 14

Bảng 3 2 Use Case Đăng nhập 17

Bảng 3 3 Use Case Đăng xuất 18

Bảng 3 4 Use Case Quản lý kho 18

Bảng 3 5 Use Case Quản lý thuốc 21

Bảng 3 6 Use Case Quản lý sản phẩm khác thuốc 23

Bảng 3 7 Use Case Quản lý liều thuốc 25

Bảng 3 8 Use Case Quản lý danh mục 27

Bảng 3 9 Use Case Quản lý hóa đơn 29

Bảng 3 10 Use Case Quản lý thông tin cá nhân 31

Bảng 3 11 Use Case Quản lý tài khoản 31

Bảng 3 12 Use Case Xem thống kê 33

Bảng 3 13 Use Case Quản lý bài đăng 34

Bảng 3 14 Use Case Xem bài đăng 36

Bảng 3 15 Use Case Xem thông tin thuốc và sản phẩm đang bán 37

Bảng 3 16 Use Case Điểm danh vào làm 38

Bảng 3 17 Use Case Xem lịch sử điểm danh 39

Bảng 3 18 Bảng thuộc tính của Quyền hạn 43

Bảng 3 19 Bảng thuộc tính của Tài khoản 43

Bảng 3 20 Bảng thuộc tính của Đơn nhập kho 44

Bảng 3 21 Bảng thuộc tính của Danh mục 45

Bảng 3 22 Bảng thuộc tính của Đơn vị thuốc 45

Bảng 3 23 Bảng thuộc tính của Thuốc 46

Bảng 3 24 Bảng thuộc tính của Chi tiết đơn nhập thuốc/sản phẩm 47

Bảng 3 25 Bảng thuộc tính của Hóa đơn 48

Bảng 3 26 Bảng thuộc tính của Chi tiết đơn thuốc của hóa đơn 48

Bảng 3 27 Bảng thuộc tính của Đơn thuốc 49

Bảng 3 28 Bảng thuộc tính của Hướng dẫn dùng thuốc 49

Bảng 3 29 Bảng thuộc tính của Hướng dẫn dùng thuốc trên đơn kê 50

Bảng 3 30 Bảng thuộc tính của Chi tiết hóa đơn item 50

Bảng 3 31 Bảng thuộc tính của Khách hàng vãng lai 51

Bảng 3 32 Bảng thuộc tính của Bài đăng 51

Bảng 3 33 Bảng thuộc tính của bảng Reaction 52

Bảng 4 7 Mô tả cách sử dụng màn hình Kiểm kho 60

Bảng 4 8 Mô tả cách sử dụng màn hình Danh sách thuốc 61

Bảng 4 9 Mô tả cách sử dụng màn hình Chi tiết thuốc 62

Bảng 4 10 Mô tả cách sử dụng màn hình Thêm thuốc 63

Bảng 4 11 Mô tả cách sử dụng màn hình Danh sách sản phẩm khác thuốc 64

Bảng 4 12 Mô tả cách sử dụng màn hình Chi tiết SPKT 65

Bảng 4 13 Mô tả cách sử dụng màn hình Thêm SPKT 66

Bảng 4 14 Mô tả cách sử dụng màn hình Danh sách liều và tạo liều 67

Bảng 4 15 Mô tả cách sử dụng màn hình Sửa liều 68

Bảng 4 16 Mô tả cách sử dụng màn hình Xóa liều 69

Bảng 4 17 Mô tả cách sử dụng màn hình Danh mục 70

Bảng 4 18 Mô tả cách sử dụng màn hình Tạo danh mục 71

Bảng 4 19 Mô tả cách sử dụng màn hình Xóa và sửa danh mục 72

Bảng 4 20 Mô tả cách sử dụng màn hình Tài khoản khách hàng 73

Bảng 4 21 Mô tả cách sử dụng màn hình Tài khoản nhân viên 74

Bảng 4 22 Mô tả cách sử dụng màn hình Danh sách hóa đơn 75

Bảng 4 23 Mô tả cách sử dụng màn hình Chi tiết hóa đơn 76

Bảng 4 24 Mô tả cách sử dụng màn hình Kê đơn khi tạo hóa đơn 77

Bảng 4 25 Mô tả cách sử dụng màn hình Thêm thuốc và sản phẩm 78

Bảng 4 26 Mô tả cách sử dụng màn hình Xem trước hóa đơn 79

Bảng 4 27 Mô tả cách sử dụng màn hình Thông tin cá nhân 80

Bảng 4 28 Mô tả cách sử dụng màn hình Điểm danh 82

Bảng 4 29 Mô tả cách sử dụng màn hình Lịch sử điểm danh 83

Bảng 4 30 Mô tả cách sử dụng màn hình Danh sách bài đăng 84

Bảng 4 31 Mô tả cách sử dụng màn hình Tạo bài đăng 85

Bảng 4 32 Mô tả cách sử dụng màn hình Cập nhật bài đăng 86

Bảng 4 33 Mô tả cách sử dụng màn hình Đăng nhập 87

Bảng 4 34 Mô tả cách sử dụng màn hình Đăng ký 88

Bảng 4 35 Mô tả cách sử dụng màn hình Trang chủ 89

Bảng 4 36 Mô tả cách sử dụng màn hình Chỉnh sửa thông tin cá nhân 90

Bảng 4 37 Mô tả cách sử dụng màn hình Danh sách blog 91

Bảng 4 38 Mô tả cách sử dụng màn hình Chi tiết blog 92

Bảng 4 39 Mô tả cách sử dụng màn hình Danh sách sản phẩm 93

Bảng 4 40 Mô tả cách sử dụng màn hình Chi tiết sản phẩm 94

Bảng 4 41 Mô tả cách sử dụng màn hình Danh sách đơn thuốc 95

Bảng 4 42 Mô tả cách sử dụng màn hình Chi tiết đơn thuốc 96

TÓM TẮT ĐỒ ÁN

“MediServe” là một ứng dụng 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 và 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 Mediserve trên website còn hỗ trợ quản lý kho hàng, quản lý danh mục, quản lý liều, quản lý hóa đơn, quản lý tài khoản, quản lý thông tin cá nhân, thống kê

Ngoài việc hỗ trợ tốt việc quản lý dành cho dược sĩ hoặc nhân viên quầy thuốc, ứng dụng còn được triển khai trên mobile bên phía khách hàng với các chức năng như xem trạng thái hoạt động của quầy thuốc; tra cứu, xem thông tin thuốc Điều đó giúp cho người mua thuốc có thể theo dõi được trạng thái của quầy, đồng thời cung cấp những thông tin cần thiết về các loại thuốc, sản phẩm khác thuốc Thêm vào đó, ứng dụng mobile còn đăng những blog về việc chăm sóc sức khỏe và hỗ trợ theo dõi đơn thuốc của khách hàng Khách hàng còn có thể chỉnh sửa thông tin cá nhân nếu cần thiết Để cung cấp hiệu quả thông tin trên mobile bên phía khách hàng, website quản lý còn hỗ trợ việc thêm, sửa, xóa các bài đăng; chức năng điểm danh, chấm công cho dược sĩ Ứng dụng giúp quản lý thời gian làm việc của nhân viên quầy thuốc, theo dõi sự hiện diện và tính toán chấm công hiệu quả Những chức năng này giúp tối ưu hóa quản lý cửa hàng thuốc, tăng cường thông tin liên quan đến chăm sóc sức khỏe và hiệu quả hóa quá trình quản lý nhân sự thông qua việc điểm danh và chấm công Đồng thời, chúng cũng có thể cung cấp dữ liệu quan trọng để đưa ra quyết định thông minh về quản lý và phát triển kinh doanh

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 này tập trung trình bày về cách đặt vấn đề cho đề tài cũng như giải pháp tương ứng, đồng thời cũng nêu lên mục tiêu, đối tượng sử dụng và công nghệ áp dụng Ngoài ra, chương còn sơ lược về phạm vi nghiên cứu và tổng quan đồ án

Chương 2: Cơ Sở Lý Thuyết

Chương này đặt nền tảng cho đồ án bằng cách trình bày những kiến thức lý thuyết và các khái niệm cơ bản liên quan đến đề tài Nó có thể bao gồm các công nghệ được sử dụng trong quá trình phát triển đồ án

Chương 3: Phân Tích Thiết Kế Hệ Thống

Chương này tập trung vào quá trình phân tích yêu cầu của hệ thống hoặc ứng dụng Nó bao gồm các mô hình thiết kế, đặc tả yêu cầu, thiết kế dữ liệu để đảm bảo rằng hệ thống được xây dựng theo cách hiệu quả và đáp ứng đúng nhu cầu của người sử dụng

Chương 4: Phát Triển Ứng Dụng

Chương cuối cùng trình bày một cách trực quan về việc phát triển ứng dụng Nó có thể bao gồm danh sách các màn hình được phát triển qua hai nền tảng là Web, Mobile, và các mô tả cách tương tác với các màn hình đó.

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 quá 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 toà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 soá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

- Phát triển ứng dụng hỗ trợ đa người dùng (nhân viên, chủ quầy thuốc, người

mua thuốc)

- Đơ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, thống kê Đồng thời ứng dụng còn hỗ trợ bên phía khách hàng được triển khai trên mobile cùng với những tính năng như xem trạng thái hoạt động, xem blog, xem thông tin thuốc/sản phẩm khác thuốc, theo dõi đơn thuốc, chỉnh sửa thông tin cá nhân

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ĩ, chủ quầy thuốc và người mua thuốc Đối tượng sử dụng website quản lý 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 Và người mua thuốc sẽ sử dụng ứng dụng mobile bao gồm xem trạng thái hoạt động của quầy, xem blog, xem thông tin thuốc, theo dõi đơn, chỉnh sửa thông tin cá nhân

1.5 Công cụ và công nghệ áp 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, React Native + Back-end: Node.js

• Ngôn ngữ truy vấn dữ liệu: SQL • Cơ sở dữ liệu: PostgreSQL • Lưu trữ hình ảnh: Cloudinary

• 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) và trên Mobile (đối với nghiệp vụ hỗ trợ khách hàng)

- Chức năng đã có: • Trên Website

+ Thống kê doanh thu

+ 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 + Quản lý thuốc và sản phẩm khác thuốc

+ Quản lý danh mục thuốc

+ Quản lý liều thuốc có sẵn và tạo liều

+ Quản lý tài khoản khách hàng, nhân viên, phân quyền cho nhân viê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ý thông tin cá nhân

- Chức năng phát triển thêm: • Trên Website:

+ Quản lý blog chăm sóc sức khỏe + Điểm danh

+ Chấm công • Trên Mobile:

+ Đăng nhập, đăng ký, đăng xuất

+ Xem trạng thái hoạt động quầy thuốc (mở/ đóng cửa)

+ Xem blog chăm sóc sức khỏe

+ Xem thông tin các thuốc, sản phẩm khác thuốc có bán tại quầy

+ Theo dõi đơn thuốc

1.7 Tổng quan về đồ án

Ứng dụng “MediServe” là một hệ thống hỗ trợ việc quản lý bên phía người quản lý (admin) trên website và hỗ trợ người mua thuốc trên mobile Website hỗ trợ hiệu quả trong việc bán thuốc và quản lý thuốc, giúp tối ưu hóa quy trình kinh doanh Đồng thời, ứng dụng mobile sẽ cung cấp nguồn thông tin thuốc của quầy, theo dõi trạng thái quầy cũng như theo dõi đơn thuốc

❖ 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ông nghệ React Native

• Bước 2: Chỉnh sửa bản thiết kế hệ thống

+ Chỉnh sửa sơ đồ Use-case: phân tích nghiệp vụ tổng quan • Bước 3: Chỉnh sửa bản thiết kế cơ sở dữ liệu

+ Thiết kế lại 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

+ Chỉnh sửa sơ đồ logic cụ thể của phần mềm • Bước 4: Thiết kế giao diện

+ Lập thêm 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

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.1 ReactJS [3] 2.1.1 Khái niệm

Hình 2 1 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 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ì toà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.1.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 chuyên 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 Mục đích của việc này là tăng tốc đáng kể ứng dụng của bạn, đây là một trong những lợi thế lớn nhất của việc sử dụng Virtual Dom

2.1.3 Lợi ích khi sử dụng ReactJS

⚫ Tạo cho chính bản thân ReactJS một dom ảo, đây là nơi các component được tồn tại trên đó Tạo một dom như thế này sẽ cải thiện hiệu suất rất nhiều Nếu bạn cần thay đổi hoặc cập nhật một phép tính trong dom, ReactJS sẽ tính toán nó trước và phần còn lại sẽ chạy trong dom để thực hiện công việc, vì vậy ReactJS có thể tránh các thao tác cần thiết trong dom mà không phải trả thêm phí

⚫ Việc viết các đoạn mã JS sẽ trở nên dễ dàng sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX, cú pháp này cho phép bạn kết hợp mã HTML và

cần nối chuỗi Đây được coi là một trong những tính năng thú vị của ReactJS, việc chuyển đổi các đoạn HTML sang các constructor đều được thực hiện bởi trình chuyển đổi chính là JSX

⚫ Khi khởi chạy ReactJS, đừng quên cài đặt thêm ứng dụng mở rộng Chrome chuyên dành cho ReactJS Điều này làm cho việc debug mã của bạn dễ dàng hơn Sau khi cài đặt, bạn có thể nhìn thẳng vào mái Virtual Dom điều đó đồng nghĩa với việc bạn đang theo dõi một cây dom thông thường

⚫ Đây là một trong những điều đặc biệt và độc đáo của ReactJS Đây cũng là một vấn đề lớn đối với các khuôn khổ JS vì mặc dù có nhiều cải tiến nhưng hầu hết các khuôn khổ JS không thân thiện với công cụ tìm kiếm ReactJS hỗ trợ hiển thị và trả về trình duyệt dưới dạng trang web khi bạn chạy ReactJS trên máy chủ và Dom ảo, vì vậy chúng tôi rất tự hào nói rằng chúng tôi không thuộc nhóm không thân thiện với SEO Bởi vì điều này, React rất phù hợp với tính cách thân thiện với SEO của nó

2.1.4 Tại sao JavaScript Developer sử dụng ReactJS?

⚫ ReactJS là một thư viện JavaScript dành riêng để giúp các nhà phát triển tạo giao diện người dùng và giao diện người dùng Khi nói đến lập trình ứng dụng front-end, các lập trình viên thường phải làm việc trên hai thành phần chính: giao diện người dùng và xử lý các tương tác của người dùng Giao diện người dùng là tập hợp các phần tử mà tất cả các ứng dụng hiển thị

⚫ Ví dụ: menu, thanh tìm kiếm, nút, thẻ, v.v Giả sử bạn đang lập trình một trang web Trong thương mại điện tử, sau khi người dùng chọn sản phẩm mong muốn và nhấp vào Thêm vào giỏ hàng, bước tiếp theo là thêm sản phẩm đã chọn vào giỏ hàng và hiển thị lại các sản phẩm Sản phẩm này => xử lý tương tác khi người dùng nhìn thấy nó

⚫ Trước ReactJS, các lập trình viên rất khó tạo giao diện người dùng bằng “vanilla JavaScript” (JavaScript thuần túy) và JQuery Điều này có nghĩa là

ro hơn Năm 2011, cộng tác viên của Facebook, Jordan Walke, đã ra mắt ReactJS với mục tiêu chính là cải thiện quy trình phát triển giao diện người dùng

⚫ Ngoài ra, để tăng tốc quá trình phát triển và giảm rủi ro có thể phát sinh khi viết mã, React cung cấp khả năng tạo mã có thể tái sử dụng bằng cách giới thiệu hai khái niệm quan trọng bao gồm JSX và Virtual DOM

2.2 React Native [7] 2.2.1 Khái niệm

Hình 2 2 React Native

• React Native là các đoạn code đã được viết sẵn (framework) do công ty công nghệ Facebook phát triển Các lập trình viên React Native là người sử dụng những framework này để phát triển nên các hệ thống, nền tảng ứng dụng trên các hệ điều hành như IOS và Android Ngôn ngữ lập trình được sử dụng nhiều nhất là Javascript

• Sự ra đời của React Native đã giải quyết được bài toán về hiệu năng và sự phức tạp khi trước đó người ta phải dùng nhiều loại ngôn ngữ native cho mỗi nền tảng di động Chính vì thế lập trình React Native sẽ giúp tiết kiệm được

phần lớn thời gian và công sức khi thiết kế và xây dựng nên một ứng dụng đa nền tảng Javascript phù hợp với rất nhiều nền tảng khác nhau

2.2.2 Ưu điểm của React Native

• Không phải dùng nhiều native nhờ đó đơn giản hóa quá trình xây dựng nền tảng

• Rút ngắn thời gian khi phát triển ứng dụng • Tối thiểu hoá chi phí cho doanh nghiệp • Khả năng tái sử dụng code lên đến 80%

• Mang đến trải nghiệm người dùng chất lượng hơn

• Không đòi hỏi kiến thức nền quá chuyên sâu, bất kỳ ai đam mê IT cũng có thể học lập trình React Native

2.2.3 Nhược điểm của React Native

• Mới chỉ hỗ trợ trên 2 nền tảng phổ biến nhất là IOS và Android • Hiệu năng sẽ không bằng những ứng dụng thuần native code • Độ bảo mật còn hạn chế

• Không hoàn toàn free, một số thư viện cần trả phí để có thể trải nghiệm • Một vài module có khả năng tùy biến thấp, không thực sự tốt

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

3.1 Sơ đồ Use Case

Hình 3 1 Sơ đồ Use Case

3.2 Danh sách Use Case

Bảng 3 1 Danh sách Use Case

Vai trò Use case Ý nghĩa

Vai trò của người quản lý

Đăng nhập Cho phép đăng nhập để sử dụng hệ thống Đăng xuất Cho phép thoát ra khỏi hệ thống

Quản lý kho Nhập kho, xem lịch sử nhập kho, kiểm kho

Quản lý thuốc Xem danh sách thuốc; thêm, sửa, xóa, tra cứu thuốc

Quản lý sản phẩm khác thuốc

Xem danh sách sản phẩm khác thuốc; thêm, sửa, xóa, tra cứu sản phẩm khác thuốc Quản lý liều thuốc Xem danh sách liều thuốc; thêm, xóa, sửa,

tra cứu liều thuốc

Quản lý danh mục Xem danh sách danh mục; thêm, xóa, sửa danh mục

Quản lý hóa đơn Xem danh sách hóa đơn; thêm, xóa hóa đơn; xem chi tiết hóa đơn

Quản lý thông tin cá

nhân Chỉnh sửa thông tin cá nhân Quản lý tài khoản Thêm, xóa, sửa tài khoản

Xem thống kê Xem được các bảng biểu, thống kê doanh thu, sản phẩm…

Xem danh sách điểm

danh Xem lịch sử điểm danh của nhân viên

Vai trò của nhân viên

Đăng nhập Cho phép đăng nhập để sử dụng hệ thống Đăng xuất Cho phép thoát ra khỏi hệ thống

Quản lý kho Nhập kho, xem lịch sử nhập kho, kiểm kho

Quản lý thuốc Xem danh sách thuốc; thêm, sửa, xóa, tra cứu thuốc

Quản lý sản phẩm khác thuốc

Xem danh sách sản phẩm khác thuốc; thêm, sửa, xóa, tra cứu sản phẩm khác thuốc

Quản lý liều thuốc Xem danh sách liều thuốc; thêm, xóa, sửa, tra cứu liều thuốc

Quản lý danh mục Xem danh sách danh mục; thêm, xóa, sửa danh mục

Quản lý hóa đơn Xem danh sách hóa đơn; thêm, xóa hóa đơn; xem chi tiết hóa đơn

Xem thống kê Xem được các bảng biểu, thống kê doanh thu, sản phẩm…

Quản lý thông tin cá Chỉnh sửa thông tin cá nhân

nhân

Điểm danh vào làm Nhân viên điểm danh vào làm Quản lý blog Nhân viên tạo và quản lý các blog

Vai trò của khách hàng

Đăng ký tài khoản Đăng ký tài khoản khách hàng

Đăng nhập Khách hàng đăng nhập bằng tài khoản đã đăng ký trên hệ thống

Xem blog chăm sóc sức khỏe

Xem blog chăm sóc sức khỏe được đăng tải bởi nhà thuốc

Theo dõi đơn thuốc Theo dõi tình trạng và thông tin về đơn thuốc được kê bởi nhà thuốc

Xem thông tin thuốc và sản phẩm

Xem thông tin thuốc và sản phẩm tại nhà thuốc

3.3 Đặc tả Use case

3.3.1 Đăng nhập

Bảng 3 2 Use Case Đăng nhập

Tên Use case Đăng nhập

Mô tả Cho phép đăng nhập để sử dụng hệ thống

Người thực hiện (Actor) Người quản lý/ Nhân viên Sự kiện kích hoạt (Trigger) Bấm chọn nút đăng nhập Điều kiện tiên quyết (Pre-

Conditions) Nhập tài khoản đã được đăng ký trước đó Điều kiện kết quả (Post-

Conditions) Đăng nhập thành công và vào màn hình chính

3a Hệ thống xác nhận tài khoản và mật khẩu không hợp lệ theo quy định Use case trở về với bước 2 1 4a Hệ thống xác nhận dữ liệu nhập không trùng khớp

với dữ liệu trong Database Use case trở về với bước 2

3.3.2 Đăng xuất

Bảng 3 3 Use Case Đăng xuất

Tên Use case Đăng xuất

Mô tả Cho phép thực hiện chức năng đăng xuất khỏi phiên làm việc của tài khoản hiện tại

Người thực hiện (Actor) Người quản lý/ Nhân viên Sự kiện kích hoạt (Trigger) Bấm chọn Thoát để đăng xuất Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

Conditions) Tài khoản được đăng xuất khỏi hệ thống

Bảng 3 4 Use Case Quản lý kho

Tên Use case Quản lý kho

Mô tả Nhập kho, xem lịch sử nhập kho, kiểm kho Người thực hiện (Actor) Người quản lý/ Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn nút nhập kho, lịch sử nhập, kiểm kho

Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

2 Trang nhập kho sẽ xuất hiện

3 Người dùng click vào danh mục của sản phẩm

4 Hệ thống sẽ hiển thị các danh mục có sẵn 5 Người dùng sẽ nhập tên sản phẩm mới vừa nhập

hàng về vào thanh tìm kiếm và click vào sản phẩm trong phần gợi ý

6 Hệ thống sẽ hiển thị sản phẩm vào bảng

7 Người dùng nhập giá trị của các thuộc tính của sản phẩm (số lượng, quy cách…) và bấm nút nhập kho 8 Hệ thống sẽ thêm sản phẩm mới vào kho trong

database và thông báo thêm thành công

Lịch sử nhập

9 Người dùng chọn menu item “Lịch sử nhập” trong list box “Quản lý kho”

10 Trang về lịch sử nhập kho sẽ xuất hiện

11 Người dùng chọn ngày bắt đầu và ngày kết thúc của nhập kho, và theo thứ tự tăng dần hoặc giảm

dần

12 Hệ thống sẽ hiển thị lịch sử nhập kho theo yêu cầu

13 Người dùng nhấn nút “Xuất file”

14 Hệ thống sẽ xuất ra file báo cáo về lịch sử nhập với khoảng thời gian đó

15 Người dùng click vào “Chi tiết”

16 Hệ thống sẽ hiện ra thông tin chi tiết đơn nhập vào thời điểm đó

17 Người dùng click chọn “Xuất file”

18 Hệ thống sẽ xuất ra file báo cáo về chi tiết đơn nhập, bao gồm thuốc, sản phẩm… đã được bán

Kiểm kho

19 Người dùng sẽ chọn menu item “Kiểm kho” trong list box “Quản lý kho”

20 Trang kiểm kho sẽ xuất hiện

21 Người dùng nhấn “Chi tiết”

22 Hệ thống sẽ hiển thị xem chi tiết sản phẩm

23 Người dùng chọn menu item “Sắp hết hàng”/ “Sắp đến hạn”/ “Hết hạn”

24 Hệ thống sẽ hiển thị các sản phẩm tương ứng với sắp hết hàng, sắp đến hạn, hết hạn

25 Người dùng chọn “Tiêu hủy” trong mục “Hết hạn”

26 Hệ thống sẽ hiển thị popup tiêu hủy sản phẩm

27 Người dùng bấm chọn xác nhận tiêu hủy

28 Hệ thống sẽ hủy các sản phẩm hết hạn trong database và thông báo hủy thành công

3.3.4 Quản lý thuốc

Bảng 3 5 Use Case Quản lý thuốc

Tên Use case Quản lý thuốc

Mô tả Thêm, xóa, sửa, tra cứu thuốc

Người thực hiện (Actor) Người quản lý/ Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn nút thêm, xóa, chỉnh sửa, tra cứu thuốc Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

2 Hệ thống hiển thị giao diện trang thêm thuốc

3 Người dùng nhập những thông tin cần thiết của thuốc và bấm “Tạo thuốc”

4 Hệ thống sẽ tạo thuốc mới trong database và thông

báo thành công

Xóa thuốc

5 Người dùng chọn menu item “Thuốc trong hệ thống” trong list box “Quản lý thuốc”

6 Hệ thống sẽ hiển thị trang danh sách các loại thuốc

7 Người dùng click chọn “Thông tin thuốc”

8 Hệ thống sẽ hiển thị thông tin chi tiết của thuốc và chức năng xóa, sửa

9 Người dùng click chọn nút xóa

10 Hệ thống sẽ hiển thị popup xóa thuốc

15 Người dùng click chọn “Thông tin thuốc”

16 Hệ thống sẽ hiển thị thông tin chi tiết của thuốc và chức năng xóa, sửa

17 Người dùng click chọn nút sửa

18 Hệ thống sẽ sửa thuốc trong database và thông báo sửa thành công

23 Người dùng click chọn “Thông tin thuốc” 24 Hệ thống sẽ hiển thị thông tin chi tiết thuốc

3.3.5 Quản lý sản phẩm khác thuốc

Bảng 3 6 Use Case Quản lý sản phẩm khác thuốc

Tên Use case Quản lý sản phẩm khác thuốc (SPKT)

Mô tả Thêm, xóa, sửa, tra cứu SPKT

Người thực hiện (Actor) Người quản lý/ Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn nút thêm, xóa, chỉnh sửa, thông tin SPKT Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

1 Người dùng chọn menu item “Thêm sản phẩm” trong list box “Quản lý sản phẩm”

2 Hệ thống hiển thị giao diện trang thêm SPKT 3 Người dùng nhập những thông tin cần thiết của

SPKT

7 Người dùng click chọn “Thông tin sản phẩm”

8 Hệ thống sẽ hiển thị thông tin chi tiết của SPKT và chức năng xóa, sửa

9 Người dùng click chọn nút xóa

10 Hệ thống sẽ hiển thị popup xóa SPKT 11 Người dùng bấm chọn xác nhận xóa

12 Hệ thống sẽ xóa SPKT trong database và thông báo xóa thành công

Sửa SPKT

13 Người dùng chọn menu item “Danh sách sản phẩm” trong list box “Quản lý sản phẩm” 14 Hệ thống sẽ hiển thị trang danh sách các loại

SPKT

15 Người dùng click chọn “Thông tin sản phẩm”

16 Hệ thống sẽ hiển thị thông tin chi tiết của SPKT và chức năng xóa, sửa

17 Người dùng click chọn nút sửa

18 Hệ thống sẽ sửa SPKT trong database và thông báo sửa thành công

Tra cứu

19 Người dùng chọn menu item “Danh sách sản phẩm” trong list box “Quản lý sản phẩm” 20 Hệ thống sẽ hiển thị trang danh sách các loại

23 Người dùng click chọn “Thông tin sản phẩm”

24 Hệ thống sẽ hiển thị thông tin chi tiết SPKT

3.3.6 Quản lý liều thuốc

Bảng 3 7 Use Case Quản lý liều thuốc

Tên Use case Quản lý liều thuốc

Mô tả Thêm, xóa, sửa, tra cứu liều thuốc

Người thực hiện (Actor) Người quản lý/ Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn nút thêm, xóa, chỉnh sửa liều thuốc Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

Conditions)

Xác nhận tạo thành công, xóa thành công, sửa thành công

Kịch bản chính (Basic Flow)

1 Người dùng chọn menu item “Quản lý liều”

2 Hệ thống hiển thị giao diện trang quản lý liều thuốc

thông báo thêm thành công

Sửa liều

7 Người dùng chọn icon sửa màu vàng của liều thuốc đang hiển thị trên trang “Danh sách liều thuốc” 8 Hệ thống sẽ hiển thị popup thông tin liều thuốc 9 Người dùng sửa đổi các thông tin cần thiết và nhấn

“Lưu”

10 Hệ thống sẽ thay đổi thông tin liều trong database và thông báo sửa thành công

Xóa liều

11 Người dùng chọn icon xóa màu đỏ của liều thuốc đang hiển thị trên trang “Danh sách liều thuốc” 12 Hệ thống sẽ hiển thị popup xóa liều thuốc 13 Người dùng bấm chọn nút “Xóa”

14 Hệ thống sẽ xóa liều trong database và thông báo xóa thành công

Bảng 3 8 Use Case Quản lý danh mục

Tên Use case Quản lý danh mục

Mô tả Thêm, xóa, sửa danh mục

Người thực hiện (Actor) Người quản lý/ Nhân viên

Sự kiện kích hoạt (Trigger) Bấm chọn nút thêm, xóa, chỉnh sửa danh mục Điều kiện tiên quyết (Pre-

Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quả (Post-

Conditions)

Xác nhận tạo thành công, xóa thành công, sửa thành công