Phát triển ứng dụng di động hỗ trợ học trực tuyến trên các thiết bị thông minh và hỗ trợ thanh toán online

ĐẠI HỌC QUỐC GIA TP.HCM
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA KHOA HỌC & KỸ THUẬT MÁY TÍNH

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG
HỖ TRỢ HỌC TRỰC TUYẾN TRÊN CÁC THIẾT BỊ
THƠNG MINH VÀ HỖ TRỢ THANH TỐN ONLINE
NGÀNH: KHOA HỌC MÁY TÍNH

HỘI ĐỒNG: HỆ THỐNG & MẠNG MÁY TÍNH
GVHD: TS. NGUYỄN QUANG HÙNG
GVPB: THS. LÊ ĐÌNH THUẬN
SVTH1:
SVTH2:

DANH TRÍ HIẾU (1711271)
PHAN ĐÌNH TUỆ (1713814)


Lời cam đoan
Chúng tôi xin cam đoan rằng đề tài luận văn tốt nghiệp: "Phát triển ứng dụng di động hỗ trợ học trực
tuyến trên các thiết bị thông minh và hỗ trợ thanh tốn online" là do chúng tơi thực hiện dưới sự hướng
dẫn của TS Nguyễn Quan Hùng. Tất cả các tham khảo từ các cơng trình khác đều được ghi rõ trong mục
"Tài liệu tham khảo". Nội dung của luận văn này chưa từng được công bố trước đây dưới bất kì hình thức
nào. Nếu có bất kì sai phạm nào, chúng tơi xin chịu hồn tồn trách nhiệm trước Ban Chủ nhiệm Khoa
và Ban Giám hiệu Nhà trường.
Nhóm sinh viên thực hiện

Lời cảm ơn
Trước hết, chúng tôi xin trân trọng gửi lời cảm ơn đến TS Nguyễn Quan Hùng - giảng viên khoa
Khoa học và Kỹ thuật Máy tính (trường Đại học Bách Khoa - ĐHQG TP.HCM). Trong thời gian vừa
qua, thầy đã tận tình chỉ dạy, hướng dẫn cho chúng tơi những kiến thức q báu. Bên cạnh đó thầy cũng
tạo mọi điều kiện thuận lợi để chúng tơi hồn thành luận văn trong thời gian sớm nhất.
Bên cạnh đó, chúng tôi xin gửi lời cảm ơn đến Trường Đại học Bách Khoa - ĐHQG TPHCM, nơi
đã tạo cho nhóm chúng tôi môi trường học tập tốt. Quý thầy cô khoa Khoa học và Kỹ thuật Máy tính,
những người đã truyền tri thức cùng tâm huyết của mình cho nhóm chúng tôi vốn kiến thức trong suốt
thời gian qua.
Chúng tôi xin gửi lời cảm ơn sâu sắc đến bố mẹ và bạn bè đã động viên tinh thần, bên cạnh nhóm
trong suốt q trình học tập ở trường cũng như thực hiện luận văn tốt nghiệp.
Do giới hạn kiến thức và khả năng lý luận của bản thân còn nhiều thiếu sót và hạn chế, kính mong sự
chỉ dẫn và đóng góp của các thầy cơ để luận văn của nhóm được hồn thiện hơn.
Lời cuối cùng, chúng tơi xin gửi lời cám ơn sâu sắc đến gia đình, bạn bè - những người đã sát cánh
bên chúng tôi, là động lực to lớn để chúng tơi hồn thành luận văn một cách trọn vẹn nhất
Nhóm sinh viên thực hiện


Tóm tắt
Đề tài luận văn mà nhóm chúng tơi thực hiện là "Phát triển ứng dụng di động hỗ trợ học trực
tuyến trên các thiết bị thông minh và hỗ trợ thanh tốn online". Trong q trình thực hiện đề tài
này, nhóm chúng tơi đã thực hiện qua hai giai đoạn, cụ thể như sau:
Giai đoạn 1: Tìm hiểu phân tích đề tài, tìm hiểu nền tảng moodle. Đưa ra các phân tích và thiết
kế ứng dụng, tìm hiểu các kỹ thuật nền tảng triển khai. Tiến hành lựa chọn công nghệ phù hợp.
Giai đoạn 2: Xây dựng ứng dụng có khả năng hoạt động tốt trên hai nền tảng iOS, Android và
hoạt động ổn định trên nhiều thiết bị có cấu hình yếu. Đảm bảo đầy đủ các chức năng cần thiết
cho việc học tập của học sinh.
Báo cáo luận văn tốt nghiệp của nhóm sẽ trình bày thơng qua các nội dung chính sau đây:
•
•

•
•
•
•

Chương 1: Tổng quan
Chương 2: Lý thuyết cơ sở, cơng nghệ, các cơng trình liên quan
Chương 3: Thiết kế kiến trúc ứng dụng
Chương 4: Hiện thực ứng dụng
Chương 5: Kiểm thử phần mềm
Chương 6: Kết luận và hướng phát triển


Summary
The thesis topic that our team carries out is "Develop mobile application for online learning on
smart devices and support online payment". In the process of implementing this topic, our team
has done through two stages, specifically as follows:
Stage 1: Learn to analyze the topic, learn the moodle background. Provide system analysis and
design, learn implementation foundation techniques. Select the suitable technology.
Stage 2: Building applications capable of working well on two platforms iOS, Android and
stable operation on many devices with weak configuration. Ensure all necessary functions for
students’ learning.
The group’s graduation thesis report will present through the following main contents:
•
•
•
•
•
•

Chapter 1: Overview
Chapter 2: Basic theory, technology, related construction
Chapter 3: Application architecture designing
Chapter 4: Application reality
Chapter 5: Software testing
Chapter 6: Conclusion and development direction


Mục lục

1

2

TỔNG QUAN
1.1 Đặt vấn đề . . . . . . .
1.2 Các vấn đề hiện tại . .
1.3 Mục tiêu của đề tài . .
1.4 Phạm vi đề tài . . . . .
1.5 Khó khăn và thử thách

.
.
.
.
.

.
.
.

.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.

.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.

.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.

.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.

.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.

.
.

.
.
.
.
.

.
.
.
.
.

LÝ THUYẾT CƠ SỞ, CƠNG NGHỆ, CÁC CƠNG TRÌNH LIÊN QUAN
2.1 Learning Management System - LMS . . . . . . . . . . . . . . . . . . . . .
2.1.1 LMS - Edmodo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.2 LMS - Moodle . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.3 Kết luận và lựa chọn . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Các loại ứng dụng di động . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.1 Native App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.2 Hybrid App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.3 Cross Platform App . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.4 Kết luận và lựa chọn loại ứng dụng . . . . . . . . . . . . . . . . . . .
2.3 Frame-work và ngơn ngữ lập trình Cross Platform App . . . . . . . . . . . .
2.3.1 Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.2 Xamarin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.3 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.4 Kết luận lựa chọn frame-work, ngơn ngữ lập trình Cross Platform App

2.4 Kiến trúc ứng dụng của flutter . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.1 Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.2 Gestures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.3 Stateless widgets và Stateful widgets . . . . . . . . . . . . . . . . . .
2.4.4 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.5 ScopedModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.6 REST API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.7 Mơ hình MVVM . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5 Một số lưu lý khi lập trình ứng dụng đa nền tảng . . . . . . . . . . . . . . . .
2.5.1 Phân biệt thiết kế UI trên hai nền tảng Android và IOS . . . . . . . .
2.5.2 Xu hướng thiết kế ứng dụng 2020 . . . . . . . . . . . . . . . . . . .
2.6 Figma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.7 Java và Spring-boot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.8 MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.9 Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.10 Google Cloud Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1

.
.
.
.
.

1
1
1
1
2
2

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.

3
3
3
4
5
6
6
7
8
9
10
10
10
11
12
13
13
13
13
15
16
17
18
20
20
21
23
24

26
27
29


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

3

4

2.11 VNPay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.12 ZaloPay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30
31

THIẾT KẾ KIẾN TRÚC ỨNG DỤNG
3.1 Phân tích yêu cầu đề tài . . . . . . . . . . . . . . . . . . . . . . .
3.1.1 Tìm hiểu các ứng dụng tương tự . . . . . . . . . . . . . .
3.1.2 Phân tích nghiệp vụ, chức năng sẽ hiện thực trên ứng dụng
a.
Đối tượng chính trong ứng dụng . . . . . . . . .
b.
Các chức năng chính . . . . . . . . . . . . . . .
3.2 Thiết kế use case . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3 Thiết kế giao diện . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.1 Giao diện đăng nhập, đăng ký . . . . . . . . . . . . . . .
3.3.2 Giao diện trang chủ . . . . . . . . . . . . . . . . . . . . .
3.3.3 Giao diện mua khoá học . . . . . . . . . . . . . . . . . .

3.3.4 Giao diện thông tin cá nhân . . . . . . . . . . . . . . . .
3.3.5 Giao diện xem lại bài làm . . . . . . . . . . . . . . . . .
3.3.6 Giao diện làm quiz . . . . . . . . . . . . . . . . . . . . .
3.3.7 Giao diện trò chơi . . . . . . . . . . . . . . . . . . . . . .
3.3.8 Giao diện chức năng thanh toán . . . . . . . . . . . . . .
3.3.9 Các loại popup . . . . . . . . . . . . . . . . . . . . . . .
3.4 Thiết kế Back-end (API Bee Service) và cơ sở dữ liệu . . . . . . .
3.4.1 Cơ sở dữ liệu . . . . . . . . . . . . . . . . . . . . . . . .
3.4.2 Back-end (Bee Service) . . . . . . . . . . . . . . . . . . .
3.5 Cấu trúc của hệ thống . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.

33
33
33
33
33
33
35
40
40
40
41
41
42
42
43
43
44
45
45
46
47

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

48
48
48
49
49
49
49
50
50
51
52
52
53

53
54
55
56
56
57
58
58
59
59

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

HIỆN THỰC ỨNG DỤNG
4.1 Công nghệ sử dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2 Quản lý mã nguồn . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3 Hiện thực API back-end . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4 Hiện thực ứng dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.5 Truy cập dữ liệu, sử dụng hệ thống Moodle(Ong vàng học tập) . . . . .
4.5.1 Web Service API . . . . . . . . . . . . . . . . . . . . . . . . .
4.5.2 Một số hàm của API Web Service được sử dụng trong ứng dụng
a.
Lấy danh sách khoá học . . . . . . . . . . . . . . . .
b.
Lấy danh sách khoá học đã đăng ký . . . . . . . . . .
c.
Lấy nội dung khóa học . . . . . . . . . . . . . . . .
d.
Lấy thông tin người dùng . . . . . . . . . . . . . . .

e.
Cập nhật thông tin người dùng . . . . . . . . . . . .
f.
Phân quyền người dùng . . . . . . . . . . . . . . . .
g.
Lấy nội dung bài tập . . . . . . . . . . . . . . . . . .
h.
Lấy danh sách những lần làm bài của người dùng . . .
i.
Người học bắt đầu thực hiện bài tập . . . . . . . . . .
j.
Lấy nội dung, các câu hỏi của bài tập . . . . . . . . .
k.
Lấy nội dung kết quả thực hiện bài tập . . . . . . . .
l.
Xử lý kết quả thực hiện bài tập của người học . . . . .
m.
Lấy kết quả của khóa học . . . . . . . . . . . . . . .
n.
Lấy kết quả đầy đủ của một khóa học . . . . . . . . .
4.6 Kết quả hiện thực . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Trang 2/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

4.6.1
4.6.2
4.6.3
4.6.4
4.6.5
4.6.6

.
.
.
.
.
.
.
.
.
.

59
62
63
64
66
67

67
69
70
71

5

KIỂM THỬ PHẦN MỀM
5.1 Kiểm thử API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2 Kiểm thử hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

72
72
73

6

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
6.1 Kết quả đạt được . . . . . . . . . .
6.2 Thuận lợi . . . . . . . . . . . . . .
6.3 Khó khăn . . . . . . . . . . . . . .
6.4 Hướng phát triển trong tương lai . .

80
80
80
81
81

4.6.7

4.6.8

Đăng nhập, đăng ký . . . . . . . . . . . . . . . . . .
Giao diện trang chủ và chức năng đặt mục tiêu học tập
Giao diện khoá học và bài tập . . . . . . . . . . . . .
Chức năng làm quiz online . . . . . . . . . . . . . . .
Chức năng thống kê đánh giá . . . . . . . . . . . . . .
Chức năng thanh toán online . . . . . . . . . . . . . .
a.
Thanh toán VNPay . . . . . . . . . . . . .
b.
Thanh toán ZaloPay . . . . . . . . . . . . .
Chơi game kết hợp làm quiz . . . . . . . . . . . . . .
Thông tin người dùng . . . . . . . . . . . . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.

.

.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.

.
.

.
.
.
.

Trang 3/83


Danh sách hình vẽ

2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9

Sơ đồ đơn giản ứng dụng hello world [15]
Ví dụ cho StatelessWidget [20] . . . . . .
Ví dụ cho StatefulWidget [20] . . . . . .
Mơ hình MVVM [16] . . . . . . . . . .
Ví dụ bảng màu tươi tơng màu nóng [13]
Ví dụ bảng màu tươi tơng màu lạnh [13] .
Bảng màu tương phản [17] . . . . . . . .

Các hình thức thanh tốn trên VNPay [5]
Các chức năng chính của ZaloPay [4] . .

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

13
14
15
18
21
22
22
30
31

3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11
3.12
3.13

Use case cho người dùng . . .
Giao diện đăng nhập, đăng ký
Giao diện trang chủ . . . . . .

Giao diện trang chủ . . . . . .
Giao diện thông tin cá nhân . .
Giao diện xem lại bài làm . . .
Giao diện làm quiz . . . . . .
Giao diện làm bài tập trò chơi .
Giao diện thanh toán . . . . .
Các loại popup thông báo . .
ERD cơ sở dữ liệu hệ thống . .
Thiết kế Back-end . . . . . . .
Kiến trúc chung của hệ thống .

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.

35
40
40
41
41
42
42
43
43
44
45
46
47

4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11

4.12
4.13
4.14
4.15

Xác thực người dùng thông với tài khoản Moodle . . . .
Xác thực người dùng thông qua Firebase . . . . . . . . .
Giao diện đăng nhập, đăng ký . . . . . . . . . . . . . .
Giao diện trang chủ và chức năng đặt mục tiêu học tập .
Giao diện khoá học và bài tập . . . . . . . . . . . . . . .
Luồng lấy dữ liệu khóa học . . . . . . . . . . . . . . . .
Luồng lấy dữ liệu bài học và cách hiển thị với người dùng
Giao diện làm câu hỏi trắc nghiệm . . . . . . . . . . . .
Giao diện thống kê kết quả . . . . . . . . . . . . . . . .
Giao diện thanh toán khoá học . . . . . . . . . . . . . .
Sequent diagram chức năng thanh toán VNPay . . . . . .
Các phương thức thanh toán hỗ trợ . . . . . . . . . . . .
Sequent diagram chức năng thanh toán qua ZaloPay . . .
Giao diện chơi game kết hợp làm quiz . . . . . . . . . .
Giao diện thông tin người dùng . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.

.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.

60
61
62
63
63
64
65
66
66
67
68
68
69
70
71

.
.
.
.
.
.
.
.
.
.
.

.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.

4

.
.
.
.
.
.
.
.
.
.
.
.
.

Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

5.1
5.2

Gọi API tạo URL thanh tốn với VNPay và kết quả trả về thành công . . . . . .
Gọi API tạo order thanh toán với VNPay và kết quả trả về thành công . . . . .

72
73

Trang 5/83


Danh sách bảng

2.1

Phân biệt thiết kế UI trên hai nền tảng Android và IOS [12]

. . . . . . . . . . .

20

3.1
3.2
3.3
3.4

3.5
3.6
3.7

Use case đăng nhập . . . . . . . . . . . . . .
Use case xem khoá học đã mua . . . . . . . .
Use case thanh toán khoá học . . . . . . . . .
Use case cập nhật thông tin cá nhân . . . . .
Use case chơi game vòng quay trả lời câu hỏi
Use case tạo mục tiêu học tập . . . . . . . . .
Use case làm bài tập trắc nghiệm . . . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

36
36
37
37
38
38
39

4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
4.14

4.15
4.16
4.17
4.18
4.19
4.20
4.21
4.22
4.23
4.24

Những thư viện, framework chính được sử dụng . . . . . . . . . . . .
Những tham số của hàm lấy danh sách khoá học . . . . . . . . . . . .
Mô tả đối tượng Course . . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm lấy danh sách khoá học đã đăng ký . . . . . .
Những tham số của hàm lấy nội dung khoá học . . . . . . . . . . . .
Mô tả đối tượng Section . . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm lấy thông tin người dùng . . . . . . . . . . .
Mô tả đối tượng User . . . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm cập nhật thông tin người dùng . . . . . . . .
Những tham số của hàm phân quyền người dùng, ghi danh khoá học .
Những tham số của hàm lấy nội dung bài Quiz . . . . . . . . . . . . .
Mô tả đối tượng Quiz . . . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm lấy thông tin làm bài của người dùng . . . . .
Mô tả đối tượng Attempt . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm thực hiện bài tập . . . . . . . . . . . . . . .
Những tham số của hàm lấy nội dung, các câu hỏi của bài tập . . . . .
Mô tả đối tượng Question . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm lấy kết quả thực hiện bài tập . . . . . . . . .
Mô tả những thông tin của lần làm bài được chỉ định . . . . . . . . .

Những tham số của hàm xử lý kết quả thực hiện bài tập của người học
Những tham số của hàm lấy kết quả của khóa học . . . . . . . . . . .
Mô tả đối tượng Grade . . . . . . . . . . . . . . . . . . . . . . . . .
Những tham số của hàm lấy kết quả đầy đủ của một khóa học . . . . .
Mô tả đối tượng UserGrade . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

48
50
51
51
52
52
52
53
53
54
54
55
55
56
56
57
57
57
58

58
58
59
59
59

5.1

Danh sách trường hợp kiểm thử back box . . . . . . . . . . . . . . . . . . . . .

79

6

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.

.
.
.

.
.
.
.
.
.
.


Thuật ngữ và từ viết tắt
API
App
Graphic animation
Database
Data
Server
Client
Client side
ERD
Frontend
Backend
Quiz
Offline
Platform
Fintech
Local

State
Request
URL
UI
Web service
Webview
Component
GCP

Application Programming Interface
Ứng dụng, chỉ cả ứng dụng Web, Mobile
Hiệu ứng động
Cơ sở dữ liệu
Dữ liệu
Máy chủ
Máy khách
Phía máy khách
Entity Relationship Diagram được hiểu là mơ hình thực thể kết hợp hay
cịn gọi là thực thể liên kết
Thành phần tương tác trực tiếp với người dùng
Thành phần này xử lý logic đằng sau của ứng dụng
Bài tập
Ngoại tuyến
Nền tảng kết nối
Sự kết hợp giữa Finance (tiền tệ, tài chính) và Technology (cơng nghệ),
là cơng nghệ tài chính
Cục bộ
Trạng thái
u cầu từ phía người dùng gửi lên cho máy chủ
Uniform Resource Locator là đường dẫn hay địa chỉ dùng để tham

chiếu đến các tài nguyên trên mạng Internet
User Interface hay còn gọi là giao diện người dùng
Là dịch vụ web, một module phần mềm được thiết kế để thực hiện một
nhóm các tác vụ nhất định
Trình duyệt được nhúng trong ứng dụng để hiển thị HTML
Một thành phần unit của Flutter app
Google Cloud Platform


Chương 1
TỔNG QUAN
1.1

Đặt vấn đề

Giai đoạn 2020-2021 là một giai đoạn đầy biến động, khó khăn và những thách thức lớn,
đại dịch COVID-19 đã làm thay đổi xã hội, thay đổi nền kinh tế, giáo dục của nhiều nước trên
thế giới, mọi người ở nhà nhiều hơn, tiếp xúc các thiết bị di động và Internet nhiều hơn, làm
việc ở nhà, đi chợ online, học online,... Nhận thấy các dịch vụ giải trí, các mạng xã hội phát
triển mạnh, nhiều trẻ em, học sinh có điều kiện sử dụng điện thoại nhiều hơn nhưng đa số là
các em sử dụng để chơi game, xem phim là chính. Thêm việc các ứng dụng hỗ trợ học tập cho
trẻ em, học sinh chưa nhiều, chưa cuốn hút các em tự học, nên nhóm quyết định xây dựng một
ứng dụng học tập online với giao diện đẹp mắt, trải nghiệm thú vị đem lại cảm giác vừa học
vừa chơi cho các em tự tìm hiểu kiến thức với mong muốn giúp các em có ứng dụng để học tập
những lúc ở nhà thay vì xem phim và chơi game lãng phí thời gian.

1.2

Các vấn đề hiện tại

• Qua mùa dịch vừa rồi, lượng người dùng những ứng dụng học online tăng mạnh.
• Ở Việt Nam, số lượng trang web học tập được xây dựng dựa trên nền tảng Moodle khá phổ
biến.
• Mobile App của Moodle chưa thực sự đáp ứng tốt cho người dùng (giật lag, lỗi hiển thị,
không thông báo, đăng nhập khó khăn,...).
• Cơng nghệ Webview bị lạm dụng trong Moodle Mobile App làm ứng dụng trở nên quá
nhiều chữ, khó tiếp cận với người dùng mobile.
Với thực trạng đó, đề tài này cung cấp mobile app mới miễn phí thay thế Moodle Mobile
App làm cầu nối tốt hơn giữa người dùng và các trang web được xây dựng dựa trên nền tảng
Moodle.

1.3

Mục tiêu của đề tài

Đề tài này phát triển ứng dụng Mobile App sử dụng framework Flutter cho phép đồng bộ nội
dung từ Moodle với các tính năng chính như sau:
• Kết nối, đồng bộ được các khố học trên hệ thống E-learning dựa vào Moodle LMS (ongvanghoctap.edu.vn).
• Hỗ trợ thanh toán trực tuyến qua cổng thanh toán VNPAY và ví ZaloPAY.
1


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

Ngồi ra, cịn có các mục tiêu khác như:
• Giao diện phần mềm thân thiện trên cả Android, iOS.
• Đề xuất khố học dựa trên thơng tin học sinh.
• Hỗ trợ làm bài kiểm tra dạng trắc nghiệm và dạng H5P.
• Thống kê kết quả học tập theo từng khoá học, từng bài quiz định kỳ hàng ngày, hàng tháng.

1.4

Phạm vi đề tài

Phạm vi các đối tượng mà đề tài hướng đến là:
• Người học (học sinh, sinh viên) thông qua ứng dụng trên điện thoại thông minh tham gia
các khóa học trên hệ thống Moodle LMS (chẳng hạn: ongvanghoctap.edu.vn).
• Ứng dụng đã hỗ trợ được thanh tốn với: VNPAY, ZaloPAY.
• Giao diện ứng dụng di động sử dụng framework Flutter đã chạy trên cả Android và iOS.
• Thống kê kết quả học tập theo từng khố học, từng bài quiz, thống kê thời gian học tập của
học viên định kỳ hàng ngày, hàng tháng.
• Chỉ mới hỗ trợ được bài tập Quiz dạng Moodle Quiz (Multichoice) và H5P Quiz (multiple
choice).

1.5

Khó khăn và thử thách

Các khó khăn, thử thách mà đề tài gặp phải:
• Độ ổn định của ứng dụng.
• Phải đảm bảo đầy đủ các chức năng nhưng vẫn dễ dàng sử dụng cho học viên.
• Hỗ trợ được nhiều dạng bài tập khác nhau.

Trang 2/83


Chương 2
LÝ THUYẾT CƠ SỞ, CƠNG NGHỆ, CÁC CƠNG TRÌNH
LIÊN QUAN
2.1

Learning Management System - LMS

• LMS là chữ viết tắt của Learning Management System, tiếng việt nghĩa là Hệ thống quản
lý học trực tuyến. LMS là một phần mềm cho phép việc quản lý, vận hành hệ thống các tài
liệu, hướng dẫn, theo dõi, báo cáo và cung cấp các cơng nghệ giáo dục điện tử (E-Learning)
cho các khóa học hay chương trình đào tạo.
• LMS được cấu tạo từ 2 thành phần chính:
– Thành phần cơng nghệ nền (back-end) gồm các chức năng cốt lõi như tạo, quản lý và
cung cấp các khóa học, chứng thực người dùng, cung cấp các dữ liệu hay thực hiện các
thông báo,.... Thành phần này được quản lý và điều khiển bởi người lập trình hay người
quản lý hệ thống.
– Thành phần giao diện người dùng (front-end) chạy trên nền các trình duyệt web. Thành
phần này được dùng bởi các chủ thể trong hệ thống học trực tuyến như người quản lý,
giảng viên và học viên.
• Một số chức năng cốt lõi
– Quản lý người dùng
– Quản lý khóa học
– Quản lý tương tác, hỗ trợ
– Thi, kiểm tra
– Theo dõi, giám sát
– Báo cáo, Thơng báo
– Tùy chỉnh
Sau đây nhóm sẽ so sánh một số mã nguồn mở LMS đang thịnh hành hiện tại.

2.1.1

LMS - Edmodo

Edmodo là giải pháp LMS phổ biến nhất hiện nay hướng đến đối tượng là giáo viên, học

sinh và phụ huynh. Với lượng người dùng lên đến 100 triệu, Edmodo là cơng cụ dạy học theo
mơ hình mạng xã hội mà giáo viên có thể chia sẻ bài giảng, quản lý lớp học, khảo sát ý kiến, ...
và học viên có thể làm bài tập, chia sẻ kiến thức học tập, .... Edmodo có thể hoạt động trên nền
tảng điện thoại IOS, Android chỉ với dung lượng 14 Mb vô cùng thân thiện với người sử dụng.[22]
Ưu điểm
3


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

• Là mã nguồn mở LMS phổ biến nhất hiện tại.
• Lưu trữ trên đám mây
• Giáo viên có thể tải lên nội dung gốc từ nhiều nguồn khác nhau
• Edmodo dành cho người dùng khơng giới hạn chỉ với tài khoản freemium
• Edmodo cung cấp cho người dùng nhiều cơ hội đào tạo, cả miễn phí và trả phí.
Nhược điểm
• Khơng thể tải xuống chạy local.
• Không cung cấp các công cụ soạn thảo nội dung để giáo viên tạo chương trình giảng dạy
của riêng họ. Nội dung cũng không tuân theo SCORM(Sharable Content Object Reference
Model là một tập hợp tiêu chuẩn cho hệ thống E-learning)
• Tài khoản “freemium” chỉ dùng được những chức năng cơ bản
• Edmodo thường nhắm mục tiêu đến thị trường K-12 hơn là giáo dục đại học
• Khơng nhằm vào các doanh nghiệp.
• Khơng tích hợp với các hệ thống của bên thứ ba khác ngoài Google Apps và Microsoft
Office.

2.1.2

LMS - Moodle

Moodle được sáng lập vào năm 1999 bởi Martin Dougiamas, cho đến nay đã được phát
triển thành hệ thống quản lý học tập phổ biến thứ 2 thế giới, được sử dụng bởi các doanh
nghiệp, tập đoàn, bệnh viện và cả tổ chức phi lợi nhuận, trong đó có Liên Hợp Quốc. Tính đến
tháng 8 năm 2016, Moodle đã có 89 triệu người dùng và lượng khách hàng lên đến 71 nghìn
người. Sở dĩ Moodle thu hút như vậy là bởi hệ thống này sở hữu mã nguồn mở, hoàn tồn miễn
phí và có thể chỉnh sửa được. Moodle cho phép các giảng viên, các nhà tuyển dụng xây dựng
khóa học trực tuyến để đáp ứng nhu cầu học tập của đối tượng học tập (học sinh, sinh viên,
nhân viên,. . . )[1]
Qua q trình trải nghiệm và phân tích hệ thống LMS(Learning Management System)
Moodle, nhóm đưa ra những ý kiến về Moodle như sau:
• Moodle là một hệ thống quản lý học tập (Learning Management System - LMS) mã nguồn
mở, cho phép tạo các khóa học trên mạng Internet hay các website học tập trực tuyến.
• Moodle nổi bật là thiết kế hướng tới giáo dục, dành cho những người làm trong lĩnh vực
giáo dục.
• Moodle rất dễ dùng với giao diện trực quan, khá dễ dùng và giống với trang web e-learning
của trường Đại học Bách Khoa.
• Moodle thiết kế dựa trên module cho phép bạn chỉnh sửa giao diện bằng cách dùng các
theme.
• Tài liệu hỗ trợ của Moodle rất đồ sộ và chi tiết, khác hẳn với nhiều dự án mã nguồn mở
khác.
• Moodle phù hợp với nhiều cấp học và hình thức đào tạo: phổ thơng, đại học/cao đẳng,
khơng chính quy, trong các tổ chức/cơng ty.
• Moodle phát triển dựa trên PHP. Có thể dùng Moodle với các database mã nguồn mở như
MySQL hoặc PostgreSQL. Phiên bản 1.7 sẽ hỗ trợ thêm các database thương mại như
Oracle, Microsoft SQL.
• Có hỗ trợ mobile app trên các nền tảng IOS và Android.
Trang 4/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

Ưu điểm
• Phù hợp nếu trường hợp cần một giải pháp chạy trên máy tính cá nhân.
• Lưu trữ trên đám mây
• Có nhiều plug-in để tạo nội dung tuân thủ SCORM.
• Diễn đàn phát triển rộng rãi
• Phù hợp với nhiều thị trường (K-12, cao đẳng, đại học, thậm chí là cả mơi trường doanh
nghiệp)
Nhược điểm
• Tốn chi phí duy trì(mua máy chủ, th nhân viên CNTT bảo trì)
• Giá dịch vụ cloud khơng phù hợp với sinh viên. (Tài khoản thấp nhất trừ freemium Starter:
113$ mỗi năm cho 50 người dùng và 250 MB dung lượng lưu trữ)
• Khơng có dịch vụ đào tạo sử dụng cụ thể từ nhà cung cấp, mọi đào tạo đều do người sử
dụng moodle tự tạo và chia sẻ với nhau.
• Vì đào tạo đều có nguồn từ người sử dụng nên rất rải rác.
Một số ý kiến của nhóm về Moodle mobile app để tham khảo và rút kinh nghiệm tránh những
nhược điểm mà Moodle mobile app đang có.
• Moodle Mobile App sử dụng Webview trên nền JavaScript đến 90% nên rất khó khả năng
mở rộng.
• Trái ngược với Moodle web, Moodle mobile app bị người dùng chê rất nhiều về việc chậm,
lag, thiếu tính năng, lỗi hiển thị.
• Vì sử dụng web view nên chịu phụ thuộc vào trang web nơi moodle mobile app trỏ đến.

2.1.3

Kết luận và lựa chọn

Từ những nhận định, những ưu điểm, nhược điểm được nêu trên, nhóm quyết định lựa
chọn Moodle làm LMS chính cho dự án.
Vai trị của Moodle trong dự án

• Moodle sẽ là framework chính cho back-end
• Cung cấp trang admin cho admin quản lý tồn bộ dịch vụ.
• Cung cấp trang web cho các giáo viên, giảng viên thêm các khóa học, các bài học.
• Cung cấp các REST API để Mobile App của nhóm sử dụng tài nguyên.
Giới thiệu trang web (Ong vàng học tập)
• là trang web đã được triển khai thực tế dựa trên
nền tảng của Moodle.
• Trang thuộc quyền sở hữu của thầy hướng dẫn đề tài.
• Tiết kiệm chi phí và thời gian triển khai nền tảng Moodle cho nhóm.
• Được sự hỗ trợ từ thầy hướng dẫn về các cài đặt nền tảng moodle.

Trang 5/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

2.2

Các loại ứng dụng di động

Nhắc đến lập trình ứng dụng di động hiện nay thì ba thuật ngữ quan trọng khơng thể bỏ qua đó
là Native App, Hybrid App và Cross Platform App. Mỗi công nghệ có những ưu điểm và nhược
điểm khác nhau cần cân nhắc để lựa chọn phù hợp với dự án.

2.2.1

Native App

Native app thường được gọi là ứng dụng gốc. Là những ứng dụng được viết riêng cho một loại
nền tảng cụ thể như iOS, Android, Windows Phone bằng các ngôn ngữ tương ứng.

Vì một ứng dụng gốc được xây dựng để sử dụng trên một thiết bị cụ thể và hệ điều hành của
nó, nên nó có khả năng sử dụng phần cứng và phần mềm dành riêng cho thiết bị. Các ứng dụng
gốc có thể cung cấp hiệu suất tối ưu hóa và tận dụng cơng nghệ mới nhất, chẳng hạn như GPS,
so với các ứng dụng web hoặc ứng dụng đám mây di động được phát triển chung trên nhiều hệ
thống.[23]
Công nghệ được sử dụng để phát triển iOS Native app:
• Objective-C – Ngơn ngữ lập trình này được biết đến với trải nghiệm phát triển tuyệt vời,
thư viện có sẵn và một nhóm chuyên gia rộng lớn. Objective-C là một mature framework,
cũng có được khả năng tương thích với các cơng nghệ lập trình khác. Bất chấp những lợi
ích đó, chúng ta nhận ra rằng các ngơn ngữ mới xuất hiện và đơi khi nó sẽ khơng có khả
năng hỗ trợ tất cả các tính năng mới nhất.
• Swift – Đây là một framework lập trình tương đối mới được Apple giới thiệu đã trở thành
lựa chọn thay thế để xây dựng các iOS Native app. Các nhà phát triển đã chỉ ra hiệu năng
nhanh hơn của nó và nó dễ dàng hơn để tìm hiểu và làm việc với. Swift liên tục phát triển
đó là lý do tại sao có thể thiếu một số thành phần. Các nhà phát triển phần mềm cho rằng
có thể thay thế Objective-C trong tương lai.
Công nghệ được sử dụng để phát triển Android Native app:
• Java – Ngơn ngữ lập trình không chỉ chủ yếu được sử dụng cho các ứng dụng mobile
Android mà cịn cho các mục đích khác. Phần lớn phát triển desktop và web dựa trên Java.
Nó đã trở thành một hệ thống công cụ đặc biệt, các nhà phát triển có quyền truy cập vào
một thư viện mạnh mẽ. Nó giúp đơn giản hóa q trình lập trình tổng thể. Tuy nhiên, các
ứng dụng trên Java địi hỏi nhiều bộ nhớ hơn và hoạt động chậm hơn so với các framework
khác.
• Kotlin – Nó là một ngơn ngữ lập trình được phát triển đặc biệt để làm việc với Java và Java
Virtual Machine. Do đó, việc sử dụng nó được Google hỗ trợ và phê duyệt để phát triển các
ứng dụng Android. Một trong những ưu điểm chính của Kotlin so với Java thơng thường
là giao diện của nó cho phép làm việc theo cú pháp ngắn hơn. Thực tế này giúp giảm thời
gian lập trình cần thiết để tạo một ứng dụng cho Android. Bây giờ nó được bao gồm như
là một thay thế cho trình biên dịch Java tiêu chuẩn cho Android Studio. Expedia, Square,
Pinterest và Flipboard có thể được nêu tên trong số những ví dụ điển hình nhất về các cơng

ty sử dụng Kotlin cho các ứng dụng Android của họ.
Ưu điểm
• Về mặt hiệu năng thì native app chạy nhanh đặc biệt trong game.
• Truy cập phần cứng mạnh mẽ.
• Có nhiều lợi thế ở chế độ offline.
• Có nhiều chức năng do sử dụng các khả năng của thiết bị cơ bản.
Trang 6/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

• Bảo mật dữ liệu - Ứng dụng native dễ dàng bảo mật dữ liệu hơn các loại ứng dụng khác.
Đó là lợi thế mà rất nhiều công ty quan tâm trong việc cung cấp cho khách hàng của họ đặc
biệt là trong lĩnh vực doanh nghiệp, fintech và các ứng dụng có dữ liệu nhạy cảm.
Nhược điểm
• Khơng hỗ trợ đa nền tảng.
• Nhiều cơ sở mã nguồn vì mỗi thiết bị có phiên bản ứng dụng riêng.
• Dành thời gian cho nhiều phiên bản cho các nền tảng riêng biệt trong mỗi bản cập nhật tính
năng.
• Tốn nhân lực và tài ngun khi dự án cần hiện thực đa nền tảng.
Khi nào nên lựa chọn Native app
• Ứng dụng cần sự ăn khớp với nền tảng cao.
• Ứng dụng cần truy cập sâu vào quản lí phần cứng.
• Ứng dụng u cầu UI cao hoặc graphic animation như game.

2.2.2

Hybrid App

Một ứng dụng hybrid được tạo dưới dạng một ứng dụng duy nhất để sử dụng trên nhiều

nền tảng như Android, iPhone và Windows. Ứng dụng hybrid thực tế là ứng dụng native và ứng
dụng web được kết hợp với nhau. Là một sản phẩm hoạt động trên nhiều hệ điều hành như iOS,
Android, Windows,. . .
Hybrid app trông giống như một ứng dụng native nhưng thực sự được chạy trên website
được tạo ra bằng HTML5, CSS và JavaScript, về cơ bản là một chương trình dựa trên web đặt
trong một vỏ ứng dụng native và được kết nối với phần cứng thiết bị.[23]
Công nghệ được sử dụng để phát triển Hybrid app
• React Native - Facebook đã tạo ra công nghệ open-sourced này để tương thích đa nền tảng.
Các UI được đơn giản hóa có hiệu suất tăng đáng kể khi tải lại. React Native được ưu
chuộng sử dụng vì thời gian phát triển ngắn. Các kỹ sư phần mềm có quyền truy cập vào
các đơn vị có sẵn để áp dụng, tuy nhiên, framework có thể thiếu các thành phần nhất định.
Cả Facebook và cộng đồng thường xun cung cấp thơng tin cập nhật.
• Xamarin : Open framework được Microsoft hỗ trợ và duy trì nâng cấp mạnh mẽ. Gần đây,
họ đã đưa ra cách tiếp cận phát triển Hybrid mobile app mới cho phép code across platform.
Nó đã giúp cải thiện tốc độ phát triển và đơn giản hóa bảo trì. Các nhà phát triển có thể sử
dụng logic chung, tuy nhiên, các quy định UI sẽ duy trì cụ thể cho từng nền tảng. Xamarin
sẽ không xử lý đồ họa phức tạp nhưng phù hợp với các ứng dụng đơn giản. Công nghệ này
thường được chọn cho các dự án định hướng kinh doanh.
• Ionic : Framework này tạo ra các ứng dụng mobile với các công nghệ web tiêu chuẩn như
JavaScript, CSS, HTML, Angular,... Các nhà phát triển cũng có rất nhiều UI component
có thể truy cập đơn giản để xử lý. Thời gian phát triển là tuyệt vời như với tất cả các khung
khác cho các ví dụ Hybrid app. Mặc dù có tất cả các lợi ích, việc bảo trì có thể khó khăn
hơn. Ionic cung cấp rất nhiều plugin, vì vậy khi sự cố xuất hiện, nó có thể u cầu điều
chỉnh thủ cơng thêm.
Ưu điểm
• Single code base – Đây là lợi thế đem đến tất cả các lợi ích sau. Các ứng dụng hybrid được
các cơng ty và nhà phát triển ưa thích vì chúng có thể hoạt động trên cả hai nền tảng. Sẽ
không cần xây dựng hai code riêng cho iOS và Android vì lý do code chung chức năng.

Trang 7/83

Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

• Chi phí thấp - Nhà phát triển có thể tiết kiệm một chi phí rất lớn bằng cách phát triển một
ứng dụng mobile trong khi giải quyết vấn đề người dùng trên các nền tảng khác nhau. Chi
phí sẽ gần giống như chi phí xây dựng chỉ cho một nhưng được thiết kế để chạy ở mọi nơi.
• Đơn giản để xây dựng và kiểm thử – Team sẽ đạt được kết quả mong đợi nhanh hơn. Họ
không thỏa thuận với từng nền tảng. Code được tạo một lần và thời gian kiểm thử cũng sẽ
được giảm.
• Có nhiều chức năng do sử dụng các khả năng của thiết bị cơ bản.
• Dễ dàng bảo trì – Tất cả các thay đổi và cập nhật bắt buộc sẽ được duy trì đồng thời trên
cả hai nền tảng. Nó khơng chỉ thuận tiện cho các nhà phát triển cho người dùng là tốt. Rất
nhiều vấn đề có thể khắc phục từ phía máy chủ và người dùng sẽ chỉ nhận được các bản cập
nhật tự động.
• Thời gian hiện thực nhanh hơn – Khơng cần phải có hai nhóm iOS và Android hoặc nhóm
đa chức năng lớn, chỉ cần tìm một nhóm chun gia tương đối nhỏ là có thể tạo ra một sản
phẩm được tiếp thị thông minh sẽ thú vị cho những người dùng khác nhau.
Nhược điểm
• Giới hạn hiệu quả – Cross-platform framework phụ thuộc vào các plugin được kết nối với
các tính năng của thiết bị. Đôi khi các nhà phát triển phải tạo chúng bằng tay để tiếp cận
chức năng cụ thể của thiết bị.
• Kết nối internet – Đối với hiệu quả của Native app và Hybrid app, có một sự khác biệt đáng
kể. Các cross-platform framework yêu cầu kết nối internet thường xun. Một số chức năng
sẽ khơng có sẵn khi người dùng thiếu kết nối internet.
• Phần mềm cần dung lượng lớn – Dung lượng phần mềm khá lớn, tốn bộ nhớ của thiết bị
nhiều hơn so với Native app.
Khi nào nên lựa chọn Hybrid app
• Ứng dụng cần xuất bản trên nhiều nền tảng.
• Nhà phát triển có kinh nghiệm thuần web.

2.2.3

Cross Platform App

Cross Platform còn một tên gọi khác là Multi Platform Thuật ngữ này dùng để chỉ các ứng
dụng đa nền tảng, phù hợp để cài đặt cho nhiều loại thiết bị khác nhau. Đây được xem là giải
pháp hiệu quả nhất để giải quyết các vấn đề khi sử dụng Native app.
Với Cross Platform, nhà phát triển chỉ cần sử dụng một ngôn ngữ và lập trình ứng dụng
một lần. Chúng sẽ được biên dịch sang các phiên bản khác để phù hợp cho những nền tảng khác
nhau[24] .
Một số framework được sử dụng để phát triển Cross platform app
• Flutter : Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao
trên iOS và Android trong khoảng thời gian ngắn. Flutter hoạt động với những code sẵn có
được sử dụng bởi các lập trình viên, các tổ chức. Flutter hồn tồn miễn phí và cũng là mã
nguồn mở.
• Xamarin : Open framework được Microsoft hỗ trợ và duy trì nâng cấp mạnh mẽ. Gần đây,
họ đã đưa ra cách tiếp cận phát triển Hybrid mobile app mới cho phép code across platform.
Nó đã giúp cải thiện tốc độ phát triển và đơn giản hóa bảo trì. Các nhà phát triển có thể sử
dụng logic chung, tuy nhiên, các quy định UI sẽ duy trì cụ thể cho từng nền tảng. Xamarin
sẽ không xử lý đồ họa phức tạp nhưng phù hợp với các ứng dụng đơn giản. Công nghệ này
thường được chọn cho các dự án định hướng kinh doanh.
Trang 8/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

Ưu điểm
• Single code base – Đây là lợi thế đem đến tất cả các lợi ích sau. Các ứng dụng hybrid được
các công ty và nhà phát triển ưa thích vì chúng có thể hoạt động trên cả hai nền tảng. Sẽ

không cần xây dựng hai code riêng cho iOS và Android vì lý do code chung chức năng.
• Chi phí thấp - Nhà phát triển có thể tiết kiệm một chi phí rất lớn bằng cách phát triển một
ứng dụng mobile trong khi giải quyết vấn đề người dùng trên các nền tảng khác nhau. Chi
phí sẽ gần giống như chi phí xây dựng chỉ cho một nhưng được thiết kế để chạy ở mọi nơi.
• Cross Platform cho phép thực hiện rất nhiều các dự án lớn, yêu cầu sự linh hoạt, đa dạng.
• Dế dàng bảo trì – Tất cả các thay đổi và cập nhật bắt buộc sẽ được duy trì đồng thời trên
cả hai nền tảng. Nó khơng chỉ thuận tiện cho các nhà phát triển cho người dùng là tốt. Rất
nhiều vấn đề có thể khắc phục từ phía máy chủ và người dùng sẽ chỉ nhận được các bản cập
nhật tự động.
Nhược điểm
• Dù có tính linh động cao cũng như tiết kiệm chi phí, tuy nhiên theo đánh giá của các dịch
vụ outsource phần mềm, lập trình viên chuyên nghiệp, Cross Platform vẫn không thể so
sánh được với Native App. Thực tế, ở thời điểm hiện tại thì Cross Platform vẫn không thể
khai thác được các thư viện của những nền tảng lớn như IOS hay Android.
• Quá trình cấp phép cho các cơng nghệ của Cross Platform diễn ra khá phức tạp.
Khi nào nên lựa chọn Cross platform app
• Định hướng ứng dụng mobile có sự linh động cao, có khả năng hoạt động trên nhiều nền
tảng khác nhau.
• Khi muốn tiết kiệm chi phí phát triển, thời gian phát hành sản phẩm gấp rút.

2.2.4

Kết luận và lựa chọn loại ứng dụng

Việc lựa chọn công nghệ di động nào còn phụ thuộc vào nhu cầu cũng như khả năng nhà
phát triển ứng dụng.
Nếu như muốn triển khai một ứng dụng công nghệ mượt mà, tận dụng tốt về cơ sở hạ
tầng của hệ điều hành thì Native chính là một sự lựa chọn lý tưởng nhất.
Với xu hướng mới nhất hiện nay là React Native App được phát triển bởi Facebook, và
theo như những chia sẻ của các chuyên gia phát triển ứng dụng di dộng thì công nghệ này hiện

đang rất thịnh hành và được nhiều doanh nghiệp đa quốc gia ưu tiên lựa chọn cho những dự án
mang tính Ứng dụng App Mobile có quy mơ từ trung bình đến rất lớn.
Nếu cần một ứng dụng linh động trên nhiều nền tảng thì có thể lựa chọn Cross Platform
phù hợp hơn cả.
Sau khi phân tích yêu cầu đề tài và các kỹ năng hiện tại của các thành viên, cân nhắc tốc
độ phát triển ứng dụng thì nhóm quyết định chọn cơng nghệ Cross platform sử dụng cho đề tài
này.

Trang 9/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

2.3

Frame-work và ngơn ngữ lập trình Cross Platform App

2.3.1

Flutter

Flutter là SDK nguồn mở của Google dùng để tạo các ứng dụng có chất lượng cho Android
và iOS bằng cách sử dụng một codebase.
Flutter là một bộ SDK đa nền tảng nên ứng dụng Flutter có thể hoạt động trên cả iOS và
Android, có thể tương thích được với framework UI trên cả hai hệ điều hành này. Các ứng dụng
này không biên dịch trực tiếp với các ứng dụng native của Android và iOS[2] .
Ưu điểm của Flutter.
• Mạnh về hiệu ứng, hiệu suất ứng dụng cao.
• Giao tiếp gần như trực tiếp với native.
• Có thể chạy được giả lập mobile ngay trên web, tiện cho development. Các metric measure

performance được hỗ trợ sẵn giúp nhà phát triển kiểm sốt tốt hiệu năng của app.
• Có thể dùng để xây dựng các bundle/framework gắn và app native để tăng hiệu suất.
• Flutter được hỗ trợ tính năng Hot Reload. Điều đó có nghĩa là nếu thực hiện bất kỳ thay đổi
nào trong mã thì có thể thấy chúng ngay lập tức mà không cần chờ đợi hoặc khởi động lại
ứng dụng. Điều này giúp các nhà thiết kế thêm các tính năng mới, sửa lỗi và thử nghiệm
ứng dụng hiệu quả hơn.
Nhược điểm của Flutter
• Bộ render UI được nhóm tác giả gần như viết lại, khơng liên quan tới UI có sẵn của Framework native, dẫn đến bộ nhớ sử dụng khá nhiều.
• Phải học thêm ngơn ngữ DART.
• Dù đã tung ra phiên bản 1.0 chính thức, tuy nhiên cịn khá mới. Một số plugin rất quan
trọng như Google Map vẫn còn đang phát triển, chưa ổn định.

2.3.2

Xamarin

Xamarin được xây dựng vào tháng 5 năm 2011 bởi các kỹ sư đã tạo ra Mono, Mono
cho Android và MonoTouch, mục đích là triển khai chạy ứng dụng trên nhiều nền tảng của
Common Language Infrastructure (CLI) và Common Language Specifications ( Thường được
gọi là Microsoft .NET) [25] .
Dựa trên ngôn ngữ C#, các nhà phát triển có thể sử dụng các cơng cụ Xamarin để viết các
ứng dụng Android, iOS trên cùng một code dự án.
Là 1 nền tảng lập trình ứng dụng di động Cross platform, Xamarin có những đặc điểm
riêng biệt so với các frameworks hiện tại trên thị trường khi mà khả năng native access và trải
nghiệm người dùng native vượt trội hơn.
Ưu điểm của Xamarin.
• Tái sử dụng code tại nhiều chỗ, giảm thời gian phát triển ứng dụng trên nhiều nền tảng:
Xamarin sử dụng ngôn ngữ C# cùng với framework .Net để tạo ra ứng dụng cho mọi nền
tảng bất kì. Khi tạo ứng dụng di động trên Xamarin sử dụng cùng ngôn ngữ là C#, API và
cấu trúc dữ liệu hay logic của ứng dụng nên thường là 90% code chức năng có thể được

dùng trên iOS và Android. Qua đó có thể giảm đáng kể chi phí và thời gian phát triển ứng
dụng di động cho 2 nền tảng phổ biến nhất. Ngồi ra có nhiều IDE hỗ trợ rất tốt mà miễn
phí với nó như Xamarin IDE (dành cho Mac) hay Visual Studio (dành Windows).
• Hiệu năng gần như native: Các số liệu hiệu năng là tương đương khi so sánh với các số liệu
hiệu năng của Java cho Android và Objective-C hoặc Swift cho ứng dụng phát triển ứng
Trang 10/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

dụng iOS native. Hơn thế, hiệu năng của Xamarin liên tục được cải thiện để phù hợp hồn
tồn với tiêu chuẩn của lập trình native.
• Hỗ trợ tất cả phần cứng: với Xamarin, giải pháp sẽ giúp cách chức năng của ứng dụng đạt
được native-level, loại trừ tất cả vấn đề tương thích với phần cứng, sử dụng plugins và APIs
đặc biệt để làm việc với các chức năng thiết bị thơng thường đa nền tảng. Ngồi khả năng
truy cập vào API riêng biệt cho mỗi nền tảng, Xamarin còn hỗ trợ liên kết với thư viện
native. Từ đó, các chức năng được tối ưu hóa và đạt được mức độ native tốt hơn với ít chi
phí hơn.
• Nhiều thư viện hỗ trợ làm ứng dụng cực nhanh có sẵn: component Xamarin cung cấp đến
hàng ngàn UI điều khiển tùy chỉnh, các biểu đồ, chủ đề đa dạng và các chức năng mạnh mẽ
khác có thể được thêm vào ứng dụng chỉ với vài cú click. Điều này bao gồm quá trình xử lý
payment built-in (như Stripe chẳng hạn), tích hợp Beacons và các thiết bị di động, các dịch
vụ đẩy thông báo, giải pháp lưu trữ đám mây,...
Nhược điểm của Xamarin.
• Hỗ trợ chậm các cập nhật mới nhất của các hệ điều hành mobile do phụ thuộc hoàn toàn
vào đội ngũ phát triển của Xamarin. Khi iOS hoặc Android tung ra các phiên bản mới, phải
mất một khoảng thời gian để thực hiện những thay đổi hay đưa vào một plugins mới, v.v..
Mặc dù Xamarin khẳng định sẽ hỗ trợ cùng lúc với những cập nhật mới nhất nhưng vẫn có
những thời điểm bị trì hỗn.
• Giới hạn truy cập vào thư viện mã nguồn mở: Native development giúp thói quen sử dụng

cơng nghệ mã nguồn mở trở nên quen thuộc, rộng rãi hơn. Với Xamarin, cả nhà phát triển
đều phải sử dụng duy nhất một component được cung cấp bởi Xamarin và một số mã nguồn
mở .Net.
• Vấn đề hệ sinh thái của Xamarin: cộng đồng Xamarin chiếm 10% cộng động lập trình
mobile tồn cầu, ít hơn so với cộng đồng của iOS hay Android nên để tìm kiếm được 1 nhà
phát triển Xamarin có kinh nghiệm là chuyện khơng dễ dàng dù Xamarin là nền tảng được
phát triển nhờ sự hỗ trợ từ Microsoft.
• Apps thực hiện chậm hơn và yêu cầu nhiều dung lượng hơn trên thiết bị: Ứng dụng Xamarin
lớn hơn, nặng hơn so với ứng dụng native. So sánh với ứng dụng native nó chiếm nhiều hơn
vài Mb so với Java/Objective C tương ứng. kích thước của một ứng dụng code bằng xamarin
là 5Mb, trong khi code bằng Objective C chỉ chiếm 200 Kb. Càng sử dụng nhiều API, càng
nhiều lưu trữ bị chiếm trên thiết bị.

2.3.3

React Native

React Native là một framework do Facebook phát triển hướng đến tối ưu hóa hiệu năng Hybrid
và tối giản số lượng ngơn ngữ Native di động.
Ưu điểm của React Native.
• Thiên về development/hotfix nhanh (hot reload, bundle injection)
• Sử dụng JS (quen thuộc với nhiều nhà phát triển) và có thể chia sẻ khả năng xử lý với
frontend (js).
• Hỗ trợ bởi Facebook, họ dùng cho product của họ hàng ngày nên nhà phát triển hưởng lợi
khá nhiều từ đây.
• Hiện tại đã rất nhiều thư viện, gần như đã rất đầy đủ cho các nhu cầu app thông dụng.
Nhược điểm của React Native.
• Giao tiếp với native thơng qua các cầu nối, dễ bị hiện tượng nút cổ chai nếu không được
kiểm soát tốt.
Trang 11/83

Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

• Dùng JS nên mang theo các đặc điểm của JS: rất dễ làm nhưng cũng dễ sai, dẫn tới khó bảo
trì về sau.
• Hiệu năng hiệu ứng là điểm yếu của React Native, muốn làm tốt phải làm từ native, tầng js
chỉ gọi vào, cấu hình màn hình. Tuy nhiên với các interactive animation thì rất khó khăn.
• Khơng thích hợp cho các app cần năng lực tính tốn cao (hash, crypto, etc).

2.3.4

Kết luận lựa chọn frame-work, ngơn ngữ lập trình Cross Platform
App

Sau khi cân nhắc giữa các frame-work thì nhóm quyết định chọn Flutter vì những ưu điểm sau
đây:
• Phát triển ứng dụng nhanh chóng: Tính năng hot reload giúp nhanh chóng và dễ dàng thử
nghiệm, xây dựng giao diện người dùng. Trải nghiệm tải lại lần thứ hai, mà không làm mất
trạng thái, trên emulator, simulator và device cho iOS và Android.
• UI đẹp và biểu cảm: Thỏa mãn người dùng với các widget built-in đẹp mắt theo Material
Design và Cupertino (iOS-flavor), các API chuyển động phong phú, scroll tự nhiên mượt
mà.
• Truy cập các tính năng và SDK native: Làm cho ứng dụng trở nên sống động với API của
platform, SDK của bên thứ ba và native code. Nó cho phép sử dụng lại mã Java, Swift và
ObjC hiện tại và truy cập các tính năng và SDK native trên iOS và Android.
• Phát triển ứng dụng thống nhất: Flutter có các cơng cụ và thư viện để giúp dễ dàng đưa ý
tưởng vào cuộc sống trên iOS và Android. Nếu chưa có kinh nghiệm phát triển trên thiết bị
di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di động
tuyệt đẹp. Có thể sử dụng Flutter cho các View và tận dụng nhiều code Java / Kotlin / ObjC

/ Swift hiện có của dự án Native có sẵn.

Trang 12/83


Trường Đại học Bách Khoa - Khoa Khoa học và Kỹ thuật Máy tính

2.4

Kiến trúc ứng dụng của flutter

2.4.1

Widget

Hình 2.1: Sơ đồ đơn giản ứng dụng hello world [15]

Giải thích sơ đồ trên
• MyApp là một widget được tạo ra bằng widget gốc của Flutter, MaterialApp.
• MaterialApp có các thuộc tính của màn hình home và mơ tả giao diện người dùng, nó lại
được tạo ra bởi một widget khác, MyHomePage.
• MyHomePage được tạo bởi một widget gốc của flutter, Scaffold.
• Scaffold có 2 thuộc tính – body và appBar.
• body chứa giao diện chính cịn appBar chứa phần đầu (header) của ứng dụng.
• Header UI là một widget gốc của flutter, AppBar và Body UI sử dụng Center widget.
• Center widget có một thuộc tính, Child, nó chứa phần nội dung chính là một Text widget.

2.4.2

Gestures

Flutter widget hỗ trợ tương tác thông qua một widget đặc biệt gọi là GestureDetector.
GestureDetector khơng hiển thị trên giao diện nhưng có khả năng nhận các thao tác của người
dùng như nhấp, kéo, vuốt, chạm.... Phần lớn widget của Flutter hỗ trợ tương tác giao diện thông
qua GestureDetector [15] .

2.4.3

Stateless widgets và Stateful widgets

Stateless widget khơng có trạng thái. Khơng chấp nhận sự thay đổi bên trong. Còn đối với sự
thay đổi từ bên ngồi (widget cha) thì sẽ thụ động thay đổi theo.

Trang 13/83