Skip to content

Mobile Services App Development Tools for Micro App

Mobile Services App Development Tools for Micro App on SAP Business Application Studio helps you to quickly and efficiently develop or modify micro apps throughout their life cycles.

Note

WeChat Micro application support is available only in China.

Prerequisites

Following are the prerequisites.

  • An application in WeChat work

    To create an application in WeChat work, see this guide. you can reuse an existing application instead of creating a new one.

  • Initialize Dev Space

    Open SAP BAS with extensions enabled. The SAP BAS URL with extensions=true parameter.Then check below extensions are in SAP Cloud Platform Mobile Services Dev Space:

    • Fiori Application
    • Basic UI5 Template
    • UI5 Free Style Template
  • To configure WeChat settings, see Configuring WeChat Settings.

Create a Micro App Multi-Target Application (MTA)

  1. In the View section , choose Find Command, and then select Yeoman UI Genarators.

  2. Select Micro App Project and then choose Next.

  3. Select MTA and choose Next.

  4. Provide a valid project name, and choose Next.

  5. Logon to your Cloud Foundry account and then choose Next.

  6. Select an application id.

    • If you want to reuse an existing application, select the application from the drop-down list. To configure WeChat settings in Mobile Services cockpit, see Configuring WeChat Settings.
    • If you want to create a new application in the generator, select Yes.
      • In the Mobile Services application creating window, please enter followings and then choose next.

        • Application ID
        • Application name
        • WeChat Work account corp ID
        • WeChat Work app Agent Id
        • App Secret
        • Token
        • EncodingASEKey

Create Back-End Module and UI Module for the WeChat Application

There are two ways to create a back end and a UI Module:

  • Spring Boot + S/4 SDK + Fiori
  • Mobile Back-End Tool + Fiori

Create a Spring Boot Java Module

  1. In the File section, choose Open workspace..., choose the MTA folder of the Micro app for which you want to create the back-end module as a workspace.

  2. In the View section , choose Find Command, and then select Yeoman UI Genarators.

  3. Select Micro App Project and then choose Next.

  4. Select the mta project folder path to previously created mta path, e.g. /home/user/projects/MicroApp1. Choose Next.

  5. A blank spring boot application is generated. This application is XSUAA security enabled as below check points:

    • SecurityConfiguration.java
    • xs-security.json

Add S/4HANA Dependencies to Spring Boot Project

To add S/4HANA Dependencies. Right click on the Spring Boot project pom.xml file, select the MicroApp: Add S/4 HANA Dependencies. pom.xmlfile is updated.

Alternatively, you can perform the following steps:

  1. Select the required edmx files and place them in a folder under java module ( i.e. edmx).
  2. Generate the code from edmx. Run mvn compile under the java module. The target folder is now available in the java module folder target/generated-source.
  3. Add destination resources to mta.yaml. Add the following to resources section and save the changes.

        - name: s4sf-dest
        type: org.cloudfoundry.managed-service
        parameters:
            service: destination
            service-plan: lite
            service-name: dest_cf.microapp.Wechat.Demo
    

    Note

    Destination service dest_cf.microapp.Wechat.Demo is already created. Get the service-name from the administrator.(That is created from the SAP Cloud Cockpit or CF terminal).

  4. Add the following to requires section of Java Module.

        - name: s4sf-dest
    

Create a Fiori UI Module

  1. In the View section , choose Find Command, and then select Yeoman UI Genarators.

  2. Select Micro App Project and then choose Next.

  3. Select Fiori UI module and then choose Next.

  4. Select the mta project folder path to the previously created mta path. (If you have opened the mta path as a workspace, you don't need to choose the mta project).

  5. Enter a name for the UI module then choose Next.

  6. Select Basic UI5 template, add authentication and choose Yes. Choose Next.

    Note

    We don’t support no authentication because Java module security is always on. So to ensure all modules XSUAA is enabled, choose No after Mobile: Apply micro app configuration step, the Fiori module will use the MTA UAA.

Create an MBT Back End

  1. In the File section, choose Open workspace..., open the MTA folder of the Micro app for which you want to create the back-end module as a workspace.

  2. Prepare a csdl.xml file. You can either upload an existing CSDL file or create a new one. To create a new one in the command line, enter the command MTB: New OData CSDL file.

  3. In the View section , choose Find Command , then select MBT: Create "task.json" file, and provide the value for the following fields:

    • Application name
    • Application version
    • Use spring boot style
    • In memory database
    • Default workspace folder
    • Add mta support
    • Module folder name
    • Select the uploaded csdl.xml
    • Do not define local server path
  4. In the Terminal section , choose Run Task..., run the command csdl-to-war-cf.

  5. Copy test-data folder content to initial-data folder.

Create a Fiori Module

  1. In the View section , choose Find Command, and then select Yeoman UI Genarators.

  2. Select Micro App Project and then choose Next.

  3. Select Fiori UI module and provide the following:

    • Module name.
    • Select an application type, such as SAP Fiori Worklist Application.
    • Standalone approuter.
    • Add authentication choose Yes.

    Note

    We don’t support no authentication because Java module security is always on. So to ensure all modules XSUAA enabled, choose No after Mobile: Apply micro app configuration step, the Fiori module will use mta uaa.

    • Input namespace, title and description.
    • Standalone application.
    • Local system.
    • Browse that csdl.xml file.
    • Input object collection.

Apply Messaging

Right click the Spring Boot project pom.xml file, select MicroApp: Add WeChat messaging module, pom.xml file is updated, messaging code is generated.

To construct a WeChat Message and push it to end users. For more details on how to implement this, see sample code.

To update back-end data, a notification message can be triggered in WeChat. For more details on how to implement this, see sample code.

Apply Micro App Configuration

Right click the MTA project mta.yaml file, select Mobile: Apply micro app configuration.The mta.yaml, xs-app.json and manifest.json files are updated.

Build & Deploy & Publish

There are two ways to build and deploy.

  • Using command line.

    • Run mbt build from the terminal in the MTA folder.
    • Run cf deploy mta_archives/*.mtar. (The process is slow, it takes about 5 minutes).
  • Using Deploy Editor UI.

    Double click on the microapp.deploy , or right click on the microapp.deploy, select open with, then select Micro App Deploy Editor. In the deploy editor, you perform the following:

    1. You can build & deploy the MTA project to Cloud Foundry.

      • Rebuild MTA? If you want to reuse the build result, select no. If you want to build, select yes.
      • Update whole MTA or module? If it's the first deployment or mta.yaml is changed, select mta. It will check/create/update binding services, application properties, and update module content. The process is slow, it takes about 5 minutes.

      Note

      If you update the application, and mta.yaml has no change, then select modules. It will only update the module content.

    2. You can select a micro app application to publish, and you can either add or edit the micro app application destinations for the micro app application.

      Note

      If there are no destinations configures, the editor will use a default destination.

    3. After publishing the micro app application, you can update the mta.yaml file by selecting update mta.yaml from the application.

    4. You can get message handler URL from the published micro app application and then you use it in WeChat work Message-receiving server configuration page.

Verify From Browser

After deploying the application to Cloud Foundry, you can use the Pulish step's URL and your java code to verify the application on the browser.

Verify From WeChat Work

Setup the application in WeChat. Run it from WeChat, the UI can work well and the input message can be replied.


Last update: October 20, 2020