CƠ SỞ LÝ THUYẾT
Firebase
- Firebase ở đây chính là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng của đám mây – cloud Đi kèm với đó chính là hệ thống máy chủ cực kỳ mạnh mẽ đến từ Google Chức năng chính đó là giúp người sử dụng lập trình được những ứng dụng bằng phương pháp đơn giản hóa các thao tác cùng đa dạng cơ sở dữ liệu.
- Cụ thể đó chính là những giao diện lập trình cho ứng dụng API đơn giản. Mục đích đó là tăng số lượng người sử dụng, thu lại nhiều lợi nhuận hơn bao giờ hết Đặc biệt đó còn là dịch vụ đa năng và bảo mật cực hoàn hảo.
- Phát triển ứng dụng di động: Firebase giúp lập trình viên phát triển ứng dụng di động một cách nhanh chóng và giúp giảm thiểu chi phí Bên cạnh đó, Firebase cho phép phát triển ứng dụng trên cả nền tảng iOS và Android.
- Phát triển ứng dụng web: Các API đơn giản và hữu dụng giúp bạn có thể xây dựng ứng dụng mà không cần backend và server.
- Lưu trữ và đồng bộ dữ liệu: Firebase thường xuyên sao lưu dữ liệu nhằm đảo bảo tính sẵn có của dữ liệu Bên cạnh đó, chức năng này của Firebase còn giúp cho mọi thông tin và dữ liệu của người dùng sẽ được bảo mật một cách tốt nhất nếu có trường hợp xấu xảy ra.
- Quản lý đăng nhập: Firebase Authentication giúp nhà phát triển quản lý người dùng ứng dụng một cách đơn giản và an toàn Cụ thể, Firebase cung cấp nhiều phương pháp quản lý đăng nhập thông qua email với mật khẩu Google và Facebook.
- Sử Dụng Đơn Giản, Dễ Dàng.
- Tốc Độ Phát Triển Nhanh Chóng.
- Nền Tảng Google Phát Triển Mạnh Mẽ.
- Firebase App Không Sở Hữu Máy Chủ.
- Nền Tảng Không Hoạt Động Tại Nhiều Quốc Gia.
- Firebase Chỉ Hoạt Động Với NoSQL Và CSDL.
- Firebase Chỉ Chạy Trên Google Cloud.
Dart
- Dart là một ngôn ngữ lập trình được thiết kế bởi Lars Bak và Kasper Lund và được phát triển bởi Google Ngôn ngữ lập trình có thể được sử dụng để phát triển ứng dụng web và thiết bị di động cũng như ứng dụng máy chủ và máy tính để bàn [4.2]
- Nó là một ngôn ngữ dựa trên lớp, hướng đối tượng với cú pháp kiểu C Nó có thể biên dịch thành mã máy, JavaScript hoặc WebAssugging Nó hỗ trợ các giao diện, mixin, các lớp trừu tượng, tổng quát thống nhất và suy luận kiểu [4.2]
Flutter
- Flutter là một bộ công cụ phát triển phần mềm giao diện người dùng với mã nguồn mở do Google tạo ra Flutter được sử dụng để phát triển các ứng dụng đa nền tảng cho nhiều hệ điều hành như: iOS, Android, Linux, … từ một cơ sở mã nguồn duy nhất.
- Flutter có hai thành phần chính đó là: o Một Software Development Kit (SDK): Ở đây tích hợp các công cụ có khả năng phát triển các ứng dụng của bạn, trong đó có các công cụ giúp bạn biên dịch mã của mình thành mã máy gốc (mã cho Android và iOS). o Một UI Library based on widgets (Framework): Tổng hợp các thành phần giao diện người dùng (UI) có thể tái sử dụng như: text input, button, slider, … hỗ trợ bạn có thể cá nhân hóa theo nhu cầu sử dụng.
- Flutter được xem là một react framework.
- Lập trình viên có thể sử dụng ngôn ngữ lập trình Dart rất đơn giản và thuận tiện bởi nhờ Flutter.
- Người dùng dễ dàng trải nghiệm, xây dựng giao diện và sửa lỗi nhanh chóng nhờ tính năng hot reload.
- Giao diện người dùng đẹp mắt, hoạt động phong phú, scroll mượt mà và khả năng tự nhận thức nền tảng của các widget built – in.
- Bằng cách thức tập hợp các layout, platform, và widget đa dạng mà framework có thể giải quyết những thách thức khó khăn trong giao diện người dùng.
- Flutter có khả năng thể hiện cùng một UI trên nhiều nền tảng.
- Phát triển phần mềm nhanh chóng.
- Giao diện thu hút, bắt mắt.
- Truy cập các tính năng và Software Development Kit native.
- Phát triển ứng dụng thống nhất.
Bloc
- Tương tự mô hình MVVM và MVP
- Bloc là một lib để quản lý state cho Flutter application B.L.o.C nghĩa là Business Logic Component Nhận 'Event' như là input và trả về output là 'State' Bloc được xây dựng dựa trên RxDart.
- Bloc là một design pattern giúp tách bản trình bày khỏi logic nghiệp vụ. Theo mẫu BLoC tạo điều kiện thuận lợi cho khả năng kiểm tra và khả năng sử dụng lại Package này trừu tượng hóa các khía cạnh phản ứng của mẫu cho phép các nhà phát triển tập trung vào việc viết logic nghiệp vụ [5.2]
- Cubit là lớp mở rộng BlocBase và có thể được mở rộng để quản lý bất kỳ loại trạng thái nào Cubit yêu cầu một trạng thái ban đầu sẽ là trạng thái trước khi phát ra được gọi Trạng thái hiện tại của một khối có thể được truy cập thông qua bộ lấy trạng thái và trạng thái của khối có thể được cập nhật bằng cách gọi phát ra với một trạng thái mới
Hình 2.5 Luồng hoạt động khi dùng Cubit
- Các thay đổi trạng thái trong cubit bắt đầu bằng các lệnh gọi hàm được xác định trước có thể sử dụng phương thức phát ra để xuất các trạng thái mới. onChange được gọi ngay trước khi thay đổi trạng thái xảy ra và chứa trạng thái hiện tại và trạng thái tiếp theo.
2.4.3 Khi không sử dụng Cubit [5.2]
- Bloc là một lớp nâng cao hơn dựa trên các sự kiện để kích hoạt các thay đổi trạng thái thay vì các chức năng Bloc cũng mở rộng BlocBase, có nghĩa là nó có API công khai tương tự như Cubit Tuy nhiên, thay vì gọi một chức năng trên Khối và trực tiếp phát ra trạng thái mới, Khối nhận sự kiện và chuyển đổi sự kiện đến thành trạng thái đi.
Hình 2.7 Luồng hoạt động của Bloc
- Các thay đổi trạng thái trong khối bắt đầu khi các sự kiện được thêm vào sẽ kích hoạt onEvent Các sự kiện sau đó được chuyển qua EventTransformer.Theo mặc định, mỗi sự kiện được xử lý đồng thời nhưng có thể cung cấp một
EventTransformer tùy chỉnh để điều khiển luồng sự kiện đến Sau đó, tất cả các Trình xử lý sự kiện đã đăng ký cho loại sự kiện đó sẽ được gọi cùng với sự kiện sắp tới Mỗi EventHandler chịu trách nhiệm phát ra 0 hoặc nhiều trạng thái để phản hồi lại sự kiện Cuối cùng, onTransition được gọi ngay trước khi trạng thái được cập nhật và chứa trạng thái hiện tại, sự kiện và trạng thái tiếp theo.
THIẾT KẾ KIẾN TRÚC HỆ THỐNG
Kiến trúc hệ thống
- Lớp Client: Hiển thị giao diện người dùng, thông qua kết nối Internet để kết nối đến cơ sở dữ liệu quản lý thư viện Là nơi diễn ra các tương tác của người dùng với chương trình như nhập, các thao tác truy xuất dữ liệu.
- Lớp Server: Quản lý và chứa toàn bộ dữ liệu của phần mềm Đồng thời xử lý các yêu cầu nhập/xuất được gửi xuống từ lớp Client Ứng dụng được dùng làm lớp Server là Firebase.
Hình 3.1 Kiến trúc hệ thống client server [3.1]
Các chức năng chính
Hình 3.2 Tổng quan về chức năng
Phân tích yêu cầu
Lên lịch hẹn với bác sĩ: Bệnh nhân có thể dễ dàng đặt lịch hẹn với một bác sĩ theo thời gian phù hợp.
Lựa chọn bác sĩ phù hợp: Bệnh nhân được đề xuất danh sách các bác sĩ dựa trên thông tin cá nhân của họ, giúp họ có thể lựa chọn bác sĩ phù hợp với nhu cầu và sở thích.
Face call với bác sĩ: Bệnh nhân có thể thực hiện cuộc gọi video với bác sĩ để tư vấn hoặc khám chữa bệnh từ xa, tiết kiệm thời gian và công sức cho việc di chuyển.
Quản lý hồ sơ sức khỏe: Ứng dụng giúp bệnh nhân quản lý hồ sơ sức khỏe của mình, ghi chép lại những lời dặn hoặc tư vấn cùng với danh sách thuốc được đề xuất bởi bác sĩ.
Tham gia cộng đồng hỏi đáp: Bệnh nhân có thể đăng những câu hỏi thắc mắc của mình lên cộng đồng, và các bác sĩ trong ứng dụng sẽ hỗ trợ giải đáp.
Đánh giá bác sĩ: Bệnh nhân được cung cấp khả năng đánh giá và đưa ra đánh giá về bác sĩ sau khi đã nhận được tư vấn.
Xác nhận lịch hẹn: Bác sĩ có thể xác nhận lịch hẹn từ bệnh nhân và quản lý lịch trình làm việc của mình.
Quản lý hồ sơ sức khỏe bệnh nhân: Bác sĩ có thể tạo và quản lý hồ sơ sức khỏe của bệnh nhân sau khi đã tiến hành khám.
Tư vấn qua Face call: Bác sĩ có thể thực hiện các cuộc gọi video với bệnh nhân để cung cấp tư vấn và chẩn đoán từ xa.
Quản lý các cuộc hẹn: Bác sĩ có thể quản lý thông tin về các cuộc hẹn với bệnh nhân để sắp xếp thời gian hiệu quả.
Quản lý thông tin cá nhân: Bác sĩ có thể cập nhật và quản lý thông tin cá nhân của mình để giữ được sự chính xác và minh bạch trong hệ thống.
Trả lời thắc mắc trên cộng đồng: Bác sĩ có thể tham gia vào cộng đồng hỏi đáp trong ứng dụng và trả lời những thắc mắc của bệnh nhân để cung cấp kiến thức và sự hỗ trợ tốt nhất.
Sơ đồ Usecase
Hình 3.3: Sơ đồ Usecase Bảng 3.1 Danh sách actor
No Tên actor Mô tả
1 Bệnh nhân Người sử dụng ứng dụng
2 Bác sĩ Người sử dụng ứng dụng
Mô tả usecase
Bảng 3.2 Mô tả Use case.
No Tên actor Tên usecase Mô tả
1 Bệnh nhân, bác sĩ Đăng nhập/ đăng ký/ quên mật khẩu
Người truy cập vào ứng dụng.
2 Bệnh nhân, bác sĩ Theo dõi cộng đồng Có thể đặt câu hỏi, trả lời hoặc xóa.
3 Bệnh nhân Quản lý hồ sơ sức khỏe Người dùng có thể xem chi tiết (lời dặn, đơn thuốc).
4 Bác sĩ, bệnh nhân Thực hiện cuộc hẹn Người dùng có thể thực hiện video call.
5 Bác sĩ, bệnh nhân Đánh giá bác sĩ
Người dùng có thể đánh giá một bác sĩ sau khi cuộc hẹn đã kết thúc.
6 Bệnh nhân Xem danh sách bác sĩ theo triệu chứng Người dùng có thể lựa chọn bác sĩ phù hợp.
7 Bác sĩ, bệnh nhân Quản lý thông tin cá nhân
Người dùng có thể xem và cập nhật thông tin cá nhân.
8 Bác sĩ, bệnh nhân Quản lý cuộc hẹn
Người dùng có thể xem các cuộc hẹn sắp tới hoặc đã qua.
9 Bác sĩ Quản lý hồ sơ sức khỏe của các bệnh nhân đã khám
Người dùng có thể xem và ghi chi tiết hồ sơ sức khỏe cho bệnh nhân (lời dặn, chuẩn đoán, đơn thuốc).
10 Bác sĩ Nhận thông báo cuộc hẹn
Người dùng nhận thông báo khi cuộc hẹn được lên lịch hoặc tới giờ hẹn.
Đặc tả Use case
Bảng 3.3: Mô tả Usecase Đăng nhập
Tên Usecase Đăng nhập Đối tượng Bệnh nhân, bác sĩ. Điều kiện cần Không.
1) Người dùng cung cấp thông tin tài khoản.
2) Hệ thống xác định thông tin tài khoản.
3) Cho phép người dùng truy cập vào hệ thống hoặc tạo tài khoản mới.
Yêu cầu đặc biệt Người dùng phải có một tài khoản đã đăng ký bao gồm email, password. Điều kiện sau cùng
Khi đăng nhập thành công, người dùng có thể thực hiện những chức năng mà hệ thống cung cấp, dựa trên từng vai trò của từng tài khoản.
Khi đăng nhập thất bại, người dùng đăng nhập lại hoặc tạo một tài khoản mới.
Khi đăng ký tài khoản mới thành công, người dùng sẽ dùng tài khoản đó để truy cập vào ứng dụng. Điểm mở rộng Không.
Bảng 3.4: Mô tả Usecase Đăng kí
Tên Usecase Đăng kí Đối tượng Bệnh nhân, bác sĩ Điều kiện cần Không.
1) Người dùng cung cấp thông tin mà ứng dụng yêu cầu để tạo một tài khoản.
2) Sau khi tạo thành công sẽ được chuyển vào trang chủ để sử dụng ứng dụng.
Yêu cầu đặc biệt Cần một email hợp lệ và phải cung cấp đầy đủ thông tin cần thiết. Điều kiện sau cùng Tài khoản mới và thông tin người dùng được lưu vào hệ thống. Điểm mở rộng Không.
3.6.3 Use-case “Quên mật khẩu”
Bảng 3.5: Mô tả Usecase Quên mật khẩu
Tên Usecase Quên mật khẩu Đối tượng Bệnh nhân, bác sĩ. Điều kiện cần Đã đăng ký tài khoản trước đó.
Luồng cơ bản 1) Người dùng cung cấp email đã quên mật khẩu.
2) Truy cập vào email để nhận được mã xác nhận.
Yêu cầu đặc biệt Cần một email hợp lệ. Điều kiện sau cùng Có thể đổi mật khẩu mới để truy cập vào ứng dụng. Điểm mở rộng Không.
3.6.4 Use-case “Theo dõi cộng đồng”
Bảng 3.6: Mô tả Usecase Theo dõi cộng đồng
Tên Usecase Theo dõi cộng đồng Đối tượng Bệnh nhân, bác sĩ. Điều kiện cần Người dùng đã đăng nhập từ trước.
1) Người dùng chọn vào nút tên Community ở màn hình trang chủ.
2) Người dùng sẽ được chuyển sang một trang khác gồm nhiều câu hỏi.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Người dùng có thể xem các câu hỏi từ nhiều người khác. Điểm mở rộng Không.
3.6.5 Use-case “Quản lý hồ sơ sức khỏe”
Bảng 3.7: Mô tả Usecase Quản lý hồ sơ sức khỏe
Tên Usecase Quản lý hồ sơ sức khỏe Đối tượng Bệnh nhân. Điều kiện cần Người dùng đã đăng nhập từ trước.
Luồng cơ bản 1) Người dùng chọn vào nút tên Health record ở màn hình trang chủ.
2) Người dùng sẽ được chuyển sang một trang khác gồm nhiều câu hỏi.
3) Chọn từng hồ sơ tương ứng để có thể xem chi tiết.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Người dùng có thể xem chi tiết (lời dặn, đơn thuốc, chuẩn đoán). Điểm mở rộng Không.
3.6.6 Use-case “Thực hiện cuộc gọi”
Bảng 3.8: Mô tả Usecase Thực hiện cuộc gọi
Tên Usecase Thực hiện cuộc gọi Đối tượng Bệnh nhân, bác sĩ. Điều kiện cần Người dùng đã đăng nhập từ trước.
1) Vào phần quản lý các cuộc hẹn, xem chi tiết của cuộc hẹn sắp diễn ra.
2) Khi tới giờ hệ thống sẽ mở room gặp và hiện ra nút chọn để người dùng tham gia.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Bác sĩ và bệnh nhân sẽ gặp nhau thông qua cuộc gọi video. Điểm mở rộng Không.
3.6.7 Use-case “Xem danh sách bác sĩ theo triệu chứng”
Bảng 3.9: Mô tả Usecase Xem danh sách bác sĩ theo triệu chứng
Tên Usecase Xem danh sách bác sĩ theo triệu chứng Đối tượng Bệnh nhân. Điều kiện cần Người dùng đã đăng nhập từ trước.
Luồng cơ bản Sau khi đăng nhập vào ứng dụng, ở trang chủ sẽ có 1 list các bác sĩ và có thể xem theo triệu chứng.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Người dùng có thể xem được danh sách bác sĩ theo ý mình. Điểm mở rộng Không.
3.6.8 Use-case “Quản lý thông tin cá nhân”
Bảng 3.10: Mô tả Usecase Quản lý thông tin cá nhân
Tên Usecase Quản lý thông tin cá nhân Đối tượng Bệnh nhân, bác sĩ. Điều kiện cần Người dùng đã đăng nhập từ trước.
Luồng cơ bản Chọn mục thông tin cá nhân trên thanh điều hướng ở dưới để có thể xem chi tiết các thông tin cá nhân và chỉnh sửa.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Người dùng có thể xem và chỉnh sửa thông tin của mình. Điểm mở rộng Không.
3.6.9 Use-case “Quản lý cuộc hẹn”
Bảng 3.11: Mô tả Usecase Quản lý cuộc hẹn
Tên Usecase Quản lý cuộc hẹn Đối tượng Bệnh nhân, bác sĩ. Điều kiện cần Người dùng đã đăng nhập từ trước.
1) Chọn mục cuộc hẹn trên thanh điều hướng, người dùng có thể xem tất cả các cuộc hẹn.
2) Với bác sĩ có thể thực hiện xác nhận cuộc hẹn với bệnh nhân.
Yêu cầu đặc biệt Chỉ có Manager thực hiện được chức năng. Điều kiện sau cùng Người dùng có thể xem các cuộc hẹn sắp tới hoặc đã qua. Điểm mở rộng Không.
3.6.10.Use-case “Quản lý hồ sơ của các bệnh nhân đã khám”
Bảng 3.12: Mô tả Usecase Quản lý cuộc hẹn
Tên Usecase Quản lý hồ sơ của các bệnh nhân đã khám Đối tượng Bác sĩ. Điều kiện cần Người dùng đã đăng nhập từ trước.
1) Chọn phần Health record ở màn hình chính, bác sĩ có thể xem toàn bộ các hồ sơ với người bệnh mình đã khám.
2) Bác sĩ có thể chỉnh sửa.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Người dùng có thể xem và ghi chi tiết hồ sơ sức khỏe cho bệnh nhân (lời dặn, chuẩn đoán, đơn thuốc). Điểm mở rộng Không.
3.6.11.Use-case “Nhận thông báo cuộc hẹn”
Bảng 3.13: Mô tả Usecase Quản lý cuộc hẹn
Tên Usecase Nhận thông báo cuộc hẹn Đối tượng Bác sĩ, bệnh nhân. Điều kiện cần Người dùng đã đăng nhập từ trước.
Luồng cơ bản Thông báo sẽ đến khi bệnh nhân đã thực hiện đặt cuộc hẹn thành công.
Yêu cầu đặc biệt Không. Điều kiện sau cùng Người dùng nhận thông báo khi cuộc hẹn được lên lịch hoặc tới giờ hẹn. Điểm mở rộng Không.
Sơ đồ lớp
Giải thích các lớp
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 Name String Tên người dùng
2 phoneNumber String Số điện thoại của người dùng
3 email String Tài khoản email của người dùng
4 birthday datetime Ngày/tháng/năm sinh của người dùng
5 gender String Giới tính của người dùng
6 image String Đường link chứa hình ảnh của người dùng
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 patientId String Khóa chính Id của bệnh nhân
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 doctorId String Khóa chính Id của bác sĩ
2 experience Int Số năm kinh nghiệm của người dùng
3 price Int Giá tiền cuộc hẹn
4 workplace String Nơi làm việc hiện tại
Những khung giờ có thể thực hiện tư vấn
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 doctorId String Khóa phụ Id của bác sĩ
2 patientId String Khóa phụ Id của bệnh nhân
3 time datetime Thời gian thực hiện đánh giá
4 feedback String Nội dung đánh giá
5 rating double Điểm đánh giá
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 appointmentId String Khóa chính Id của cuộc hẹn
2 doctorId String Khóa phụ Id của bác sĩ
3 patientId String Khóa phụ Id của bệnh nhân
4 doctorName String Tên bác sĩ
5 patientName String Tên bệnh nhân
6 doctorImage String Ảnh đại diện của bác sĩ
7 patientImage String Ảnh đại diện của bệnh nhân
8 doctorPhone String Số điện thoại bác sĩ
9 patientPhone String Số điện thoại bệnh nhân
10 time datetime Thời gian của cuộc hẹn
12 status bool Trạng thái cuộc hẹn
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 recordId String Khóa chính Id của cuộc hẹn
2 doctorId String Khóa phụ Id của bác sĩ
3 patientId String Khóa phụ Id của bệnh nhân
4 doctorName String Tên bác sĩ
5 patientName String Tên bệnh nhân
6 patientImage String Ảnh đại diện của bệnh nhân
7 time datetime Thời gian của cuộc hẹn
8 issues String Triệu chứng ban đầu
11 note String Lời dặn của bác sĩ
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 postId String Khóa chính Id của bài đăng
2 doctorId String Khóa phụ Id của bác sĩ
3 patientId String Khóa phụ Id của bệnh nhân
4 doctorName String Tên bác sĩ
5 doctorImage String Ảnh đại diện của bác sĩ
6 gender String Giới tính của người đăng
7 age Int Tuổi của người đăng
8 time datetime Thời gian đăng bài
10 descriptions String Nội dung bài đăng
Cho phép hình ảnh riêng tư hay không (Riêng tư là chỉ có bác sĩ thấy)
12 image List Chứa nhiều đường dẫn chứa hình ảnh cho bài đăng
No Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả
1 chatId String Khóa chính Id của 1 bình luận
2 postId String Khóa phụ Id của bài đăng
3 senderId String Id của người đăng
4 age Int Tuổi của người đăng
5 time datetime Thời gian đăng bình luận
6 imageReadable Bool Cho phép hình ảnh riêng tư hay không
(Riêng tư là chỉ có bác sĩ thấy)
7 Text String Nội dung bình luận
Những hình ảnh được đăng khi bình luận
9 rating double Điểm đánh giá
THIẾT KẾ VÀ XÂY DỰNG GIAO DIỆN
Tổng quan về giao diện
- Công cụ thiết kế: Figma
- Nguồn: https://www.figma.com/file/VDwGHoq8VqQMbv9hAcR2YE/%C4%90%E 1%BB%93-%C3%A1n-1-%2B-2?typeign&t=Pm9Pe0jpRCGhK2on-1
- Đối với người dùng bệnh nhân, có tổng cộng 14 màn hình thiết kế.
Hình 4.1: Thiết kế màn hình cho bệnh nhân
- Đối với người dùng bác sĩ, có tổng cộng 12 màn hình thiết kế.
Hình 4.2: Thiết kế màn hình cho bác sĩ
- Phần màn hình đăng nhập, đăng kí.
Hình 4.3: Thiết kế màn hình truy cập vào ứng dụng
Chi tiết các màn hình
Hình 4.4 Màn hình đăng nhập Bảng 4.1 Thành phần màn hình đăng nhập
STT Tên thành phần Loại Chức năng
4 Forgot password Button Quên mật khẩu
5 Sign up Button Đăng ký
4.2.2 Màn hình đăng ký bệnh nhân
Hình 4.5 Màn hình đăng ký bệnh nhân Bảng 4.2 Thành phần màn hình đăng ký bệnh nhân
STT Tên thành phần Loại Chức năng
1 Add image Button Upload hình ảnh
Password, Name, Phone number, Gender, Birthday Text Input Nhập thông tin cá nhân
3 Sign up Button Thực hiện đăng ký
4 Register for doctor Button Chuyển qua trang đăng ký cho bác sĩ
4.2.3 Màn hình đăng ký bác sĩ
Hình 4.6 Màn hình đăng ký bác sĩ Bảng 4.3 Thành phần màn hình đăng ký bác sĩ
STT Tên thành phần Loại Chức năng
1 Add image Button Upload hình ảnh
Password, Name, Phone number, Gender, Birthday
Text Input Nhập thông tin cá nhân
3 Sign up Button Thực hiện đăng ký
4 Register for doctor Button Chuyển qua trang đăng ký cho bác sĩ
4.2.4 Màn hình lấy lại mật khẩu
Hình 4.7 Màn hình lấy lại mật khẩu Bảng 4.4 Thành phần màn hình lấy lại mật khẩu
STT Tên thành phần Loại Chức năng
1 Email Text Hiển thị email
2 Code verifies Text Nhập mã xác nhận
3 New password Text input Nhập mật khẩu mới
4 Retype new password Text input Nhập lại mật khẩu mới
4.2.5 Màn hình trang chủ của bệnh nhân
Hình 4.8 Màn hình trang chủ của bệnh nhân Bảng 4.5 Thành phần màn hình trang chủ của bệnh nhân
STT Tên thành phần Loại Chức năng
1 Make appointment, Public questions, Health record Button Để chuyển sang các trang cần thiết
2 List appointment List Hiển thị các cuộc hẹn sắp tới
3 List doctor List Hiển thị các bác sĩ theo chuyên ngành
4.2.6 Màn hình đặt cuộc hẹn
Hình 4.9 Màn hình đặt cuộc hẹn Bảng 4.6 Thành phần màn hình đặt cuộc hẹn
STT Tên thành phần Loại Chức năng
1 Search Text input Tìm kiếm bác sĩ
2 Filter base on symptoms Dropdown Tìm kiếm các bác sĩ dựa trên chuyên ngành
3 List doctors List Hiển thị danh sách bác sĩ tương ứng
4.2.7 Màn hình thông tin chi tiết của bác sĩ
Hình 4.10 Màn hình thông tin chi tiết của bác sĩ Bảng 4.7 Thành phần màn hình thông tin chi tiết của bác sĩ
STT Tên thành phần Loại Chức năng
1 Doctor profile Text Các thông tin cơ bản của bác sĩ
2 Schedule, Time available button Chỗ để chọn ngày giờ cho cuộc hẹn
3 Reviews Card Lượt bình luận từ 1 bệnh nhân
4.2.8 Màn hình quản lý cuộc hẹn của bệnh nhân
Hình 4.11 Màn hình quản lý cuộc hẹn của bệnh nhân Bảng 4.8 Thành phần màn hình quản lý cuộc hẹn của bệnh nhân
STT Tên thành phần Loại Chức năng
1 Upcoming, history Button Chuyển giữa các cuộc hẹn hiện tại và lịch sử cuộc hẹn
2 List appointment List Danh sách các cuộc hẹn
4.2.9 Màn hình chi tiết cuộc hẹn của bệnh nhân
Hình 4.12 Màn hình quản lý cuộc hẹn của bệnh nhân Bảng 4.9 Thành phần màn hình quản lý cuộc hẹn của bệnh nhân
STT Tên thành phần Loại Chức năng
1 Basic information Text Hiển thị các thông tin chi tiết của cuộc hẹn
2 Cancle Button Hủy cuộc hẹn
3 Rating Button Chuyển sang màn hình đánh giá bác sĩ
Hình 4.13 Màn hình thanh toán Bảng 4.10 Thành phần màn hình thanh toán
STT Tên thành phần Loại Chức năng
1 Confirm appointment Text Hiển thị các thông tin của cuộc hẹn
2 Payment method Text Hiển thị các cách thức để thanh toán
4.2.11 Màn hình quản lý hồ sơ sức khỏe của bệnh nhân
Hình 4.14 Màn hình quản lý hồ sơ sức khỏe của bệnh nhân
Bảng 4.11 Thành phần màn hình quản lý hồ sơ sức khỏe của bệnh nhân
STT Tên thành phần Loại Chức năng
1 List record List Hiển thị danh sách các hồ sơ gồm tên của bác sĩ phụ trách và khung thời gian
2 Particular record Text Hiển thị chi tiết các thông tin trong 1 hồ sơ tương ứng
4.2.12 Màn hình quản lý thông tin cá nhân của bệnh nhân
Hình 4.15 Màn hình quản lý thông tin cá nhân của bệnh nhân
Bảng 4.12 Thành phần màn hình quản lý thông tin cá nhân của bệnh nhân
STT Tên thành phần Loại Chức năng
1 Profile Text Hiển thị các thông tin cá nhân
2 Profile editing Text Hiển thị các thông tin cá nhân và có thể chỉnh sửa
Hình 4.16 Màn hình hỏi đáp Bảng 4.13 Thành phần màn hình hỏi đáp
STT Tên thành phần Loại Chức năng
1 All, Your question Button Chuyển trang giữa tất cả bài post và những bài post cá nhân
2 List post List Danh sách các bài post
Hiển thị nội dung bài post, tên bác sĩ trả lời và phần để trao đổi giữa bác sĩ và người đăng
4.2.14 Màn hình đăng câu hỏi
Hình 4.17 Màn hình đăng câu hỏi Bảng 4.14 Thành phần màn hình đăng câu hỏi
STT Tên thành phần Loại Chức năng
1 Gender Selection Box Chọn giới tính
3 Field dropdown Dropdown Chọn lĩnh vực liên quan
4 Content Text input Nhập nội dung bài post
5 Upload image Button Upload hình ảnh
4.2.15 Màn hình chỉnh sửa thông tin bác sĩ
Hình 4.18 Màn hình chỉnh sửa thông tin bác sĩ Bảng 4.15 Thành phần màn hình chỉnh sửa thông tin bác sĩ
STT Tên thành phần Loại Chức năng
1 Basic information Text Các thông tin cơ bản của bác sĩ
2 Change time Button Thay đổi thời gian của bác sĩ
3 Save Button Lưu thông tin user
4.2.16 Màn hình chỉnh sửa giờ cho bác sĩ
Hình 4.19 Màn hình chỉnh sửa giờ của bác sĩ Bảng 4.16 Thành phần màn hình chỉnh sửa giờ của bác sĩ
STT Tên thành phần Loại Chức năng
1 Day selection Button Khung các thứ trong tuần để bác sĩ chọn
2 Time list Textbox Khung giờ để chọn
3 Control bar Button Khung xác nhận
4.2.17 Màn hình thông tin bác sĩ (phía bác sĩ)
Hình 4.20 Màn hình thông tin bác sĩ (phía bác sĩ) Bảng 4.17 Thành phần màn hình thông tin bác sĩ (phía bác sĩ)
STT Tên thành phần Loại Chức năng
1 Edit Button Điều hướng qua trang chỉnh sửa thông tin bác sĩ
2 Gender Text Hiển thị giới tính
3 Basic information Text Các thông tin cơ bản của bác sĩ
4 Review Card Lượt đánh giá từ 1 bệnh nhân
4.2.18 Màn hình trang chủ bác sĩ
Hình 4.21 Màn hình trang chủ bác sĩ Bảng 4.18 Thành phần màn hình trang chủ bác sĩ
STT Tên thành phần Loại Chức năng
1 Appointment List List View Hiển thị danh sách các cuộc hẹn sắp tới của bác sĩ
2 Patient Records Button Giúp điều hướng qua màn hình danh sách kết quả khám bệnh
3 Public Questions Button Điều hướng sang màn hình câu hỏi cộng đồng
4.2.19 Màn hình quản lý thông tin của bác sĩ
Hình 4.22 Màn hình quản lý cuộc hẹn của bác sĩ Bảng 4.19 Thành phần màn hình quản lý cuộc hẹn của bác sĩ
STT Tên thành phần Loại Chức năng
Chuyển đổi qua lại giữa xem lịch sử cuộc hẹn và lịch hẹn sắp tới
2 Appointment List List View Hiển thị danh sách cuộc hẹn
3 Old Appointment Card Thẻ thể hiện thông tin cuộc hẹn cũ
4 Appointment Card Thẻ thể hiện thông tin cuộc hẹn sắp tới
4.2.20 Màn hình chỉ tiết cuộc hẹn của bác sĩ
Hình 4.23 Màn hình chi tiết cuộc hẹn của bác sĩ Bảng 4.20 Thành phần màn hình chi tiết cuộc hẹn của bác sĩ
STT Tên thành phần Loại Chức năng
1 Basic information Text Hiển thị các thông tin chi tiết của cuộc hẹn
2 Cancel Button Button Hủy cuộc hẹn
3 Confirm Button Button Chấp nhận cuộc hẹn
4 Write record Button Chuyển sang màn hình chuẩn đoán
4.2.21 Màn hình quản lý hồ sơ sức khỏe của bác sĩ
Hình 4.24 Màn hình quản lý hồ sơ sức khỏe của bác sĩ
Bảng 4.21 Thành phần màn hình quản lý hồ sơ sức khỏe của bác sĩ
STT Tên thành phần Loại Chức năng
1 Health Record List List View Hiển thị danh sách hồ sơ khám bệnh của từng cuộc hẹn
2 Health Record Card Hiển thị thông tin về user của hồ sơ y tế
4.2.22 Màn hình chi tiết hồ sơ phía bác sĩ
Hình 4.25 Màn hình chi tiết hồ sơ phía bác sĩ Bảng 4.22 Thành phần màn hình chi tiết hồ sơ phía bác sĩ
STT Tên thành phần Loại Chức năng
1 User Avatar Circle Avatar Hiển thị avatar người dùng
2 Username Text Họ tên người dùng
3 Date time Text Thời điểm cuộc hẹn
4 Doctor name Text Quên mật khẩu
5 Prescription Text input Đơn thuốc
6 Note Text input Ghi chú
7 Diagnosis Text input Điều hướng sang trang chẩn đoán
Hình 4.26 Màn hình chẩn đoán Bảng 4.23 Thành phần màn hình chẩn đoán
STT Tên thành phần Loại Chức năng
1 Note Textbox Nhập ghi chú
2 Diagnostic Textbox Nhập chẩn đoán
3 Prescription Textbox Dùng để nhập đơn thuốc
4 Save Button Lưu chẩn đoán
Hình 4.27 Màn hình gọi Bảng 4.24 Thành phần màn hình gọi
STT Tên thành phần Loại Chức năng
1 Video screen Component Hiển thị hình ảnh video
2 Control bar Button Các nút để kiểm soát video