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