Ionic V2 Stater App using Salesforce SDK

Ionic has released its current framework Ionic V2 which is build keeing AngularJS 2 and Typescript in mind. Ionic is one of the fastest growing mobile development framework and has become a choice of everyone nowadays.

I build apps using Ionic V1, but with the new release its time to upgrade because as per AngularJS it cannot be more faster for web because it is Typescript based. Anyways we will not go into detail about that now. Lets start setting up the basic template app.

Before we start I referred sample app on the same topic by Christophe which is here when I first started building Ionic V2 app.

Step 1 :- Create Ionic App

Make sure you have node installed on your system. Follow the steps in Getting Started in Ionic Getting Started Ionic. Once you have created the basic app, validate it by running it, go to the app folder open terminal run ionic serve if your app opens in browser and works fine then the step one is completed.

If you are new please run and check your app at each point because debugging will become difficult if something has broken at some point.

Step 2 :- Add Salesforce SDK

Go to you app folder add Salesforce Cordova Plugin

cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin.git
// A suggestion here clone Salesforce Cordova Plugin in your system somewhere so that
// if you need to add it multiple time you don't need to clone from github
// You can directly add the plugin using path of your folder

You might get error here cordova ios or android version incompatible etc. Don’t worry about that just add version which is recommended for example :-

cordova platform add ios@4.x.x

After this create the bootconfig.json file as shown below add your connected app consumer key and redirect URL. Copy this file in YourApp -> www

{
  "remoteAccessConsumerKey": "CONSUMER_KEY",
  "oauthRedirectURI": "REDIRECT_URL",
  "oauthScopes": [
    "web",
    "api"
  ],
  "isLocal": true,
  "startPage": "index.html",
  "errorPage": "error.html",
  "shouldAuthenticate": true,
  "attemptOfflineLoad": false
}

Once this is done build the app.

ionic build ios // for android use android

Run again using xcode (open yourApp -> platform -> ios-> .xcodeproj). If you see salesforce login screen means the Salesforce Cordova plugin is working.
Wait not done yet …

Step 3 :- Add ForceJS

Please read the details about ForceJS 2 from the link above.

Now we already added the Salesforce Cordova Plugin. run the below commands in your app folder.

// This will install forcejs into you apps node_modues folder
npm install forcejs --save-dev
// This will install force server not required but your wish if need to test on browser
npm install force-server --save-dev

Once all this is done import forcejs into you app.component.ts file which will be in YourApp -> src -> app -> app.component.ts

import {OAuth, DataService} from 'forcejs';
// Inside constructor add the below code this will login to your Salesforce instance using Salesforce plugin via forcejs.
let oauth = OAuth.createInstance();
oauth.login().then(oauthResult => {
        DataService.createInstance(oauthResult);
        console.log("Logged Into Salesforce Successfully");
});

//  To get data from Salesforce add
let sfdc = DataService.getInstance();
sfdc.query().then(data => { console.log("DATA" + data) }).catch(error => console.log(error));

I will suggest run your app again. And check logs if you see the above message printed that means all the components are now in sync and connected to each other.

To get started copy carefully the src folder code from my template app Ionic Template App SF . The index.js file outside the src folder is the ForceJS2 minified version which I edited because I was getting some issues. If you also face issues in getting data from Salesforce then try replacing your forcejs file from this one. It will be in YourApp -> node_modules -> forcejs -> all – > index.js. Make sure you take backup of the original file first.

Some screen shots from the app