Tìm hiểu về xây dựng ứng dụng di động bằng AngularJS

Trên TechBlog đã có nhiều bài viết giới thiệu sơ lược về AngularJS nên mình đi thẳng luôn vào vấn đề muốn chia sẻ trong bài viết này. AngularJS có rất nhiều ứng dụng, đặc biệt trong đó là xây dựng ứng dụng cho điện thoại di động smartphone. Sau đây mình xin chia sẻ sơ lược về việc cài đặt và xây dựng ứng dụng mobile với AngularJS.

Với AngularJS, chúng ta có sự hỗ trợ tuyệt vời cho điện thoại di động, được viết bởi cả đội Angular và cộng đồng. Trong bài này, chúng ta sẽ làm việc thông qua hai cách khác nhau để cung cấp cho người dùng một trải nghiệm di động cho ứng dụng của chúng ta đó là :

Responsive web apps
Native with Cordova
Responsive Web Apps

Cách đơn giản nhất hỗ trợ di động với Angular là sử dụng những công cụ chúng ta đã biết và yêu mến -HTML và -CSS tạo nên một ứng dụng Angular. Kể từ khi những ứng dụng Angular được dựa trên HTML, thiết kế và đáp ứng tương tác chỉ là một vấn đề của việc xây dựng kiến trúc hỗ trợ các thiết bị khác nhau.

Cài đặt

Chúng ta có thể cài đặt ngTouch trong một số cách bất kỳ. Cách đơn giản nhất để cài đặt ngTouch là bằng cách tải nguồn từ trang angularjs.org . Ngoài ra, chúng ta có thể sử dụng Bower để cài đặt angular-touch:

$ bower install angular-touch --save

Dù bằng cách nào, chúng ta đều cần tham khảo các thư viện trong index.html như một script:

<script src="/bower_components/angular-touch/angular-touch.js"></script>

Cuối cùng, chúng ta cần chèn ngTouch như một phụ thuộc trong ứng dụng của chúng ta: angular.module('myApp', ['ngTouch']);

Bây giờ chúng ta đã sẵn sàng để tận dụng lợi thế của thư viện ngTouch.

ngTouch

Trình duyệt di động làm việc có một chút khác biệt so với các trình duyệt máy tính để bàn khi đối phó với các sự kiện nhấp chuột. Trình duyệt di động phát hiện một sự kiện tap sau đó chờ khoảng 300 ms để phát hiện bất kỳ tap khác. Sau khi sự chậm trễ này, trình duyệt bắn một sự kiện click. Thay vì đối phó với sự kiện click, chúng ta có thể phát hiện các sự kiến touch thay thế.

Thư viện ngTouch liên tục xử lý các chức năng này cho chúng ta thông qua chỉ thị ng-click và chăm sóc việc gọi sự kiện chính xác cho chúng ta. Sử dụng chỉ thị ngClick trên các thiết bị di động làm việc theo cùng một cách chính xác trên các trình duyệt di động cũng như trên các trình duyệt máy tính để bàn: <button ng-click="save()">Save</button>

ngTouch cũng giới thiệu hai chỉ thị mới: các chỉ thị swipe. Những chỉ thị đập cho phép chúng ta để nắm bắt những swipe người sử dụng, hoặc trái hoặc phải trên màn hình. Đây là những hữu ích cho các tình huống mà chúng ta muốn người dùng có thể vuốt qua một bức ảnh bộ sưu tập ảnh hoặc một phần mới của ứng dụng của chúng ta.

Chỉ thị ngSwipeLeft phát hiện khi một phần tử được đập từ bên phải sang bên trái, trong khi các chỉ thị ngSwipeRight phát hiện khi một phần tử được đập từ bên trái sang bên phải.

Sử dụng ngswipe* thật dễ dàng. Ví dụ, giả sử chúng ta có một danh sách các email và chúng ta muốn tiết lộ hành động cho mỗi email, như phổ biến ứng dụng email di động Mailbox App.

Swipe directives example
Swipe directives example
angular-gestures and Multi-Touch Gestures

angular-gestures là một mô-đun Angular cung cấp cho chúng ta khả năng xử lý các hành động cảm ứng đa điểm trong ứng dụng Angular. Nó được dựa trên thư viện rất phổ biến và được kiểm tra kỹ Hammer.js

Thư viện Hammer.js cho chúng ta một loạt các sự kiện chung cho sự kiện màn hình cảm ứng:

Tap
DoubleTap
Swipe
Drag
Pinch
Rotate
Thư viện angular-gestures cho phép chúng ta sử dụng những sự kiện này bằng cách sử dụng các chỉ thị Angular. Ví dụ, tất cả các chỉ thị sau đây có sẵn cho chúng ta:

hmDoubleTap : ‘doubletap’,
hmDragStart : ‘dragstart’,
hmDrag : ‘drag’,
hmDragUp : ‘dragup’,
hmDragDown : ‘dragdown’,
hmDragLeft : ‘dragleft’,
hmDragRight : ‘dragright’,
hmDragEnd : ‘dragend’,
hmHold : ‘hold’,
hmPinch : ‘pinch’,
hmPinchIn : ‘pinchin’,
hmPinchOut : ‘pinchout’,
hmRelease : ‘release’,
hmRotate : ‘rotate’,
hmSwipe : ‘swipe’,
hmSwipeUp : ‘swipeup’,
hmSwipeDown : ‘swipedown’,
hmSwipeLeft : ‘swipeleft’,
hmSwipeRight : ‘swiperight’,
hmTap : ‘tap’,
hmTouch : ‘touch’,
hmTransformStart : ‘transformstart’,
hmTransform : ‘transform’,
hmTransformEnd : ‘transformend’
Cài đặt angular-gestures

Để cài đặt thư viện angular-gestures trong ứng dụng của chúng ta, cần chèn thư viện gesture.js (hoặc gesture.min.js) trong trang của chúng ta. Chúng ta cũng có thể tải xuống các tập tin gestures.js trực tiếp từ trang GitHub hoặc chúng ta có thể sử dụng Bower để cài đặt nó.

Cài đặt angular-gestures sử dụng Bower, chúng ta có thể cài đặt nó với dòng lệnh sau:

$ bower install --save angular-gestures

Cuối cùng, chúng ta cần phải thiết lập angular-gestures là một phụ thuộc cho các ứng dụng Angular của chúng ta:

angular.module('myApp', ['angular-gestures']);

Sử dụng angular-gestures

Nếu chúng ta muốn cho phép người dùng xoay, và phóng to hình ảnh trong một bộ sưu tập ảnh. Chúng ta có thể sử dụng thư viện Hammer.js để xử lý chức năng này. Trong ví dụ này, chúng ta sẽ thiết lập một dịch ngẫu nhiên trên các yếu tố duy nhất cho việc double taps. Để làm điều đó, chúng ta cần phải thiết lập HTML bằng cách sử dụng chỉ thị hm-tap.

<div id="photowrapper">
<div class="cardProps" hm-tap="tapped($event)">
<div class="tradingcard">
<img src="/img/ari.jpeg" alt="" />
<span>Ari</span>
</div>
<div class="tradingcard">
<img src="/img/nate.jpeg" alt="" />
<span>Nate</span>
</div>
</div>
</div>

Không có gì đặc biệt về HTML này khác với thực tế mà chúng ta có một chỉ thị gọi là hm-tap. Chỉ thị angular-gestures này xử lý những gì sẽ xảy ra khi một người nào đó gõ nhẹ lên hình ảnh.

Trong ví dụ trên, chúng ta gọi một chức năng mà chúng ta sẽ xác định $scope như tapped(). Chúng ta đã xác định chức năng này như sau:

$scope.tapped=function($event) {
var ele = $event.target;varx=Math.floor(Math.random()\ast 200)+1,y=Math.floor(Math.random()\ast 100)+1,z=Math.floor(Math.random()\ast 6)+1,rot=Math.floor(Math.random()\ast 360)+1;$(ele).css({
'transform':
"translate3d("+x+"px,"+y+"px,"+z+"px)" +
"rotate("+rot+"deg)"
});
}

Thư viện angular-gestures cho chúng ta truy cập vào sự kiện thông qua một đối số đặc biệt gọi là event. Chúng ta sẽ sử dụng các mục tiêu của sự kiện ( event.target) để xác định các yếu tố người dùng nhấp chuột vào và sau đó chúng ta có thể bùng nổ và làm tất cả các loại thủ thuật gọn gàng với phần tử.

Native Applications with Cordova

Cordova là một framework mã nguồn mở miễn phí cho phép chúng ta tạo ra các ứng dụng di động sử dụng các API web tiêu chuẩn thay vì mã nguồn gốc. Nó cho phép chúng ta viết ứng dụng di động bằng cách sử dụng HTML, JavaScript, CSS, và AngularJS thay vì cần phải viết Objective-C hoặc Java (cho iOS hoặc Android, tương ứng).

Cordova
Cordova
Cordova cho thấy thiết bị truy cập bản địa thông qua các API JavaScript cho phép chúng ta vận hành thiết bị cụ thể, chẳng hạn như nhận được vị trí bản địa hoặc sử dụng camera. Cordova được thiết kế nguyên bản với kiến ​​trúc plugin, vì vậy chúng ta có thể tận dụng lợi thế của Cordova bổ sung vào cộng đồng được xây dựng, chẳng hạn như truy cập âm thanh tự nhiên hoặc bổ sung mã vạch quét.

Một trong những lợi ích của việc sử dụng Cordova là chúng ta có thể tái sử dụng mã ứng dụng Angular của chúng ta hỗ trợ cho môi trường di động. Tất nhiên, có một số vấn đề mà chúng ta sẽ giải quyết, chẳng hạn như hiệu suất và truy cập thành phần tự nhiên.

Cài đặt

Cordova được phân phối như một gói npm, vì vậy chúng ta có thể sử dụng npm để cài đặt nó. Nếu bạn chưa cài đặt npm, đầu tiên chắc chắn rằng bạn cài đặt node.

$ npm install -g cordova

Installing Cordova
Installing Cordova
Bắt đầu với Cordova

Việc bắt đầu với Cordova thật đơn giản. Chúng ta sử dụng bộ sinh để tạo ra điểm khởi đầu của ứng dụng Cordova. Chúng ta hãy gọi nó là GapApp.

Bộ sinh cần tới 3 thông số:

project-directory (nơi chúng ta tạo ứng dụng)
package-id (tên gói)
name (tên ứng dụng)
$ cordova create gapapp io.fullstack.gapapp "GapApp"

Dòng này thiết lập một thư mục gọi là gapapp (xác định bởi tham số đầu tiên) với một gói ID io.fullstack.gapapp và tên dự án GappApp.

Tiếp theo, chúng ta hãy thay đổi vào thư mục:

$ cd gapapp/

Chúng ta sẽ xây dựng cho iOS (mặc dù quá trình này là như nhau cho các nền tảng khác). Để thêm iOS là một nền tảng, chỉ cần thêm nó vào dự án bằng cách sử dụng lệnh Cordova sau:

$ cordova platform add ios

Một khi bạn đã tập hợp đó, xây dựng ứng dụng cơ bản:

$ cordova build ios

Bây giờ, do một số phức tạp với các công cụ phát triển của Apple, chúng ta sẽ phải xây dựng các ứng dụng của mình để làm cho nó chạy trên giả lập iOS địa phương.

Chúng ta hãy điều hướng đến thư mục ứng dụng của chúng ta, nơi chúng ta sẽ tìm thấy thư mục nền tảng. Bên trong của nó, chúng ta sẽ tìm thấy io / thư mục đã được tạo ra cho chúng ta bằng cách add lệnh nền tảng trên.

Generated project
Generated project
Trong XCode, mở dự án mà chúng ta vừa tạo ra. Hãy chắc chắn rằng các mô phỏng được thể hiện trong định danh nền tảng ở trên cùng của XCode.

Build in Xcode
Build in Xcode
Click chạy.

Một khi bạn làm như vậy, chúng ta sẽ thấy ứng dụng Cordova cơ bản bắt đầu chạy trên mô phỏng.

Barebones Cordova app
Barebones Cordova app
Quy trình phát triển Cordova

Cordova năng lực dự án Phone Gap, đã được chấp nhận vào Quỹ Apache. Dự án bao gồm một công cụ dòng lệnh mà chúng ta sẽ sử dụng để tương tác với các ứng dụng bản địa của chúng ta, từ sáng tạo đến triển khai.

Nền tảng

Tại thời điểm này, chúng ta đã tạo ra ứng dụng của chúng ta và thêm một nền tảng (trong trường hợp này là iOS).

Nền tảng có sẵn cho các ứng dụng Cordova khác nhau tùy thuộc vào sự phát triển môi trường chúng ta đang sử dụng. Trên máy Mac, các nền tảng có sẵn là:

iOS
Android
Blackberry 10
Firefox OS
Đối với một máy tính Windows, chúng ta có thể phát triển cho các nền tảng sau:

Android
Windows Phone 7, 8
Windows 8
Blackberry 10
Firefox OS
Nếu chúng ta quên nền tảng có sẵn, chúng ta có thể chạy các lệnh nền tảng để kiểm tra trong đó có sẵn và đã cài đặt chưa:

$ cordova platforms ls

Để thêm một nền tảng, chúng ta có thể sử dụng lệnh platform add (như chúng ta đã làm ở trên):

$ cordova platform add android

Để loại bỏ một, chúng tôi có thể sử dụng rm hoặc lệnh gỡ bỏ:

$ cordova platform rm blackberry10

Plugins

Cordova được xây dựng trở thành mô-đun đáng kinh ngạc, với mong chờ rằng chúng ta sẽ cài đặt tất cả các thành phần không cốt lõi với hệ thống plugin. Để thêm một plugin cho dự án của chúng ta, chúng ta sẽ sử dụng lệnh cắm thêm:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

Chúng ta có thể liệt kê các plugin hiện tại mà chúng ta đã cài đặt bằng cách sử dụng lệnh ls bổ sung:

$ cordova plugins ls
[ 'org.apache.cordova.geolocation' ]

Cuối cùng, chúng ta có thể loại bỏ một plugin sử dụng lệnh plugin rm:

$ cordova plugins rm org.apache.cordova.geolocation

Xây dựng

Theo mặc định, Cordova tạo ra một khung dự án mà các tập tin được xem trong thư mục www/ trong thư mục dự án. Khi Cordova xây dựng dự án, nó sao chép các tập tin đó và đặt chúng trong các thư mục nền tảng đặc trưng của chúng.

Để xây dựng ứng dụng, chúng ta sử dụng một lệnh Cordova khác, lệnh build:

$ cordova build

Nếu không có quy định cụ thể bất kỳ nền tảng xây dựng cho, lệnh này sẽ xây dựng cho tất cả các nền tảng, chúng ta đã liệt kê trong dự án của chúng ta.

Chúng ta có thể giới hạn phạm vi bằng cách xây dựng chỉ cho các nền tảng cụ thể, chẳng hạn như:

$cordovabuildios$ cordova build android

Việc xây dựng lệnh đảm bảo rằng mã nền tảng cụ thể cần thiết được thiết lập để ứng dụng của chúng ta có thể được biên dịch. Trong thực tế, chúng ta đang làm điều tương tự như gọi cordova prepare && cordova compile .

Emulating and Running

Cordova cũng làm cho nó có thể chạy một mô phỏng để mô phỏng chạy các ứng dụng trên thiết bị. Làm như vậy thì, tất nhiên, chỉ có thể nếu một giả lập được cài đặt và thiết lập trên môi trường phát triển địa phương của chúng ta.

Giả sử mô phỏng của chúng tôi được thiết lập trong môi trường phát triển của chúng ta, chúng ta có thể bảo Cordova khởi động và cài đặt các ứng dụng trong mô phỏng:

$ cordova emulate ios

Đối với iOS, chúng ta có thể phải xây dựng dự án (như chúng ta đã làm ở trên) sử dụng XCode nếu môi trường giả lập không được thiết lập trên máy tính của chúng ta.

Nó cũng có thể chạy các ứng dụng trên một thiết bị đặc biệt bằng cách sử dụng lệnh chạy thay thế. Các lệnh chạy ra mắt ứng dụng trên một thiết bị hoặc trên giả lập nếu không có thiết bị được tìm thấy và có sẵn.

$ cordova run ios

Trong phát tiển

Nó có thể là cồng kềnh để thực hiện thay đổi một phần của ứng dụng của chúng ta và sau đó biên dịch lại các ứng dụng để xem các thay đổi được phản ánh trong đó. Để giúp đẩy nhanh quá trình phát triển ứng dụng web ở phía bên của các ứng dụng, chúng ta có thể sử dụng lệnh serve để phục vụ cho một phiên bản địa phương thư mục www/ của chúng ta tới một trình duyệt web.

$ cordova serve ios
Static file server running at
=> http://0.0.0.0:8000/
CTRL + C to shutdown

Bây giờ, chúng ta có thể sử dụng trình duyệt web và điều hướng đến URL:

http://localhost:8000/ios/www/index.html.

thư mục www/ của ứng dụng đang được phục vụ qua HTTP, do đó chúng ta có thể xây dựng nó và xem nó thay đổi khi chúng ta thay đổi các ứng dụng.

Khi chúng ta thực hiện thay đổi, chúng ta cần phải chắc chắn rằng chúng ta xây dựng lại các ứng dụng:

$ cordova build ios

Building using Safari
Building using Safari
Angular Cordova Service

Khi ứng dụng Cordova đã sẵn sàng, thiết bị đã được kết nối, và mọi thứ sẵn sàng để đi, Cordova khởi động sự kiện trình duyệt gọi là deviceready .

Chúng ta thiết lập một mô-đun Angular lắng nghe sự kiện deviceready. Chúng ta cũng sử dụng một dịch vụ lắng nghe sự kiện deviceready và giải quyết những lời hứa của chúng ta tùy thuộc vào sự kiện này có bị sa thải hay không.

angular.module('fsCordova', [])
.service('CordovaService', ['$documen{t}^{\prime }{,}^{\prime }$q',
function($document,$q) {
var d = $q.defer(), resolved = false;
var self = this;
this.ready = d.promise;
document.addEventListener('deviceready', function() {
resolved = true;
d.resolve(window.cordova);
});
// Check to make sure we didn't miss the
// event (just in case)
setTimeout(function() {
if (!resolved) {
if (window.cordova) d.resolve(window.cordova);
}
}, 3000);
}]);

Bây giờ, chúng tôi đặt fsCordova là một phụ thuộc cho mô-đun của chúng ta:

angular.module('myApp', ['fsCordova'])
// ...

Chúng ta có thể sử dụng CordovaService để xác định xem Cordova, trong thực tế, đã sẵn sàng và chúng ta có thể thiết lập logic phụ thuộc vào các dịch vụ đang sẵn sàng:

angular.module('myApp', ['fsCordova'])
.controller('MyController',
function($scope, CordovaService) {
CordovaService.ready.then(function() {
// Cordova is ready
});
});

Quy trình phát triển

Khi chúng ta xây dựng ứng dụng, chúng ta sẽ sử dụng quy trình làm việc như sau:

Bắt đầu máy chủ nội bộ (Cordova serve [platform])
Chỉnh sửa ứng dụng
Xây dựng lại ứng dụng (Cordova build [platform]
Quy trình này, mặc dù hơi cồng kềnh, là làm thế nào chúng ta sẽ chỉnh sửa ứng dụng của chúng ta.

Nếu ứng dụng của chúng ta không dựa trên nền tảng Cordova, chúng ta có thể chỉnh sửa bên ngoài của mô phỏng và trong trình duyệt web của chúng ta. Trong trường hợp này, chúng ta có thể làm việc cụ thể với việc xây dựng ứng dụng, thay vì cần phải xây dựng lại và triển khai lại các ứng dụng.

Trên đây tôi đã giới thiệu sơ lược về việc xây dựng ứng dụng di động với AngularJS thông qua: Responsive Web Apps và Native Application with Cordova.```JavaScript