In my last blog from Nov. 14th I wrote about my Open Source project in which I develop a OData server for node.js. In this blog I want to show you how easy it is to write a Fiori app in SAP Web IDE that connects to an onpremise node.js backend application that uses my n-odata-server npm package.
I will not go into the details of writing the backend application here but only focus on the frontend application in Web IDE and configuration of the connection between the node.js server and hcp. If you are interested in writing the backend application you should have a look at my github repository. There you find a simple example that shows how you can create such an app in a few minutes.
The app I create here is a Master-Detail Fiori app that displays some customer data (see last screenshot for the apps output).
Prerequisites
The prerequisites for this blog are that you have created a backend application and that this is started (by simply entering node . at the command line). The default port of such a backend application is 3000. So the complete local URL is
http://localhost:3000
Additionally you should have installed the SAP Cloud Connector (CC) and be registered on the HANA Cloud platform (HCP).
So lets start developing our frontend application.
Configure Cloud Connector (CC)
Before you can connect to your locally started node.js server application that acts as the OData server you have to start and configure your CC. After you have started the CC you can connect to the Admin-UI by calling the URL
https://localhost:8443/You have to connect the CC to your hcp account (see CC documentation). When you have done this go to the menu item Access Control and add a new mapping for your local node.js server. Use the settings of the following screenshot.
This setting in the upper table maps your locally running host to a virtual host with name n-odata-server-local. In the lower table you give hcp access to all URLs of port 3000 on your localhost.
Create destination on HCP
In this step you create a destination on HCP that you later use in your application. This destination leads to your local node.js application. Enter the following settings for this destination.
In the field URL you enter the URL of your virtual host that is exposed by CC. The additional properties on the right side are also important. If you don't add them you will not be able to choose this destination in the next steps.
Create Fiori app
In this step you create a Fiori app with the Master-Detail template of SAP Web IDE. This is the same as if you use a SAP Gateway or any other destination. Therefore I will not go into much detail here, the screenshot should be self-explanatory.
So start the SAP Web IDE. If you don't remember the URL you find it under menu item Subscriptions and then webide or have a look here for more details.
Create a new project
Create a new project in Web IDE by right-clicking on any node in Web IDE and selecting New->Project from Template.
Choose Template Master-Detail
Insert project name
Choose a project name of your choice.
Choose destination
In the next step of the wizard you have choose the destination you want to use for your application.
Select "Service URL" as Source and then select the before created destination.
After you chose your destination you have to enter the URL of the OData service. The default setting for the n-odata-server is /odata. So enter this in the URL field.
After you have clicked on the arrow or left the field you will see all Entityset that your OData service exposes. In the following step we are interested in the Customers entityset.
Click next to configure your app in detail.
App configuration
In this step you configure which entityset (collection) of your OData service you want to use and which field should be displayed on the screens. Take the following screenshot as template.
Finish app creation
In the last wizard step you simply have to press Finish to finally create your application. The sourcecode for your application is now generated.
Run application
After your project is generated you can simply run it by right-clicking on the project node and choosing Run --> Run as --> Web Application.
Cause the generator created two start files you have to choose the one you want to use. Selecting index.html is fine here.
See the output of your app
Web IDE opens a new TAB/Window that is running your app. You can now browse through all the customers of node.js application.
Conclusion
You see that working with the n-odata-server is as easy as using a SAP Gateway server Odata service. But you don't need to have a full blown SAP R/3 or a HANA system in the backend. You can run the node.js server with a minimal amount of resources (memory, disk space). Even though you can use a local or corporate database with the n-odata-server you are not forced to. The n-odata-server can save all it's data into a single file in the filesystem. This is mostly sufficient in the development and functional testing phase.
But the n-odata-server may also be a choice if you want to write Fiori apps that use data from corporate databases that are in use for a long time and that you don't want to or cannot migrate to HANA or any other OData-friendly technology.
I highly appreciate your comments and if you want to contribute to the project you're welcome.
- SAP Managed Tags:
2 Comments
