Building Geo-tracking Apps with AngularJS, Ionic, and the Salesforce REST API
|Building Geo-tracking Apps with AngularJS, Ionic, and the Salesforce REST API|
|Exploring the code|
Page 1 of 2
This project, based on the Force.com REST API, takes you through the steps required to create an iOS Geo-tracking app using free resources and open standards – OAuth protocol and RESTful APIs – ideal for a multi-platform environment.
In this tutorial we will create an app using the Salesforce REST API together with the Ionic framework (http://ionicframework.com), AngularJS (https://angularjs.org) and Apache Cordova (http://cordova.apache.org/).
The Ionic framework offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive cross-platform mobile apps. It is built on top of Apache Cordova and optimized for AngularJS, thus giving your application a clear structure and usage of best practices.
REST APIs are accessible from any environment that can send an HTTP request. In many ways, it’s the most flexible way to communicate with Salesforce Platform and gives you the ability to fully control your data flow.
We will go through the following steps:
Step 1. Creating a Salesforce Connected App
Step 2. Adding a custom Object
Step 3. Installing the Ionic framework
Step 4. Creating an Ionic app, installing the required Cordova plugins
Step 5. Getting an authentication token through OAuth2 flow
Step 6. Creating a new “Position” object
Step 7. Starting geolocation and logging position to the server
Step 8. Retrieving position history from the server and displaying it
Creating a Salesforce Connected App
Let’s create a Connected app on Force.com:
Go to https://developer.salesforce.com/signup, and sign up for your Developer Edition (DE) account. For the purposes of this example, I recommend sign up for a Developer Edition even if you already have an account. This ensures you get a clean environment with the latest features enabled.
Navigate to https://login.salesforce.com to log into your developer account.
In the left-hand menu choose Create > Apps and under the Connected Apps section click New to create a new Connected App.
Name it “SF Sample 1”, enter your email and check “Enable OAuth Settings”
Enter sfsampleapp://oaut-callback as your Callback URL.
Add “Full access” to Selected OAuth Scopes
Save Connected App
You may have noticed we’re using a custom URL scheme for the callback. Our app is registered in the system as the one that opens this type of URLs, so we get a callback when the user is done with the login process on the Salesforce Developers web site.
We’re going to use a custom object for storing location data in the salesforce cloud, so we need to create one:
Select Create > Objects in the side menu
Click “New Custom Object” button
Enter “Position” as object label, “Positions” as plural label. “Position__c” will be automatically assigned as an API name for our object. We’ll use this name for call to the REST API.
Leave all the other settings as default and hit Save
Now we need to install the Ionic CLI tools. Since Ionic is built on top of Apache Cordova, we need to install it too. Provided you already have nodejs and npm on your system (here are instructions on how to install them if you don’t), run the following commands in your terminal:
Install Cordova and Ionic CLI: npm install -g cordova ionic
Create a new tabbed app: ionic start “SF Sample” tabs
Enter the created app directory: cd SF Sample
Go to https://github.com/myurasov/Salesforce-REST-API-Ionic-framework-app-sample and copy all the files from the repository to the current folder.
The app uses a few of the Cordova plugins:
LaunchMyApp for custom URL scheme handling
org.apache.cordova.inappbrowser for opening OAuth URL in external browser
cordova-plugin-geolocation for location detection
Install them by executing the following commands:
cordova plugin add https://github.com/
URL_SCHEME=sfsampleappcordova plugin add org.apache.cordova.
Edit www/js/app.js and replace
with your Salesforce Connected App Client ID (can be seen in your Force.com developer account under Create > Apps > SF Sample 1 > Manage).
Now, you should be able to launch your app. Run the following commands to open the app in the iOS emulator (iOS SDK needs to be installed to run the commands):
ionic platform add ios
ionic build ios
ionic emulate ios
You should see the app loading and then opening the Salesforce login page. After entering your login credentials and pressing “Log in to Salesforce”, the app is opened, ready to be used:
Credit: Source link