Building Customer-Facing Mobile Apps with Angular 2, Ionic 2, and Salesforce

This is the third article in a series focused on Angular 2 and Ionic 2. In Part 1, I shared a first version of the Ionic Realty application using a set of mock data services. In Part 2, I used actual REST services powered by a Node.js back-end. In this article, I share a version of Ionic Realty connecting to a Salesforce back-end instead of a Node.js back-end. The Ionic application uses OAuth and the Salesforce REST services to access data.

Watch the video (the second part covers the Salesforce integration):

Code highlights

The source code for the application is available in this repository.

  • The client application remains mostly unchanged. Only the internal implementation of the data services changes.
  • The client application uses the ECMAScript 6 version of forcejs to authenticate with OAuth and call Salesforce REST services.
  • I’m using promises instead of observables in this version of the app. That’s mostly because forcejs was written to work with promises. However the forcejs promises could easily be turned into observables. See Part 2 of this series for more information on promises and observables.
  • You can run the app transparently in the browser and in Cordova using the Salesforce Mobile SDK OAuth plugin (see installation instructions below).
  • In a real life application, it would make more sense to login to a Salesforce Community since Ionic Realty is a customer-facing application. You could then also provide a branded login experience.

Salesforce App Cloud

This is beyond the scope of this article, but some of the advantages of using the Salesforce App Cloud for this application include:

  • You don’t need to write server code. You create the objects needed for your app (in this case: brokers, properties, and favorites) in Salesforce and a customizable UI that users can use to manage the data (create, update, delete brokers and properties) is automatically available.
  • The objects you create are automatically exposed through a REST API.
  • Your custom application data can tightly integrate with existing Salesforce data (contacts, opportunities, leads, etc).
  • You can leverage Salesforce’s trusted identity and security features.
  • You can leverage many other built-in features: reports, analytics, etc.

Installation Instructions

To install the Salesforce side of the application:

  1. If you don’t already have a Salesforce Developer Environment, sign up for a free Developer Edition here.
  2. Click this link to install the Realty unmanaged package in your developer org. The package installs custom objects (Property, Broker, and Favorite) along with layout customizations, tabs, and a Visualforce page to generate sample data.
  3. In the Developer Console, open the RealtyDataLoader Visualforce page, click Preview, and then click Load Sample Data to load sample data in the Property and Broker objects.
  4. Access the Properties and Brokers tabs to browse sample properties and brokers and familiarize yourself with the data.

To create the Ionic application:

  1. Install the latest version of Cordova:
    npm install -g cordova


    sudo npm install -g cordova
  2. Install Ionic 2 beta:
    npm install -g ionic@beta


    sudo npm install -g ionic@beta
  3. Clone the project repository
    git clone
  4. Navigate to the ionic2-realty-salesforce directory
    cd ionic2-realty-salesforce
  5. Install the dependencies
    npm install

To run the application in the browser:

  1. On the command line, navigate to the ionic2-realty-salesforce directory
  2. Build the JavaScript app and load it in a browser:
    ionic serve

To build and run the application on device:

  1. Add the iOS platform:
    cordova platform add ios@3.9.2
  2. Add the Salesforce Mobile SDK plugin:
    cordova plugin add
  3. Build the native app:
    cordova build ios
  4. Open the .xcodeproj in the platforms/ios and run the app on device or in an emulator.

    Thanks for sharing!
    The much awaited tutorial I was looking to kick start Ionic 2 journey.

  • Thanks for this Christophe.

    Once the repo is cloned and the ios platform is added – how can we change the Consumer Key and secret in iOS?

  • Jim

    Thanks for a great article! How would I authenticate automatically with salesforce if I am using the same credentials. I basically want to run the web app with my sfdc credentials and allow non sfdc users to access the data. Thanks!

  • good blog thanks admin

  • Sorry for the question, but did not know where to send it on your site.

    How did you do the video of your application?

    You use the iphone simulator, right?


  • good blog tnx admin

  • Pingback: 3 Things to Love About Salesforce World Tour Boston - Motivis Learning()

  • Pingback: 3 Things to Love About Salesforce World Tour Boston()

  • Shreyas

    I get the following error, when I try to use Ionic Serve. I followed the same steps as described above, thanks for any help.

    Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:8100/build/js/app.bundle.js

    • Gabe Sumner

      Hi Shreyas, there have been some changes made to the newer versions of Ionic Beta. This project was built with an older version of Ionic Beta. You can downgrade your Ionic Beta version using the following command:

      npm install -g ionic@2.0.0-beta.15

  • The property situation in the nation’s most cherished city is and has been a matter of exchange for quite a while. With the area being an essential resource, individuals are continually scanning for properties that fit their gauges. Real estate property in Mumbai Larger part of the populace in the city has a place with the working class, so clearly they go for quality for cash properties, ones that fit their financial plan and aspirations. The land business amazingly has comprehended this prerequisite and rolling out the essential improvements. You should simply to look at the right places. Call us- 0124-4370612

    Best Real Estate Trends in Mumbai

  • Aravind SK

    how does one go about hosting the ionic 2 app on a website like you did? Just ionic build and host the www folder? Any help would be greatly appreciated!

  • Dwiky Chandra

    is there any full tutorials ? :D