(TIỂU LUẬN) xây DỰNG ỨNG DỤNG WEBSITE hệ THỐNG THÔNG TIN QUẢN lý KHAI báo y tế điện tử sử DỤNG NODEJS, REACTJS và MONGODB

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI - ĐỒ ÁN TỐT NGHIỆP NGÀNH KỸ THUẬT PHẦN MỀM XÂY DỰNG ỨNG DỤNG WEBSITE HỆ THỐNG THÔNG TIN QUẢN LÝ KHAI BÁO Y TẾ ĐIỆN TỬ SỬ DỤNG NODEJS, REACTJS VÀ MONGODB CBHD : ThS Nguyễn Đức Lưu Sinh viên : Nguyễn Thị Ngọc Ánh Mã số sinh viên : 2018604140 Hà Nội – Năm 2022 MỤC LỤC LỜI CẢM ƠN DANH MỤC BẢNG BIỂU MỤC LỤC HÌNH VẼ MỞ ĐẦU CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1Tổng quan website khai báo y tế 1.1.1Khai báo y tế 1.1.2Tình hình kh 1.2Các cơng cụ thiết kế website hệ thống thông 1.2.1NodeJS 1.2.2Javascript 1.2.3ReactJS 1.2.4 MongoDB 1.3Kiến trúc phần mềm CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1Phân tích yêu cầu 2.2Các yêu cầu phi chức 2.3Biểu đồ use case 2.3.1Biểu đồ use c 2.3.2Use case phâ 2.3.3Use case phâ 2.3.4Use case phâ 2.3.5Use case phâ 2.4Mô tả chi tiết use case 2.4.1 Mô tả use case Đăng nhập nhân viên y tế 14 2.4.2 Mô tả use case Đăng nhập người dân 15 2.4.3 Mô tả use case Tạo QR code 17 2.4.4 Mô tả use case quản lý thông tin người dân 18 2.4.5 Mô tả use case người dân cập nhật thông tin .19 2.4.6 Mô tả use case người dân khai báo khẩn 20 2.5 Biểu đồ trình tự 22 2.5.1 Chức đăng nhập người dân 22 2.5.2 Chức đăng nhập nhân viên y tế .23 2.5.3 Chức tạo mã QR code 24 2.5.4 Chức cập nhật thông tin khai báo người dân .25 2.5.5 Chức quản lý thông tin người dân .26 2.6 Sơ đồ hoạt động 27 2.6.1 Chức đăng nhập nhân viên y tế .27 2.6.2 Chức đăng nhập người dân 28 2.6.3 Chức tạo QR code người dân 29 2.6.4 Chức quản lý thông tin người dân .30 2.6.5 Chức xem khai báo chi tiết người dân 31 2.7 Thiết kế sở liệu 32 2.7.1 Quan hệ bảng 32 2.7.2 Chi tiết bảng 32 2.8 Thiết kế giao diện 35 2.8.1 Màn hình đăng nhập .35 2.8.2 Màn hình nhập mã otp 35 2.8.3 Màn hình khai báo y tế 36 2.8.4 Màn hình mã QR 37 2.8.5 Màn hình khai báo khẩn cấp 37 2.8.6 Màn hình danh sách khai báo y tế 38 CHƯƠNG CÀI ĐẶT CHƯƠNG TRÌNH VÀ KIỂM THỬ HỆ THỐNG 39 3.1 Cài đặt chương trình 39 3.2 Phần mềm khai báo y tế điện tử 40 3.2.1 Màn hình chức đăng nhập người dân 40 3.2.2 Màn hình trang chủ khai báo y tế 42 3.2.3 Màn hình hướng dẫn khai báo y tế .44 3.2.4 Màn hình thống kê khai báo y tế nhân viên y tế 44 3.3 Kiểm thử phần mềm khai báo y tế điện tử 46 3.3.1 Kiểm thử chức đăng nhập người dân 46 3.3.2 Kiểm thử chức đăng nhập nhân viên y tế .48 3.3.3 Kiểm thử chức khai báo y tế 49 3.3.4 Kiểm thử chức khai báo khẩn cấp .55 KẾT LUẬN 59 TÀI LIỆU THAM KHẢO .60 PHỤ LỤC 61 LỜI CẢM ƠN Là sinh viên trường đại học Công nghiệp Hà Nội, đồ án tốt nghiệp minh chứng cho kiến thức có sau bốn năm học tập Trong q trình hồn thành đồ án tốt nghiệp, cố gắng thân em nhận hướng dẫn tận tình thầy cô anh chị bạn bè Qua đây, em xin chân thành cảm ơn khoa Công nghệ thông tin, trường đại học Công nghiệp Hà Nội trang bị kiến thức cho em suốt trình học tập tạo hội để em làm đồ án tốt nghiệp Đặc biệt, em cảm ơn tới thầy ThS Nguyễn Đức Lưu giúp đỡ, hướng dẫn, bảo tận tình để em hồn thành tốt đồ án Em cố gắng hồn thành đồ án tốt nghiệp mong nhận đóng góp ý thầy bạn để đồ án em hoàn thiện Em xin chân thành cảm ơn! ii DANH MỤC BẢNG BIỂU Bảng 1.1: Các yêu cầu phi chức 11 Bảng 2.1: Chi tiết bảng admin 33 Bảng 2.2: Chi tiết bảng user 35 Bảng 2.3: Chi tiết bảng form 36 Bảng 2.4: Chi tiết bảng formtype 36 Bảng 2.5: Chi tiết bảng question 37 Bảng 2.6: Chi tiết bảng answer 37 Bảng 3.1: Kiểm thử chức đăng nhập người dân 50 Bảng 3.2: Kiểm thử chức đăng nhập nhân viên y tế 52 Bảng 3.3: Kiểm thử chức khai báo y tế 54 Bảng 3.4: Kiểm thử chức khai báo khẩn cấp 60 iii MỤC LỤC HÌNH VẼ Hình 2.1 Biểu đồ use case tổng quan 11 Hình 2.2: Biểu đồ use case phân rã đăng nhập người dân 12 Hình 2.3: Biểu đồ use case phân rã quản lý thơng tin cá nhân .13 Hình 2.4: Biểu đồ use case phân rã quản lý thông tin người dân 13 Hình 2.5: Biểu đồ use case phân rã quản lý tài khoản 14 Hình 2.6: Biểu đồ trình tự chức đăng nhập người dân 22 Hình 2.7: Biểu đồ trình tự chức đăng nhập admin nhân viên y tế 23 Hình 2.8: Biểu đồ trình tự chức tạo mã QR Code 24 Hình 2.9: Biểu đồ trình tự chức cập nhật thơng tin người dân .25 Hình 2.10: Sơ đồ hoạt động nhân viên y tế đăng nhập 27 Hình 2.11: Sơ đồ hoạt động chức người dân đăng nhập 28 Hình 2.12: Sơ đồ hoạt động người dân tạo QR code 29 Hình 2.13: Sơ đồ hoạt động quản lý thông tin người dân .30 Hình 2.14: Sơ đồ hoạt động xem khai báo chi tiết người dân .31 Hình 2.15: Cơ sở liệu .32 Hình 2.16: Giao diện đăng nhập 35 Hình 2.17: Giao diện nhập mã otp 35 Hình 2.18: Giao diện khai báo y tế 36 Hình 2.19: Giao diện mã QR 37 Hình 2.20: Giao diện khai báo khẩn cấp .37 Hình 2.21: Màn hình danh sách khai báo y tế .38 Hình 3.22: Màn hình khởi chạy dự án 39 Hình 3.23: Mở terminal chạy chương trình 39 Hình 3.24: Màn hình đăng nhập 40 Hình 3.25: Màn hinh mail nhận mã otp 40 Hình 3.26: Màn hình nhập mã otp đăng nhập .41 Hình 3.27: Màn hình khai báo y tế 42 iv Hình 3.28: Màn hình tạo mã QR code 43 Hình 3.29: Màn hình khai báo y tế khẩn cấp 44 Hình 3.30: Màn hình hướng dẫn khai báo y tế 44 Hình 3.31: Màn hình danh sách khai báo y tế .44 Hình 3.32: Màn hình xem chi tiết khai báo y tế 45 MỞ ĐẦU Tên đề tài Xây dựng ứng dụng Website hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS MongoDB Lý chọn đề tài Cuối năm 2019, đại dịch Covid-19 xảy cướp sinh mạng hàng triệu người khắp giới Một vấn đề lớn khó giải lúc làm cách kiểm sốt thơng tin lịch trình di chuyển người dân, người có nguy mang mầm bệnh khoanh vùng dịch Khai báo y tế việc người dân cung cấp thông tin y tế cá nhân, thông tin lịch sử nơi đi, nơi nơi đến nhằm mục đích kiểm sốt phịng chống dịch bệnh COVID-19 Căn thông tin cập nhật, quan y tế địa bàn nắm bắt diễn biến sức khỏe, lịch trình lại, di chuyển cá nhân để theo dõi, hỗ trợ tình cần thiết Đặc biệt, người liên quan đến ca bệnh, người từ tâm dịch trở về, người có biểu sốt, ho, khó thở,… cách ly tập trung lấy mẫu xét nghiệm chỗ Các trường hợp khác tư vấn, hướng dẫn thực biện pháp phòng chống dịch địa phương Với tình hình người nhiễm Covid cách ly nhà nhiều, hệ thống khai báo y tế giúp cán y tế cập nhật thơng tin tình hình sức khỏe bệnh nhân cách nhanh chóng có phương pháp điều trị kịp thời hạn chế rủi ro đáng tiếc xảy Chính lý trên, em chọn đề tài “Xây dựng ứng dụng Website hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS MongoDB” có tính thực tiễn Mục tiêu nghiên cứu - Tổng hợp kiến thức NodeJS, ReactJS MongoDB để áp dụng vào xây dựng Website hệ thống thông tin khai báo y tế điện tử - Nghiên cứu, khảo sát thực tế ứng dụng website hệ thống thông tin quản ký tờ khai y tế, khai báo y tế - Phát biểu toán cần xử lý cho ứng dụng website khai báo y tế - Nghiên cứu đưa hướng làm công cụ công nghệ việc phát triển ứng dụng website hệ thống khai báo y tế - Phân tích thiết kế cho hệ thống thông tin khai báo y tế - Cài đặt triển khai ứng dụng - Website hệ thống thông tin khai báo y tế điện tử hướng tới tất người dân sinh sống lãnh thổ Việt Nam có ý định nhập cảnh Việt Nam giúp cho người dân dễ dàng khai báo y tế mà khơng phải trực tiếp đến quan có thẩm quyền khai báo làm giảm tình trạng lây nhiễm chéo -Hệ thống khai báo y tế có giao diện thân thiện phù hợp với người dùng Nội dung nghiên cứu - Khảo sát yêu cầu, trình khai báo y tế - Nghiên cứu, phân tích yêu cầu chức năng, phi chức website - Thiết kế phát triển hệ thống website hệ thống thông tin khai báo y tế điện tử: o Người dân hoàn thành chức năng: Khai báo y tế, khai hộ, khai báo khẩn cấp, hướng dẫn khai báo y tế o Nhân viên y tế: Thống kê khai báo khẩn cấp, tìm kiếm khai báo y tế theo tình trạng, trạng thái khai báo, xử lý thơng tin khai báo … - Cài đặt website kiểm thử chức Phạm vi đề tài - Về chức khai báo y tế: Khi người dân muốn khai báo y tế đăng nhập hệ thống khai báo email Đăng nhập hệ thống thành công, người dân tiến hành nhập thông tin khai báo y tế Khai báo y tế thành cơng hiển thị hình mã QR Code, người dân tải mã QR Code máy Ngoài chức khai báo, người dân thực chức 30 Test không chọn combobox 53 Số nhà 31 Test nhập Số nhà hợp lệ 32 Test không nhập Số nhà Số điện thoại textbox 33 Test nhập Số điện thoại hợp lệ Test nhập Số điện 34 thoại không định dạng 35 Test nhập Số điện thoại không hợp lệ 36 Test không nhập Số điện thoại 54 Email textbox Kiểm tra địa 37 email mặc định Kiểm tra 38 người dùng xóa hết email Kiểm tra sửa email không với mail đăng nhập 39 Các vấn đề khai báo y tế Kiểm tra trạng 40 thái mặc định nội dung khai báo Kiểm tra chọn 41 khai báo = Có Mã QR code 42 Hiển thị mã QR 43 Kiểm tra quét mã QR 55 3.3.4 Kiểm thử chức khai báo khẩn cấp Bảng 3.4: Kiểm thử chức khai báo khẩn cấp Mô tả trư ID hợp kiểm Họ tên Test nhập Họ tên hợp lệ Test không nhập Họ tên Test nhập Họ tên = ký tự khoảng trắng Số điện thoại textbox Test nhập Số điện thoại hợp lệ Test nhập Số điện thoại không định dạng Test nhậ điện th không hợ 56 Test không 10 nhập Số điện thoại Tỉnh combobox Test chế độ 11 mặc định 12 giới tính Test giá trị combobox tỉnh 13 Test chọn combobox 14 Test không 15 chọn combobox Quận/Huyện combobox Test chế độ 16 mặc định giới tính Test giá trị 17 combobox Quận/Huyện 18 Test chọn combobox tương ứng với tỉnh chọn 57 19 Test không 20 chọn combobox Phường/Xã combobox Test chế độ 21 mặc định giới tính Test giá trị 22 combobox Phường/Xã 23 Test chọn combobox tương ứng với tỉnh chọn 24 Test không 25 chọn combobox 58 Số nhà * textbox 26 Test nhập Số nhà hợp lệ 27 Test không nhập Số nhà Các vấn đề khai báo y tế radio button Kiểm tra trạng 28 thái mặc định nội dung khai báo Kiểm tra 29 chọn khai báo 59 KẾT LUẬN Qua trình làm đồ án, mang lại nhiều kinh nghiệm, kiến thức bổ ích có hội áp dụng kiến thức tích lũy sau năm tháng học tập trường Đại học Cơng nghiệp Hà Nội, phải kể đến kiến thức bật, hệ quản trị sở liệu, thiết kế trang Website để hoàn thành đề tài tốt nghiệp “Xây dựng ứng dụng Website hệ thống thông tin khai báo y tế sử dụng ReactJS, NodeJS MongoDB”, đạt kết như:  Hồn thành khảo sát phân tích thiết kế hệ thống, thiết kế sở liệu, thiết kế giao diện  Hệ thống xây dựng chức theo yêu cầu ban đầu phía người dùng người quản trị Thiết kế rõ ràng, mô tả chi tiết dễ hình dung  Trải nghiệm người dùng: Khai báo y tế, khai báo khẩn cấp, chỉnh sửa thông tin khai báo y tế,…  Hoạt động người quản trị: Quản lý khai báo y tế, khai báo khẩn cấp, xử lý liệu khai báo, tìm kiếm, sửa, xóa thông tin khai báo y tế Trong thời gian tới để hoàn thiện Website cách toàn diện qua việc bổ sung thêm chức đăng ký địa điểm khai báo y tế, đăng ký tiêm phòng covid cập nhật tính theo tình hình diễn biến bệnh dịch covid Cuối cùng, lần em xin gửi lời cảm ơn sâu sắc đến quý thầy cô trường Đại học Công nghiệp Hà Nội dạy cho em nhiều kiến thức bổ ích đặc biệt thầy Nguyễn Đức Lưu nhiệt tình hướng dẫn em hồn thành đề tài 60 TÀI LIỆU THAM KHẢO [1] Hoàng Quang Huy (2016), “Giáo trình sở liệu”, H Giáo dục Việt Nam 2011 [2].Vũ Thị Dương, Phùng Đức Hòa, Nguyễn Thị Hương Lan (2015), “Giáo trình Phân tích thiết kế hướng đối tượng”, NXB Khoa học Kỹ thuật [3] Https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/ [4] Https://freetuts.net/reactjs/tu-hoc-reactjs Https://viblo.asia/p/reactjs-nhung-kien-thuc-co-ban-de-bat-daujvElaPzA [5] 61 PHỤ LỤC https://drive.google.com/drive/folders/1bZcpFx0CfCWim7fGlRBPqY55sCX Etjp?usp=sharing ... sách khai báo y tế .44 Hình 3.32: Màn hình xem chi tiết khai báo y tế 45 MỞ ĐẦU Tên đề tài X? ?y dựng ứng dụng Website hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS. .. Website hệ thống thông tin khai báo y tế điện tử - Nghiên cứu, khảo sát thực tế ứng dụng website hệ thống thông tin quản ký tờ khai y tế, khai báo y tế 2 - Phát biểu toán cần xử lý cho ứng dụng website. .. hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS MongoDB? ?? có tính thực tiễn Mục tiêu nghiên cứu - Tổng hợp kiến thức NodeJS, ReactJS MongoDB để áp dụng vào x? ?y dựng Website