Build an English Premier League app with SAP Cloud Application Programming Model – part 3 build a UI and deploy to Cloud Foundry

part 3 part 3 build a UI and deploy to Cloud Foundry

part 4 deploy to cloud foundry as multi-target app

In the last part of the series, we built a service layer for the application. For this part, I am going to build a simple UI and deploy the application to Cloud Foundry.

Since last blog post, things have changed a lot in the English Premier league, it seems no one can stop Liverpool and everyone is trying to get points from Arsenal even in the Emirates. Man Utd is bouncing back. So the first thing to do is to update the csv data with the latest match results.

and of course also to run npm update to get all the dependencies up to date.

Now I am start to build a UI layer.

1. Create a file app/index.html as an experiment.

app/index.html

Hello Index

2. After running npm start, you will see I got this in the browser. Index.html has been taken as the entry point of the whole application.

3. Open this URL with the Chrome developer Tools

http://localhost:4004/$fiori-preview/?service=com.epl.CatalogService&entity=Matches

4. Copy the whole source file and paste it into a new file app/match-result/index.html

5. Edit the app/index.html as below.

<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>English Premier League Here we come</title>

	<script>
		window["sap-ushell-config"] = {
			defaultRenderer: "fiori2",
			applications: {
				"match-result": {
					title: "Match Result",
					description: "English Premier League 2019-2020",
					applicationType : "URL",
					url: "/match-result",
					navigationMode: "embedded"
				}
			}
		};
	</script>

	<script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
	<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    	data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
    	data-sap-ui-compatVersion="edge"
    	data-sap-ui-theme="sap_belize"
    	data-sap-ui-frameOptions="allow"
	></script>
	<script>
		sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
	</script>

</head>
<body class="sapUiBody" id="content"></body>
</html>

6. Run the application again and check the results.

http://localhost:4004/

Deploy to Cloud Foundry

Assuming you already have created trial account in SAP Cloud Platform – Cloud Foundry and you have the subaccount and space created. And also make sure you have installed the CLI tool for Cloud Foundry.

So I am going to deploy all the things so far we did to the cloud, using sqlite as db. All the project files will be deployed as a single module for simplicity and experiment. As SQLite is not supposed to be used for production, I will cover deployment as multi target application using HANA db in my future blog posts of the series. However I think to try and do a deployment like this is a good way to learn about Cloud Foundry and how CAP fits into it, because of the simplicity of the application itself.

1. Create a manifest.yml in the root of the project.

applications:
  - name: sap-cap-epl
    buildpacks:
      - nodejs_buildpack
    memory: 512M
    command: npm start
    random-route: true

2. Run the command in terminal from the root of the project, if that’s the first time using CLI

cf login
cf target

3. And lastly run

cf push

4. The application will be uploaded, nodejs environment configed including all the dependencies and packaged into a droplet and deployed to cloud foundry.

..........
Waiting for app to start...

name:                sap-cap-epl
requested state:     started
isolation segment:   trial
routes:              sap-cap-epl-chipper-mouse.cfapps.eu10.hana.ondemand.com
last uploaded:       Mon 18 Nov 13:47:59 AEDT 2019
stack:               cflinuxfs3
buildpacks:          nodejs

type:            web
instances:       1/1
memory usage:    512M
start command:   npm start
     state     since                  cpu    memory         disk           details
#0   running   2019-11-18T02:48:17Z   0.0%   932K of 512M   132.6M of 1G

5. Check the result.

https://sap-cap-epl-chipper-mouse.cfapps.eu10.hana.ondemand.com/

Next Step

I will start to deploy the project as a mult target application into cloud foundry leverging HANA HDI container as the db provider as well. Also I am going to protect the application with some authentications and authorizations. Stay tuned.

Stay tuned. #epl-app

Part3 branch in github

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Technical Articles

Build an English Premier League app with SAP Cloud Application Programming Model – part 3 build a UI and deploy to Cloud Foundry

Now I am start to build a UI layer.

Deploy to Cloud Foundry

Next Step

Assigned Tags