ionic-framework учебник
Начало работы с ионной каркасом

замечания

Версии

Установка или настройка

1. Установите Ionic Framework и Cordova (поскольку Ionic приложения основаны на Cordova) с использованием npm (диспетчер пакетов узлов):

Убедитесь, что в вашей системе установлена ​​обновленная версия Node.js. Если у вас нет Node.js, вы можете установить его здесь .

Кроме того, для пользователей Mac, последняя версия Xcode, установленная в вашей системе, предоставляет вам инструменты командной строки и iOS Simulator, загружаемые здесь .

Откройте окно терминала (Mac) или окно команд (Windows) и установите Cordova и Ionic:

$ npm install -g cordova ionic

На Mac вам, возможно, придется использовать sudo в зависимости от конфигурации вашей системы:

$ sudo npm install -g cordova ionic

Если на вашем компьютере уже установлены Кордова и Ион, убедитесь, что вы обновили последнюю версию:

$ npm update -g cordova ionic

или же

$ sudo npm update -g cordova ionic

Следуйте инструкциям платформы Android и iOS для установки необходимых зависимостей платформы.

Примечание: для разработки iOS требуется Mac OS X. iOS-симулятор через Ionic CLI требует пакета ios-sim npm, который можно установить с помощью команды:

$ sudo npm -g install ios-sim

2. Запустите новый Ионный проект:

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

$ ionic start myApp blank

или же

$ ionic start myApp tabs

или же

$ ionic start myApp sidemenu

3. Проверьте приложение Ionic:

Чтобы протестировать ваше приложение Ionic в обозревателе настольных систем на платформах iOS и Android:

$ ionic serve --lab

В то время как ionic serve --lab подходит для тестирования пользовательского интерфейса приложения на нескольких платформах, это может привести к некоторым проблемам для Javascript Console или Element Inspection, в этом случае то, что вы можете предпочесть:

$ ionic serve

Чтобы протестировать ваше ионное приложение в эмуляторе:

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios

Замените ios с Android для тестирования эмулятора Android:

$ ionic build android
$ ionic emulate android

Чтобы протестировать ваше приложение Ionic на устройстве Android, подключенном через USB:

$ ionic run android

Чтобы проверить ваше приложение Ionic на устройстве iOS, подключенном через USB:

$ ionic run ios --device

Введение и установка и настройка Ionic Framework

Ионная структура

Кросс-платформенная платформа разработки мобильных приложений с использованием веб-технологий Angular JS и Front End.

Официальный сайт : http://ionicframework.com/

Документация : http://ionicframework.com/docs/

Установка и настройка

Для установки Ionic требуется NPM (диспетчер пакетов узлов) и Cordova.

Вы можете скачать и установить Npde JS отсюда, который поставляется с NPM из коробки.

Чтобы загрузить Apache Cordova, вы можете использовать NPM из командной строки

npm install -g cordova

Если у вас уже есть NPM и Cordova, вы можете установить ионную инфраструктуру из командной строки, используя следующую команду.

npm install -g ionic

Это позволит установить и настроить ионную инфраструктуру, чтобы вы могли использовать ее из командной строки.

Примечание * На основе вашей системной среды вам может потребоваться выполнить с правами администратора.

Запуск нового проекта

Чтобы запустить новый проект Ionic Framework, вы можете использовать следующую команду

ionic start myproject

или же

ionic start myproject [template_name]

Шаблоны:

Ionic позволяет вам создавать проекты с использованием некоторых встроенных шаблонов

tabs (по умолчанию): создаст простое приложение со списком вкладок.

sidemenu : создаст ионное приложение с боковым меню.

blank : создаст пустое ионное приложение.

который создаст новую папку с именем myproject со всеми файлами ионных проектов.

для проверки проекта в вашем браузере вы можете использовать следующую команду

ionic serve --lab

или же

ionic serve

Запуск эмуляции Чтобы выполнить или протестировать приложение на эмуляторе или телефоне, сначала вам нужно будет добавить платформу, для которой вы можете использовать следующую команду

ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]

Имена платформ, на которые вы можете прямо указывать android и ios для соответствующих платформ, можно назвать несколькими именами платформ, также разделенными пробелом.

Чтобы запустить приложение, вы можете использовать

ionic run [platform name]

За помощью вы можете использовать

ionic --help

или же

ionic help

См. Эту ссылку для подробного объяснения ионных cli.

См. Эту ссылку для компонентов CSS, доступных в ионной форме.

Обратитесь к этой ссылке для ссылки на API JavaScript для ионных.

Для более быстрого развития с ионным вы также можете попробовать ионную игровую площадку .

Желаем удачи с ионным каркасом ...

Приложение Ion Framework Hello World

После настройки, чтобы сделать приложение Hello World

• Чтобы создать приложение Simple Blank, выполните команду ниже на терминале:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• откройте проект HelloWorld в среде subline / webstrome IDE:
  • Редактировать index.html, в www / ditectory

 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Hello World App</h1>
     </ion-header-bar>
     <ion-content>
        <div class="center">Hello World..!</div>
     </ion-content>
    </ion-pane>
 </body>

• Для запуска в браузере с терминала:

ionic serve                  // run the app in browser

• Чтобы добавить платформу:

ionic platform add android   // add android platform
ionic platform add ios       // add ios platform

• Для запуска на устройстве:

adb devices                  // to check devices is connected
ionic run android            // to run on android devices
ionic run ios                // to run on ios devices

• Для запуска в режиме загрузки:

ionic run android -c -s -l    // to check app in live reload with console. 

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

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

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

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

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

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