Creating a request-response mobile application with IBM Worklight and IBM Integration Bus

This article shows you how to create a mobile application by integrating IBM Worklight with IBM Integration Bus. The article uses a sales order management scenario, with a mobile application retrieving sales orders from a back-end Siebel system.

Abhinav Priyadarshi (pabhinav@in.ibm.com), Technical Project Lead, WebSphere Message Broker Development team, IBM

Photo of Abhinav PriyadarshiAbhinav Priyadarshi is an Advisory IT Architect and Technical Lead for the IBM Integration Bus Development Team at the IBM India Software Lab in Bangalore. He has 12 years of experience with IBM. He develops new features and nodes for IBM Integration Bus, and provides consultancy on IBM Integration Bus Proofs of Concept, EAI design, and implementation for customers in India and the Asia-Pacific region. You can contact Abhinav at pabhinav@in.ibm.com.



Pabitra Mukhopadhyay (pabmukho@in.ibm.com), Software Engineer, IBM

Photo of Pabitra MukhopadhyayPabitra Mukhopadhyay has seven years of experience with IBM mainframes (System z) application development, testing, and systems programming. He is currently working with the IBM India Software Labs System z Competency team as a z/OS and middleware systems programmer. He has co-authored developerWorks articles involving messaging products and z/OS. You can contact Pabitra at pabmukho@in.ibm.com.



Avinash Jhawar (avjhawar@in.ibm.com), Staff Software Engineer, IBM

Photo of Avinash JhawarAvinash Jhawar has nine years of experience in software testing and development. He currently works on WebSphere Message Broker and IBM Integration Bus. You can contact Avinash at avjhawar@in.ibm.com.



30 October 2013

Also available in Chinese Russian

Introduction

IBM® Integration Bus V9 (hereafter called IBM Integration Bus) provides connectivity to a wide range of data sources, including packaged applications, files, and databases. IBM Integration Bus V9 and IBM WebSphere® Message Broker V8.0.0.1 or later (hereafter called WebSphere Message Broker) also provide support for IBM Worklight, which is part of the IBM Mobile Foundation family of products. Worklight provides comprehensive, enterprise-level support for mobile development, deployment and management, with an open mobile application platform for smartphones and tablets that enables enterprises to expose their IT services through mobile channels and protect them with a variety of security mechanisms.

IBM Integration Bus and WebSphere Message Broker provide reusable Worklight patterns for various requirements. This article shows you how to implement a Request-Response scenario in which a mobile application places an inquiry for the status of a sales order, and the status is retrieved from a Siebel server using IBM Integration Bus. The figure below shows the integration of a mobile application with IBM Integration Bus using Worklight. In the figure, Worklight and IBM Integration Bus are on the same system, but they can also be on different systems and accessed as separate system resources.

Figure
Figure showing integration of a mobile application with IBM Integration Bus using Workligh

User prerequisites

To benefit from this article, you should have basic knowledge of:

  • HTML and Javascript coding
  • JavaScript Object Notation (JSON) and Extensible Markup Language (XML)
  • IBM Integration Bus and message flow development involving different nodes, ESQL, HTTP web services, and WebSphere Adapters for ERP systems such as Siebel
  • Siebel ERP systems and working with ERP data using the Siebel web client interface

Software prerequisites

  • IBM Integration Bus V9 Toolkit or WebSphere Message Broker V8.0.0.1 or later on a Microsoft® Windows® or Linux® workstation.
  • IBM Integration Bus V9 Runtime or WebSphere Message Broker V8.0.0.1 or later. The IBM Integration Bus Toolkit and Runtime can be on the same system.
  • IBM Worklight V5.0.5 or later, which can be on the same system as the IBM Integration Bus Runtime or on a different system.
  • Siebel® ERP system.

Additional notes on software prerequisites

  • The systems or servers used in the above setup should be within the same network and reachable from one another.
  • If you want to deploy this application to a mobile device, you will need the appropriate compilers and tools installed for application deployment.
  • This article uses Microsoft Windows for all servers.
  • The application is deployed on a Blackberry® Bold 9700 phone, which connects to the enterprise network over WiFi. A Ripple emulator is used to test the BlackBerry mobile application on the workstation.

Designing the IBM Integration Bus message flow

The following message flow is created to receive an HTTP request and send it to the Siebel back-end to get the order status. The status is in XML and is transformed to JSON before sending the HTTP Reply. Convert the data into JSON format within the message flow so that the Worklight Adapter can directly pass the data to the requesting mobile application. Otherwise, you must configure the Worklight Adapter to convert data from XML to JSON format. Create the message flow shown below, using the built-in nodes in IBM Integration Bus.

Message flow for processing a web service request from Worklight and retrieving data from Siebel
Figure showing message flow for processing a web service request from Worklight and retrieving data from Siebel

Here are the message flow implementation details:

  1. HTTP Input node: Set the following properties:
    HTTP Input node properties
    Figure showing HTTP Input node properties
  2. GetData Compute node: Insert the following code in the compute node.
    ESQL code for GetData compute node
    CREATE COMPUTE MODULE WorklightFlow_GetData
       CREATE FUNCTION Main() RETURNS BOOLEAN
       BEGIN
          CALL CopyMessageHeaders();
          CALL CopyEntireMessage();
          -- Set the Account ID to retrieve from Siebel 
          SET OutputRoot.XMLNSC.SalesOrder.Account.AccountID =  
             InputRoot.XMLNSC.SalesOrder.Account.AccountID;
     
          RETURN TRUE;
       END;
    
       CREATE PROCEDURE CopyMessageHeaders() BEGIN
          DECLARE I INTEGER 1;
          DECLARE J INTEGER;
          SET J = CARDINALITY(InputRoot.*[]);
          WHILE I < J DO
             SET OutputRoot.*[I] = InputRoot.*[I];
             SET I = I + 1;
          END WHILE;
       END;
       CREATE PROCEDURE CopyEntireMessage() BEGIN
          SET OutputRoot = InputRoot;
       END;
    END MODULE;
  3. Siebel Request Node: Create an Adapter connection file to connect to Siebel Server by performing the following steps:
    1. In the IBM Integration Bus or WebSphere Message Broker Toolkit, select File => New Adapter => Connection.
    2. Select IBM WebSphere Adapter for Siebel Business Applications and Click Next.
    3. Provide the Connector Project Name CWYEB_SiebelAdapter6 and then click Next.
    4. Specify the Siebel JAR files as shown below and then click Next:
      Siebel Adapter Connection
      Figure showing Siebel Adapter Connection
    5. Select Outbound, since the message flow sends the outbound request to Siebel.
    6. Specify the Connection URL, user name, password, and Siebel Repository.
    7. Click on Execute Query, select the Siebel business object related to Sales Order, and then click Next.
    8. Provide the Adapter component name and then click Finish. The message set required and Siebel request will be created in order to parse the Siebel response messages.
  4. GetStatus Compute node: Insert the following code in the Compute node:
    ESQL code for GetStatus Compute node
    CREATE COMPUTE MODULE WorklightFlow_GetStatus
       CREATE FUNCTION Main() RETURNS BOOLEAN
       BEGIN
       -- CALL CopyMessageHeaders();
          --CALL CopyEntireMessage();
          --SET OutputRoot.XMLNSC.Message.Status = 'Order not Delivered';
          SET OutputRoot.XMLNSC.Message.Status = 'Your Order is ' || 
             InputRoot.XMLNSC.SalesOrder.Order.Item.ItemStatus;
          RETURN TRUE;
       END;
    
       CREATE PROCEDURE CopyMessageHeaders() BEGIN
          DECLARE I INTEGER 1;
          DECLARE J INTEGER;
          SET J = CARDINALITY(InputRoot.*[]);
          WHILE I < J DO
             SET OutputRoot.*[I] = InputRoot.*[I];
             SET I = I + 1;
          END WHILE;
       END;
    
       CREATE PROCEDURE CopyEntireMessage() BEGIN
          SET OutputRoot = InputRoot;
       END;
    END MODULE;
  5. XMLToJSON JavaCompute node: Insert the following code in the try block of the JavaCompute node:
    Java code for XMLToJSON JavaCompute node
    try{
       copyMessageHeaders(inMessage, outMessage);
          MbElement jsonDataElement = outMessage.getRootElement().
             createElementAsLastChild(MbJSON.PARSER_NAME).
                createElementAsFirstChild(MbElement.TYPE_NAME);
       jsonDataElement.setName(MbJSON.DATA_ELEMENT_NAME);
    
          MbElement xmlnscElement = inMessage.getRootElement().getLastChild();
       if(null==xmlnscElement ) {
          MbUserException mbue = new MbUserException(this, "evaluate()", "", 
          "", "No body", null);
          throw mbue;
       }
       jsonDataElement.copyElementTree(xmlnscElement);
       Utility.unsetNameSpaces(jsonDataElement);
       Utility.convertArrays(jsonDataElement);
       
          out.propagate(outAssembly);
    }  catch (Throwable e) {
       // Example Exception handling	
          MbUserException mbue = new MbUserException(this, "evaluate()", "",
             "", e.toString(), null);
          throw mbue;
    }
  6. HTTP Reply node: Connect the output of the JavaCompute node to an HTTPReply node with default values.

Developing the mobile application using IBM Worklight

  1. Create the Worklight hybrid application project: Select File => New => Worklight Project.
  2. Select Hybrid Application and provide the name of the project:
    Create a new Worklight project
    Figure showing a new Worklight project
  3. Click Next, specify the Application name (for example, MobileApp), and then click Finish.
    Creating a new Worklight project
    Figure showing a new Worklight project
  4. A a new Worklight mobile application project and default sample mobile application are created:
    New Worklight project and sample mobile application in Eclipse IDE
    Figure showing a new Worklight Project and sample mobile application created in Eclipse IDE
  5. Next, create a new Worklight Adapter to connect the mobile application to the back end: Select File => New => Worklight Adapter, for Adapter type select HTTP Adapter, specify the Adapter name, and then click Finish.
    Creating a new Worklight Adapter
    Figure showing creating a new worklight adapter
    A new Worklight Adapter is created as shown below:
    New Worklight Adapter created in Eclipse IDE
    Figure showing new Worklight Adapter created in Eclipse IDE
  6. Add the JavaScript adapter method WorklightAdapter-impl.js. This method creates the required message, sends it to IBM Integration Bus, and waits for a response.
  7. Open the JavaScrip mobile application MobileApp.js to create the mobile application and call the adapter method to invoke the required adapter from the mobile application.
  8. Create the JavaScript mobile application web page MobileApp.html. It takes the order number and account details and retrieves the status. In this mobile application, you call the JavaScript method getInquiryDetails(), which invokes the adapter method getInquiryDetailsAdapter(). You can download the HTML code for the mobile application at the bottom of the article. Download the file Worklight.zip and unzip it to access the source code . MobileApp.js, WorklightAdapter-impl.js. and MobileApp.html are used in the Worklight project.

Compiling and deploying the mobile application for testing

  1. The application is now ready to compile, after which you will create an environment-specific application:
    Worklight environment
    Figure showing worklight environment
  2. This article uses BlackBerry for deployment, but you can also compile the application to create a mobile application for Android or iPhone. When compiled, the Blackberry mobile application will appear in the Package Explorer Navigator, as shown below. You must deploy the adapter and the mobile application to the IBM Worklight server before running them.
    Mobile application for Blackberry
    Figure showing mobile application for Blackberry
  3. To deploy the Worklight adapter, expand Adapters in the Package Explorer navigator. Right-click on Worklight Adapter and select the options shown below:
    Deployment of Worklight adapter
    Figure showing deployment of Worklight adapter
  4. Deploy the mobile application: Expand apps in the Package Explorer navigator, right-click on MobileApp, and select the options shown below:
    Deployment of Worklight mobile application
    Figure showing deployment of Worklight mobile application
  5. The mobile application is now ready for testing. Open the Worklight Console by pointing your web browser to http://localhost:8080/console/index.html#catalog link. The mobile application and Worklight adapter that were deployed in previous steps are shown in the Worklight Console:
    Worklight console
    Worklight console
  6. Click the mobile application BlackBerry link or the Common Resources link to run your mobile application. This will launch the mobile application as shown below:
    Mobile Application under test
    Figure showing mobile application under test
  7. Enter the AccountNumber and OrderNumber to query the status of the order. The request from mobile application goes to Worklight adapter which then sends the request to the Integration Bus flow and gets the response. The Worklight adapter sends the response data to the mobile application, which is then displayed on this web page:
    Retrieving Order Status using Mobile Application
    Retrieving Order Status using Mobile Application

Installing the application on BlackBerry

The steps below are for a Blackberry 9700 Bold and they may be slightly different for other Blackberry devices and models.

  1. Download and install the Ripple emulator.
  2. Download and install the Blackberry WebWorks SDK.
  3. Run the Ripple service from the command line:
    Starting Ripple service
    C:\Project2012\Customer\Innovation\SalesScenario\Worklight\blackberry\
    services\bin>ripple-services
    defaulting to port 9910...
    Starting in production mode.
    Picard boldly goes on port 9910...
  4. Download and install the Google Chrome browser (if not installed already) and then Configure the Ripple emulator with Chrome using these instructions. After you have configured Ripple emulator it should open in your browser as shown below. Click Enable.
    Enabling Ripple emulator
    Enabling Ripple emulator
  5. The Blackberry Emulator launches:
    Launching Blackberry emulator
    Launching Blackberry emulator
  6. The mobile application created above must be signed. For more information, see Set-up for signing BlackBerry 7 or earlier appSign a BlackBerry 7 or earlier app.
  7. Make sure you have a compatible version of the Oracle JDK installed at the default location of C:\Program Files (x86)\Java\jdk1.6.0_35. You will receive via e-mail three certificate files or keys: client-RCR-XXXXXXX.csi, client-RRT-XXXXXXX.csi, and client-RBB-XXXXXXX.csi. These three keys let the BlackBerry SignatureTool register with the Signing Authority. They must be installed on the same workstation.
  8. Make sure that the BlackBerry development tool has been installed onto the workstation that will be used to sign your BlackBerry applications. When registering with the signing authority, make sure that you have correctly entered your registration PIN number. If you enter the incorrect PIN five consecutive times, your keys will be deactivated.
  9. Copy the three certificates into the C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5\bin directory and run the following commands:
    Registering BlackBerry Signature Tool with Signing Authority
    C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5\
    bin>java -jar SignatureTool.jar client-RCR-1927076.csi
    C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5\
    bin>java -jar SignatureTool.jar client-RBB-1927076.csi
    C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5\
    bin>java -jar SignatureTool.jar client-RRT-1927076.csi
  10. The mobile application created by Worklight can be compiled and packaged in two ways:
    1. Use bbwp to compile the application. Copy the JAR file shown below from the Ripple installation to your C drive and add it to CLASSPATH variable. Then run the bbwp command:
      Compiling and Packaging mobile application using bbwp
      C:\>set CLASSPATH=C:\xercesImpl-1.5.jar:%CLASSPATH%
      C:\>cd C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5
      \bin\
      C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5\
      bin\>bbwp C:\Users\IBM_ADMIN\RippleSites\FirstApp\pkg\salesorder250113\SalesInqu
      iry.zip -o C:\Users\IBM_ADMIN\RippleSites\FirstApp\pkg\out
    2. Use the Ripple emulator to compile and package the application. Click on the settings as shown below and set the values:
      Settings for packaging mobile application for BlackBerry
      Settings for packaging mobile application for BlackBerry
      In this example, the SDK Path is set to C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK 2.3.1.5. The Project Root is set to C:\Users\IBM_ADMIN\workspace_worklight\SamplWorklightProject\apps\Sample\blackberry\native. The Active Name is set to SalesInquiry and the Output Folder is set to C:\Users\IBM_ADMIN\RippleSites\FirstApp\pkg\salesorder250113. Click Package and you should see the message Build succeeded from the emulator.
  11. For both procedures described above, the salesInquiry.cod output file will be created under the output folder specified in the settings, usually C:\Users\IBM_ADMIN\RippleSites\FirstApp\pkg\salesorder250113\StandardInstall\:
    Figure showing .cod file
    Figure showing .cod file
  12. The SalesInquire.cod file can be imported into Blackberry mobile device as a mobile application using Blackberry Desktop Software V7.1.0 B42, which you can Download from BlackBerry.
    BlackBerry Desktop Software
    BlackBerry Desktop Software
  13. Connect the mobile device to your computer via a USB port and install the mobile application SalesOrderInquiry onto the device using BlackBerry Desktop Software. Then disconnect the device from your computer.
  14. You should now see the application installed in the mobile handset, as shown below. Before launching the application, ensure that the mobile handset has data network access through either WiFi or a mobile data channel. Click on the application icon to launch it. This example connects the mobile handset to the IBM network over WiFi.
    Application installed in BlackBerry mobile handset
    Application installed in BlackBerry mobile handset
  15. The application after it is launched is shown below. Key in the Account Number and Order Number as shown below:
    Launching the mobile application
    Launching the mobile application
  16. Click Submit to retrieve the status of the sales order, which is fetched by the mobile application as shown below:
    Mobile application displaying the status of the sales order
    Mobile application displaying the status of the sales order

Download

DescriptionNameSize
Code sampleWorklight.zip3 KB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Mobile development
ArticleID=951367
ArticleTitle=Creating a request-response mobile application with IBM Worklight and IBM Integration Bus
publish-date=10302013