ionic tutorial - Ionic Platform (Ionic Cloud) for Yo (Yeoman) Ionic Projects in Ionicframework - ionic framework - ionic 2 - ionic creator - ionic development

Build, push, deploy, and scale your Ionic apps, the easy way.

The Ionic Platform is a cloud platform for managing and scaling cross-platform mobile apps. Integrated services enable you and your team to build, deploy, and grow your apps efficiently.

Ionic Platform works well with the standard Ionic projects. But projects following any Non-standard Directory Structure may face a few hurdles. This documents provides the steps to use Ionic Platform in the Ionic projects created using Yeoman.

This document covers the basic steps for creating an Ionic project using Yeoman and integrating it with Ionic Platform using the Ionic Platform Web Client. This document covers the basic steps to utilize Ionic Deploy, Ionic Analytics and Ionic Push.

The intended audience for this document is Web/Mobile App developers, with both beginner and expert level expertise, who are familiar with the below Prerequisites.

You should be familiar with the following frameworks/tools before trying this document.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. npm is the package manager for JavaScript.

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

Yeoman helps you to kick-start new projects, prescribing best practices and tools to help you stay productive.

$ yo ionic [app-name]

In package.json include the following in devDependencies

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

In bower.json include the following in dependencies

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

In Gruntfile.js change the scripts folder to ‘js’. Change in index.html too if required.

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

Then run the program

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

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

We need some code to let your app talk to the Ionic Platform. We need to add the Ionic platform web client for the Ionic app to interface with the plugins and the Ionic.io platform.

$ ionic io init

In your app.js add the ‘ionic.service.core’ module dependency. In Gruntfile.js add the grunt task ‘ionicSettings’ as given below.

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']);

Add the 'ionicSettings' in init and compress tasks after copy. In index.html move the below tag after all the tag declarations.

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

Then run the program

$ Grunt serve

Ionic Deploy lets you update your app on demand, for any changes that do not require binary modifications, saving you days, or even weeks, of wait time. Follow the below procedure to configure Ionic Deploy for your App. In Gruntfile.js add the grunt task ‘deploy’ as given below.

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

Then run the program

$ 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) {
});

Send out new code for your app. Create an apk and install your app. Make few changes in your code and deploy the changes using 'grunt deploy'. Then update it from your app. You can also deploy it from the apps.ionic.io dashboard. You can deploy the app without the deploy parameter. Then, in the dash board you can add the metadata and versioning details and deploy the app from there.

$ grunt build:android --debug

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

How many users are on your app right now? How many of those will use your app tomorrow, or next week? Without information, you have no way of telling if your app is being used in the ways that you expect. Follow the below procedure to configure Ionic Analytics for your App. In your app.js add the ‘ionic.service.analytics’ module dependency after the ionic.service.core Run the analytics register method in our module's run function.

$ionicAnalytics.register();

In Ionic Analytics, each tracked action a user makes in your app is represented by an event object. An event is a single action done at a specific point in time. To track your own events, call $ionicAnalytics.track(eventType, eventData) whenever an action occurs.

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

The ion-track-tap directive sends an event when its host element is tapped. The associated ion-track-data directive attaches event data.

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

In the apps.ionic.io dashboard you can view the following analytics data, Events: View the raw number of events over time, or the number of unique users who completed an event. An event can be anything from a user loading the app, to confirming a purchase. Funnels: A funnel is a sequence of actions that you expect users to take in your app, leading up to a defined goal. Thoughtful use of funnels will let help you improve conversion rates. Segments: View events over time, grouped by a specified property. Or, calculate the percentage of events that match a given property. Segments helps you understand your user base and see how properties change over time. Retention: Track how long users are active on your app before they stop using it. Or, identify how long it takes for users to reach a defined goal, like a completed sale. Pulse: A live feed of events coming in from your users.

Ionic Push lets you create targeted push notifications through a simple dashboard that will be sent automatically when users match specific criteria, and offers a simple API to send push notifications from your own servers.

Android push notifications use the Google Cloud Messaging (GCM) service. Open the Google Developers Console and create a project. Copy down your project number. This will be the GCM sender ID or GCM

In the API Manager section, enable the Google Cloud Messaging API. Then navigate to Credentials section and select Create credentials, then choose API Key, then Server Key. Name your API key and leave the Accept requests from... field blank and click Create. Save your API key!

Go to your app's dashboard on the Ionic Platform and navigate to Settings -> Certificates. If you haven't already, create a new security profile, then hit edit. Note down the Profile Tag. Now, click the Android tab and find the section marked Google Cloud Messaging, enter the API Key you generated on the Google Developer Console, then click Save. Go to Settings -> API Keys. Under API Tokens, create a new token and copy it. This will your API Token.

$ 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

Note: phonegap-plugin-push requires Android Support Repository version 32+ In your app.js add the ‘ionic.service.push’ module dependency after the ionic.service.core Ionic Push Code: Initialize the service and register your device in your module's run function. You'll need the device token that is registered by the user for sending notification to the user.

$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();

then run the program

$ grunt build:android --debug

Ionic Push lets you create targeted push notifications through the dashboard. You can also send notifications from the server in the below format.

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"

Note: The steps to configure Ionic Push for iOS is the same except for creating the Push Profiles.

A Sample app is attached here for reference.

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

Note: This is not a standalone project. The code given is only for comparison against a project created and implemented using the procedures given above in this document, in case of any issues or errors.