END TO END GUIDE ON CREATING IONIC MOBILE APP BASED … · END TO END GUIDE ON CREATING IONIC...

End to End guide on creating ionic based mobile app using Oracle MCS and Oracle EBS

1

HOW-TO DOC: END TO END GUIDE ON CREATING

IONIC MOBILE APP BASED ON

ORACLE MCS + ORACLE EBS

Author(s) : Sardar Swaran Singh

Pallavi Nakka

Hanumanth Yadlapalli

Bala Thotakura

Edited By : Raj Peddisetty

Company : ALGARYTM

Created On : APR – 2017

Version : 1.0


2

PURPOSE: This document provides solution to Develop Oracle EBS based mobile app in

Ionic frame work using Integrated SOA gate way to develop REST services

and Oracle Mobile Cloud Services as middle ware. In this document we

portrayed one of the scenario of Expense Approval App.

Expense Approval App is intended to Managers where he can see the list of

expenses raised by the employees pending for his Approval.


3

Table of Contents

1. Executive overview_____________________________________________________________ 4

2. Create Custom PLSQL Package with Annotation ___________________________________ 6

3. Register Custom Package in Integration Repository ________________________________ 10 3.1 Generate iLDT ________________________________________________________________________________ 10 3.2 Upload iLDT __________________________________________________________________________________ 12

4. Integrated SOA Gateway ______________________________________________________ 14 4.1 Deploy PLSQL package as REST Service ____________________________________________________________ 14 4.2. Create Grants ________________________________________________________________________________ 16

5. Test the REST Service _________________________________________________________ 17

6. Oracle Mobile Cloud Service (MCS) _____________________________________________ 20 6.1 Create Mobile Backend (MBE) ___________________________________________________________________ 20 6.2 Create Connectors _____________________________________________________________________________ 22 6.3. Create Custom API ____________________________________________________________________________ 28 6.3.1. Create Endpoints to API ______________________________________________________________________ 30 6.3.2. Implement NODEJS __________________________________________________________________________ 32

7. Place Custom API in MBE _____________________________________________________ 38

8. Create a screen in Mobile App using Ionic 3 Framework ____________________________ 39


4

1. Executive overview

Use Standard API or Custom PLSQL API as per the requirement. For Custom API add

annotations. This package has to be registered in Integration Repository since it is a custom

object. In this process, create iLDT of Custom PLSQL API. And then upload it in Integration

repository. Expose the Custom PLSQL API as REST Service through Integrated SOA Gateway

(ISG). And test the Service in any REST Client.

Log in to Oracle MCS (Mobile Cloud Service), create a Mobile BackEnd .Then create a REST

Connector using the REST Service to establish external connection in cloud. Then create a

Custom API (with NODEJS Implementation) to call the Connector. Place the Custom API in

Mobile BackEnd and through Mobile BackEnd the Mobile App connects to MCS.

The Mobile Apps access REST Connectors through Mobile BackEnds. And then create mobile

screen in Ionic 3 Framework.


5

Architecture Diagram:


6

2. Create Custom PLSQL Package with Annotation

Create PLSQL package with a function that returns the Expense Details.

In order to register our custom Package in Integration Repository, we have to annotate our

package Specification. Refer the below link for Annotation Standards.

https://docs.oracle.com/cd/E18727_01/doc.121/e12065/T511473T545912.htm

Custom integration interfaces can use only seeded or existing business entities. Integration

Repository currently does not support the creation of custom Product Family and custom

Business Entity.

Refer below link to get the list of pre-defined Business Entities in Integrated SOA Gateway.

http://irecruitment.syriatel.sy/OA_HTML/help/state/content/group.FND%3ALIBRARY%3AUS/

locale.en_US/navId.2/navSetId.iHelp/vtAnchor.sigdg_ebannot/vtTopicFile.iHelp%7CHelpServle

t%7CUS%7CFND%7C@sigdg_ebannot/

https://docs.oracle.com/cd/E18727_01/doc.121/e12065/T511473T545912.htm


7

Below is our package Specification with Annotation

Detail Annotation for Procedure in that package.


8

Below is the package body

The Procedure GET_SMART_EXP_CNT_P returns expenses list pending for approval to

a specific user.


9


10

3. Register Custom Package in Integration Repository

Register the above package in Integration Repository to deploy this package as REST Service.

To achieve this, we have two steps.

1. Generate an iLDT file for our package specification.

2. Upload the generated iLDT in FND_TOP.

3.1 Generate iLDT

Login to Remote Servers Application Tier through Winscp

Navigate to CUSTOM_TOP bin folder. In our case it is

/data/oracle/VIS1225/fs1/EBSapps/appl/xxerp/12.0.0/bin

Place the .pls file of our Custom Package Spec in CUSTOM_TOP bin folder


11

Open a putty Session through Winscp (for this,putty setup file is prerequisite) by clicking on

Putty icon on Winscp toolbar.

Enter password when prompted and a new session is started.

Navigate to the same path where we placed our package Spec in putty.

Run the below command to generate iLDT file.

$IAS_ORACLE_HOME/perl/bin/perl $FND_TOP/bin/irep_parser.pl -g -v -

username=sysadmin PER:patch/115/sql:


12

XXALG_SMART_EXP_APPROVAL_PKG.pls:12.0=XXALG_SMART_EXP_APPROVA

L_PKG.pls

The output of the above command is as below

iLDT is generated in the same path.

3.2 Upload iLDT

Now, go back to putty session and run the below command to upload the iLDT to Integration

Repository.

$FND_TOP/bin/FNDLOAD apps/apps 0 Y UPLOAD

$FND_TOP/patch/115/import/wfirep.lct

XXALG_SMART_EXP_APPROVAL_PKG_pls.ildt

The output of this command is as below.


13

A log file is created. Check the log file generated for errors.

When you open the log file, it should look similar as below if the iLDT is uploaded without any

errors.


14

4. Integrated SOA Gateway

4.1 Deploy PLSQL package as REST Service

Log in to EBS System as SYSADMIN

Navigate to Integrated SOA Gateway Responsibility > Integration Repository

Click on Search button

Enter the Package Name ‘XXALG_SMART_EXP_APPROVAL_PKG’ in Internal Name field.

Hit on Go


15

Below Table shows the search result. Click on the Package name from the table.

Navigate to REST Web Service Tab.

Select the Function/Procedure to deploy. Enter the Service Alias.

Hit on Deploy button at the bottom of the page.

Once it is deployed, WADL file is created. Click on View WADL link to see WADL file.

HTTP Method to access this Service is also described here.


16

4.2. Create Grants

Now, we have to create Grants to give access to use this service.

Navigate to Grants Tab, Check the Function / Procedure name and click on create grant button.

You will be prompted to select Grantee Type, you can choose

1. All Users

2. Specific User

3. Group of Users

Click on Create Grant button at the top of the page.

When grant is created, this icon appears for the function / procedure.

From the WADL file, we have to construct REST Service URL. Extract the base URL and append

the resource path to it.

The below link is our final REST Service URL.

http://vis1225.dpebserver.com:8000/webservices/rest/Smart_Expense_Approval/get_smart_exp_c

nt_p/

http://vis1225.dpebserver.com:8000/webservices/rest/Smart_Expense_Approval/get_smart_exp_cnt_p/

http://vis1225.dpebserver.com:8000/webservices/rest/Smart_Expense_Approval/get_smart_exp_cnt_p/


17

5. Test the REST Service

Now, Test the Service in any REST Client like POSTMAN. POSTMAN is a google chrome

extension.

Open POSTMAN. Add the following Headers under headers tab.

Construct the payload according to XSD from WADL file. Select the Method as POST in

POSTMAN.


18

Payload:

{

"Smart_Expense_Approval":

{

"@xmlns":"http://vis1225.dpebs-

server.com:8000/webservices/rest/Smart_Expense_Approval/get_smart_exp_cnt_p",

"RESTHeader":

{

"xmlns": "http://vis1225.dpebs-server.com:8000/webservices/rest/Smart_Expense_Approval/header",

"Responsibility":"SYSTEM_ADMINISTRATOR",

"RespApplication":"SYSADMIN",

"SecurityGroup":"STANDARD",

"NLSLanguage":"AMERICAN",

"Org_Id" :"204"

},

"InputParameters":

{

"P_USER_NAME": "MICHAEL"

}

}

}


19

Once you click on send, the result appears. Status Code 200 is a success.


20

6. Oracle Mobile Cloud Service (MCS)

6.1 Create Mobile Backend (MBE)

Now, login to MCS. Navigate to Mobile Backends (MBE).

A mobile backend is a secure grouping of APIs and other resources for a set of mobile apps.

Within a mobile backend, you select the APIs that you want available for those apps.

Click on New Mobile Backend button.


21

The MBE Creation page appears. Fill in the required details and click on create button.

After creating the Backend, go to settings page of the MBE.

In this page, we can see Access Keys generated for this MBE.

HTTP Basic Authentication keys are generated for you in the form of a mobile backend ID and

an anonymous key.

These keys are also unique by environment. When you deploy a mobile backend to a different

environment, a new set of keys is generated for the copy of the mobile backend that is added to

the target environment.


22

If you suspect that these credentials have been compromised (such as by an application handling

them insecurely), click Refresh to replace the credentials with new ones or click Revoke to

cancel the existing credentials without generating replacements.

6.2 Create Connectors

Now, Navigate to Connectors from the Menu.

Create a connector by clicking on New Connector.

Select REST from the dropdown.


23

The Connector Creation screen opens. Fill in the required fields. Enter REST Service URL in

Remote URL Field. And hit create button.

Once, the Connector is created the following screen appears showing four steps.


24

The Below screen shows the General Configuration of Connector.

Navigate to Rules Page.

Create new rules to test this connector on clicking New Rule button.

Click on Add Parameter.

Select Header from the dropdown.


25

Add all the Headers, which we used in POSTMAN for testing the Service.

In the same page, we will have HTTP Methods, where we can select to which HTTP Verb the

defined Rule should apply. In this case, we will select POST.

Here we are not using any security constraints as we are using external authentication, we

directly move on to testing the connector.

In this page, select the HTTP Method for this connector as POST.

In the Body section, give the same payload as we gave in POSTMAN.


26

We need to select a backend in authentication session. Hit on Test Endpoint.

Hit on Test Endpoint.

We can see a Status Code 200, which is a Success.


27

And the same output is generated as in POSTMAN. Our Connector is working as expected.


28

6.3. Create Custom API

Now, go back to the Menu and select APIs where we create a Custom API to call the Connector.

From the New API dropdown, select API.


29

The New API creation page opens, fill in the required details and hit on create button.


30

6.3.1. Create Endpoints to API

Once the API is created, navigate to Endpoints.

Click on New Resource and create an Endpoint to this API.

Fill in the details and navigate to Methods link.


31

Add POST Method to this Endpoint.

Navigate to Security from the API menu.

Make the Login Required off.

Now, navigate to Implementation from the Menu.


32

6.3.2. Implement NODEJS

Here, we see a JavaScript scaffold, this is where we write NODEJS code to implement

our Custom API. Click on the JavaScript scaffold button.

It will prompt to download a zip file.

Once downloaded, unzip the folder. We will have the below files in it.

Open, the package.json file. In this file we need to define dependencies, which we will

give the path and version of our Connector. These details we can get from the connector

page.

Navigate to Connector page, copy the connector path and version from here.


33

This is the package.json file. Include the above details in dependencies.

Code snippet:

{

"name" : "smartexpcntwithreportheaderidapi",

"version" : "1.0.0",

"description" : "Smart Exp Cnt with Report Header Id API",

"main" : "smartexpcntwithreportheaderidapi.js",

"oracleMobile" : {

"dependencies" : {

"apis" : { },

"Connectors" :

{"/mobile/connector/SmartExpenseCountwithReportHeaderId":"1.0"}

}

}

}

Now, open smartexpcntwithreportheaderidapi javascript file, where we call our

connector.


34

Code snippet:

We declare body for the REST Service

var body = {

"Smart_Expense_Approval":

{

"@xmlns":

"http://xmlns.oracle.com/apps/ap/rest/Smart_Expense_Approval/get_smart_exp_cnt_p/

",

"RESTHeader":

{

"xmlns":

"http://xmlns.oracle.com/apps/ap/rest/Smart_Expense_Approval/get_smart_exp_cnt_p/

",

"RespApplication":"SYSADMIN",

"SecurityGroup":"STANDARD",

"NLSLanguage":"AMERICAN",

"Responsibility":"SYSTEM_ADMINISTRATOR",

"Org_Id" :"204"

},

"InputParameters":

{

"P_USER_NAME": req.body.P_USER_NAME

}

}

};

Also declare the headers required for the Service

var headers = {

'Accept': 'application/json',

'Content-Type': 'application/json',

'Oracle-Mobile-Api-Version': '1.0'

}

Then we have make post method call to the connector

req.oracleMobile.connectors.SmartExpenseCountwithReportHeaderId.post

('SmartExpenseCountwithReportHeaderId',

body,

{

externalAuthorization: 'Basic

c3lzYWRtaW46b3JhY2xlMTI=',

inType: 'json'

},

{

headers: headers

}).then(

function (result)


35

{

res.send(result.statusCode,

result.result);

},

function (error) {

console.dir(error);

res.send(500,

error.error);

}

);

After, the coding is done. Zip the folder and we have to upload it in MCS.

Navigate, to implementation in API Menu in MCS. Drag and drop the zip file here.

Once the upload is completed, we will see the below details updated.

Since, we wrote a code where the value of Report header Id is dynamically fetched.

We will give define a static value for Testing this API.

This can be done in the Endpoints page. Navigate to Endpoints page. There we see a

body section, click on Add Media Type

Provide a static value in JSON format under Example Tab.


36

Click on Test button at top right corner of the page

In Test page, we can see a body section, where we can use the static value we defined

as example.

Click on Use Example and the values populate in the space.

In the Authentication Section, we need to select a Mobile Backend for Testing.

I will select Smart_Exp_Appr.

Hit the Test Endpoint button.


37

We can see the Status code 200.

And the output which comes from the Connector.


38

7. Place Custom API in MBE

Once our Custom API is ready, we go back to Mobile Backends from the Menu.

Navigate to APIs page.

Here we can select the Custom API which we created to include it in the TEST MBE.

Click on Select APIs

You will get the list of all the APIs created in that environment.

Click on the ‘+’ button, to include this API in TEST Backend.


39

8. Create a screen in Mobile App using Ionic 3 Framework

Create an Application by using the CLI

We have to set the path of the application

After creating the application the folder structure may look like this

Create a page using the below command

ionic g page expensesdetails

After creating the page the folder structure may look like below


40

Create providers using the command below

ionic g provider singleton

The folder structure of the provider may look like this

After creating provider we have to to import the provider to the pages which are using providers in

app.module.ts


41

To call the REST API make use of providers, in the first provider we have to give the REST API like

this

Next step is we have to give the Mobile backend details by using another provider named Sample

In headers section we will send the mobile backend details and in the body we will send the data

which is required to get the response from the REST API.


42

After that call getData() method from the provider in openList() method of expensedetails.ts file to

get the response.


43

In the openList() method we call the RESTAPI from the singleton provider which is stored in the

variable.

Pass the RESTAPI and the body through getData() method of sample provider in openList() method

of expensedetails.ts, we will get the data like this


44

The Output we get here is in string format, we have to change to JSON Format using JSON.parse()

method


45

Now the output is in JSON format which is displayed Using Console.log() method.


46

In the expensedetails.html page we need to get the data which is to be displayed.

To achieve this we have to give the following functionality


47

Run the application using the command

ionic lab

This is the final screen where we display the data rendered from REST API in mobile app.

Date post:	27-Apr-2018
Category:	Documents
Upload:	hatu
View:	227 times
Download:	9 times

END TO END GUIDE ON CREATING IONIC MOBILE APP BASED … · END TO END GUIDE ON CREATING IONIC...

Documents