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

Chia sẻ: Nguyễn Toàn | Ngày: | Loại File: PDF | Số trang:96

Thêm vào BST

Báo xấu

98
lượt xem 22
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Mục đích nghiên cứu của đề tài nhằm 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,..

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 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).