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
    

    or

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

    or

    sudo npm install -g ionic@beta
    
  3. Clone the project repository
    git clone https://github.com/ccoenraets/ionic2-realty-salesforce
    
  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 https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin
    
  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.

css.php