With the rise of modern app development, developers have increasingly demanded native ways to extend and customize their line-of-business applications. In this post, I’ll share how I developed a React Native + Expo mobile app using open source tools with a focus on how to easily interact with Salesforce Objects data via the mobile app.

Meet Eureka Retail — a React Native clienteling app

My mobile app demo (named “Eureka Retail”) aims to showcase a simple retail use case called “clienteling.” This is a process where in-store sales associates identify the most loyal customers and their preferences, so they can provide a more targeted service and improve sales.

In the Eureka Retail app, key clienteling features include: the Home screen, which provides a dashboard view of store and associate performance; a Profile screen, which is centered around the associate’s performance; and most importantly, a Customers screen, which enables associates to access data and insights regarding their loyal customers residing on Salesforce.

For the purpose of this demo, I have created a custom object called “Eureka Customers” to demonstrate this use case. Note that in production, it would be recommended to use the Standard Objects in Salesforce i.e. Account and Contact to represent customers data.

High-level architecture

Let’s begin by taking a look at the high-level architecture:

1. Heroku Connect synchronizes data two ways between the Salesforce org (Eureka Customers custom object) and the Heroku Postgres database
2. A Heroku app (ExpressJS) serves as the API interface for interacting with the data in the Heroku Postgres database
3. An Axios library sends and retrieves data from the Heroku Postgres database via the Heroku app

Connecting to Salesforce CRM data using Heroku Connect

In order for the Eureka Retail app to interact with Salesforce CRM data (again, the Eureka Customers custom object), I used Heroku Connect, which is an amazing add-on that easily synchronizes data between a Salesforce org and a Heroku Postgres database. As you can see in the screenshot below, I was able to easily create a mapping of the fields and records of the Eureka Customers object to a table in Postgres with just a few clicks! The first screenshot shows the mapping of the fields.

For your reference, this is a screenshot showing the fields and records of the Eureka Customers custom object in the Salesforce org, which maps to Heroku Postgres. Any data changes within the Postgres database or the Salesforce org will be replicated in both directions.

The API server / interface layer on Heroku

Once the mapping of the Salesforce CRM is completed and replicated in a Heroku Postgres database, the next step involves creating an API server or interface layer to handle the API requests from the Eureka Retail app (or any other apps). I used ExpressJS, a Node.js framework, to create this middleware layer for the Eureka Retail app to utilize. This is actually a very simple Node.js web app hosted on Heroku, and I can easily query for a list of all customer data using the HTTP GET method:

Alternatively, I can also create routes using paths to easily query for each customer using their Customer ID, which is very useful within the Customer Details screen:

Finally, the following code allows the app to modify existing data and update the Heroku Postgres database using the HTTP POST method. Once the Postgres database is updated, Heroku Connect magically synchronizes the Eureka Customers object in Salesforce.

In a typical production implementation, it would definitely be good practice to implement security features to ensure that suitable authentication exists for the API requests. This would allow only authenticated apps to access or make changes to the Heroku Postgres database and the Salesforce org.

For simplicity’s sake, the sample code snippets above do not include any security features. In the Eureka GitHub code, Basic Auth was implemented. To learn more, see the full source code of this ExpressJS API Server app on GitHub.

Using Salesforce customer data from the mobile app

Within the Eureka Retail app, I used the Axios JavaScript library to make the HTTP requests and API calls to the API interface layer app. This is sample code that is used for querying the database content.

To briefly explain this sample code below, there is an asynchronous call using Axios to retrieve the customer list from the Heroku Postgres database, and setCustomers is used to update the state of the customers data object in the app.

Now that we have discussed how to query the API via a GET method above, let’s explore functionality to call the POST method when modifying the content of the Heroku Postgres database. This eventually also updates the Eureka Customers custom object within the Salesforce org using Heroku Connect.

Below is sample code that shows how the Update Customer Details screen is implemented by calling the handleSubmit method when the Customer Details Update form is submitted within the app. This sends the updated customerDataObject from the state of the Eureka Retail mobile app to the ExpressJS (Node.js) API server Heroku app.

Conclusion

With the power of the Salesforce Platform, developers can easily build any custom app — be it a web or mobile app — while easily having the flexibility to access the 360 degree view of their customers within the Salesforce CRM. This is made extremely secure and efficient with the Heroku Platform as a Service (PaaS) together with the Heroku Connect add-on, which provides that magic for any custom app to easily access Salesforce data.

To learn more about my React Native sample app, see the full source code on GitHub (note that it is still work in progress).

About the author

Terence Lim is a Salesforce Developer Evangelist, with a focus on mobile app development and the Salesforce Platform. Known for his highly-energetic nature, he loves working with people, and nothing excites him more than to be able to inspire and empower others through technology. He has frequently spoken at conferences around the world. He loves meeting new people & learning new things, and has lots of amazing stories from his travels to share. He’d absolutely love to hear your story too! Check out his GitHub projects @terlim-sfdc.