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:
- You need Sencha Touch 2 framework installed. Please download from http://www.sencha.com
To get you familiar with Sencha Touch, please read my blog here. - SAP Mobile Platform cloud edition. Please register you own from https://account.hanatrial.ondemand.com/
- SAP OData backend service to consume. Please register a user from the sample service here: http://scn.sap.com/docs/DOC-40986
- A web server with reverse proxy to execute the Sencha Touch 2 codes. For this case, I am using Apache from http://www.apache.org
Modify the httpd.conf to setup the reverse proxy in the Apache web server:
ProxyPass /sapgw/ https://smp-p1940517092trial.hanatrial.ondemand.com/
ProxyPassReverse /sapgw/ https://smp-p1940517092trial.hanatrial.ondemand.com
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
- 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 |
- 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 |
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 |
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.
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.
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().
- 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.
- If it's successful, we assume the connection ID has already been established. If failed (not registered yet), it will trying to register the device by sending the Ajax POST request to https://smp-p1940517092trial.hanatrial.ondemand.com/odata/applications/latest/com.FD.Demo/Connection... with the following parameters:
Content-Type | application/atom+xml; charset=UTF-8 |
Authorization | Basic UDE5NDA1MTcxMTY6UGFwYW1hbWExOA== |
XML Body | <?xml version="1.0" encoding="utf-8"?> |
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.
- 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.
- SAP Managed Tags:
