logo

Thông báo

Icon
Error

Chia sẻ
Tùy chọn
Xem
Xem bài viết cuối
Offline admin  
#1 Đã gửi : 16/03/2015 lúc 05:30:55(UTC)
admin

Danh hiệu: Administration

Chức danh:

Nhóm: Administrators
Gia nhập: 23-07-2013(UTC)
Bài viết: 6,102
Man
Viet Nam
Đến từ: Vietnam

Cảm ơn: 10 lần
Được cảm ơn: 2 lần trong 2 bài viết

XÂY DỰNG ỨNG DỤNG DI ĐỘNG BẰNG 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ặcgesture.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;

    var x = Math.floor(Math.random() * 200) + 1,

           y = Math.floor(Math.random() * 100) + 1,

           z = Math.floor(Math.random() * 6) + 1,

           rot = Math.floor(Math.random()*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ư:

$ cordova build ios

$ 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’, [‘$document’, ‘$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.

Ai đang xem chủ đề này?
OceanSpiders 2.0
Chủ đề tương tự
Xây dựng thương hiệu (Chiến lược kinh doanh)
Bởi admin 20-08-2019 lúc 02:37:14(UTC)
Lưu ý khi kinh doanh vật liệu xây dựng (Mô hình kinh doanh lớn)
Bởi Ellry 11-04-2017 lúc 10:23:35(UTC)
Cách thức xây dựng blog vệ tinh (SEO)
Bởi admin 31-08-2016 lúc 07:39:07(UTC)
Phương thức xây dựng vệ tinh (SEO)
Bởi admin 31-08-2016 lúc 06:07:03(UTC)
8 bước quan trọng trong việc xây dựng hệ thống quản lý thành công (Giải pháp cho doanh nghiệp)
Bởi admin 11-08-2016 lúc 03:41:34(UTC)
Phương pháp xây dựng thương hiệu chiến lược (Marketing và bán hàng)
Bởi admin 10-08-2016 lúc 07:30:44(UTC)
Làm giàu từ việc xây dựng trang trại cà phê chồn (Tấm gương doanh nhân)
Bởi admin 10-06-2016 lúc 08:54:28(UTC)
Xây dựng chiến lược SEO hiệu quả (SEO)
Bởi admin 05-06-2016 lúc 01:29:10(UTC)
Xây dựng liên kết trong SEO (SEO)
Bởi admin 05-06-2016 lúc 12:49:54(UTC)
Một số khái niệm cần biết khi xây dựng website (Thiết kế web)
Bởi admin 22-03-2016 lúc 05:35:33(UTC)
Chiến lược xây dựng thương hiệu của StarBucks (Phân tích hoạt động kinh doanh)
Bởi admin 15-03-2016 lúc 01:15:23(UTC)
Hành trình xây dựng công ty triệu đô của “phù thủy trang điểm” Michelle Phan (Kỹ năng kinh doanh & kinh nghiệm lập nghiệp)
Bởi admin 14-11-2015 lúc 04:51:46(UTC)
Lưu ý trong thiết kế, xây dựng Spa (Mô hình kinh doanh lớn)
Bởi Ellry 15-10-2015 lúc 12:29:01(UTC)
Tự xây dựng Shop hoa tươi (Mô hình kinh doanh nhỏ)
Bởi Ellry 06-10-2015 lúc 09:17:49(UTC)
Hà Lan có thể xây dựng cầu thép bằng công nghệ 3D (Thế giới công nghệ)
Bởi thuyvan 22-07-2015 lúc 10:10:50(UTC)
Di chuyển  
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.

| Cung cấp bởi YAF.NET 2.2.4.14 | YAF.NET © 2003-2019, Yet Another Forum.NET
Thời gian xử lý trang này hết 2.599 giây.