Develop a Full-Stack CAP Application with Joule

1. Open your Full Stack Node project.

2. In SAP Business Application Studio, the SAP Build Code development environment, open the digital assistant, Joule, from the activity bar.

   

   If you do not see the icon, click Additional Views and select Joule from the list.

   

3. Copy the prompt below.

   Code Copy

   Create a customer loyalty application with sample data and application logic.

4. At the bottom of the Joule view, select the ‘/cap-gen-app` slash command and then paste the code below in the text field.

   

5. Click the arrow

   

   to send the prompt to Joule.

   

   Since this is a complex task, Joule divides it into different steps and provides suggestions for the prompts for each step. You can edit these prompts before triggering the generation.

   

   While Joule suggests certain properties for the entities, let’s edit the prompt to offer a clearer description that aligns better with the data model’s requirements.

6. Copy the prompt below.

   Code Copy

   Define 4 data entities: Customers, Products, Purchases and Redemptions. 
   Each customer must have the following fields: name, email, 7-digit customer number, total purchase value, total reward points, total redeemed reward points. 
   All fields for each customer should be `integer` except name and email that will be stored as `string`. 
   Each product should have a name, description, and price. 
   Purchases should include the following fields: purchase value, reward points. 
   All fields in Purchases must be `integer`. 
   Redemptions must have 1 field in `integer`: redeemed amount. 
   Each purchase and redemption will be associated to a customer. 
   Each purchase will be associated to a product and is called `selectedProduct`.
   Use associations instead of compositions.

7. Click

   

   to edit step 1 and replace the prompt with the one you just copied.

   

8. Click Save.

9. Click

   

   to run the step and generate the CAP data model.

   

   The staging files are generated and are displayed below your prompt. You can view or edit them by clicking on the file name.

   

   Note: If you only want to create a data model and service, you can use the /cap-gen-model slash command.

   Let’s edit the sample data to match requirements.

10. Copy the prompt below.

    Code Copy

    Create sample data with meaningful information. Any phone numbers must be 10 digits long.
    All customer numbers must be 7 digits long and one customer must use the customer number 1200547. 
    No fields may be empty. 
    Total purchase value must be smaller than 10000 not rounded. 
    Both total reward points and total redeemed reward points must not be rounded, must not be identical. and must always sum to one-tenth of the total purchase value for each customer

11. Click

    

    to edit step 2 and replace the prompt with the one you just copied.

    

12. Click Save.

13. Click

    

    to run the step and generate the CAP sample data.

    The CSV files are created and can be opened for review from the Staging Files list.

    

    Note: You can also trigger the sample data generation separately using the /cap-gen-data slash command or edit the existing data using the /cap-edit-data slash command.

    Now we will add application logic so that for each purchase, customers receive reward points equal to one-tenth of the purchase price. The purchase value will be added to the customer’s account. Additionally, when customers use reward points, the points should be deducted from their total reward points and added to their total redeemed points.

14. Copy the prompt below.

    Code Copy

    Implement application logic so that reward points of each purchase will be one tenth of the purchase value. 
    Each purchase value will be added to the total purchase value of the related customer. 
    Each reward point will be added to the total reward points of the related customer. 
    Furthermore, deduct the redemption amount from the customer's total reward points and add that to their total redeemed points.

15. Click

    

    to edit step 3 and replace the prompt with the one you just copied.

    

16. Click Save.

17. Click

    

    to run the step and generate the CAP application logic.

    

    The relevant files are created with the required code.

    Note: In an existing project with application logic available, you can use the /cap-app-logic slash command to enhance or modify the logic.

18. Accept the code.

    

To display and test the content we created for the customer loyalty program, we need to create an SAP Fiori elements UI.

1. Go to back to the Storyboard and add a UI application.

   

2. We will start with the user interface for the Purchases data entity.

   Set the Display name to Purchases and the Description to Manage Purchases, and then click Next.

   

3. We are using the browser, so we will select Template-Based Responsive Application as the UI Application type, and click Next.

   

4. Select List Report Page as the UI application template, and click Next.

   

5. Select Purchases as the Main entity, and click Finish. The page will be created now.

   

   It may take a few moments for the UI to be created because the dependencies need to be installed. Once the UI is created, the Page Map opens providing options for further editing the UI.

6. Repeat steps 1 through 5 to create additional UI apps for the Customers and the Redemptions entities.

   Customer:

   • Display name: Customers
     
   • Description: Manage Customers
   • UI Application type: Template-Based Responsive Application
     
   • UI Application Template: List Report Page
     
   • Main Entity: Customers
     

   Redemptions:

   • Display name: Redemptions
     
   • Description: Manage Redemptions
     
   • UI Application type: Template-Based Responsive Application
     
   • UI Application Template: List Report Page
     
   • Main Entity: Redemptions
     

   And that’s it! You’ve created an application.

1. Go to the Storyboard tab.

2. Click

   

   to preview the application.

   

   The application’s preview is displayed.

   

3. Click the Purchases tile.

   

4. Click Go.

   

5. Create a new purchase.

   

6. Provide values for the Purchase Value, Customer, and Selected Product fields.

   

   Note: Joule may generate different code when presented with the same prompt. For example, you might see a customer represented as a number in the preview.

7. Click Create.

   

8. From the dropdown list at the top of the page, select Purchases.

   

   You can see the added line in the list of purchases, Because of the logic you added, the Reward Points are automatically added based on the purchase value.

   

9. From the dropdown list at the top of the page, select Home to go back and preview the other applications.