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

(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) Phát triển ứng dụng đăng kí khám chữa bệnh(Đồ án tốt nghiệp) 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 KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP PHÁT TRIỂN ỨNG DỤNG ĐĂNG KÍ KHÁM CHỮA BỆNH SVTH: NGUYỄN KHÁNH ĐỨC MSSV: 16110056 NGUYỄN QUỐC KHÁNH MSSV: 16110119 Ngành : Công Nghệ Thông Tin GVHD : TS NGUYỄN THIÊN BẢO Thành phố Hồ Chí Minh, tháng 12 năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP PHÁT TRIỂN ỨNG DỤNG ĐĂNG KÍ KHÁM CHỮA BỆNH SVTH: NGUYỄN KHÁNH ĐỨC MSSV: 16110056 NGUYỄN QUỐC KHÁNH MSSV: 16110119 Ngành : Công Nghệ Thông Tin GVHD : TS NGUYỄN THIÊN BẢO Thành phố Hồ Chí Minh, tháng 12 năm 2020 Trường Đại Học Sư Phạm Kỹ Thuật TP HCM Khoá Luận Tốt Nghiệp Lời cảm ơn Đầu tiên, nhóm thực báo cáo xin gửi lời cảm ơn đến thầy Nguyễn Thiên Bảo – giáo viên hướng dẫn trực tiếp cho nhóm thực báo cáo để hồnh thành tốt đề tài Trong q trình hướng dẫn nhóm thực báo cáo làm đồ án, thầy tận tình theo sát nhóm thực báo cáo khoảng thời gian làm đề tài, hướng dẫn kĩ lập trình, lý thuyết đề tài giúp nhóm thực báo cáo giải vấn đề bên Kèm theo đó, nhóm thực báo cáo xin cảm ơn khoa đào tạo chất lượng cao trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm thực báo cáo tiếp xúc với kiến thức mới, tạo điều kiện cho nhóm thực báo cáo phát huy kiến thức hồn thành cơng việc Chân thành gửi lời cảm ơn đến bạn khóa giúp đỡ, hỗ trợ đóng góp ý kiến cho nhóm thực báo cáo hồn thành đề tài cách tốt Mặc dù cố gắng tìm tòi, học hỏi thêm nhiều kiến thức nhiều nguồn tài liệu khác tránh khỏi sai sót, kính mong thầy bạn nhận xét đóng góp ý kiến để nhóm thực báo cáo làm tốt đề tài Nhóm thực báo cáo xin chân thành cảm ơn!! Nguyễn Khánh Đức Nguyễn Quốc Khánh iv 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 Đườ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 ... 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,... 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... THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP PHÁT TRIỂN ỨNG DỤNG ĐĂNG KÍ KHÁM CHỮA BỆNH SVTH: NGUYỄN KHÁNH ĐỨC MSSV: 16110056 NGUYỄN QUỐC KHÁNH MSSV: 16110119 Ngành : Công Nghệ Thông