UBER API Consumption in SAPUI5

By admin On Jan 14, 2021

Business Scenario

Customer wants to have capability to call UBER from a Fiori Launchpad after he/she books ticket online and needs go to cinema. Call UBER would be a good option to get to cinema.

Solution

A PoC is build up for this purpose. Assume the current customer position (source location) and cinema location (destination) is known. We will focus on how to consume UBER APIs to call ride request from SAP UI5 application.

Customer will have visibility of available UBER product and estimated price. Then customer can select which kind of product and request an UBER service.

Technical Detail

In order to consume UBER API, it is necessary to register UBER development account. https://developer.uber.com/dashboard/

Create an app on UBER development account. In the app there are some important information to consume UBER API:

Finding more detail technical document here: https://developer.uber.com/docs/riders/introduction

In our example application, following activities with UBER are implemented:

Get UBER user profile that has authorized with the application
Get UBER available product
Get price for product
Request estimation for specific product
Send UBER request for specific product and estimation

Get User Profile

Reference: https://developer.uber.com/docs/riders/references/api/v1.2/me-get

We can test web APIs with different tools. In my example, the tool “Postman” is used.

The “Access Token” of the UBER app can be used here as header parameter “Authorization”. This request returns general information of registered UBER user.

Get Products

Reference: https://developer.uber.com/docs/riders/references/api/v1.2/products-get

The current location (latitude&longitude) is passed to request URL to get available products on this position. The service will return detail information of available products.

Get Prices

Reference: https://developer.uber.com/docs/riders/references/api/v1.2/estimates-price-get

In this request, both source position and destination positon are passed to URL. System will return estimated prices based on available products.

Request Estimation

Reference: https://developer.uber.com/docs/riders/references/api/v1.2/requests-estimate-post

This request will return the estimated information for specific product and location information (source & destination location). The result of estimation will be used in the next step to create ride request.

Create Ride Request

Reference: https://developer.uber.com/docs/riders/references/api/v1.2/requests-post

This service will create ride request of selected product and fare_id which was created in previous step. After service is posted, the request will be processed and waiting for response from UBER drivers. The status will be updated accordingly based on rider interaction.

Note: the access token which is generated in the UBER app configuration page cannot be used to create ride request. Refer to next section for access token generation.

User Access Token Creation

Reference: https://developer.uber.com/docs/riders/guides/authentication/user-access-token

The Uber API uses OAuth 2.0 to allow developers to get a user access token to access a single user’s data or do actions on their behalf. There are following steps to get user access token:

Go to UBER app admin screen. On the tab “Auth” we can select what scope will be available. In this step, make sure the scope “Request” is selected:
UBER provides an authorization page to grant permission to your UBER app. Use following URL to get authorization code:
```
https://login.uber.com/oauth/v2/authorize?client_id=&response_type=code&redirect_uri=
```
replace all in the URL. The placeholder can be derived from UBER app admin page. You can leave placeholder blank and system will return authorization code in URL.Note: in the UBER app admin page, the “redirect URI” is configured as “https://localhost/”. So here the authorization code redirect to localhost.

Copy the authorization code from returned URL. This code will be used to generate user access token in next step.
Use the Token Exchange endpoint to exchange the authorization code for an access_token which will allow you to make requests on behalf of the user.
In this step, send request “https://login.uber.com/oauth/v2/token” with following parameter to get user access token:The access token has expiry time. So we have to refresh access token after it is expired.
When the user’s access_token has expired, you can obtain a new access_token by exchanging the refresh_token associated with the access_token using the Token Exchange endpoint. Refreshing the user access token means that you don’t need to ask the user to authorize your app for the same permissions again. According to the API document, use following request to refresh access token:

Handle CORS Issue

Reference of CORS concept: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

UBER API will reject request if the origin URIs are not defined in the UBER app admin page. To solve CORS issue, it is necessary to define origin URIs in the tab “Settings” of UBER app admin page.

Here is xml file of main view:

<mvc:View controllerName="sap.uber.controller.Main" xmlns:html="https://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:semantic="sap.m.semantic" xmlns:table="sap.ui.table"> <App id="idApp"> <pages> <semantic:FullscreenPage title="{i18n>title}"> <semantic:content> <Panel id="idPanel" class="sapUiResponsivePadding"> <content> <f:SimpleForm editable="true" layout="ResponsiveGridLayout" title="Route Information" labelSpanL="4" labelSpanM="4" emptySpanL="4" emptySpanM="4" columnsL="2" columnsM="2"> <f:content> <core:Title text="Home Location"/> <Label text="User Name"/> <Text text="{userapi>/name}"/> <Label text="First Name"/> <Text text="{userapi>/firstName}"/> <Label text="Last Name"/> <Text text="{userapi>/lastName}"/> <Label text="Home Address"/> <Text text="1455 Market St, San Francisco"/> <core:Title text="Cinema Location"/> <Label text="Cinema Name"/> <Text text="Landmark Theaters Embarcadero Center Cinema"/> <Label text="Cinema Address"/> <Text text="37.7752415, -122.518075"/> <core:Title text="Time Information"/> <Label text="Estimated Arrival Time"/> <Text id="txtETA" text=""/> f:content> f:SimpleForm> <f:SimpleForm editable="false" layout="ResponsiveGridLayout" title="Uber Information" labelSpanL="4" labelSpanM="4" emptySpanL="4" emptySpanM="4" columnsL="2" columnsM="2"> <f:content> <Label text="Fist Name"/> <Text text="{profile>/data/first_name}"/> <Label text="Last Name"/> <Text text="{profile>/data/last_name}"/> <Label text="Ride Request Status"/> <ObjectStatus class="sapUiSmallMarginBottom" text="{rideStatus>/data/status}" state="Success"/> f:content> f:SimpleForm> <table:Table id="productTable" rows="{product>/data}" title="Available Products" selectionMode="Single" visibleRowCount="5"> <table:columns> <table:Column width="auto"> <Label text="Product Name"/> <table:template> <Text text="{product>display_name}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Product Group"/> <table:template> <Text text="{product>product_group}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Description"/> <table:template> <Text text="{product>description}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Capacity"/> <table:template> <Text text="{product>capacity}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Image"/> <table:template> <Image src="{product>image}" tooltip="Vehicle Image"/> table:template> table:Column> table:columns> table:Table> <table:Table id="priceTable" rows="{prices>/data/prices}" title="Available Prices" selectionMode="Single" visibleRowCount="5"> <table:columns> <table:Column width="auto"> <Label text="Name"/> <table:template> <Text text="{prices>display_name}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Distance"/> <table:template> <ObjectNumber number="{prices>distance}" unit="KM"/> table:template> table:Column> <table:Column width="auto"> <Label text="Highest Estimation"/> <table:template> <ObjectNumber number="{prices>high_estimate}" unit="{prices>currency_code}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Lowest Estimation"/> <table:template> <ObjectNumber number="{prices>low_estimate}" unit="{prices>currency_code}"/> table:template> table:Column> <table:Column width="auto"> <Label text="Duration"/> <table:template> <ObjectNumber number="{prices>duration}" unit="Seconds"/> table:template> table:Column> <table:Column width="auto"> <Label text="Estimated Price"/> <table:template> <ObjectNumber number="{prices>estimate}" unit="{prices>currency_code}"/> table:template> table:Column> table:columns> table:Table> content> Panel> semantic:content> <semantic:customFooterContent> <Button id="btnRideRequest" icon="sap-icon://taxi" tooltip="Call Uber" press="onRideRequest"/> <Button id="btnRideStatus" icon="sap-icon://process" tooltip="Show Status" press="onRideStatus"/> semantic:customFooterContent> semantic:FullscreenPage> pages> App> mvc:View>

And the relevant controller class shows below:

sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function(Controller, MessageToast) { "use strict"; return Controller.extend("sap.uber.controller.Main", { onInit: function(){ this.SERVER_TOKEN = ""; this.CLIENT_ID = ""; this.CLIENT_SECRET = ""; this.ACCESS_TOKEN = ""; this.oSampleRequest = { "sourceLat": "37.7752315", "sourceLng": "-122.418075", "destinationLat": "37.7752415", "destinationLng": "-122.518075", "seat_count": "2" }; this.oSampleProduct = { "sourceLat": "37.7752315", "sourceLng": "-122.418075", "destinationLat": "37.7899886", "destinationLng": "-122.4021253", "seat_count": "2" }; this.oDialogRequest = sap.ui.xmlfragment("dialogRequest", "sap.uber.view.RideRequest", this.getView().getController()); this.oDialogStatus = sap.ui.xmlfragment("dialogStatus", "sap.uber.view.RideStatus", this.getView().getController()); var meModel = new sap.ui.model.json.JSONModel({ "data": {} }); var productModel = new sap.ui.model.json.JSONModel({ "data": {} }); var priceModel = new sap.ui.model.json.JSONModel({ "data": {} }); var estimateModel = new sap.ui.model.json.JSONModel({ "data": {} }); var statusModel = new sap.ui.model.json.JSONModel({ "data": {} })