Multi-Target Applications

former_member125464 · ‎09-28-2017

Multi-Target Applications

Introduction

A multi-target application (MTA) is comprised of multiple software pieces (“modules”) which all share a common lifecycle for development and deployment. These modules can be written in different technologies and deployed to different targets respectively, but they all serve (different aspects of) a particular purpose for the application's users.

This shows the nice fit between MTAs and the XSA Application Pattern. The structure and properties of MTAs are expressed by a declarative MTA model which is persisted as a set of descriptor files.

What is an MTA model actually modelling?

It defines an application composed of multiple (heterogeneous) sub-components. Benefit: Tools can establish a joint lifecycle for these components. On XSA/CF such a tool is the XSA deploy service.

It declares those resources on which an application depends on runtime and/or deployment time (we do not consider build-time here!). Benefit: Tools can allocate and bind such resources.

It declares configuration variables (and their relations) which distinguish different deployments of the application. Benefit: Developers can parameterize deployments at a single, central place. Tools can bind sub-components, can automate deployment based on default settings, or request missing mandatory values interactively.

The MTA specification further defines:

An archive format for MTAs with which they can be deployed and distributed in a convenient way.

A separation among deployment descriptor (delivered artifact) and extension descriptors(optionally used to add/change deployment time configuration).

In this exercise, you are going to build a SAPUI5 sample application with SAP Web IDE and to deploy it to SAP Cloud Foundry using the integrated Build tool.

Prerequisites

The only prerequisite for this exercise is to have an account on SAP CP Trial Landscape. You can register here: https://account.hanatrial.ondemand.com/#/home/welcome

Steps

Prepare the application to deploy

Create your first MTA project

Integrate the app in the MTA project

Install the builder in your CF space and build the app

Deploy the app to CF

1 - Prepare the application to deploy

For this exercise, I've chosen to use as example application the Shop app that you can create using SAP Web IDE. I could have chosen a simpler application, but I wanted to give you even an example of how a SAPUI5 application with mock data can be deployed to Cloud Foundry. The steps listed in this chapter are only necessary for this kind of approach, so in case you want to deploy to CF a different app they could be probably not needed. This said, let's create the sample application.

Open SAP Web IDE Full-Stack. The link should look like this:https://webidecp-[your_trial_account].dispatcher.hanatrial.ondemand.com/ where [your_trial_account] is the account you have got registered on SAP CP Trial Landscape

From the File menu choose New -> Project from Sample Application

Select Shop as application template and click Next

Accept the license agreement and click Finish

You have successfully created your sample application. This is what you see in your SAP Web IDE

If you want you can run the project to check that the its is working fine. When you run it, to use mock data, you need to select flpSandboxMockServer.html

Take note of the name of this application (sample.Shop) because we'll need it in the next chapters.

2 - Create your first MTA project

It's time now to create our first MTA project, which will be the vehicle for or application to go to Cloud Foundry.

Open SAP Web IDE Full-Stack edition

From the File menu select New -> Project from Template

Select Multi-Target Application and click Next

Enter a name for the project and click Next

Enter a description and click Finish

Your project is created. You should see something like this

Now right click on the name of the project and select New -> HTML5 Module

Select SAPUI5 Application and click Next

Enter the name we previously noted (sample.Shop) as module name and leave the namespace empty; then click Next. This will avoid us to go inside the application finding and replacing all the wrong texts

Leave all by default and click Finish

The module has been added: this is how the project looks like now

3 - Integrate the app in the MTA project

Go to the multi-target project and delete the webapp folder under the sample.Shop directory

Copy and paste the webapp folder from the sample.Shop project into here

We have still some few things to change: delete the test folder inside the new copied webapp folder

Delete the test.html file, too

Create a new file named index.html

Enter the following content and save the file

<!DOCTYPE HTML>

<html>



    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta charset="UTF-8">



        <title>Shop</title>



        <script id="sap-ui-bootstrap"

            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

            data-sap-ui-libs="sap.m"

            data-sap-ui-theme="sap_belize"

            data-sap-ui-compatVersion="edge"

            data-sap-ui-resourceroots='{"nw.epm.refapps.shop": ""}'>

        </script>



        <link rel="stylesheet" type="text/css" href="css/style.css">



        <script>

            sap.ui.getCore().attachInit(function() {

                sap.ui.require([

                "nw/epm/refapps/shop/localService/mockserver"

            ], function (server) {

                // set up test service for local testing

                server.init();

                // initialize the ushell sandbox component

                new sap.m.Shell({

                    app: new sap.ui.core.ComponentContainer({

                        height : "100%",

                        name : "nw.epm.refapps.shop"

                    })

                }).placeAt("content");

            });

            });

        </script>

    </head>



    <body class="sapUiBody" id="content">

    </body>



</html>

PLEASE NOTE THAT WE ARE:

using a URL for the SAPUI5 resources

enabling the mock server for getting our data in the application

skipping the Fiori Launchpad for this kind of application

Another change to do is related to the Products.json file. This file is the one which provides mock data to the application. We need to change the paths to the products' images. If you don't change them, you won't be able to see pictures of products once the application is deployed to CF. So go back to the myfirstappproject project, locate the file sampleShop/webapp/localService/mockdata/Products.json and search&replace all the occurrences of the string "../localService" with just "localService". We are making the images' paths relative to the current folder

Remember to save the file once done

Finally, let's accomodate a little bit the memory and disk quota for the application. Double click on the mta.yaml file, switch to the MTA Editor and go to the section parameters

There, change the two parameters memory and disk-quota as
- memory = 128M
- disk-quota = 128M

If the two parameters are not automatically available, feel free to add them. Finally, save the file

4. Install the builder in your CF space and build the app

Now that we have our application, we want to deploy it on Cloud Foundry. Before doing this we need to build in some way our application. SAP Web IDE comes with the right tool to do this.

Right click on the name of your project in SAP Web IDE and select Project Settings

Now click on Space, select the right CF API Endpoint, Org and Space for your Trial landscape, click on Save and, at the end, click on Install Builder

This will install the MTA builder in your space. At the end of the installation you should get this kind of message. Click on Close

You have successfully installed the MTA Builder in your space. If you give a look at your CF cockpit, you see a new application installed in it

To build the app, go back to your SAP Web IDE. Just to easily follow the process log, make sure you have enabled and cleared the console from the toolbar

Right click on the name of your project and select Build

The build process starts and during its execution you should get its log in the console. A message will confirm you that the process ended successfully

The execution of this command generates a new folder, named mta_archives in your SAP Web IDE workspace. Inside this folder you will find a subfolder with the same name of your project, containing a .mtar file. This is the file that we are going to deploy to CF

5. Deploy the app to CF

If we deployed our application to Cloud Foundry in the Trial Landscape as it is, we would receive an error because of the limitations of Trial Lamscape. Indeed this Landscape has a very limited quota of disk and memory you can use and the builder, we have just pushed to CF, is taking it all for yourself. So, before we proceed, we need to shrink a little bit the builder app, in order to make some space for our MTA application. Again, this limitation DOES NOT EXIST on production landscapes.

Going back to the Cloud Foundry cockpit and click on the MTA builder app

Click on the change quota button to adjust the quotas of the MTA Builder. Reduce both disk and memory quotas to 700MB. The builder app will restart

Go back to SAP Web IDE, locate the file <your_project_name>_<your_project_version>.mtar in the mta_archives\<your_project_name> folder

Right click on this file and choose Deploy --> Deploy to Cloud Foundry

Enter the required information and click on Deploy

When the deployment process finishes, go back to the Cloud Foundry cockpit. You can see that the app has been successfully deployed and started. Click on the application's name

Click on the application's link

You should be able to access successfully your SAPUI5 application.

Congratulations! You have successfully deployed your MTA to SAP CP Cloud Foundry!