NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA, IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG DỤNG MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG PHẦN MỀM BẢO HÀNH THIẾT BỊ TIN HỌC

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGHỆ THÔNG TIN

----------

TRẦN QUỐC TRƯỞNG

NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA,
IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG DỤNG
MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG PHẦN MỀM

BẢO HÀNH THIẾT BỊ TIN HỌC

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 04 năm 2017

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGỆ THÔNG TIN

----------

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC
Tên đề tài:

NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA,
IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG
DỤNG MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG

PHẦN MỀM BẢO HÀNH THIẾT BỊ TIN HỌC

Sinh viên thực hiện
HỌ TÊN: TRẦN QUỐC TRƯỞNG

MSSV: 2113011035
CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

KHÓA: 2013 – 2017
Cán bộ hướng dẫn

ThS. TRẦN THỊ DIỆU HIỀN

Quảng Nam, tháng 4 năm 2017

MỤC LỤC

Phần 1. PHẦN MỞ ĐẦU ................................................................................... 1
1. Lý do chọn đề tài .......................................................................................... 1
2. Mục tiêu của đề tài........................................................................................ 1
3. Đối tượng và phạm vi nghiên cứu ................................................................ 1
4. Phương pháp nghiên cứu .............................................................................. 2
5. Ý nghĩa khoa học và thực tiễn của đề tài...................................................... 2
6. Bố cục của đề tài ........................................................................................... 2

Phần 2. NỘI DUNG NGHIÊN CỨU ................................................................ 3
Chương 1: TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG................................... 3
1.1. Lập trình di động và lịch sử phát triển.................................................... 3
1.2. Các loại hình phát triển và các tính năng................................................ 4
Chương 2: IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA

VÀ CÁC VẤN ĐỀ LIÊN QUAN..................................................................... 7
2.1. Angular JS............................................................................................... 7
2.2. Apache Cordova...................................................................................... 9
2.3. Ionic Framework ................................................................................... 10
2.4. Sử dụng Angular JS, Apache Cordova và Ionic Framework trong việc
xây dựng ứng dụng. ..................................................................................... 14
2.5. Các vấn đề liên quan ............................................................................. 15
Chương 3: ỨNG DỤNG BẢO HÀNH THIẾT BỊ TIN HỌC ........................ 20
3.1. Giới thiệu phần mềm bảo hành thiết bị tin học..................................... 20
3.2. Phân tích và thiết kế ứng dụng.............................................................. 20
3.3. Chương trình demo phần mềm bảo hành thiết bị tin học ..................... 33

Phần 3 . KẾT LUẬN VÀ KIẾN NGHỊ .......................................................... 40
I. Kết luận........................................................................................................ 40
II. Kiến nghị .................................................................................................... 40

Phân 4. TÀI LIỆU THAM KHẢO ................................................................. 41

DANH MỤC HÌNH ẢNH VÀ BẢNG
Danh mục hình ảnh

Hình 3.1. Biểu đồ UC tổng quát…………………….………….…………..…………27
Hình 3.2. Biểu đồ tuần tự UC tiếp nhận thiết bị………………..…………..…………28
Hình 3.3. Biểu đồ tuần tự UC sửa chữa thiết bị………………..…………..………....28
Hình 3.4. Biểu đồ tuần tự UC quản lý phiếu bảo hành……….………..……………..29
Hình 3.5. Biểu đồ tuần tự UC quản lý nhân viên………..……….………....….…..…29
Hình 3.6. Biểu đồ tuần tự UC quản lý thiết bị…………….……………..……….......30
Hình 3.7. Biểu đồ tuần tự UC quản lý khách hàng……….………………..……...….30
Hình 3.8. Biểu đồ tuần tự UC quản lý nhà cung cấp……….……………..….……….31
Hình 3.9. Biểu đồ lớp…………………………….………………………..…….........31

Hình 3.10. Biểu đồ trạng thái phiếu sửa chữa………...….………………..……....….32
Hình 3.11. Biểu đồ trạng thái phiếu bảo hành……………………………...….…...…32
Hình 3.12. Giao diện đăng nhập hệ thống………………………………..….……......33
Hình 3.13. Giao diện trang chủ ứng dụng………………………………..….………..34
Hình 3.14. Hệ thống menu nhanh của ứng dụng………………………..…….……....35
Hình 3.15. Giao diện kiểm tra thơng tin bảo hành……………………..……….…….36
Hình 3.16. Giao diện tạo phiếu bảo hành………………………………..…….……...37
Hình 3.17. Giao diện quản lý khách hàng……………………………..……….……..38
Hình 3.18. Giao diện nhật ký sửa chữa………………………………..……….……..39

Danh mục bảng

Bảng 3.1. Bảng chức năng tiếp nhận thiết bị………………………….………..…..…22
Bảng 3.2. Bảng chức năng sửa chữa thiết bị…………………………………...….….22
Bảng 3.3. Bảng chức năng quản lý…………………………………….………..….…22
Bảng 3.4. Bảng chức năng thống kê………………………………….…………..…...23
Bảng 3.5. Bảng danh sách các UC………………………………………..….……….23

DANH MỤC TỪ VIẾT TẮT

STT Từ viết tắt Diễn giải

01 JS JavaScript

02 Html HyperText Markup Langue

03 Css Cascading Style Sheets

04 API Application Programming Interface

05 MVC Model – View - Controller

06 DOM Document Object Model

07 URL Uniform Resource Locator

08 MVVM Model – View – ViewModel

09 UI User Interface

10 HTTP Hypertext Transfer Protocol

11 UC User Case

LỜI CẢM ƠN
Công nghệ thông tin đang là một ngành công nghệ phát triển hàng đầu trên thế giới
hiện nay. Sản phẩm từ ngành này rất đa dạng và phong phú. Ứng dụng di động là một phần
trong đó. Hằng năm, có hàng triệu ứng dụng di động ra đời, đáp ứng đầy đủ mọi yêu cầu của
con người. Tuy nhiên, để viết một ứng dụng di động không phải là chuyện đơn giản, vì vậy,
em xin chọn đề tài “Nghiên cứu về Angular JS, Apache Cordova, Ionic Framework
trong việc phát triển ứng dụng mobile đa nền tảng và ứng dụng xây dựng phần mềm
bảo hành thiết bị tin học trên Mobile”. Em hy vọng đề tài này sẽ đem lại nhiều hữu ích
cho bản thân em cũng như những ai quan tâm
Em xin gửi lời cảm ơn đến giáo viên ThS. Trần Thị Diệu Hiền đã hướng dẫn và chỉ
bảo trong quá trình em tìm hiểu và thực hiện đề tài này. Tuy nhiên, do hạn chế về thời gian,
cũng như chưa có kinh nghiệm và kiến thức thực tế, đề tài sẽ khơng tránh được những sai
sót, em mong các thầy và các cơ đóng góp ý kiến đế đề tài được hoàn thiện hơn.
Em xin chân thành cảm ơn!

Quảng Nam, 05 tháng 05 năm 2017

Tác giả

Trần Quốc Trưởng

Phần 1. PHẦN MỞ ĐẦU

1. Lý do chọn đề tài
Cùng với sự phát triển của thị trường điện thoại di động trên thế giới là sự phát triển mạnh

mẽ của ngành lập trình phần mềm ứng dụng cho các thiết bị di động. Phần mềm, ứng dụng
hay game trên các thiết bị điện thoại di động là rất đa dạng và phong phú trên các hệ điều
hành di động. Tuy nhiên, để xây dựng và phát triển được một phần mềm hay một ứng dụng
trên điện thoại không phải là một chuyện đơn giản. Các lập trình viên phải lựa chọn một
cách cẩn thận hướng phát triển cho ứng dụng của mình.

Hiện nay, việc phát triển một ứng dụng di động được chia làm 3 loại chính: Native app,
Mobile web và Hybrid app. Native app và Mobile web đều có những điểm mạnh và điểm
yếu riêng. Tuy nhiên, Hybrid app lại là sự kết hợp của Native app và Mobile web. Vì vây,
Hybrid app vừa tận dụng được sức mạnh của Mobile web vừa có khả năng thao tác hệ thống
của Native app. Trong tương lai công nghệ Hybrid app hứa hẹn sẽ là sự thay thế hoàn hảo
cho các ứng dụng mobile hiện nay.

Ionic Framework là một Hybrid Framework dựa trên sự kết hợp của Angular và Cordova.
Framework mạnh mẽ nhất để viết các ứng dụng Hybrid chính là Ionic Framework.

Đó là lý do tôi chọn đề tài này.

2. Mục tiêu của đề tài
Tìm hiểu và phân tích được những nội dung lý thuyết của Ionic Framework, Angular JS

và Apache Cordova, cách áp dụng chúng vào việc xây dựng ứng dụng mobile đa nền tảng.
Đem lại cho chính bản thân khả năng tự xây dựng ứng một ứng dụng mobile đa nền tảng

hoàn chỉnh cũng như có một nền tảng kiến thức vững chắc về IonicFramework, Angular JS
và Apache Cordova.

Xây dựng phần mềm bảo hành thiết bị tin học trên mobile để áp dụng vào các công ty
chuyên kinh doanh về các thiết bị tin học.

3. Đối tượng và phạm vi nghiên cứu
Nghiên cứu về Ionic Framework, AngularJS, Apache Cordova và các vấn đề liên quan.
Xây dựng phần mềm bảo hành thiết bị tin học trên mobile.

1

4. Phương pháp nghiên cứu
Nghiên cứu lý thuyết.
Áp dụng để xây dựng ứng dụng thực tế.

5. Ý nghĩa khoa học và thực tiễn của đề tài
Xây dựng được một tài liệu tương đối hoàn chỉnh về Ionic Framework, Angular JS,

Apache Cordova và các vấn đề liên quan để mọi người có thể tham khảo và học tập.
Xây dựng ứng dụng bảo hành thiết bị tin học trên mobile ứng dụng thực tiễn.

6. Bố cục của đề tài
Đề tài này sẽ gồm 3 chương:
- Chương 1: Tổng quan về lập trình di động
- Chương 2: Ionic framework, Angular Js, Apache Cordova và các vấn đề liên quan
- Chương 3: Ứng dụng bảo hành thiết bị tin học trên mobile

2

Phần 2. NỘI DUNG NGHIÊN CỨU

Chương 1: TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG

1.1. Lập trình di động và lịch sử phát triển
Lập trình di động có lẻ là một từ không hề xa lạ với tất cả chúng ta. Trong khoảng thời

gian gần đây, lập trình di động đang phát triển rất mạnh mẽ, hàng ngàn, hàng triệu ứng dụng
của điện thoại thông minh được ra đời mỗi năm.

Trên thị trường ứng dụng di động hiện nay, 3 hệ điều hành chiếm thị phần cao nhất là
Android, iOS và Windows Phone, tiếp sau đó là một số hệ điều hành khác như
BlackBerry…

- Android
Android là hệ điều hành mã nguồn mở dựa trên nền tảng Linux dành cho thiết bị di

động như điện thoại thơng minh và máy tính bảng. Android được phát triển bởi Open
Handset Alliance, quản lý bởi Google và một số công ty khác.

Android luôn chiếm hơn 70% thị phần của mảng di động. Đa số ứng dụng Android
được viết bằng ngôn ngữ Java, do đó các bạn lập trình viên Java có thể dễ dàng chuyển
hướng qua mảng này.

Giao diện người dùng của Android dựa trên nguyên tắc tác động trực tiếp, sử dụng
cảm ứng chạm tương tự như những động tác ngoài đời thực như vuốt, chạm, kéo dãn và
thu lại để xử lý các đối tượng trên màn hình.

Các thiết bị Android sau khi khởi động sẽ hiển thị màn hình chính, điểm khởi đầu với
các thơng tin chính trên thiết bị, tương tự như khái niệm desktop trên máy tính để bàn.
Màn hính chính Android thường gồm nhiều biểu tượng (icon) và tiện ích (widget). Giao
diện màn hình chính của Android có thể tùy chỉnh ở mức cao, cho phép người dùng tự do
sắp đặt hình dáng cũng như hành vi của thiết bị theo sở thích.
- iOS

iOS là một hệ điều hành điện thoại di động được phát triển bởi Apple và phân phối
độc quyền cho phần cứng của Apple. Ban đầu, iOS được công bố năm 2007 cho IPhone,
sau đó được mở rộng để hỗ trợ các thiết bị khác của Apple như iPod Touch (tháng 9 năm

3

2007), iPad (tháng 1 năm 2010), iPad Mini (tháng 11 năm 2012) và thế hệ thứ hai của
Apple tivi trở đi (tháng 9 năm 2010).

Giao diện người dùng của iOS được dựa trên khái niệm về thao tác trực tiếp bằng tay,
sử dụng các cử chỉ đa cảm ứng. Các yếu tố giao diện điều khiển bao gồm các thanh trượt,
công tắc và các nút. Tương tác với các hệ điều hành bao gồm các cử chỉ như chạm, trượt,
vuốt.

Từ ngày ra đời và phát triển hệ điều hành iOS đã trở thành một xu hướng trên toàn cầu
với sự phát triển thịnh hành của dòng điện thoại smartphone.
- Windows Phone

Windows Phone là hệ điều hành dành cho điện thoại thông minh của Microsoft, thay
thế cho nền tảng Windows Mobile. Dù vậy hiện tại hai hệ điều hành này vẫn chưa tương
thích được với các phiên bản cũ do thời gian phát triển quá nhanh.

Windows bắt đầu được ra mắt chính thức vào tháng 2/2010 ở triển lãm Mobile World
Congress diễn ra ở Barcelona, Tây Ban Nha, đến tháng 10/2010, 10 thiết bị Windows
Phone đầu tiên đến từ HTC, Dell, Samsung, LG đã được ra mắt và bán ra rộng rãi trên
thế giới một thời gian sau đó.

Windows Phone có giao diện người dùng được Microsoft gọi với cái tên "Metro".
Màn hình chính, có tên là "Start Screen", được cấu tạo bỏi những "Lát Gạch" (Live
Tiles). Những viên Gạch này link đến những ứng dụng, tính năng, chức năng và những
thứ khác (như tên danh bạ, bookmarks, tập tin nhạc...). Người dùng có thể thêm, sắp xếp
hoặc xóa Gạch, tuy nhiên nó khơng đồng nghĩa việc gỡ ứng dụng ra khỏi thiết bị.
Trên đây là 3 hệ điều hành điện thoại di động phổ biến nhất trên thế giới. Với những hệ
điều hành trên, việc xây dựng một ứng dụng di động đều phụ thuộc vào ý định của người lập
trình. Với mỗi hệ điều hành, các ứng dụng di động đều rất phong phú và đa dạng.

1.2. Các loại hình phát triển và các tính năng.
Hiện nay, phát triển một ứng dụng di động được chia làm ba loại chính: Native App,

Mobile Web App và Hybrid App. Mỗi loại sẽ có một đặc điểm riêng của mình.
- Native App

4

Đây là phương tiện mạnh mẽ và phổ biến nhất được các lập trình viên sử dụng để
phát triển các ứng dụng cho thiết bị di động. Hiểu 1 cách khái quát thì đây là cách thức
phát triển dựa vào các cơng cụ lập trình gốc được các hãng phân phối. Ví dụ như với
Android chúng ta có Eclipse + Android SDK hoặc sử dụng Android Studio của chính
Google, với iOS chúng ta có xCode đặc trưng của MacOS, với Window Phone thì chúng
ta có Visual Studio và một số IDE của hãng thứ 3 khác… Điểm mạnh của native app là
lập trình viên có thể sử dụng được hết sức mạnh của hệ điều hành, và ứng dụng chạy
mượt mà mà hơn.

Khơng những vậy hiện này đã có một số cơng ty đã phát triển công nghệ sử dụng một
ngôn ngữ chung (C#, Javascript…) để viết các ứng dụng native cho nhiều nền tảng
(Android, iOS, Window phone). Ví dụ như Xamarin, Titaninum, NativeScript, Rem
Object… là các công nghệ đa nền tảng (cross-platform), bạn chỉ cần biết một ngơn ngữ
thì có thể viết được các ứng dụng native.

Tuy vậy điểm yếu của native app là cần nhiều lập trình viên để tạo ra các ứng dụng
cho từng nền tảng, dù hiện này các công nghệ cross-platform mới như Xamarin,
Titaninum… đã giúp các lập trình viên giảm bớt khối lượng code phải viết, nhưng vẫn
phải cần các lập trình viên chuyên cho từng nền tảng. Vì thế ứng dụng ra thị trường
thường chậm hơn và chất lượng giữa các ứng dụng trên từng nền tảng có thể khơng đồng
đều.
- Mobile Web App

Bản chất ứng dụng chỉ là webview đượ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, hồn tồn được phát triển bởi các lập trình
viên web.

Điểm mạnh của nó là có thể tạo ứng dụng rất nhanh, phù hợp với những ứng dụng có
tính marketing cao, khơng phụ thuộc vào hệ điều hành, rất tiết kiệm chi phí (khơng cần
phải th thêm các lập trình viên di động cho từng nền tảng). 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, hiệu năng thấp, trải nghiệm người dùng
khơng cao và chỉ hoạt động khi có internet. Mobile webapp hồn tồn khơng phù hợp với
nhưng ứng dụng có tính phức tạp cao, u cầu trải nghiệm người dùng lớn.
- Hybrid App

5

Đây là 1 “con lai” của Native và Webmobile. Bản chất của Hybrid là giao diện được

viết bằng ngơn ngữ HTML, CSS, Javscript nhưng nó 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, bluetooth, camera, sensor). Vì vậy
hybrid vừa tận dụng được sức mạnh của Mobile webapp vừa khả năng thao tác hệ thống
của Native app. Trong tương lai công nghệ Hybrid hứa hẹn sẽ là sự thay thế hồn hảo có
các ứng dụng mobile hiện nay. Đại diện cho cơng nghệ Hybrid này có thể kể đến
PhoneGap, Ionic, Trigger.IO…

6

Chương 2: IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA VÀ
CÁC VẤN ĐỀ LIÊN QUAN

2.1. Angular JS
2.1.1. Angular Js là gì?
AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško Hevery một
nhân viên của Google. Hevery bắt đầu nghiên cứu và phát triển dự án vào năm 2009 và
phiên bản 1.0 được cho ra mắt vào năm 2012. Do sự hữu ích của dự án này nên Google
quyết định là cơng ty chính thức đứng đằng sau hỗ trợ sự phát triển của Angular JS.

Angular JS là một khung làm việc được viết bằng Javascript (hay còn được gọi là
Javascript Framework). Angular JS khơng chỉ đơn giản là một thư viện mà nó còn là
một framework. Khác với các thư viện Javascript như jQuery, Angular JS đưa ra hướng
dẫn cụ thể hơn cách cấu trúc mã lệnh HTML và Javascript.

2.1.2. Các đặc tính của Angular Js
Angular Js bao gồm các đặc tính cơ bản sau:
 Angular JS là một Framework phát triển dựa trên Javascript để tạo các ứng
dụng web phong phú.
 Angular JS thường dùng để phát triển frontend (giao diện khách hàng) thông
qua các API để gọi dữ liệu, sử dụng mơ hình MVC rất mạnh mẽ.

 Mã nguồn Angular JS tự động thích ứng với các trình duyệt khác nhau nên bạn
không cần phải lo vấn đề tương thích trình duyệt.
 Là mã nguồn mở, hồn tồn miễn phí và được phát triển bởi hàng ngàn các lập
trình viên trên thế giới.
Chung quy lại có thể hiểu khi làm việc với Angular JS giống như là đang làm việc với

Ajax, sử dụng cơ chế Bing Data, hoạt động theo mơ hình MVC và sử dụng Service để
tương tác với dữ liệu từ server.
2.1.3. Các thành phần chính của Angular Js

Angular JS được chia làm ba thành phần chính sau đây:

7

 Ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới HTML.
 Ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular.
 Ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags.
2.1.4. Các tính năng của Angular Js
Sau đây là các tính năng cốt lõi quan trọng trong Angular JS
 Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model và view.
 Scope: (phạm vi) Đây là những đối tượng kết nối giữa Controller và View.
 Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển

Scope.
 Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây dựng từ

các web service (PHP, ASP) để thao tác với DB.
 Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới.
 Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ

HTML tùy chỉnh.
 Templates: hiển thị thông tin từ controller, đây là một thành phần của views.
 Routing: chuyển đổi giữa các action trong controller.
 MVC: Mơ hình chia thành phần riêng biệt thành Model, View…
 Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng

trong các URL để nó có thể đánh dấu được với cơng cụ tìm kiếm.
 Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng

hơn để phát triển, hiểu và thử nghiệm dễ dàng.
2.1.5. Ưu và nhược điểm của Angular Js

Ưu điểm:
 Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch.
 Angular sử dụng data bind giống .NET với tính năng liên kết với HTML nên
giúp người dùng cảm thấy dễ chịu.
 Angular đang ở giai đoạn thử nghiệm.
 Angular có thể chạy trên hầu hết các trình duyệt điện thoại thơng minh.

Nhược điểm:

8

 Khơng oan tồn: Được phát triển từ javascript nên nó khơng oan tồn, phía
máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru.

 Phụ thuộc: Nếu người dùng vơ hiệu hóa javascript thì Angular cũng sẽ bị vô
hiệu hóa.

2.2. Apache Cordova

2.2.1. Apache Cordava là gì ?
Apache Cordova (trước kia được gọi là PhoneGap) là một framework phát triển ứng
dụng di động nổi tiếng được tạo ra bởi Nitobi. Adobe Systems đã mua Nitobi vào năm
2011, đổi tên nó thành PhoneGap, và sau đó đã phát hành một phiên bản mã nguồn mở
được gọi là Apache Cordova.

Cordova là một nền tảng để xây dựng những ứng dụng di động (hybrid mobile
applications) sử dụng HTML, CSS và Javascript. Những ứng dụng này có thể chạy trên
nhiều nền tảng khác nhau như Android, iOS, Windows Phone… dựa trên các API để giao
tiếp với thiết bị.

2.2.2. Các tính năng của Cordova
Các tính năng chính của Cordova gồm có ba loại sau :
 Command Line Interface (Cordova CLI): đây là một công cụ dùng để khởi tạo
một dự án, xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là
thêm nhiều plugin có ích để giúp việc phát triển dễ dàng hơn.
 Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi
ứng dụng di động cần đến.
 Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết
bị di động như cảm biến, camera, GPS…

2.2.3. Ưu và nhược điểm của Cordova
- Các ưu điểm

9

 Cordova đưa ra nền tảng để xây dựng các hybrid app, nên chúng ta có thể phát
triển các ứng dụng chạy trên nhiều nền tảng khác nhau như IOS, Android,
Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu và tizien.

 Sử dụng cordova sẽ nhanh hơn rất nhiều so với phát triển các ứng dụng thuần
android, hay iOS.

 Chỉ cần sử dụng Javascript khi làm việc với Cordova nên ta không cần thiết
phải biết từng ngơn ngữ lập trình cho từng loại hệ điều hành.

- Các nhược điểm

 Hiệu suất của hybrid app thì sẽ chậm hơn các native app, nên chúng ta không
dùng Cordova để xây dựng các ứng dụng lớn, yêu cầu nhiều dữ liệu và chức
năng.

 Các plugin có thể khơng tương thích với một số thiết bị và nền tảng. Một số
API cũng chưa được hỗ trợ để giao tiếp với thiết bị.

2.3. Ionic Framework
2.3.1. Ionic Framework là gì?
Ionic là một 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 HTML5 để tạo ra các ứng dụng lai hóa (hybrid apps) chạy trên các
thiết bị di động khác nhau. Ứng dụng lai hóa ở đây được hiểu cơ bản là các ứng dụng
chạy trên nền các trình duyệt được nhúng vào trong một ứng dụng được cài đặt và có thể
giao tiếp, truy cập, điều khiển sử dụng các thiết bị phần cứng và hệ điều hành mobile.

Về phía người dùng thì khơng thể phân biệt đâu là ứng dụng dạng lai hóa hay ứng dụng
thuần (native apps). Và các ứng dụng dạng lai hóa có nhiều lợi ích hơn các ứng dụng bản
địa thuần túy, đặc biệt là có sự hỗ trợ của bên thứ 3 về nền tảng hỗ trợ, tốc độ phát triển
và các thư viện mã nguồn.

Hãy tưởng tượng Ionic như là một khung phát triển giao diện người dùng để xử lý tất
cả các tương tác giao diện người dùng làm cho ứng dụng trở nên thuyết phục và dễ dàng

10

sử dụng. Kiểu như “Bootstrap for Native”, tức là như các ứng dụng Native nhưng có sự
hỗ trợ bởi một loạt các thành phần giao diện động và thiết kế đẹp.

Không giống như Responsive framework, Ionic rất gần với dạng native, nó có các
thành phần và bố cục giao diện hoàn toàn giống như khi phát triển với một native SDK
trên iOS hoặc Android. Ionic cũng giúp cho việc phát triển một cách dễ dàng nhưng mạnh
mẽ để xây dựng các ứng dụng di động mà làm mờ đi sự tồn tại của công nghệ HTML5.

Bản chất Ionic là một khung phát triển HTML5, nó cần một vỏ bọc native như
Cordova hay PhoneGap để có thể khởi động như một ứng dụng native. Ionic được hỗ trợ
mạnh mẽ bởi Cordova. Việc cài đặt và khởi tạo một dự án Ionic rất dễ dàng thông qua
giao diện dịng lệnh dựa trên Node.js

2.3.2. Tính năng của Ionic Framework

- Cordova
- Mơ hình phát triển ứng dụng MV Pattern
- Angular JS được sử dụng trong Ionic là một MVC framework, nhưng theo thời gian

thì nó trở nên thân thuộc hơn với khái niệm MVVM trong đó đối tượng $scope hoạt
động như một ViewModel, sử dụng và thao tác trong các Controller.
- Các lập trình viên có thể linh hoạt sử dụng MVC hoặc là MVVM theo ý thích của
họ, miễn là đạt được mục tiêu: Việc tách phần trình bày giao diện khỏi tầng nghiệp
vụ logic thúc đẩy hiệu suất phát triển thiết bị và bảo trì.
- Thao tác với DOM
- Về khả năng tương tác với các thành phần DOM của webView. Angular nhúng
jqLite, là một phần nhỏ gọn của thư viện jQuery cho phép thao tác DOM trong các

trình duyệt theo cách tương thích, và khơng phụ thuộc vào trình duyệt.
- Giao diện người dùng UI

11

Ionic thể hiện được tiềm năng của nó. là sự đơn giản. Giống như phong cách của
Google, nó dựa trên sự tồn tại của HTML5 và CSS3 để cung cấp những trải
nghiệm nhanh chóng. Chính xác là tốc độ có trong sự đơn giản của nó – khơng có
bóng đổ hay góc trịn, chỉ đơn giản là phẳng – Như vậy, Ionic khơng hứa hẹn có
được giao diện người dùng bóng bẩy, nhưng nó cung cấp giao diện một cách nhanh
chóng và nhất qn, thậm chí là chúng ta sử dụng trên các thiết bị với khả năng
thông dịch HTML5 chậm trong các ứng dụng Ionic.

Sass là một ngôn ngữ mở rộng của CSS cho phép Ionic thêm các biến số và khả
năng lồng cú pháp để mở rộng sự xuất hiện của giao diện ứng dụng. Ngoài ra,
Ionic cịn được đóng gói thêm các thư viện icon nguồn mở, khoảng 440 icons.

- Giao diện dựng sẵn Widgets

Các thành phần của Ionic cực kỳ đơn giản và mạnh mẽ. Chúng là các phần tử
HTML phức hợp, được gọi là các directives, Ionic cũng cung cấp các Controller để
bổ sung cho cấu hình và tương tác. Ionic cung cấp các khối xây dựng có phần đơn
giản mà có thể được kết hợp để cung cấp giao diện người dùng phong phú.

Ở phiên bản hiện tại v1.2.8, Ionic cung cấp một loạt các thành phần giao diện
thiết kế sẵn bao gồm: form elements, header and footer bars, buttons, simple list,
grid elements và các thành phần phổ biến khác nữa.

- Pairing with Angular JS

Ionic sử dụng AngularJS để tạo ra một framework tốt nhất cho việc xây dựng
các ứng dụng di động đa nền tảng, nó cung cấp một bộ giao diện người dùng (UI)
mã nguồn mở miễn phí đi cùng với các tính năng của AngularJS.

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ẻ

12

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.

- Performance obsessed

Ionic rất chú trọng đến hiệu suất, mặc dù nó ra đời chưa lâu. Ionic có một giao
diện ổn định và tốc độ tốt, với các hiệu ứng chuyển động được áp dụng kỹ thuật
tăng tốc phần cứng (hardware accelerating) và tối giản các thao tác với DOM.
Ionic cũng không cần sử dụng đến jQuery, mặc dù người sử dụng có thể thêm vào
nếu muốn. Ionic có thể tạo ra các ứng dụng phức tạp chạy trên cả iOS và Android.

Một điểm thú vị của Ionic đồng thời giúp tăng hiệu suất hoạt động của nó, đó là
Ionic khơng cố gắng tự mình thực hiện tất cả các cơng việc. Để đóng gói ứng dụng,
Ionic sử dụng Cordova và tận dụng cấu trúc thư mục mặc định của nó.

- Application scripting

Ionic không những mang đến cho chúng ta CSS và markup tùy biến cao mà còn

những mẫu thiết kế (design pattern) Javascript để giúp chúng ta xây dựng những
ứng dụng giống nhất với những ứng dụng native trên Android và iOS. Ionic muốn
giải phóng những ứng dụng web ra khỏi thanh địa chỉ và hướng đến những tương
tác giao diện mạnh mẽ như mà side menu hay view controllers.

- Mã nguồn mở

Mục đích của Ionic framework khơng chỉ là xây dựng một bộ khung phát triển
ứng dụng di động đa nền tảng mà còn muốn xây dựng một nền tảng để chia sẻ các
kiến thức cho các nhà phát triển, tạo ra một cách để đưa ra những design pattern tốt
nhất để xây dựng các ứng dụng di động. Vì vậy, Ionic là một framework mở hoàn
toàn cho phép tất cả mọi người có thể chia sẻ những kiến thức, kinh nghiệm để xây
dựng những ứng dụng di động tuyệt vời trên nền tảng HTML5.

Ionic sẽ đặt nền tảng cho ứng dụng của bạn dựa trên HTML5, CSS và
Javascript. Thay vì mỗi lập trình viên phải tự tìm tịi những khuyết điểm của việc
phát triển ứng dụng di động trên HTML5 thì Ionic sẽ cho bạn CSS cơ bản và tạo
cho bạn 1 kiến trúc tốt để phát triển phía trên nó.

13

2.3.3. Ưu và nhược điểm của Ionic Framework
- Ư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
 Có 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 core 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 core 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...
- 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 đơng.

2.4. Sử dụng Angular JS, Apache Cordova và Ionic Framework trong việc xây dựng
ứng dụng

2.4.1. Cài đặt Ionic
Để cài đặt Ionic, đầu tiên bạn phải tải nodeJS. NodeJS bạn có thể tải tại địa chỉ

Sau khi tải về, bạn tiến hành cài đặt nodeJS.
Sau khi cài đặt nodeJS xong, bạn mở cửa sổ command lên và gõ lệnh npm install -g

cordova ionic để tiến hành cài đặt Ionic Framework. Quá trình cài đặt sẽ mất khoảng
10p. Cài xong là bạn có thể tiến hành tạo ứng dụng đầu tiên
2.4.2. Tạo ứng dụng đầu tiên

14