With the availability of HTML5 applications on the trial landscape and Rui Nogueira’s blog post we decided to try it out for our ESPM webshop scenario. As we already had destinations present in the ESPM scenario and we had separate folders for UI code, it was a breeze to get our ESPM webshop application running on the cloud (with some minor tweaks 🙂 ). You can check out the running application here.

We basically followed Rui’s blog step-by-step replacing the destinations and UI code with our stuff wherever necessary. Also, going with the times we modified the theme of our application to blue crystal.

These minor changes required us to modify a few files, so we decided to create a new branch in our public github space so others don’t have to worry about the modifications.

Prerequisites

Before we move on to how to get the code and get this application running some prerequisite checks.

1. Check that you are able to access the following service. It will be used to fetch the data (OData) and images in our application

     https://cloudmodelespmhana.hana.ondemand.com/espm-cloud-web/espm.svc/

2. Create a trial account on SAP HANA Cloud Platform. If you don’t have it already, you can register for free here:

     https://help.hana.ondemand.com/help/frameset.htm?65d74d39cb3a4bf8910cd36ec54d2b99.html

3. Install the latest version of the Eclipse Kepler IDE (SR2 used for this scenario). You can find the latest release here:

     http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr2

Obtaining the code for this app

As mentioned above we have created a separate branch in out github space to help others run this application quickly.

1. Download the code as a zip file from https://github.com/SAP/cloud-espm-scenarios/archive/scenario-html5.zip
2. Unzip and check the contents.
3. There should be a ReadMe file which contains the exact same steps as mentioned here. Also, there will be two folders.
4. “destinations” folder contains the destinations for the OData service and the images.
5. “webshop-ui” folder contains the webshop UI code modified for this scenario.

Define destinations in your cloud account

1. Navigate to the cockpit in your trial account, or copy paste this URL in your browser https://account.hanatrial.ondemand.com/cockpit
2. Click on the Destinations tab, then click New Destination                             
3. Click on Import from File and select the cloudbackend file in the destinations folder you downloaded above.
4. Save the destination once it is uploaded.
5. Repeat step 3 to step 5 for the cloudbackendimages file.

Create the ESPM Webshop HTML5 application

1. Navigate to the cockpit in your trial account, or copy paste this URL in your browser https://account.hanatrial.ondemand.com/cockpit
2. Click on HTML5 Applications and then click on New Application
3. Enter “espmwebshop” as the application name. (You can provide any other name also)
4. Click Create.
5. Click on “espmwebshop”.
6. Your application is now created and ready for use.

Clone Git Repository in Eclipse

1. Once you have completed the above steps click on the Development tab in the left pane.
2. Under “Source Location” copy the Git Repository Link
3. It should be something like https://git.hanatrial.ondemand.com/<pNumber>trial/espmwebshop
4. Start Eclipse and switch to the Git Perspective.
5. Under Git Repositories, click on “Clone a Git Repository”.
6. Paste the Git-URL you’ve copied in step b above into the URI field of the popped-up window, enter your user name and password of your SAP HANA Cloud Platform trial account into the fields User and Password, click on Next, click on Next again and click on Finish.
7. Check your connection settings, (proxy in Eclipse) ifany of the above steps fail.
8. You should now have an empty repository configured in your Eclipse.

Copy and upload code to repository

1. Once you have completed the steps above, right click on the Git repository and select the Import Projects command.
2. Select Import as general project, click on Next (note the name of the project) and after that click on Finish.
3. Switch to the Web perspective in Eclipse.
4. Copy all the files and folders inside the webshop-ui folder from this branch.
5. Right-click the project you just created and select Paste .
6. Now you have copied all the UI code into your project.
7. To upload the code to the Git repository right-click your project.
8. Select Team -> Commit.
9. Write a short Commit message.
10. Select all files (Select-all button is on the right hand side of the “Files” panel)
11. Click “Commit and Push”.
12. Provide your credentials if prompted.
13. You should get a success message with the git repository link.

Version your code and Activate application URL for public access

1. Navigate to the cockpit in your trial account, or copy paste this URL into your browser https://account.hanatrial.ondemand.com/cockpit
2. Click on HTML5 Applications.
3. Click on “espmwebshop” and select Development.
4. You should be able to see the commit message you entered above.
5. You should also be able to see your destinations under “Required Destinations”.
6. The status of the destinations should be green, indicating they are present in the account.
7. Click on the commit message and the Webshop application should open up in a new tab.
8. In the list of Available Commits select the commit message and click on the “Create Version” icon at the right end of the line.
9. Provide a version name 1.0 and click on Add.
10. Now switch to the Version Management tab.
11. You should see the version you’ve just created before.
12. Now click on the icon at the right end of the line to Activate this application version.
13. You will get a message telling you that the version has been activated and that the Changes will be effective after (re)-start of the application.
14. Confirm the question if you really want to do this with by clicking on Yes.
15. Switch to the HTML5 Application Dashboard tab and click on the Application URL.
16. This is the URL which others can now use to access your app.

With these simple steps you should have a running application which accesses data from the ESPM cloud backend.

Ankur