Báo cáo Đồ án Tìm hiểu angular, ionic framework và xây dựng ứng dụng minh

ĐẠI HỌC QUỐC GIA TP. HCM

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

---------------  ---------------

BÁO CÁO ĐỒ ÁN 2

Lớp : SE122.L11

ĐỀ TÀI: TÌM HIỂU ANGULAR, IONIC FRAMEWORK VÀ XÂY DỰNG ỨNG DỤNG

MINH

GIÁO VIÊN HƯỚNG DẪN:

ThS. Huỳnh Nguyễn Khắc Huy

NHÓM THỰC HIỆN:

Nguyễn Mạnh Tùng – 17521236

Trương Văn Thành – 17521062

TPHCM, Ngày 4 tháng 1 năm 2020

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học Công nghệ

Thông tin chúng em đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể hoàn thành

đồ án môn học của mình.

Chúng em xin gửi lời cảm ơn chân thành đến thầy Huỳnh Nguyễn Khắc huy đã quan tâm, hướng

dẫn, truyền đạt những kiến thức và kinh nghiệm cho chúng em trong suốt thời gian học tập môn Đồ

án 2.

Trong quá trình thực hiện nhóm chúng em chắc chăn không tránh khỏi được những sai sót, chính

vì vậy, chúng em rất mong nhận được sự góp ý của thầy cô và các bạn nhằm hoàn thiện những kiến

thức mà nhóm chúng em đã học tập và là hành trang để thực hiện tiếp các đề tài khác trong tương

lai.

Nhóm em xin chân thành cảm ơn quý Thầy Cô!

TP. Hồ Chí Minh, ngày 4 tháng 1 năm 2020

NHẬN XÉT

(của giảng viên)

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

MỤC LỤC

L Ờ I C ẢM ƠN .................................................................................................................................. 2

M Ụ C L Ụ C ........................................................................................................................................ 4

PH Ầ N 0: M ỤC ĐÍCH ĐỀ TÀI....................................................................................................... 9

PH Ầ N 1: TÌM HI Ể U IONIC ANGULA R ................................................................................... 10

CHƯƠNG 1: TỔ NG QUAN IONIC............................................................................................ 10

1.

T ổ ng quan .............................................................................................................................................. 10

Khái ni ệ m ..................................................................................................................................... 10

M ụ c Tiêu ...................................................................................................................................... 10

Ưu điể m ........................................................................................................................................ 11

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

Gi ấ y phép ..................................................................................................................................... 12

CHƯƠNG 2: TỔ NG QUAN ANGULAR.................................................................................... 19

Khái ni ệ m .............................................................................................................................................. 19

Nh ững đặc điể m n ổ i b ậ t ........................................................................................................................ 20

Ưu điể m ................................................................................................................................................. 21

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

Cài đặ t ................................................................................................................................................... 22

CHƯƠNG 3: HƯỚ NG D ẪN CÀI ĐẶ T VÀ CH Ạ Y Ứ NG D Ụ NG IONIC............................... 22

1.

2.

3.

Cài đặt môi trườ ng ................................................................................................................................ 22

Cài đặ t CLI ............................................................................................................................................ 23

Tri ể n khai trên Android ........................................................................................................................ 25

Yêu c ầ u ......................................................................................................................................... 25

Hướ ng d ẫ n thi ế t l ậ p Android Studi o ........................................................................................... 25

Thi ế t l ậ p d ự án ............................................................................................................................. 26

Ch ạ y ứ ng d ụ ng v ớ i Capacitor ho ặ c Cordov a .............................................................................. 27

Tri ể n khai trên iOS ............................................................................................................................... 28

Yêu c ầ u ......................................................................................................................................... 28

Thi ế t l ậ p d ự án ............................................................................................................................. 28

Ch ạ y ứ ng d ụ ng v ớ i Xcode ............................................................................................................ 29

CHƯƠNG 4: LAYOUT ................................................................................................................ 30

1.

C ấ u trú c ................................................................................................................................................. 30

Header and Footer Layout .......................................................................................................... 30

Tabs Layout ................................................................................................................................. 30

Menu Layou t ................................................................................................................................ 31

Responsive Grid .................................................................................................................................... 33

Css .......................................................................................................................................................... 33

Colors ........................................................................................................................................... 33

Text Modification ......................................................................................................................... 35

Element Placement ....................................................................................................................... 37

Element Display ........................................................................................................................... 38

Content Space .............................................................................................................................. 38

Flex Properties ............................................................................................................................. 40

Border Display ............................................................................................................................. 43

Ionic Breakpoint s ......................................................................................................................... 44

CHƯƠNG 5: COMPONENTS ..................................................................................................... 45

CHƯƠNG 6: NATIV E .................................................................................................................. 48

1.

2.

Gi ớ i thi ệ u ............................................................................................................................................... 48

Thi ế t l ậ p ................................................................................................................................................. 48

Ionic Native Community là gì ?.................................................................................................... 48

Usage ............................................................................................................................................ 48

Ionic Native FAQ ................................................................................................................................... 55

Use the Ionic CLI to add/update/delete plugins. ......................................................................... 55

Upgrade plugins by removing, then re-adding them. ................................................................. 56

Install explicit versions................................................................................................................. 56

Restore Cordova in an existing Ionic projec t .............................................................................. 56

Troubleshoot Cordova issues with Ionic CLI commands ........................................................... 56

PH Ầ N 2: XÂY D Ự NG Ứ NG D Ụ NG MINH H Ọ A ..................................................................... 56

CHƯƠNG 1: PHÁT BIỂ U BÀI TOÁN....................................................................................... 56

1.1. Gi ớ i thi ệ u bài toán c ầ n gi ả i quy ế t ......................................................................................................... 57

1.1.1.

1.1.2

Nhu c ầ u th ự c t ế c ủa đề tà i .............................................................................................................. 57

M ục tiêu đề tà i ............................................................................................................................... 57

1.2. Mô t ả quy trình th ự c hi ệ n ..................................................................................................................... 57

CHƯƠNG 2: KHẢ O SÁT HI Ệ N TR Ạ NG.................................................................................. 58

2.1 Hi ệ n tr ạ ng t ổ ch ứ c ..................................................................................................................................... 58

2.1.1 Sơ đồ t ổ ch ứ c h ệ th ố ng ......................................................................................................................... 58

2.1.2 Ch ức năng của Ngườ i dùng................................................................................................................... 58

2.2 Hi ệ n tr ạ ng tin h ọ c ...................................................................................................................................... 58

2.3 Hi ệ n tr ạ ng nghi ệ p v ụ ................................................................................................................................. 58

2.3.1 Mô t ả nghi ệ p v ụ .................................................................................................................................... 58

2.3.2 Sơ đồ hi ệ n tr ạ ng nghi ệ p v ụ ................................................................................................................... 59

2.3.3 B ả ng mô t ả công vi ệ c ........................................................................................................................... 59

CHƯƠNG 3: XÁC ĐỊ NH CÁC YÊU C Ầ U PH Ầ N M Ề M......................................................... 61

3.1 Yêu c ầ u ch ức năng ................................................................................................................................ 61

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

CHƯƠNG 4: MÔ HÌNH USE -CAS E .......................................................................................... 63

4.1 Sơ đồ Use-case t ổ ng quát: ......................................................................................................................... 63

4.2 Danh sách các Actor .................................................................................................................................. 63

4.3 Danh sách các Use-cas e ............................................................................................................................. 64

4.4 Đặ c t ả Use-case .......................................................................................................................................... 65

4.4.1 Đặ c t ả Use-case “Tìm kiế m liên h ệ”...................................................................................................... 65

4.4.2 Đặ c t ả Use-case “Thêm liên hệ”............................................................................................................ 66

4.4.3 Đặ c t ả Use-case “Xóa liên hệ ”.............................................................................................................. 67

4.4.4 Đặ c t ả Use-case “Cậ p nh ậ t liên h ệ”....................................................................................................... 68

4.4.5 Đặ c t ả Use-case “Gọi điệ n tho ại”.......................................................................................................... 69

4.4.6 Đặ c t ả Use-case “Thêm ưa thích”.......................................................................................................... 70

4.4.7 Đặ c t ả Use-case “Tìm đị a ch ỉ liên h ệ”................................................................................................... 71

CHƯƠNG 5: PHÂN TÍCH ........................................................................................................... 72

5.1 Sơ đồ l ớ p .................................................................................................................................................... 72

5.1.1 Sơ đồ l ớ p (m ứ c phân tích)..................................................................................................................... 72

5.1.2 Danh sách các l ớp đối tượ ng và quan h ệ ............................................................................................... 74

5.1.3 Mô t ả chi ti ế t t ừ ng l ớp đối tượ ng........................................................................................................... 74

5.2 Sơ đồ sequence ........................................................................................................................................... 75

5.2.1 C ậ p nh ậ t liên h ệ .................................................................................................................................... 75

5.2.2 Thêm m ớ i liên h ệ .................................................................................................................................. 76

5.2.3 Xóa thông tin liên h ệ ............................................................................................................................ 76

CHƯƠNG 6: THIẾ T K Ế D Ữ LI Ệ U ............................................................................................ 78

6.1 Sơ đồ logic .................................................................................................................................................. 78

6.2 Danh sách các b ả ng d ữ li ệu trong sơ đồ ................................................................................................... 78

6.3 Mô t ả chi ti ế t các ki ể u d ữ li ệu trong sơ đồ logi c ....................................................................................... 79

6.3.1

6.3.2

B ả ng CONTAC T ........................................................................................................................... 79

B ả ng PHOTO ................................................................................................................................ 80

CHƯƠNG 7: THIẾ T K Ế KI Ế N TRÚC ...................................................................................... 81

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

7.2 Mô t ả chi ti ế t t ừ ng thành ph ầ n trong mô hìn h ......................................................................................... 81

7.2.1 View .................................................................................................................................................... 81

7.2.2 View Model.......................................................................................................................................... 81

7.2.3 Model................................................................................................................................................... 81

CHƯƠNG 8: THIẾ T K Ế GIAO DI Ệ N ....................................................................................... 82

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

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

8.3 Mô t ả chi ti ế t các màn hình ....................................................................................................................... 84

8.3.1.

8.3.2.

Màn hình Contacts và Favorite....................................................................................................... 84

Màn hình Thêm liên h ệ .................................................................................................................. 85

8.3.3. Màn hình Tìm ki ế m liên h ệ ................................................................................................................. 86

Màn hình Ch ỉ nh s ử a liên h ệ ............................................................................................................ 87

Màn hình g ọ i tho ạ i......................................................................................................................... 88

Màn hình quét QR code ................................................................................................................. 89

Màn hình QR code......................................................................................................................... 90

Màn hình Chi ti ế t liên h ệ ................................................................................................................ 91

Màn hình đị a ch ỉ google ma p ......................................................................................................... 92

CHƯƠNG 9: NHẬ N XÉT VÀ K Ế T LU Ậ N................................................................................ 93

9.1 Môi trườ ng phát tri ển và Môi trườ ng tri ể n khai .................................................................................. 93

9.1.1

Môi trườ ng phát tri ể n ứ ng d ụ ng...................................................................................................... 93

9.1.2 Môi trườ ng tri ể n khai ứ ng d ụ ng ............................................................................................................ 93

9.2 K ế t qu ả đạt đượ c ................................................................................................................................... 93

9.3 Nh ậ n xét ..................................................................................................................................................... 93

9.3.1 Ưu điể m ............................................................................................................................................... 93

9.3.2 Khuy ết điể m......................................................................................................................................... 94

9.4 Hướ ng phát tri ể n ....................................................................................................................................... 94

B Ả NG PHÂN CHIA CÔNG VI Ệ C.............................................................................................. 95

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

PHẦN 0: MỤC ĐÍCH ĐỀ TÀI

- Tìm hiểu khái niệm, các tính năng nổi bật, ưu nhược điểm của Ionic, Angular và

Cordova Framework

- Nắm được các dòng lệnh command-line quan trọng trong Ionic, Angular Framework và

các yêu cầu cần thiết để triển khai cho một ứng dụng trên hai nền tảng iOS và Android

(bao gồm trình mô phỏng và thiết bị ).

- Xây dựng hybrid app minh họa lưu trữ thông tin cá nhân, bạn bè với sự kết hợp giữa

Angular và Ionic với một số API do Cordova cung cấp: Camera, Native Storage, Call

Number,..

PHẦN 1: TÌM HIỂU IONIC ANGULAR

CHƯƠNG 1: TỔNG QUAN IONIC

1. Tổng quan

1.1 Khái niệm

Ionic là một Framework cung cấp bộ công cụ giao diện người dùng mã nguồn mở

để xây dựng các ứng dụng di động và máy tính để bàn chất lượng cao sử dụng công

nghệ web - HTML, CSS và JavaScript

Kết hợp với các framework javascript phổ biến khác:

- Vue

- Angular

- React

1.2 Mục Tiêu

a.

Đa nền tảng

Xây dựng và triển khai các ứng dụng hybrid trên iOS, Android, máy tính để

bàn và web dưới dạng Progressive Web App - tất cả đều có một cơ sở mã. Viết một

lần, chạy bất cứ nơi nào.

b.

Dựa trên Tiêu chuẩn Web

công nghệ web tiêu chuẩn hóa: HTML, CSS và JavaScript, sử dụng các API

Web hiện đại như Custom Elements và Shadow DOM. Bởi vì điều này, các thành

phần Ionic có một API ổn định, và không theo ý thích của một nhà cung cấp nền

tảng duy nhất.

c.

Thiết kế đẹp

Ionic Framework được thiết kế để hoạt động và hiển thị tuyệt đẹp out-of-the-

box trên tất cả các nền tảng. Bắt đầu với các thành phần được thiết kế sẵn, kiểu chữ,

mô hình tương tác và chủ đề cơ sở tuyệt đẹp (nhưng có thể mở rộng).

d.

Đơn giản

Ionic Framework được xây dựng với sự đơn giản trong tâm trí, để tạo ra các

ứng dụng Ionic là thú vị, dễ dàng tìm hiểu, và có thể truy cập chỉ là về bất cứ ai có

kỹ năng phát triển web.

1.3 Ưu điểm

- Người phát triển có thể sử dụng các kỹ năng từ lập trình web, giúp giảm thiểu thời

gian cũng như chi phí đào tạo nói riêng và thời gian cũng như chi phí dành cho dự

án nói chung.

- Chỉ một bộ mã lệnh có thể sử dụng trên nhiều hệ điều hành khác nhau.

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

- Khả năng sử dụng trong chế độ offline.

- Việc thiết kế giao diện cho các thiết bị có kích cỡ khác nhau trở nên dễ dàng với

thiết kế tùy ứng (responsive design) của web.

- 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, ..

- Một lợi thế khác khi sử dụng Ionic là nó có một cộng đồng người dùng lớn mạnh,

giúp cho việc tìm hiểu và hỗ trợ dễ dàng hơn.

- Các ứng dụng hybrid có nhiều ưu điểm như có thể hiển thị cho nhiều nền tảng

- Tận dụng các tính năng khác của thiết bị di động như GPS, camera....

- Thời gian và chi phí dùng để phát triển ứng dung cũng thấp hơn nhiều so với

native.

1.4 Nhược điểm

- Tốc độ chậm với một số tính năng chuyển trang trên di độ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ị.

- Tuy nhiên, nó vẫn đang trong giai đoạn phát triển nên độ ổn định chưa cao

1.5 Giấy phép

Ionic Framework là một dự án mã nguồn mở và miễn phí, được phát hành theo giấy

phép MIT. Điều này có nghĩa là nó có thể được sử dụng trong các dự án cá nhân hoặc

thương mại miễn phí. MIT là giấy phép tương tự được sử dụng bởi các dự án phổ biến

như jQuery và Ruby on Rails.

2. Tính năng

2.1. Cordova

2.1.1 Cordova 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ị.

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 đấy chứ 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.

Một số APIs được Cordova cung cấp cần thiết cho di động như: Camera, GPS, firebase,

SQLite, Call Phone Number, Native Storage,..

2.1.2 Các tính năng của Cordova

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

2.1.3 Hạn chế

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.1.4 Cách cài đặt

Bước 1: Cài Nodejs https://nodejs.org/en/ Cordova hoạt động dựa trên nodejs, nó sẽ

genarate các file tương ứng từ source code.

Bước 2: Cài Cordova Các command-line của Cordovar chạy trên nền Node.js, mở

Terminal và gõ:

npm install -g cordova

Bước 3: Tạo mới project: Tạo mới một project Cordova bằng tool command-line,

điều hướng tới folfer mà bạn muốn lưu trữ project và tạo đường dẫn:

cordova create <name-app>

Bước 4: Thêm platform Sau khi khởi tạo project Cordova, điều hướng tới folder

chứa project, từ folder này, bạn có thể add thêm bất kỳ platform nào bạn muốn để build

app. Để add platform, type:

cordova platform add <platform name>

cordova build

2.2. Capacitor

2.2.1. Capacitor là gì?

Capacitor là một dự án mã nguồn mở chạy các Ứng dụng Web hiện đại trên iOS,

Android, Electron và Web (sử dụng công nghệ Progressive Web App) cung cấp giao

diện mạnh mẽ và dễ sử dụng để truy cập Native SDKs và Native APIs trên mỗi nền

tảng.

2.2.2. Ưu điểm

- Thay thế cho Cordova, Capacitor mang lại những lợi ích đa nền tảng tương tự,

nhưng với cách tiếp cận hiện đại hơn để phát triển ứng dụng, tận dụng các API

web mới nhất và khả năng native platform.

- Sử dụng Capacitor, các nhà phát triển có thể xây dựng một ứng dụng và nhắm mục

tiêu một tập hợp API bất kể ứng dụng đang chạy trên nền tảng nào, trái ngược với

việc quản lý nhiều API cho mỗi nền tảng mục tiêu.

- Dễ dàng xây dựng một ứng dụng web chạy tự nhiên trên thiết bị di động, máy tính

để bàn và web dưới dạng Progressive Web App

2.2.3. Hạn chế

- Hiệu suất của hybrid app thì sẽ chậm hơn các native app

- 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.2.4. Cách cài đặt và thêm vào ứng dụng

- Yêu cầu đã cài đặt Nodejs

- Trong thư mục gốc của ứng dụng chạy dòng command-line:

npm install @capacitor/core@next @capacitor/cli@next

- Sau đó khởi tạo capacitor bằng:

npx cap init

2.3. 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 developer 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 sản phẩm 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.

2.4. Giao diện người dùng UI

Ionic thể hiện 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 quán, 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 – Cascading Style Sheets – 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.

2.5. 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ú.

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.

2.6. 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ó.

2.7. 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.

2.8. Open-source

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ó.

CHƯƠNG 2: TỔNG QUAN ANGULAR

1. Khái niệm

Angular là một javascript framework do google phát triển để xây dựng các Single

Page Application (SPA) bằng JavaScript , HTML và TypeScript . Angular cung cấp

các tính năng tích hợp cho animation , http service và có các tính năng như auto-

complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên

dịch thành JavaScript và hiển thị tương tự trong trình duyệt.

Để tiếp cận được Angular chúng ta cần

 HTML

 CSS

 JavaScript

 TypeScript

 Document Object Model (DOM)

2. Những đặc điểm nổi bật

a. Cơ chế Two-Way Data Binding

Đây là tính năng được developer đánh giá là ấn tượng nhất của Angular. Data

binding tự động, tức thời. Bất cứ thay đổi nào trên view, dù là nhỏ nhất, cũng đều

được tự động cập nhật thuộc tính “model” vào component class và ngược lại.

Thêm vào đó, Angular cũng hỗ trợ property binding. Developer có thể ràng buộc

thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên

trong view thông qua việc điều khiển DOM.

b. Hỗ trợ cơ chế Routing (điều hướng) mạnh mẽ

- Angular có cơ chế routing tải trang một cách bất đồng bộ trên cùng một trang

cho phép chúng ta tạo SPA.

- Đa số các ứng dụng Web không chỉ có 1 view hay một page duy nhất, mà sẽ

cung cấp nhiều view khác nhau tương ứng với với các chức năng chính. Ví

dụ: các trang liên hệ, giới thiệu chung, nội dung, báo giá, … trong một

website. Hiển thị đúng view vào đúng thời điểm là mục đích của điều hướng

(routing).