Đồ án tốt nghiệp: Phát triển ứng dụng đăng kí khám chữa bệnh

Tài liệu nghiên cứu Đồ án ứng dụng đăng kí khám bệnh (ReactJS & NodeJS) góp phần nâng cao kiến thức chuyên ngành và ứng dụng hỗ trợ đào tạo hiệu quả

• Tác giả: Nguyễn Khánh Đức
• Người hướng dẫn: Ts. Nguyễn Thiên Bảo
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Phát Triển Ứng Dụng Đăng Kí Khám Chữa Bệnh (ReactJS & NodeJS)
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Ứng Dụng Đăng Kí Khám Bệnh

Ứng dụng đăng kí khám bệnh là một dự án tốt nghiệp được phát triển bởi sinh viên Nguyễn Khánh Đức và Nguyễn Quốc Khánh từ Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM. Đây là một nền tảng web hiện đại giúp bệnh nhân dễ dàng đăng kí lịch khám bệnh tại các bệnh viện và phòng khám mà không cần phải đi trực tiếp. Ứng dụng sử dụng công nghệ ReactJS cho frontend và NodeJS cho backend, tạo nên một hệ thống mạnh mẽ và hiệu quả. Dự án này nhằm mục đích số hóa quy trình khám bệnh, giúp cải thiện trải nghiệp người dùng và tối ưu hóa quản lý lịch khám của các cơ sở y tế. Với giao diện thân thiện và các tính năng đa dạng, ứng dụng mang lại giá trị thực tiễn cao cho cả bệnh nhân lẫn bác sĩ.

1.1. Mục Đích Và Ý Nghĩa Của Dự Án

Mục đích chính của đồ án ứng dụng đăng kí khám bệnh là chuyển đổi số hóa quy trình đăng kí khám chữa bệnh từ thủ công sang điện tử. Điều này giúp giảm thời gian chờ của bệnh nhân, tăng hiệu suất làm việc của nhân viên y tế, và cải thiện chất lượng dịch vụ chăm sóc sức khỏe. Ứng dụng cung cấp một giải pháp toàn diện cho quản lý lịch khám, giúp bệnh viện có thể quản lý tài nguyên y tế hiệu quả hơn và theo dõi thay đổi kịp thời trong thời gian ngắn nhất.

1.2. Khách Hàng Chính Của Ứng Dụng

Ứng dụng phục vụ ba nhóm người dùng chính: Thứ nhất là bệnh nhân - những người cần đăng kí và theo dõi lịch khám. Thứ hai là bác sĩ - những người quản lý lịch khám chữa bệnh của mình. Thứ ba là quản trị viên - người quản lý bệnh viện, phòng khám, danh sách bác sĩ và người dùng. Mỗi nhóm có quyền hạn và chức năng khác nhau, được thiết kế phù hợp với nhu cầu cụ thể của họ.

II. Các Tính Năng Chính Của Ứng Dụng

Ứng dụng đăng kí khám bệnh được trang bị nhiều tính năng tiên tiến để đáp ứng nhu cầu đa chiều của các bên liên quan. Giao diện được thiết kế với Material Design hiện đại, cung cấp trải nghiệm người dùng mượt mà và trực quan. Ứng dụng cho phép tìm kiếm bệnh viện, phòng khám và bác sĩ trong khu vực một cách nhanh chóng. Hệ thống quản lý dashboard cho phép admin giám sát toàn bộ hoạt động của ứng dụng. Redux Thunk và Redux Saga được sử dụng để quản lý trạng thái ứng dụng một cách hiệu quả. Các tính năng này tạo thành một nền tảng hoàn chỉnh cho quản lý khám bệnh điện tử.

2.1. Chức Năng Cho Bệnh Nhân

Bệnh nhân có thể thực hiện nhiều chức năng quan trọng thông qua ứng dụng. Họ có thể xem danh sách lịch khám bệnh còn trống của các bác sĩ tại các bệnh viện. Ứng dụng cung cấp tính năng tìm kiếm nâng cao để bệnh nhân dễ dàng tìm bác sĩ chuyên khoa phù hợp hoặc phòng khám gần khu vực sống. Sau khi tìm được lịch khám phù hợp, bệnh nhân có thể đăng kí ngay trên ứng dụng mà không cần phải đến trực tiếp cơ sở y tế.

2.2. Chức Năng Cho Bác Sĩ Và Quản Trị Viên

Bác sĩ có quyền đăng kí hoặc hủy lịch khám chữa bệnh của họ một cách linh hoạt. Quản trị viên có quyền hạn quản lý toàn diện bao gồm quản lý thông tin bệnh viện, phòng khám, danh sách các bác sĩ và thông tin liên quan của họ, cũng như quản lý danh sách người dùng toàn hệ thống. Dashboard admin cung cấp giao diện quản lý trực quan giúp theo dõi và quản lý hiệu quả các hoạt động của ứng dụng.

III. Công Nghệ Sử Dụng Trong Dự Án

Dự án ứng dụng đăng kí khám bệnh được xây dựng trên công nghệ hiện đại và được chọn lọc kỹ lưỡng. Frontend được phát triển bằng ReactJS - một thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng. Backend sử dụng NodeJS và ExpressJS - cho phép phát triển server-side mạnh mẽ và hiệu quả. Redux Thunk và Redux Saga được tích hợp để quản lý trạng thái ứng dụng phức tạp một cách tổ chức. SCSS được sử dụng cho styling hiện đại và Material Design đảm bảo giao diện chuyên nghiệp. MongoDB là cơ sở dữ liệu được chọn vì tính linh hoạt và khả năng mở rộng cao, được lưu trữ trên MongoDB Atlas. Deployment được thực hiện trên Heroku, đảm bảo ứng dụng hoạt động ổn định và có sẵn 24/7.

3.1. Frontend ReactJS Và Công Nghệ Liên Quan

ReactJS là nền tảng chính cho phát triển giao diện người dùng của ứng dụng. Redux Thunk và Redux Saga giúp quản lý state một cách có trật tự. SCSS cung cấp khả năng styling mạnh mẽ với các tính năng như nested rules và variables. Material Design đảm bảo giao diện tuân theo tiêu chuẩn thiết kế hiện đại và thân thiện với người dùng. Tổ hợp này tạo nên một frontend vững chắc và dễ bảo trì.

3.2. Backend Database Và Deployment

NodeJS với ExpressJS cung cấp nền tảng mạnh mẽ cho xây dựng API backend. MongoDB được lựa chọn vì tính linh hoạt trong lưu trữ dữ liệu không có schema cố định. MongoDB Atlas cung cấp dịch vụ hosting cơ sở dữ liệu đáng tin cậy. Heroku được sử dụng để deployment ứng dụng đảm bảo khả năng truy cập liên tục và scaling tự động khi cần thiết.

IV. Lợi Ích Và Tác Động Của Ứng Dụng

Ứng dụng đăng kí khám bệnh mang lại lợi ích đáng kể cho tất cả các bên liên quan trong hệ thống chăm sóc sức khỏe. Đối với bệnh nhân, ứng dụng tiết kiệm thời gian bằng cách cho phép đăng kí khám trực tuyến mà không cần đến trực tiếp. Cải thiện trải nghiệm người dùng thông qua giao diện thân thiện và tìm kiếm nhanh chóng. Đối với bệnh viện và phòng khám, ứng dụng tối ưu hóa quản lý lịch khám và giảm công việc thủ công. Tăng hiệu suất nhân viên và cải thiện chất lượng dịch vụ tổng thể. Dự án này chứng minh giá trị thực tiễn của công nghệ thông tin trong ngành y tế, hỗ trợ chuyển đổi số hóa tại các cơ sở y tế Việt Nam.

4.1. Lợi Ích Cho Bệnh Nhân Và Cộng Đồng

Bệnh nhân được hưởng lợi trực tiếp từ ứng dụng thông qua tiết kiệm thời gian chờ đợi. Khả năng tìm kiếm bác sĩ chuyên khoa và đặt lịch khám dễ dàng từ nhà giúp cải thiện chất lượng cuộc sống. Cộng đồng được hưởng lợi từ hệ thống y tế hiệu quả hơn, với giảm tắc nghẽn tại các cơ sở y tế. Tăng khả năng tiếp cận dịch vụ y tế cho những người bận rộn hoặc ở xa nơi cơ sở y tế.

4.2. Giá Trị Dài Hạn Và Tiềm Năng Mở Rộng

Dự án này thiết lập nền tảng cho phát triển các tính năng nâng cao trong tương lai như khám bệnh trực tuyến hoặc hệ thống kê đơn thuốc điện tử. Kiến trúc ứng dụng được thiết kế để dễ dàng mở rộng và tích hợp các công nghệ mới. Đây là minh chứng cho sự đổi mới trong ngành y tế Việt Nam, góp phần thực hiện mục tiêu chuyển đổi số hóa của quốc gia.

Trích đoạn nội dung tài liệu

Phần mở đầu 6 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 1. Khảo sát hiện trạng Hiện tại có nhiều trang web phục vụ khác nhau đã cung cấp công cụ tìm kiếm, đăng kí khám chữa bệnh. Nhìn chung thông tin rất đầy đủ.

Theo khảo sát website chứa các lịch trình khám bệnh còn trống của các bác sĩ và các thông tin bổ ích liên quan khác: https://molepatrol.1: Trang chủ Hình 1.2: Lựa chọn nơi muốn khám bệnh ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 7 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp Hình 1.3: chọn vị trí muốn đến khám Hình 1.4: tiến hành chọn ngày hẹn Ngoài ra, trang web này còn hổ trợ tra cứu các thông tin có liên quan khác: ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 8 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp Hình 1.5 Trang about đưa lên các thông tin hữu ích về các căn bệnh.6 Trang còn đưa những thông tin liên quan tới bệnh viện đang quản lí ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 9 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp Hình 1.7 ngoài ra còn đưa thêm những thành tích, kinh nghiệm của các bác sĩ trong bệnh viện 2.

Cấu trúc ứng dụng  Thông qua đánh giá của nhóm thực hiện báo cáo đối với trang web đã khảo sát thì nhóm thực hiện báo cáo đã đưa ra dự kiến sẽ xây dựng một ứng dụng có cấu trúc như dưới đây.  Bao gồm 4 nhóm người dùng chính:  Người dùng chưa đăng nhập  Người dùng đã đăng nhập  Admin  Bác sĩ  Chức năng của từng bộ phận: ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 10 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp Bảng 2.1: Chức năng của từng bộ phận Tên Bộ Phận Chức Năng của bộ phận  Tham khảo các thông tin chung:  Xem danh sách lịch trống Người dùng chưa đăng  Chọn vị trí, nơi muốn khám bệnh nhập  Xem các thông tin có ích liên quan: thông tin bác sĩ, các triệu chứng cơ bản về các bệnh,… - Kế thừa các tính năng của Người dùng chưa đăng nhập Người dung đã đăng - Quản lý thông tin cá nhân nhập  Xem thông tin cá nhân - Đặt lịch hẹn khám bệnh - Quản lý các thông tin môn học:  Bác sĩ  Bệnh nhân Admin  Bệnh viện, phòng khám - Thêm sửa các thông tin về bệnh nhân, bác sĩ, phòng khám, bệnh viện - Quản lý tài khoản. Bác sĩ - Đăng kí lịch khám chữa bệnh.

- Chỉnh sửa các thông tin cá nhân. Qui định và yêu cầu thiết kế 3. Quy định - Các thông tin về bác sĩ, bệnh nhân, phòng khám, bệnh viện khi được thêm vào database phải có đầy đủ thông tin cần thiết. ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 11 Trường Đại Học Sư Phạm Kỹ Thuật TP.

HCM Khoá Luận Tốt Nghiệp 3. Yêu cầu thiết kế - Phân quyền ở cả back-end và front-end. - Giao diện trang chủ. - Hiển thị đầy đủ thông tin, các chức năng bố trí phù hợp.

- Có các danh mục và search engine để dễ dàng tìm kiếm. - Hiển thị các sản phẩm theo các filter (rating, cost, topic,…) - Thể hiện các thông tin thiết yếu khi đăng kí lịch khám chữa bệnh. - Hệ thống gồm các actor chính: bác sĩ, bệnh nhân, admin - Người quản lý (Admin) là những người trực tiếp quản lý website, có quyền thêm, sửa và xóa các thông tin trong database. Đánh giá và lựa chọn công nghệ - Về lưu trữ dữ liệu: Sử dụng no-sql là mongodb để thuận tiện cho việc lưu trữ thông tin nhanh chóng và giảm thời gian phát triển phần mềm, nới lỏng những ràng buộc không cần thiết trong dữ liệu, - Cần thao tác nhanh với dữ liệu lớn.

Mô hình website cũng có thể sẽ được phát triển thêm hơn nữa nên nhóm thực hiện báo cáo sẽ sử dụng mô hình Restful WebService sử dụng NodeJS và Client Server sử dụng React JS các modun rành mạch và tách rời nên việc phát triển tiếp theo cũng không gặp ảnh hưởng bởi legacy code.  Các công nghệ sử dụng: React JS, NodeJS  Các công cụ để lập trình: Visual Studio Code, Atlas DB 5. Xác định yêu cầu và các biểu mẫu 5. Danh sách các nghiệp vụ - Tìm kiếm, đăng kí lịch khám bệnh - Hiển thị thông tin, tài khoản người dùng - Các chứ năng cơ bản của một admin như: thêm, sửa, xóa, cập nhật toàn bộ các dữ liệu trên trang web.

- Cập nhật lịch khám bệnh. ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 12 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp - Người dung đăng kí khám chữa bệnh - Admin quản lý database trong hệ thống ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 13 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp 6.

Lược đồ usecase và mô tả use case 6. Lược đồ usecase Hình 1.8: Use case tổng hợp ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 14 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp 6. Đặc tả use case  Quản trị viên Là người có quyền chỉnh sửa môn học, ngành học như: xem.

thêm, xoá, cập nhật ngoài ra còn có vai trò trong kiểm soát tất cả tài khoản trong hệ thống và cũng có quyền can thiệp vào quản trị chương trình của các tài khoản cấp khác.  Bác sĩ Vai trò chính của nhân viên ở đây là theo khoa trực thuộc để tạo ra lịch khám phù hợp. Bác sĩ có quyền quản trị trên chính tài khoản mình và có quyền chỉnh sửa lịch khám bệnh.  Người dung chưa đăng nhập Những người không cần tài khoản để đăng nhập vào hệ thống có thể xem, tham khảo các thông tin trên ứng dụng: lịch khám còn trống, tin tức, …  Người dùng đã đăng nhập Có thể tham khảo thông tin như người dùng chưa đăng nhập và có thể đăng kí lịch khám bệnh, có thể sửa thông tin cá nhân của mình và đổi lịch khám bệnh.

------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 15 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp CHƯƠNG 3: CÔNG NGHỆ SỬ DỤNG 1. Giới thiệu tổng quan về ReactJS 1. Khái niệm  React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application (SPA).

React thường được so sánh với vai trò tương đương như các Javascript framework khác, nhưng việc so sánh giữa React và Angular thực sự không có ý nghĩa, bởi chúng sinh ra để đảm nhiệm những vai trò khác nhau. Angular là một framework hoàn chỉnh còn React thì không. Điều này lý giải tại sao thường gây ra một số hiểu lầm về React, bởi React thường được tích hợp trong một hệ sinh thái gồm các framwork hoàn chỉnh, nhưng nó chỉ phục vụ cho tầng view.  React cung cấp cho bạn một ngôn ngữ tạo template và các function nhằm render ra các mã HTML.

HTML là tất cả những gì mà React có thể đưa ra ra. Các đoạn mã HTML/Javascript được gọi là các “Component” nếu có khả năng lưu trữ các trạng thái (State) của chính nó trong bộ nhớ (ví dụ như tab nào được chọn trong một loạt các tab trên giao diện).  React hỗ trợ việc xây dựng các thành phần UI có tính tương tác cao, có trạng thái và có thể tái sử dụng.  React không chỉ hoạt động trên phía client , mà còn được render trên server và có thể kết nối với nhau.

React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 16 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp 1. Vấn đề và giải pháp  Đừng quên rằng React chỉ phục vụ cho tầng view Bạn sẽ không làm được bất cứ thứ gì dưới đây: o Gọi AJAX o Không tạo được tầng Data Layer chuẩn o Promises o Any application framework at all o Any idea how implement the above o Nếu chỉ dùng React đứng một mình, nó vô dụng đối với các yêu cầu thực tế.

Tệ hơn nữa, như chúng ta sẽ thấy điều này dẫn đến việc chúng ta sẽ phải phát minh lại bánh xe. Tài liệu nghèo nàn React khá nặng nếu so với các framework khác. Tại sao nên dùng ReactJS  ReactJS cho phép Developer viết ứng dụng trực tiếp trên JavaScript. Thêm vào đó là JSX – một trong những tính năng không chỉ làm cho ReactJS dễ dàng mà còn thú vị hơn.

Developer giờ đây có thể tạo nên một tính năng mới và có thể xem nó xuất hiện ngay trong thời gian thực, giúp Developer có thể được đưa trực tiếp các đoạn HTML vào JavaScript.  Một ý tưởng khác làm cho ReactJS trở nên độc đáo là nó cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những component độc lập. Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn.  Không chỉ vậy, thông qua Props, các component có thể kết nối với nhau bằng cách sử dụng data tùy biến.

Điều này giúp chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể.  Tính năng State khi sử dụng ReactJS, giúp điều chỉnh trạng thái cho các component (child) nhận data từ một component nguồn (parent). Developer có ------------------------------------------------------------------------------------------------------------------ ---------- Chương 2: Khảo sát hiện trạng 17 Trường Đại Học Sư Phạm Kỹ Thuật TP. HCM Khoá Luận Tốt Nghiệp thể thay đổi trạng thái cho nhiều component (child) trên ứng dụng nhưng không ảnh hưởng tới component gốc (parent) đang ở trạng thái Stateful.

Việc điều chỉnh các ứng dụng cũng trở nên dễ dàng hơn.  Dom ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn. DOM ảo hỗ trợ rất tốt cho việc cấu trúc UI phản ứng kịp thời với trước những thay đổi nhằm tăng trải nghiệm người dùng. Khi tạo ra ReactJS, các nhà thiết kế đã dự đoán đúng việc cập nhật các HTML cũ là cực kỳ quan trọng nhưng cũng khá tốn kém chi phí.

Vì thế ý tưởng sử dụng DOM ảo giúp ReactJS biết chính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử của DOM chính vì phát hiện ra những thay đổi trên data. Các thành phần cơ bản trong React 2. Virtual DOM  Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý.