THIẾT KẾ HỆ THỐNG

Một phần của tài liệu Xây dựng app khám bệnh online với react native và nodejs (Trang 37)

L ỜI MỞ ĐẦU

2. ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

3.1. THIẾT KẾ HỆ THỐNG

3.1.1. Lược đồ tuần tự

3.1.1.1. Lược đồ tuần tự - đăng nhập

37

3.1.1.2. Lược đồ tuần tự - đăng xuất

38

3.1.1.3. Lược đồ tuần tự - đăng ký

Hình 10 Lược đồ tuần tự - đăng ký

3.1.1.4. Lược đồ tuần tự - thêm đối tượng

39

3.1.1.5. Lược đồ tuần tự - sửa/ cập nhật đối tượng

Hình 12 Lược đồ tuần tự - sửa/ cập nhật đối tượng

3.1.1.6. Lược đồ tuần tự - xóa đối tượng

40

3.1.1.7. Lược đồ tuần tự - Gọi video call

41

3.1.1.8. Lược đồ tuần tự - Chat online

42

3.1.1.9. Lược đồ tuần tự - Đặt lịch khám online

43

3.2. THIẾT KẾ DỮ LIỆU 3.2.1. Chi tiết các bảng dữ liệu 3.2.1. Chi tiết các bảng dữ liệu

User (id, roleId, fullname, email, password, avatar, gender, birthday, phone, address, city, introduction, createAt, updateAt, deleteAt, history, typeOfPlaceWork, status, account)

Bảng 15 Chi tiết dữ liệu bảng Classes - User

STT Thuộc tính Kiểu Miền giá trị Ý nghĩa Ghi chú

1 id String Khóa chính Mã người dùng

2 roleId Enum Mã loại người

dùng

3 fullname String Tên đầy đủ người

dùng

4 email String Email

5 password String Mật khẩu được

mã hóa

6 avatar String Đường dẫn lưu

file hình đại diện

7 gender String Giới tính

8 birthday Datetime Ngày sinh

9 phone String Số điện thoại

10 address String Địa chỉ

44

12 introduction String Đường dẫn lưu

file giới thiệu

13 createdAt DateTime Ngày tạo

14 updatedAt Datetime Ngày cập nhật

15 deleteAt Datetime Ngày xóa

16 history String Tiểu sử

17 typeOfPlaceWork Enum Nơi làm việc

18 status Enum Trạng thái tài

khoản

19 account String Tên đăng nhập

Room (id, senderId, recieverId, portal, createAt, updateAt, deleteAt)

Bảng 16 Chi tiết dữ liệu bảng Classes - Room

STT Thuộc tính Kiểu Miền giá trị Ý nghĩa Ghi chú

1 id String Khóa chính Mã người dùng

2 senderId String Mã người gửi

3 recieverId String Mã người nhận

4 portal String

5 createdAt DateTime Ngày tạo

6 updatedAt Datetime Ngày cập nhật

45

Transaction (id, senderId, recieverId, portal, createAt, updateAt, deleteAt, amount)

Bảng 17 Chi tiết dữ liệu bảng Classes - Transaction

STT Thuộc tính Kiểu Miền giá trị Ý nghĩa Ghi chú

1 id String Khóa chính Mã giao dịch

2 senderId String Mã người gửi

3 recieverId String Mã người nhận

4 portal String Cổng giao dịch

5 createdAt DateTime Ngày tạo

6 updatedAt Datetime Ngày cập nhật

7 deleteAt Datetime Ngày xóa

8 amount Int Chi phí cuộc gọi

Message (id, senderId, recieverId, code, createAt, updateAt, deleteAt, content)

Bảng 18 Chi tiết dữ liệu bảng Classes - Message

STT Thuộc tính Kiểu Miền giá trị Ý nghĩa Ghi chú

1 id String Khóa chính Mã tin nhắn

2 senderId String Mã người gửi

3 recieverId String Mã người nhận

46

5 createdAt DateTime Ngày tạo

6 updatedAt Datetime Ngày cập nhật

7 deleteAt Datetime Ngày xóa

8 content String Nội dung tin nhắn

9 code String Mã tự động

CallHistory (id, senderId, recieverId, code, createAt, updateAt, deleteAt, room, callduration, amount)

Bảng 19 Chi tiết dữ liệu bảng Classes - CallHistory

STT Thuộc tính Kiểu Miền giá trị Ý nghĩa Ghi chú

1 id String Khóa chính Mã người dùng

2 senderId String Mã người gửi

3 recieverId String Mã người nhận

4 code String Mã tự động

5 createdAt DateTime Ngày tạo

6 updatedAt Datetime Ngày cập nhật

7 deleteAt Datetime Ngày xóa

8 room int Mã phòng chat

9 amount String Giá cuộc gọi

47

3.2.2. Sơ đồ quan hệ

Hình 17 Sơ đồ quan hệ 3.3. THIẾT KẾ GIAO DIỆN

3.3.1. Mô tả chi tiết các màn hình

3.3.1.1. Màn hình đăng nhập ( cho người dùng )

48

Chi tiết màn hình

Hình 18 Màn hình đăng nhập ( Người dùng)

Các đối tượng trong màn hình

Bảng 20 Các đối tượng trong màn hình đăng nhập ( Người dùng )

STT Loại Ý nghĩa

1 textEdit Nhập số điện thoại

2 textEdit Nhập mật khẩu

3 simpleButton Hiển thị mật khẩu

4 touchAbleopacity Quên mật khẩu, set mật khẩu

mới

5 simpleButton Đăng nhập

49

3.3.1.2. Màn hình đăng xuất

Ý nghĩa: Cho phép người dùng đăng xuất khỏi hệ thống

Chí tiết màn hình

Hình 19 Màn hình đăng xuất

Các đối tượng trong màn hình

Bảng 21 Các đối tượng trong màn hình đăng xuất

STT Loại Ý nghĩa

1 simpleButton Quản lý tài khoản

2 simpleButton Đồng ý đăng xuất

50

3.3.1.3. Màn hình chính người dùng ( bác sĩ )

Ý nghĩa: cho phép xem số dư tài khoản, xem thống kê cuộc gọi, tư vấn,

bệnh nhân, thao tác với tin nhắn, xem thông báo, quản lý tài khoản

Chi tiết màn hình

Hình 20 Màn hình chính người dùng ( bác sĩ )

Các đối tượng trong màn hình

Bảng 22 Các đối tượng trong màn hình chính người dùng ( Bác sĩ )

STT Loại Ý nghĩa

1 label Xem số dư tài khoản

2 label Xem thống kê cuộc gọi

51

3 label Xem thống kê cuộc gọi

video

4 label Xem thống kê số lần tư vấn

5 label Xem thống kê bệnh nhân

6 simpleButton Xem trang chủ

7 simpleButton Xem tin nhắn

8 simpleButton Xem thông báo

9 simpleButton Xem quản lý tài khoản

3.3.1.4. Màn hình chính người dùng ( Bệnh nhân )

Ý nghĩa: Cho phép tìm kiếm bác sĩ, gọi / chat online với bác sĩ, đặt xét

nghiệm, xem thông báo, quản lý tài khoản

Chi tết màn hình

52

Các đối tượng trong màn hình

Bảng 23 Các đối tượng trong màn hình chính người dùng ( Bệnh nhân )

STT Loại Ý nghĩa

1 lable Cho phép tìm kiếm bác sĩ tư

vấn

2 lable Cho phép gọi điện / gọi video

với bác sĩ

3 lable Cho phép chat message với

bác sĩ

4 lable Cho phép đăt xét nghiệm

online với bác sĩ

5 simpleButton Cho phép xem dịch vụ

6 simpleButton Cho phép xem tin nhắn

7 simpleButton Cho phép xem các thông báo

8 simpleButton Quản lý tài khoản cá nhân

3.3.1.5. Màn hình tin nhắn

53

Chi tiết màn hình

Hình 22 Màn hình tin nhắn

Các đối tượng trong màn hình

Bảng 24 Các đối tượng trong màn hình tin nhắn

STT Loại Ý nghĩa

1 textEdit Tìm kiếm tài khoản người

gửi / nhận tin nhắn

2 cpnBoxChat Hiển thị người gửi / nhận

tin nhắn

3 listView Hiển thị nội dung tin nhắn

4 simpleButton Thực hiện cuộc gọi thường

54

6 textEdit Soạn nội dung tin nhắn

7 simpleButton Chụp ảnh, chọn ảnh gửi

8 simpleButton Gửi tin nhắn

3.3.1.6. Màn hình tìm kiếm bác sĩ

Ý nghĩa: Cho phép tìm kiếm, liên hệ với bác sĩ

Chi tiết màn hình

55

Các đối tượng trong màn hình

Bảng 25 Các đối tượng trong màn hình tìm kiếm bác sĩ

STT Loại Ý nghĩa

1 textEdit Nhập tên bác sĩ muốn tìm

kiếm

2 label Hiển thị tên bác sĩ

3 simpleButton Nhắn tin đến bác sĩ

4 simpleButton Gọi điện thoại đến bác sĩ

5 simpleButton Gọi video call đến bác sĩ

6 simpleButton Chọn khoa

7 comboBox Chọn địa chỉ

8 radioButton Chọn chuyên khoa

9 simpleButton Tìm kiếm

10 touchAbleopacity Cho phép tìm kiếm quanh đây

bằng bản đồ

56

3.3.1.7. Màn hình đặt xét nghiệm online

Ý nghĩa: Cho phép xem, đặt các xét nghiệm online

Chi tiết màn hình

57

Các đối tượng trong màn hình

Bảng 26 Các đối tượng trong màn hình đặt xét nghiệm online

STT Loại Ý nghĩa

1 TextEdit Nhập tên xét nghiệm cần tìm

kiếm

2 Label Hiển thị thông tin loại xét

nghiệm

3 Label Hiển thị chi tiết các thông tin

về gói xét nghiệm người dùng chọn

4 simpleButton Đặt xét nghiệm

5 radioButton Chọn hình thức thanh toán

6 simpleButton Xác nhận thanh toán

3.3.1.8. Màn hình cuộc gọi đến

Ý nghĩa: Cho phép nhận / từ chối cuộc gọi đến

Chi tiết màn hình

Hình 25 Màn hình cuộc gọi đến

58

Bảng 27 Các đối tượng trong màn hình cuộc gọi đến

STT Loại Ý nghĩa

1 image Hiển thị ảnh đại diện người

gọi đến

2 text Hiển thị tên người gọi đến

3 simpleButton Từ chối cuộc gọi

4 simpleButton Chấp nhận cuộc gọi

3.3.1.9. Màn hình đăng nhập ( cho Admin )

Ý nghĩa: Cho phép đăng nhập dưới quyền Admin

Chi tiết màn hình

59

Các đối tượng trong màn hình

Bảng 28 Các đối tượng trong màn hình đăng nhập (Admin)

STT Loại Ý nghĩa

1 textEdit Nhập username

2 textEdit Nhập password

3 simpleButton Đăng nhập

3.3.1.10. Màn hình trang chủ quản lý của Admin

Ý nghĩa: Xem, thực hiện các chức năng quản lý của Admin

Chi tiết màn hình

Hình 27 Màn hình trang chủ quản lý của Admin

Các đối tượng trong màn hình

Bảng 29 Các đối tượng trong màn hình quản lý của Admin

STT Loại Ý nghĩa

1 simpleButton Quản lý người dùng ( Bệnh

nhân)

2 simpleButton Quản lý bác sĩ

60

3.3.1.11. Màn hình quản lý người dùng

Ý nghĩa: Cho phép admin thực hiện các thao tác để quản lý người dùng

Chi tiết màn hình

Hình 28 Màn hình quản lý người dùng

Các đối tượng trong màn hình

Bảng 30 Các đối tượng trong màn hình quản lý người dùng

STT Loại Ý nghĩa

1 simpleButton Thực hiện thêm tài khoản

người dùng

2 label Hiển thị thông tin tài khoản

61

3 simpleButton Sửa thông tin tài khoản người

dùng

4 simpleButton Xóa tài khoản

5 textEdit Nhập họ tên cho tài khoản

6 textEdit Nhập số điện thoại

7 textEdit Nhập mật khẩu cho tài khoản

62

CHƯƠNG 4. CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 4.1. CÀI ĐẶT PHẦN MỀM

Vì là hệ thống cung cấp dịch vụ khám bệnh từ xa, nên người dùng không cần phải cài đặt môi trường. Người dùng cuối chỉ cần truy cập vào website hoặc app store để tải app.

Để thiết lập môi trường development, người phát triển cần tiến hành cài đặt các môi trường sau đây

4.1.1. Cài đặt Node JS

- Khuyến khích cài NodeJs LTS version - Link dowload NodeJs: https://nodejs.org/en/

- Kiểm tra version NodeJs, mở Terminal và nhập lệnh: node –v

4.1.2. Cài đặt React Native CLI

- Người dùng chạy command: npm install -g react-native-cli

4.1.3. Cài đặt môi trường phát triển Android

- Vào trang chủ android studio: https://developer.android.com/studio/ - Chọn phiên bản phù hợp với thiết bị hỗ trợ

- Trong Android Studio, chọn Tools\Android\SDK Manager. Chọn SDK

Platforms và kiểm tra Show Package Details. Đảm bảo rằng các mục sau được chọn:

63

-

- Google APIs, Android 23 - Android SDK Platform 23

- Intel x86 Atom_64 System Image

- Google APIs Intel x86 Atom_64 System Image

- Sau đó, chọn SDK Tools và kiểm tra Show Package Details. Mở rộng Android

SDK Build-Tools và chắc chắn rằng 23.0.1 được chọn.

4.1.4. Cài đặt môi trường PortgreSQL

- Chạy các câu lệnh:

docker run -it --name postgres -e POSTGRES_PASSWORD=123456 -p 5432:5432 -d postgres

docker pull dpage/pgadmin4

docker run -it --name pgadmin4 -e 'PGADMIN_DEFAULT_EMAIL=postgres' -e 'PGADMIN_DEFAULT_PASSWORD=123456' -p 8081:80 -d dpage/pgadmin4

64

4.2. KIỂM THỬ PHẦN MỀM

4.2.1. Module chat và gọi video call của người dùng

Bảng 31 Kiểm thử Module chat và gọi video call của người dùng ID Test Case Procedure Expected Output Inter-test case

dependence Result 1 1. Đi đến màn hình đăng nhập 2. Nhập Usename và Password 3. Chọn đăng nhập

- Sau khi ấn đăng nhập, hiển thị thông báo nếu một trong 2 thông tin bị thiếu, hoặc thông tin Usename và password không chính xác. - Nếu chính xác đi đến màn hình chính cho từng loại người dùng. Passed 2 1. Đi đến màn hình messenger 2. Chọn người muốn chat 3. Chat

- Sau khi chọn tab messenger, hiển thị danh sách tin nhắn. - Vào box chat hiển thị danh

sách tin nhắn. Passed 3 1. Từ màn giao diện messenger. 2. Chọn button videocall 3. Hiển thị màn hình chờ phản hồi.

- Hiển thị thông báo xác nhận mức phí. - Hiển thị màn hình chờ Passed 4 1. Đi đến màn hình tìm đặt xét nghiệm 2. Chọn mục xét nghiệm muốn đặt

- Sau khi chọn mục mong muôn, hiển thị màn hình xác nhận

- Nếu thanh toán thành công, hiển thị thanh toán.

65 3. Chuyển sang màn hình xác nhận 4. Xác nhận thanh toán

- Nếu không thông báo lỗi

4.2.2. Quản lý người dùng

Bảng 32 Kiểm thử quản lý người dùng

ID Test Case Procedure Expected Output Inter-test case dependence

Result

1 1. Đi đến màn tạo mới người dùng. 2. Nhập các thông

tin vào form người dùng 3. Click “Xác

nhận”

Sau khi Click “Xác nhận”:

- Nếu một trong các thông tin bắt buộc bị thiếu thì hiển thị thông báo yêu cầu người dùng nhập đầy đủ thông tin - Nếu thông tin đầy đủ và

chính xác, thông tin người dùng được lưu vào CSDL và hiển thị thông báo thêm người dùng thành công. Passed 2 1. Đi đến màn danh người dùng. 2. Nhập thông tin tìm kiếm người dùng. 3. Chọn “Tìm kiếm”.

Sau khi nhập thông tin tìm kiếm và nhấn tìm kiếm:

- Không hiển thị nếu không tồn tại

- Dánh sách các người dùng theo thông tin tìm kiếm được hiển thị lên bảng

Passed

3 1. Đi đến màn hình danh sách người dùng.

- Hiển thị thông báo xác nhận - Nếu xác nhận thực hiện

update data

66

2. Chọn một người dùng

3. Click “Khóa tài khoản”

- Thành công hiển thị thông báo thành công. - Thậ 4 1. Đi đến màn hình danh sách người dùng 2. Chọn một người dùng 3. Click “Cập nhật thông tin”

Sau khi Click “Xác nhận”:

- Nếu một trong các thông tin bắt buộc bị thiếu thì hiển thị thông báo yêu cầu người dùng nhập đầy đủ thông tin - Nếu thông tin đầy đủ và

chính xác, thông tin người dùng được lưu vào CSDL và hiển thị thông báo cập nhật người dùng thành công.

67

KẾT LUẬN

1.KẾT QUẢ ĐẠT ĐƯỢC

- Hệ thống được bảo mật bằng công nghệ Json Web Token. - Các chức năng được xây dựng dựa trên các module riêng biệt.

- Xây dựng được cơ bản các chức năng quản lý thông tin người dùng, quản lý cuộc gọi, xử lý tín hiệu.

- Sản phẩm đảm bảo thời gian thực hiện.

2.ƯU ĐIỂM

- Hoạt động quản lý diễn ra một cách trơn chu và chính xác, không sảy ra tình trạng xung đột giữa các module.

- Các module được xây dựng một cách riêng biệt bằng các APIs tương ứng, đảm bảo luồng dữ liệu được chính xác.

- Người dùng ( bệnh nhân ) có thể dễ dàng tìm kiếm/ tra cứu thông tin bác sĩ.

- Cơ chế bảo mật tốt bằng Token tạo cơ sở cho sự yên tâm của người dùng đối với hệ thống.

3.NHƯỢC ĐIỂM

- Chưa tính toán được số lượng truy cập cùng lúc và lượng băng thông cần thiết đến hệ thống là bao nhiêu.

- Nghiệp vụ quản lý ở một vài Module cần phải nâng cấp trong tương lai.

- Hạn chế trong hỗ trợ dịch vụ cuộc gọi: chất lượng cuộc gọi cần được cải thiện nhiều trong tương lai

4.HƯỚNG PHÁT TRIỂN

- Tiếp tục hoàn thiện các chức năng còn thiếu.

- Nâng cấp sửa đổi các nghiệp vụ chưa hoàn toàn hợp lý - Bổ sung voice call, gửi hình ảnh cho message chat. - Quản lý đăng nhập chặt chẽ hơn.

68

DANH MỤC TÀI LIỆU THAM KHẢO

1. [1]. Tìm hiểu về WebRTC.

Link: https://topdev.vn/blog/webrtc-la-gi/

2. [2]. Learn Socket IO

Link: https://socket.io/docs/

3. [3]. React Native WebRTC Community. Link: https://github.com/react-native-webrtc

4. [4]. Express Js Community

Một phần của tài liệu Xây dựng app khám bệnh online với react native và nodejs (Trang 37)