With the availability for HTML5 applications on trial landscape and Rui Nogueirablog 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 out stuff wherever necessary. Also, going with the times we modified the theme of our application to follow blue crystal.

This 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

So, 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 following service, this service 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 latest version for Eclipse Kepler (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 has 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 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 cloudbackendimages file

Create 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. Provide "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 step click on 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, provide 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) if any 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 command Import Projects.
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 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 in 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 gave above.
5. You should also be able to see your destinations under "Required Destinations"
6. The status for 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 using which others can now access your app.

So, now you should have a running application which accesses data from the ESPM cloud backend.

Ankur