Welcome to the SAP Developer Community Challenge for the month of September. We will cover full-stack development with SAP Cloud Application Programming Model and SAP Fiori elements: a set of four weekly challenges encompassing front-end/client-facing and server-side/back-end development.
This month’s challenge is to build a full-stack application based on the domain of tests/exams like in a school set-up. This holistic approach encompasses both backend and frontend development, leveraging the robust capabilities of SAP Cloud Application Programming Model (CAP) on the server-side and SAP Fiori elements with annotations on the client-side.
Being the final developer challenge for this year, it will require extra effort and time compared to the previous developer challenges. This challenge will require putting into practice some concepts gained from the previous challenges and researching a little more to complete the weekly tasks. It will cover essential facets of full-stack development ranging from database modeling, API development and consumption, user interface implementation and error/exception handling.
Full-stack development refers to the practice of building and maintaining both the front-end and back-end components of a software application. Below is a breakdown of the various facets that it entails:
Front-end Development – creation of user interface (UI) and user experience (UX) components. Technologies such as HTML/XML, CSS/SASS, JavaScript are used.
Back-end development – implementation of server-side logic, databases and additional components that support the application’s functionality. Technologies such as server-side programming languages, databases and APIs are used.
“SAP Fiori elements is a framework that comprises the most used floorplan templates and is designed to:
“SAP CAP is an opinionated, yet open framework of tools, languages, and libraries to efficiently build enterprise-grade services and applications. It guides developers along a golden path of proven best practices, while minimizing boilerplate so they can focus on their domain problems at hand. The framework features a mix of broadly adopted open source and SAP tools and technologies.
SAP CAP is available in two flavors: Node.js and Java. This makes it very easy to get started with as the setup and skills required are nothing specific to SAP CAP – a lot of developers already know these languages and can start building enterprise grade services and applications right away.” - SAP Developer Challenge SAP CAP
We will be using Node.js flavor of SAP CAP for this challenge. Feel free to use the Java flavor if you prefer. Here is the documentation on how to get started with CAP Java.
Below is a breakdown of the tasks we will cover in four weeks (click on each task to view details):
Week 1: Project Set-up and Database Modeling
Week 2: Back-end Development - API Exposure
Week 3: Front-end Development with SAP Fiori Elements
Week 4: Integration of Back-end and Front-end
We recommend using SAP Business Application Studio – setup SAP Business Application Studio for Development
Other development environments can be used too. For example, VS Code – How to Set Up visual Studio Code for CAP Development.
After setting up the SAP Business Application Studio for Development, create a “Full Stack Cloud Application” dev space.
Access the dev space by clicking it when the state changes to running.
On the Get Started page, click on New Project from Template
On the Template Wizard page, select CAP Project generator and click the Start button.
Enter the project name (fullstackDevChallenge), select Node.js runtime, check the Basic Sample Files box and click the Finish button.
An application with an initial directory structure is generated. We want to modify the autogenerated file contents to match the application we will be working on progressively over this month. The application namespace, entities, service name and data files are some of the changes we will make. We will perform the following actions to achieve that:
2. Replace the code in srv/cat-services.cds file with the following lines of code:
The line @odata.draft.enabled: true in the above code is an annotation used to indicate that the Tests entity is enabled for the draft functionality that allows clients to work with draft versions of data before committing changes. This is useful in scenarios where processes such as creation, editing and reviewing of content before it becomes official, need to be supported. Because our application will need data input by end users, it is recommended to use the draft functionality.
3. Delete the csv file under db/data directory.
Open a new terminal (Menu > Terminal > New Terminal) and run the application through the command: cds watch. The results on the terminal should display error messages as in the screenshot below which will be resolved after we complete our first task for this week.
The development environment set up is done and we can now head over to our first task - Project Set-up and Database Modeling (Week 1).
Anyone who successfully does any of the challenges will earn a challenge badge in their SAP profile.
Happy Coding!
This month’s challenge is to build a full-stack application based on the domain of tests/exams like in a school set-up. This holistic approach encompasses both backend and frontend development, leveraging the robust capabilities of SAP Cloud Application Programming Model (CAP) on the server-side and SAP Fiori elements with annotations on the client-side.
Being the final developer challenge for this year, it will require extra effort and time compared to the previous developer challenges. This challenge will require putting into practice some concepts gained from the previous challenges and researching a little more to complete the weekly tasks. It will cover essential facets of full-stack development ranging from database modeling, API development and consumption, user interface implementation and error/exception handling.
What is full-stack development?
Full-stack development refers to the practice of building and maintaining both the front-end and back-end components of a software application. Below is a breakdown of the various facets that it entails:
Front-end Development – creation of user interface (UI) and user experience (UX) components. Technologies such as HTML/XML, CSS/SASS, JavaScript are used.
Back-end development – implementation of server-side logic, databases and additional components that support the application’s functionality. Technologies such as server-side programming languages, databases and APIs are used.
What is SAP Fiori Elements?
“SAP Fiori elements is a framework that comprises the most used floorplan templates and is designed to:
- Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps.
- Drive UX consistency and compliance with the latest SAP Fiori design guidelines. “ - SAP Fiori Elements
What is SAP Cloud Application Programming Model?
“SAP CAP is an opinionated, yet open framework of tools, languages, and libraries to efficiently build enterprise-grade services and applications. It guides developers along a golden path of proven best practices, while minimizing boilerplate so they can focus on their domain problems at hand. The framework features a mix of broadly adopted open source and SAP tools and technologies.
SAP CAP is available in two flavors: Node.js and Java. This makes it very easy to get started with as the setup and skills required are nothing specific to SAP CAP – a lot of developers already know these languages and can start building enterprise grade services and applications right away.” - SAP Developer Challenge SAP CAP
We will be using Node.js flavor of SAP CAP for this challenge. Feel free to use the Java flavor if you prefer. Here is the documentation on how to get started with CAP Java.
The Schedule
Below is a breakdown of the tasks we will cover in four weeks (click on each task to view details):
Week 1: Project Set-up and Database Modeling
Week 2: Back-end Development - API Exposure
Week 3: Front-end Development with SAP Fiori Elements
Week 4: Integration of Back-end and Front-end
How to participate
Set up your development environment for SAP CAP.
We recommend using SAP Business Application Studio – setup SAP Business Application Studio for Development
Other development environments can be used too. For example, VS Code – How to Set Up visual Studio Code for CAP Development.
After setting up the SAP Business Application Studio for Development, create a “Full Stack Cloud Application” dev space.
Create Dev Space
Access the dev space by clicking it when the state changes to running.
Access Dev Space
On the Get Started page, click on New Project from Template
Create new project from template
On the Template Wizard page, select CAP Project generator and click the Start button.
Select CAP Project from template wizard
Enter the project name (fullstackDevChallenge), select Node.js runtime, check the Basic Sample Files box and click the Finish button.
Set project details
An application with an initial directory structure is generated. We want to modify the autogenerated file contents to match the application we will be working on progressively over this month. The application namespace, entities, service name and data files are some of the changes we will make. We will perform the following actions to achieve that:
- Replace the code in db/data-model.cds file with the following lines of code:
using { cuid, managed } from '@sap/cds/common';
namespace fullstack_dev_challenge;
entity Tests {
}
entity Questions {
}
aspect Answers {
} 2. Replace the code in srv/cat-services.cds file with the following lines of code:
using fullstack_dev_challenge from '../db/data-model';
service DevChallengeService @(path: '/dev-challenge') {
@odata.draft.enabled: true
entity Tests as projection on fullstack_dev_challenge.Tests;
// TODO: Expose other entities here
} The line @odata.draft.enabled: true in the above code is an annotation used to indicate that the Tests entity is enabled for the draft functionality that allows clients to work with draft versions of data before committing changes. This is useful in scenarios where processes such as creation, editing and reviewing of content before it becomes official, need to be supported. Because our application will need data input by end users, it is recommended to use the draft functionality.
3. Delete the csv file under db/data directory.
Open a new terminal (Menu > Terminal > New Terminal) and run the application through the command: cds watch. The results on the terminal should display error messages as in the screenshot below which will be resolved after we complete our first task for this week.
Terminal output
The development environment set up is done and we can now head over to our first task - Project Set-up and Database Modeling (Week 1).
Prizes / Badges
Anyone who successfully does any of the challenges will earn a challenge badge in their SAP profile.
Happy Coding!
- SAP Managed Tags:
2 Comments
