Salesforce has recently opened up the Mobile Dev Center, a hub with all the SDKs and trailheads you need to start your own Mobile App. Caught up in the excitement, I decided to create my first Ionic App for Salesforce, but I found it more difficult than expected.

I struggled with it for a whole day, but I finally succeeded and now I’m looking forward to sharing my experience with you.

Setup your Ionic Environment

All instructions below are for Mac OSX and I assume you have Node.js already installed. I have used node v4.0.0 activated by nvm (nvm use 4).

Although you have already installed Cordova or Ionic in your PC, it could not be enough. In fact, I figured out that tool versions are fundamental in order to deploy your project on Android and iOS platforms. One of the most encountered problems is that you succeed to run your Ionic project locally (we will see how later), but you can’t do it on your devices.

So let’s install the required tools.

Cordova 5.4.0

Even if you have already installed it, please do it again:

Ionic 1.7.16

Since it is Ionic’s last version you can even install it by digiting sudo npm install -g ionic.

Android Studio 2.1.2 or latest

Download Android Studio 2.1.2 from here and once installed, download at least the following libraries from SDK Manager:

  • Platforms SDK: Android 6.0, Android 5.1, Android 5.0 (you can install others if you need the previous SDK)
  • Tools SDK: Android SDK Building Tools, Android SDK Platform-Tools 24.0.1, Android SDK Tools 25.1.7, Android Support Repository, Google Play Services (you can install others if you need other tools)
  • Update Sites SDK: I have downloaded all of them

Xcode 7.3

I have installed Xcode 7.3, because of my iOS device (9.3.1). To install Xcode 7.3 you need to upgrade your OS to El Capitan (> 10.11). I don’t think you need nor Xcode 7.3 or El Capitan if you have a previous iOS version (< 9.3).

Start Ionic Project

Once installed all the previous dependencies, let’s start our Ionic Project. Ionic has recently released a starter template for salesforce and we are going to use it.

Create Ionic Project

Open the terminal and digit:

The last part of the directive (salesforce) stands for the template we are going to use.

Add or update platforms

This part is essential to deploy your project on devices. Once Ionic has created your project folder, go into it by typing cd SFAIonic. Update your iOS platform (v 3.9.2) firstly, since it has already been added.

Then add your Android platform (v 5.0.0).

Do not go ahead if you have any errors.

Shelljs 0.7.0

Install Shelljs version 0.7.0 since Android will require it when you add the SFDC Mobile SDK.

Install other cordova plugins

If you need to install other cordova plugins, I suggest to do it now. If you have nothing else to install, you can skip this subsection.

Install Salesforce Mobile SDK plugin

Let’s install the Salesforce Mobile SDK for Hybrid App.

Congrats, your project is now ready to be deployed!!!

Deploy on Android and iOS Devices

As you know, Ionic provides command lines to build and deploy projects on iOS and Android devices, but I suggest to do it from your Android Studio and Xcode IDE directly. I have met some issues from the command line.

Deploy on Android Device

  1. Open Android Studio
  2. Click on “Open an existing Android Studio Project”
  3. Search your project folder, go to platforms, select android folder and then click “Ok”
  4. Android Studio will import your project and gradle will start indexing and resolving issues. If any gradle version is missing, Android Studio will probably ask you to update it. Do it directly from Android Studio by clicking on proposed links!

AndroidStudio

Once Android studio has finished importing the project, it may take some minutes, you will be able to click on “Play” button.

Deploy on iOS Device

You can open up your Xcode project directly from your ios folder (SFAIonic > platforms > ios > SFAIonic.xcodeproj). Xcode starts indexing the project and when it will have finished you will be able to click on “Play” button.

Note: you will probably need to disable Xcode setting ENABLE_BITCODE (Enable Bitcode = No).

XCodeEnableBitCode

Deploy Locally

You need to install one more tool to run your Ionic project from the Browser: Force-Server. In your project folder digit:

Once you have done it:

  • Navigate (cd) to your project’s www directory
  • Start the server

That’s all! Enjoy your App.

AndroidApp

Keys Take Away

  • Remember to follow up the instructions in order to install the proper tool versions
  • Build and deploy your project from Android Studio and Xcode
  • If you need to install any other plugins, I suggest to do it before adding the Salesforce Mobile SDK plugin
  • Install Force Server to run it from your browser

Support us with a small donation:

  • LTC Address: La5f6W1rPr5VHFGCrCmPJ3sSa2AiwKZJbU
  • BTC Address: 1FG1j42MUze8jiW7JbgNaUMZxZeu7M1b4f
  • Ripple Address: rPVMhWBsfF9iMXYj3aAzJVkPDTFNSyWdKy     Tag: 562614972
  • ETH Address: 0x0940958167ca9cbd6409999957a011be7907d904
(Visited 1,571 times, 1 visits today)
Francesco Boccassi
Francesco Boccassi

Francesco is what the business chemistry calls a blend between a Pioneer, always looking for the next generation idea, and a Driver, methodical and clear goal minded. With more than 6 years in consulting he has a deep knowledge of CRM and Salesforce. He is now focusing on Blockchain and DApps.

16 Comments

  1. Very good article. Would Ionic2 version support the same steps. Please advise on how to get started with Ionic2/Salesforce SDK.

  2. Thank you Francesco. I have tried the mentioned article, it loads fine on the browser (ionic serve) but while compiling through XCode (9.3 version, simulator) app loads without authentication. There seems no error messages on IOS build. Verified the bootconfig.json file related to Oauth configs under www folder.

    Would appreciate any thoughts on what i’m missing here.

    Pasting the console logs for your quick reference.

    2016-09-05 08:36:51.098 V2 Test[22761:784818] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/karthikk/Library/Developer/CoreSimulator/Devices/850C90CC-8B2A-4B06-8F70-8CA06F600676/data/Containers/Data/Application/EEBA81EE-FBFD-41BD-86DF-5843FFA5706E/Library/Cookies/io.ionic.starter.binarycookies
    2016-09-05 08:36:51.128 V2 Test[22761:784818] Apache Cordova native platform version 4.2.1 is starting.
    2016-09-05 08:36:51.129 V2 Test[22761:784818] Multi-tasking -> Device: YES, App: YES
    2016-09-05 08:36:51.504 V2 Test[22761:784818] Using UIWebView
    2016-09-05 08:36:51.505 V2 Test[22761:784818] [CDVTimer][handleopenurl] 0.051975ms
    2016-09-05 08:36:51.507 V2 Test[22761:784818] [CDVTimer][intentandnavigationfilter] 1.560986ms
    2016-09-05 08:36:51.507 V2 Test[22761:784818] [CDVTimer][gesturehandler] 0.041962ms
    2016-09-05 08:36:51.507 V2 Test[22761:784818] [CDVTimer][TotalPluginStartup] 2.067983ms
    2016-09-05 08:36:52.362 V2 Test[22761:784818] Resetting plugins due to page load.
    2016-09-05 08:36:52.967 V2 Test[22761:784818] Finished load of: file:///Users/karthikk/Library/Developer/CoreSimulator/Devices/850C90CC-8B2A-4B06-8F70-8CA06F600676/data/Containers/Bundle/Application/CE5CB6D9-1BE1-4201-BC79-081AB7333CA8/V2%20Test.app/www/index.html

  3. Thank you Francesco.

    Yes, i see a white screen while i’m following (http://coenraets.org/blog/2016/02/angular2-ionic2-salesforce/). On the other article (ContactManager) app is loading without any authentication. Contact tab loads without contact.

    I have ionic 2.0.0-beta.15 installed. Here is the results from terminal to quickly double check the installed versions both on Ionic & Cordova.

    $cordova platforms
    Installed platforms:
      ios 3.9.2
    Available platforms:
      amazon-fireos ~3.6.3 (deprecated)
      android ~5.2.0
      blackberry10 ~3.8.0
      browser ~4.1.0
      firefoxos ~3.6.3
      osx ~4.0.1
      webos ~3.7.0
    $ ionic -v
    2.0.0-beta.15
    Also while building the IOS Project made sure enable bitcode is set to No. Can you please advise if i’m missing something else.

  4. On a other note, i use Xcode 7.3 version. Would that be the potential issue and downgrading the xcode version would solve?

    If you don’t mind, can you please share the installed versions of cordova/ionic/xcode/node.

  5. Hi Francesco,

    I have tried 3 different version of cordova. Currently i have 5.4.0 version installed.

    Also tried 5.4.0, 6.3.1

    Any thoughts on what i’m missing here.

    Thanks in advance

  6. Please I have problem running this on android studio version 3.2

    I am using cordova 6.5.0

    ionic 2.2.2

    when i run forcedroid version i get: 5.0.1

    whenever i try to import the project into android studio, I get this error

    no resource found that matches the given name ( at ‘icon’ with value ‘àdrawable/sf__icon’)

    Regards

    I have followed this trealhead module: https://trailhead.salesforce.com/projects/mobile-sdk-hybrid-apps/steps/mobilesdk-hybrid-apps-04

  7. Great article. Do you have an example of how to do pagination with the forcejs library? Maybe using Ionic 3?

Leave a Comment