Build Appcelerator Titanium app with SMP Rest API

[tahir_z]

This tutorial will guide you to create your own app with Titanium by using SMP Rest Services API.

What is Appcelerator Titanium?

     Appcelerator enables you to Develop Mobile APP’s on Andriod, Apple, BlackBerry, Windows Devices Usingthe API’s provided by Titanium Studio which was built on HTML5, jQuery which simulates the native APP experience on respective device.

Developing an Appcelerator app is need only knowledge of Javascript coding and it converts javascript base to Native APIs for IOS, Android etc. Appcelerator Titanium can access SAP data using Netweaver Gateway and also interact with data (whether it be data from SAP or some other data source) and services via SAP Mobile Platform.

The Sybase Unwired Platform REST Services API enables standard HTTP client applications running in any platform to access Sybase Unwired Platform REST services.SUP 2.2  provides REST services so that applications can be built as any standard HTTP application to leverage Unwired Server for security and push features among others. Using of Rest API enables you to manage services and users.

In this blog we will create a Rest Service API by configuring in sybase control center and create an Appcelerator Titanium app using SMP rest service.

Pre-requesties

•    Appcelerator Titanium Studio

     You can go through this blog to install Appcelerator Studio

•    SUP 2.2 SP2 or later version

•    A rest web service

       In this tutorial we use following free public service 

       http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetWeatherInformation

Content of this blog

•    Sybase Control Center registiration

•    Creating Appcelerator app with Rest Services API

1-  SCC Registiration

Login to sybase control center. Go to Application->New. Provide a uniqe application ID

Select the Configuration additional settings box and click next. Click proxy tab on left side of window and write endpoint of service click finish. This will create a proxy connection in connection pool. Navigate to Domains -> connection and check the connection url and type.

In our test web service Application Endpoint will be as http://wsf.cdyne.com/

RESTClient and type the url as : http://<SMPServer>:<ProxyPort>/<ApplicationID> Typically the Proxy would be 8000, 8001 or 5001. Application ID would be the Application id created earlier.

This completes the configuratin in SCC.

2- Create Appcelerator Titanium Application

Before creating a new project check IOS or any SDK that you are going to use for testing application. Open the Dashboard page go on Get Started tab. At the bottom you will see installed SDKs in green color as below.

Create a new project. Go on File->new->Mobile Project

Select Default Project click on Next

Specify you project name and a unique Application Id. Select a deployment target and click Finish

This will create a simple demo with view and tabcontroller. You can go through or delete all code for starting a new application. I will use this sample demo by making some modifications.

Create a new Javascript file call a name as “secondview.js” or whatever you want. After you create file add the following code.

var win = Titanium.UI.currentWindow;

var data = [];

var xhr = Titanium.Network.createHTTPClient();

xhr.open("GET","https://<smpusername>:<smppassword>@<smphostname>:<proxport>/<applicationID>/ WeatherWS/Weather.asmx/GetWeatherInformation");

xhr.setRequestHeader("Content-Type","application/atom+xml");

xhr.setTimeout(5000);

xhr.onload = function(){

    try{

        var doc = this.responseXML.documentElement;

        var items = doc.getElementsByTagName("WeatherDescription");

        var x = 0;

        for(var i = 0; i< items.length; i++){

            var item = items.item(i);

            var description = item.getElementsByTagName("Description").item(0).text;

            var imgurl = item.getElementsByTagName("PictureURL").item(0).text;

            var row = Ti.UI.createTableViewRow({

                height:50

                });

            var labeltext = description;

            var label = Ti.UI.createLabel({

                text : labeltext,

                left : 55,

                top : 5,

                bottom : 5,

                right : 5

            });

            var img = Ti.UI.createImageView({

                width: 50,

                height:50,

                left:0,

                image:imgurl

             });

            row.add(img);

        row.add(label);

            data[x++] = row;

        }

    }

    catch(e){

        alert(e);

    }   

    var tableview = Titanium.UI.createTableView({data:data});

    Titanium.UI.currentWindow.add(tableview);

    win.open();

}

xhr.send();

Open app.js and add seconview.js file to view as below

Save all files and run application. Click on view 2 tab and you will see the result as below

I hope my blog will help you and giving you idea.

You can check my other blogs :

Building Sapui5 mobile application for IOS devices with phonegap

Building Phonegap native plugin for HWC container - IOS

Building Phonegap native plugin for HWC container - Android