Hi to all,

What I would like to share in this blog is how we are going to create an app using Sencha Touch 2 that is able to perform device registration automatically in the SAP Mobile Platform.

What You Need

These are the components that you need in order to execute the app:

Setting Up Application ID in SAP Mobile Platform

  • After you have registered an account in https://account.hanatrial.ondemand.com/, please log-on and it will bring you to the SAP HANA Cloud Platform Cockpit
    /wp-content/uploads/2014/06/1_468009.jpg
  • Go to  Account Information > Services > SAP Mobile Platform
  • You will see the main Home page. Please go to Applications page and click New
  • Under New Application, fill in the following information. For the application ID com.FD.Demo, please take a note carefully of this name convention. We will use this naming convention in our Sencha code.

ID

com.FD.Demo

Name

com.FD.Demo

Vendor

FD

Description

FD Demo

/wp-content/uploads/2014/06/4_468008.jpg

  • Under Back End, fill in the following information:

EndPoint

http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/

Connect to

Internet

Rewrite URL

Checked

Allow anonymous connection

Checked

Username

Username (for example: P1940517116)

Password

password

/wp-content/uploads/2014/06/5_468010.jpg

You can use any OData services available from SAP OData backend service that you have registered. I am using the CountryCollection to get the country description: http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/CountryCollection

  • Continue with Authentication. Go to this tab, select New for the Security Profile and fill in the below information then click Save.

Security Profile Name

com_FD_demo

Authentication Type

Basic Authentication

Authentication URL

http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/

Connect to

Internet

/wp-content/uploads/2014/06/6_468036.jpg


Test the SAP Mobile Platform Connection


To test the setting that we have done it in the above steps, please go to the Application page, select the application ID that we have created, com.FD.Demo and click Ping. If successful, you will see the green checked icon status for both Backend and Security profiles.

/wp-content/uploads/2014/06/7_468037.jpg


Setting up Sencha Touch

Don’t worry about writing the codes, you can download the source code from the Github site: https://github.com/ferrygun/SenchaSMP3.0.

You can create a new app in Sencha working folder by typing:

sencha -sdk “<path_to_ SDK touch-2.3.1>” generate app -name <Name_of_App> -path “<path_to_App>”

For example, if you want to create the Sencha app named with FD4 and SDK folder is in C:\touch-2.3.1 and your Sencha working folder is in C:\SenchaTouch\FD4, then you can type the following command in the command-prompt:

sencha -sdk “C:\touch-2.3.1” generate app -name FD4 -path “C:\SenchaTouch\FD4”

In this app, a user will enter the country code to get the description of the country code. The country code entered by the user will be passed to OData service:

http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/CountryCollection(‘<country_code>’)

If the country code exist, it will print the country code description in another page.

/wp-content/uploads/2014/06/10_468066.jpg/wp-content/uploads/2014/06/11_468067.jpg

In order to access the data from SMP, firstly we need to register the device in the SMP. Below simple workflow describes the logic to connect to the application ID. This process will be executed every time the app is loaded. Please put this under controller init function: /app/controller/note.js > init.function().

/wp-content/uploads/2014/06/9_468065.jpg

  • First step is to check if it can connect to application ID. It performs a simple Ajax GET request to https://smp-p1940517092trial.hanatrial.ondemand.com/com.FD.Demo/

    
    Ext.Ajax.request({
    url: '<apache_web_server>/sapgw/com.FD.demo'
    headers: {
    "Content-Type" : "application/atom+xml; charset=UTF-8",
    "Authorization" : 'Basic UDE5NDA1MTcxMTY6UGFwYW1hbWExOA=='
    },
    method: 'GET',
    withCredentials: true,
    useDefaultXhrHeader: false,
    disableCaching: false
    

The Authorization value above is the result of the base64.encode of your username and password in the SAP OData backend service. The above code is calling the application ID com.FD.Demo that we have defined in the SMP and perform the GET request.

Content-Type

application/atom+xml; charset=UTF-8

Authorization

Basic UDE5NDA1MTcxMTY6UGFwYW1hbWExOA==

XML Body

<?xml version=”1.0″ encoding=”utf-8″?>
<entry xmlns=”http://www.w3.org/2005/Atom” xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:d=”http://schemas.microsoft.com/ado/2007/08/dataservices“>
<content type=”application/xml”>
<m:properties>
<d:DeviceType>devtype</d:DeviceType>
</m:properties>
</content>
</entry>

where devtype is one of these combinations depending on the OS’ client:
iPad, iPhone, iPod, iOS, Android, Blackberry, Windows, Unknown

  • 
    if(response.statusText == 'Not Found' || response.statusText == 'Forbidden' ) {
    if(Ext.os.is.iPad) {
    devtype = 'iPad'
    } else if(Ext.os.is.iPhone) {
    devtype = 'iPhone'
    } else if(Ext.os.is.iPod) {
    devtype = 'iPod'
    } else if(Ext.os.is.iOS) {
    devtype = 'iOS'
    } else if(Ext.os.is.MacOS) {
    devtype = 'iOS'
    } else if(Ext.os.is.Android) {
    devtype = 'Android'
    } else if(Ext.os.is.BlackBerry) {
    devtype = 'BlackBerry'
    } else if(Ext.os.is.Windows) {
    devtype = 'Windows'
    } else if(Ext.os.is.Other) {
    devtype = 'Unknown'
    }
    var regXML = '<?xml version="1.0" encoding="utf-8"?>' +
    '<entry xmlns="://www.w3.org/2005/Atom" xmlns:m="://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="://schemas.microsoft.com/ado/2007/08/dataservices">' +
    '<content type="application/xml">' +
    '<m:properties>' +
    '<d:DeviceType>' + devtype + '</d:DeviceType>' +
    '</m:properties>' +
    '</content>' +
    '</entry>'
    Ext.Ajax.request({
    url: '//<apache_web_server>/sapgw/odata/applications/latest/com.FD.Demo/Connections',
    headers: {
    "Content-Type" : "application/atom+xml; charset=UTF-8",
    "Authorization" : 'Basic UDE5NDA1MTcxMTY6UGFwYW1hbWExOA=='
    },
    method: 'POST',
    withCredentials: true,
    useDefaultXhrHeader: false,
    xmlData: regXML,
    disableCaching: false
    
    
  • If the registration process is successful, you will see the application connection ID with the status registered under Application Connection tab. You can see the device type is Windows because I am running the app in my Windows OS. If you are running the app from your iPhone, you will see the device type is iPhone. Please try it.
    /wp-content/uploads/2014/06/12_468114.jpg
  • During registration process, user will not be able to interact with the app. Once it is completed, user can continue.

Hopefully the above blog will benefit you to gain insight and experience in using the SAP Mobile Platform. Off course you also can put the log-on page before the app checks the connection ID to enforce the security.

Thanks for reading my blog and feel free to drop me any comments.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply