đồ án 2 xây dựng ứng dụng tư vấn sức khỏe cho cộng đồng

Chính vìvậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer có thể phá vỡ giao diện người dùng phức tạp thành các thành phần đơn giản hơn.. Nềntảng này được p

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN MÔN HỌC

ĐỀ TÀI:

Xây dựng ứng dụng tư vấn sức khỏe cho cộng đồng

Giảng viên hướng dẫn: ThS Trần Anh Dũng Sinh viên: Nguyễn Tấn Huy - 20520204

Nhóm thực hiện

Trường Đại học Công nghệ Thông tin, tháng 12 năm 2023

MỤC LỤC

CH ƯƠNG I GIỚI THIỆU ĐỀ TÀI NG I GI I THI U Đ TÀI ỚI THIỆU ĐỀ TÀI ỆU ĐỀ TÀI Ề TÀI 3

Ch ương VI: Tài liệu tham khảo ng VI: Tài li u tham kh o ệu tham khảo ảo 51

Ch ương VI: Tài liệu tham khảo ng VII: Cách cài đ t ặt 52

CHƯƠNG I GIỚI THIỆU ĐỀ TÀI1.1 Giới thiệu chung

- Hiện nay, nhu cầu về nâng cao sức khỏe cũng như phòng tránh các loại bệnh tậtđang rất được cộng đồng dành nhiều sự chú ý, đặc biệt là khi đại dịch Covid 19bùng phát Nắm bắt được nhu cầu này thì nhóm quyết định xây dựng một websitevới mục đích tư vấn sức khỏe giúp tăng cường nhận thức và kiến thức về sức khỏecho cộng đồng, từ đó giúp ngăn ngừa và giảm thiểu các bệnh tật

1.2 Mục tiêu đề tài

1.2.1 Lý thuyết

- Nghiên cứu về ngôn ngữ lập trình Javascript và framework ReactJS

- Nghiên cứu về các thao tác làm việc và phát triển ứng dụng web trên VisualStudio Code

- Nghiên cứu và sử dụng ứng dụng lưu trữ cơ sở dữ liệu trên đám mây - MongoDB

- Nghiên cứu phát triển ứng dụng trên nhiều nền tảng

- Trải qua quá trình tìm hiểu và thực hiện đề tài, nhóm đã giải quyết được các vấn

đề đặt ra ban đầu, từng bước giải quyết và liên tục đặt ra những vấn đề mới đểngày càng hoàn thiện sản phẩm Những bước thực hiện:

- Phân tích yêu cầu bài toán

- Lựa chọn nền tảng công nghệ phù hợp với yêu cầu

- Nghiên cứu cơ sở lý thuyết của công nghệ lựa chọn

- Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn

- Kiểm tra và khám phá các ứng dụng tương tự để tối ưu trải nghiệm người

dùng và cải thiện các tính năng cho ứng dụng

1.4 Tổng quan về chức năng

⮚ Cung cấp các bài báo liên quan đến sức khỏe

⮚ Công cụ tìm kiếm bài báo theo từ khóa

⮚ Đặt lịch khám bệnh với bác sĩ

⮚ Có thể log in với tư cách bệnh nhân hoặc bác sĩ

⮚ Bác sĩ và bệnh nhân có thể tùy chỉnh profile cá nhân

⮚ Có thể tra cứu bệnh dựa trên những triệu chứng được cung cấp

CHƯƠNG II CƠ SỞ LÝ THUYẾT2.1 ReactJS

2.1.1 Tổng quan

- ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook đểtạo ra những ứng dụng web hấp dẫn, nhanh và hiệu quả với mã hóa tối thiểu Mụcđích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà cònphải nhanh, khả năng mở rộng cao và đơn giản

- Sức mạnh của nó xuất phát từ việc tập trung vào các thành phần riêng lẻ Chính vìvậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer

có thể phá vỡ giao diện người dùng phức tạp thành các thành phần đơn giản hơn

2.1.2 Đặc trưng của ReactJS

2.1.2.1 JSX

Hình 2.1 Đặc trưng đầu tiên - JSX

- Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trangweb thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript vàcho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML đểrender các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạynhanh hơn so với code JavaScript tương đương

2.1.2.2 Redux

Hình 2.2 Đặc trưng thứ hai - Redux

- Redux là một predictable state management tool cho các ứng dụng Javascript Nógiúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môitrường khác nhau (client, server, and native) và dễ dàng để test Redux ra đời lấycảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vậyRedux thường dùng kết hợp với React

2.1.2.3 Single-way data flow (Luồng dữ liệu một chiều)

Hình 2.3 Đặc trưng thứ ba - Single-way Data flow

- ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chianhỏ view thành các component nhỏ có mối quan hệ chặt chẽ với nhau Tại saochúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trongReactJS?

- Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một chiều

từ cha xuống con Việc ReactJS sử dụng one-way data flow có thể gây ra một chútkhó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án Tuynhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chứcnăng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình

2.1.2.4 Virtual DOM

Hình 2.4 Đặc trưng thứ tư - Virtual DOM

- Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi,chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được

sự thay đổi đó Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò làView nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngượclại Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ởView nhưng vẫn thực hiện được cơ chế Data-binding Điều này làm cho tốc độứng dụng tăng lên đáng kể – một lợi thế không thể tuyệt vời hơn khi sử dụngVirtual-DOM

2.1.3 Ưu điểm và nhược điểm

2.1.3.1 Ưu điểm

- Reactjs dễ học và sử dụng:

- Công nghệ này được cung cấp rất nhiều tài liệu và hướng dẫn cụ thể, bêncạnh đó rất cộng đồng đông đảo nên phần lớn thắc mắc của bạn sẽ đượcgiải quyết

- Vì Reactjs là thư viện mã nguồn mở của Javascript, cho nên bất kì developnào có nền tảng về Javascript đều tiếp cận công nghệ này dễ dàng

- Nâng cao hiệu suất:

- Reactjs cải thiện hiệu suất nhờ DOM ảo DOM là API lập trình và xử lý đanền tảng Hầu hết các lập trình viên đều gặp vấn đề về DOM khi chúngđược cập nhật, khi đó sẽ làm giảm đi hiệu suất của trang web React giảiquyết vấn đề này bằng việc cung cấp DOM ảo Khi viết các component,chúng ta không viết trực tiếp vào DOM Thay vào đó chúng ta viết vào cáccomponents ảo, và sau đó sẽ chuyển thành DOM Vì thế, React sẽ cải thiệnhiệu suất của trang web

- React component:

- Với React component, trang web của bạn sẽ được chia ra thành các thànhphần nhỏ để việc quản lý dễ dàng hơn Hơn thế thế, các component có tínhtái sử dụng cao Cho nên bạn có thể sử dụng lại nó một cách độc lập

- React Developer Tools:

- Reactjs không chỉ là một thư viện tốt để thiết kế giao diện người dùng, mà

nó còn được hỗ trợ bởi React Developer Tools Đây là extension trên trìnhduyệt giúp bạn tránh được nhiều lỗi bằng cách cung cấp cho bạn cái nhìntổng quan về các state và prop hiện tại của từng Component, Componenttree cụ thể, cũng như theo dõi được hiệu năng các quá trình trongcomponent với các khoảng thời điểm khác nhau

2.2 NodeJS

2.2.1 Tổng quan

Hình 2.5 Tổng quan về NodeJS

- NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn

mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nềntảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháphoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện(event-driven) không đồng bộ

(non Không có buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âmthanh hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữliệu theo từng phần (chunk).

- Đơn luồng: Node.JS sử dụng mô hình đơn luồng với vòng lặp sự kiện Do đó cácứng dụng có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyềnthống như Apache HTTP Server

2.2.3 Ưu và nhược điểm

2.2.3.1 Ưu điểm

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

- Chia sẻ cùng code ở cả phía client và server

- NPM(Node Package Manager) và module Node ngày càng phát triển mạnh mẽ

- Khó thao tác với cơ sử dữ liệu quan hệ

- Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác

- Cần có kiến thức tốt về JavaScript

- Không phù hợp với các tác vụ đòi hỏi nhiều CPU.

2.3 MongoDB

2.3.1 Tổng quan

Hình 2.6 Tổng quan về Firebase

- MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL (Not Only SQL), được thiết kế

để lưu trữ và truy xuất dữ liệu dưới dạng tài liệu MongoDB là một hệ quản trị cơ

sở dữ liệu mã nguồn mở, phát triển bởi MongoDB Inc

2.3.2 Cách thức hoạt động

- Tài liệu (Document): Dữ liệu trong MongoDB được tổ chức thành các tài liệu, là

đơn vị cơ bản của lưu trữ Mỗi tài liệu là một bản ghi JSON/BSON chứa các cặp khóa-giá trị

- Bộ sưu tập (Collection): Các tài liệu được tổ chức thành các bộ sưu tập, tương tự

như bảng trong hệ thống cơ sở dữ liệu quan hệ Các bộ sưu tập không yêu cầu cấu trúc đồng nhất, cho phép lưu trữ các tài liệu có cấu trúc khác nhau trong cùng một

bộ sưu tập

- Cơ sở dữ liệu (Database): Các bộ sưu tập được nhóm lại thành các cơ sở dữ liệu

Mỗi cơ sở dữ liệu có thể chứa nhiều bộ sưu tập, tùy thuộc vào cấu trúc và mục

đích của ứng dụng.

- Mô hình dữ liệu Tài liệu (Document Model): MongoDB sử dụng mô hình dữ

liệu tài liệu, nơi mỗi đối tượng hoặc bản ghi được biểu diễn dưới dạng tài liệu có thể chứa các trường và giá trị

- Indexing: MongoDB hỗ trợ việc tạo index để tăng tốc độ truy xuất dữ liệu Index

có thể được tạo trên một hoặc nhiều trường trong một bộ sưu tập

- Replication: MongoDB hỗ trợ replication để đảm bảo tính sẵn sàng và sao lưu dữ

liệu Các bản sao của dữ liệu có thể tồn tại trên nhiều máy chủ, giúp nâng cao sự

độ tin cậy và khả năng chịu lỗi

- Sharding: MongoDB cung cấp tính năng sharding để phân phối dữ liệu trên nhiều

máy chủ, giúp mở rộng hệ thống và xử lý lưu lượng lớn

- Ngôn ngữ truy vấn: Truy vấn trong MongoDB được thực hiện bằng cách sử dụng

ngôn ngữ truy vấn mạnh mẽ, giúp tìm kiếm và lấy dữ liệu một cách linh hoạt

2.3.3 Ưu điểm và nhược điểm

2.3.3.1 Ưu điểm

- Linh hoạt và Không cần Schema cố định: MongoDB cho phép lưu trữ các tài

liệu với cấu trúc không đồng nhất trong cùng một bộ sưu tập, giúp ứng dụng dễdàng thay đổi cấu trúc dữ liệu mà không cần phải thay đổi schema

- Hiệu suất cao: MongoDB cung cấp khả năng truy xuất dữ liệu nhanh chóng do sử

dụng indexing và có thể phân phối dữ liệu trên nhiều máy chủ

- Mô hình dữ liệu Tài liệu: Mô hình dữ liệu tài liệu phản ánh tự nhiên với các đối

tượng trong ứng dụng, làm cho việc lưu trữ và truy xuất dữ liệu trở nên dễ hiểu vàthân thiện với nhà phát triển.

- Khả năng mở rộng: MongoDB hỗ trợ sharding, cho phép mở rộng hệ thống trên

nhiều máy chủ để đối mặt với tải cao

- Cộng đồng lớn và Hỗ trợ đa ngôn ngữ: MongoDB có một cộng đồng lớn, và hỗ

trợ nhiều ngôn ngữ lập trình thông qua các trình điều khiển chính thức

- Tính Năng Replica Set: Cung cấp khả năng sao lưu và khả năng chịu lỗi thông

qua các bản sao dữ liệu trên nhiều máy chủ

2.3.3.2 Nhược điểm

- Khả năng xử lý quan hệ: Trong trường hợp các mối quan hệ phức tạp giữa các

bảng, một hệ quản trị cơ sở dữ liệu quan hệ (SQL) có thể phù hợp hơn

- Tài nguyên Tiêu tốn: MongoDB có thể tiêu tốn nhiều tài nguyên hơn so với một

số hệ quản trị cơ sở dữ liệu khác, đặc biệt là khi xử lý lưu lượng dữ liệu lớn

- Chưa hỗ trợ giao transactoin nhiều bảng (multi-document transactions):

Trong một số trường hợp, khi cần thực hiện các thao tác transactoin trên nhiều tàiliệu, MongoDB có thể không hỗ trợ tốt như một hệ quản trị cơ sở dữ liệu quan hệ

- Học cong: Đối với những người mới sử dụng MongoDB, việc hiểu và sử dụng

đúng cách có thể đòi hỏi một thời gian học tập

- Không có kiểm soát giao dịch ACID đầy đủ: Trong môi trường mà cần kiểm

soát giao dịch chặt chẽ, một số hệ quản trị cơ sở dữ liệu SQL với hỗ trợ ACID đầy

đủ có thể là lựa chọn hợp lý hơn

CHƯƠNG III PHÂN TÍCH THIẾT KẾ

3.1 Mô hình Use-case:

1 Use-case diagram:

2 Actor:

User Người sử dụng website với vai trò

tham khảo, tra cứu hoặc đặt lịch khám

3 Chi tiết Use-case:

Register Đăng ký tài khoản khi chưa có tài

khoản

Bookingappoinment

Đặt lịch hẹn với bác sĩ

Apply doctor Người dùng có thể đăng ký để trở

thành 1 bác sĩ của websiteSymtomp

mangement cũng như bác sĩNotification Thông báo các thông tin quan trọng

- Bước 1: Người dùng nhấp chuột vào nút login

- Bước 2: Ứng dụng hiển thị màn hình đăng nhập để người dùng đó đăng nhập

- Bước 3: Người dùng nhập email và mật khẩu của mình

- Bước 4: Người dùng nhấn nút “Login” để thể hiện muốn truy cập vào hệ thống

- Bước 5: Ứng dụng kiểm tra và xác nhận đăng nhập

4.1.2.2 Luồng đi khác

Nếu người dùng chưa có tài khoản, đăng ký tài khoản mới

4.1.3 Yêu cầu khác

Không có

4.1.4 Tiền điều kiện

User đã có tài khoản

4.1.5 Hậu điều kiện

Kết quả đăng nhập là “Login Successfully” thì người dùng đó mới có thể truy cập vào hệ thống

4.1.6 Activity diagram

4.2.2.2 Luồng đi khác

Không có

4.2.3 Yêu cầu khác

Không có

4.2.4 Tiền điều kiện

Người dùng đã đăng nhập vào ứng dụng

4.2.5 Hậu điều kiện

Người dùng đã đăng xuất thành công ứng dụng

4.3.2.1 Luồng đi chính

- Bước 1: Người dùng điều hướng đến thanh menu

- Bước 2: Người dùng click vào nút “Profile”

- Bước 3: Phần mềm hiển thị màn hình “Profile”

- Bước 4: Người dùng tùy chỉnh các thông tin muốn thay đổi

- Bước 5: Người dùng xác nhận mật khẩu

- Bước 6: Người dùng click vào nút “Update”

- Bước 7: Hệ thống thông báo người dùng đã đổi mật khẩu thành công

4.3.2.2 Luồng đi khác

4.3.3 Yêu cầu khác

Không có

4.3.4 Tiền điều kiện

Người dùng đã đăng nhập vào website và vào màn hình “Profile”

4.3.5 Hậu điều kiện

Người dùng đã đổi thông tin thành công

4.3.6 Extend Points

- Tình huống: Người dùng nhập sai mật khẩu cũ

● Website thông báo người dùng nhập sai mật khẩu

4.3.7 Activity diagram

- Bước 1: User chuyển tới màn hình đăng ký

- Bước 2: Web hiển thị màn hình đăng ký

- Bước 3: User nhập các thông tin của mình (username, email, password, confirmpassword)

- Bước 4: User nhấn nút đăng ký

- Bước 5: Hệ thống xác nhận user đăng ký thành công

- Bước 6: Web chuyển hướng người dùng sang màn hình login

4.5 Đặc tả Use-case “Contact us”

4.5.1 Mô tả ngắn

Nếu người dùng muốn liên hệ với admin có thể

4.5.2 Luồng xử lý event

4.5.2.1 Luồng đi chính

- Bước 1: Người dùng mở website

- Bước 2: User lướt đến phần “Contact Us” ở mục home của website

- Bước 3: Hệ thống hiển thị form contact

- Bước 5: Website sẽ gửi nội dung qua mail đến admin

4.5.2.2 Luồng đi khác

Không có

4.5.3 Yêu cầu khác

Không có

4.5.4 Tiền điều kiện

Người dùng đã đăng ký tài khoản hoặc được Quản lý cung cấp

4.5.5 Hậu điều kiện

Người dùng gửi form thành công

4.5.6 Extend Points

Không có

4.5.7 Activity diagram

4.6 Đặc tả Use-case “Booking appointment”

- Bước 2: Người dùng click vào mục “Doctor” trên thanh điều hướng.

- Bước 3: Người dùng chuyển sang màn hình “Doctor”

- Bước 4: Người dùng chọn bác sĩ mình muốn đặt lịch

- Bước 5: Người dùng chọn thời gian khám bệnh

- Bước 6: Hệ thống thông báo đặt lịch thành công

4.6.2.2 Luồng đi khác

Không có

4.6.3 Yêu cầu khác

Không có

4.6.4 Tiền điều kiện

User đã có tài khoản

4.6.5 Hậu điều kiện

Người dùng đặt lịch thành công hiển thị trên mục Notification

4.6.6 Extend Points

Không có

4.6.7 Activity diagram

4.7 Đặc tả Use-case “Apply doctor”

- Bước 5: Người dùng điền thông tin của mình và nhấn đăng ký

4.7.2.2 Luồng đi khác

Không có

4.7.3 Yêu cầu khác

Không có

4.7.4 Tiền điều kiện

User đã có tài khoản

4.7.5 Hậu điều kiện

Người dùng nhận được thông báo đồng ý hoặc từ chối từ admin

4.7.6 Extend Points

Không có

4.7.7 Activity diagram