Khóa luận tốt nghiệp khuyến nghị cộng tác dựa trên tiếp cận học sâu

TỔNG QUAN

Mục tiêu và phạm vi

- Nghiên cứu, tìm hiểu và thu thập các số liệu thống kê về tình hình dịch bệnh COVID-19 từ các nguồn Bộ Y Tế, WHO

- Thu thập thông tin về các địa điểm bán khẩu trang, phát khẩu trang trên toàn quốc thông qua mạng xã hội, các phương tiện thông tin đại chúng.

- Xây dựng ứng dụng di động đa nền tảng (Android và iOS) 20

- Hiển thị bản đồ trực quan

- Xây dựng Back-end đảm bảo tính security, sử dụng JWT để Authentication -

Tư vấn các thông tin mùa dịch

- Thông báo khi đi vào vùng có dịch lây nhiễm

- Thiết kế UI/UX theo xu hướng Material Design

- Phạm vi địa lý: Việt Nam và thế giới

- Phạm vi độ tuổi: mọi lứa tuổi

- Phạm vi giới tính: mọi giới tính

• Chia sẻ thông tin: thông tin dịch bệnh COVID-19, thông tin địa điểm bán khẩu trang, thông tin địa điểm bán nước rửa tay

• Tìm địa điểm di duyển an toàn, tránh dịch bệnh

• Tư vấn thông tin mùa dịch

• Chia sẻ thông tin lây nhiễm

• View bản đồ trực quan

• Thông báo khi sắp di chuyển vào vùng nguy hiểm có dịch

• Quản lý thông tin người dùng.

Nội dung thực hiện 21 1.4 Kết quả dự kiến .22 CHƯƠNG 2 CÔNG NGHỆ SỬ DỤNG

- Nghiên cứu công nghệ và phân tích thiết kế hệ thống

- Thiết kế giao diện ứng dụng

- Xây dựng cấu trúc project

Nghiên cứu và thu thập thông tin chi tiết về dịch COVID-19 là rất quan trọng, bao gồm số ca mắc bệnh, số ca tử vong và số ca hồi phục từ các quốc gia có ca nhiễm trên toàn thế giới.

- Nghiên cứu, thu thập thông tin của hơn 300 địa điểm bán khẩu trang, phát khẩu trang trên toàn quốc

- Hiển thị thông tin tình hình dịch bệnh COVID-19, hiển thị thông tin các địa điểm bán khẩu trang, phát khẩu trang

Trong bối cảnh dịch bệnh COVID-19, chúng tôi cung cấp thông tin tư vấn cần thiết để người dân nắm rõ tình hình Chúng tôi chia sẻ dữ liệu về các ca nhiễm COVID-19 tại Việt Nam để cập nhật kịp thời Bên cạnh đó, chúng tôi cũng thông báo cho người dân khi di chuyển vào các vùng có nguy cơ cao về dịch bệnh.

- Hoàn thành chức năng tạo mới địa điểm bán khẩu trang, phát khẩu trang

- Hoàn thành chức năng xác nhận còn hàng, hết hàng với các địa điểm bán khẩu trang, phát khẩu trang

- Hoàn thành chức năng viết nhận xét, bình luận với các địa điểm bán khẩu trang, phát khẩu trang

- Hoàn thành chức năng quản lý người dùng

- Hiển thị bản đồ trực quan.

CHƯƠNG 2 CÔNG NGHỆ SỬ DỤNG 22

Spring boot

Spring Boot is a module of the Spring Framework, developed in the Java programming language It offers Rapid Application Development (RAD) capabilities, enabling faster application development.

Spring Boot giúp lập trình viên phát triển ứng dụng Spring một cách nhanh chóng và hiệu quả Nó đơn giản hóa quy trình lập trình, cho phép các lập trình viên tập trung vào việc phát triển các chức năng nghiệp vụ của ứng dụng.

Hình 2.1 Cấu trúc của Spring Boot trong Spring Framework

Spring Boot là công cụ lý tưởng để phát triển các ứng dụng độc lập dựa trên Spring mà không cần cấu hình XML, giúp tăng cường hiệu suất cho các lập trình viên Nó cung cấp một chuẩn thiết kế phần mềm, tối ưu hóa quy trình phát triển ứng dụng.

Spring boot hỗ trợ nhiều ngôn ngữ lập trình như: Java, Groovy, Kotlin.

2.1.2 Tại sao dùng Spring Boot 23

Spring Boot cho phép phát triển các ứng dụng Spring độc lập dưới dạng tệp JAR, giúp việc triển khai trở nên dễ dàng mà không cần cấu hình bổ sung.

- Tối ưu công đoạn cấu hình cho ứng dụng Spring, không sinh code cấu hình và không yêu cầu phải cấu hình XML

Lập trình hướng khía cạnh (AOP) hỗ trợ việc phân tách chương trình thành các module độc lập, giúp tăng cường khả năng quản lý và bảo trì mã nguồn Việc này cho phép các thành phần trong chương trình hoạt động tách biệt mà không phụ thuộc lẫn nhau, nâng cao tính linh hoạt và hiệu suất của ứng dụng.

- Chạy đa nền tảng, chỉ cần cài đặt JVM

- Tốc độ xử lý nhanh, hiệu năng cao

- Spring Boot dễ học, phổ biến và được cộng đồng hỗ trợ nhiều

- Dễ dàng tích hợp với các framework khác trong hệ sinh thái Spring -

Bản thân có 1 năm kinh nghiệm làm việc với Spring Boot

2.1.3 Áp dụng Spring Boot vào đề tài

- Sử dụng Spring Boot để xây dựng server Back-end, tạo các API cho ứng dụng - Áp dụng kiến trúc REST API

- Sử dụng cache để tăng hiệu năng.

MongoDB

MongoDB [2] là một hệ quản trị cơ sở dữ liệu mã nguồn mở NoSQL phổ biến

MongoDB được tạo bởi Dwight Merriman và Eliot Horowitz.

Hình 2.2 Các tính năng của MongoDB

MongoDB là một cơ sở dữ liệu hướng tài liệu, lưu trữ dữ liệu dưới dạng document kiểu JSON, giúp truy vấn nhanh chóng hơn so với các cơ sở dữ liệu quan hệ Hơn nữa, với schema động linh hoạt, các nhà phát triển ứng dụng có thể dễ dàng lưu trữ bản ghi mà không cần lo lắng về cấu trúc dữ liệu, bao gồm số lượng trường và kiểu dữ liệu.

MongoDB là một cơ sở dữ liệu NoSQL đa nền tảng, tương thích với Windows, Linux và MacOS Nó hỗ trợ nhiều ngôn ngữ lập trình phổ biến như C#, Java, PHP và Javascript, phù hợp cho các môi trường phát triển đa dạng.

2.2.2 Tại sao nên sử dụng MongoDB

MongoDB áp dụng schema linh hoạt nhờ vào việc lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection chứa các kích cỡ và loại document khác nhau, mang lại sự linh hoạt tối ưu trong việc quản lý và lưu trữ dữ liệu.

Dữ liệu trong MongoDB không yêu cầu sự ràng buộc lẫn nhau và không hỗ trợ join như trong các hệ thống cơ sở dữ liệu quan hệ (RDBMS) Điều này giúp người dùng tiết kiệm thời gian khi thay đổi dữ liệu, vì không cần kiểm tra các ràng buộc dữ liệu như trong RDBMS.

- Không cần định nghĩa kiểu dữ liệu ở dưới database 25

- MongoDB rất dễ mở rộng

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Khi thực hiện truy vấn dữ liệu, các bản ghi sẽ được lưu trữ trong bộ nhớ RAM để tăng tốc độ truy vấn cho các lần sau mà không cần đọc từ ổ cứng MongoDB mang lại hiệu năng cao với tốc độ truy vấn (tìm kiếm, cập nhật, chèn, xóa) nhanh hơn nhiều so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS).

Hình 2.3 Hiệu năng của MongoDB 2.2.3 Áp dụng MongoDB vào đề tài

- Nhờ sự linh động của MongoDB, dễ dàng khai báo các collection bằng các java class

- Back-end sử dụng Spring Data để kết nối MongoDB truy vấn dữ liệu.

Spring Data

Spring Data là một dự án quan trọng của công ty SpringSource, nhằm mục đích tạo ra sự thống nhất và dễ dàng kết nối đến nhiều loại lưu trữ khác nhau, bao gồm cả hệ quản trị cơ sở dữ liệu SQL và NoSQL Dự án này bao gồm nhiều module tương ứng với các hệ quản trị cơ sở dữ liệu cụ thể, chẳng hạn như Spring Data MongoDB cho MongoDB và Spring Data JDBC cho MySQL.

Hình 2.4 Cấu trúc chung của Spring Data

Spring Data cung cấp các interface hữu ích cho việc quản lý cơ sở dữ liệu Dù sử dụng hệ quản trị cơ sở dữ liệu nào, người dùng có thể thực hiện các thao tác như thêm, sửa, xoá, và tìm kiếm dữ liệu theo khoá chính hoặc thuộc tính.

Hỗ trợ nhiều hệ quản trị cơ sở dữ liệu như MySQL, SQL Server, MongoDB, Redis, Cassandra, ArangoDB, Aerospike,…

2.3.2 Tại sao nên sử dụng Spring Data

- Dễ dàng tích hợp với Spring Boot.

- Cung cấp sẵn các interface phổ biến, giảm thiểu thời gian code 27

- Hỗ trợ tốt cho MongoDB

- Dễ dàng tuỳ chỉnh các interface phù hợp với mục đích của nhà phát triển -

Dễ dàng ánh xạ với các đối tượng trên custom object

- Hỗ trợ tính minh bạch, chính xác của data thông qua thời gian tạo, thời gian chỉnh sửa (created_date, last_updated_date)

- Có thể làm việc với các dữ liệu trên các kho dữ liệu khác nhau

2.3.3 Áp dụng Spring Data vào đề tài

Hệ quản trị cơ sở dữ liệu của đề tài dùng MongoDB nên module là Spring Data

Khi sử dụng Spring Data MongoDB, bạn chỉ cần khai báo các đối tượng trong mã nguồn mà không cần lo lắng về việc định nghĩa thuộc tính trong cơ sở dữ liệu Việc thêm, sửa, hoặc xóa giá trị thuộc tính sẽ tự động cập nhật trong cơ sở dữ liệu, giúp giảm thiểu mã nguồn, tiết kiệm thời gian và đơn giản hóa quá trình phát triển ứng dụng.

Spring Security

Spring Security [4] là một framework tập trung vào việc cung cấp khả năng xác thực và phân quyền khi thực thi tác vụ trên Spring

Spring Security cung cấp 2 cơ chế cơ bản:

Xác thực là cơ chế cho phép người dùng truy cập và sử dụng ứng dụng Để hoàn tất quá trình này, người dùng cần đăng nhập hoặc đăng ký tài khoản, đây là bước đầu tiên trong việc xác thực người dùng.

- Authorization: cung cấp cơ chế phân quyền xác định một hành động, một thao tác của user có được phép hay không

2.4.2 Tại sao nên sử dụng Spring Security

- Dễ dàng tích hợp với Spring Boot

- Cho phép kế thừa lại các lớp để thay đổi luồng

- Hỗ trợ xác thực và phân quyền trong hệ thống.

- Có thể tích hợp với Servlet API

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) cho phép truyền tải thông tin an toàn giữa các bên dưới dạng đối tượng JSON Thông tin trong JWT có thể được xác thực và đảm bảo độ tin cậy nhờ vào phần "chữ ký" của nó, được mã hóa bằng HMAC hoặc RSA.

Một trong những tình huống ứng dụng JWT thường gặp đó là:

Xác thực người dùng được thực hiện thông qua token JWT, cho phép mỗi yêu cầu sau khi đăng nhập đều có kèm theo chuỗi token này, giúp người dùng truy cập các dịch vụ và tài nguyên tương ứng Chức năng Single Sign On cũng sử dụng JWT rộng rãi, nhờ vào kích thước nhỏ gọn của chuỗi token, cho phép dễ dàng đính kèm trong các yêu cầu và sử dụng trên nhiều hệ thống thuộc các miền khác nhau.

JSON Web Token (JWT) là một phương pháp hiệu quả và an toàn để trao đổi thông tin giữa các ứng dụng, nhờ vào việc JWT được ký bằng cặp public/private key, đảm bảo người gửi là chính xác Chữ ký của JWT được tính toán dựa trên nội dung của header và payload, giúp xác thực nội dung nguyên bản mà không bị chỉnh sửa Tuy nhiên, do cấu trúc đơn giản của JWT, nó có thể dễ dàng bị giải mã, vì vậy không nên sử dụng JWT để truyền tải thông tin nhạy cảm.

2.4.4 Áp dụng vào đề tài

Sử dụng SHA512 để mã hoá mật khẩu người dùng

Sử dụng Spring Security kết hợp với JWT để bảo mật thông tin người dùng, khi user gửi request đến tài nguyên hệ thống cần đính kèm token.

Token có thời hạn 24 giờ và sau khi hết hạn, cần gọi API để làm mới token Token đã hết hạn sẽ không còn khả dụng.

After logging in, the server responds with a token corresponding to the entered username and password The mobile application stores this token in Local Storage for convenient future use.

React Native

React Native là một framework do Facebook phát triển, cho phép lập trình viên sử dụng JavaScript để xây dựng ứng dụng đa nền tảng cho cả Android và iOS với giao diện native Framework này được thiết kế để tối ưu hóa hiệu suất và giảm chi phí khi phải viết mã cho từng nền tảng di động khác nhau.

Hình 2.5 Cấu trúc hoạt động của React Native

React Native phát triển ứng dụng native, không phải hybrid như Ionic hay Meteor Với 100% Native UI, React Native mang lại trải nghiệm "mượt mà" khi render giao diện người dùng và thu hẹp khoảng cách về hiệu năng giữa ứng dụng đa nền tảng và ứng dụng độc lập Những ưu điểm của React Native bao gồm khả năng tái sử dụng mã nguồn, hiệu suất cao và trải nghiệm người dùng tốt hơn.

Hot Reloading cho phép lập trình viên thay đổi mã nguồn mà không cần phải biên dịch lại toàn bộ ứng dụng Điều này giúp tiết kiệm thời gian đáng kể, vì thay vì phải build và recompile từ đầu để kiểm tra sự thay đổi, ứng dụng sẽ tự động duy trì trạng thái và reload ngay tại màn hình đang chỉnh sửa Nhờ đó, các thay đổi diễn ra nhanh chóng chỉ trong vài giây, nâng cao hiệu suất làm việc của lập trình viên.

- Đa nền tảng: code một lần và chạy được trên nhiều nền tảng di động khác nhau -

Sử dụng ngôn ngữ lập trình JavaScript, ngôn ngữ lập trình phổ biến nhất hiện nay

React Native mang lại hiệu quả vượt trội về thời gian và chi phí trong việc phát triển ứng dụng nhanh chóng Nhờ vào Native Module, React Native có khả năng tích hợp mã native viết bằng Kotlin/Java cho Android và Objective-C/Swift cho iOS, giúp tối ưu hóa hiệu suất ứng dụng.

- Trải nghiệm người dùng tốt hơn Hybrid app

Nhược điểm của React Native:

- Hiệu năng vẫn có phần yếu hơn so với native app

- Bảo mật kém do dựa trên JavaScript

- Gặp vấn đề quản lý bộ nhớ

- Một số module khó tuỳ biến hoặc không thể tuỳ biến

- Vẫn yêu cầu native code

2.5.2 Tại sao sử dụng React Native

- React Native là nển tảng phổ biến, phát triển ứng dụng nhanh

- Đa nền tảng, viết code một lần chạy được trên cả Android và iOS -

Build ứng dụng thành native app, nên hiệu năng ổn định

- Dễ thiết kế dao diện đa nền tảng

2.5.3 Áp dụng React Native vào đề tài

Using React Native in conjunction with the react-native-maps library allows for effective map display, while react-navigation facilitates seamless navigation between screens Additionally, redux-saga is employed for efficient data management.

PHÂN TÍCH XÁC ĐỊNH BÀI TOÁN

Xác định bài toán

Dựa vào mục tiêu và phạm vi của đề tài, chúng ta có thể ước lượng khối lượng dữ liệu mà ứng dụng cần xử lý, từ đó đề xuất các giải pháp hợp lý Dữ liệu sẽ bao gồm các phần chính sau đây:

Giải quyết bài toán

- Số liệu COVID-19 của các tỉnh thành ở Việt Nam

- Số liệu về thông tin quá trình lây nhiễm của các ca mắc bệnh COVID-19 tại Việt Nam

- Dữ liệu về địa điểm bán khẩu trang, nước rửa tay ở Việt Nam

- Thông tin tư vấn dịch COVID-19

- Dữ liệu về dịch COVID-19 do người dùng gửi lên

Dữ liệu lớn được cập nhật liên tục từ Bộ Y Tế và WHO, đặc biệt là số liệu COVID-19 và thông tin lây nhiễm, chiếm một khối lượng lớn trong tổng thể dữ liệu.

Trước sự gia tăng đáng kể của dữ liệu, việc xử lý và hiển thị một khối lượng lớn thông tin trở thành một thách thức cần được giải quyết.

Marker clustering là một công cụ hữu ích giúp nhóm các marker trên bản đồ, cho phép hiển thị một số lượng lớn marker mà không làm giảm tính trực quan của bản đồ.

Tiện ích clustering giúp quản lý marker hiệu quả hơn ở các mức độ zoom khác nhau Mỗi marker được xem như một item tại các điểm trên bản đồ và trở thành marker khi được hiển thị Các marker được tổ chức trong một thư mục, cho phép hiển thị số lượng item trong nhóm đó.

Khi người dùng thực hiện zoom cao trên bản đồ, các marker sẽ hiển thị rõ ràng Ngược lại, khi zoom out đến mức nhất định, các marker sẽ được nhóm lại, giúp bản đồ trở nên dễ nhìn hơn.

Hình 3.1 Marker clustering 3.2.1 Áp dụng Marker clustering

Việc sử dụng Marker clustering giúp hiển thị bản đồ với lượng lớn dữ liệu trở nên trực quan và dễ đọc hơn Tuy nhiên, hiển thị dữ liệu lớn trên thiết bị di động gặp khó khăn do hạn chế về bộ nhớ RAM và vi xử lý Do đó, bên cạnh Marker clustering, cần tối ưu hóa hiển thị dữ liệu trên bản đồ để đảm bảo trải nghiệm người dùng tốt nhất.

Giải pháp đặt ra như sau: 33

- Chia map thành các ô Tile nhỏ hơn với các giá trị biên là from_lat, to_lat, from_lng, to_lng

- Mỗi Tile sẽ bao gồm các dữ liệu có giá trị latitude, longitude thuộc vào các giá trị biên ở trên

- Phân chia các marker vào các Tile đã chia ở trên

- Khi người dùng di chuyển map tới đâu thì chỉ hiển thị các marker thuộc trong vùng hiển thị của map

Mỗi ô Tile sẽ được gán một phiên bản (version), và khi có sự thay đổi hoặc cập nhật dữ liệu bên trong, phiên bản này sẽ được nâng cấp Điều này không chỉ giúp tối ưu hóa băng thông của máy chủ mà còn cải thiện hiệu suất của hệ thống.

- Sử dụng kết hợp với Marker clustering.

Các hệ thống liên quan

NCOVI là ứng dụng chính thức do Bộ Y Tế và Bộ Thông tin và Truyền thông phát triển, nhằm hỗ trợ người dân trên toàn quốc trong việc khai báo y tế tự nguyện Ứng dụng này đóng vai trò quan trọng trong công tác phòng chống và kiểm soát dịch bệnh viêm phổi cấp do virus Corona mới gây ra.

Ứng dụng NCOVI hỗ trợ người dân chủ động trong việc phòng chống dịch COVID-19 bằng cách cho phép khai báo thông tin sức khỏe cá nhân và gia đình mọi lúc, mọi nơi Ngoài ra, người dùng có thể nhanh chóng gửi phản ánh về tình hình dịch bệnh và các đối tượng nghi ngờ nhiễm bệnh trong khu vực sinh sống của mình.

- Cập nhật thống kê thông tin dịch bệnh COVID-19 nhanh chóng, chính thức từ Bộ

- Nhận được khuyến cáo, hướng dẫn phòng tránh dịch bệnh một cách hiệu quả, giảm nguy cơ nhiễm bệnh do nCov gây ra.

Tuy nhiên, NCOVI lại có những mặt hạn chế như sau:

- Thông tin thống kê dịch bệnh hiển thị không trực quan, sinh động -

Giao diện thiết kế không tối ưu, rối mắt người dùng

- Dữ liệu thông tin còn hạn chế

- Không có thông tin tư vấn phòng chống dịch.

Kết luận

Các ứng dụng liên quan đến COVID-19 tại Việt Nam còn hạn chế do yêu cầu nghiêm ngặt từ Apple App Store và Google Play Store Điều này tạo ra cả lợi thế và bất lợi cho từng ứng dụng Hơn nữa, các ứng dụng này đều thuộc quyền sở hữu của nhà nước, dẫn đến một số tính năng độc quyền mà không thể sao chép.

Nhóm đã xác định những điểm mạnh của các ứng dụng hiện có và đồng thời bổ sung những thiếu sót mà các ứng dụng này chưa đáp ứng.

- Hiển thị thông tin trực quan, sinh động

- Dữ liệu thông tin đầy đủ, cập nhật thường xuyên

- Giao diện thân thiện, tối ưu và dễ sử dụng.

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Phân tích thiết kế hệ thống 37 1 Sơ đồ use case .37 2

Hình 4.1 Mô hình use case ứng dụng

1 Người dùng Người dùng sử dụng ứng dụng

2 Admin Người quản trị ứng dụng

Bảng 4.1 Danh sách các actor 4.1.3 Danh sách use case

STT Tên usecase Mô tả usecase

1 Đăng ký Cho phép người dùng đăng ký tài khoản bằng số điện thoại, họ tên.

2 Đăng nhập Cho phép người dùng đã có tài khoản đăng nhập bằng số điện thoại.

3 Quên mật khẩu Cho phép người dùng đặt lại mật khẩu.

4 Thay đổi thông tin Cho phép người dùng thay đổi thông tin tài khoản, thay đổi mật khẩu.

5 Thông tin COVID-19 Cho phép người dùng xem thông tin về số ca mắc bệnh, số ca tử vong, số ca hồi phục liên quan đến dịch

COVID-19 của các nước trên thế giới.

6 Thông tin lây nhiễm Cho phép người dùng theo dõi thông tin lây nhiễm của các ca mắc bệnh tại Việt Nam.

7 Thông tin địa điểm Cho phép người dùng xem thông tin chi tiết về các địa điểm bán khẩu trang, nước rửa tay.

8 Chia sẻ thông tin Cho phép người dùng chia sẻ các thông tin về dịch

COVID-19 như thông tin lây nhiễm, địa điểm bán

38 khẩu trang, nước rửa tay.

9 Thông báo nguy cơ lây nhiễm Thông báo khi người dùng sắp đi vào vùng có nguy cơ nhiễm dịch.

10 Tư vấn thông tin Tư vấn thông tin mùa dịch COVID-19.

11 Cập nhật thông tin COVID-19

Cập nhật thông tin dữ liệu mới nhất về dịchCOVID-19 từ Bộ Y Tế, WHO.

12 Cập nhật thông tin lây nhiễm

Cập nhật thông tin dữ liệu lây nhiễm mới nhất của các ca bệnh từ nguồn của Bộ Y Tế.

13 Xác nhận thông tin Xác nhận tính chính xác, đúng đắn của dữ liệu người dùng chia sẻ khi chia sẻ thông tin.

14 Bình luận Viết nhận xét, đánh giá về thông tin dữ liệu mà người dùng chia sẻ thông tin.

Bảng 4.2 Danh sách các use case

4.1.4 Mô tả chi tiết các Use case

4.1.4.1 Đặc tả use case “Đăng ký”

Mô tả: Thực hiện đăng ký tài khoản người dùng.

Người dùng bắt đầu sử dụng ứng dụng nhưng chưa hoàn tất việc đăng ký tài khoản Để tận dụng đầy đủ các tính năng của ứng dụng, người dùng cần hoàn tất quá trình đăng ký tài khoản.

Bước Hành động người dùng Hành động hệ thống

2 Hiện màn hình khởi động

3 Bấm chọn màn hình đăng ký.

4 Đi đến màn hình đăng ký

5 Nhập thông tin họ tên, số điện thoại, mật khẩu và nhấn nút Đăng ký.

6 Chuyển sang màn hình nhập mã code OTP được gửi về số điện thoại đã nhập.

7 Nhập mã code/mã code tự điền

Thông báo đăng ký thành công và chuyển sang màn hình trang chủ.

Bảng 4.3 Dòng sự kiện chính use case “Đăng ký”

Mô tả: Số điện thoại đã được đăng ký trong tài khoản hệ thống.

Người dùng đang ở màn hình Đăng ký và cần nhập họ tên, số điện thoại cùng mật khẩu trước khi nhấn nút Đăng ký Tuy nhiên, sau khi thực hiện, người dùng không chuyển sang màn hình nhập mã OTP và không nhận được mã OTP gửi về điện thoại.

1 Ở màn hình Đăng ký Nhập họ tên, số điện thoại, mật khẩu và nhấn nút Đăng ký.

2 Hệ thống thông báo số điện thoại đã được đăng ký trong hệ thống.

Bảng 4.4 Dòng sự kiện phụ use case “Đăng ký”

4.1.4.2 Đặc tả use case “Đăng nhập”

Mô tả: Thực hiện đăng nhập vào ứng dụng

Actor: Người dùng Điều kiện trước: Người dùng đã đăng ký tài khoản, đang ở màn hình đăng nhập. Điều kiện sau: Đăng nhập thành công vào ứng dụng

1 Từ màn hình đăng nhập, nhập số điện thoại và mật khẩu rồi nhấn nút Đăng nhập.

2 Đăng nhập thành công và chuyển sang màn hình trang chủ.

Bảng 4.5 Dòng sự kiện chính use case “Đăng nhập”

Mô tả: Tài khoản chưa được kích hoạt

Người dùng mở ứng dụng và nhập số điện thoại cùng mật khẩu trên màn hình đăng nhập Sau khi bấm nút Đăng nhập, nếu thông tin chính xác, người dùng sẽ được đăng nhập thành công vào ứng dụng.

1 Ở màn hình đăng nhập Nhập số điện thoại và mật khẩu rồi bấm Đăng nhập.

2 Thông báo tài khoản chưa được kích hoạt và chuyển sang màn hình nhập OTP đồng thời gửi OTP code kích hoạt tài khoản vào số điện thoại đã được đăng nhập.

4 Đăng nhập thành công và chuyển sang màn hình trang chủ.

Bảng 4.6 Dòng sự kiện phụ use case “Đăng nhập”

4.1.4.3 Đặc tả use case “Quên mật khẩu” 42

Mô tả: Người dùng không nhớ mật khẩu đăng nhập.

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình đăng nhập Điều kiện sau: Người dùng có thể đặt lại mật khẩu

1 Ở màn hình đăng nhập, bấm

Quên mật khẩu và nhập số điện thoại đã đăng ký.

2 Hệ thống gửi OTP code về số điện thoại đã đăng ký đồng thời di chuyển đến màn hình nhập code OTP.

4 Di chuyển đến màn hình thay đổi mật khẩu.

5 Nhập mật khẩu mới và nhập lại mật khẩu mới rổi bấm Thay đổi mật khẩu

6 Thông báo thay đổi mật khẩu thành công và chuyển sang màn hình trang chủ.

Bảng 4.7 Dòng sự kiện chính use case “Quên mật khẩu”

4.1.4.4 Đặc tả use case “Thay đổi thông tin” 43

Mô tả: Thực hiện thay đổi thông tin người dùng

Actor: Người dùng Điều kiện trước: Người dùng đã đăng nhập, đang ở màn hình Tài khoản. Điều kiện sau: Cập nhật thông tin người dùng.

1 Ở màn hình tài khoản, chọn Quản lý tài khoản/Đổi mật khẩu

2 Di chuyển đến màn hình Quản lý tài khoản/Đổi mật khẩu

3 Chọn và nhập thông tin cần thay đổi sau đó bấm Cập nhật.

4 Thông báo thay đổi thông tin thành công, quay về màn hình Tài khoản.

Bảng 4.8 Dòng sự kiện chính use case "Thay đổi thông tin"

4.1.4.5 Đặc tả use case “Thông tin COVID-19”

Mô tả: Thực hiện xem chi tiết thông tin số liệu các ca nhiễm COVID-19 trên thế giới

44 Điều kiện trước: Người dùng đang ở màn hình Trang chủ Điều kiện sau: Xem được chi tiết thông tin COVID-19

1 Ở màn hình Trang chủ, bấm vào icon Covid ở trên bản đồ.

2 Hiển thị chi tiết thông tin COVID-19 của địa điểm đã chọn bao gồm thông tin số ca nhiễm, số ca tử vong, số ca hồi phục và mức độ lây nhiễm.

Bảng 4.4 Dòng sự kiện chính use case “Thông tin COVID-19”

4.1.4.6 Đặc tả use case “Cập nhật thông tin COVID-19”

Mô tả: Cập nhật thông tin COVID-19 dữ liệu mới nhất từ Bộ Y Tế và WHO

Dữ liệu COVID-19 trên ứng dụng hiện đang chậm cập nhật so với thông tin từ Bộ Y Tế và WHO Cần thiết phải cập nhật dữ liệu mới nhất để đảm bảo người dùng nhận được thông tin chính xác và kịp thời về tình hình dịch bệnh.

1 Gọi API cập nhật dữ liệu COVID-19

2 Cập nhật dữ liệu mới nhất từ Bộ

Bảng 4.5 Dòng sự kiện chính use case “Cập nhật thông tin COVID-19”

4.1.4.7 Đặc tả use case “Thông tin lây nhiễm”

Người dùng có thể xem thông tin về tình hình lây nhiễm của các ca mắc bệnh tại Việt Nam ngay trên màn hình Trang chủ Sau khi thực hiện, người dùng sẽ nhận được thông tin chi tiết về các ca bệnh.

1 Ở màn hình Trang chủ, nhấn icon lây nhiễm muốn xem ở trên bản đồ.

2 Hiển thị thông tin chi tiết về thông tin lây nhiễm của ca mắc bệnh.

Bảng 4.11 Dòng sự kiện chính use case “Thông tin lây nhiễm”

4.1.4.8 Đặc tả use case “Cập nhật thông tin lây nhiễm”

Mô tả: Cập nhật thông tin lây nhiễm mới nhất

Actor: Admin Điều kiện trước: Dữ liệu thông tin lây nhiễm chưa cập nhật mới.

46 Điều kiện sau: Cập nhật dữ liệu mới nhất

1 Gọi API cập nhật dữ liệu Thông tin lây nhiễm

Cập nhật thông tin lây nhiễm mới nhất từ Bộ Y Tế.

Bảng 4.12 Dòng sự kiện chính use case “Cập nhật thông tin lây nhiễm”

4.1.4.9 Đặc tả use case “Thông tin địa điểm”

Mô tả: Hiển thị thông tin chi tiết địa điểm bán khẩu trang, nước rửa tay.

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình “Trang chủ” Điều kiện sau: Hiển thị thông tin chi tiết

1 Ở màn hình “Trang chủ”, nhấn chọn icon địa điểm muốn xem trên bản đồ.

2 Di chuyển đến màn hình “Chi tiết địa điểm” và hiển thị thông tin chi tiết của địa điểm.

Bảng 4.13 Dòng sự kiện chính use case “Thông tin địa điểm”

4.1.4.10 Đặc tả use case “Chia sẻ thông tin” 47

Chia sẻ thông tin về địa điểm bán khẩu trang và thông tin lây nhiễm là rất quan trọng Người dùng có thể dễ dàng thực hiện việc này từ màn hình Trang chủ Sau khi chia sẻ, thông tin sẽ được gửi đi thành công, giúp cộng đồng nắm bắt kịp thời các thông tin cần thiết để bảo vệ sức khỏe.

1 Ở màn hình “Trang chủ”, bấm chọn loại thông tin muốn chia sẻ.

2 Di chuyển đến màn hình “Tạo mới thông tin”

3 Nhập thông tin cần chia sẻ rồi bấm nút “Gửi”

4 Tạo mới thông tin chia sẻ, di chuyển về màn hình “Trang chủ”

Bảng 4.14 Dòng sự kiện chính use case “Chia sẻ thông tin”

4.1.4.11 Đặc tả use case “Xác nhận thông tin” 48

Mô tả: Xác nhận tình trạng thông tin chia sẻ của người dùng

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình chi tiết thông tin chia sẻ Điều kiện sau: Xác nhận thành công

1 Ở màn hình chia tiết thông tin chia sẻ, nhấn chọn vào trạng thái (còn hàng/hết hàng, đúng/sai) mà người dùng muốn xác nhận.

2 Hiển thị thông báo cho người dùng chắc chắn rằng muốn xác nhận thông tin.

3 Người dùng bấm chọn xác nhận.

4 Hệ thống ghi nhận thông tin xác nhận từ người dùng, đồng thời đổi trạng thái thông tin chia sẻ và tạo mới một bình luận với nội dung tương ứng với trạng thái mà người dùng đã xác nhận trước đó.

Bảng 4.15 Dòng sự kiện chính use case “Xác nhận thông tin”

Mô tả: Người dùng chưa đăng nhập

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình chi tiết thông tin chia sẻ. Điều kiện sau: Xác nhận thông tin không thành công.

2 Thông báo người dùng chưa đăng nhập và hiển thị thông báo yêu cầu đăng nhập.

Bảng 4.16 Dòng sự kiện phụ use case “Xác nhận thông tin”

Mô tả: Người dùng không thể xác nhận được thông tin

Người dùng đang ở màn hình chi tiết thông tin chia sẻ và đã xác nhận thông tin trước đó Tuy nhiên, quá trình xác nhận thông tin không thành công, dẫn đến việc cần xem xét lại các thông tin đã cung cấp.

2 Thông báo cho người dùng là đã xác nhận thông tin trước đó, phải chờ tối thiểu 30 phút để có thể xác nhận lại thông tin.

Bảng 4.17 Dòng sự kiện phụ use case “Xác nhận thông tin”

4.1.4.12 Đặc tả use case “Bình luận”

Mô tả: Viết bình luận với thông tin được chia sẻ

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình chi tiết thông tin chia sẻ. Điều kiện sau: Bình luận thành công

1 Ở màn hình chi tiết thông tin chia sẻ, nhập nội dung bình luận rồi nhấn

2 Hệ thống lưu bình luận vào cơ sở dữ liệu đồng thời thêm bình luận của người dùng vào danh sách bình luận ở màn hình chi tiết thông tin chia sẻ.

Bảng 4.18 Dòng sự kiện chính use case “Bình luận”

Mô tả: Người dùng chưa đăng nhập

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình chi tiết thông tin chia sẻ. Điều kiện sau: Người dùng không thể bình luận.

1 Ở màn hình chi tiết thông tin chia sẻ, nhập nội dung bình luận rồi nhấn

2 Hệ thống thông báo người dùng chưa đăng nhập và hiển thị thông báo yêu cầu đăng nhập.

Bảng 4.19 Dòng sự kiện phụ use case “Bình luận”

4.1.4.12 Đặc tả use case “Thông báo nguy cơ lây nhiễm” 52

Mô tả: Thông báo người dùng khi sắp đi vào vùng nhiễm dịch nguy hiểm

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình Trang chủ và sắp di chuyển vào vùng dịch nguy hiểm. Điều kiện sau: Hiển thị thông báo

1 Ở màn hình “Trang chủ”, người dùng đang sắp di chuyển vào vùng có nguy cơ nhiễm dịch.

2 Hiển thị thông báo sắp đi vào vùng nguy hiểm có nguy cơ lây nhiễm.

Bảng 4.20 Dòng sự kiện chính use case “Thông báo nguy cơ lây nhiễm”

4.1.4.12 Đặc tả use case “Tư vấn thông tin”

Mô tả: Hiển thị thông tin tư vấn về dịch bệnh COVID-19 và cách phòng tránh

Actor: Người dùng Điều kiện trước: Người dùng đang ở màn hình Trang chủ Điều kiện sau: Hiển thị chi tiết thông tin

1 Ở màn hình “Trang chủ”, người dùng bấm mở menu

2 Hiển thị danh mục menu.

3 Bấm chọn mục tư vấn thông tin

4 Di chuyển đến màn hình Tư vấn thông tin.

5 Bấm chọn thông tin muốn xem

6 Hiển thị thông tin chi tiết của thông tin.

Bảng 4.21 Dòng sự kiện chính use case “Tư vấn thông tin”

Thiết kế cơ sở dữ liệu

4.2.1 Mô tả các collection trong cơ sở dữ liệu

Collection lưu trữ thông tin tài khoản người dùng

1 _id ObjectId ID của tài khoản

2 created_date NumberLong Thời gian tạo tài khoản

3 last_update_date NumberLong Thời gian chỉnh sửa tài khoản

4 cover String Đường dẫn ảnh bìa

5 full_name String Họ tên.

6 is_deleted Boolean Xác định tài khoản bị xoá hay chưa.

7 phone String Số điện thoại.

8 avatar String Đường dẫn avatar.

9 verify_code String Mã OTP xác thực tài khoản.

10 email String Địa chỉ mail.

11 providers Array(Provider) Mảng các phương thức đăng nhập của tài khoản và token của tài khoản tương ứng.

12 status String Trạng thái của tài khoản bao gồm đã kích hoạt và chưa kích hoạt.

Bảng 4.22 Bảng mô tả collection “Users”

Một Object lưu trữ phương thức đăng nhập và token tương ứng

1 identity String ID đại diện cho phương thức đăng nhập.

2 kind String Loại phương thức đăng nhập gồm có internal, social,

3 value String Json Web Token

Bảng 4.23 Bảng mô tả Object “Provider”

Collection lưu trữ thông tin số ca nhiễm COVID-19 trên thế giới

2 created_date NumberLong Thời gian tạo

3 last_update_date NumberLong Thời gian chỉnh sửa

4 recovered String Số ca nhiễm bệnh

5 confirmed String Số ca hồi phục

6 deaths String Số ca tử vong

7 is_deleted Boolean Xác định dữ liệu bị xoá hay không.

8 name String Tên địa điểm

Bảng 4.24 Bảng mô tả collection “Covid”

Collection lưu trữ thông tin lây nhiễm của các bệnh nhân mắc bệnh ở Việt Nam

4 note String Thông tin lây nhiễm của ca bệnh

5 verifyDate String Ngày ghi nhận thông tin

6 address String Địa chỉ lây nhiễm

8 name String Tên bệnh nhân

11 patientGroup String Nhóm lây nhiễm F0,F1,

Bảng 4.25 Bảng mô tả collection “Patient”

Collection lưu trữ thông tin địa điểm chia sẻ

5 bound Object(Bound) Ranh giới toạ độ

6 verion Number Phiên bản hiện tại của dữ liệu

7 points Array(Point) Mảng các địa điểm có toạ độ nằm trong vùng bound đã chỉ ra ở trên.

Bảng 4.26 Bảng mô tả collection “Utilities”

Object lưu trữ ranh giới toạ độ

1 from_lat Double Vĩ độ nhỏ nhất

2 to_lat Double Vĩ độ lớn nhất

3 from_lng Double Kinh độ nhỏ nhất

4 to_lng Double Kinh độ lớn nhất

Bảng 4.27 Bảng mô tả object “Bound”

Object lưu trữ dữ liệu thông tin chia sẻ

2 created_date Double Thời gian tạo

3 last_updated_date Double Thời gian cập nhật

4 image String Đường dẫn hình ảnh của thông tin

8 description String Thông tin chi tiết

9 type String Kiểu thông tin chia sẻ

10 content String Nội dung mô tả

11 user_id String User ID của người gửi lên

12 location Array(lng,lat) Mảng lưu cặp giá trị latitude và longitude

13 name String Tên thông tin

14 censorship String Trạng thái kiểm duyệt thông tin

15 status String Trạng thái xác nhận của thông tin

Bảng 4.28 Bảng mô tả object “Point”

Collection lưu trữ thông tin xác nhận của người dùng khi xác nhận thông tin chia sẻ

5 user_id String User ID của người dùng.

6 content String Nội dung xác nhận.

7 warning_id String ID của thông tin chỉa sẻ.

8 status String Trạng thái xác nhận.

Bảng 4.29 Bảng mô tả collection “Confirm”

Collection lưu trữ bình luận của người dùng

2 created_date NumberLong Thời gian tạo.

3 last_update_date NumberLong Thời gian chỉnh sửa.

5 user_id String User ID của người dùng.

6 info_user Object Thông tin chi tiết của user.

7 content String Nội dung bình luận.

8 warning_id String ID của thông tin chia sẻ được bình luận.

9 type String Kiểu thông tin chia sẻ được bình luận.

Bảng 4.30 Bảng mô tả collection “Comments”

Thiết kế giao diện

4.3.1 Sơ đồ thiết kế giao diện

Hình 4.2 Sơ đồ thiết kế giao diện

STT Tên giao diện Mô tả giao diện Ghi chú

1 Đăng ký Màn hình đăng ký tài khoản

2 Nhập mã OTP Nhập mã xác thực được gửi đến số điện thoại đã đăng ký

3 Đăng nhập Đăng nhập tài khoản

4 Quên mật khẩu Dùng để đặt lại mật khẩu khi bị quên mật khẩu đăng nhập

5 Trang chủ Màn hình chính hiển thị bản đồ

6 Menu Màn hình menu chức năng

7 Đăng xuất Đăng xuất tài khoản

8 Tài khoản Màn hình quản lý tài khoản

9 Quản lý tài khoản Màn hình thay đổi thông tin tài khoản

10 Thay đổi mật khẩu Màn hình thay đổi mật khẩu

9 Thông tin tư vấn Màn hình tư vấn thông tin dịch COVID-19

10 Thông tin COVID-19 Màn hình hiển thị thông tin dịch COVID-19

11 Thông tin lây nhiễm Màn hình hiển thị thông tin lây nhiễm của các bệnh nhân ở Việt Nam

12 Thông tin chi tiết địa điểm

Màn hình hiển thị thông tin chi tiết địa điểm chia sẻ

13 Tạo mới thông tin chia sẻ Hiển thị danh sách các kiểu thông tin chia sẻ được cho phép trên ứng dụng

14 Tạo mới thông tin lây nhiễm

Màn hình tạo mới thông tin lây nhiễm

15 Tạo mới địa điểm bán khẩu trang

Màn hình tạo mới địa điểm bán khẩu trang, nước rửa tay

16 Tạo mới địa điểm phát khẩu trang

Màn hình tạo mới địa điểm phát khẩu trang

17 Chọn vị trí Màn hình chọn vị trí để tạo mới thông tin chia sẻ

Bảng 4.31 Danh sách các giao diện 4.3.3 Mô tả chi tiết giao diện

Hình 4.3 Giao diện Đăng ký

63 STT Tên thành phần Loại thành phần Mô tả chức năng của thành phần

1 Họ tên TextInput Nhập họ tên tài khoản

2 Số điện thoại TextInput Nhập số điện thoại tài khoản

3 Mật khẩu TextInput Nhập mật khẩu tài khoản

4 Đăng ký Button Thực hiện chức năng đăng ký tài khoản

5 Đăng nhập Button Di chuyển tới màn hình Đăng nhập

Bảng 4.32 Thành phần giao diện Nhập số điện thoại

4.3.3.2 Giao diện Nhập mã OTP

Hình 4.4 Giao diện Nhập mã OTP

1 Nhập mã OTP TextInput Nhập mã OTP

2 Xác minh ngay Button Xác minh mã OTP

3 Gửi lại mã OTP Button Gửi lại mã OTP nếu chưa nhận được mã OTP.

Bảng 4.33 Thành phần giao diện Nhập mã OTP 4.3.3.3 Giao diện Đăng nhập

Hình 4.5 Giao diện Đăng nhập

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

2 Mật khẩu TextInput Nhập mật khẩu

3 Đăng nhập Button Bấm để đăng nhập

4 Đăng ký Button Di chuyển sang màn hình Đăng ký

5 Quên mật khẩu Button Hiển thị popup Quên mật khẩu

Bảng 4.34 Thành phần giao diện Đăng nhập

4.3.3.4 Giao diện Quên mật khẩu

Hình 4.6 Giao diện Quên mật khẩu

1 Số điện thoại TextInput Nhập số điện thoại để đặt lại mật khẩu

2 Từ chối Button Tắt popup

3 Đồng ý Button Đồng ý đặt lại mật khẩu

Bảng 4.35 Thành phần giao diện Quên mật khẩu 4.3.3.5 Giao diện Trang chủ

Hình 4.7 Giao diện Trang chủ

2 Icon địa điểm bán khẩu trang

Marker Hiển thị địa điểm (latitude, longitude) bán khẩu trang trên bản đồ

3 Icon thông tin lây nhiễm

Marker Hiển thị địa điểm (latitude, longitude) thông tin lây nhiễm trên bản đồ

4 Direction Button Di chuyển tới địa điểm hiện tài của user trên bản đồ

5 Tạo mới thông tin chia sẻ

Button Mở danh sách các type thông tin chia sẻ

Bảng 4.36 Thành phần giao diện Trang chủ

STT Tên thành phần Loại thành phần Mô tả chức năng của thành phần

1 Avatar ImageButton Hiển thị avatar của người dùng

Bấm di chuyển đến màn hình tài khoản.

2 Trang chủ Marker Hiển thị địa điểm (latitude, longitude) bán khẩu trang trên bản đồ

3 Thông tin tư vấn Marker Hiển thị địa điểm (latitude, longitude) thông tin lây nhiễm trên bản đồ

4 Tài khoản Button Di chuyển tới địa điểm hiện tài của user trên bản đồ

5 Cài đặt Button Mở danh sách các type thông tin chia sẻ

Bảng 4.37 Thành phần giao diện Menu 4.3.3.7 Giao diện Đăng xuất

Hình 4.9 Giao diện Đăng xuất

1 Đồng ý Button Đồng ý đăng xuất

2 Huỷ bỏ Button Huỷ bỏ đăng xuất

Bảng 4.38 Thành phần giao diện Đăng xuất

Hình 4.10 Giao diện Tài khoản

1 Avatar Image Hình avatar của người dùng đang đăng nhập hiện tại

2 Cover Image Hình cover của người dùng

3 Quản lý tài khoản Button Di chuyển đến màn hình quản lý tài khoản

4 Đổi mật khẩu Button Di chuyển đến màn hình đổi mật khẩu

Bảng 4.39 Thành phần giao diện Tài khoản4.3.3.9 Giao diện Quản lý tài khoản 71

Hình 4.11 Giao diện Quản lý tài khoản

1 Avatar Image Hình avatar của người dùng

2 Cover Image Hình cover của người dùng

3 Họ và tên TextInput Nhập chỉnh sửa Họ tên

4 Số điện thoại TextInput Nhập chỉnh sửa số điện thoại

5 Email TextInput Nhập chỉnh sửa email

6 Hoàn tất Button Hoàn tất chỉnh sửa thông tin tài khoản

Bảng 4.40 Thành phần giao diện Quản lý tài khoản4.3.3.10 Giao diện Thay đổi mật khẩu 72

Hình 4.12 Giao diện Thay đổi mật khẩu

1 Mật khẩu hiện tại TextInput Nhập mật khẩu hiện tại

2 Mật khẩu mới TextInput Nhập mật khẩu mới

3 Nhập lại mật khẩu TextInput Nhập lại mật khẩu mới

Button Bấm để thay đổi mật khẩu

Bảng 4.41 Thành phần giao diện Thay đổi mật khẩu

Hình 4.13 Giao diện Thông báo mật khẩu không chính xác

Hình 4.14Giao diện Thông báo cập nhật thành công

4.3.3.11 Giao diện Thông tin tư vấn 75

Hình 4.15 Giao diện Thông tin tư vấn

2 Image Image Hình ảnh bài viết

3 Title Text Tiêu đề bài viết

Bảng 4.42 Thành phần giao diện Thông tin tư vấn

4.3.3.12 Giao diện Thông tin COVID-19 76

Hình 4.16 Giao diện Thông tin COVID-19

1 Vietnam Text Tên địa điểm

2 Số ca nhiễm Text Số ca nhiễm COVID-19

3 Tử vong Text Số ca tử vong COVID-19

4 Hồi phục Text Số ca hồi phục COVID-19

5 Mức độ lây nhiễm Text Mức độ lây nhiễm COVID-19

Bảng 4.43 Thành phần giao diện Thông tin COVID-19

4.3.3.13 Giao diện Thông tin lây nhiễm 77

Hình 4.17 Giao diện Thông tin lây nhiễm

1 Tên Text Tên các ca bệnh lây nhiễm

2 Địa chỉ Text Địa chỉ lây nhiễm

3 Ghi chú Text Thông tin chi tiết lây nhiễm

Bảng 4.44 Thành phần giao diện Thông tin lây nhiễm

4.3.3.14 Giao diện Thông tin chi tiết địa điểm 78

Hình 4.18 Giao diện Thông tin chi tiết địa điểm

2 Tạo bởi admin Text Tên người tạo địa điểm

3 334m Text Khoảng cách từ vị trí của user đến địa điểm

4 Chưa xác định Text Trạng thái của địa điểm

Text Địa chỉ của địa điểm

6 Hết hàng Button Xác nhận tình trạng hết hàng của địa điểm

7 Còn hàng Button Xác nhận tình trạng còn hàng của địa điểm

8 Bình luận của bạn tại đây

TextInput Nhập bình luận về địa điểm

9 Send Button Gửi bình luận

10 Avatar Image Avatar user đang đăng nhập hiện tại

11 Bình luận List Danh sách bình luận của địa điểm

Bảng 4.45 Thành phần giao diện Thông tin chi tiết địa điểm

Định dạng
Số trang	89
Dung lượng	0,91 MB