Phân tích thiết kế phần mềm ứng dụng hỗ trợ các hệ thống phúc lợi trẻ em và kết nối trẻ em được chăm sóc nuôi dưỡng với gia đình

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU
KHOA CÔNG NGHỆ KỸ THUẬT - NÔNG NGHIỆP CƠNG NGHỆ CAO

----



----

ĐỒ ÁN TỐT NGHIỆP
ĐỀ TÀI
PHÂN TÍCH THIẾT KẾ PHẦN MỀM ỨNG DỤNG HỖ TRỢ CÁC
HỆ THỐNG PHÚC LỢI TRẺ EM VÀ KẾT NỐI TRẺ EM ĐƯỢC
CHĂM SĨC NI DƯỠNG VỚI GIA ĐÌNH
Giảng viên hướng dẫn

: TS. Bùi Thị Thu Trang

Sinh viên thực hiện

: Tơ Đình Đức Anh

Trình độ đào tạo

: Đại Học Chính Quy

Ngành đào tạo

: Cơng nghệ thơng tin

Chun ngành

: Lập trình ứng dụng di động và game

MSSV

: 17031223

Lớp

: DH17LT

Niên khoá

: 2017-2021

BÀ RỊA - VŨNG TÀU, NĂM 2021


LỜI CẢM ƠN
----



----

Xin chân thành cảm ơn Ban giám hiệu cùng tồn thể q thầy cơ, đặc
biệt là q thầy cô Khoa công nghệ kỹ thuật - nông nghiệp công nghệ cao
Trường Đại Học Bà Rịa - Vũng Tàu, những người đã truyền đạt cho tôi nhiều
kiến thức quý báu trong học tập.

Xin cảm ơn TS. Bùi Thị Thu Trang - giảng viên Khoa công nghệ kỹ
thuật - nông nghiệp cơng nghệ cao là người đã tận tình hướng dẫn tơi trong
suốt q trình hồn thành đề tài này.
Xin trân trọng cảm ơn!

Tp.Vũng Tàu, ngày 12 tháng 01 năm 2021
Sinh viên thực hiện
Tơ Đình Đức Anh


1

CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI
1. LÝ DO CHỌN ĐỀ TÀI
"Điều khiến đứa trẻ đau khổ không phải là thiếu quần áo, đồ ăn, hay
giáo dục mà là không được thuộc về ai và khơng có một gia đình" trích bởi
ông Hermann Gmeiner - Người sáng lập Làng trẻ em SOS Quốc tế.
Dựa vào câu nói trên tơi đã phát triển nên ý tưởng xây dựng một ứng
dụng tên là AdoptKids - là một dự án hỗ trợ các hệ thống phúc lợi trẻ em và
kết nối trẻ em được chăm sóc ni dưỡng với gia đình. Thơng qua ứng dụng
này, mỗi đứa trẻ khơng cịn phải trải qua cảnh thiếu thốn tình thương và mỗi
em sẽ có một gia đình để được u thương, chăm sóc.
2.

ĐỐI TƯỢNG NGHIÊN CỨU
•

Nghiên cứu UI, UX cho nền tảng di động;

•

Nghiên cứu, ứng dụng công cụ Figma để thiết kế UI cho ứng
dụng AdoptKids.

3.

PHƯƠNG PHÁP NGHIÊN CỨU
Về lý thuyết:
•

Tìm hiểu về cơng cụ Figma;

•

Tìm hiểu về UI, UX cho nền tảng di động.

Về thực nghiệm:
•

Ứng dụng Figma để thiết kế UI ứng dụng AdoptKids;

•

Xây dựng kịch bản sử dụng ứng dụng AdoptKids.


2

CHƯƠNG 2. TỔNG QUAN UI, UX
1. UI LÀ GÌ?

UI là viết tắt của từ User Interface có nghĩa là giao diện người dùng.
Hiểu một cách đơn giản nhất thì UI bao gồm tất cả những gì người dùng có thể
nhìn thấy như: màu sắc, bố cục sắp xếp như thế nào, ứng dụng sử dụng fonts
chữ gì, hình ảnh trên ứng dụng có hấp dẫn hay khơng,...

Hình 2-1 Giao diện người dùng trực quan và tương tác dễ dàng
Trong thiết kế thì UI đóng vai trị là yếu tố truyền tải thông điệp từ
người thiết kế sản phẩm tới người dùng. Thiết kế giao diện người dùng tốt sẽ
hỗ trợ khả năng sử dụng với bố cục và nội dung trực quan, rõ ràng, nhất quán,
cung cấp cho người dùng chỉ dẫn, cử chỉ và gợi ý để giúp người dùng hoàn
thành nhiệm vụ trong khi giảm thời gian thực hiện công việc.
Một nhà thiết kế UI thường chủ yếu chú trọng trong các vấn đề sau:
•

Giao diện tương tác;

•

Biểu tượng, logo, nút và các yếu tố liên quan khác;

•

Tạo bố cục thân thiện và hấp dẫn người dùng;

•

Xây dựng kịch bản sử dụng.

•

Phối hợp với UX design;

•

Phối hợp với các nhà phát triển sản phẩm.


3

2. UX LÀ GÌ?
UX là viết tắt của từ User Experience có nghĩa là trải nghiệm người dùng.
Đơn giản hơn thì UX là những đánh giá của người dùng khi sử dụng sản phẩm.
Chẳng hạn như: App có dễ sử dụng hay khơng, có thân việc bố trí sắp xếp bố cục
như vậy đã được hay chưa? Sản phẩm đó có đạt được mục đích đề ra khơng.

Hình 2-2 Trải nghiệm người dùng tinh tế và xuyên suốt
Người làm về UX hay còn gọi là UX Designer. UX Designer sẽ nghiên
cứu và đánh giá về thói quen và cách mà khách hàng sử dụng rồi đánh giá về
sản phẩm nào đó. Sử dụng và đánh giá ở đây đơn giản là những vấn đề: tính dễ
sử dụng, sự tiện ích, sự hiệu quả khi hệ thống hoạt động..
Một nhà thiết kế UX thường chủ yếu chú trọng trong các vấn đề sau:
•

Nghiên cứu nhu cầu người dùng;

•

Tạo ra các khung lưới logic của giao diện;

•

Thử nghiệm bản mẫu - demo;

•

Viết thơng số kỹ thuật thiết kế;

•

Phối hợp với nhà thiết kế giao diện người dùng;

•

Phối hợp với các nhà phát triển sản phẩm.


4
3.

SỰ KHÁC BIỆT CỦA UX VÀ UI
Tóm lại, sự khác biệt giữa UX và UI là:
•

Nhà thiết kế UX lên kế hoạch cách người dùng sẽ tương tác với
giao diện và những bước anh ta cần thực hiện để làm gì đó.

•

Và người thiết kế UI đưa ra cách mỗi bước sẽ trơng như thế nào.

Chính vì UX và UI có liên quan chặt chẽ đến mức đơi khi ranh giới giữa
các khái niệm lấn át lẫn nhau. Do đó, cả UX và UI thường được thực hiện bởi
một nhà thiết kế.

4. CÔNG VIỆC CỦA UX DESIGN TRONG DỰ ÁN
Nhà thiết kế UX có thể tham gia vào bất kỳ giai đoạn nào của dự án.
Nhưng thường hữu ích nhất trong các giai đoạn thiết kế, trước khi các lập trình
viên thực sự bắt đầu quá trình code.

Hình 2-3 Nhà thiết kế UX trong q trình tạo dự án

5. CƠNG VIỆC CỦA UI DESIGN TRONG DỰ ÁN
Quy trình cơ bản của một nhà thiết UI trong dự án thường gồm 4 bước:
Sketch, Wireframe, Mockup, Prototype.


5

Hình 2-4 Nhà thiết kế UI trong quá trình tạo dự án
5.1. Sketch (Phác thảo)
Có thể được hiểu cơ bản là quá trình phác thảo nhanh ý tưởng lên giấy
hoặc bảng. Ở bước này sẽ giúp cho nhà thiết kế lên ý tưởng dễ dàng, với những
ý

tưởng mới, sketch bằng tay là cách hiệu quả nhất để các thành viên trong team

thảo luận, đóng góp ý kiến. Và đây là bước cần thiết để đến giai đoạn Wireframe.

Hình 2-5 Sketch là phác thảo nhanh ý tưởng lên giấy hoặc bảng
5.2. Wireframe

Mô tả chức năng của dự án cũng như mối quan hệ giữa các khung nhìn,
điều gì sẽ xảy ra khi người dùng nhấp vào một nút nhất định và các màn hình
sẽ tương tác với nhau như thế nào.


6

Hình 2-6 Wireframe giúp mơ tả chức năng của dự án
5.3. Mockup
Ở

giai đoạn này nhà thiết kế sẽ thêm màu sắc, phơng chữ, văn bản, hình

ảnh, logo và bất cứ thứ gì khác cần thiết vào Wireframe.

Hình 2-7 Mockup là thêm các yếu tố thiết kế vào wireframe


7
5.4. Prototype
Prototype là một mockup nhưng có thêm phần UX. Có nghĩa là ta có thể
click vào một button, có thể chuyển screens, có thể show dữ liệu giả...

Hình 2-8 Prototype là một mockup nhưng có thêm phần UX


8

CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
1. XÁC ĐỊNH TÁC NHÂN

Actors
Người dùng

Hệ thống khác


Khách hàng

•

Khách hàng: Đăng kí - Đăng nhập tài khoản, Quên mật khẩu tài khoản,
Gửi thông tin đăng ký nhận ni và Đăng ký qun góp bảo vệ trẻ em;

•

Phần mềm hỗ trợ thanh toán qua mạng bằng cách kết nối với “hệ thống
thanh toán trực tuyến”.

2.

USE-CASE TỔNG QUÁT
Ứng dụng AdoptKids được cấu thành từ các màn hình:
•

Đăng ký tài khoản: người dùng mới chưa có tài khoản cần đăng
ký một tài khoản để sử dụng ứng dụng;

•

Đăng nhập tài khoản: sau khi đăng ký hoặc đã có tài khoản, người

dùng sẽ nhập số điện thoại và mật khẩu để đăng nhập. Xác thực
thông tin thành công sẽ chuyển người dùng tới màn hình chính.

•

Qn mật khẩu tài khoản: người dùng nhập số điện thoại đã đăng
ký trước đó và nhập mã OTP được hệ thống gửi về qua số điện
thoại đó để tiến thành bước reset lại mật khẩu tài khoản.

•

Gửi thơng tin đăng ký nhận ni: người dùng đăng ký thơng tin
cá nhân của mình để nhận ni đứa trẻ và hệ thống sẽ gửi thông
tin về server để duyệt hồ sơ.


9
•

Đăng ký qun góp bảo vệ trẻ em: hiển thị thơng tin về chương trình
qun góp và người dùng sẽ sử dụng hệ thống thanh toán trực tuyến
để chuyển khoản tiền qun góp của người dùng về hệ thống.

•

Thanh tốn: người dùng điền các thơng tin thanh tốn cần thiết để
hệ thống xác nhận tài khoản thanh toán của người dùng.

Hình 3-1 Use-case tổng qt
Người dùng cuối có các quyền như sau:

•

Hỗ trợ trực tuyến từ tư vấn viên;

•

Xem thơng tin nhận ni và đăng ký nhận ni;

•

Xác thực danh tính tài khoản người dùng. Bao gồm: Khơi phục
mật khẩu, Đăng ký/Đăng nhập tài khoản;

•

Thanh tốn qun góp hỗ trợ nhiều tài khoản và thẻ nội địa, quốc
tế.


10

Hình 3-2 Sơ đồ Use-Case
Activity Diagram kiểm tra lịch sử quyên góp: Hỗ trợ hiển thị lịch sử
quyên góp và xem chi tiết giao dịch đó.
Activity Diagram kiểm tra trạng thái nhận nuôi: Hiển thị danh sách
đơn nhận nuôi và trạng thái duyệt đơn.

Hình 3-3 Activity Diagram kiểm tra lịch sử qun góp và trạng thái nhận ni

11
Activity Diagram đăng ký nhận nuôi: Trước khi đăng ký nhận nuôi,
người dùng cần chấp nhận các điều khoản về việc xử lý hồ sơ của ứng dụng và
trước đó người dùng cần chọn một trẻ nhận nuôi để tiến thành các bước đăng
ký hồ sơ cần thiết. Sau khi điền thông tin xong, hệ thống kiểm tra lại các thông
tin được điền đã đúng và đủ chưa. Nếu mọi thứ đều ổn, gửi thơng tin lên
server. Nếu khơng thì sẽ báo lỗi chi tiết cho người dùng.

Hình 3-4 Activity Diagram Đăng ký nhận nuôi


12
Activity Diagram thanh tốn tiền qun góp: Người dùng chọn một
chương trình qun góp được cung cấp bởi ứng dụng, sau đó nhập số tiền
muốn quyên góp, chọn nguồn tiền như tài khoản nội địa hay quốc tế. Và sau
đó bấm thanh tốn để hệ thống kiểm tra thơng tin thanh tốn chính xác chưa.
Nếu thơng tin thanh tốn chính xác và được xác thực thì ứng dụng sẽ thực hiện
thanh tốn và hiển thị hóa đơn. Ngược lại, sẽ hiển thị thơng báo chi tiết về lỗi
cho người dùng.

Hình 3-5 Activity Diagram thanh tốn tiền qun góp


13
Activity Diagram tìm kiếm trung tâm bảo trợ trẻ em: Người dùng sẽ
nhập thơng tin tìm kiếm hoặc tìm các trung tâm bằng việc duyệt các danh sách
trung tâm có liên kết tới hệ thống. Sau đó người dùng sẽ duyệt các thông tin
nhận nuôi mà những trung tâm này đăng lên trên hệ thống. Ứng dụng còn hỗ
trợ người dùng lưu lại những trung tâm mà người dùng quan tâm.

Hình 3-6 Activity Diagram tìm kiếm trung tâm bảo trợ trẻ em


14
Activity Diagram xác thực: Khi được mở lên, ứng dụng sẽ kiểm tra xem
token đăng nhập của người dùng đã tồn tại trước đó chưa. Nếu có sẽ chuyển
người dùng tới màn hình ứng dụng. Nếu chưa sẽ chuyển người dùng tới màn hình
đăng nhập và đăng ký để hỗ trợ người dùng đăng nhập vào hệ thống.

Hình 3-7 Activity Diagram xác thực người dùng


15

CHƯƠNG 4. THIẾT KẾ GIAO DIỆN ỨNG DỤNG
1. GIỚI THIỆU FIGMA
Figma là một phần mềm biên tập đồ họa vector và dựng prototype.
Figma chủ yếu hoạt động trên nền web và trên các nền tảng desktop cho hệ
điều hành macOS và Windows.

Hình 4-1 Logo phần mềm Figma
Các ưu điểm của Figma:
•

Thiết kế thời gian thực: hỗ trợ làm việc nhóm cho phép nhiều
người cùng làm việc trên 1 project;

•

Data được lưu trên hệ thống máy chủ của Figma: hỗ trợ làm

việc ở khắp nơi, ở các máy tính khác nhau mà khơng cần sử dụng
file design riêng;

•

Thiết kế dạng Vector: đây là điều mà các tools design hiện đại
đang làm, và khi thực hiện xong có thể export ra nhiều kiểu file
như SVG, PNG, JPG….ở nhiều kích thước khác nhau mà khơng
bị vỡ hình;

•

Có thể quản lí nhiều artboards cùng 1 lúc: Figma có thể thiết kế
nhiều màn hình trên 1 khung hình. Tức là

có thể thiết kế nhiều

layout cho sản phẩm trên 1 khung hình;
•

Có cơ chế quản lí comment tại nhiều điểm: Khi có ý kiến với 1
số điểm trên màn hình layout, chỉ cần click vào đó và comments,
các thành viên khác có thể đọc được và phản hồi.


16
Chi tiết màn hình của 1 Project trong Figma:
•

Phần 1 - khung: bên trái là list các artboards (các màn hình giao

diện), có thể cùng 1 lúc thiết kế hàng chục artboards trên cùng 1
khung hình;

•

Phần 2 - khung giữa: là khung view để vẽ trực tiếp trên đó;

•

Phần 3 - khung bên phải: là phần các option căn chỉnh các thơng
số cho thiết kế, có các tab như design, prototype, code…

Hình 4-2 Chi tiết màn hình của 1 Project trong Figma
2.

THIẾT KẾ WIREFRAME
2.1. Wireframe là gì?
Thiết kế wireframe là một bước quan trọng trong bất kỳ quá trình thiết

kế giao diện nào. Nó chủ yếu cho phép người thiết kế xác định thứ bậc thông
tin của thiết kế, giúp họ lên bố cục được dễ dàng hơn theo cách mà ta muốn
người dùng xử lý thơng tin.
Wireframe cịn là một cơng cụ quan trọng trong q trình thiết kế và
phát triển sản phẩm. Khi tạo ra một sản phẩm, wireframe là bản thiết kế giúp
developer, product manager và designer có thể nói chuyện được với nhau. Và


17
mỗi khi có gì thay đổi về giao diện thì dễ dàng, nhanh chóng để mọi người có
thể hiểu và thực hiện.

•

Cấu trúc (Structure) - Header, sidebar, footer,... được đặt như
thế nào?

•

Nội dung (Content) - Trang này sẽ hiện cái gì lên?

•

Hệ thống phân cấp thơng tin (Informational hierarchy) - Tổ
chức thơng tin và cách hiển thị?

•

Chức năng (Functionality) - Giao diện thể hiện chức năng ra sao?

•

Cách ứng xử (Behavior) - Cách người dùng tương tác với giao
diện.

Wireframe có thể được thực hiện nhanh trên giấy hoặc là máy tính. Và
khơng bao gồm việc thể hiện chi tiết giao diện như màu sắc, nội dung hình ảnh,...

2.2. Các kiểu thiết kế Wireframe
Block diagrams
Block diagrams cung cấp các thông tin cơ bản nhất của một wireframe:
bố cục, các loại nội dung hoặc các chức năng cơ bản mà người thiết kế muốn

thể hiện. Kiểu wireframe này không cần đi sâu vào chi tiết, chỉ cần tập trung
vào tổng quát cái nhìn của sản phẩm.

Hình 4-3 Wireframe dạng Block Diagrams


18
High-Fidelity Text
Cách này giúp wireframe chân thực hơn nhưng không đi quá sâu vào
các chi tiết đồ họa. Để thể hiện rõ ràng hơn, dùng những đoạn văn thật (không
phải "lorem ipsum"), chiều dài đoạn văn, font chữ lý tưởng, kích thước,...

Hình 4-4 Wireframe high-fidelity text
High-Fidelity Color
Đây là một cách khác để làm wireframe chân thực hơn mà không đi quá
sâu vào các chi tiết đồ họa. Có nghĩa là ta có thể thêm màu sắc vào
background, nút, đoạn văn để nhấn mạnh hành động mong muốn hoặc User
Flows. Nhưng hãy sử dụng chúng một cách cẩn thận để tránh lãng phí thời
gian và bị phân tâm những chi tiết.

Hình 4-5 Wireframe high-fidelity color


19
High-Fidelity Media
Đây cũng là một cách khác để làm wireframe chân thực hơn mà không
đi quá sâu vào các chi tiết đồ họa. Có nghĩa, nhà thiết kế có thể chèn hình ảnh,
video,…. Điều này giúp nhấn mạnh nội dung, tác động đến cấu trúc và hệ
thống phân cấp thông tin tổng thể của wireframe.

Hình 4-6 Wireframe high-fidelity media
2.3. Thiết kế Wireframe cho AdoptKids
Dựa vào những nghiên cứu về wireframe đã kể trên, tôi đã thiết kế
wireframe nhiều luồng thông tin hơn nhằm để thể hiện ý tưởng rõ ràng và giúp
cho quá trình mockup sau này dễ dàng hơn.


20

Hình 4-7 Wireframe Xác thực (1)

Hình 4-8 Wireframe Xác thực (2)


21

Hình 4-9 Wireframe màn hình Tổng quan


22

Hình 4-10 Wireframe màn hình nhận ni