Technical Articles
Build an English Premier League app with SAP Cloud Application Programming Model – part 3 build a UI and deploy to Cloud Foundry
part 2 reuse, localization, annotations
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