(Đồ án hcmute) tìm hiểu công nghệ meanstack và xây dựng ứng dụng website bệnh viện thú y cowhopi

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ THƠNG TIN TÌM HIỂU CƠNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI GVHD: LÊ VĂN VINH SVTT: LÊ VŨ HOÀNG HIỆP MSSV: 15110206 SVTT: TRẦN PHÚ QUÝ MSSV: 15110298 SK L 0 Tp Hồ Chí Minh, 2019 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - LÊ VŨ HOÀNG HIỆP -15110206 TRẦN PHÚ Q - 15110298 Đề Tài: TÌM HIỂU CƠNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI KHÓA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2015 – 2019 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THƠNG TIN - - LÊ VŨ HỒNG HIỆP - 15110206 TRẦN PHÚ QUÝ - 15110298 Đề Tài: TÌM HIỂU CƠNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI KHÓA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2015 – 2019 an ĐH SƯ PHẠM KỸ THUẬT CỘNG HOÀ XÃ HỘI CHỦ NGHĨA TP.HCM VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: LÊ VŨ HOÀNG HIỆP MSSV 1: 15110206 Họ tên Sinh viên 2: TRẦN PHÚ QUÝ MSSV 2: 15110298 Ngành: Công nghệ Thông tin Tên đề tài: TÌM HIỂU CƠNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI Họ tên giáo viên hướng dẫn: LÊ VĂN VINH NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: an Ưu điểm: Khuyết điểm Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an năm 20 ĐH SƯ PHẠM KỸ THUẬT CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT TP.HCM NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: LÊ VŨ HOÀNG HIỆP MSSV 1: 15110206 Họ tên Sinh viên 2: TRẦN PHÚ QUÝ MSSV 2: 15110298 Ngành: Công nghệ Thông tin Tên đề tài: TÌM HIỂU CƠNG NGHỆ MEANSTACK VÀ XÂY DỰN ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI Họ tên giáo viên phản biện: NGUYỄN MINH ĐẠO NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: an Ưu điểm: Khuyết điểm an Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an năm 20 LỜI CẢM ƠN Để hồn thành Khóa luận tốt nghiệp chun ngành Cơng Nghệ Phần Mềm nói chung q trình tìm hiểu công nghệ để xây dựng website bệnh viện thú y CowHopi nói riêng, nhóm chúng em xin gửi lời cảm ơn chân thành đến: Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM tạo điều kiện sở vật chất tốt, đáp ứng nhu cầu sinh viên, giảng viên với phòng học đẹp, máy chiếu, wifi để phục vụ cho việc học tập tìm kiếm thơng tin sinh viên, giảng dạy giảng viên Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM tạo điều kiện thuận lợi cho nhóm chúng em thực đề tài khóa luận tốt nghiệp Giảng viên hướng dẫn Thầy Lê Văn Vinh, người giảng dạy, hướng dẫn bảo tận tình, chi tiết, giải đáp thắc mắc kịp thời để chúng em hồn thành đề tài khóa luận tốt nghiêp cách tốt Xin chân thành cảm ơn anh, chị khóa bạn bè ủng hộ, giúp đỡ động viên chúng em thời gian học tập nghiên cứu khóa luận tốt nghiệp Do chưa có nhiều kinh nghiệm nên khơng thể tránh khỏi thiếu sót hạn chế, mong nhận ý kiến đóng góp từ phía thầy, để đề tài hồn thiện TP Hồ Chí Minh, ngày … tháng 09 năm 2019 Nhóm sinh viên thực Lê Vũ Hoàng Hiệp Trần Phú Quý an ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN  ĐỀ CƯƠNG KHĨA LUẬN TỐT NGHIỆP Họ tên SV: Lê Vũ Hoàng Hiệp …………… MSSV: 15110206 Trần Phú Quý ….……………… MSSV: 15110298 Thời gian làm tiểu luận: từ: 14/09/2018 đến: 28/12/2018 Chuyên ngành: Công Nghệ Phần Mềm Tên khóa luận: Tìm hiểu cơng nghệ MeanStack xây dựng ứng dụng website bệnh viện thú y CowHopi GV hướng dẫn: TS Lê Văn Vinh Nhiệm vụ khóa luận: - Tìm hiểu cơng nghệ MeanSatck - Xây dựng website bệnh viện thú y CowHopi Đề cương viết luận văn: Phần 1: MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Đối tượng phạm vị nghiên cứu Phương pháp nghiên cứu Phần 2: NỘI DUNG CHƯƠNG 1: CỞ SỞ LÝ THUYẾT 1.1 Giới thiệu tổng quan MeanStack: an 3.3.4.18.Cập nhập phòng khám : Hình 3.3.46 Giao diện cập nhập phịng khám Mơ tả : Cập nhập phòng khám Danh sách đối tượng: Loại đối tượng Mơ tả Form Thơng tin phịng khám Button Lưu phòng khám Button Hủy phòng khám STT Bảng 3.3.46 Danh sách đối tượng giao diện cập nhập phòng khám 137 an 3.3.4.19.Xếp lịch trực: Hình 3.3.47 Giao diện xếp lịch làm việc Mơ tả : Xếp lịch trực nhân viên Danh sách đối tượng: Loại đối tượng Mô tả Input Chọn tuần xếp lịch td Thông tin nhân viên th Thơng tin ngày Select Chọn phịng Check box Set lịch cứng Button Lư lịch STT Bảng 3.3.47 Danh sách đối tượng giao diện xếp lịch trực 138 an 3.3.4.20.Thống kê lượt truy cập: Hình 3.3.48 Giao diện thống kê lượt truy cập Mô tả : Thống kê lượt truy cập web theo mốc thời gian Danh sách đối tượng: Loại đối tượng Mô tả Select Chọn mốc thời gian Chart Biểu đồ đường lượt truy cập Col Cột biểu thị ssos lượng truy cập Row Cột biểu thị ngày tháng STT Bảng 3.3.48 Danh sách đối tượng giao diện thống kê lượt truy cập 139 an 3.3.4.21.Thống kê doanh thu: Hình 3.3.49 Giao diện thống kê doanh thu Mô tả : Thống kê doanh thu bệnh viện theo mốc thời gian Danh sách đối tượng: Loại đối tượng Mô tả Select Chọn mốc thời gian Chart Biểu đồ cột biểu thị doanh thu theo thời gian Col Cột biểu thị doanh thu Row Cột biểu thị mốc thời gian Chart Biểu đồ cột thể doanh thu theo dịch vụ Col Cột biểu thị doanh thu Row Cột biểu thị doanh thu theo dịch vụ STT Bảng 3.3.49 Danh sách đối tượng giao diện thống kê doanh thu 140 an 3.3.422.Thống kê dịch vụ : Hình 3.3.50 Giao diện thống kê dịch vụ Mô tả : Thống kê dịch vụ sử dụng khách hàng bệnh viện theo mốc thời gian Danh sách đối tượng: Loại đối tượng Mô tả Select Chọn mốc thời gian Chart Biểu đồ tròn thể tổng dịch vụ Label Thông tin mục biểu thị Chart Biểu đò thẻ phân bố dịch vụ Label Thông tin mục biểu thị STT Bảng 3.3.50 Danh sách đối tượng giao diện thống kê dịch vụ 141 an CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 Cài đặt: 4.1.1 Ngơn ngữ lập trình :  Xây dựng front end : HTML , CSS , Javascript , Jquery  Xây dựng Back-end : Javascript , Typescript 4.1.2 Công nghệ sử dụng :  NodeJs : Xây dựng back-end  Angular : Xây dựng front end  Express : Hỗ trợ tạo web server  MongoDb: Lưu trữ liệu  Socket.io : Hỗ trợ xử lý chức đặt lịch , thông báo lịch hẹn 4.2.Kiểm thử : 4.2.1 Kiểm thử hệ thống phía client: Id Test Name Test description Output Result Kiểm tra tính Mở website thay đổi Giao diện khơng bị vỡ Pass responsive kích thước trình thay đổi kích thước , giao diện duyệt từ lớn đến nhỏ thành phần thay đổi xếp hợp lý Kiểm tra màu sắc Mở website thay đổi Nội dung chữ , hình ảnh độ nét độ sáng hình nhìn rõ thành phần từ 100% > 25% giao diện Phơng màu trắng có chỗ khó nhìn 142 an Pass Fail Test chuyển trang Mở website , click Các trang load chuyển trang thông nhanh chóng, địa qua button , Pass đường link có website Test Đăng nhập Mở website , đăng Đăng nhập thành công , nhập website với tài báo lỗi đăng nhập sai Pass khoản user Thử đăng nhập sai mật , sai username Test đăng ký Mở website , chuyển Đăng ký tài khoản thành đến trang đăng ký tài công khoản , nhập thông tin nhấn button đăng ký Pass Thông báo cung cấp thông tin sai sai kiểu liệu Nhập thông tin sai với yêu cầu không đúngkiểu iệu Test chức Mở giao diện đặt lịch Xem thời gian biểu Pass xem thời gian nhiều lần thông qua lịch Chuyển trang lịch , Chuyển đổi chế chuyển chế độ xem độ lịch ổn định biểu hệ thống lịch Test chức Click vào button đặt Đặt lịch thành công đặt lịch lịch Thông báo lỗi chưa Thực đặt lịch đăng nhập 143 an Pass Đặt lịch chưa Không thể nhập dũ liệu đăng nhập trực tiếp Nhập sai thông tin Test chức Click vào button Thông tin cá nhân hiển xem thông tin cá thông tin cá nhân thị đầy đủ Test chức Click vào button cập Không thể cập nhập Fail cập nhập thông nhập Pass nhân 10 tin cá nhân 4.2.2 Kiểm tra hệ thống nhân viên bác sĩ Id Test Name Test description Output Result Kiểm tra tính Mở website thay đổi Giao diện khơng bị vỡ Pass responsive kích thước trình thay đổi kích thước , giao diện duyệt từ lớn đến nhỏ thành phần thay đổi xếp hợp lý Kiểm tra màu sắc Mở website thay đổi Nội dung chữ , hình ảnh độ nét độ sáng hình nhìn rõ thành phần từ 100% > 25% giao diện Test chuyển trang Phông màu trắng có Pass Fail chỗ khó nhìn Mở website , click Các trang load chuyển trang thông nhanh chóng, địa qua button , đường link có website 144 an Pass Test Đăng nhập Mở website , đăng Đăng nhập thành công , nhập website với tài báo lỗi đăng nhập sai Pass khoản user Thử đăng nhập sai mật , sai username Test Xem thông Mở website , đăng Dữ liệu hiển thị nhanh tin cá nhân nhập với quyền nhân đầy đủ , rõ nét viên bác sĩ Chọn profile , load lại Pass Chức cập nhập thành công trang nhiều lần Mở cập nhập thay đổi giá trị bát kỳ Test chức Mở website , đăng Lịch hiển thị đầy đủ xem lịch làm việc nhập với quyền nhân thông tin , hỗ trợ xem viên bác sĩ theo ngày , tháng , năm Pass Chọn cá nhân, chọn lịch làm việc , load lại trang nhiều lần Thay đổi tuần , tháng Test chức Mở website , đăng Tìm kiếm xác , tìm kiếm khách nhập với quyền nhân hiển thị đầy đủ thông tin hàng viên Chọnkhách khách hàng Pass hàng, nhập số điện thoại , bấm tìm kiếm Thay đổi số điện thoại Test chức Mở website , đăng Bệnh án lưu tạo bệnh án nhập với quyền nhân cách dễ dàng 145 an Pass viên / bác sĩ Tìm kiếm khách hàng , click button tạo bệnh án , nhập liệu 10 Test chức bổ Đăng nhập với quyền Bệnh án lưu lại sung bệnh án bác sĩ , vào phịng đầy đủ , có thơng báo bác sĩ khám , mở bệnh án lưu Pass , diền thông tin , thêm kết 4.2.3 Kiểm tra hệ thống quản trị viên Id Test Name Test description Output Result Kiểm tra tính Mở website thay đổi Giao diện không bị vỡ Pass responsive kích thước trình thay đổi kích thước , giao diện duyệt từ lớn đến nhỏ thành phần thay đổi xếp hợp lý Kiểm tra màu sắc Mở website thay đổi Nội dung chữ , hình ảnh độ nét độ sáng hình nhìn rõ thành phần từ 100% > 25% Pass giao diện Test chuyển trang Mở website , click Các trang load chuyển trang thơng nhanh chóng, địa qua button , đường link có website 146 an Pass Test Đăng nhập Mở website , đăng Đăng nhập thành công , nhập website với tài báo lỗi đăng nhập sai khoản admin Thử Pass đăng nhập sai mật , sai username Test chức Click button đổi mật đổi mật khẩu Mật đổi thành công Pass Nhập thông tin click button lưu Test chức Lần lượt lựa chọn Các thông tin user , hiển thị thông tin quản lý user , dịch vụ dịch vụ , viết , bác sĩ , viết , bác sĩ , lịch , lịch hẹn hiển thị hẹn đầy đủ Test chức Lần lượt lựa chọn Các thông tin dịch vụ Thêm thông tin thao tác thêm dịch vụ , viết , bác sĩ , viết , bác sĩ thêm thành công Nhập thông tin sai Báo lỗi sai thông tin Test chức Lần lượt lựa chọn Các thông tin dịch vụ Cập nhập thông thao tác sửa dịch vụ , , viết , bác sĩ tin viết , bác sĩ cập nhập thành công Nhập thông tin sai Báo lỗi sai thôn tin Test chức Lần lượt lựa chọn Các thông tin dịch vụ Thêm thông tin thao tác xóa dịch vụ , , viết , bác sĩ viết , bác sĩ xóa thành cơng 147 an Pass Pass Pass Pass 10 Test chức Lần lượt chọn mục Các thông tin hiển thị quản lý thông tin thông tin cá nhân đầy đủ cá nhân doanh doanh nghiệp Pass nghiệp 11 Test chức Lần lượt thực cập nhập thông cập nhập thông tin cá tin cá nhân nhân doanh doanh nghiệp nghiệp Không thể cập nhập Fail Pass Nhập sai thông tin 12 Test chức Xếp lịch cho tất Toàn lịch làm việc xếp lịch trực nhân viên , xếp lịch lưu thành công cho nhân viên , xếp lịch cho vài nhân viên 13 Test chức Lần lượt chọn mục Thông tin thống kê hiển thống kê thống kê lịch hẹn thị đầy đủ Pass thống kê truy cập PHẦN KẾT LUẬN Kết đạt được: Sau thời gian nghiên cứu thực đề tài “Tìm hiểu cơng nghệ MeanStack xây dựng website bệnh viện thú y”, nhóm nắm kiến thức tảng công nghệ MeanStack ứng dụng MeanStack để hoàn thành trang web ite bệnh viện thú y dự kiến Ngoài ra, nhóm cịn đạt kết sau: - Hiểu sâu javascript, typescript 148 an - Sử dụng tốt thư viện javascrip mDatatable, fullCalendar, canvasjs chart - Ứng dụng socket-io để xấy dựng web realtime - Ứng dụng node js viết web server api Ưu điểm: Ứng dụng có ưu điểm sau: - Đáp ứng chức cần thiết cho bệnh viện thú y - Giúp quản lý nhân viên, thành viên dễ dàng hiệu - Môi trường thực nghiệp vụ bác sĩ nhân viên tốt, thuận tiện - Giúp quản lý việc đặt lịch khám chữa bệnh cách khoa học hiệu quả, giảm rủi ro lịch ảo, từ giúp chăm sóc khách hàng tốt Giao diện đẹp, dễ sử dụng - Hạn chế: Ứng dụng có nhược điểm sau: Tốc độ xử lý chậm, chưa phát huy mạnh công nghệ node - js - Chưa sâu vào vấn đề bảo mật - Vẫn cịn vài chức chưa hồn thiện Hướng phát triển: Vì thời gian nghiên cứu nguồn lực có hạn nên ứng dụng cịn nhiều thiếu sót Trong tương lai nhóm cố gắng phát triển công cụ theo hướng: - Tăng tốc độ xử lý - Hồn thiện chức cịn lại - Bảo mật ứng dụng DANH MỤC TÀI LIỆU THAM KHẢO [1] http://engineering.vtvcab.vn/mean-stack-ban-da-thu-chua/ [2] https://laptrinhvien.io/gioi-thieu-component-trong-angular/ [3] https://viblo.asia/p/attribute-directives-trong-angular 149 an [4] https://www.w3schools.com [5] https://w3layouts.com/ [6] https://stackoverflow.com/ [7] https://laptrinhvien.io/tong-quan-ve-angular/ [8] https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html [9] https://techmaster.vn/posts/33428/nodejs-la-gi-va-tai-sao-toi-nen-hoc-lap-trinh- nodejs [10] https://developer.mozilla.org/vi/docs/Learn/Common_questions/What_is_a_web_server [11] http://code4fun.vn/code4fun/page/12/ [12] https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N [13] https://pethealth.vn/ [14] http://sasakihospital.com/ 150 an an ... ? ?Tìm hiểu cơng nghệ MeanStack x? ?y dựng website bệnh viện thú y CowHopi? ?? nhằm cung cấp giải pháp giải vấn đề MỤC ĐÍCH CỦA ĐỀ TÀI - Tìm hiểu cơng nghệ MeanStack - Ứng dụng công nghệ x? ?y dựng dựng... Nghệ Phần Mềm Tên khóa luận: Tìm hiểu cơng nghệ MeanStack x? ?y dựng ứng dụng website bệnh viện thú y CowHopi GV hướng dẫn: TS Lê Văn Vinh Nhiệm vụ khóa luận: - Tìm hiểu cơng nghệ MeanSatck - X? ?y. .. viên 2: TRẦN PHÚ QUÝ MSSV 2: 15110298 Ngành: Công nghệ Thơng tin Tên đề tài: TÌM HIỂU CƠNG NGHỆ MEANSTACK VÀ X? ?Y DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI Họ tên giáo viên hướng dẫn: LÊ VĂN