A Fiori App backed by Cloud Foundry based OData Service
At the recent Sapphire one of the big news for the developers was the beta release of Cloud Foundry(CF) based services for SAP HANA Cloud Platform. Rui Nogueira provided a lot of details in his blog. As explained in Rui’s blog we get a lot of new capabilities with these services like additional runtimes and backing services, additional ways for apps to be scalable etc. Developers are known to be magpies i.e. interested in new and shiny things. So how does the existing rich set of HANA Cloud Platform capabilities fit with the new and shiny things provides by these CF services. In this blog I would show how to mash the new and existing services to develop a Fiori Application that is backed by an Odata service running inside cloud foundry services.
To successfully run this scenario you would need the following
- A SAP HANA Cloud Platform(HCP) trial/facotry account ( For new register here )
- Registered for the Cloud Foundry based services on HCP. ( For new follow instructions here OR Step 1 of this blog)
- Working Cloud Foundry CLI from the step above.
- Working JDK/Maven/GIT
- Some knowledge of WebIDE
Part 1: Olingo based OData Backend
Step 1: Developing the OData based Cars service locally
I will be a little lazy over here and take a short cut to do this. Apache OData is a java library that is used to enable OData services for your project. It comes with a Maven artifact that we will use to generate sample code which would be sufficient for our purposes. Launch a command line CMD on Windows and Terminal on Mac. If you have a working maven launch the following command ( if you don’t have maven clone this git repo), please note this is a really long command line so make sure to copy paste all of it
mvn archetype:generate -DinteractiveMode=false -Dversion=1.0.0-SNAPSHOT -DgroupId=com.acme -DartifactId=cf-cars-svc -DarchetypeGroupId=org.apache.olingo -DarchetypeArtifactId=olingo-odata2-sample-cars-annotation-archetype -DarchetypeVersion=RELEASE
You should see something like this
This will create a cf-cars-svc directory in your current folder. That’s it, we have all the Java code needed for our purpose 🙂 Change directory to the newly created cf-cars-svc folder. You can check the code if you want to by firing up your favorite IDE. Proceed further to package it using Maven
Maven would try to download the internet 😉 once it has everything it needs it will package it nicely as a war file in the target folder.
Step 2: Prepping for Cloud Foundry – manifest.yml
Cloud Foundry requires a manifest file that acts as metadata for your application. This manifest.yml file instructs CF on how much memory to use, what to name the app any backing services to use etc. Please create a manifest.yml file in the cf-cars-svc folder
--- applications: - name: cars memory: 512M host: carsxxx path: target/cf-cars-svc.war
As you can see we will call our application cars, it will use 512MB of memory (you a 1GB of quota as part of beta) and the host will be called carsxxx. Please note the host needs to be unique across all the applications even by different users. So if you use just cars it may already be taken. If that happens during the next step. Just come back and change it to something unique. Another thing to remember is that yml files are quite finicky about the syntax so if you get syntax error, you may want to use this one from github. We have everything we need locally to push these bits to SAP HCP Cloud Foundry.
Step 3: Push it push it
Remember you would need Cloud Foundry CLI for this step. If you haven’t downloaded that yet, now would be good time to do it from here as other wise you are going to hit a wall. Open a command prompt and specify CF API point for HCP CF
cf api https://api.cf.us10.hana.ondemand.com
You should see something like this
Your CF CLI is now pointing to HCP CF and knows all commands you give from now should be in the context of HCP CF. As the good doctor CLI says in the screenshot you have to login. You can do that by doing cf login and giving the credentials as shown below
All that is left now is to do the cf push command to push the code. Please make sure you are in the cf-cars-svc folder and there is a target folder containing the war file in it. Also check that manifest file manifest.yml is in the cf-cars-svc folder. After cf push you should see this
Followed at the end of successful push you would see the following, notice the URL in the logs. This would be the URL to access our application. You can also get the same URL from HCP CF Cockpit.
You can also login to web based HCP CF cockpit to check the application https://hcp-cockpit.cfapps.us10.hana.ondemand.com/cockpit you would need to login with your credentials. After login you would see a list of all the apps deployed in your account. Click on the your application name hyperlink and youshould see the following with the URL to your application as well
Notice the URL for your app https://xxx.cfapps.us10.hana.ondemand.com/ where xxx is the host name you chose in your manifest file. Go to this URL and you would see a the following webpage with link to various OData Endpoints. There is a button to generate the data as well. Click on the button only once. There is also link for service document. This URL (https://xxx.cfapps.us10.hana.ondemand.com/MyFormula.svc/ ) will be used in creating the Fiori app.
Also click on the links with Cars or Drivers in the link and you should see some data. Congrats you are done with the first part and you have a Odata based service running on HCP CF.
Part 2: Developing Fiori Front End
Step 1: Create HCP Destination
Login to HCP Cockpit and click on destinations in the left navigation bar. Create a destination with the name Car-O-Data. In the URL field use the Service document URL we had noted down in Part 1 (https://xxxx.cfapps.us10.hana.ondemand.com/MyFormula.svc/) Replace xxxx with the host name you used in manifest file. Rest of the details for the destination are shown below
Step 2: Developing the Fiori App front End
Browse to WebIDE and choose new project from Template. Choose the Fiori – Master Detail template. Supply a good project name. Most important part happens in the Data Connection tab as shown below. Click on Service URL from the left hand Sources table and choose the Car-O-Data system. Specify the URL again https://xxxx.cfapps.us10.hana.ondemand.com/MyFormula.svc. Make sure you see the entities from Odata service when you click on the button in the URL field
In the template customization specify the name, namespace etc. For the Master section i.e. Object choose Manufactures as shown below
For the line item choose cars as shown below.
We are ready with the Fiori Application. Click Finish and now you can run your Fiori App to see it pulling data from Odata service you deployed in part one. There you have it OData backend running in Cloud Foundry services of HCP while Fiori app running in WebIDE.
I would be very interested to know how you found this hands on. Looking forward to your work with HCP Cloud Foundry services.