Đặ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ợ.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.3 Mục tiêu đề tài - Phát triển hệ thống với các tính năng mới hỗ trợ trên mobile và web, đồng thời bảo trì những tính năng đã có trên web.
- Phát triển ứ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 quá trình sử dụng cho người dùng. - 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 3 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.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.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. • Ngôn ngữ lập trình: Javascript.
• Thư viện sử dụng: 4 + 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.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 5 - 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.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ế 6 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.
7 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Khái niệm Hình 2. 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 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 8 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.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à Javascript. Ngoài ra, bạn có thể thêm mã bổ sung vào hàm kết xuất mà không 9 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.