Unleashing AI Magic: Building Full-Stack Apps with SAP Build Code

[aashna_prakash]

Introduction

SAP Build Code is a turn-key environment for coding, testing, integrating, and managing applications by bringing together key design time, runtime services and tools in one single offering.
It introduces an end-to-end integrated solution where SAP technologies and AI combine, greatly enhancing the productivity of developers.
With SAP Build Code, developers can build rapidly using AI code generation with Joule copilot.
Refer to this blog - link for more details on SAP Build Code and the features it provides.

Motivation

SAP Build Code has garnered a lot of attention since its release this week and I was curious to try out what all it has to offer. So here I am, sharing with you how I leveraged SAP Build Code to create two different full stack applications with just a few clicks and prompts.

Getting Started

Pre-requisites
SAP BTP sub-account with SAP Build Code set up. Boosters are available for setting it up on BTP Trial Account.
Additionally, if you want to deploy the application, you need the Cloud Foundry runtime environment.

Creating the project

1. Click on SAP Build Code under Instances and Subscriptions in the BTP sub-account and navigate to the lobby. Click on Create.
2. Select Build an Application -> SAP Build Code -> Full Stack Application.
3. Enter Project Name, Namespace and Service Name.
   Select the dev space for Full Stack Application.
4. Click on the newly created project.

Creating the application using Business Application Studio

1. Once inside the Business Application Studio, click on the Joule icon in the left navigation bar and click on Open Guide.
   
2. You can now see a detailed approach to Generative AI Powered development.
   

Now, there are 2 ways you can go about this.

1. Using the option SAP Fiori UI from Generative AI Powered Development, you can provide your business requirements in natural language and Joule generates the entire source code for your business app in one go. You can accept the entire code and can later make adjustments using AI / through minimal coding to get the desired outcome or, alternatively ask AI to regenerate the code for you.
   Refer to this video to watch how I created a Product Orders Management App to demonstrate this approach.
   
   
2. You can go step by step creating the CAP data model and service first, then the sample data and app logic, add some test cases and then create the UI using templates. To demonstrate this approach, I will be creating a Library Management App.
   (See detailed instructions below)
   
   Data Model and Service Creation -
   
   

   Click on Open Joule.
   Describe the CAP models/entities that you want to create as an input to Joule. For example - "Create an app for library management system for students. It should have entities - books, authors, students. Books should have issueDate, publicationDate and genre. Students must have studentId, phone and email. Books are issued to students and have author."
   Check the output created by Joule and if satisfied click accept. You can edit the prompt and ask Joule to regenerate again. You can also copy the code snippet and paste it in the schema.cds file.
   Check the sample data created in the db folder and also the service.cds file for the service entities created.

   
   Sample Data Generation - 
   
   

   Although sample data is created by default, you can ask Joule to create sample data for you based on your needs. Click on Open Joule under Sample Data - > Generate Sample Data.
   Describe the sample data you want from Joule.
   You again have the options to either accept the sample data generated or ask Joule to regenerate.
   At any point of the app creation, you also have the option to enhance the sample data. Go to Sample Data Editor and click on Enhance. This will again open the Joule Assistant. Enter the enhancement you need. For example -  Make sure email ids of students are @smu.com.

   
   Application Logic - 
   

   We will be creating logic to tag new books published in the current year with “-- NEW ARRIVAL”.
   The logic will be triggered every time the books are fetched/read.
   
   

   Click on Create Application Logic under Application Logic. Click on Open CDS Graphical Modeler.
   To the books service, click on Add Logic.
   Select Service entity Books. No action / function. Name the App Logic – tag-newbooks. Click on Add.
   Select, the Phase – “After” Select the Standard Event – Read. Next, click on Open Code Editor, and click on Application Logic.
   We will ask Joule to now add application logic. Use input – "Create logic to add "-- NEW ARRIVAL” to the name of books." which are published in current year." Accept if you are satisfied with the result and app logic files will be created for you under the folder srv/code.
   Run your application using cds watch and you will be able to preview your application in the browser.

   Unit tests - 
   
   Let's be honest, writing unit tests is not the most liked part of development.
   SAP Build Code is a saviour when it comes to that.
   (Yes, you heard that right, it can create unit tests for you.😍)
   
   

   Go to “Create Unit Test” under Generative AI Powered Development and click on Open CDS Graphical Modeler.
   Select the app logic created earlier for books service and click on Unit test.
   It takes us to the Joule assistant where I will continue with the default input provided. "Generate a unit test case for my application logic". Once you accept the test case generated, it updates the code in the test file.
   Run the test and it should be successful. If not, update the tests as needed.

   UI Application - 
   
   

   SAP Build Code provides predefined templates for UI and a wizard based approach. Under UI applications in the story board, click on +.
   Specify a name, display name for your application and click on Next.
   You can create template based web applications that can launched in the browser or create native iOS / android apps. Select the first one and click on Next.
   Select from a list of templates, I am choosing the first one which is List Report Page and click Next.
   Select the Main Entity and fill in other details as needed and click on Finish.
   The UI app is now created and linked to the service.
   Run the application again and in the browser you can additionally now see a web app link. Click on that, and you are redirected to the list report page with the list of books displayed.

Voila! With that we have created our full stack application that we can now deploy and run in production.
How cool! Isn't it!
Build Code can also be used for Fusion Development where business experts/citizen developers and professional developers can collaborate to create business applications.


Have you tried out SAP Build Code yet?
Share your thoughts in the comments section.