Skip to Content
Technical Articles
Author's profile photo Kevin Hu

Build an English Premier League app with SAP Cloud Application Programming Model – part 1 the story begins

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

  1. SAP Cloud Platform (Cloud Foundry) Trial
  2. VS Code
  3. VS Code SQLite extension (optional)
  4. 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

 

Part1 branch in github

 

Part 2, reuse localisation and annotations

 

 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre Dominique
      Pierre Dominique

      Hi Kevin,

      Great stuff, thanks for sharing this!

      Pierre

      Author's profile photo Manjunath GUDISI
      Manjunath GUDISI

      Hi Kevin,

      Can you please explain how do I deploy this app in CF. I tried to deploy but that doesn't work.

      cf deploy

      Thanks, Manju

      Author's profile photo Kevin Hu
      Kevin Hu
      Blog Post Author

      I think the general step is to build the mtar file and deploy.

      ย 

      Author's profile photo Kevin Hu
      Kevin Hu
      Blog Post Author

      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/

      Author's profile photo Soumya Ranjan Das
      Soumya Ranjan Das

      Great work Kevin ?

      A final touch would be to introduce CI/CD using SAP Cloud SDK Pipeline.

      Author's profile photo Kevin Hu
      Kevin Hu
      Blog Post Author

      Exactly, just got my jenkins server running yesterday on my company laptop + win7 + deprecated docker toolbox for windows. Will see. ๐Ÿ™‚

      Author's profile photo Helmut Tammen
      Helmut Tammen

      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

      Author's profile photo Andrew Barnard
      Andrew Barnard

      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

      Author's profile photo Gregor Wolf
      Gregor Wolf

      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

      Author's profile photo Kevin Hu
      Kevin Hu
      Blog Post Author

      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! ๐Ÿ™‚