Ionic Marketcloud mobile eCommerce application


In this article, we are going to build a Ionic mobile eCommerce application that can run on iOS, Android, Windows Mobile and as a web application.

The application will be built using the popular Ionic Framework, so we need to install the framework and its dependencies.

First of all, we need NodeJS, you can grab the latest release from the official website: http://www.nodejs.org .

We will also use NPM, the NodeJS package manager used to install and distribute libraries and code: https://www.npmjs.com 

At this point we are able to install Cordova, a framework that Ionic relies on, and Ionic:

npm install -g cordova ionic

After the installation is complete, we can use the ionic command line tool to create our applications, but for the sake of this tutorial, I created a repository you can clone:

git clone https://github.com/fatmatto/ionic-marketcloud-tutorial.git
cd ionic-marketcloud-tutorial
git checkout 90526848652408fe37f411940f3a398debfe2fa9
ionic serve

Ionic will start a web server listening on port 8100 and open a browser tab.

You should see the Ionic application with some mock data. For this part of the tutorial, we will focus on integrating the Marketcloud Javascript SDK into the application and use it to retrieve actual data from a Marketcloud application.

The first thing to do is to install the Marketcloud javascript SDK using bower:

bower install marketcloud-js

Then we have to include it adding the following line to index.html

<script src="/lib/marketcloud-js/dist/marketcloud.min.js"></script>

Now, we want the SDK to be available in our application, so we encapsulate it into a factory, (this is not 100% best practice, but we will fix this part later in the tutorial).


app.factory('marketcloud',function(){
	marketcloud.public = 'YOUR_PUBLIC_KEY_HERE';
	return marketcloud;
})

In the git repository, there is a demo public key, you can replace it with a key from one of your applications or you can just leave it there and query the demo data. Using our demo key could be helpful, at least until the end of the tutorial.

Now it's time we replace the fake data with actual HTTP requests.

The Marketcloud Javascript SDK lets us query the api using simple functions:

marketcloud.products.list({},function(err,products){
})

and we can easily wrap the API into a service using the AngularJS API.

We will also use the $q service to "promisify" the SDK and simplify the implementation of our "resolves".

.service('DataService',['$q','marketcloud',function($q,marketcloud){
  return {
    list : function(query){
     return $q(function(resolve,reject){
        marketcloud.products.list(query || {},function(err,product){
          if (err)
            reject(err)
          else
            resolve(product)
        })
      })

    },
    getById : function(id) {
      return $q(function(resolve,reject){
        marketcloud.products.getById(id,function(err,product){
          if (err)
            reject(err);
          else
            resolve(product)
        })
      })
    }
  }
}])

Since Ionic uses ui-router as preferred routing solution, we can inject the data we get from the API into the controller during the resolve phase:

    .state('app.products', {
      url: '/products',
      views: {
        'menuContent': {
          templateUrl: 'templates/products.html',
          controller: 'ProductsCtrl'
        }
      },
      resolve: {
        products : function(DataService,$stateParams){
          return DataService.list($stateParams || {})
        }
      }
    })

This will take complexity out of our controllers, since we will just need to pass data as a dependency:

.controller('ProductsCtrl', function($scope,products) {
  $scope.products = products;
})

.controller('ProductCtrl', function($scope, product) {
  $scope.product = product;
});

And now our application's views can render our data.

Instead of coding this part yourself, you can just checkout the git repository at the correct state:

git checkout c9d2d5d846306dcb198e8c88fe60c2df69db324f

In the next part of this tutorial we will see how to add products to cart and how to implement the cart service to be available in the whole application.

All you have to do now is to try to build a Ionic mobile ecommerce application using your own api key. Create an account here!