Building an Ionic2 App with the Salesforce Mobile SDK

by - 8:09 PM

Ionic 2 is catching up fairly quickly and Salesforce is not far behind on writing wrapper and plugins to match ionic framework updates. We recently started playing with ionic 2 for building Andriod and iOS application and to kick start I found neat blog written by my ex- colleague +Christophe Coenraets here , you will find him, writing on fledgling tech all through the time.

Trialhead have written a module for kick start on ionic 2 with Salesforce data resource. Since I have finished few module and went through building few applications, I am share basic step by step guide to run through and write your first up and running using ionic  and mobile sdk over Salesforce.

Lets get started 

1. Install Ionic on your mac machine

$ sudo npm install -g ionic@beta  

2. Install Cordova

$ sudo npm install -g cordova

3. Then run

$ ionic start myApp salesforce
$ cd myApp
$ ionic platforms update ios
$ ionic plugin add

 4. To run latest emulator, you might need to also install latest of emulator so type

$ npm install -g ios-sim

Running Application in Emulator 

To run project in emulator, lets us build the project first

Build Project

$ ionic build ios 
Run project on emulator

$ ionic emulate ios

Pass on your org credentials and verify authenticity though passcode that you might receive on your registered email and if went successfully you can see application running on emulator smoothly.

Running application on Browser 

Salesforce have cross origin reference restrictions so it will not allow a locally hosted application to make a server level API call to salesforce and for  that you need a proxy server running to make a call for you. You can use Force Server  which comes in package of Proxy Server and Local Web Server.

Install ForceServer
$ sudo npm install -g force-server 

Navigate your www directory of your current project

$ cd www/

Run application locally by starting server

$ force-server

This will open a pop-up for authentication and will run your application as shown below

+Taiki Yoshikawa  have added a github repository, do check out for bootstrap code and tune in on your machine !

You May Also Like