This is the second in a series of blogs I'm putting together illustrating practical use cases for SAP HCP. In my previous blog post, I described out the SAP HANA Cloud Connector could be used to open up and extend on-premise landscapes, providing secure access to REST/OData and/or RFC services hosted on-premise. In this post, we'll explore how we could create Fiori-style applications on the HCP which can consume not only exposed on-premise data, but also data from within the HCP account itself or externally (e.g. via some other SaaS application, for instance).
As we progress through this blog post (and subsequent ones), we'll find that we can utilize these Fiori-style applications in lots of interesting use cases including the creation of mobile apps with HCPms, side-by-side enhancements/extensions to SAP cloud applications, and more. So, without further ado, let's get started.
Technical Overview
Before we dive too deep into specifics, let's first take a moment to understand the basic components of a Fiori application. To start this discussion, we'll look first at the typical setup of Fiori applications on-premise - a scenario that most customers/developers already have some familiarity with. As you can see in the diagram below, the typical setup involves the placement of an ABAP Front-End Server (i.e. a standalone SAP NetWeaver system with SAP Gateway installed on it) in front of SAP Business Suite systems. Here, the Front-End Server plays two important roles: a) it hosts the SAPUI5/HTML5 content which defines the UI and b) OData services are installed/developed in SAP Gateway to expose data from the back-end. On the Back-End server(s), it's business as usual.
For Fiori apps developed on SAP HCP, the architecture is essentially the same; the primary difference is that the HCP tenant account assumes many of the responsibilities the ABAP Front-End Server handles in on-premise configurations. These differences are illustrated in the diagram below where an HTML5 application hosted on an HCP account provides the SAPUI5 content for the Fiori app (Note: we could also host the SAPUI5 content in a Java or native HANA application if desired). In this scenario, the REST/OData services can still be sourced from the backend systems, the only difference is that we must use the Connectivity Service and HANA Cloud Connector to establish the on-premise connection (as described in my previous blog post here).
Building Blocks
Having seen the basic architecture of Fiori-style applications on HCP in the previous section, let's now focus in on the basic building blocks of these applications. In most cases, an HCP-based Fiori application consists of:
- An HTML5 app that's developed/deployed on the HCP account using the SAP Web IDE
- Access to on-premise data is brokered through the Connectivity Service which requires:
- Setup of the SAP HANA Cloud Connector component on an on-premise system
- Configuration of destinations in the HCP Cockpit
- In the on-premise landscape, OData services still need to be developed, so SAP Gateway is still in play (Note: an alternative here is the HCI OData Provisioning service)
- To deploy the Fiori-style applications, we'll need to configure the SAP Fiori Launchpad which is hosted on the SAP HANA Cloud Portal component (another service of HCP)
And that's really about it. Of course, different scenarios might call for specialized setup in terms of security, data caching, etc. Here, suffice it to say that all of the relevant development tools/services are there at your fingertips as needed.
Developing HTML5 Applications on the SAP HCP
These days, the process of developing HTML5 apps on the HCP has become absurdly easy. Since the development tools and source code repository are all hosted on your HCP account, there's nothing you have to install on your local machine. Instead, you just go into the HCP Cockpit, create a new HTML5 application and then develop its content using the SAP Web IDE. You can find lots of step-by-step tutorials to walk you through this in the online help documentation available at https://help.hana.ondemand.com/help/frameset.htm and also at https://help.hana.ondemand.com/webide/frameset.htm.
The basic steps here are as follows:
- To begin, you log onto the HCP Cockpit and select the HTML5 Applications tab. To create a new application, click on New Application and give your application a name.
- Whenever the application is saved, a Git repository will be created for the app behind the scenes, but that's about it. To edit the application, you'll need to jump into the SAP Web IDE by clicking on the edit button highlighted below.
At this point, the SAP Web IDE tool will be opened and you'll be able to clone the Git repository generated in step 1 (it will be empty initially).
Once the application is synced over, we can leverage the SAP Web IDE wizards to create our Fiori project content.
Finally, once the development is completed, SAP Web IDE makes it easy to deploy the changes onto HCP.
Looking closely at the figure above, you can see that SAP Web IDE also has built-in registration with the SAP Fiori Launchpad, meaning that we can pretty much configure the Fiori application end-to-end directly within the SAP Web IDE.
Next Steps
As you've seen here, SAP has invested quite a bit in providing a simple, stream-lined Fiori development experience within the SAP HCP. This cloud-based infrastructure can be seen as complementary to on-premise Fiori configurations. Of course, for customers that don't already have a Fiori infrastructure in place, the HCP-based deployment is surely more agile since you can have a configuration up and running in a matter of hours. This is a particularly useful feature for developers that may be interested in trying out Fiori development on their own.
In my next blog post, we'll take another look at a compelling reason why you might want to develop Fiori-style applications on HCP when I introduce HCPms. Here, we'll see how surprisingly easy it is to package up a Fiori application as a hybrid web application that can be deployed on mobile devices such as an iOS or Android-based device.
- SAP Managed Tags:
