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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.74 MB, 52 trang )

Trang 1<div class="page_container" data-page="1">

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TINKHOA 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ũngSinh viên: Nguyễn Tấn Huy - 20520204

</div>Trang 2<div class="page_container" data-page="2">

Lời cảm ơn

Lời đầu tiên, nhóm chúng em xin được cảm ơn thầy Trần Anh Dũng đã tạo điều kiện chonhóm được thực hiện đồ án, và đã cung cấp những kiến thức hữu ích, những góp ý thựctế nhất để từ đó nhóm có thể phát triển thêm hiểu biết của mình trong mảng lập trình web,nhất là trong dự án hiện tại này.

Dù có nhiều cố gắng thực hiện, song lượng kiến thức về mảng này cũng như thời gian đểphát triển dự án là có hạn, nên nhóm khơng thể tránh khỏi những thiếu sót. Nhóm mongnhận được sự thơng cảm, những góp ý hữu ích nhất từ thầy để từ đó nhóm có thể hồnthiện sản phẩm hơn nữa.

Nhóm thực hiện

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

</div>Trang 3<div class="page_container" data-page="3">

MỤC LỤC

CHƯƠNG I. GIỚI THIỆU ĐỀ TÀING I. GI I THI U Đ TÀIỚI THIỆU ĐỀ TÀIỆU ĐỀ TÀIỀ TÀI3

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

</div>Trang 4<div class="page_container" data-page="4">

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

1.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ài1.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.

- Phân tích u cầu bài tố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

</div>Trang 5<div class="page_container" data-page="5">

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

</div>Trang 6<div class="page_container" data-page="6">

CHƯƠNG II. CƠ SỞ LÝ THUYẾT

2.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 tồn bộ ứng dụng web, ReactJS cho phép một developercó 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 ReactJS2.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.

</div>Trang 7<div class="page_container" data-page="7">

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

</div>Trang 8<div class="page_container" data-page="8">

- 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ềutừ 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 đượcsự 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.

</div>Trang 9<div class="page_container" data-page="9">

2.1.3.Ưu điểm và nhược điểm2.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

</div>Trang 11<div class="page_container" data-page="11">

(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ểm2.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ẽ.- Cộng đồng hỗ trợ tích cực.

- Cho phép stream các file có kích thước lớn.

2.2.3.2.Nhược điểm

- Khơng có khả năng mở rộng, vì vậy khơng thể tận dụng lợi thế mơ hình đa lõitrong các phần cứng cấp server hiện nay.

- 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.

</div>Trang 12<div class="page_container" data-page="12">

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

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

</div>Trang 13<div class="page_container" data-page="13">

đí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ểm2.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

</div>Trang 14<div class="page_container" data-page="14">

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 sốt giao dịch ACID đầy đủ: Trong mơi trường mà cần kiểm

số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.

</div>Trang 16<div class="page_container" data-page="16">

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

3.1. Mơ hình Use-case:

1. Use-case diagram:

</div>Trang 17<div class="page_container" data-page="17">

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:

Đặ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 website

Người dùng có thể tra cứu về sứckhỏe dựa vào triệu chứng

sức khỏe Appoiment

</div>Trang 18<div class="page_container" data-page="18">

mangement cũng như bác sĩ

Notification Thông báo các thông tin quan trọng

4. Đặc tả Use-case

4.1.Đặc tả Use-case “Login”4.1.1. Mô tả ngắn

Người dùng khi truy cập ứng dụng sẽ đến trang chủ nhưng để đặt lịch khám thì họ phải đăng nhập bằng cách dùng địa chỉ email và mật khẩu

4.1.2. Luồng xử lý event4.1.2.1.Luồng đi chính

- 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. 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

</div>Trang 19<div class="page_container" data-page="19">

4.2.Đặc tả Use-case “Logout”4.2.1. Mô tả ngắn

Người dùng khi sử dụng xong hệ thống rất có thể sẽ đăng xuất khỏi phần mềm để các trạng thái được tự động lưu lại

4.2.2. Luồng xử lý event4.2.2.1.Luồng đi chính

- Bước 1: Người dùng click vào nút “Logout” trên phần mềm

</div>Trang 20<div class="page_container" data-page="20">

4.2.2.2.Luồng đi khác

Khơng có

4.2.3. 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

</div>Trang 21<div class="page_container" data-page="21">

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. 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

</div>Trang 22<div class="page_container" data-page="22">

4.4.Đặc tả Use-case “Register”4.4.1. Mô tả ngắn

User muốn đăng ký tài khoản mới để sử dụng website

4.4.2. Luồng xử lý event4.4.2.1.Luồng đi chính

- 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ý

</div>Trang 23<div class="page_container" data-page="23">

- 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

</div>Trang 24<div class="page_container" data-page="24">

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

</div>Trang 25<div class="page_container" data-page="25">

- 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. 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

</div>Trang 26<div class="page_container" data-page="26">

4.6. Đặc tả Use-case “Booking appointment”4.6.1. Mơ tả ngắn

User có thể sử dụng use-case này để đặt lịch với bác sĩ mình mong muốn

4.6.2. Luồng xử lý event 4.6.2.1.Luồng đi chính

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

</div>Trang 27<div class="page_container" data-page="27">

- 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. 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

</div>

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

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH</b>

<b>TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TINKHOA CƠNG NGHỆ PHẦN MỀM</b>

<b>BÁO CÁO ĐỒ ÁN MÔN HỌCĐỀ TÀI:</b>

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

<b>Lời cảm ơn</b>

<b>MỤC LỤC</b>

<b>CHƯƠNG I. GIỚI THIỆU ĐỀ TÀI</b>

<b>CHƯƠNG II. CƠ SỞ LÝ THUYẾT</b>

<b>CHƯƠNG III. PHÂN TÍCH THIẾT KẾ</b>

<b>3.1. Mơ hình Use-case:</b>

<b>1. Use-case diagram:</b>

<b>2. Actor:</b>

<b>3. Chi tiết Use-case:</b>

<b>4. Đặc tả Use-case</b>

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về