Chương 1: Các công nghệ sử dụng Chương 2: Khảo sát hiện trạng và xác định yêu cầu Khảo sát nghiệp vụ Xác định yêu cầu Chương 3: Thiết kế phần mềm Thiết kế hệ thống Thiết kế dữ liệu Thiết kế giao diện Chương 4: Cài đặt và kiểm thử ------------------------------------------------------------------------------------------------------------------ ---------- Phần mở đầu 6 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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 do an 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í.