SAP Business Application Studio

[pro23]

Introduction: 

The SAP Business Technology Platform (BTP) has changed the way businesses build, integrate and extend their applications. The core of the platform is SAP BTP Business Application Studio, an integrated cloud-based development environment that enables developers to build cutting-edge applications.

In this blog, I want to share my knowledge and experience about how easy it is to start using SAP BAS with a free account.

First, create your SAP Cloud Platform free trial. Get a Free Trial Account on SAP Cloud Platform 

The SAP BTP trial account is a free version of SAP BTP that allows developers and businesses to explore and test the platform's capabilities without incurring any costs. It is an excellent option for getting started with SAP BTP and understanding its various services and functionalities. 

Let’s start SAP BAS. 

Step 1: 

Log into SAP Cloud Platform 

1. Go to https://cockpit.hanatrial.ondemand.com/cockpit#/home/trial 

Image 1

Note: If you already have a SAP BAS subscription, skip to step 2.

Click "Go to your trial account" to access Cloud Foundry environment.

Cloud Foundry Environment : 

Cloud Foundry is an open-source platform-as-a-service (PaaS) that provides a cloud computing runtime environment for deploying, running, and managing applications. It abstracts the underlying infrastructure complexities, allowing developers to focus on building and deploying applications without worrying about server management or configuration. 

Image 2

let's explore the concepts of Global Account, Subaccount, and Trial Account: 

Global Account: A Global Account is the top-level organizational unit in SAP BTP. It represents the highest level of hierarchy and serves as the parent container for all other accounts and subaccounts associated with an organization. When an organization signs up for SAP BTP, it creates a Global Account, which is used to manage and control various resources, services, and billing for all the applications and projects within that organization. 

Key features of a Global Account: 

• It acts as a central administrative entity, allowing you to manage multiple subaccounts and applications under it. 


• It provides consolidated billing and usage reports for all the resources used within the organization's BTP landscape. 

• It allows access control and user management at the organization-wide level. 

Subaccount: A Subaccount is a child account that resides within a Global Account. It serves as a logical container for applications, services, and resources associated with a specific project or development environment. Organizations can create multiple subaccounts under a Global Account to manage different projects separately and isolate resources as needed. 

Key features of a Subaccount: 

• It provides a sandbox-like environment for developing, deploying, and managing applications and services. 


• Each subaccount has its own set of resources, such as memory, storage, and service instances, which can be independently managed. 


• It allows access control and user management specific to the subaccount. 

Trial Account: A Trial Account is a special type of subaccount that is primarily used for exploration and evaluation purposes. It offers a limited set of resources and services to allow users to test and experiment with SAP BTP capabilities without incurring any costs. 

Key features of a Trial Account: 

• It is typically free and comes with certain usage limitations, such as limited runtime, storage, and number of service instances. 


• It is ideal for developers, students, or anyone interested in trying out SAP BTP services and features without committing to a paid subscription. 


• After the trial period, users can choose to upgrade to a paid plan with additional resources and extended capabilities. 

Click the "Create" link to access your trial account.

(create if you don't have a trial account)

After logging in to your trial account, go to Service Marketplace and search for SAP Business Application Studio and register.

Image 3

Service Marketplace:  

The Service Marketplace, also known as the Service Catalog or Service Marketplace, is a central repository of services provided by SAP and its partners on the SAP Business Technology Platform. It offers a wide range of services that can be used to enhance and extend applications developed on the platform. 

Instances and Subscriptions:  

In SAP BTP, when you want to use a service from the Service Marketplace within your application, you need to create an "Instance" of that service. An instance is a runtime environment for a specific service plan. Think of it as an individual deployment of the service that you can use for your application. 

Step 2: Launch SAP Business Application Studio 

SAP Business Application Studio: 

SAP Business Application Studio is a cloud-based integrated development environment (IDE) provided by SAP as part of its Business Technology Platform (BTP). It is designed to help developers efficiently build, extend, and customize SAP applications and solutions. Business Application Studio brings together a set of powerful tools and services, enabling developers to create innovative and scalable applications with ease. 

Click on “Go to Application”. 

Image 4

You may be asked to accept a formal message. Check the box and click OK.

Image 5

Step 3: Create Dev Space

Dev Space: 

A Dev Space in SAP Business Application Studio provides developers with an isolated, collaborative, and efficient environment to build and test their applications. It allows teams to work on projects independently while benefiting from integrated development tools, version control, service integration, and CI/CD capabilities. Dev Spaces play a crucial role in fostering a streamlined and controlled development process within the SAP BTP ecosystem. 

Click on "create Dev Space" 

Image 6

you can create Dev Spaces according to your type of application development and also you can add additional SAP extensions if you want.

Image 7

Select an app type and specify a dev space name, then click Create Develop Space. In a minute you will find your site up and running.

Image 8

Image 9

Once your Dev Space start Running, you can enter to Dev Space by clicking on Dev Space name Link. 

 After entering your Dev Space, click on the "Create Project" button in the welcome screen or select "File" > "New Project" from the top menu.

Image 10

In the "Create a new project" dialog, you will see a list of available project templates. Look for the template related to CAP (e.g., "CAP Node.js Module," "CAP Java Module," etc.). 

Choose the appropriate CAP project template based on your preferred programming language.  

Image 11

On clicking finish it will ask for the details based on the template you have chosen. Once you fill in all the details it will generate the project structure in the Workspace. Now, the project gets generated like the below structure 

Image 12

When you create a full-stack Fiori project using SAP Business Application Studio, the project structure typically includes various files and folders that collectively make up the application. 

Below is a brief description of some of the key files that you might find in a typical full-stack Fiori project: 

• Manifest. Json: The manifest file is a critical configuration file for Fiori applications. It defines the application's metadata, such as the app ID, title, version, data sources, navigation targets, and other settings required for the app to function correctly. 

• Component.js: The Component.js file is the entry point for the Fiori app. It sets up the application, initializes the component, and is responsible for handling the app's lifecycle events.

• Index.html: This file is the main HTML file that loads the Fiori app and includes the necessary libraries and resources. It typically references the Component.js file to start the application.

• View: This folder contains XML or JavaScript views that define the user interface (UI) of the application. Views are used to render the data and provide the user with the interactive interface. 

• Controller: The controller folder contains JavaScript files that define the logic for the Fiori app. They handle user interactions, data processing, and communication with backend services. 

• i18n: This folder stores internationalization (i18n) files, which allow the app to support multiple languages. It contains text resources in different languages to provide translations for the app's user interface. 

• Model: The model folder typically includes data models that represent the app's data and define how the data is structured and accessed. These models can be used in the views and controllers to handle data binding and manipulation. 

• CSS or style: This folder contains CSS (Cascading Style Sheets) files that define the styles and appearance of the Fiori app's UI components. 

• Local Service: In some projects, you might find a localService folder that includes mock data and services used for local development and testing before connecting to the actual backend services. 

• Webapp: This is the main folder that holds all the client-side resources (HTML, JavaScript, CSS, etc.) for the Fiori app. 


• neo-app.json or xs-app.json: In SAP Cloud Platform projects, you might find this file, which serves as a configuration file for routing requests and handling security-related settings. 

Step 4: Test Your First Application. 

• View1.view.xml 

<mvc:View controllerName="project1.controller.View1" 

    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" 

    xmlns="sap.m"> 

    <Page id="page" title="{i18n>title}"> 

        <content /> 

        <content> 

            <HBox id="_IDGenHBox1"> 

                <Button id="_IDGenButton1" text="Hello World" 

                        press="onPress" 

                        ariaDescribedBy="defaultButtonDescription         genericButtonDescription"> 

                    <layoutData> 

                        <FlexItemData id="_IDGenFlexItemData1" growFactor="1" /> 

                    </layoutData> 

                </Button> 

            </HBox> 

        </content> 

    </Page> 

</mvc:View> 

• View1.controller.js 

sap.ui.define([ 

    "sap/ui/core/mvc/Controller", 

    'sap/m/MessageToast' 

], 

    /** 

     * @Param {typeof sap.ui.core.mvc.Controller} Controller 

     */ 

    function (Controller, MessageToast) { 

        "use strict"; 

        return Controller.extend("project1.controller.View1", { 

            onInit: function () { 

            }, 

            onPress: function () { 

                MessageToast.show("Hello World"); 

            } 

        }); 

    }); 

The above code snippets create a simple SAPUI5 application with a single view displaying a Page with a Button. When the Button is pressed, a toast message saying "Hello World" appears on the screen. The SAPUI5 application is driven by the controller logic defined in the JavaScript module, and the view layout and elements are defined in the XML-based view definition.

Copy and paste the above codes. 

Now, to run the application follow the path. 

Image 13

Click on New Terminal. 

You will see a terminal will be open 

Image 14

To run the application type “cds watch” and enter. 

"CDS Watch" is a development feature that automatically monitors changes to the Core Data Services (CDS) models and triggers corresponding actions whenever changes are detected. CDS Watch simplifies the development process by providing real-time updates and automatically refreshing data in the application's user interface whenever the underlying data models change.

 

Image 15

and your First Application is Running... 

Now, to check output click on “Open in a New Tab” link. 

Image 16

Now, click on “/project1/webapp/index.html” link. 

Image 17

This is your First Application. 

 

Thanks and Best regards!