Wednesday 13 September 2017

Integrate SAP UI5 or open UI5 with Node.js

With JavaScript server side programming getting popular day by day, it clicked my mind to integrate SAP UI5 or open UI5 with Node.js.

What we are building?


We are building a UI5 based web-application which uses Node.js for backend logic. For the sake of simplicity we will create a small application which list down all the seven wonders of world with their respective location.

Prerequisites


1. Node.js should be installed on your machine. To install Node.js please visit http://nodejs.org/

2. SAPUI5  UI Development Toolkit for HTML5 should be installed on your machine. To install please visit https://tools.hana.ondemand.com/

3. Git Bash should be installed (optional). I will be using Git Bash for this demo.

Writing the backend Node.js code


In the backend, we will be exposing the data using REST service which will be consumed by the UI5 application. Following are the steps to expose a REST service via Node.js:

1. Create a new folder anywhere on your machine

2. Inside the folder, create a package.JSON file and copy the following code:

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

The above code gives some general description about Node.js project like name of project, description, version and most important specify the dependencies which will be used in the project. In our case, its Express module which will be used for exposing the REST APIs. A JAVA developer would be able to get the analogy between package.JSON in Node.js and pom.XML in maven.
To know more about Express module, please visit http://expressjs.com/

3. Open Git bash, in the Git Bash, Navigate to that folder and execute the following command
Npm install

The above command will install express module for the project.

4. Create a Server.js (you can choose any name of your choice) in that folder and copy paste the following code:

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

5. Open Git Bash and Navigate to the folder. Run to following command to host the project:

node server.js
-----------------------------------------------------------------------------------------------------
Note: server.js is the name of the .JS file which we created in step 4.
-----------------------------------------------------------------------------------------------------

Testing the hosted service


To test the service hit the URL http://localhost:4000/SevenWonders

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

Creating the UI


For the UI, we will be creating UI5 desktop application. We will be using eclipse with UI5 application development plugin installed in it to write the UI code:

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

The Index.html

Nothing special in the below code, just a typical index.html for UI5 project

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

View.JS

In the view.JS file we will create a table with two columns i.e. Wonders and location:

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

Controller.JS

In the controller onInit() method, I have fired a get call towards our “SevenWonders” service and binding the data with the table in view.

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

Integrating the front and back ends


1. Navigate to the UI5 project workspace and copy the Index.html and the folder containing views and controller to your clipboard.

2. Paste the clipboard at the location where server.JS file exists. After copying, your folder will look like

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

3. Add the following line of code in you server.JS

app.use(express.static(__dirname));

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

The above code tells to route default request (i.e. localhost:4000) to current directory, and since we have kept index.html file in the same directory, index.html will get render.

Testing the final application


1. Navigate to the directory containing server.js file and execute the following command in your Git Bash
Node server.js

2. To test the final application just hit http://localhost:4000/ in your browser

SAP UI5, UI5, SAP Node.js, SAP UI5 Learning, SAP Guides, SAP Learning, SAP Tutorials and Materials, SAP Certifications, SAPUI5 Explored

We have successfully created, deployed and tested a complete JavaScript based web application and integrated node.Js with SAP UI5 or Open UI5.
SAP Online Guides, Tutorials, Materials and Certifications.

Related Posts

7 comments:

  1. Awesome! Thanks for sharing the information on Sap Ui5 Fiori

    ReplyDelete
  2. thanks for sharing valuable information Sap Ui5 Fiori

    ReplyDelete
  3. Thanks for sharing this blog. Here I found very useful information
    Node JS Online training
    Node JS training in Hyderabad

    ReplyDelete
  4. The next step that you need to take after choosing a web-host for your site is to zero down upon a proper hosting plan. Depending on your needs, reseller reliable hosting may be the best option for you, even if you aren't a web hosting reseller. It all depends on your monetary ability to provide for the plan and hence if you run a relatively smaller website your preference will be unlike what you'll choose for a profitable site. The options presented vary between these: hosting for one little website, for a relatively larger one, for a mega-site, or a hosting plan that you can employ to extend into a network of websites.

    ReplyDelete