CHƯƠNG 1: TỔNG QUAN HỆ THỐNG 3. Mục tiêu Mục tiêu của đề tài là xây dựng một phần mềm quản lý hồ sơ sức khỏe điện tử cho các phòng khám bác sĩ gia đình. Đối với quản trị viên của các chi nhánh, phần mềm cung cấp những nhóm chức năng: quản lý thông tin chi nhánh, quản lý thông tin các bác sĩ của chi nhánh, cấu hình chi nhánh bằng những nhóm chức năng: quản lý chuyên khoa bác sĩ của chi nhánh, quản lý phòng và kiểu phòng của chi nhánh. Đối với bác sĩ, phần mềm cung cấp các chức năng liên quan đến quản lý hồ sơ sức khỏe điện tử của người bệnh như: tạo thông tin nhân khẩu cho người bệnh, tạo hồ sơ khám cho người bệnh khi người bệnh đến khám tại một chi nhánh bất kỳ, quản lý thông tin khám lâm sàng, quản lý thông tin sức khỏe, quản lý thông tin cận lâm sàng, quản lý thông tin chẩn đoán và kết luận, quản lý đơn thuốc,.
Sau cùng với sự kết hợp của các chức năng này, sẽ giúp bác sĩ hoàn thiện được các bộ hồ sơ bệnh án của người bệnh và lưu các bệnh án đó lại theo lịch sử, giúp người bệnh của phòng khám có một bộ hồ sơ sức khỏe thống nhất cho dù là đi khám khi nào, đi khám ở chi nhánh nào. Giới hạn đề tài Vì việc triển khai các hệ thống quản lý bệnh án vốn dĩ rất phức tạp, đề tài chỉ dừng lại ở việc cung cấp một phẩn mềm thỏa mãn những tiêu chí cơ bản nhất của một bộ hồ sơ sức khỏe điện tử thuộc quy mô một phòng khám bác sĩ gia đình như: - Chứa tất cả thông tin sức khỏe cá nhân của từng người bệnh đến khám theo diện ngoại trú không có bảo hiểm y tế, tại tất cả các lần khám và tất cả các chi nhánh. - Được các bác sĩ tại các chi nhánh nhập thông tin điện tử vào hồ sơ sức khoẻ điện tử tại điểm chăm sóc trong suốt các lần khám. - Luôn có sẵn thông tin và được truy cập bởi tất cả các chi nhánh đã và đang chăm sóc sức khỏe cho người bệnh.
Trong quá trình hiện thực đề tài, tôi nhận thấy có nhiều thiếu sót chức năng nhưng vì giới hạn về thời gian và nhân lực, tôi sẽ tiếp tục phát triển trong tương lai. Nổi bật trong 18 CHƯƠNG 1: TỔNG QUAN HỆ THỐNG đó là về việc chưa sử dụng chữ ký số, đồng thời phần mềm chưa đáp ứng các yêu cầu về pháp lý, quyền riêng tư, bảo mật thông tin, chất lượng và độ chính xác của thông tin hồ sơ bệnh án của người bệnh theo 8 cấp độ của bệnh án điện tử cũng như các chuẩn thông tin y tế điện tử đang được áp dụng. 19 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 1. React Một trong những vấn đề đầu tiên là lựa chọn và xây dựng giao diện, bao gồm UI, UX, và phát triển các tính năng ở phía người dùng.
Do tập đối tượng sử dụng là các phòng khám và bác sĩ, đã quen với việc sử dụng giao diện web, nền tảng web application được ưu tiên lựa chọn do mức độ phổ biến, dễ sử dụng và phát triển của nó. Sau khi cân nhắc công nghệ phát triển web application như VueJs, Html-Js-Css thuần, AngularJs và ReactJs, tôi đã cân nhắc lựa chọn ReactJs là khung xương để xây dựng đề tài. React (hay ReactJs, React.js) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng một cách hiệu quả. Nó là một thư viện phổ biến hàng đầu hiện nay để xây dựng các Single-page-application (SPA).
Single page application Hình 2.1: Client side rendering SPA là một khái niệm và xu hướng mới trong việc phát triển web. Single page application là một ứng dụng web giúp nâng cao trải nghiệm người dùng bằng 20 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG cách sử dụng Client Side Rendering. Đầu tiên khi tải một trang web bất kỳ, SPA sẽ tải một trang HTML đơn, mã nguồn Js, sau đó dựa trên request của người dùng, SPA sẽ tiếp tục cập nhật giao diện mà không cần phải request html file từ phía server. Toàn bộ resource của web bao gồm các file Css, Javascript, master layout hay cấu trúc web page sẽ được load lần đầu tiên khi chúng ta bắt đầu duyệt một website nào đó.
Ở những lần sau, khi chuyển sang một page/route khác, SPA sẽ phát hiện được sự thay đổi của URL và từ đó cập nhật giao diện mà không phải yêu cầu lại toàn bộ resource. Việc này mang đến trải nghiệm cho người dùng web tốt hơn, giảm thời gian phải load lại toàn bộ trang web cồng kềnh, tiết kiệm băng thông cũng như thời gian chờ đợi. Việc này là trái ngược hoàn toàn với trang web truyền thống khi toàn bộ trang web phải load lại mỗi khi chuyển trang. SPA đem lại trải nghiệm tốt hơn, đặc biệt trên các nền tảng mobile nơi mà băng thông thường thấp hơn máy tính.
React component ReactJS cho phép tái sử dụng mã nguồn bằng cách chia các thành tố của website thành các React Component. Các component được sử dụng lồng vào nhau, việc sử dụng lại logic và giao diện của các component giúp giảm tải công việc viết code và testing. Ý tưởng về Component chính là chìa khóa giải quyết vấn đề khó khăn khi dự án ngày càng lớn. Giao diện được tạo ra từ các Component ghép lại với nhau, một Component có thể được sử dụng tại nhiều nơi trong dự án.
Vì vậy, rất dễ dàng khi chúng ta chỉ cần quản lý các Component của mình. JSX React giới thiệu một cú pháp mới trong việc phát triển các component là JSX. JSX cho phép người phát triển nhúng HTML vào trong JSX làm cho các component có thể dễ hiểu và quen thuộc hơn. Nó thay đổi cú pháp dạng gần như XML về thành Javascript, giúp người lập trình có thể code ReactJs bằng cú pháp của XML thay vì sử dụng Javascript.
Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React. Virtual Dom 21 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG DOM ảo (virtual DOM) là một trong những tính năng mới giúp ReactJs có tốc độ nhanh đáng kể. Đội ngũ phát triển ReactJs nhận ra rằng JavaScript rất nhanh, nhưng việc cập nhật DOM khiến nó chậm lại. Do đó, React giảm thiểu các thay đổi DOM bằng cách hiệu quả và thông minh nhất để cập nhật DOM.
React sử dụng một cây DOM (tree) lưu giữ ánh xạ của một DOM bao gồm các thuộc tính và thành phần con ở trong. Khi dữ liệu của Component thay đổi, React cần phải vẽ lại (rerender) giao diện. Thay vì tạo ra thay đổi trực tiếp vào mô hình DOM của trình duyệt, nó tạo ra thay đổi trên một DOM ảo (virtual DOM), tính toán bằng các thuật toán nhằm hạn chế nhiều nhất số lần render lại. React sẽ tự tính toán sự khác biệt giữa 2 mô hình DOM, và chỉ cập nhập các khác biệt cho DOM của trình duyệt.
Cách tiếp cận này tăng hiệu năng cho ứng dụng web, giảm thiểu số lần tác động lên DOM của trình duyệt, giúp trải nghiệm của người dùng mượt mà hơn. React hook Trong phiên bản 16.8, ReactJs giới thiệu tính năng mới là React Hook. Giờ đây, chúng ta có thể kết nối state và component lifecycle vào functional component, giảm đáng kể số lượng code, làm các component trở nên gọn nhẹ hơn. Nó ra đời để giải quyết một số vấn đề sau: - “Wrapper hell” các component được lồng (nested) vào nhau nhiều tạo ra một DOM tree phức tạp.
22 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG - Component quá lớn. - Sự phức tạp của Lifecycles trong class. Một số hooks mặc định của react gồm `useState`, `useEffect`, `useRef`, và ta có thể tự viết một hook riêng để tái sử dụng. React hook dựa trên cơ chế closure của JS, nhằm lưu giữ state độc lập và sử dụng được trong các functional component.
Với hệ thống thư viện phong phú, cộng đồng đông đảo vào vững chắc, React đem lại cho tôi rất nhiều lợi ích trong suốt quá trình phát triển giao diện. Redux Trong ReactJs, khi một dữ liệu thay đổi nó sẽ ảnh hưởng tới nhiều component cùng lúc. Việc đó sẽ gây ra việc rerender và vẽ lại giao diện. Hầu hết các thư viện như React, Angular,… sẽ được xây dựng sao cho các components có thể tự quản lý nội bộ các state của chúng mà không cần bất kỳ một thư viện hay công cụ nào từ bên ngoài.
State của component khuyên dùng là nên chia sẻ ở component cha gần nhất của chúng. Trong một ứng dụng, nơi dữ liệu được chia sẻ thông qua các components, dữ liệu và logic có thể nằm phân tán giữa các component khác nhau. Việc xử lý một luồng phức tạp hoặc kết hợp nhiều tầng logic. Một sự lý tưởng là data trong một component nên live trong chỉ một component.
Vì vậy việc share data thông qua các components anh em sẽ trở nên khó khăn hơn. Ví dụ, trong React để share data thông qua các components anh em, một state phải live trong component cha. Một method để update chính state này sẽ được cung cấp bởi chính component cha này và pass như props đến các components con. Ứng dụng càng lớn khiến việc quản lý state từ các component cha, các component con sử dụng lại dữ liệu của component cha, cập nhật, validate và thêm xử lý logic khiến việc quản lý, lưu trữ và đồng bộ state giữa các component trở nên rối rắm và phức tạp.
Redux ra đời như một giải pháp đơn giản giải quyết vấn đề đó: nó tập trung dữ liệu lại một nơi, và component nào cần sẽ phải kết nối với store trong redux. Tất cả STATE của ứng dụng được lưu trữ ở STORE. Mỗi component có thể truy cập trực tiếp đến state được lưu trữ thay vì phải truyền thuộc tính từ component này đến component khác. 23 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG Hình 2.3: Redux quản lý state bằng store Ngoài ra, việc thay đổi STATE cần thông qua các ACTIONS.
Mỗi ACTION sẽ tương ứng với một logic nghiệp vụ, được xử lý thông qua các REDUCER. Việc các STATE chỉ được thay đổi khi gởi một ACTION giúp việc quản lý việc thay đổi dữ liệu đồng bộ và thống nhất. Các khái niệm cơ bản của redux: - State: Trạng thái của model. Thông thường, STATE là một JavaScript OBJECT thuần, và là một immutable data.
- Actions: Action là một OBJECT thuần để thay đổi trạng thái. Action là cách duy nhất để cập nhật dữ liệu vào Store. Bất kỳ dữ liệu nào, cho dù từ các sự kiện từ người dùng, callback từ mạng hay các nguồn cần phải được gửi đi dưới dạng Action. - Reducers: Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới.