Xem mẫu
- ĐẠ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 ANGULAR ................................................................................... 10
CHƯƠNG 1: TỔNG QUAN IONIC ............................................................................................ 10
1. Tổng quan .............................................................................................................................................. 10
1.1 Khái niệm ..................................................................................................................................... 10
1.2 Mục Tiêu ...................................................................................................................................... 10
1.3 Ưu điểm ........................................................................................................................................ 11
1.4 Nhược điểm .................................................................................................................................. 12
1.5 Giấy phép ..................................................................................................................................... 12
CHƯƠNG 2: TỔNG QUAN ANGULAR.................................................................................... 19
1. Khái niệm .............................................................................................................................................. 19
2. Những đặc điểm nổi bật ........................................................................................................................ 20
3. Ưu điểm ................................................................................................................................................. 21
4. Nhược điểm ........................................................................................................................................... 22
5. Cài đặt ................................................................................................................................................... 22
CHƯƠNG 3: HƯỚNG DẪN CÀI ĐẶT VÀ CHẠY ỨNG DỤNG IONIC ............................... 22
1. Cài đặt môi trường ................................................................................................................................ 22
2. Cài đặt CLI............................................................................................................................................ 23
3. Triển khai trên Android ........................................................................................................................ 25
3.1. Yêu cầu......................................................................................................................................... 25
3.2. Hướng dẫn thiết lập Android Studio ........................................................................................... 25
3.3. Thiết lập dự án ............................................................................................................................. 26
3.4. Chạy ứng dụng với Capacitor hoặc Cordova .............................................................................. 27
4. Triển khai trên iOS ............................................................................................................................... 28
4.1. Yêu cầu......................................................................................................................................... 28
4.2. Thiết lập dự án ............................................................................................................................. 28
4.3. Chạy ứng dụng với Xcode ............................................................................................................ 29
CHƯƠNG 4: LAYOUT ................................................................................................................ 30
- 1. Cấu trúc ................................................................................................................................................. 30
1.1. Header and Footer Layout .......................................................................................................... 30
1.2. Tabs Layout ................................................................................................................................. 30
1.3. Menu Layout ................................................................................................................................ 31
2. Responsive Grid .................................................................................................................................... 33
3. Css .......................................................................................................................................................... 33
3.1. Colors ........................................................................................................................................... 33
3.2. Text Modification ......................................................................................................................... 35
3.3. Element Placement....................................................................................................................... 37
3.4. Element Display ........................................................................................................................... 38
3.5. Content Space .............................................................................................................................. 38
3.6. Flex Properties ............................................................................................................................. 40
3.7. Border Display ............................................................................................................................. 43
3.8. Ionic Breakpoints ......................................................................................................................... 44
CHƯƠNG 5: COMPONENTS..................................................................................................... 45
CHƯƠNG 6: NATIVE .................................................................................................................. 48
1. Giới thiệu ............................................................................................................................................... 48
2. Thiết lập ................................................................................................................................................. 48
2.1. Ionic Native Community là gì? .................................................................................................... 48
2.2. Usage ............................................................................................................................................ 48
3. Ionic Native FAQ................................................................................................................................... 55
3.1. Use the Ionic CLI to add/update/delete plugins. ......................................................................... 55
3.2. Upgrade plugins by removing, then re-adding them. ................................................................. 56
3.3. Install explicit versions................................................................................................................. 56
3.4. Restore Cordova in an existing Ionic project .............................................................................. 56
3.5. 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. Nhu cầu thực tế của đề tài .............................................................................................................. 57
1.1.2 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-CASE .......................................................................................... 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-case ............................................................................................................................. 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ơ đồ logic ....................................................................................... 79
- 6.3.1 Bảng CONTACT ........................................................................................................................... 79
6.3.2 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ình ......................................................................................... 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. Màn hình Contacts và Favorite ....................................................................................................... 84
8.3.2. 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
8.3.4. Màn hình Chỉnh sửa liên hệ............................................................................................................ 87
8.3.5. Màn hình gọi thoại ......................................................................................................................... 88
8.3.6. Màn hình quét QR code ................................................................................................................. 89
8.3.7. Màn hình QR code ......................................................................................................................... 90
8.3.8. Màn hình Chi tiết liên hệ ................................................................................................................ 91
8.3.9. Màn hình địa chỉ google map ......................................................................................................... 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
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
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).
nguon tai.lieu . vn
