Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
1/25
15/8/2014
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
2/25
15/8/2014
So if you are in for some exposure to cutting edge technologies, read on!
The players
SAP Gateway is a SAP server add-on that allows you to access business data in SAP
systems through OData, an open web protocol for querying and updating data, built on
common web technologies like HTTP, XML and REST.
SAPUI5 (officially known as UI development toolkit for HTML5) is a JavaScript library,
currently in Beta, to build HTML5 apps.
Node.js is a server platform that is quickly gaining popularity. It is built on Chromes V8
JavaScript runtime and allows you to create server applications in JavaScript. Node.js uses an
event-driven, non-blocking I/O model that makes it lightweight and efficient.
Cloud9 is a web-based IDE + node.js runtime environment offered as a service (partially open
sourced). In Cloud9 you can develop, debug and test node.js applications, all from within your
browser. Cloud9 can use a GitHub repository to manage and share the source code. Once
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
3/25
15/8/2014
you have completed your application, you can deploy the application to Windows Azure.
Windows Azure is Microsofts cloud platform. One of the services is hosting a Node.js
application in a scalable environment.
GitHub hosts source code repositories,using the Git version control system. GitHub offers
public and private repositories. To work with GitHub, you need to use Git client software.
The Big Picture
Before we go into the details, lets sketch how it all fits together:
For development, well create a code repository on GitHub. This way we can add/update
source code and resource files both from our local machine (via Git) and on Cloud9. We will
use the repository to add all SAPUI5 js and css files that are required to our project files. In
Cloud9 we use a clone of the GitHub repository. This way we can push and pull Cloud9
project files in and out of the GitHub repository.
Cloud9 is a fully web-based development environment: developers use a browser to access
the Cloud9 code editor, system command prompt, debugger, Node.js console output etc. We
can run a Node.js application directly on the Cloud9 environment and use a special url to
access the running server app as a (test) user.
Actually we need 2 applications: a server application which runs on the Node.js server and
acts as middleman to SAP Gateway (and possibly other data sources) and a client
application (HTML5, SAPUI5) which runs in the browser, but uses html/css/js files which
are hosted on the server. It is important to keep these two apart, even if we develop both in
JavaScript.
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
4/25
15/8/2014
When the user clicks on Download as Excel button, the client app requests a special
url from the server.
This will trigger the server to fetch the Sales Order data from SAP Gateway, parse it (but
now on the server side!), convert it into an Excel format and return this to the user. The
user experience is identical to requesting a downloadable file.
Once we have the application working in the Cloud9 environment, we can request deployment
to Windows Azure. Cloud9 will generate configuration files, package the apps, upload and
deploy to Azure.
Caveats:
This demo project involves quite some platforms and services. Within the scope of this
blog post it is not feasible to provide a very detailed, click-by-click walk-through. Instead
I will refer to tutorials for the respective services which contain detailed instructions and I
will point out the main route and highlights along the way.
I recommend that you use Safari, Chrome or Firefox on GitHub and Cloud9. IE support
is lagging (GitHub) or non-existent (Cloud9).
Step 1: Create a GitHub repository
First we need to create a repository on GitHub to manage and share our source code across
environments.
1. Sign-up with a (free) account for GitHub. A free account lets you create public
repositories.
2. Follow the instructions on Set up Git to install Git local software and set up SSH keys
3. Create a repository on GitHub. Well assume it is named: NODEJS_SAPGW
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
5/25
15/8/2014
2. After signup, you will see your GitHub repository (I blurred out my other repositories):
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
6/25
15/8/2014
3. Select the repository and click Clone to edit and select Shared Development server.
4. The Cloud9 environment will make a Clone of the GitHub repository available in your
Cloud9 environment.
5. Once the Clone is completed, you see the following screen. Click on Start Editing.
6. This will bring you into the project environment. Create a folder called Public. This folder
will contain all the files required for the client application. Add the index.html and app.js
(described below) and push the changes to GitHub and pull to your local machine. Add
the SAPUI5 resources on your local working directory and push to GitHub and pull from
Cloud9. All this pushing and pulling sounds like a workout, but trust me, youll get the
hang of it!
Client application
The client application consists of an index.html file and app.js file and uses SAPUI5 to fetch
and parse OData and render a data table widget.
The index.html includes the SAPUI5 core library (which dynamically will load all
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
7/25
15/8/2014
dependencies), the application js file and a placeholder for the data table.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Node.js calling SAP Gateway</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"></script>
<script src="app.js"></script>
</head>
<body class="sapUiBody">
<img src="images/sap_logo.png" />
<div id="salesorders"></div>
</body>
</html>
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
8/25
15/8/2014
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
});
items: [button]
salesOrders.addColumn(column);
9/25
15/8/2014
This will install the modules (and their dependencies) in the node_modules folder of your
Cloud9 project. Click the refresh button next to Project Files and you can see the results.
Now we have the required modules installed, we can coding our server.js file which contains
the server application code. Based on the code of our client application, the server application
needs to respond to the following requests:
/ : redirect requests without pathname (i.e. server name only) to index.html in the public
folder
/sap/*: forward (proxy) all requests for SAP Gateway content and include authentication
/workbook: generate an Excel workbook on the fly and deliver as download
otherwise: serve static files for the client app if contained in the public folder
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
10/25
15/8/2014
// Action: Proxy an incoming (ie. from the user's browser) request to the SAP Gateway
function proxy(user_request, user_response) {
// We're proxying calls,
// so copy the path from the user request
sapgw.path = user_request.url;
// Use a client request to call SAP Gateway
http.get(sapgw, function (sapgw_response) {
// Include a content type in the response header
user_response.header('Content-Type', 'application/atom+xml;type=feed'
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
11/25
15/8/2014
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// We're done processing the response and have extracted all data required to
// create the workbook.
// First, include the proper HTTP headers
res.header('content-disposition', 'attachment;filename=SalesOrders.xml
res.header('Content-Type', 'application/vnd.ms-excel');
// Next, render the contents of Excel workbook as
// Excel 2003 XML format, using the Workbook.ejs template
res.render('Workbook.ejs', {
layout: false,
rows: rows
});
});
// Set the parser in motion with the xml data received
// from SAP Gateway. The parser will turn the XML string into
// a JS object. When done, the 'end' event will fire
// and the 'end' event handler defined above will extract the values
// and render the Workbook.
parser.parseString(xml);
});
});
};
// Action: perform a redirect to the home page (index.html)
function home(req, res) {
res.redirect('/index.html')
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
12/25
15/8/2014
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
}
// Now we will set up the routing for the server...
// Look if the request is for a static file in the public directory
// this is where the client side html, css, js and SAPUI5 resources are located
app.use(express.static(__dirname + '/public'));
// If you just call the server (root), redirect to homepage
app.get('/', home);
// Requests starting '/sap/' are proxied to the SAP Gateway
app.get('/sap/*', proxy);
// Route for workbook action
app.get('/workbook', workbook);
// Routes are set up,
// Now start the app server...
app.listen(port);
console.log('Server started on port ' + port);
You can find the username/password for the SAP Gateway demo environment on this SCN
page.
The server application uses an ejs view template to generate the Excel workbook content.
Express expects these views by default in the views directory. An ejs template is a text file
interspersed with JavaScript (very similar to classic asp or jsp pages). The view renderer uses
the template and provided parameter to output a text string, in our case the Excel content.
Heres the relevant part of the view template (rows are passed as a parameter):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Worksheet ss:Name="Sheet1">
<Table ss:ExpandedColumnCount="5"
ss:ExpandedRowCount="<%= rows.length+1 %>"
x:FullColumns="1"
x:FullRows="1"
ss:DefaultRowHeight="15">
<Column ss:AutoFitWidth="0" ss:Width="77.25"/>
<Column ss:AutoFitWidth="0" ss:Width="138.75"/>
<Column ss:StyleID="s67" ss:AutoFitWidth="0" ss:Width="56.25" ss:Span
<Row ss:StyleID="s62">
<Cell><Data ss:Type="String">SalesOrderID</Data></Cell>
<Cell><Data ss:Type="String">CustomerName</Data></Cell>
<Cell><Data ss:Type="String">Net</Data></Cell>
<Cell><Data ss:Type="String">Tax</Data></Cell>
<Cell><Data ss:Type="String">Total</Data></Cell>
</Row>
<% rows.forEach(function(row){ %>
<Row>
<Cell><Data ss:Type="String"><%= row.SalesOrderID %></Data></
<Cell><Data ss:Type="String"><%= row.CustomerName %></Data></
<Cell><Data ss:Type="Number"><%= row.NetSum %></Data></Cell
<Cell><Data ss:Type="Number"><%= row.Tax %></Data></Cell>
<Cell><Data ss:Type="Number"><%= row.TotalSum %></Data></Cell
</Row>
<% }) %>
</Table>
</Worksheet">
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
13/25
15/8/2014
Now, lets run the application in debugging mode on Cloud9. The Output tab will show the
output from the application initialization and any console.log statements you include in the
code. It also provides the url where you can access the running application.
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
14/25
15/8/2014
Click on the Download as Excel button and Excel workbook with the Sales Orders will open:
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
15/25
15/8/2014
OK, we now have a working application in Cloud9! Theres a lot more to explore in the IDE.
For example, try the debugging options: you can set breakpoints, just like in desktop IDEs.
Code execution on remote server will halt and you can explore variable and parameter values,
etc. You can also push your changes to the central repository on GitHub.
Here, we will continue our Quick Tour by deploying the application we just completed to
Windows Azure.
Step 3: Deploy to Windows Azure
Cloud9 makes deployment to Windows Azure very easy. This tutorial shows all the steps in
detail. You can skip the first steps because we already have a working app on Cloud9. Please
start at Create a Windows Azure account.
After the initial set up, you can request deployment to Azure:
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
16/25
15/8/2014
Cloud9 will offer to create default configuration files for you. Please accept.
Deploying can take a few minutes, while the application is packaged, uploaded and deployed
on Azure:
Once deployment is active, you can click on it and see the details
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
17/25
15/8/2014
The Windows Azure management tool provides full details on the deployment:
18/25
15/8/2014
http://nodesapgw.cloudapp.net
You can try it! Its live.
Youll notice that it takes quite some time to load the page. This is mainly caused by
dynamic loading of SAPUI5 resource files. Optimizations are certainly possible, but outside
the scope of this article.
This concludes our demo project to show how you can front-end SAP Gateway using Node.js
on Azure.
Just because you can, doesnt mean you should
Thats a profound adage, so lets wrap-up with a number of suggestions why you may
consider front-ending SAP Gateway in the Cloud:
Provide access to multiple backend systems through a single domain (origin). This way,
you comply with the Same Origin Policy.
Integrate SAP data in an Azure based cloud solution (E.g. a hosted .Net, MS-SQL
solution)
Offload non-business data http traffic of SAP Gateway to a more cost-effective platform.
Avoid exposing the SAP Gateway end-point to the public internet
Low-latency traffic by using caching to prevent repeatedly asking the same data via SAP
Gateway. E.g. for type-ahead and suggestion/select drop-boxes in HTML5 apps, lowlatency response are required. This is becoming more important with mobile apps where
quick selections/suggestion lists are preferred of manual input of texts
Scale-out on demand
Protocol conversion: you may want to build client applications using other protocols
(e.g. WebSockets) to expose business data. E.g. consider real-time auctions.
Content conversion: for example turning business data into Excel sheet as
demonstrated in our application
Identity conversion: a consumer facing web application may allow consumers to login
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
19/25
15/8/2014
with their Facebook or Twitter account using OAuth2. The web application server can
connect to SAP Gateway with a functional account.
Let me know if you have other suggestions/use cases.
Thanks for reading!
Helpful resources
Set up Git
Deploying a Windows Azure App from Cloud9
Getting started with Node.js Web Application: describes a local development approach
for Node.js apps on Azure using the Windows Azure SDK for Node.js.
Cloud9 help pages
Overview of Node modules
SHARE THIS:
41
11
Like
Be the first to like this.
RELATED
This entry was posted in Azure, GitHub, JavaScript, Node.js, OData, SAP Gateway,
SAPUI5 and tagged Azure, Cloud9, Node.js, SAP Gateway, SAPUI5 by lstak. Bookmark
the permalink [http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/] .
17 THOUGHTS ON NODE.JS ON AZURE CALLING SAP GATEWAY
rsol1
on March 22, 2012 at 11:15 am said:
Hi Luc,
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
20/25
15/8/2014
Kevin Grove
on March 22, 2012 at 3:57 pm said:
Luc:
Thanks for the excellent post. The step-by-step process is fantastic. The timing is
great as we are trying to understand mobile development supporting our SAP
customer base.
One small issue: in my IE8 browser (I know but thats the official corporate
browser) I get this error:
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
21/25
15/8/2014
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3;
chromeframe/17.0.963.83; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR
3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.3; MS-RTC LM 8; .NET4.0C)
Timestamp: Thu, 22 Mar 2012 14:38:49 UTC
Message: Object doesnt support this property or method
Line: 66
Char: 1
Code: 0
URI: http://nodesapgw.cloudapp.net/app.js
Again, thanks for the informative post.
lstak
on March 22, 2012 at 5:25 pm said:
Thanks Kevin.
The issue with IE8 was related to the use of forEach. Fixed now!
Kevin Grove
on March 22, 2012 at 5:56 pm said:
Pingback: Windows Azure Community News Roundup (Edition #11) - Windows Azure
- Site Home - MSDN Blogs
Pingback: Windows Azure Community News Roundup (Edition #11) - Windows Azure
Blog
Pingback: De Olho no Azure 24/03/2012 Pensando Azure
Pingback: Pie in the Sky (March 30, 2012) | MSDN Blogs
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
22/25
15/8/2014
Jason
on April 9, 2012 at 8:14 am said:
Great blog. Im unable to get it to work though. Your test on Azure seems to result in
an empty dataset as well. Ive tried logging onto gateway directly and it seems the
username and password provided on the website:
http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/1051f6d9-e87a-2e10-d188e2786c7878b1 is no longer working
Maybe they have changed the password without updating the page Or maybe
gateway is just down at the moment?!?
lstak
on April 18, 2012 at 2:04 pm said:
Hi Jason,
Indeed, the Gateway demo systems was unavailable for a while. Its working
again now.
oneman
on April 24, 2012 at 10:24 am said:
For all of us stacked behind corporate boundaries(IE), Chrome Frame can help a lot
Hi Luc
Stumbled upon this great blog.Lucky me.Was trying desperately to get some hands
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
23/25
15/8/2014
on action on SAP Gateway and Mobility.I am trying to do the tutorial and facing some
basic issues(new to advanced javascript) meanwhile i tried to open your application on
iphone and android,but was unsuccessfull.Do they work on these devices?
Cheers on the blog!
Regards
lstak
on May 23, 2012 at 8:25 am said:
Hi Shankar,
The demo was build using SAPUI5 which doesnt support mobile devices
(yet). If youre interested in HTML5 mobile UIs for SAP Gateway you should
consider other mobile UI toolkits, e.g. Sencha Touch or jQuery Mobile. The
following blog can help you get started with SAP and Sencha Touch:
http://allthatjs.com/2012/02/19/building-a-sap-mobile-app-with-sencha-touch-2/
John Moy published a great series of blogs on SCN on using jQuery Mobile
with SAP.
gunnleiinarsson
on June 28, 2012 at 1:52 am said:
Hi Luc.
Definetely interesting all your blogs.
I was trying to going through the steps in this blog.
I was able to clone the repo in Cloud9 but but came across errors related to
unprotected private key file when pushing/pulling to GitHub .
The SSH key is inplace.
Any tips.
Regards Gunnlaugur
lstak
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
24/25
15/8/2014
Hi Gunnlaugur
I didnt encounter those errors when I did the project for this article, so I am
afraid I dont have immediate answer. I suggest to look for help at GitHub
and/or Cloud9
gunnlei
on June 28, 2012 at 10:10 am said:
Well I think the platform had some problems yesterday. But when I
woke upp this morning it was working.
lstak
on June 28, 2012 at 2:54 pm said:
Thanks!
http://allthatjs.com/2012/03/21/node-js-on-azure-calling-sap-gateway/
25/25