Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Unlocking Full-Stack Potential using SAP build code - Part 1

jenifer_ranjani
Participant
2 weeks ago

Introduction

Last year at TechEd, SAP unveiled Build Code, and now it's accessible to the users through trial accounts, offering them a firsthand experience of its generative AI capabilities. SAP Build Code stands as a cornerstone in the realm of SAP Cloud Application Programming Model (CAP), SAP Fiori, mobile, and SAPUI5 development. Tailored to enhance the application development journey on SAP BTP.... it integrates coding, testing, and application management seamlessly. Leveraging SAP Business Application Studio alongside essential services and SDKs on SAP BTP, SAP Build Code simplifies and accelerates the development process.

At its core lies Joule, the AI copilot of SAP, facilitating the automatic generation of application code, data models, services, and sample data. This integration ensures adherence to the best practices delineated in the SAP BTP Developer's Guide. With AI-based code generation optimized for Java and JavaScript, SAP Build Code offers a comprehensive solution for coding, testing, integrations, and application lifecycle management.

Recently I got a chance to do a test drive on build code and I have tried out a full stack use case. In part 1 we will create a simple CAP and UI App using Joule and we'll deploy it to the BTP subaccount. We will test, create a managed app router configuration, and access the UI and service endpoints successfully. 

Check out the SAP documentation to know more about the SAP Build Code.

Now Let's get into action!!!

  • As an initial step setup the Build code subscription in your BTP account. Follow this blog to achieve that.
  • Inside your service marketplace under subscription hit on the SAP build code and click the goto application.

    jenifer_ranjani_0-1712851835524.png

  • Inside your service marketplace under subscription hit on the SAP build code and click the goto application.

jenifer_ranjani_0-1713262113333.png

 

  • Inside the build lobby, hit the create button and select Build apps and then Build code

jenifer_ranjani_1-1713262113355.png

jenifer_ranjani_2-1713262113365.png

jenifer_ranjani_3-1713262113372.png

 

  • We are going to build a full stack application use case here so hit the full stack option and fill in the basic details and hit create.

jenifer_ranjani_4-1713262113379.png

jenifer_ranjani_5-1713262113386.png

jenifer_ranjani_6-1713262113402.png

  • Click on your newly created project which will be available in the Build lobby, this opens up your BAS IDE and You can also look for your projects in this path “/home/user/projects” if you are not able to locate it when you launch the BAS.

jenifer_ranjani_7-1713262113403.png

  • Your storyboard shows the project's partial skeleton with a service and no model exists right now.

jenifer_ranjani_8-1713262113408.png

  • So far we have created a project using your Build code now lets make use of SAP Joule – the copilot to generate other technical artifacts.
  • As described in the introduction, we will give a simple text-based prompt to Joule as below, and let's anticipate the surprises it has in store.
  • Click on the Joule icon on the left side panel and provide the prompt now.. to create simple entities with a few fields also let's mention data types of them.

Prompt – “Create an employee details app with 2 entities “Project allocation” and “Employee Info”. 
Project allocation entity should have the following fields cust_Activitycode of type String and size 20, cust_Allocation of type decimal,cust_CTC of type decimal,cust_Closuredate of type Date,cust_Costcenter of type String,cust_Costcontrolmanager of type String,cust_Enddate of type Date,cust_Initiationdate of type Date,cust_Jobcode of type String,cust_Jobtitle of type String,cust_ProjectID of type String,cust_ProjectLocation of type String,cust_Projectname of type String.

  • Employee Info entity should have the following fields startDate of type Date, endDate of type Date, seqNumber of type Integer,userId of type String, company of type String,costCenter of type String, countryOfCompany of type String”

jenifer_ranjani_9-1713262113418.png

  • On click on generate, in a few seconds you’ll get your data model ready based on your prompt like below.. Jaw-dropping isn’t it? Accept it as such and now you can see new two entities under the DB section of your storyboard.

jenifer_ranjani_10-1713262113425.png

jenifer_ranjani_11-1713262113432.png

  • Lets load some sample / mock data into the models for our further testing. Click on the Open Editor drop-down and select Sample data, select your entity and click Add.

jenifer_ranjani_12-1713262113440.png

  • Click on Import and repeat the same for the second entity.. The sample data was generated by the Build code itself and we haven’t fed any inputs yet.

jenifer_ranjani_13-1713262113445.png

  • Validate the cells and in case of corrections click on the enhance option, now we are going to make use of the Joule copilot to correct the data generated..

Prompt – “Correct the custCTC and custAllocation data in projectallocation table to two decimal precisions”

jenifer_ranjani_14-1713262113455.png

jenifer_ranjani_15-1713262113460.png

  • Now, joule has generated the sample data based on your prompt and the decimal places are rectified. Accept the changes and the rectified data reflects in your project allocation data model.

jenifer_ranjani_16-1713262113463.png

  • Analyse the data and proceed further to test your CAP output.
  • Now lets run the app locally to see the output of the service… Open the terminal and provide the “cds serve” command or you can click on the play icon on the top right corner.

jenifer_ranjani_17-1713262113471.png

  • Upon running the local run the mock data is accessible as below when the entities are hit from the browser, the same works positive when tested via Postman.

jenifer_ranjani_18-1713262113476.png

jenifer_ranjani_19-1713262113481.png

  • Let's quickly create a UI app based on the Fiori elements template … Click on Add under the UI section and then fill in as below.

jenifer_ranjani_20-1713262113484.png

jenifer_ranjani_21-1713262113488.png

  • Select template based and proceed next…

jenifer_ranjani_22-1713262113493.png

  • Select List report page … we’ll explore Custom page in part two of the blog.

jenifer_ranjani_23-1713262113498.png

  • Select the data model from our CAP app… here im going with project allocation. Click on Generate.

jenifer_ranjani_24-1713262113502.png

jenifer_ranjani_25-1713262113503.png

  • Run the application, and you’ll be able to see the output as a list report page as below.

jenifer_ranjani_26-1713262113512.png

  • Now lets deploy your app to the subaccount.. Your app will not be having mta file so provide “cds add mta” command in the terminal.

jenifer_ranjani_27-1713262113517.png

  • Right click on the mta file and select build.. once the mtar is generated, deploy your application to your subaccount…

jenifer_ranjani_28-1713262113526.png

  • Select your cloud foundry settings.. here I have logged in to my global account using my credentials.

jenifer_ranjani_29-1713262113528.png

  • Before deployment, make sure that you have subscribed to the HANA cloud instance if not you might face issues during deployment.
  • Once deployed, your CAP application route is available, and you can quickly test it out from Postman.

jenifer_ranjani_30-1713262113536.png

jenifer_ranjani_31-1713262113542.png

  • Now, the UI app should be available post-deployment… Ohoooo Nooo! We forgot to add an approuter to our application to access the app via Build Work zone standard edition… Let's add that now and then do the rebuild, deployment.
  • Right click on the mta.yaml and select “Create MTA module from template”

jenifer_ranjani_32-1713262113549.png

  • Select the approuter type as ‘Managed approuter’…and click on create.

jenifer_ranjani_33-1713262113552.png

  • Your mta.yaml should automatically get updated with the needed configurations that are used by the SAP Build Work Zone, standard edition.
  • Build your project again and then redeploy… You should find the UI app under the HTML5 Applications

jenifer_ranjani_34-1713262113560.png

  • Open the deployed application route and hit go you should find the results from our full stack app which is built out of Build Code.

jenifer_ranjani_35-1713262519165.png

Conclusion

We have explored a full stack scenario covering the creation of CAP, a UI app using SAP Joule co-pilot on Build code. In the next part we'll add application logic to the cap app, consume data from external services and configure the portal site using the build work zone standard edition.

Thank you for going through the blog. Stay Tuned for the next part! 🙂

 

 

Labels in this area
Popular Blog Posts