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

Advertisements

12 thoughts on “Ionic V2 Stater App using Salesforce SDK

  1. I was able to get your excellent article working with Ionic 3 but encountered errors when adding both iOS and Android platform onto the same project using (eg ionic cordova platform add ios … then ionic cordova platform add android).
    Error Message:
    There was a conflict trying to modify attributes with in plugin com.

    Like

    1. Try adding compatible version of cordova ios, the easiest way to check that is check the config.xml in salesforce cordova plugin.. Currently I guess it is 4.3.0 so.. ionic cordova platform add ios@4.3.0 will work

      Like

  2. I was able to get your excellent article working with Ionic 3 but encountered errors when adding both iOS and Android platform onto the same project using (eg ionic cordova platform add ios … then ionic cordova platform add android). Have you encountered this?

    Error Message:
    There was a conflict trying to modify attributes with in plugin com.salesforce. The conflicting plugin, undefined, already modified the same attributes. The conflict must be resolved before com.salesforce can be added. You may use –force to add the plugin and overwrite the conflicting attributes.

    Like

    1. I got it working for Ionic V3, the only change I did is to downgrade cordova version to 6.5.0. When you install ionic 3 it install cordova v7.0+ which does not allow Salesforce Cordova plugin to be added because of some specification upgrade.

      Like

  3. Great article. Do you think you are going to do one for Ionic 3? Since the Salesforce mobile sdk was changed to forceios and forcedroid in version 5.x, the steps to get the sdk to work with Ionic 3 is no longer valid.

    Like

    1. I got it working for Ionic V3, the only change I did is to downgrade cordova version to 6.5.0. When you install ionic 3 it install cordova v7.0+ which does not allow Salesforce Cordova plugin to be added because of some specification upgrade.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s