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

Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công nghệ thông tin UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN ---------- TRẦN QUỐC TRƯỞNG NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA, IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG DỤNG MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG PHẦN MỀM BẢO HÀNH THIẾT BỊ TIN HỌC KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam, tháng 04 năm 2017 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGỆ THÔNG TIN ---------- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA, IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG DỤNG MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG PHẦN MỀM BẢO HÀNH THIẾT BỊ TIN HỌC Sinh viên thực hiện HỌ TÊN: TRẦN QUỐC TRƯỞNG MSSV: 2113011035 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA: 2013 – 2017 Cán bộ hướng dẫn ThS. TRẦN THỊ DIỆU HIỀN Quảng Nam, tháng 4 năm 2017 MỤC LỤC Phần 1. PHẦN MỞ ĐẦU ................................................................................... 1 1. Lý do chọn đề tài .......................................................................................... 1 2. Mục tiêu của đề tài ........................................................................................ 1 3. Đối tượng và phạm vi nghiên cứu ................................................................ 1 4. Phương pháp nghiên cứu .............................................................................. 2 5. Ý nghĩa khoa học và thực tiễn của đề tài ...................................................... 2 6. Bố cục của đề tài ........................................................................................... 2 Phần 2. NỘI DUNG NGHIÊN CỨU ................................................................ 3 Chương 1: TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG................................... 3 1.1. Lập trình di động và lịch sử phát triển .................................................... 3 1.2. Các loại hình phát triển và các tính năng. ............................................... 4 Chương 2: IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA VÀ CÁC VẤN ĐỀ LIÊN QUAN ..................................................................... 7 2.1. Angular JS ............................................................................................... 7 2.2. Apache Cordova...................................................................................... 9 2.3. Ionic Framework ................................................................................... 10 2.4. Sử dụng Angular JS, Apache Cordova và Ionic Framework trong việc xây dựng ứng dụng. ..................................................................................... 14 2.5. Các vấn đề liên quan ............................................................................. 15 Chương 3: ỨNG DỤNG BẢO HÀNH THIẾT BỊ TIN HỌC ........................ 20 3.1. Giới thiệu phần mềm bảo hành thiết bị tin học..................................... 20 3.2. Phân tích và thiết kế ứng dụng.............................................................. 20 3.3. Chương trình demo phần mềm bảo hành thiết bị tin học ..................... 33 Phần 3 . KẾT LUẬN VÀ KIẾN NGHỊ .......................................................... 40 I. Kết luận........................................................................................................ 40 II. Kiến nghị .................................................................................................... 40 Phân 4. TÀI LIỆU THAM KHẢO ................................................................. 41 DANH MỤC HÌNH ẢNH VÀ BẢNG Danh mục hình ảnh Hình 3.1. Biểu đồ UC tổng quát…………………….………….…………..…………27 Hình 3.2. Biểu đồ tuần tự UC tiếp nhận thiết bị………………..…………..…………28 Hình 3.3. Biểu đồ tuần tự UC sửa chữa thiết bị………………..…………..………....28 Hình 3.4. Biểu đồ tuần tự UC quản lý phiếu bảo hành……….………..……………..29 Hình 3.5. Biểu đồ tuần tự UC quản lý nhân viên………..……….………....….…..…29 Hình 3.6. Biểu đồ tuần tự UC quản lý thiết bị…………….……………..……….......30 Hình 3.7. Biểu đồ tuần tự UC quản lý khách hàng……….………………..……...….30 Hình 3.8. Biểu đồ tuần tự UC quản lý nhà cung cấp……….……………..….……….31 Hình 3.9. Biểu đồ lớp…………………………….………………………..…….........31 Hình 3.10. Biểu đồ trạng thái phiếu sửa chữa………...….………………..……....….32 Hình 3.11. Biểu đồ trạng thái phiếu bảo hành……………………………...….…...…32 Hình 3.12. Giao diện đăng nhập hệ thống………………………………..….……......33 Hình 3.13. Giao diện trang chủ ứng dụng………………………………..….………..34 Hình 3.14. Hệ thống menu nhanh của ứng dụng………………………..…….……....35 Hình 3.15. Giao diện kiểm tra thông tin bảo hành……………………..……….…….36 Hình 3.16. Giao diện tạo phiếu bảo hành………………………………..…….……...37 Hình 3.17. Giao diện quản lý khách hàng……………………………..……….……..38 Hình 3.18. Giao diện nhật ký sửa chữa………………………………..……….……..39 Danh mục bảng Bảng 3.1. Bảng chức năng tiếp nhận thiết bị………………………….………..…..…22 Bảng 3.2. Bảng chức năng sửa chữa thiết bị…………………………………...….….22 Bảng 3.3. Bảng chức năng quản lý…………………………………….………..….…22 Bảng 3.4. Bảng chức năng thống kê………………………………….…………..…...23 Bảng 3.5. Bảng danh sách các UC………………………………………..….……….23 DANH MỤC TỪ VIẾT TẮT STT Từ viết tắt Diễn giải 01 JS JavaScript 02 Html HyperText Markup Langue 03 Css Cascading Style Sheets 04 API Application Programming Interface 05 MVC Model – View - Controller 06 DOM Document Object Model 07 URL Uniform Resource Locator 08 MVVM Model – View – ViewModel 09 UI User Interface 10 HTTP Hypertext Transfer Protocol 11 UC User Case LỜI CẢM ƠN Công nghệ thông tin đang là một ngành công nghệ phát triển hàng đầu trên thế giới hiện nay. Sản phẩm từ ngành này rất đa dạng và phong phú. Ứng dụng di động là một phần trong đó. Hằng năm, có hàng triệu ứng dụng di động ra đời, đáp ứng đầy đủ mọi yêu cầu của con người. Tuy nhiên, để viết một ứng dụng di động không phải là chuyện đơn giản, vì vậy, em xin chọn đề tài “ Nghiên cứu về Angular JS, Apache Cordova, Ionic Framework trong việc phát triển ứng dụng mobile đa nền tảng và ứng dụng xây dựng phần mềm bảo hành thiết bị tin học trên Mobile”. Em hy vọng đề tài này sẽ đem lại nhiều hữu ích cho bản thân em cũng như những ai quan tâm Em xin gửi lời cảm ơn đến giáo viên ThS. Trần Thị Diệu Hiền đã hướng dẫn và chỉ bảo trong quá trình em tìm hiểu và thực hiện đề tài này. Tuy nhiên, do hạn chế về thời gian, cũng như chưa có kinh nghiệm và kiến thức thực tế, đề tài sẽ không tránh được những sai sót, em mong các thầy và các cô đóng góp ý kiến đế đề tài được hoàn thiện hơn. Em xin chân thành cảm ơn Quảng Nam, 05 tháng 05 năm 2017 Tác giả Trần Quốc Trưởng 1 Phần 1. PHẦN MỞ ĐẦU 1. Lý do chọn đề tài Cùng với sự phát triển của thị trường điện thoại di động trên thế giới là sự phát triển mạnh mẽ của ngành lập trình phần mềm ứng dụng cho các thiết bị di động. Phần mềm, ứng dụng hay game trên các thiết bị điện thoại di động là rất đa dạng và phong phú trên các hệ điều hành di động. Tuy nhiên, để xây dựng và phát triển được một phần mềm hay một ứng dụng trên điện thoại không phải là một chuyện đơn giản. Các lập trình viên phải lựa chọn một cách cẩn thận hướng phát triển cho ứng dụng của mình. Hiện nay, việc phát triển một ứng dụng di động được chia làm 3 loại chính: Native app, Mobile web và Hybrid app. Native app và Mobile web đều có những điểm mạnh và điểm yếu riêng. Tuy nhiên, Hybrid app lại là sự kết hợp của Native app và Mobile web. Vì vây, Hybrid app vừa tận dụng được sức mạnh của Mobile web vừa có khả năng thao tác hệ thống của Native app. Trong tương lai công nghệ Hybrid app hứa hẹn sẽ là sự thay thế hoàn hảo cho các ứng dụng mobile hiện nay. Ionic Framework là một Hybrid Framework dựa trên sự kết hợp của Angular và Cordova. Framework mạnh mẽ nhất để viết các ứng dụng Hybrid chính là Ionic Framework. Đó là lý do tôi chọn đề tài này. 2. Mục tiêu của đề tài Tìm hiểu và phân tích được những nội dung lý thuyết của Ionic Framework, Angular JS và Apache Cordova, cách áp dụng chúng vào việc xây dựng ứng dụng mobile đa nền tảng. Đem lại cho chính bản thân khả năng tự xây dựng ứng một ứng dụng mobile đa nền tảng hoàn chỉnh cũng như có một nền tảng kiến thức vững chắc về IonicFramework, Angular JS và Apache Cordova. Xây dựng phần mềm bảo hành thiết bị tin học trên mobile để áp dụng vào các công ty chuyên kinh doanh về các thiết bị tin học. 3. Đối tượng và phạm vi nghiên cứu Nghiên cứu về Ionic Framework, AngularJS, Apache Cordova và các vấn đề liên quan. Xây dựng phần mềm bảo hành thiết bị tin học trên mobile. 2 4. Phương pháp nghiên cứu Nghiên cứu lý thuyết. Áp dụng để xây dựng ứng dụng thực tế. 5. Ý nghĩa khoa học và thực tiễn của đề tài Xây dựng được một tài liệu tương đối hoàn chỉnh về Ionic Framework, Angular JS, Apache Cordova và các vấn đề liên quan để mọi người có thể tham khảo và học tập. Xây dựng ứng dụng bảo hành thiết bị tin học trên mobile ứng dụng thực tiễn. 6. Bố cục của đề tài Đề tài này sẽ gồm 3 chương: - Chương 1: Tổng quan về lập trình di động - Chương 2: Ionic framework, Angular Js, Apache Cordova và các vấn đề liên quan - Chương 3: Ứng dụng bảo hành thiết bị tin học trên mobile 3 Phần 2. NỘI DUNG NGHIÊN CỨU Chương 1: TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG 1.1. Lập trình di động và lịch sử phát triển Lập trình di động có lẻ là một từ không hề xa lạ với tất cả chúng ta. Trong khoảng thời gian gần đây, lập trình di động đang phát triển rất mạnh mẽ, hàng ngàn, hàng triệu ứng dụng của điện thoại thông minh được ra đời mỗi năm. Trên thị trường ứng dụng di động hiện nay, 3 hệ điều hành chiếm thị phần cao nhất là Android, iOS và Windows Phone, tiếp sau đó là một số hệ điều hành khác như BlackBerry… - Android Android là hệ điều hành mã nguồn mở dựa trên nền tảng Linux dành cho thiết bị di động như điện thoại thông minh và máy tính bảng. Android được phát triển bởi Open Handset Alliance, quản lý bởi Google và một số công ty khác. Android luôn chiếm hơn 70 thị phần của mảng di động. Đa số ứng dụng Android được viết bằng ngôn ngữ Java, do đó các bạn lập trình viên Java có thể dễ dàng chuyển hướng qua mảng này. Giao diện người dùng của Android dựa trên nguyên tắc tác động trực tiếp, sử dụng cảm ứng chạm tương tự như những động tác ngoài đời thực như vuốt, chạm, kéo dãn và thu lại để xử lý các đối tượng trên màn hình. Các thiết bị Android sau khi khởi động sẽ hiển thị màn hình chính, điểm khởi đầu với các thông tin chính trên thiết bị, tương tự như khái niệm desktop trên máy tính để bàn. Màn hính chính Android thường gồm nhiều biểu tượng (icon) và tiện ích (widget ). Giao diện màn hình chính của Android có thể tùy chỉnh ở mức cao, cho phép người dùng tự do sắp đặt hình dáng cũng như hành vi của thiết bị theo sở thích. - iOS iOS là một hệ điều hành điện thoại di động được phát triển bởi Apple và phân phối độc quyền cho phần cứng của Apple. Ban đầu, iOS được công bố năm 2007 cho IPhone, sau đó được mở rộng để hỗ trợ các thiết bị khác của Apple như iPod Touch (tháng 9 năm 4 2007), iPad (tháng 1 năm 2010), iPad Mini (tháng 11 năm 2012) và thế hệ thứ hai của Apple tivi trở đi (tháng 9 năm 2010). Giao diện người dùng của iOS được dựa trên khái niệm về thao tác trực tiếp bằng tay, sử dụng các cử chỉ đa cảm ứng. Các yếu tố giao diện điều khiển bao gồm các thanh trượt, công tắc và các nút. Tương tác với các hệ điều hành bao gồm các cử chỉ như chạm, trượt, vuốt. Từ ngày ra đời và phát triển hệ điều hành iOS đã trở thành một xu hướng trên toàn cầu với sự phát triển thịnh hành của dòng điện thoại smartphone. - Windows Phone Windows Phone là hệ điều hành dành cho điện thoại thông minh của Microsoft, thay thế cho nền tảng Windows Mobile. Dù vậy hiện tại hai hệ điều hành này vẫn chưa tương thích được với các phiên bản cũ do thời gian phát triển quá nhanh. Windows bắt đầu được ra mắt chính thức vào tháng 22010 ở triển lãm Mobile World Congress diễn ra ở Barcelona, Tây Ban Nha, đến tháng 102010, 10 thiết bị Windows Phone đầu tiên đến từ HTC, Dell, Samsung, LG đã được ra mắt và bán ra rộng rãi trên thế giới một thời gian sau đó. Windows Phone có giao diện người dùng được Microsoft gọi với cái tên "Metro". Màn hình chính, có tên là "Start Screen", được cấu tạo bỏi những "Lát Gạch" (Live Tiles). Những viên Gạch này link đến những ứng dụng, tính năng, chức năng và những thứ khác (như tên danh bạ, bookmarks, tập tin nhạc...). Người dùng có thể thêm, sắp xếp hoặc xóa Gạch, tuy nhiên nó không đồng nghĩa việc gỡ ứng dụng ra khỏi thiết bị. Trên đây là 3 hệ điều hành điện thoại di động phổ biến nhất trên thế giới. Với những hệ điều hành trên, việc xây dựng một ứng dụng di động đều phụ thuộc vào ý định của người lập trình. Với mỗi hệ điều hành, các ứng dụng di động đều rất phong phú và đa dạng. 1.2. Các loại hình phát triển và các tính năng. Hiện nay, phát triển một ứng dụng di động được chia làm ba loại chính: Native App, Mobile Web App và Hybrid App. Mỗi loại sẽ có một đặc điểm riêng của mình. - Native App 5 Đây là phương tiện mạnh mẽ và phổ biến nhất được các lập trình viên sử dụng để phát triển các ứng dụng cho thiết bị di động. Hiểu 1 cách khái quát thì đây là cách thức phát triển dựa vào các công cụ lập trình gốc được các hãng phân phối. Ví dụ như với Android chúng ta có Eclipse + Android SDK hoặc sử dụng Android Studio của chính Google, với iOS chúng ta có xCode đặc trưng của MacOS, với Window Phone thì chúng ta có Visual Studio và một số IDE của hãng thứ 3 khác… Điểm mạnh của native app là lập trình viên có thể sử dụng được hết sức mạnh của hệ điều hành, và ứng dụng chạy mượt mà mà hơn. Không những vậy hiện này đã có một số công ty đã phát triển công nghệ sử dụng một ngôn ngữ chung (C, Javascript…) để viết các ứng dụng native cho nhiều nền tảng (Android, iOS, Window phone). Ví dụ như Xamarin, Titaninum, NativeScript, Rem Object… là các công nghệ đa nền tảng (cross-platform), bạn chỉ cần biết một ngôn ngữ thì có thể viết được các ứng dụng native. Tuy vậy điểm yếu của native app là cần nhiều lập trình viên để tạo ra các ứng dụng cho từng nền tảng, dù hiện này các công nghệ cross-platform mới như Xamarin, Titaninum… đã giúp các lập trình viên giảm bớt khối lượng code phải viết, nhưng vẫn phải cần các lập trình viên chuyên cho từng nền tảng. Vì thế ứng dụng ra thị trường thường chậm hơn và chất lượng giữa các ứng dụng trên từng nền tảng có thể không đồng đều. - Mobile Web App Bản chất ứng dụng chỉ là webview được nhúng file html, css, js vào trong đó, hoặc nó truy cập trực tiếp vào website nhà cung cấp, hoàn toàn được phát triển bởi các lập trình viên web. Điểm mạnh của nó là có thể tạo ứng dụng rất nhanh, phù hợp với những ứng dụng có tính marketing cao, không phụ thuộc vào hệ điều hành, rất tiết kiệm chi phí (không cần phải thuê thêm các lập trình viên di động cho từng nền tảng). Nhưng bù lại nó hầu như không có khả năng tương tác với hệ điều hành, hiệu năng thấp, trải nghiệm người dùng không cao và chỉ hoạt động khi có internet. Mobile webapp hoàn toàn không phù hợp với nhưng ứng dụng có tính phức tạp cao, yêu cầu trải nghiệm người dùng lớn. - Hybrid App 6 Đây là 1 “con lai” của Native và Webmobile. Bản chất của Hybrid là giao diện được viết bằng ngôn ngữ HTML, CSS, Javscript nhưng nó cho phép gọi được các API của hệ thống để thao tác với hệ điều hành (đọc ghi file, bluetooth, camera, sensor). Vì vậy hybrid vừa tận dụng được sức mạnh của Mobile webapp vừa khả năng thao tác hệ thống của Native app. Trong tương lai công nghệ Hybrid hứa hẹn sẽ là sự thay thế hoàn hảo có các ứng dụng mobile hiện nay. Đại diện cho công nghệ Hybrid này có thể kể đến PhoneGap, Ionic, Trigger.IO… 7 Chương 2: IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA VÀ CÁC VẤN ĐỀ LIÊN QUAN 2.1. Angular JS 2.1.1. Angular Js là gì? AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško Hevery một nhân viên của Google. Hevery bắt đầu nghiên cứu và phát triển dự án vào năm 2009 và phiên bản 1.0 được cho ra mắt vào năm 2012. Do sự hữu ích của dự án này nên Google quyết định là công ty chính thức đứng đằng sau hỗ trợ sự phát triển của Angular JS. Angular JS là một khung làm việc được viết bằng Javascript (hay còn được gọi là Javascript Framework). Angular JS không chỉ đơn giản là một thư viện mà nó còn là một framework. Khác với các thư viện Javascript như jQuery, Angular JS đưa ra hướng dẫn cụ thể hơn cách cấu trúc mã lệnh HTML và Javascript. 2.1.2. Các đặc tính của Angular Js Angular Js bao gồm các đặc tính cơ bản sau:  Angular JS là một Framework phát triển dựa trên Javascript để tạo các ứng dụng web phong phú.  Angular JS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi dữ liệu, sử dụng mô hình MVC rất mạnh mẽ.  Mã nguồn Angular JS tự động thích ứng với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt.  Là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới. Chung quy lại có thể hiểu khi làm việc với Angular JS giống như là đang làm việc với Ajax, sử dụng cơ chế Bing Data, hoạt động theo mô hình MVC và sử dụng Service để tương tác với dữ liệu từ server. 2.1.3. Các thành phần chính của Angular Js Angular JS được chia làm ba thành phần chính sau đây: 8  Ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới HTML.  Ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular.  Ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags. 2.1.4. Các tính năng của Angular Js Sau đây là các tính năng cốt lõi quan trọng trong Angular JS  Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model và view.  Scope: (phạm vi) Đây là những đối tượng kết nối giữa Controller và View.  Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope.  Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với DB.  Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới.  Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh.  Templates: hiển thị thông tin từ controller, đây là một thành phần của views.  Routing: chuyển đổi giữa các action trong controller.  MVC: Mô hình chia thành phần riêng biệt thành Model, View…  Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm.  Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng. 2.1.5. Ưu và nhược điểm của Angular Js Ưu điểm:  Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch.  Angular sử dụng data bind giống .NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu.  Angular đang ở giai đoạn thử nghiệm.  Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh. Nhược điểm: 9  Không oan toàn: Được phát triển từ javascript nên nó không oan toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru.  Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì Angular cũng sẽ bị vô hiệu hóa. 2.2. Apache Cordova 2.2.1. Apache Cordava là gì ? Apache Cordova (trước kia được gọi là PhoneGap) là một framework phát triển ứng dụng di động nổi tiếng được tạo ra bởi Nitobi. Adobe Systems đã mua Nitobi vào năm 2011, đổi tên nó thành PhoneGap, và sau đó đã phát hành một phiên bản mã nguồn mở được gọi là Apache Cordova. Cordova là một nền tảng để xây dựng những ứng dụng di động (hybrid mobile applications) sử dụng HTML, CSS và Javascript. Những ứng dụng này có thể chạy trên nhiều nền tảng khác nhau như Android, iOS, Windows Phone… dựa trên các API để giao tiếp với thiết bị. 2.2.2. Các tính năng của Cordova Các tính năng chính của Cordova gồm có ba loại sau :  Command Line Interface (Cordova CLI): đây là một công cụ dùng để khởi tạo một dự án, xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiều plugin có ích để giúp việc phát triển dễ dàng hơn.  Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứng dụng di động cần đến.  Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị di động như cảm biến, camera, GPS… 2.2.3. Ưu và nhược điểm của Cordova - Các ưu điểm 10  Cordova đưa ra nền tảng để xây dựng các hybrid app, nên chúng ta có thể phát triển các ứng dụng chạy trên nhiều nền tảng khác nhau như IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu và tizien.  Sử dụng cordova sẽ nhanh hơn rất nhiều so với phát triển các ứng dụng thuần android, hay iOS.  Chỉ cần sử dụng Javascript khi làm việc với Cordova nên ta không cần thiết phải biết từng ngôn ngữ lập trình cho từng loại hệ điều hành. - Các nhược điểm  Hiệu suất của hybrid app thì sẽ chậm hơn các native app, nên chúng ta không dùng Cordova để xây dựng các ứng dụng lớn, yêu cầu nhiều dữ liệu và chức năng.  Các plugin có thể không tương thích với một số thiết bị và nền tảng. Một số API cũng chưa được hỗ trợ để giao tiếp với thiết bị. 2.3. Ionic Framework 2.3.1. Ionic Framework là gì? Ionic là một framework được sử dụng để phát triển các ứng dụng di động dựa trên nền tảng công nghệ web HTML5 để tạo ra các ứng dụng lai hóa (hybrid apps) chạy trên các thiết bị di động khác nhau. Ứng dụng lai hóa ở đây được hiểu cơ bản là các ứng dụng chạy trên nền các trình duyệt được nhúng vào trong một ứng dụng được cài đặt và có thể giao tiếp, truy cập, điều khiển sử dụng các thiết bị phần cứng và hệ điều hành mobile. Về phía người dùng thì không thể phân biệt đâu là ứng dụng dạng lai hóa hay ứng dụng thuần (native apps). Và các ứng dụng dạng lai hóa có nhiều lợi ích hơn các ứng dụng bản địa thuần túy, đặc biệt là có sự hỗ trợ của bên thứ 3 về nền tảng hỗ trợ, tốc độ phát triển và các thư viện mã nguồn. Hãy tưởng tượng Ionic như là một khung phát triển giao diện người dùng để xử lý tất cả các tương tác giao diện người dùng làm cho ứng dụng trở nên thuyết phục và dễ dàng 11 sử dụng. Kiểu như “Bootstrap for Native”, tức là như các ứng dụng Native nhưng có sự hỗ trợ bởi một loạt các thành phần giao diện động và thiết kế đẹp. Không giống như Responsive framework, Ionic rất gần với dạng native, nó có các thành phần và bố cục giao diện hoàn toàn giống như khi phát triển với một native SDK trên iOS hoặc Android. Ionic cũng giúp cho việc phát triển một cách dễ dàng nhưng mạnh mẽ để xây dựng các ứng dụng di động mà làm mờ đi sự tồn tại của công nghệ HTML5. Bản chất Ionic là một khung phát triển HTML5, nó cần một vỏ bọc native như Cordova hay PhoneGap để có thể khởi động như một ứng dụng native. Ionic được hỗ trợ mạnh mẽ bởi Cordova. Việc cài đặt và khởi tạo một dự án Ionic rất dễ dàng thông qua giao diện dòng lệnh dựa trên Node.js 2.3.2. Tính năng của Ionic Framework - Cordova - Mô hình phát triển ứng dụng MV Pattern - Angular JS được sử dụng trong Ionic là một MVC framework, nhưng theo thời gian thì nó trở nên thân thuộc hơn với khái niệm MVVM trong đó đối tượng scope hoạt động như một ViewModel, sử dụng và thao tác trong các Controller. - Các lập trình viên có thể linh hoạt sử dụng MVC hoặc là MVVM theo ý thích của họ, miễn là đạt được mục tiêu: Việc tách phần trình bày giao diện khỏi tầng nghiệp vụ logic thúc đẩy hiệu suất phát triển thiết bị và bảo trì. - Thao tác với DOM - Về khả năng tương tác với các thành phần DOM của webView. Angular nhúng jqLite, là một phần nhỏ gọn của thư viện jQuery cho phép thao tác DOM trong các trình duyệt theo cách tương thích, và không phụ thuộc vào trình duyệt. - Giao diện người dùng UI 12 Ionic thể hiện được tiềm năng của nó. là sự đơn giản. Giống như phong cách của Google, nó dựa trên sự tồn tại của HTML5 và CSS3 để cung cấp những trải nghiệm nhanh chóng. Chính xác là tốc độ có trong sự đơn giản của nó – không có bóng đổ hay góc tròn, chỉ đơn giản là phẳng – Như vậy, Ionic không hứa hẹn có được giao diện người dùng bóng bẩy, nhưng nó cung cấp giao diện một cách nhanh chóng và nhất 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 cho phép Ionic thêm các biến số và khả năng lồng cú pháp để mở rộng sự xuất hiện của giao diện ứng dụng. Ngoài ra, Ionic còn được đóng gói thêm các thư viện icon nguồn mở, khoảng 440 icons. - Giao diện dựng sẵn Widgets Các thành phần của Ionic cực kỳ đơn giản và mạnh mẽ. Chúng là các phần tử HTML phức hợp, được gọi là các directives, Ionic cũng cung cấp các Controller để bổ sung cho cấu hình và tương tác. Ionic cung cấp các khối xây dựng có phần đơn giản mà có thể được kết hợp để cung cấp giao diện người dùng phong phú. Ở phiên bản hiện tại v1.2.8, Ionic cung cấp một loạt các thành phần giao diện thiết kế sẵn bao gồm: form elements, header and footer bars, buttons, simple list, grid elements và các thành phần phổ biến khác nữa. - Pairing with Angular JS Ionic sử dụng AngularJS để tạo ra một framework tốt nhất cho việc xây dựng các ứng dụng di động đa nền tảng, nó cung cấp một bộ giao diện người dùng (UI) mã nguồn mở miễn phí đi cùng với các tính năng của AngularJS. Việc xây dựng ứng dụng dựa trên AngularJS đòi hỏi mã nguồn phải có khả năng mở rộng cao để bổ sung các tính năng mới. Tuy nhiên với Ionic, người ta có thể tái sử dụng các chức năng trong ứng dụng trên các nền tảng khác nhau đồng thời vẫn có thể tùy chỉnh giao diện người dùng cho mỗi nền tảng riêng biệt. Các thành phần trong Ionic như danh sách, slide... chính là các directive (các thuộc tính của thẻ 13 HTML dùng trong Angular) của AngularJS. Đó là lí do khiến cho Ionic và AngularJS kết hợp rất tốt với nhau. - Performance obsessed Ionic rất chú trọng đến hiệu suất, mặc dù nó ra đời chưa lâu. Ionic có một giao diện ổn định và tốc độ tốt, với các hiệu ứng chuyển động được áp dụng kỹ thuật tăng tốc phần cứng (hardware accelerating) và tối giản các thao tác với DOM. Ionic cũng không cần sử dụng đến jQuery, mặc dù người sử dụng có thể thêm vào nếu muốn. Ionic có thể tạo ra các ứng dụng phức tạp chạy trên cả iOS và Android. Một điểm thú vị của Ionic đồng thời giúp tăng hiệu suất hoạt động của nó, đó là Ionic không cố gắng tự mình thực hiện tất cả các công việc. Để đóng gói ứng dụng, Ionic sử dụng Cordova và tận dụng cấu trúc thư mục mặc định của nó. - Application scripting Ionic không những mang đến cho chúng ta CSS và markup tùy biến cao mà còn những mẫu thiết kế (design pattern) Javascript để giúp chúng ta xây dựng những ứng dụng giống nhất với những ứng dụng nat...