Technical Articles
Build an English Premier League app with SAP Cloud Application Programming Model – part 1 the story begins
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
SAP Cloud Application Programming Model has been introduced for a while and I have seen a few great sample apps, including the basic bookshop, the product catalog and the spaceflight.(no moreย sflight samples ๐ )
After some research, I decided to build something fun with it, an app of the English Premier League. Everybody loves it right?
The Plan
So my plan is to first get a basic app running with the lastest English Premier League match result data. Also I will try to build a UI based on Fiori Elements, apply some annotations and then probably build a fixture and a ranking table.
I can then explore the options to deploy it to the cloud foundry and even make it available for multi-tenant subscriptions. I am not sure how much time I have to build all these, but a good start is to get the hands dirty and enjoy CAP coding.
#epl-app will be used for all the related posts in the future.
Tools
- SAP Cloud Platform (Cloud Foundry) Trial
- VS Code
- VS Code SQLite extension (optional)
- Nodejs of course
That’s probably all that we need. You can also find the code repo for each post in the github as different branches.
Get Started
Prepare
1. Download and install Nodejs on your computer
2. Register a free trial on SAP Cloud Platform Cloud Foudary
Develop the data model
1. Install the sap cds packages
# set npm registry for sap packages
npm set @sap:registry=https://npm.sap.com
# install sap cds development kit
npm i -g @sap/cds
# test run
cds
2. Generate a cap project from the command line.
# we generate the db(sqlite) and srv(service) modules with odata v4 support
# pipeline is optional here.
# we will create our own models, so skip the sample code
# verbose will give us some more clues of what cds generated, including npm install and download sqlite as our dev dependencies, etc.
cds init epl-app --modules srv,db --db-technology sqlite --odata-version v4 --pipeline --skip-sample-models --verbose
3. Open the created epl-app folder in VS Code.
4. (Optional) Create a .npmrc file in the root of the project, it will tell npm next time the registry to find package dependencies.
@sap:registry=https://npm.sap.com
5. Create the data model file: db/data-model.cds
namespace com.epl;
using { managed, cuid } from '@sap/cds/common';
// our master data for Teams
entity Teams : managed {
key ID : Integer;
name : String(30);
}
// match results data
entity Matches: cuid, managed {
matchDate: Date;
homeTeam : Association to Teams;
awayTeam: Association to Teams;
homeTeamScore: Integer;
awayTeamScore: Integer;
}
6. Run a cds deploy from Terminal. It will deploy the data model into our sqlite db (epl.db)
cds deploy --to sqlite:db/epl.db
7. Open the epl.db file in the SQLite explorer and you will see two tables been created.
8. We will load some data into these two empty tables by putting csv files into the db/csv/ folder.
com.epl-Teams.csv (file name convention applies here)
ID,name
1,Arsenal
2,Aston Villa
3,Bournemouth
4,Brighton
5,Burnley
6,Chelsea
7,Crystal Palace
8,Everton
9,Leicester
10,Liverpool
11,Man City
.....
#alphabetic order of course
com.epl-Matches.csv
matchDate,homeTeamScore,awayTeamScore,homeTeam_ID,awayTeam_ID
2019-08-24,1,2,15,9
2019-10-05,1,5,14,2
2019-08-11,0,0,9,20
2019-08-17,1,2,16,10
2019-08-25,1,3,3,11
2019-09-14,3,1,10,13
2019-10-05,0,0,18,15
2019-08-11,4,0,12,6
2019-08-17,1,1,4,19
2019-08-24,3,1,10,1
2019-09-01,3,2,8,20
...
Develop the service
1. Create a file srv/cat-service.cds
namespace com.epl;
using com.epl as db from '../db/index';
service CatalogService {
@readonly
entity Teams as projection on db.Teams;
@readonly
entity Matches as select from db.Matches
order by matchDate desc;
}
2. Create a file db/index.cds. It will be the entry point for cds to look for files to compile and build.
namespace com.epl;
using from './data-model';
using from '../srv/cat-service';
3. Once done, let’s do a deploy and run from the terminal. Before that we need to install the @sap/cds-dk dependency so that we can use “cds watch”
# run this from the porject root
npm i @sap/cds-dk --save-dev
# cds watch will do cds run whenever there is a file change in the project.
cds deploy --to sqlite:db/epl.db && cds watch .
4. We almost done. Let’s open the http://localhost:4004/catalog/Matches from the browser and check the odata V4 services generated. Nice, with a few lines of code we get the service running.
# metadata
http://localhost:4004/catalog/$metadata
# Matches entityset
http://localhost:4004/catalog/Matches
# Teams entityset
http://localhost:4004/catalog/Teams
Develop the basic UI
1. Let’s throw in some basic annotations by creating a file: srv/fiori-annotations.cds. It can be in any filename with an extension of cds.
using com.epl.CatalogService from './cat-service';
annotate CatalogService.Matches with @(
UI:{
SelectionFields: [],
LineItem: [
{ Value: matchDate, Label: 'Date' },
{ Value: homeTeam.name, Label: 'Home Team' },
{ Value: homeTeamScore },
{ Value: ':' },
{ Value: awayTeamScore },
{ Value: awayTeam.name, Label: 'Away Team' }
]
}
);
2. Update the index.cds file
namespace com.epl;
using from './data-model';
using from '../srv/cat-service';
using from '../srv/fiori-annotations';
3. Note that once the newly created file is saved, the cds will deploy and run again thanks to the cds watch we use.
Profit
The latest match results are ready to be explored and played around.
http://localhost:4004/$fiori-preview/?service=com.epl.CatalogService&entity=Matches
Next Step
I will see if I can put in some more annotations for the odata v4 sevice. Also I would like to see and implement some others feature of CAP. The fiori preview is a great tool for developer, however I will explore some other options for a more “user-friendly” UI in future posts.
Leave your comments, likes, dislikes or even predictions of the upcoming epl matches
Stay tuned. #epl-app
Part 2, reuse localisation and annotations
Hi Kevin,
Great stuff, thanks for sharing this!
Pierre
Hi Kevin,
Can you please explain how do I deploy this app in CF. I tried to deploy but that doesn't work.
Thanks, Manju
I think the general step is to build the mtar file and deploy.
ย
check this blog for deploying to CF
https://blogs.sap.com/2019/11/21/part-4-deploy-to-cloud-foundry-as-multi-target-app-epl-app/
Great work Kevin
A final touch would be to introduce CI/CD using SAP Cloud SDK Pipeline.
Exactly, just got my jenkins server running yesterday on my company laptop + win7 + deprecated docker toolbox for windows. Will see. ๐
Hi Kevin,
thank you for this great series of blogs. Very well structured and easy to follow on a topic that most people know the business logic.
Regards Helmut
Hi Kevin,
thanks for the series. A great example that my 15 year old was actually interested in - well more interested in EPL than CAP but I'm working on it.
Andrew
Hi Kevin,
thank you for this great series. You've mentioned in this post that you plan also to show how to make it multi-tenant. I've checked you other posts and the GitHub repository but haven't found anything related to it. Do you stil plan to do so?
Best regards
Gregor
We are busy fighting with drought, bush fire, drought and flood in the east coast of Australia.
Definitely will catch up soon, thanks for dropping by and please stay tuned! ๐