ionic-framework
Ионное облако для йоманских ионических проектов

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript

Ионная платформа (ионное облако) для Йо (Йоман) Ионные проекты

Ионная платформа :

Создавайте, нажимайте, развертывайте и масштабируйте свои ионические приложения, простым способом.

Название Описание:

Ionic Platform - это облачная платформа для управления и масштабирования кросс-платформенных мобильных приложений. Интегрированные сервисы позволяют вам и вашей команде эффективно создавать, развертывать и расширять ваши приложения.

Цель документа:
Ionic Platform хорошо работает со стандартными Ionic-проектами. Но проекты, следующие за любой нестандартной структурой каталогов, могут столкнуться с несколькими препятствиями. В этих документах приводятся инструкции по использованию Ionic Platform в проектах Ionic, созданных с помощью Yeoman.

Объем документа:
В этом документе описываются основные этапы создания Ionic-проекта с использованием Yeoman и его интеграции с Ionic Platform с использованием веб-клиента Ionic Platform. В этом документе описываются основные этапы использования Ionic Deploy, Ionic Analytics и Ionic Push.

Целевая аудитория:
Целевая аудитория для этого документа - разработчики Web / Mobile App, обладающие знаниями как новичка, так и экспертного уровня, которые знакомы с нижеприведенными предварительными условиями.

Предпосылки:
Перед тем, как попробовать этот документ, вы должны ознакомиться со следующими структурами / инструментами.

AngularJs: https://docs.angularjs.org/guide
IonicFramework: http://ionicframework.com/docs/guide
Йоман: http://yeoman.io/codelab/index.html
Ионный генератор: https://github.com/diegonetto/generator-ionic
Ионная платформа: https://ionic.io/platform

Генератор ионной структуры

Генератор для Ionic Framework от Yeoman, инструмент для создания веб-сайтов для современных webapps

Node.js - это среда выполнения JavaScript, встроенная в движок JavaScript V8 от Chrome. npm - это менеджер пакетов для JavaScript. Загрузите и установите узел (и npm) из http://nodejs.org

$ npm install npm –g
$ npm install -g yo

Йомен помогает вам начинать новые проекты, предлагая лучшие практики и инструменты, которые помогут вам оставаться продуктивными.

$ yo ionic [app-name]

В package.json включить следующие в devDependencies

"grunt-string-replace": "^1.2.1"

В bower.json включаются следующие в зависимости

"ionic-platform-web-client": "^0.7.1"

В Gruntfile.js измените папку сценариев на «js» . При необходимости измените index.html .

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

Затем запустите

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

ионно-платформенные веб-клиент

Веб-клиент, который обеспечивает взаимодействие с платформой Ionic.

Нам нужен код, позволяющий вашему приложению разговаривать с Ionic Platform. Нам нужно добавить веб-клиент платформы Ionic для приложения Ionic для взаимодействия с плагинами и платформой Ionic.io.

$ ionic io init

В приложении app.js добавлена зависимость модуля «ionic.service.core» . В Gruntfile.js добавьте задачу grunt «ionicSettings», как показано ниже.

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

Добавьте «ionicSettings» в init и сжимайте задачи после копирования . В index.html переместите тег ниже после всех объявлений тегов.

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

Затем запустите

$ Grunt serve

Ионное развертывание

Нажимайте обновления в реальном времени на свои производственные приложения и управляйте историей версий.

Ionic Deploy позволяет вам обновлять приложение по требованию, для любых изменений, которые не требуют бинарных изменений, что экономит ваши дни или даже недели ожидания. Следуйте приведенной ниже процедуре, чтобы настроить Ionic Deploy для вашего приложения.

В Gruntfile.js добавьте задачу «развернуть», как показано ниже.

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});

затем выполните

$ ionic plugin add ionic-plugin-deploy

Ионный код развертывания:

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

Развертывание обновлений:

Отправьте новый код для своего приложения.

Создайте apk и установите приложение. Внесите несколько изменений в свой код и разверните изменения, используя « grunt deploy ». Затем обновите его из своего приложения.

Вы также можете развернуть его с панели инструментов apps.ionic.io . Вы можете развернуть приложение без параметра развертывания. Затем на панели управления вы можете добавить метаданные и сведения о версии и развернуть приложение оттуда.

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

Ионная аналитика

Просмотрите живой канал событий или сырое / уникальное количество событий / пользователей с течением времени.

Сколько пользователей сейчас находится в вашем приложении? Сколько из них будет использовать ваше приложение завтра или на следующей неделе? Без информации вы не можете сказать, используется ли ваше приложение в том виде, который вы ожидаете. Следуйте приведенной ниже процедуре настройки Ionic Analytics для своего приложения.

В app.js добавьте зависимость модуля « ionic.service.analytics » после запуска ionic.service.core. Запустите метод регистров аналитики в функции запуска нашего модуля.

$ionicAnalytics.register();

В Ionic Analytics каждое отслеживаемое действие, которое пользователь делает в вашем приложении, представлено объектом события. Событие - это одно действие, выполненное в определенный момент времени. Чтобы отслеживать собственные события, вызовите $ionicAnalytics.track(eventType, eventData) всякий раз, когда происходит действие.

$ionicAnalytics.track('User Login', {
  user: $scope.user
});

Директива ion-track-tap отправляет событие, когда его хост-элемент используется. Соответствующая директива данных о ионных дорожках привязывает данные о событиях.

<button ion-track-tap="eventType" ion-track-data="expression"></button>

На панели инструментов apps.ionic.io вы можете просмотреть следующие данные аналитики,

События: просмотр необработанного количества событий с течением времени или количество уникальных пользователей, завершивших событие. Событие может быть любым, от пользователя, загружающего приложение, до подтверждения покупки.

Funnels: Воронка - это последовательность действий, которые вы ожидаете от пользователей в своем приложении, что приведет к определенной цели. Вдумчивое использование воронки позволит вам повысить коэффициент конверсии.

Сегменты: просмотр событий со временем, сгруппированные по указанному свойству. Или, подсчитайте процент событий, которые соответствуют данному свойству. Сегменты помогают понять вашу базу пользователей и посмотреть, как изменяются свойства с течением времени.

Удержание. Отслеживайте, как долго пользователи работают в вашем приложении, прежде чем перестанут его использовать. Или укажите, сколько времени требуется пользователям для достижения определенной цели, например, завершенной продажи.

Пульс: живой поток событий, поступающих от ваших пользователей.

Ионная толчка

Отправляйте целевые и автоматические push-уведомления своим пользователям.

Ionic Push позволяет создавать целевые push-уведомления через простую панель мониторинга, которая будет отправляться автоматически, когда пользователи будут соответствовать определенным критериям, и предлагает простой API для отправки push-уведомлений с ваших собственных серверов.

Профили Android Push:

Уведомления Android push используют службу облачных сообщений Google (GCM). Откройте консоль Google Developers и создайте проект. Скопируйте свой номер проекта . Это будет идентификатор отправителя GCM или номер проекта GCM .

В разделе « Диспетчер API » включите API облачных сообщений Google . Затем перейдите в раздел « Учетные данные » и выберите «Создать учетные данные», затем выберите «Ключ API», затем «Ключ сервера». Назовите свой ключ API и оставьте поле « Принять запросы от ...» пустым и нажмите « Создать» . Сохраните ключ API !

Аутентификация:

Перейдите на панель инструментов вашего приложения на платформе Ionic и выберите Настройки -> Сертификаты . Если вы еще этого не сделали, создайте новый профиль безопасности, а затем нажмите « Изменить» . Запишите тег профиля .

Теперь перейдите на вкладку Android и найдите раздел с облачными сообщениями Google Cloud , введите ключ API, который вы создали в консоли разработчика Google, затем нажмите « Сохранить» . Откройте « Настройки» -> «Ключи API» . Под маркерами API создайте новый токен и скопируйте его. Это будет ваш токен API .

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init

Примечание. Для подключения phonegap-plugin-push требуется репозиторий поддержки Android версии 32+

В вашем приложении app.js добавьте зависимость « ionic.service.push » после the ionic.service.core

Ионный код:

Инициализируйте службу и зарегистрируйте свое устройство в функции запуска вашего модуля. Вам понадобится токен устройства, зарегистрированный пользователем для отправки уведомлений пользователю.

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();

затем выполните

$ grunt build:android --debug

Ionic Push позволяет создавать целевые push-уведомления через панель управления. Вы также можете отправлять уведомления с сервера в следующем формате.

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"

Примечание. Действия по настройке Ionic Push для iOS одинаковы, за исключением создания Push-профилей. Для создания профилей push iOS обратитесь к http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles.

Пример приложения

Скачайте пример приложения здесь .

Пример приложения прилагается здесь для справки.

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

Примечание. Это не отдельный проект. Приведенный код предназначен только для сравнения с проектом, созданным и реализованным с использованием процедур, приведенных выше в этом документе, в случае возникновения каких-либо проблем или ошибок.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow