ABSYZ ABSYZ

  • Home

    Home

  • About us

    Who We Are

  • Our Expertise

    What we Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

Build Customized & Powerful Salesforce Mobile App’s with React Native.

Home / Article & Blogs / Mobility / Build Customized & Powerful Salesforce Mobile App’s with React Native.
By Team ABSYZ inMobility

Hello!! If you’re reading this, at the end you’ll have a very clear idea on how to build an Salesforce powered mobile app with React Native. 

Excited enough? Let’s get Started!!

Giving your users the ease of access to data, and delivering the best UX is the best you can do for your business.

Going “mobile” by allowing your users to access enterprise level data, from anywhere and to make business transactions over few clicks is another value based addition.

With React Native + Salesforce, it is possible to develop a customised application designed to meet your business needs. Accessing your salesforce instance data over a customised UI & functionality is made achievable.

For accessing Salesforce instance data we will be using the Salesforce mobile SDK, and use React Native in order to build a custom designed mobile application.

Confused?? Let us quickly see what is a SDK and react native?

What is React Native??

React Native is a open source framework, which is used for developing cross platform mobile applications. The framework is created & maintained by Facebook, allowing developers to develop apps using “React JS” along with native platform capabilities.

What is a SDK?

An SDK is a collection of software used for developing applications for a specific device or operating system.

Salesforce allows you to build your own custom App using Salesforce SDK. Thus, by allowing end users to access data from your org using REST API’s through a Connected App in your org.

You can develop your custom app and distribute it through mobile industry channels, such as the Apple App Store or Google Play (Mobile SDK only).

Advantages of using Salesforce SDK:

  • You can configure offline and control complex offline behavior(such as saving of a record data, when there is no internet access).
  • Use push notifications to notify user about changes/transactions.

Mobile SDK integrates Lightning Platform Cloud Architecture into mobile apps by providing:

  • Implementation of Salesforce Connected App policy.
  • Salesforce org login and OAuth credentials management, including persistence and refresh capabilities.
  • Secure offline storage with SmartStore.
  • Syncing between the Salesforce cloud and SmartStore through SmartSync Data Framework.
  • Support for Salesforce Communities.
  • Wrappers for Salesforce REST APIs with implicit networking.
  • Fast switching between users.

Let’s dive in and do some hand’s on!!

Firstly, install the React-Native CLI.  Once, you are done installing with the CLI, install the Salesforce Mobile SDK.

Install cocoapods, in your CLI type sudo gem install cocoapods.

You can install the Salesforce mobile SDK either by using npm(node package manager), or using git commands directly from your CLI.

Installing of the SDK needs certain pre-requisite packages and tools, as in this case we are building our app using react native, we need to install forcereact package.

Similarly, if you are planning to develop an native app for android/ios you can use the forceios & forcedroid packages alternatively.

After your SDK environment is setup completely, make sure your React-Native CLI is setup correctly.

Open your cli and type:  forcereact create

This will take you through steps to create a react native application, which uses Salesforce as a backend service provider, using the Salesforce Mobile SDK.

Screen Shot 2019-08-11 at 3.15.11 PM

Enter a name for your application, the targeted platforms(i.e ios, android) as our application is react-native that would efficiently work on both the platforms.

Enter a package name, your organization name(com.mycompany.app), finally choose the directory you want your app to be created. For default directory, leave it blank and press enter/return.

On pressing return/enter, the forcereact package starts creating the application.

Screen Shot 2019-08-11 at 3.26.24 PM

Screen Shot 2019-08-11 at 3.34.07 PM

Once, your application is created you will see the successive steps displayed in your CLI.

Before you run your application, open the “SalesforceMobile.xcworkspace” file, in your case it would be “yourappname.xcworkspace” file present inside the ios folder of your application, and add the RemoteAccessConsumerKey & OAuthRedirectURI. 

The RemoteAccessConsumerKey & OAuthRedirectURI can be generated by building a connected app in your salesforce org.  The connected app, uses OAuth 2.0, in order to provide authorization to your salesforce org. This would include generating AccessToken, RefreshToken, Client ID for accessing data present in your org. through REST API’s.

As of now, we use a sample RemoteAccessConsumerKey & OAuthRedirectURI key for accessing Contacts Data present in our Salesforce org.

Paste the following in  yourappname.xcworkspace file :

// Fill these in when creating a new Connected Application on Lightning Platform

static NSString * const RemoteAccessConsumerKey =
@”3MVG***********”;
static NSString * const OAuthRedirectURI = @”testsfdc:///mobilesdk/detect/oauth/done”;

After pasting in the keys, save the file.

For IOS: 

If you have XCode, for ios run the application in a simulator.

In case you don’t have XCode open your CLI and type: react-native run-ios –simulator=”iPhone 6″

Once your application build, is successful, the build will be generated on the simulator device.

Simulator Screen Shot - iPhone 6 - 2019-08-11 at 15.48.25

For Android:

If you have android-studio, open your application directory and then open the android directory. In the Project view, open the app/res/values/bootconfig.xml file.

And replace the remoteAccessConsumerKey and oauthRedirectURI values with the sample values/your own settings.

After pasting the values, you can run the application on an Android simulator using android studio, or you can run it via CLI on your device using:

react-native run-android

Your React Native app, when it’s built, creates a bundle that contains your custom JavaScript components. To run the app with the JavaScript and native code talking to each other, start up the React Native development server.

  1. In a Terminal window in MacOS or the command prompt in Windows, change to your app’s root directory. In our case, that’s SalesforceMobile.
  2. Run one of the following commands:
    • In Mac OS: npm start
    • In Windows: npm run-script start-windows

Once, the app build is successful you will see the login page to access your org data, the point is you are doing through a “Custom Mobile App”!!! Exciting enough?

Simulator Screen Shot - iPhone 6 - 2019-08-11 at 18.42.00

Enter your Developer org credentials, and sign in.

Once you click on login, you’ll be navigated to the Allow Access Authorization page:

Simulator Screen Shot - iPhone 6 - 2019-08-10 at 00.14.51

Once you click on ‘Allow‘  you’ll be navigated to the home screen, where you’ll be able to see your org data. In this case, we are just displaying a list of contacts from the Salesforce org.

Simulator Screen Shot - iPhone 6 - 2019-08-10 at 01.42.53

Fig: Showing list of contacts Data from Salesforce Org.

Also, if you want to change the login environment to Production/Sandbox by clicking on the settings icon present on the top right header bar, you can select your login environment.

Simulator Screen Shot - iPhone 6 - 2019-08-10 at 01.25.09

Fig: Showing changing ability of login environment.

Customizing your app, is the second most essential part and important for providing a better user experience. Based on your end user’s requirement you can customize your app accordingly. Which Data your users can view or have access to, can be all setup in the “Connected App” in your org.

From setting up the callback url, Identity Access Management(IAM), to accessing data via access token, refresh token, everything can be configured accordingly in the “Connected App!!”.

In the next series of blog, we dive straight into setting up the connected app for your org. highlighting key points, and also develop design a customized UI App.

Stay tuned…. and happy reading!!

Custom Salesforce Mobile Appreact-nativeSalesforceSalesforce SDK
105
Like this post
26 Posts
Team ABSYZ

Search Posts

Archives

Categories

Recent posts

All About The OmniStudio FlexCards

All About The OmniStudio FlexCards

Boost Customer Experience With Repeater Widget in CRM Analytics

Boost Customer Experience With Repeater Widget in CRM Analytics

Enhance Insights Using Custom Tooltips In CRM Analytics

Enhance Insights Using Custom Tooltips In CRM Analytics

Net zero as a Service In CPG Industry

Net zero as a Service In CPG Industry

How Do We Import an External Library into Salesforce Lightning?

How Do We Import an External Library into Salesforce Lightning?

  • Previous PostPicture inside Picture (PiP)
  • Next PostHighlights of Winter'20 Release Notes : Part I

Related Posts

Leave a Reply (Cancel reply)

Your email address will not be published. Required fields are marked *

*
*

ABSYZ Logo

INDIA | USA | UAE

  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

Copyright ©2022 Absyz Inc. All Rights Reserved.

youngsoft
Copy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “ACCEPT ALL”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Privacy Policy
Cookie SettingsREJECT ALLACCEPT ALL
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

SAVE & ACCEPT