#

Are you ready to unlock the power of swift app development? In this tutorial, we'll show you how to create a seamless integration between Salesforce and your mobile application using the Salesforce REST API and the Ionic framework. With this powerful combination, you can build highly interactive, cross-platform mobile apps that provide real-time access to your Salesforce data.

Building an Ionic Framework App

To get started, let's install the necessary tools for building an Ionic framework app. Assuming you already have Node.js and npm installed on your system, run the following commands in your terminal:

`

npm install -g cordova ionic

ionic start "SF Sample" tabs

cd SF\ Sample

`

Next, we'll add some Cordova plugins to our app, including LaunchMyApp for custom URL scheme handling, org.apache.cordova.inappbrowser for opening OAuth URLs in an external browser, and cordova-plugin-geolocation for location detection. Install these plugins by executing the following commands:

`

cordova plugin add https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=sfsampleapp

cordova plugin add org.apache.cordova.inappbrowser

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

`

Creating a Salesforce Connected App

To connect your Ionic app to Salesforce, you'll need to create a Connected App on Force.com. Follow these steps:

  • Sign up and navigate to your developer account at [https://developer.salesforce.com/](https://developer.salesforce.com/).
  • In the side menu, choose Create > Apps and create a new Connected App.
  • Name it "SF Sample 1", enter your email, and check "Enable OAuth Settings".
  • Enter sfsampleapp://oauth-callback as your Callback URL.
  • Add "Full access" to Selected OAuth Scopes.
  • Save the Connected App.

Creating a Custom SObject

To store location data in Salesforce, we'll create a custom object. Follow these steps:

  • Select Create > Objects in the side menu.
  • Click "New Custom Object" button.
  • Enter "Position" as the object label and "Positions" as the plural label.
  • The API name for our object will be automatically assigned as Position__c, which we'll use for calls to the REST API.
  • Leave other settings to default and hit Save.

Building Your App

Now that you have your Salesforce Connected App and custom SObject set up, it's time to build your Ionic app. Run the following commands:

`

ionic platform add ios

ionic build ios

ionic emulate ios

`

This will launch your app in the iOS emulator. You should see the app loading and immediately opening the Salesforce login page. After entering your login credentials and pressing "Log in to Salesforce", the app will be automatically opened, ready for use.

Understanding the Code

Let's take a closer look at some of the code in our Ionic app. In www/js/services.js, we see the auth service defined:

`javascript

app.factory('auth', function ($window, salesforce_client_id) {

return {

get: function () {

// ...

},

set: function (data) {

// ...

},

erase: function () {

// ...

},

openLogin: function () {

// ...

}

};

});

`

This service provides methods for reading, writing, and deleting login information, as well as opening the Salesforce login dialog optimized for smartphones.

Conclusion

In this tutorial, we've shown you how to create a seamless integration between Salesforce and your mobile application using the Salesforce REST API and the Ionic framework. With this powerful combination, you can build highly interactive, cross-platform mobile apps that provide real-time access to your Salesforce data. Whether you're looking to build a custom mobile app for your organization or integrate Salesforce with an existing mobile application, this tutorial has provided you with the knowledge and tools to get started.