Установка ionic framework. Первое приложение сканер штрихкодов.

14.10.2015

И так у нас уже стоит PhoneGap версии 5 и выше. Если нет, идем сюда: Установка npm, node, cordova на windows

Далее ставим сам фреймворк:

npm install -g cordova ionic (-g значит глобальная установка т.е. не нужно будет устанавливать для каждого проекта/пользователя)

Фреймворк установлен! Теперь можно создать первое приложение. Для этого набираем в консоли:

ionic start myApp tabs  (myApp - название Вашего приложения, tabs - один из шаблонов фреймворка)

У фреймворка есть 3 шаблона: пустой (blank), с вкладками (tabs), с боковым меню (sidemenu). Выбирайте шаблон в зависимости от структуры Вашего будущего приложения.

Шаблоны ionic framework

Теперь попробуем создать наше первое приложение на ionic. Пусть это будет сканер штрихкодов.

Предполагается что следующие шаги выполнены:

ionic start myApp tabs (создаем проект с шаблоном вкладок)
cd myApp (заходим в папку с проектом)
ionic platform add android (добавляем платформу android если нужно)
ionic platform add ios (добавляем платформу ios если нужно)

И так, дальше установим плагин ngCordova который существенно упростит нам жизнь:) Почитайте про него.

Для тех у кого стоит bower:

bower install ngCordova

Для тех у кого не стоит bower, ставим его:

npm install -g bower

bower install ngCordova

Ну вот, теперь подключаем установленный плагин в наш проект. Вы наверное заметили, что после установки ngCordova в папке myApp/www/lib/ Появилась папка с плагином ngCordova. 

Открываем index.html и между <script src="lib/ionic/js/ionic.bundle.js"></script> и <script src="cordova.js"></script> вставляем:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
(вместо ng-cordova.js можно использовать и минифицированную версию ng-cordova.min.js, посмотрите в папку myApp/www/lib/ngCordova/dist)

Установка ngCordova

Далее открываем файл myApp\www\js\app.js и включаем в секцию angular.module наш плагин:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova']) (в конец добавили ngCordova)

И сделаем еще некоторые изменения, в результате файл app.js примет вид:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/home');

});

Теперь в папке templates переименуем любой файл (кроме tabs.html) в tab-home.html, а остальные удаляем (опять же кроме tabs.html).

Открываем templates/tab-home.html и сохраняем туда следующий код:

<ion-view view-title="myApp">
  <ion-content ng-controller="BarcodeController" class="padding"> (в ng-controller указан контроллер который описан в js/controllers.js)
    <button class="button button-dark button-block button-large icon-left ion-android-camera button-full" ng-click="scanBarcode()">Сканировать код</button> (в ng-click указан метод вышеуказанного контроллера)
  </ion-content>
</ion-view>

Открываем файл templates/tabs.html и вставляем следующее содержимое:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Главная" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/home"> (оставляем только одну вкладку)
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Далее открываем файл js/controllers.js и приводим его к следующему виду:

angular.module('starter.controllers', [])

.controller('HomeCtrl', function($scope) {

})

.controller("BarcodeController", function($scope, $cordovaBarcodeScanner) {

        $scope.scanBarcode = function() { (               //метод, который сработает после нажатия на кнопку "Сканировать код")
            $cordovaBarcodeScanner.scan().then(
                function($imageData) {                    // Штрихкод распознался, все ок.
                    alert("We got a barcode\n" +
                        "Result: " + $imageData.text + "\n" + 
                        "Format: " + $imageData.format + "\n" +
                        "Cancelled: " + $imageData.cancelled);
                }, function(error) {                      // Ошибка
                    alert("Ошибка сканирования: " + error);
                }
            );
        };

});

Вот и все. Теперь можно проверить в действии. Важное замечание, не пытайтесь протестировать это через ionic serve, работать не будет! Обязательно тестируем на виртуальном или реальном девайсе.

Например можно скачать и установить Genymotion для тестов на android. Программа бесплатна с ограниченными возможностями и для личного пользования. Посмотреть сайт программы.

Думаю с установкой проблем не будет. Я выбирал android Google Galaxy Nexus 4.3 API 18.

После запуска виртуальной android системы, билдим приложение:

ionic build android

После удачного билда, идем в папку с только что созданным apk файлом и простым перетаскиванием тащим на окошко запущеного android.

comments powered by HyperComments