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

  • ciponthenet

    Can you please explain what the proxy app on heroku does?
    proxyURL: “”

  • kimleonard

    Thanks for sharing the valuable video !!

  • Thanks for the post with nice informative video.

  • tiara tech

    This article has covered so many topics that are helpful for mobile app development, visit for more new ideas, we are thankful for this article

  • Dinesh Kumar

    This article has covered so many
    topics that are helpful for mobile app development, visit mobile app
    for more new
    ideas, we are thankful for this article.

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

  • This is the third article in a series that I have focused on your site.

  • jolia robet
  • pc app store

    Awesome web journal you have here.

  • gtacheat code

    Hello! I know this is sort of off-topic however I needed to ask. Does managing a well-established website such as yours require a large amount of work? I am brand new to running a blog but I do write in my journal every day. I’d like to start a blog so I can easily share my personal experience and views online. Please let me know if you have any kind of recommendations or tips for new aspiring blog owners. Appreciate it! My current article – Best World edit commands

  • Aaakash Raaj

    Thank you for this wonderful blog on AngularJS. Its really an amazing blog to read. It has lots of information regarding AngularJS. Students & working professionals can go through this blog as it would really help them.

  • Hello,
    Thanks for sharing such a great information . it is really helpful ..u r doing good job , keep sharing.I liked your article,it is fantastic.
    Thank You,

  • yuvaraj singh

    Helpful content
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    Advanced Scrum Master Training

  • yuvaraj singh

    Great work
    To crack scrum master interview : Scrum Master Interview Questions

  • this very very meticulously written article.
    very helpful
    sysnucleus webharvy crack
    microsoft office 2019 product key
    autocad 2020 crack

  • yuvaraj singh

    Thanks for sharing this
    Leanpitch provides online training in Enterprise agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching