Phát triển ứng dụng đăng kí khám chữa bệnh

Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Tóm tắt đề tài Ứng dụng ứng dụng giúp đăng ký khám chữa bệnh cho bệnh viện, phòng khám,… Ứng dụng vận hành website quản lý lịch khám bác sĩ đăng kí khám chữa bệnh bệnh nhân, cung cấp cho người dùng giao diện dễ thao tác và có thẩm mỹ thị nhiều thơng tin cách có trật tự xếp Ứng dụng sử dụng công nghệ React nodejs Website cung cấp giao diện chuẩn trang admin với dashboard giúp admin dễ dàng quản lý lịch khám bệnh bác sĩ đăng kí khám chữa bệnh người dùng Ứng dụng có chức năng: Về phía người dùng khơng có tài khoản - Xem danh sách lịch khám bệnh trống - Tìm kiếm bệnh viện, phịng khám hay bác sĩ khu vực mà website quản lí - Đăng kí lịch khám chữa bệnh Về phía bác sĩ - Đăng kí hủy lịch khám chữa bệnh Về phía quản trị viên - Quản lý bệnh viện, phịng khám có liên kết với trang web - Quản lý danh sách bác sĩ, thông tin liên quan - Quản lý danh sách người dùng Website sử dụng công nghệ: - Front-end: ReactJS, Redux Thunk, Redux Saga, SCSS, Material Design - Back-end: NodeJS, ExpressJS - Database: MongoDB - Deployment: MongoDB Atlas, Heroku v Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Lời nói đầu Sự phát triển cơng nghệ thơng tin nước ta bước vào thời kì đổi mới, ngày tiến cải cách mạnh hơn, kèm theo đột biến thời kì cơng nghiệp hóa đại hóa nước ta nên công nghệ thông tin trở thành yếu tố thiếu đời sống ngày hữu tất nơi ứng dụng ngành, kể ngành khơng có yếu tố công nghệ Công nghệ thông tin bước vào sống người người bạn đồng hành, có vai trị vơ quan trọng việc thay đổi làm sống người trở nên mẻ hơn, tiện lợi rộng lớn Dựa vào yếu tố nhóm thực báo cáo đưa định làm đề tài dự án giúp hỗ trợ công việc thủ công trở thành cơng việc quản lý thống kê dễ dàng Dự án “ứng dụng phụ vụ đăng kí khám chữa bệnh” “cơng cụ” giúp người dung nhanh chóng hồn tất việc đăng kí lịch khám chữa bệnh cách nhanh chóng tiện lợi Bệnh viện dễ dàng theo dõi vào thay đổi kịp thời thời gian ngắn Vì lợi ích tính hiệu dự án nên nhóm thực báo cáo định tìm hiểu, thực hoàn thành dự án này, trình tìm hiểu thực khơng tránh khỏi thiếu sót nên mong thầy bạn góp ý thêm để nhóm thực báo cáo thực dự án tốt vi Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iii Lời cảm ơn iv Lời nói đầu vi Danh mục hình ix Danh sách bảng xi Danh sách từ viết tắt xii CHƯƠNG 1: MỞ ĐẦU 1 Đặt vấn đề lý chọn đề tài Mục tiêu nhiệm vụ đề tài 2.1 Mục tiêu 2.2 Nhiệm vụ Công nghệ lập trình Yêu cầu 5 Phương pháp nghiên cứu 6 Bố cục báo cáo CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU Khảo sát trạng Cấu trúc ứng dụng 10 Qui định yêu cầu thiết kế 11 3.1 Quy định 11 3.2 Yêu cầu thiết kế 12 Đánh giá lựa chọn công nghệ 12 Xác định yêu cầu biểu mẫu 12 5.1 Danh sách nghiệp vụ 12 Lược đồ usecase mô tả use case 14 6.1 Lược đồ usecase 14 6.2 Đặc tả use case 15 CHƯƠNG 3: CÔNG NGHỆ SỬ DỤNG 16 Giới thiệu tổng quan ReactJS 16 vii Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp 1.1 Khái niệm 16 1.2 Vấn đề giải pháp 17 1.3 Tại nên dùng ReactJS 17 Các thành phần React 18 2.1 Virtual DOM 18 2.2 JSX 20 2.3 Components 21 2.4 Props State 21 2.5 Ưu điểm nhược điểm React 22 Giới thiệu tổng quan NodeJS 22 3.1 Khái niệm 22 3.2 Tại nên sử dụng NodeJS 25 Các kiến thức 25 4.1 Mô hình Spring MVC 25 4.2 Các thành phần NodeJS 27 4.3 Ưu điểm nhược điểm NodeJS 27 CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 30 Thiết kế hệ thống 30 1.1 Lược đồ lớp 30 1.2 Lược đồ 36 Thiết kế giao diện 44 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 55 Cài đặt 55 Kiểm thử 56 CHƯƠNG 6: KẾT LUẬN 57 Kết đạt hướng phát triển 57 Hạn chế 58 Hướng phát triển 58 Tài Liệu Tham Khảo 59 viii Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Danh mục hình Hình 1.1: Trang chủ Hình 1.2: Lựa chọn nơi muốn khám bệnh 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 Hình 1.5 Trang about đưa lên thơng tin hữu ích bệnh Hình 1.6 Trang cịn đưa thông tin liên quan tới bệnh viện quản lí Hình 1.7 ngồi cịn đưa thêm thành tích, kinh nghiệm bác sĩ bệnh viện Hình 1.8: Use case tổng hợp Hình 2.1: Cấu trúc Virtual DOM Real DOM Hình 2.2: Luồng liệu React Hình 2.3: Vịng đời component Hình 2.4: Sự khác props state React Hình 2.5: Kiến trúc tổng thể NodeJS Hình 2.6: Ví dụ mẫu ExpressJS Hình 2.7: Mơ hình quy trình hoạt động MVC dùng ExpressJS Hình 2.8: Các thành phần tạo nên kiến trúc dự án Hình 3.1: lược đồ lớp Hình 3.2: Lược đồ “Xem thơng tin cá nhân” Hình 3.3: Lược đồ “Cập nhật tài khoản” Hình 3.4: Lược đồ “User đăng nhập” Hình 3.5: Lược đồ “User đăng ký thành viên” Hình 3.6: Lược đồ “Xem thơng tin bác sĩ” Hình 3.7: Lược đồ “User đăng ký lịch khám bệnh” Hình 3.8: Lược đồ “User xóa lịch khám bệnh” Hình 3.9: Lược đồ “User sửa thơng tin đăng kí khám chữa bệnh” Hình 3.10 Màn hình trang chủ ix Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Hình 3.11 Màn hình trang chủ Hình 3.12 Màn hình trang chủ Hình 3.13 Màn hình chọn chun khoa Hình 3.14 Màn hình chọn phịng khám Hình 3.15 Xem địa phịng khám Hình 3.16 Chọn bác sĩ Hình 3.17 Nhập thơng tin bệnh nhân Hình 3.18 Trang tìm kiếm Hình 3.19 Trang đăng nhập Hình 3.20 Trang đăng kí Hình 3.21 Trang admin – đăng nhập Hình 3.22 Phân bảng bác sĩ Hình 3.23 Thêm bác sĩ Hình 3.24 Thêm bệnh nhân Hình 3.25 Thêm nhân viên Hình 2.26 Trang bệnh nhân xem booking, đơn thuốc Hình 3.27 Trang bác sĩ tra đơn bệnh nhân thêm đơn bệnh nhân Hình 3.28 Xem booking danh sách đơn thuốc Hình 3.29 Đăng nhập bằng số khám bệnh nhân Hình 4.1: Deployment Hình 4.2 Cấu hình server Heroku sử dụng x Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Danh sách bảng Bảng 2.1: Chức phận Bảng 3.1: Thuộc tính Account model Bảng 3.2: Thuộc tính shifts model Bảng 3.3: Thuộc tính clinic_historys Bảng 3.4: Thuộc tính Specializeds Bảng 3.5: Thuộc tính Rooms Bảng 3.6: Thuộc tính Shift_types Bảng 3.7: Thuộc tính Doctor_shifts Bảng 3.8: Thuộc tính Doctors Bảng 3.9: controller model accounts Bảng 3.10: controller model specializeds Bảng 4.1: Kiểm thử số chức trang web xi Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Danh sách từ viết tắt MVC: Model – View – Controller SPA: Single Page Application JS: Javascript JSX: JavaScript Syntax Extension JavaScript XML XML: Extensible Markup Language UI: User Interface DOM: Document Object Model CLI: Command Line Interface API: Application Programming Interface BE: Back-end FE: Front-end xii Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp CHƯƠNG 1: MỞ ĐẦU Đặt vấn đề lý chọn đề tài Hiện nguyên nhân làm cho dự án thất bại phụ thuộc, chồng chéo lẫn thành phần dự án Vì mà quy trình phát triển phần mềm đại, thông thường xây dựng thành phần cách riêng lẽ độc lập Nhưng phụ thuộc thành phần điều tất yếu nên khó khăn việc làm độc lập thành phần dự án Điều khiến nhóm phải suy nghĩ cách lập kế hoạch phân công công việc hiệu để đến mục đích chung khiến dự án hồn thành, thỏa mong muốn người sử dụng giảm thời gian, chi phí q trình gia cơng phần mềm Mặt khác, với phát triển cơng nghiệp hóa – đại hóa ngày việc phát triển ứng phải trở nên dễ sử dụng, tiện lợi cho người sử dụng đòi hỏi người phát triển phải trả lời câu hỏi sau:  Vấn đề cần giải gì?  Những đặc điểm ứng dụng sử dụng để giải vấn đề?  Giải pháp thực nào?  Giải pháp xây dựng nào?  Cách tiếp cận sử dụng để phát lỗi thực thiết kế xây dựng hệ thống?  Hệ thống hỗ trợ thời gian dài, chỉnh sửa, điều chỉnh cải tiến yêu cầu người dùng hệ thống? Để trả lời câu hỏi việc lựa chọn công nghệ ReactJS NodeJS kết hợp điều mà nhóm cảm thấy hài lịng Mục tiêu nhiệm vụ đề tài 2.1 Mục tiêu Xây dựng ứng dụng, cơng cụ phụ vụ đăng kí khám chữa bệnh: - Phần mở đầu Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp  Áp dụng công nghệ sử dụng: ReactJS, Redux, NodeJS, MongoDB, DnD  Sử dụng công nghệ ExpressJS, NodeJS để tiến hành xây dựng tầng API kiến trúc Restful  Sử dụng ReactJS, Redux xử lý logic, ứng dụng hiển thị dựa kết nhận từ tầng API  Sử dụng hệ quản trị sở liệu MongoDB để quản lý liệu  Phân tích, thiết kế xây dựng ứng dụng xây dựng chương trình đào tạo với số chức như:  Authentication  Quản lý đăng kí khám chữa bệnh người dùng  Quản lý bệnh viện, phòng khám,…  Áp dụng kiến thức học trước từ môn học khác để hoàn thành việc xây dựng ứng dụng 2.2 Nhiệm vụ  Một số nhiệm vụ mà nhóm thực báo cáo cần thực để hồn thành mơn học này:  Tìm hiểu ReactJS, Redux cách thức hoạt động  Tìm hiểu NodeJS, ExpressJS cách thức hoạt động  Khảo sát trang quản lí khám chữa bệnh hoạt động  Phát triển ứng dụng  Bên cạnh cần phải nghiên cứu công nghệ mới, học hỏi thêm nhiều kiến thức áp dụng cho tương lai sau Cơng nghệ lập trình  Hiện có nhiều website ứng dụng với nội dung đa dạng phong phú, đồng thời website ứng dụng xây dựng nhiều tảng lập trình khác như: ASP.NET mà chúng em học từ bắt đầu học đại học có lợi sau: - Phần mở đầu Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khố Luận Tốt Nghiệp Hình 3.11 Màn hình trang chủ Lựa chọn khám theo khoa Lựa chọn khám theo sở y tế bật Lựa chọn khám theo bác sĩ mong muốn Hình 3.12 Màn hình trang chủ Các cẩm nang bổ ích 2.2 Booking BB Hình 3.13 Màn hình chọn chuyên khoa Chương 4: Cài đặt kiểm thử 45 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Đường dẫn trang chủ Ơ tìm kiếm đăng nhập Lựa chọn khám bệnh Hình 3.14 Màn hình chọn phịng khám Danh sách phịng khám Heading Hình 3.15 Xem địa phịng khám Hearding Thơng tin bệnh viện: cách thức liên hệ, đến bệnh viện theo google map,… Chương 4: Cài đặt kiểm thử 46 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khố Luận Tốt Nghiệp Hình 3.16 Chọn bác sĩ Tag bác sĩ Hình ảnh chân dung bác sĩ Thông tin bác sĩ Đặt lịch khám với bác sĩ Hình 3.17 Nhập thơng tin bệnh nhân Chương 4: Cài đặt kiểm thử 47 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Hình 3.18 Trang tìm kiếm Ơ điền thơn tin tìm kiếm Xóa lọc Tag tìm kiếm theo bệnh viện Ơ tìm kiếm theo bệnh viện Các bệnh viện trang web quản lí Tag đăng kí khám bệnh bệnh viện Hình 3.19 Trang đăng nhập Chương 4: Cài đặt kiểm thử 48 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Ô để nhập Email Ô để nhập mật Nút bấm đăng nhập Ơ chức năng: đăng kí, tạo tài khoản, qn mật Hình 3.20 Trang đăng kí Ô để điền email đăng kí Ô để điền mật xác nhận mật Ô chức năng: nút đăng nhập, tag đăng nhập, quên mật khẩu, trang chủ Chương 4: Cài đặt kiểm thử 49 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khố Luận Tốt Nghiệp Hình 3.21 Trang admin – đăng nhập Nút có chức tìm lại mật ta bị Ô để điền email mật admin Nút đăng nhập Hình 3.22 Phân bảng bác sĩ Nút để Dashboard Thông tin người đăng nhập Danh sách trang hiển thị liệu, ví dụ trang 1, 2,… Nút để thêm bác sĩ Thanh tool Khung liệu Chương 4: Cài đặt kiểm thử 50 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khố Luận Tốt Nghiệp Hình 3.23 Thêm bác sĩ Tag mà truy cập Khung để điền thông tin cần thiết Ơ chứa nút để hồn tất đăng kí hủy bỏ Thông tin người đăng nhập Thanh tool Hình 3.24 Thêm bệnh nhân Chương 4: Cài đặt kiểm thử 51 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Nút thêm bệnh nhân Khung thông tin bệnh nhân Label thị tag Hình 3.25 Thêm nhân viên Label thị tag Nút thêm nhân viên Khung thông tin nhân viên Hình 2.26 Trang bệnh nhân xem booking, đơn thuốc Thanh tool Khung chứa thông tin đơn thuốc Chương 4: Cài đặt kiểm thử 52 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Hình 3.27 Trang bác sĩ tra đơn bệnh nhân thêm đơn bệnh nhân Thêm số khám cho bệnh nhân Nơi điền thông tin cần thiết cho bệnh nhân Nút thêm bệnh nhân Label thị xem bệnh nhân có số hay chưa Thanh tool Hình 3.28 Xem booking danh sách đơn thuốc Chương 4: Cài đặt kiểm thử 53 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khố Luận Tốt Nghiệp Hình 3.29 Đăng nhập bằng số khám bệnh nhân Nơi điền id bệnh nhân Nút đăng nhập Thông tin bệnh nhân Chương 4: Cài đặt kiểm thử 54 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Cài đặt Hình 4.1: Deployment  Cài đặt phần mềm soạn thảo code ReactJS Visual Studio Code Hình 4.2 Cấu hình server Heroku sử dụng Chương 4: Cài đặt kiểm thử 55 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Kiểm thử Bảng 4.2: Kiểm thử số chức trang web Chức Đăng nhập Mô tả Trạng thái  User đăng nhập tài khoản vào trang web Đăng ký tài khoản  Guest đăng ký tài khoản Thêm, sửa, xóa bác sĩ  Admin thêm, sửa, xóa sản phẩm Thêm, sửa, xóa bệnh nhân  Admin thêm, sửa, xóa ngành học Thêm, sửa, xóa chương  Staff, Admin thêm, sửa, xóa lịch khám Tra cứu thơng tin chương trình đào tạo  Người dùng tra cứu thông trang web Chương 4: Cài đặt kiểm thử tin trang web 56 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp CHƯƠNG 6: KẾT LUẬN Kết đạt hướng phát triển  Nghiên cứu trình bày cách có hệ thống nội dung ReactJS NodeJS việc xây dựng ứng dụng xây dựng ứng dụng hỗ trợ khám chữa bệnh  Về mặt lý thuyết:  Có thể nắm vững kiến thức NodeJS nguyên lý chế hoạt động công nghệ  Nắm vững kiến thức ReactJs, thành phần React bao gồm có thành phần  Nắm mơ hình web MVC ExpressJS  Hiểu chế giao tiếp client – server mơ hình web đại theo hướng RESTful service Cũng hiểu chế hoạt động component ReactJS để tạo nên ứng dụng web tương tác tốt với người dùng  Về mặt ứng dụng web:  Thiết kế cài đặt ứng dụng web với mơ hình web service data service tách biệt  Xây dựng ứng dụng web dạng API mà việc giao tiếp với server chủ yếu thông qua RESTful service hỗ trợ ReactJS Phần kết luận 57 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Hạn chế  Các chức ứng dụng web hoàn thành, nhiên yêu cầu phạm vi đề tài lớn thời gian bị giới hạn nên ứng dụng cịn chưa hồn thành số tính gặp lỗi trình sử dụng  Nghiệp vụ nhóm chưa đủ nên gặp nhiều khó khăn việc kế trang web  Các hạn chế mặt tìm hiểu cơng nghệ nên bị nhiều giới hạn việc thiết kế tạo nên ứng dụng web hoàn thiện Hướng phát triển Sẽ hướng trang web nhiều việc chăm sóc khách hàng - Có thể tự đặt lịch hẹn tùy theo trường hợp bệnh nhân - Khi bác sĩ hủy thay đổi lịch khám bệnh thơng báo với bệnh nhân trực tiếp qua tin nhắn điện thoại email - Đổi giao diện hợp lí, bắt mắt Phần kết luận 58 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Tài Liệu Tham Khảo https://reactjs.org/ : tham khảo tài liệu ReactJS https://www.w3schools.com/nodejs/nodejs_intro.asp: tham khảo tài liệu NodeJS https://viblo.asia/ : thông tin lý thuyết ReactJS NodeJS https://stackoverflow.com/ https://reactjs.org/docs/introducing-jsx.html https://tailieu.vn/tag/khao-sat-yeu-cau-phan-mem.html https://o7planning.org Tài liệu tham khảo 59 ... thống kê dễ dàng Dự án ? ?ứng dụng phụ vụ đăng kí khám chữa bệnh? ?? “cơng cụ” giúp người dung nhanh chóng hồn tất việc đăng kí lịch khám chữa bệnh cách nhanh chóng tiện lợi Bệnh viện dễ dàng theo... thơng tin ứng dụng: lịch khám trống, tin tức, …  Người dùng đăng nhập Có thể tham khảo thơng tin người dùng chưa đăng nhập đăng kí lịch khám bệnh, sửa thơng tin cá nhân đổi lịch khám bệnh ... ca khám bệnh có sở liệu Hiển thị tất thông tin ca khám bệnh có số id tương ứng Thêm ca khám bệnh vào sở liệu /id Put /id Delete Chỉnh sửa thông tin ca khám bệnh theo số id tương ứng Xóa ca khám