[Vndemy] Trong bài viết này chúng ta cùng nhau tìm hiểu Ionic Framework, một khung làm việc để phát triển các ứng dụng di động dựa trên công nghệ HTML5, CSS3, Cordova và AngularJS. Và hàng loạt các tiện ích, công cụ khác để thiết kế và tạo ra các ứng dụng di động tương thích với các thiết bị khác nhau, đa nền tảng như Android, IOS, Windows Phone.

1. Giới thiệu Ionic Framework

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 [ native apps ]. Và các dụ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 sử dụng. Kiểu như “Bootstrap for Native”, tức là như các ứng dụng Native nhưng có sự hỗ bởi một loạt các thành phần giao diện, động và thiết kế đẹp.

Tìm hiểu Ionic Framework

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.

Ionic start app

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. Khung làm việc AngularJS

Được giới thiệu và phát hành vào cuối tháng 11 năm 2013. Ionic thật sự là mới mẻ nhưng đầy tiềm năng để trở thành chuẩn một chuẩn để xây dựng các ứng dụng mobile.

AngularJS

Do được xây dựng trên khung phát triển AngularJS từ Google, Ionic sử dụng AngularJS để cung cấp các cấu trúc ứng dụng, trong khi bản thân Ionic tập trung chính vào giao diện người dùng. Nói cách khác, chúng ta thấy được sự phối hợp ăn ý giữa sức mạnh của AngularJS và vẻ đẹp của Ionic UI.

Ionic cung cấp một tập các Angular directives (nghĩa là các phần tử HTML tùy biến) để làm các thành phần của nó, tạo ra sự dễ dàng để sử dụng các tiện ích gọn để viết mã HTML. Ngoài các directives, Ionic còn sử dụng và thêm vào các thành phần khác như: Angular touch recognizers, view animation logic, HTML sanitation, và asynchronous communication.

Mặc dù, Ionic có thành phần giao diện sử dụng Angular, nhưng developers vẫn có thể sử dụng và hỗ trợ các framework khác như Knockout hay EmberJS.

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.

AngularJS MVVM Pattern

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.

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

Khi nói đến giao diện người dùng, Ionic thể hiện được tiềm năng của nó. Vẻ đẹp thật sự của Ionic 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.

Giao diện người dùng

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.

5. Thành phần 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. Trong khi các framework khác có thể cung cấp các thành phần giao diện phức tạp hơn, Ionic cung cấp các khối xây dựng có phần đơn giản hơn mà có thể được kết hợp để cung cấp giao diện người dùng phong phú.

Thành phần giao diện dựng sẵn

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

6. Thiết kế tương thích Responsive Web Design (RWD)

Ionic được thiết kế để làm việc và hiển thị đẹp trên tất cả các thiết bị di động hiện nay. Với hàng loạt các thành phần thiết kế sẵn, kiểu chữ, mô hình tương tác, và theme.

Ionic responsive design

Bên trong, Ionic cũng thúc đẩy các nguyên tắc thiết kế giao diện tương thích để mang lại trải nghiệm tối ưu dựa trên kích thước màn hình hoặc mật độ điểm ảnh. Bất kỳ kịch bản RWD của một ứng dụng cụ thể đều hoạt động một cách độc đáo với Ionic.

7. Bổ sung của bên thứ ba

Thời điểm hiện tại Ionic chưa hỗ trợ các thành phần bổ sung plugins hay các thành phần mở rộng extensions của bên thứ ba. Và không hỗ trợ API thiết bị. Việc làm này sẽ được được thực hiện trong Angular là các directives và API thiết bị do Phonegap, Cordova cung cấp.

8. Tài liệu phát triển

Tài liệu của phát triển của Ionic đã hoàn toàn đầy đủ và có thể truy cập trực tuyến trên website chính thức. Ví dụ phong phú, các tài liệu cũng cho xem trước của hầu hết các thành phần trên thiết bị di động. Về tài liệu Angular cũng rất dễ dàng cho người mới tiếp cận.

(y)

About The Author