ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
----------

BÁO CÁO ĐỒ ÁN 2
XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH
Giảng viên hướng dẫn :

ThS. Trần Thị Hồng Yến

Sinh viên thực hiện

:

Phạm Minh Việt

Mã số sinh viên

:

18520398

Lớp

:

SE122.M21

Bộ mơn

:

Phát triển phần mềm

Thành phố Hồ Chí Minh, tháng 6 năm 2022

1


MỤC LỤC
MỤC LỤC ........................................................................................................................... 2
DANH MỤC BẢNG VÀ HÌNH ẢNH ................................................................................ 4
LỜI CẢM ƠN ...................................................................................................................... 5
ĐỀ CƯƠNG CHI TIẾT ....................................................................................................... 6
CHƯƠNG 1 – TỔNG QUAN VỀ ĐỀ TÀI ......................................................................... 8
1.1

Đối tượng nghiên cứu ............................................................................................ 8

1.2

Phạm vi nghiên cứu................................................................................................ 8

1.3

Phương pháp nghiên cứu ....................................................................................... 8

CHƯƠNG 2 – CƠ SỞ LÝ THUYẾT .................................................................................. 9
1.4

Tổng quan về Expo ................................................................................................ 9


1.5

Tổng quan về React.js và Redux............................................................................ 9

1.5.1

React.js ............................................................................................................ 9

1.5.2

Redux ............................................................................................................ 10

1.6

Tổng quan về React Native và Async Storage .................................................... 11

1.6.1

React Native .................................................................................................. 11

1.6.2

Async Storage ............................................................................................... 11

1.7

Tổng quan về Expo Notifications ........................................................................ 12

1.7.1


Các chức năng ............................................................................................... 12

CHƯƠNG 3 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG ..................................................... 13
1.8

Mô tả yêu cầu ....................................................................................................... 13

1.8.1

Yêu cầu chức năng ........................................................................................ 13

1.8.2

Yêu cầu phi chức năng .................................................................................. 13

1.9

Kiến trúc hệ thống ................................................................................................ 14

1.9.1

Sơ đồ kiến trúc tổng quát .............................................................................. 14

1.9.2

Mô tả kiến trúc Front-end ............................................................................. 15

CHƯƠNG 4 – HIỆN THỰC HỆ THỐNG ........................................................................ 17
1.10


Thiết kế dữ liệu ................................................................................................. 17
2


1.10.1

Danh sách các đối tượng trong hệ thống ................................................... 17

1.10.2

Dữ liệu đối tượng công việc ...................................................................... 18

1.11

Thiết kế giao diện ............................................................................................. 19

1.11.1

Danh sách các màn hình ............................................................................ 19

1.11.2

Sơ đồ liên kết các màn hình ....................................................................... 20

1.11.3

Giao diện các màn hình chức năng ............................................................ 21

CHƯƠNG 5 – KẾT LUẬN ............................................................................................... 51

1.12

Đánh giá ............................................................................................................ 51

1.12.1

Thuận lợi .................................................................................................... 51

1.12.2

Khó khăn .................................................................................................... 51

1.13

Kết quả đạt được ............................................................................................... 51

1.13.1

Ưu điểm ..................................................................................................... 51

1.13.2

Nhược điểm................................................................................................ 51

1.14

Hướng phát triển ............................................................................................... 51

TÀI LIỆU THAM KHẢO ................................................................................................. 52


3


DANH MỤC BẢNG VÀ HÌNH ẢNH
Bảng 1.1 Mơ tả chức năng của ứng dụng .......................................................................... 13
Hình 1.1 Sơ đồ kiến trúc hệ thống ..................................................................................... 14
Hình 1.2 Sơ đồ kiến trúc front-end .................................................................................... 15
Bảng 1.2 Mô tả thành phần kiến trúc Front-end ................................................................ 16
Hình 1.3 Danh sách các đối tượng trong hệ thống (thuộc tính) ........................................ 18
Bảng 1.3 Mơ tả dữ liệu công việc ...................................................................................... 19
Bảng 1.4 Danh sách các màn hình chức năng ................................................................... 20
Hình 1.4 Sơ đồ liên kết giữa các màn hình ....................................................................... 20
Hình 1.5 Giao diện màn hình chính................................................................................... 27
Hình 1.6 Giao diện màn hình thêm/sửa cơng việc ............................................................ 31
Hình 1.7 Giao diện màn hình Google map ........................................................................ 35
Hình 1.8 Giao diện màn hình lịch biểu.............................................................................. 39
Hỉnh 1.9 Giao diện màn hình tìm kiếm ............................................................................. 43
Hình 1.10 Giao diện màn hình thiết lập ............................................................................ 48
Hình 1.11 VA-11 HALL-A ............................................................................................... 50

4


LỜI CẢM ƠN
Em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người đã trực tiếp tận tình hướng
dẫn nhóm em trong suốt q trình thực hiện đồ án. Không chỉ gợi ý và định hướng chúng
em thực hiện đề tài, cơ cịn rất nhiệt tình trong đưa ra những nhận xét, góp ý để em có thể
hồn thành đồ án một cách tốt nhất. Nếu khơng có những lời hướng dẫn, dạy bảo của cơ
thì đồ án này rất khó có thể hồn thiện được. Một lần nữa, chúng em xin chân thành cảm
ơn cô.

Đề tài được nhóm thực hiện trong khoảng thời gian 3 tháng nên bước đầu đi vào
thực tế, kiến thức cũng như kinh nghiệm thực tiễn của em còn nhiều hạn chế. Do vậy, chắc
chắn khơng thể tránh khỏi những sai sót, nhóm rất mong nhận được những sự chỉ bảo, ý
kiến đóng góp q báu của cơ và các bạn học cùng lớp để em có điều kiện được bổ sung,
nâng cao kiến thức của mình trong lĩnh vực này, giúp hồn thiện hơn và tích lũy thêm cho
bản thân nhiều kinh nghiệm, phục vụ tốt hơn cho công việc thực tế sau này.
Em xin chân thành cảm ơn cô!
Thành phố Hồ Chí Minh, ngày 07 tháng 06 năm 2022
Sinh viên thực hiện

PHẠM MINH VIỆT

5


ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH
Tên đề tài tiếng Anh:
BUILDING A REMINDER APPLICATION
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 21/02/2022 đến tháng 11/06/2022
Sinh viên thực hiện:
Phạm Minh Việt – 18520398
Nội dung đề tài:
1. Mục tiêu:
- Xây dựng được ứng dụng có thể nhắc nhở người dùng những việc họ cần
làm.
2. Phạm vi:
• Phạm vi mơi trường:

- Triển khai sản phẩm đề tài trên điện thoại.
• Phạm vi chức năng:
- Thêm, sửa, xóa các cơng việc đã đặt.
3. Đối tượng:
- Người dùng có nhu cầu cần ứng dụng nhắc nhở lịch trình làm việc.
4. Phương pháp thực hiện:
- Tìm hiểu về React Native.
- Tìm hiểu các ứng dụng nhắc lịch trình đã có trước đây, từ đó tiến hành
phân tích, xác định các yêu cầu cụ thể cho đề tài.
- Phân tích và thiết kế hệ thống.
- Xây dựng ứng dụng cho người dùng.
- Tiến hành phát triển và kiểm thử.
5. Công nghệ:
- Expo.
- React Native.
- React Redux.
6. Kết quả mong đợi:
- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài.
- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần
mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án
phần mềm để xây dựng sản phẩm đề tài.
6


Có thể thay đổi giao diện một cách linh động, và mở rộng thêm các chức
năng mới cho sản phẩm đề tài phù hợp với nhu cầu thực tiễn trong tương
lai.
Kế hoạch thực hiện:
Thời gian
Nội dung

21/02/2022 – 06/03/2022
Tìm hiểu đề tài, xác định các chức năng
của hệ thống.
07/03/2022 – 27/03/2022
Tìm hiểu, nghiên cứu cơng nghệ.
28/03/2022 – 24/04/2022
Phân tích và thiết kế hệ thống.
Thiết kế giao diện cho ứng dụng.
25/04/2022 – 29/05/2022
Hoàn thiện ứng dụng.
30/05/2022 – 11/06/2022
Kiểm thử hệ thống và hoàn thiện báo
cáo.
Xác nhận của CBHD
TP. HCM, ngày 7 tháng 06 năm 2022
-

(Ký tên và ghi rõ họ tên)

Sinh viên
(Ký tên và ghi rõ họ tên)

ThS. Trần Thị Hồng Yến
Phạm Minh Việt

7


CHƯƠNG 1 – TỔNG QUAN VỀ ĐỀ TÀI
1.1 Đối tượng nghiên cứu

Đồ án này hướng đến nghiên cứu các đối tượng sau:
❖ Các công nghệ:
o Expo
o React Native
o React Redux
❖ Đối tượng trong phạm vi đề tài hướng đến:
o Người dùng có nhu cầu cần ứng dụng nhắc nhở lịch trình làm việc
1.2 Phạm vi nghiên cứu
Đề tài tập trung vào nghiên cứu về ứng dụng nhắc nhở lịch trình. Sản phẩm của đề
tài là ứng dụng nhắc nhở lịch trình làm việc.
1.3 Phương pháp nghiên cứu
Nhóm đã sử dụng các phương pháp nghiên cứu:
- Phương pháp đọc tài liệu.
- Phương pháp phân tích các ứng dụng nhắc nhở hiện có.

8


CHƯƠNG 2 – CƠ SỞ LÝ THUYẾT
1.4 Tổng quan về Expo
Expo là một công cụ mã nguồn mở và miễn phí được xây dựng xung quanh React Native
để giúp xây dựng các dự án iOS và Android bằng Javascript và React.
Về cơ bản:
• Trong khi test, có thể tận dụng một mơi trường gần giống với mơi trường phát triển
React.js.
• Thơng qua SDK Expo, chúng ta có thể chạm vào điện thoại giống như cách chúng
ta làm với code Android hoặc iOS.
Khi tiếp tục phát triển, chúng ta có thể gặp phải những hạn chế của Expo. Cụ thể, hiện tại
nó khơng hỗ trợ tích hợp Bluetooth. Tất cả các công cụ của bên thứ ba trong một dự án
Expo phải được xây dựng trong môi trường Expo.

Sử dụng lệnh npm run eject sẽ chuyển đổi dự án thành dự án React Native, nghĩa là mỗi
khi build ứng dụng từ bây giờ, nó được chuyển đổi thành code Java hoặc Objective-C.
Điều này cho phép chúng ta khắc phục những hạn chế được đề cập ở trên, nhưng có thể
khiến việc test và build app khó khăn hơn đáng kể. Lưu ý rằng eject ra là một hành động
vĩnh viễn, vì vậy nên hãy chắc chắn rằng một copy của dự án được lưu trữ ở đâu đó trước
khi tiến hành eject.
1.5 Tổng quan về React.js và Redux
1.5.1 React.js
React (hay React.js, ReactJS) là một thư viện JavaScript hướng đến xây dựng giao diện
người dùng. React là mã nguồn mở được phát triển bởi Facebook và cộng đồng những nhà
lập trình.
React đang nổi lên trong những năm gần đây theo xu hướng Single Page
Application. React hỗ trợ xây dựng những thành phần giao diện (components) có tính tương
tác và tái sử dụng cao. Chính vì vậy mà những website khi sử dụng React chạy mượt,
nhanh, có khả năng mở rộng cao và cũng khơng q khó để hiện thực. React cho phép
nhúng code HTML, CSS trong code JavaScript nhờ vào JSX, giúp cho lập trình viên có
thể dễ dàng lồng ghép HTML, CSS vào trong JavaScript một cách tự nhiên hơn. Ngoài ra,
còn thể sử dụng React để render dữ liệu từ người dùng.
React được xây dựng dựa trên khái niệm component. Một component đại điện cho
một thành phần giao diện người dùng có khả năng tái sử dụng từ đơn giản đến phức tạp,
các component được lồng nhau tạo nên cấu trúc phân cấp, từ các component nhỏ có thể
9


xây dựng nên các component lớn hơn. Một component có thể nhận những tham số từ
component khác và có trạng thái riêng biệt. Các component cịn có tổ chức phân cấp cho
phép cho thể tương tác và phụ thuộc lẫn nhau.
Các ưu điểm của React:
-


Dễ dàng nhúng HTML, CSS vào trong React component bởi JSX.

-

Xây dựng giao diện từ các component, và React cũng cho phép tái sử dụng
các component này, giúp việc rút gọn thời gian lập trình và dễ dàng quản lý
các component hơn.

-

React có nhiều cơng cụ phát triển giúp cho việc debug code một dễ dàng hơn.

-

Hiệu suất tốt hơn với Virtual DOM. React cho phép xây dựng các Virtual
DOM, khi có sự thay đổi trong DOM thực tế thì Virtual DOM sẽ thay đổi
ngay lập tức.

-

React triển khai luồng dữ liệu một chiều, được truyền từ cha đến con thơng
qua thuộc tính (props), điều này giúp chúng ta dễ dàng suy luận và kiểm soát
luồng logic hơn so với kiểu ràng buộc dữ liệu truyền thống. Cịn giúp cho
q trình phát hiện lỗi, bảo trì và nâng cấp một cách hiệu quả hơn.

1.5.2 Redux
Vấn đề quản lý trạng thái là một vấn đề khá phức tạp khi xây dựng giao diện người dùng.
Khi giao diện có độ phức tạp cao, các thành phần giao diện lồng nhau và rẽ nhánh nhiều
khiến việc quản lý trạng thái của từng thành phần càng khó khăn hơn.
Trong React.js khi một dữ liệu thay đổi sẽ ảnh hưởng tới nhiều component cùng lúc

vì trạng thái được chia sẻ từ component cha cho các component con. Vấn đề xuất hiện
chúng ta khi muốn chia sẻ các trạng thái qua nhiều component sẽ gây tăng độ phức tạp
quản lý state, tăng tính kết dính và làm có các component khó tái sử dụng hơn.
Để giải quyết vấn đề đó, Redux được xây dựng với ý tưởng tập trung hóa trạng thái
của các đối tượng, từ đó giúp việc quản lý trạng thái dễ dàng và tốt hơn.
Redux được xây dựng dưa trên 3 thành phần chính:
• Action: Một action là một đối tượng thuần JavaScript. Một action có hai thuộc
tính chính là type và payload. Type là định danh nhằm phân loại các action,
10


payload chứa các thông tin cụ thể liên quan đến action. Bên cạnh đó để tạo ra
một action bằng cách gọi action creator, thực chất là một hàm trả về một đối
tượng action.
• Reducer: một reducer là một hàm nhận vào trạng thái hiện tại và đối tượng
action, cập nhật trạng thái nếu cần thiết và trả về trạng thái sau khi cập nhật.
Reducer không được phép chỉnh sửa trạng thái thay vào đó phải tạo một trạng
thái mới.
• Store: Chứa tất cả trạng thái của ứng dụng, được thay đổi bởi reducer khi nhận
vào các action.
Bên cạnh đó, Redux có các middleware cho phép dispatch một function thay vì một
object để để xử lý các logic bất đồng bộ (asynchronous) phức tạp.
1.6 Tổng quan về React Native và Async Storage
1.6.1 React Native
React Native là một công cụ giúp chúng ta lập trình đa nền tảng để tạo ra
các ứng dụng trên mơi trường native. Nó là một framework mã nguồn mở được
phát triển bởi Facebook, cho phép bạn sử dụng Javascript để phát triển phần mềm
trên điện thoại di động Android và iOS. React Native cũng giống như React vậy
chúng sử dụng các native components thay vì các web components. Vì vậy để hiểu
về cấu trúc của React Native chúng ta cần phải có các kiến thức cơ bản với các

khái niệm cơ bản của React như là JSX, components, props hay là state.
1.6.1.1 Ưu điểm
• Có khả năng tái sử dụng code và các components đã được phát triển sẵn.
• Có một cộng đồng phát triển hùng hậu.
• Live và hot reloading.
• Code có thể chạy cho cả iOS và Android.
1.6.1.2 Nhược điểm
• Vẫn địi hỏi native code.
• Hiệu năng sẽ thấp hơn với app thuần native code.
• Bảo mật khơng cao do dựa trên Javascript.
• Khả năng tùy biến không thực sự tốt đối với một vài module.
1.6.2 Async Storage
Async Storage là thành phần đơn giản dùng để lưu trữ dữ liệu offline. Nó
hỗ trợ lưu trữ dữ liệu khơng mã hóa theo dạng cặp key-value và hỗ trợ bất đồng
bộ.
11


Chúng ta có thể lưu trữ dữ liệu tùy thuộc vào bộ nhớ của máy do Async Storage sẽ tự
động sử dụng “Dictionary” hoặc File để lưu giá trị (iOS) hoặc sử dụng RocksDB, SQLite
(Android).
1.7 Tổng quan về Expo Notifications
expo-notifications cung cấp API để lấy các token của push notification để hiện
thông tin, nhận hoặc xử lý thông báo.
1.7.1 Các chức năng
- Tạo thông báo cho một ngày cụ thể, hoặc vài giờ sau.
- Tạo thơng báo có thể lặp đi lặp lại trong một khung thời gian nhất định.
- Lắng nghe các thông báo đang tới ứng dụng.
- Lắng nghe các tương tác trên thông báo.
- Xử lý thông báo khi đang sử dụng ứng dụng.

- Đặt icon, màu sắc cho thông báo trên Android.

12


CHƯƠNG 3 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG
1.8 Mơ tả yêu cầu
1.8.1 Yêu cầu chức năng
Một số chức năng chính của ứng dụng như sau:
Nhóm chức năng
Chức năng
Cơng việc
Hiển thị danh sách cơng
việc

Xem chi tiết cơng việc

Tìm kiếm

Thêm cơng việc
Địa điểm

Tìm kiếm

Quản lý

Thêm, sửa, xóa cơng việc

Giao diện và ngơn ngữ


Thay đổi giao diện, ngơn
ngữ

Mơ tả
Người dùng có thể xem
được danh sách tất cả các
cơng việc trong giao diện
chính.
Người dùng có thể xem
được đầy đủ thơng tin của
cơng việc bao gồm: tên, chi
tiết, ngày kết thúc, địa
điểm.
Người dùng có thể tìm
kiếm bằng các từ khóa liên
quan đến tên của cơng việc.
Cho phép người dùng thêm
cơng việc.
Người dùng có thể tìm
kiếm địa điểm bằng từ
khóa liên quan đến tên của
địa điểm, số đường, tên
nước...
Cho phép người dùng
thêm, sửa, xóa cơng việc.
Cho phép người dùng thay
đổi màu sắc giao diện
(sáng, tối), ngôn ngữ (tiếng
Việt, Anh, Nhật).


Bảng 1.1 Mô tả chức năng của ứng dụng

1.8.2 Yêu cầu phi chức năng
- Tính tiện dụng: Ứng dụng dễ sử dụng, tiện lợi trong việc sử dụng để quản lý lịch
trình.
- Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu dữ liệu, tránh xảy ra lỗi
ngoại lệ.
13


1.9 Kiến trúc hệ thống
1.9.1 Sơ đồ kiến trúc tổng quát

Hình 1.1 Sơ đồ kiến trúc hệ thống

14


1.9.2 Mơ tả kiến trúc Front-end

Hình 1.2 Sơ đồ kiến trúc front-end

Front-end được xây dựng bằng React Native và được chia thành ba thành phần chính như
sau:
Thành phần
Ý nghĩa, ghi chú
UI
Là các thành phần giao diện hiển thị cho
người dùng thường chia thành các
component. Sử dụng StyleSheet để tạo

giao diện và render giao diện ở phía người
dùng.
Action creator
Giúp người dùng có thể thực hiện các
event để tương tác với ứng dụng. Giúp tạo
các action và nhận các giá trị chuyển đến
hàm điều phối dưới dạng giá trị kết quả và
tiến hành thực thi.
15


Reducer

Store
Middleware

Reducer là những action handler, nó hoạt
động kết nối giữa action và store và biến
thành những thay đổi trong state. Nếu
chúng ta dispatch một action là
ADD_TASK vào trong store, chúng ta có
thể có một reducer nhận action đó và thêm
task mới vào trong state.
Nơi lưu trữ dữ liệu và quản lý state của
ứng dụng.
Là thành phần được gọi đến khi dispatch
một action, gồm:
- Redux-thunk: viết các action trả về
một function thay vì là javascript
object bằng cách trì hỗn việc đưa

action đến reducer.

Bảng 1.2 Mô tả thành phần kiến trúc Front-end

16


CHƯƠNG 4 – HIỆN THỰC HỆ THỐNG
1.10 Thiết kế dữ liệu
Hệ thống sử dụng Async Storage để lưu dữ liệu. Dữ liệu lưu trữ bao gồm dữ liệu
công việc, màu sắc giao diện, ngôn ngữ mặc định.
1.10.1 Danh sách các đối tượng trong hệ thống

17


Hình 1.3 Danh sách các đối tượng trong hệ thống (thuộc tính)

1.10.2 Dữ liệu đối tượng cơng việc
Tên thuộc tính
Kiểu dữ liệu
id
String
childId

String

title
body
notificationDate


String
String
time_t

createAt
location
mode

time_t
String
String

taskDone

boolean

channelId

String

18

Ý nghĩa, ghi chú
Id của thông báo sau khi
tạo công việc.
Id của thông báo con nếu
người dùng chọn tạo lịch
trình mang tính cấp bách.
Tên cơng việc.

Chi tiết cơng việc.
Ngày đã đặt trong màn
hình thêm cơng việc.
Ngày cơng việc được tạo.
Địa chỉ.
Chế độ thống báo công
việc (ngày giờ, mỗi ngày,
mỗi tuần, mỗi năm).
Mang tính kiểm tra cơng
việc đã kết thúc hay không.
Id của kênh thông báo.


repeats

boolean

date

time_t

dateStr

String

weekday

Integer

day

hour
minute

Integer
Integer
Integer

Thơng báo có lặp lại hay
khơng.
Ngày mà thơng báo sẽ gửi
qua hệ thống.
Ngày mà thông báo sẽ gửi
qua hệ thống dưới dạng
chuỗi.
Số của ngày trong tuần (bắt
đầu từ số 1, là ngày Chủ
nhật).
Ngày trong năm.
Giờ.
Phút.

Bảng 1.3 Mô tả dữ liệu công việc

1.11 Thiết kế giao diện
1.11.1 Danh sách các màn hình
Chức năng
Tên màn hình
Chức năng liên quan đến Hiển thị danh sách cơng
lịch trình
việc


Xem chi tiết cơng việc

Tìm kiếm

Thêm cơng việc
Chức năng liên quan đến
địa điểm

Tìm kiếm

19

Ý nghĩa, ghi chú
Người dùng có thể xem
được danh sách tất cả các
cơng việc trong giao diện
chính.
Người dùng có thể xem
được đầy đủ thơng tin của
công việc bao gồm: tên, chi
tiết, ngày kết thúc, địa
điểm.
Người dùng có thể tìm
kiếm bằng các từ khóa liên
quan đến tên của công việc.
Cho phép người dùng thêm
công việc.
Người dùng có thể tìm
kiếm địa điểm bằng từ

khóa liên quan đến tên của
địa điểm, số đường, tên
nước...


Chức năng liên quan đến
quản lý
Chức năng liên quan đến
giao diện, ngơn ngữ

Thêm, sửa, xóa cơng việc
Thay đổi giao diện, ngơn
ngữ

Cho phép người dùng
thêm, sửa, xóa cơng việc.
Cho phép người dùng thay
đổi màu sắc giao diện
(sáng, tối), ngôn ngữ (tiếng
Việt, Anh, Nhật).

Bảng 1.4 Danh sách các màn hình chức năng

1.11.2 Sơ đồ liên kết các màn hình

Hình 1.4 Sơ đồ liên kết giữa các màn hình

20



1.11.3 Giao diện các màn hình chức năng

21


22


23


24


25