ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG HỌC TỪ VỰNG TIẾNG ANH ĐA NỀN TẢNG SỬ DỤNG IONIC VÀ CORDOVA FRAMEWORK

ĐẠI HỌC ĐÀ NẴNG

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA CÔNG NGHỆ THÔNG TIN
Tel. (84-511) 3736949, Fax. (84-511) 3842771
Website: itf.dut.udn.vn, E-mail:

ĐỒ ÁN TỐT NGHIỆP KỸ SƯ
NGÀNH CÔNG NGHỆ THÔNG TIN
MÃ NGÀNH: D480201

ĐỀ TÀI :

XÂY DỰNG ỨNG DỤNG
HỌC TỪ VỰNG TIẾNG ANH ĐA NỀN TẢNG
SỬ DỤNG IONIC VÀ CORDOVA FRAMEWORK

SINH VIÊN
MÃ SINH VIÊN
LỚP
CBHD

: NGUYỄN THÀNH SỰ
: 102110286
: 11T3
: TS. LÊ THỊ MỸ HẠNH

Đà Nẵng, 05/2016

LỜI CẢM ƠN
Đầu tiên, tôi xin chân thành cảm ơn thầy cô trong khoa Công Nghệ
Thông Tin, trường Đại Học Bách Khoa Đà Nẵng đã truyền đạt nhưng kiến
thức quý báu cho tôi trong những năm học vừa qua và nhất là đã tạo điều
kiện thuận lợi cho tôi được học tập và thực hiện đề tài tốt nghiệp này.
Đặc biệt, tôi xin gửi lời cảm ơn sâu sắc tới Cô: Ts. Lê Thị Mỹ Hạnh
đã trực tiếp, tận tình giúp đỡ và hướng dẫn tôi trong suốt thời gian thực
hiện đề tài.
Và để có được kết quả như ngày hôm nay, tôi rất biết ơn gia đình
Ông Bà, Cha Mẹ và những người thân trong gia đình đã động viên, khích
lệ và tạo mọi điều kiện thuận lợi nhất về cả vật chất và tinh thần trong
suốt quá trình học tập và thực hiện đề tài tốt nghiệp này.
Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng cho
phép nhưng chắc chắn sẽ không tránh khỏi nhưng sai sót. Tôi rất mong
nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý Thầy Cô.
Một lần nữ xin chân thành cảm ơn!
Đà Nẵng, ngày 04 tháng 05 năm 2016
Sinh viên thực hiện
Nguyễn Thành Sự

i


LỜI CAM ĐOAN
Tôi xin cam đoan:
1. Nội dung trong đồ án này là do tôi thực hiện dưới sự hướng dẫn trực tiếp

của cô Ts. Lê Thị Mỹ Hạnh.
2. Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả,

tên công trình, thời gian, địa điểm công bố.
3. Nếu có những sao chép không hợp lệ, vi phạm, tôi xin chịu hoàn toàn

trách nhiệm.

Sinh viên thực hiện

Nguyễn Thành Sự

ii


NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................

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

iii


NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
........................................................................................................................

iv


MỤC LỤC
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT.....................................................................14
1.1. GIỚI THIỆU VỀ LẬP TRÌNH ĐA NỀN TẢNG........................................14
1.1.1. Giới thiệu..............................................................................................14
1.1.2. Lập trình đa nền tảng...........................................................................15
1) Giới thiệu sơ lượt về lập trình đa nền tảng..............................................15
2) Đa nền tảng trên thiết bị di động.............................................................15
3) Phân biệt Mobile Web Application và Hybrid Application......................17
1.2. GIỚI THIỆU VỀ ANGULARJS..................................................................18
1.2.1. AngularJS là gì?...................................................................................18
1.2.2. Các tính năng chung.............................................................................19
1.2.3. Các tính năng cốt lõi............................................................................19
1.2.4. Các thành phần chính...........................................................................20
1.2.5. Ưu điểm................................................................................................20
1.2.6. Nhược điểm..........................................................................................21
1.3. TÌM HIỂU VỀ IONIC FRAMEWORK.......................................................21
1.3.1. Giới thiệu Ionic framework..................................................................21
1.3.2. Tính năng..............................................................................................22
1.3.3. Ưu điểm................................................................................................23
1.3.4. Nhược điểm..........................................................................................23
1.4. TÌM HIỂU VỀ CORDOVA FRAMEWORK..............................................24
CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG..................................27
2.1. ĐẶC TẢ YÊU CẦU VÀ CHỨC NĂNG....................................................27
2.1.1. Mô tả dự án..........................................................................................27
2.1.2. Nghiên cứu khả thi...............................................................................27
2.1.3. Đặc tả chức năng..................................................................................27

1) Chức năng Học tập..................................................................................27
2) Chức năng Tra từ điển.............................................................................28
3) Chức năng Quản lý thông tin cá nhân......................................................28
2.2. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG..................................................28
2.2.1. Tác nhân sử dụng hệ thống..................................................................28
2.2.2. Biểu đồ ca sử dụng...............................................................................29
1) Biểu đồ tổng quát.....................................................................................29
2) Biểu đồ mức 0..........................................................................................29
3) Biểu đồ mức 1..........................................................................................30
4) Biểu đồ mức 2..........................................................................................31
2.2.3. Biểu đồ hoạt động................................................................................33
1) Biểu đồ hoạt động tổng quát của hệ thống...............................................33
2) Biểu đồ hạt động – Học tập......................................................................34
3) Biểu đồ hoạt động – Tra từ điển..............................................................35
4) Biểu đồ hoạt động – Quản lý thông tin cá nhân.......................................35
2.2.4. Biểu đồ lớp...........................................................................................36
2.3. THIẾT KẾ DỮ LIỆU....................................................................................36
v


2.3.1. Bảng âm lẻ............................................................................................37
2.3.2. Bảng từ vựng........................................................................................38
2.3.3. Bảng chủ đề..........................................................................................38
2.3.4. Bảng chủ đề con...................................................................................38
2.3.5. Bảng chủ đề của từ...............................................................................39
2.3.6. Bảng từ loại..........................................................................................39
2.3.7. Bảng từ loại của từ vựng......................................................................40
2.3.8. Bảng từ vựng hằng ngày......................................................................40
2.3.9. Bảng lịch sử kiểm tra...........................................................................41
2.3.10. Bảng thông tin cá nhân......................................................................41

2.3.11. Bảng cấp độ........................................................................................41
CHƯƠNG 3: TRIỂN KHAI THỰC NGHIỆM VÀ ĐÁNH GIÁ KẾT QUẢ....43
3.1. MÔI TRƯỜNG TRIỂN KHAI.....................................................................43
3.1.1. Chuẩn bị phần mềm.............................................................................43
3.1.2. Tiến hành cài đặt môi trường...............................................................43
3.2. KẾT QUẢ THỰC HIỆN CÁC CHỨC NĂNG............................................45
3.2.1. Giao diện chính – giao diện chức năng Học tập.................................45
3.2.2. Giao diện chức năng học âm lẻ...........................................................46
1) Giao diện nguyên âm...............................................................................46
2) Giao diện phụ âm.....................................................................................47
3.2.3. Giao diện chức năng học từ vựng........................................................48
1) Giao diện học từ vựng theo ngày.............................................................50
2) Giao diện chủ đề......................................................................................51
3.2.4. Giao diện thẻ card................................................................................51
3.2.5. Chức năng tra từ điển...........................................................................53
3.2.6. Chức năng quản lý thông tin cá nhân..................................................54
3.3. NHẬN XÉT VÀ ĐÁNH GIÁ KẾT QUẢ...................................................55

vi


DANH SÁCH HÌNH ẢNH
HÌNH 1.1. ĐA NỀN TẢNG...................................................................................14
HÌNH 1.2. LẬP TRÌNH ĐA NỀN TẢNG VỚI XAMARIN...............................16
HÌNH 1.3. SO SÁNH HYBIRD APPLICATION VÀ NATIVE.........................17
HÌNH 1.4. CÁC TÍNH NĂNG CỦA ANGULARJS...........................................18
HÌNH 1.4. IONIC FRAMEWORK......................................................................22
HÌNH 1.5. CÁCH HOẠT ĐỘNG CỦA CORDOVA..........................................25
HÌNH 3.1 MẪU DỰ ÁN IONIC...........................................................................44
HÌNH 3.2. GIAO DIỆN CHÍNH – CHỨC NĂNG HỌC TẬP...........................45

HÌNH 3.3. GIAO DIỆN CHỨC NĂNG HỌC ÂM LẺ........................................46
HÌNH 3.4. GIAO DIỆN CHỨC NĂNG HỌC NGUYÊN ÂM............................47
HÌNH 3.5. GIAO DIỆN CHỨC NĂNG HỌC PHỤ ÂM.....................................48
HÌNH 3.6. GIAO DIỆN CHỨC NĂNG HỌC TỪ VỰNG..................................49
HÌNH 3.7. GIAO DIỆN CHỨC NĂNG HỌC TỪ VỰNG HẰNG NGÀY........50
HÌNH 3.8. GIAO DIỆN CHỨC NĂNG CHỦ ĐỀ...............................................51
HÌNH 3.9. GIAO DIỆN MẶT TRƯỚC CỦA FLASHCARD ...........................52
HÌNH 3.10. GIAO DIỆN MẶT SAU CỦA FLASHCARD.................................53
HÌNH 3.11. GIAO DIỆN CHỨC NĂNG TRA TỪ ĐIỂN...................................54
HÌNH 3.12. GIAO DIỆN CHỨC NĂNG QUẢN LÝ THÔNG TIN CÁ NHÂN
.......................................................................................................... 55

vii


DANH SÁCH HÌNH VẼ
HÌNH 2.1. BIỂU ĐỒ CA SỬ DỤNG TỔNG QUÁT...........................................29
HÌNH 2.2. BIỂU ĐỒ CA SỬ DỤNG MỨC 0.......................................................29
HÌNH 2.3. CA SỬ DỤNG MỨC 1 – CHỨC NĂNG HỌC TẬP.........................30
HÌNH 2.4. CA SỬ DỤNG MỨC 1 – CHỨC NĂNG TRA TỪ ĐIỂN.................30
HÌNH 2.5. CA SỬ DỤNG MỨC 1 – CHỨC NĂNG QUẢN LÝ THÔNG TIN
CÁ NHÂN.......................................................................................31
HÌNH 2.6. CA SỬ DỤNG MỨC 2 – HỌC ÂM LẺ.............................................31
HÌNH 2.7. CA SỬ DỤNG MỨC 2 – HỌC TỪ VỰNG.......................................32
HÌNH 2.8. BIỂU ĐỒ HOẠT ĐỘNG TỔNG QUÁT............................................33
HÌNH 2.9. BIỂU ĐỒ HOẠT ĐỘNG – CHỨC NĂNG HỌC TẬP.....................34
HÌNH 2.10. BIỂU ĐỒ HOẠT ĐỘNG – CHỨC TĂNG TRA TỪ ĐIỂN...........35
HÌNH 2.11. BIỂU ĐỒ HOẠT ĐỘNG – CHỨC NĂNG QUẢN LÝ THÔNG
TIN CÁ NHÂN...............................................................................35
HÌNH 2.12. BIỂU ĐỒ LỚP...................................................................................36

HÌNH 2.13. BIỂU ĐỒ THIẾT KẾ DỮ LIỆU......................................................37

viii


DANH SÁCH BẢNG
BẢNG 1. BẢNG ÂM LẺ.......................................................................................37
BẢNG 2. BẢNG TỪ VỰNG.................................................................................38
BẢNG 3. BẢNG CHỦ ĐỀ.....................................................................................38
BẢNG 4. BẢNG CHỦ ĐỀ CON...........................................................................38
BẢNG 5. BẢNG CHỦ ĐỀ CỦA TỪ....................................................................39
BẢNG 6. BẢNG TỪ LOẠI...................................................................................39
BẢNG 7. BẢNG TỪ LOẠI CỦA TỪ VỰNG......................................................40
BẢNG 8. BẢNG TỪ VỰNG HẰNG NGÀY........................................................40
BẢNG 9. BẢNG LỊCH SỬ KIỂM TRA..............................................................41
BẢNG 10. BẢNG THÔNG TIN CÁ NHÂN........................................................41
BẢNG 11. BẢNG CẤP ĐỘ...................................................................................41

ix


DANH SÁCH TỪ VIẾT TẮT

Từ viết tắt

Diễn giải

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

JS

Javascript

API

Application Programming Interface

x


MỞ ĐẦU
1. Tổng quan về đề tài
Tiếng Anh đã là ngôn ngữ được sử dụng rộng rãi và phổ biến trên toàn thế
giới. Gần như các quốc gia, lãnh thổ khác nhau trên thế giới đều phải sử dụng tiếng
Anh để có thể giao tiếp được với nhau. Do đó, ở Việt Nam cũng không ngoại lệ,
tiếng Anh ngày càng quan trọng với mỗi người Việt chúng ta, không gì dễ dàng
hơn cho việc hội nhập, giao lưu, học tập với các nước, các nền văn hóa khác bằng
việc đầu tiên chúng ta phải biết, phải thuần thục tiếng Anh.
Muốn có thể học tốt tiếng Anh, đầu tiên phải có vốn từ vựng dồi dào. Mặc
khác phải có kho từ vựng dễ học, dễ thuộc, dễ nhớ, và tạo điều kiện thuận lợi và
nhanh nhất có thể cho mọi người có thể học được từ vựng tiếng Anh.
Do đó, cần thiết phải có một ứng dụng để giúp mọi người việc này. Với thời
đại công nghệ thông tin hiện nay, điện thoại thông minh hay được gọi là Smart
Phone đã phổ biến, sẽ dễ dàng nhất nếu ứng dụng học từ vựng Tiếng anh này được

phát triển trên một thiết bị mà ai cũng có thể sử dụng. Như vậy sẽ đem lại hiệu quả
cao nhất.
2. Mục đích và ý nghĩa của đề tài
2.1. Mục đích
Xây dựng một ứng dụng cho phép người dùng có thể học từ vựng tiếng Anh
thông qua các thẻ card hay gọi là Flashcard.
Xây dựng kho từ vựng đầy đủ nhất có thể cùng những hình ảnh, âm thanh đi
kèm giúp việc học trở nên hiệu quả.
Thiết kế các Flashcard có giao diện thân thiện, gợi nhớ để mọi người có thể
nhớ từ vựng nhanh và lâu hơn.
Xây dựng ứng dụng có thể chạy đa nền tảng trên các thiết bị di động.

Nguyễn Thành Sự - Lớp 11T3

11


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
2.2. Ý nghĩa
Giúp đỡ những người học từ vựng tiếng Anh một cách dễ dàng và hiệu quả
nhất có thể.
Tổng hợp và lưu trữ từ vựng giúp mọi người có thể tìm kiếm dễ dàng.
Chỉ xây dựng và phát triển một lần, sau đó triển khai ra nhiều nền tảng di
động nhằm tiết kiệm thời gian và tiền bạc.
Học hỏi, tích lũy kinh nghiệm về mảng lập trình đa nền tảng. Nắm bắt cơ hội
phát triển bản thân trong tương lai.
3. Phương pháp thực hiện
Phân tích thu thấp yêu cầu người dùng.
Tìm hiểu học hỏi từ các ứng dụng tương tự.
4. Bố cục của đồ án

Đồ án bao gồm các nội dung sau:
Mở đầu
Chương 1: Cơ sở lý thuyết
−

Giới thiệu về lập trình đa nền tảng

−

Tìm hiểu về AngularJS

−

Tìm hiều về Ionic Framework

−

Tìm hiểu về Cordova Framework

Chương 2: Phân tích và thiết kế
−

Đặc tả yêu cầu

−

Phân tích và thiết kế hệ thống

−

Phân tích dữ liệu

Chương 3: Triển khai thực nghiệm và đánh giá kết quả
Nguyễn Thành Sự - Lớp 11T3

12


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
−

Môi trường triển khai

−

Kết quả thực hiện các chức năng

−

Nhận xét và đánh giá kết quả

Kết luận và hướng phát triển.

Nguyễn Thành Sự - Lớp 11T3

13


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
Chương này giới thiệu về lập trình đang nền tảng, giới thiệu tổng quan về
AngularJS, và hai framework để phát triển ứng dụng Hybrid là Ionic và Cordova.
1.1. GIỚI THIỆU VỀ LẬP TRÌNH ĐA NỀN TẢNG
1.1.1. Giới thiệu
Đa nền tảng (tiếng Anh: cross-platform hay multi-platform) là một thuật ngữ
chỉ các phần mềm máy tính, các ứng dụng điện thoại hay các phương thức điện
toán được thực thi đẩy đủ và vận hành cùng nhau trên nhiều nền tảng máy tính và
điện thoại và được gắn liền với công nghệ điện toán.

Hình 1.1. Đa nền tảng
Phần mềm đa nền tảng có thể được chia thành hai loại:
−

Loại yêu cầu phải thiết kế hoặc biên dịch từng phiên bản cho mỗi nền
tảng nó hỗ trợ.

−

Loại có thể chạy trực tiếp trên bất cứ nền tảng nào mà không cần sự
chuẩn bị thêm đặc biệt nào – chẳng hạn như phần mềm được viết bằng
một ngôn ngữ thông dịch hay được biên dịch trước sang mã bytecode có

Nguyễn Thành Sự - Lớp 11T3

14


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
khả năng di động bằng một trình thông dịch hay gói run-time thường

dùng hoặc thành phần tiêu chuẩn trên mọi nền tảng.
Lấy ví dụ: một ứng dụng máy tính đa nền tảng có thể chạy ngay trên cả
Microsoft Window với kiến trúc x86 hay Linux với kiến trúc x86 và Mac OS X với
cả kiến trúc PowerPC hay x86 trên các hệ thống Macintosh.
1.1.2. Lập trình đa nền tảng
1) Giới thiệu sơ lượt về lập trình đa nền tảng
Là khái niệm dùng để chỉ việc xây dựng và phát triển các ứng dụng có thể
chạy đa nền tảng. Nhằm mục đích để người dùng ở những nền tảng khác nhau có
thể sử dụng ứng dụng như nhau và nhà phát triển sẽ tiết kiệm thời gian cũng như
tiền bạc để đầu tư vào việc phát triển chúng.
Hiện nay, có rất nhiều nền tảng có thể kể đến như:
−

Máy tính: Microsoft Window, Linux, Mac OS X, Ubuntu, MS DOS,…

−

Điện thoại (tiếng Anh: Mobile-platform): iOS, Android, Window Phone,
Symbian OS,…

Với việc thiết bị cầm tay đang ngày càng phổ biến đặc biệt là điện thoại di
động, vì nó có thể sử dụng ở bất kỳ đâu, bất kỳ lúc nào và dễ dàng thuận tiện cho
việc mang theo. Do đó, sẽ có rất rất nhiều người sử dụng và liên tục phát triển. Các
nhà phát triển nền tảng cũng như ứng dụng đang tập trung khai thác vào mảng này.
2) Đa nền tảng trên thiết bị di động
Từ trước tới nay mỗi nền tảng cho thiết bị di động đều có các ngôn ngữ lập
trình cũng như trình biên dịch riêng hay được gọi với cái tên Native App như:
−

Android-Platform: sử dụng công cụ Android Studio hoặc Eclipse, ngôn

ngữ Java.

−

iOS-Platform: sử dụng công cụ Xcode, ngôn ngữ Objective-C hoặc Swift.

−

Window Phone: sử dụng công cụ Visual Studio, ngôn ngữ C# và mã
XAML.

Nguyễn Thành Sự - Lớp 11T3

15


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
Với mỗi nền tảng trên chúng đều có công cụ và ngôn ngữ lập trình gốc
(Native) mà chúng chỉ phục vụ cho việc biên soạn, phát triển, biên dịch và triển
khai ứng dụng cho chính nó.
Nhận thấy, việc phát triển một ứng dụng dành cho tất các nền tảng được nêu
ra ở trên thì chúng ta phải học ít nhất là ba loại ngôn ngữ khác nhau, sử dụng cũng
ít nhất là ba loại công cụ khác nhau.
Vậy, lập trình đa nền tảng đặc biệt cho các thiết bị di động ra đời. Để với một
loại công cụ, một ngôn ngữ vẫn có thể làm mọi thứ với chỉ một lần biên soạn sẽ
biên dịch và triển khai được cả nhiều nền tảng khác nhau.
Hiện nay, có rất nhiều loại công nghệ hỗ trợ việc lập trình đa nền tảng như :
Xamarin, Titaninum, NativeScript, Rem Object, Ionic,… Đặc biệt Xamarin và
Titaninum được sử dụng khá phổ biến.
Trong đó, Xamarin gần như khác biệt với những cái còn lại, thay vì sử dụng

mã HTML, CSS và JS, nó sử dụng C# và mã XAML để phát triển.

Hình 1.2. Lập trình đa nền tảng với Xamarin
Ngoài ra, các công nghệ phát triển ứng dụng đa nền tảng được chia làm hai
loại chính là Mobile Web Application và Hybrid Application.

Nguyễn Thành Sự - Lớp 11T3

16


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
3)

Phân biệt Mobile Web Application và Hybrid Application
Mobile Web Application hay Responsive Web là ứng dụng được lập trình ra

sẽ chạy trên nền tảng web, được nhúng file HTML, CSS, JS vào trong đó hoặc nó
truy cập trực tiếp vào website nhà cung cấp. Điểm mạnh của nó là có thể tạo app
rất nhanh, phù hợp với những ứng dụng có tính marketing cao, không phụ thuộc hệ
điều hành, rất tiết kiệm chi phí (không phải thuê nhân lực cho lập trình từng nền
tảng). Tuy nó nó chỉ chạy trên nền tảng web nhưng nó vẫn giải quyết được vẫn đa
nền tảng vì mọi nền tảng di động đều sử dụng ứng dụng web được. Nhưng bù lại
nó hầu như không có khả năng tương tác với hệ điều hành, với phần cứng của máy,
hiệu năng thấp và cho trải nghiệm người dùng không cao và đặc biệt chỉ hoạt động
khi có internet. Do vậy nó không phù hợp với ứng dụng có tính phức tạp cao, yêu
cầu nghiệp vụ và trải nghiệm người dùng lớn.

Hình 1.3. So sánh Hybird Application và Native
Hybrid Application: hay nó là một đứa con lai của Native app với Mobile

Web Application. Bản chất nó sử dụng giao diện được viết bằng mã HTML, CSS,
JS nhưng lại cho phép gọi được các API của hệ thống để thao tác với hệ điều hành
(đọc ghi file, blutooth, camera, sensor,…). Vì vậy, Hybrid Application vừa tận
dụng điểm mạnh của Mobile Web Application vừa khai thác hết khả năng thao tác

Nguyễn Thành Sự - Lớp 11T3

17


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
trên hệ thống của Native App. Trong tương lai Hybrid hứa hẹn sẽ là sự thay thế
hoàn hảo cho các ứng dụng mobile hiện nay.
Đại diện cho công nghệ Hybrid có thể kể đến PhoneGap, Ionic, Trigger.IO,….
1.2. GIỚI THIỆU VỀ ANGULARJS
1.2.1. AngularJS là gì?
Đầu tiên, AngularJS là một framework có cấu trúc cho các web động, mã
nguồn mở phát triển dựa trên Javascript. Được phát triển lần đầu năm 2009 bởi
Misko Hevery và Adam Abrons, hiện tại được duy trì và phát triển bởi Google.
Tính đến tháng 5/2016, AngularJS đã có phiên bản thứ 2, tuy bản release vẫn chưa
được hoàn thành, song thứ vẫn hoạt động tốt với AngularJS phiên bản 1.5.5.
Căn bản AngularJS cho phép chúng ta sử dụng HTML như là ngôn ngữ mẫu
cho phép mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng một
cách rõ ràng và súc tích, thường được sử dụng để xây dựng project Single Page
Application (SPA – là một trang web hay một ứng dụng web, mà tất cả những thao
tác xử lý của trang web đều diễn ra trên một trang duy nhất).

Hình 1.4. Các tính năng của AngularJS
Nguyễn Thành Sự - Lớp 11T3

18


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
1.2.2. Các tính năng chung
−

AngularJS là một Framework phát triển mạnh mẽ dựa trên JavaScript để
tạo các ứng dụng RICH Internet Application (RIA).

−

AngularJS cung cấp cho lập trình viên những tùy chọn để viết các ứng
dụng client-side trong mô hình MVC (Model View Controller) một cách
rõ ràng.

−

Các ứng dụng được viết bởi AngularJS tương thích với nhiều phiên bản
trình duyệt web. AngularJS tự động xử lý mã JavaScript để phù hợp với
mỗi trình duyệt.

−

AngularJS có mã nguồn mở, miễn phí hoàn toàn, được sử dụng bởi hàng
ngàn lập trình viên trên thế giới. Nó hoạt động dưới giấy phép Apache
License version 2.0.

Nhìn chung, AngularJS là một framework để tạo các ứng dụng lớn, các hiệu
năng cao trong khi giữ cho chúng có thể dễ dàng duy trì.

1.2.3. Các tính năng cốt lõi
−

Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và
view.

−

Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu
nối giữa controller và view.

−

Controller: Đây là những tính năng của AngularJS mà được giới hạn tới
một scope cụ thể.

−

Service: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví
dụ $http để tạo XMLHttpRequests. Nó là các singleton object mà được
khởi tạo duy nhất một lần trong ứng dụng.

−

Filter: Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng
và trả về các mảng mới.

−

Directive: là các marker trong các phần tử DOM (như các phần tử, thuộc

tính, CSS và nhiều hơn thế). Nó có thể dùng để tạo các thẻ HTML riêng
phục vụ những mục đích riêng. AngularJS có những directive có sẵn như
ngBind, ngModel…

Nguyễn Thành Sự - Lớp 11T3

19


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
−

Template: Là các rendered view với các thông tin từ controller và model.
Nó có thể được sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc
nhiều view với một trang sử dụng "partials".

−

Routing: Là khái niệm của sự chuyển dịch qua lại các view.

−

Model View Whatever: MVC là một mô hình thiết kế để phân chia các
ứng dụng thành nhiều phần khác nhau (gọi là Model, View và
Controller), một phần sử dụng với một nhiệm vụ nhất định. AngularJS
không triển khai MVC theo cách truyền thống, mà gắn liền hơn
với Model-View-ViewModel. Nhóm phát triển AngularJS đã đặt tên vui
cho mô hình này là Model View Whatever.

−

Deep Linking: Cho phép mã hóa trạng thái các ứng dụng trên địa chỉ
URL để nó có thể được bookmark. Các ứng dụng có thể được phục hồi lại
từ các địa chỉ URL với cùng một trạng thái.

−

Dependency Injection: AngularJS có sẵn một hệ thống con dependency
injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ
hiểu và kiểm tra.

1.2.4. Các thành phần chính
AngularJS framework có thể được chia thành ba phần chính sau:
−

ng-app: directive này định nghĩa và liên kết một ứng dụng AngularJS tới
HTML.

−

ng-model: directive này gắn kết giá trị của dữ liệu ứng dụng AngularJS
đến các điều khiển đầu vào HTML.

−

ng-bind: directive này gắn kết dữ liệu ứng dụng AngularJS đến các thẻ
HTML.

1.2.5. Ưu điểm
−

AngularJS cung cấp khả năng tạo ra các Single Page Application một
cách rất rõ ràng và dễ dàng để duy trì.

−

AngularJS cung cấp khả năng Data binding tới HTML do đó giúp người
dùng cảm giác linh hoạt, thân thiện.

−

AngularJS code dễ dàng khi unit test.

Nguyễn Thành Sự - Lớp 11T3

20


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
−

AngularJS sử dụng dependency injection.

−

AngularJS cung cấp khả năng tái sử dụng các component (thành phần).

−

Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng

hơn.

−

Với AngularJS, view là thành phần trong trang HTML thuần, trong
khi controller được viết bởi JavaScript với quá trình xử lý nghiệp vụ.

Và trên tất cả, ứng dụng AngularJS có thể chạy trên hết các trình duyệt web,
trên các nền tảng Android và iOS.
1.2.6. Nhược điểm
Mặc dù AngularJS có thể kể đến rất nhiều các ưu điểm, nhưng đến thời điểm
này, nó vẫn có một số điểm yếu sau:
−

Không an toàn : Là một Javascript framework, ứng dụng được viết bởi
AngularJS không an toàn. Phải có các tính năng bảo mật và xác thực phía
server sẽ giúp ứng dụng trở nên an toàn hơn.

−

Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì họ chỉ nhìn
được trang cơ bản, không thấy gì thêm.

1.3. TÌM HIỂU VỀ IONIC FRAMEWORK
1.3.1. Giới thiệu Ionic framework
Ionic là một Hybrid Framework được sử dụng để phát triển các ứng dụng di
động dựa trên nền tảng công nghệ web HTML (sự kết hợp giữa Angular và
Cordova), được tạo bởi Max Lynch, Ben Sperry, và Adam Bradley vào năm 2013.
Đây là một framework rất mạnh để viết các ứng dụng hybrid.

Nguyễn Thành Sự - Lớp 11T3

21


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova

Hình 1.4. Ionic framework
Có thể coi Ionic như là một bộ khung front-end giúp kiểm soát hình ảnh và
trải nghiệm trên ứng dụng. Giống như “Bootstrap for Native”, nhưng với sự hỗ trợ
của một lượng lớn các thành phần di động, hiệu ứng chuyển động mượt mà và thiết
kế đẹp
Không như các framework khác, Ionic mang đến cho chúng ta những thành
phần giao diện và cách bố trí mang phong cách rất giống với như phong cách thiết
kế mặc định trên thiết bị di động.
Vì Ionic là một framework HTML5 nên nó cần bộ đóng gói (wrapper) như
Cordova hay PhoneGap để có thể chạy được như một ứng dụng di động. Cordova
là bộ đóng gói mặc định trong Ionic framework.
1.3.2. Tính năng
Ionic sử dụng AngularJS để cung cấp các cấu trúc ứng dụng, trong khi bản
thân Ionic tập trung chính vào giao diện người dùng. Nói cách khác, chúng ta thấy
được sự phối hợp ăn ý giữa sức mạnh của AngularJS và vẻ đẹp của Ionic UI.
Ionic cung cấp một tập các Angular directives (nghĩa là các phần tử HTML
tùy biến) để làm các thành phần của nó, tạo ra sự dễ dàng để sử dụng các tiện ích
gọn để viết mã HTML. Ngoài các directives, Ionic còn sử dụng và thêm vào các

Nguyễn Thành Sự - Lớp 11T3

22

Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
thành phần khác như: Angular touch recognizers, view animation logic, HTML
sanitation, và asynchronous communication.
Việc xây dựng ứng dụng dựa trên AngularJS đòi hỏi mã nguồn phải có khả
năng mở rộng cao để bổ sung các tính năng mới. Tuy nhiên với Ionic, người ta có
thể tái sử dụng các chức năng trong ứng dụng trên các nền tảng khác nhau đồng
thời vẫn có thể tùy chỉnh giao diện người dùng cho mỗi nền tảng riêng biệt. Các
thành phần trong Ionic như danh sách, slide,.. chính là các directive (các thuộc tính
của thẻ HTML dùng trong Angular) của AngularJS. Đó là lí do khiến cho Ionic và
AngularJS kết hợp rất tốt với nhau.
Mặc dù, Ionic có thành phần giao diện sử dụng Angular, nhưng developers
vẫn có thể sử dụng và hỗ trợ các framework khác như Knockout hay EmberJS
1.3.3. Ưu điểm
−

Dễ học, thời gian phát triển nhanh, có thể sử dụng các kỹ năng từ lập
trình web

−

Đa nền tảng

−

Khả năng truy cập đến các tính năng của thiết bị và hệ điều hành như
bluetooth, camera,..

−

Dễ dàng thiết kế giao diện cho các thiết bị có kích cỡ khác nhau

−

Việc sử dụng AngularJS làm cốt lõi giúp phần xử lý UI linh động hơn so
với Javasript hay thư viện Jquery.

−

Việc sử dụng AngularJS làm cốt lõi cũng mang lại lợi thế lớn so với các
framework cho ứng dụng hybrid khác.

−

Ionic cung cấp đầy đủ các thành phần trong giao diện người dùng như
Pull-to-Refresh, Infinite-loader, tabs, ..

1.3.4. Nhược điểm
−

Vẫn còn trong giai đoạn phát triển

−

Hiệu năng vẫn chưa cao và ổn định

−

Cộng đồng phát triển ứng dụng vẫn còn chưa nhiều

Nguyễn Thành Sự - Lớp 11T3

23


Xây dựng ứng dụng học từ vựng tiếng Anh đa nền tảng sử dung Ionic và Cordova
1.4. TÌM HIỂU VỀ CORDOVA FRAMEWORK
Apache Cordova là một bộ khung để xây dựng ứng dụng di động sử dụng
HTML, CSS và Javascript. Apache Cordova bao gồm một tập hợp các API thiết bị
cho phép người lập trình di động truy cập, sử dụng các chức năng native của thiết
bị như là camera hay cảm biến gia tốc bằng Javascript. Kết hợp với một bộ khung
phát triển giao diện như jQuery Mobile or Dojo Mobile hoặc Ionic, cho phép ứng
dụng di động có thể được phát triển chỉ dựa trên HTML, CSS và Javascript.
Khi sử dụng Cordova API, một ứng dụng có thể được xây dựng mà không
phải sử dụng bất kỳ một đoạn mã native code nào. Thay vào đó, công nghệ web sẽ
được sử dụng, và chúng sẽ được tổ chức trên chính ứng dụng không cần thông qua
một server nào.
Và bởi vì những API Javascript này là thống nhất trên tất cả các nền tảng
thiết bị và được xây dựng trên chuẩn web nên những ứng dụng được viết trên nền
tảng này có thể được sử dụng trên các nền tảng khác mà có thể không cần có bất
cứ sự thay đổi nào.
Cordova cung cấp một tập hợp các thư viện Javascript đã được chuẩn hóa để
có thể sử dụng. Cordova hiện có thể sử dụng cho các nền tảng như iOS, Android,
Blackberry, Windows Phone, Palm WebOS, Bada và Symbian.

Nguyễn Thành Sự - Lớp 11T3

24