Skip to content

Mobile Services App Development Tools for Micro App in SAP Web IDE

Mobile Development Kit extension on SAP Web IDE helps you to quickly and efficiently develop or modify micro apps throughout their life cycles.

Note

WeCom application support is available only in China.

Prerequisites

This topic describes the prerequisites for Micro App extension.

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.

  • Destination for Cloud Foundry Mobile Service in NEO. To create a new destination, see Creating Destination for mobile services in Neo Environment

    Note

    Provide the following values for Destination Name and URL:

    • Destination Name: mobileservices_cf
    • URL: mobile services admin UI root url (without the path)

  • Mobile Development Kit editor in SAP Web IDE

    To enable Mobile Development Kit editor in SAP Web IDE, see Setting Up the Editor in SAP Web IDE Full-Stack

  • Configuring WeChat settings To configure WeChat settings, see Configuring WeChat Settings.

Create a Back-End Module for WeChat Application

Creating a back-end module on SAP Web IDE for WeChat application.

  1. Launch SAP Web IDE and navigate to your development workspace. Right click on Workspace and select New > Project from Template.

  2. On the pop-up screen that appears. In the Template Selection section, select Cloud Foundry in the Environment drop-down and Mobile Services in the Category drop-down. Choose WeChat Micro App with Mobile Back-End Tools tile and then choose Next.

  3. In the Basic Information section, enter a Project Name and choose Next.

  4. In the Mobile OData Service Parameters section, enter or select the requested details and then choose Next.

    Attribute Name Description
    Service App Name Enter the application name.
    Service App Version Enter the version in the format *.*.*, for example 1.0.0
    Deployment Target Select Cloud Foundry.
    Authentication Method Select XSUAA

  5. In the Mobile Services section, either enter or select the API Endpoint, Organization, and Space. You can either select an existing application or create a new application by choosing the '+' icon. Choose Next.

    After the confirmation, you can check the project settings for mobile services information. To do so, right-click on the newly created project and choose Project > Project Settings. In the Micro App section, you can view the micro app configurations like API, server, destination, and so on.

  6. Create a back-end service from CSDL. To do so, you can either copy an existing .csdl metadata file or create a new one by, right-clicking on the newly created project and choose New > OData CSDL Document.

    A new .csdl file is created and added to the project.

  7. Generate a mobile OData service. To do so, right-click on the newly created .csdl file and choose Generate Mobile OData Service.

    After the service is generated, you can perform the following:

    • Add messaging: Right click on srv folder and select Add Micro App Messaging. A messaging folder is generated in the current package.
    • Customize notification: Edit a .listener file under the current package's listener folder.
    • Build the application: Right click on srv and choose Build > Build.

Create a UI Module for WeChat Application

Create a UI module using SAP Web IDE for WeChat application. Use this procedure to create a UI module for WeChat application and update the module with back-end information.

Prerequisites:

You’ve created a project of WeChat Micro App with Mobile Back-End Tools template. If not created, then refer Create a UI Module for WeChat Application

Procedure:

  1. Launch SAP Web IDE and navigate to your development workspace.

  2. Select the required project. Right-click on the project and choose New > HTML5 Module.

  3. On the pop-up screen that appears. In the Template Selection section, choose CRUD Master-Detail Module tile and then choose Next.

  4. In the Basic Information section, enter a name, title, description, and namespace for the module. Choose Next.

  5. In the Data Connection section, select Workspace and s service metadata document (.csdl file) from the workspace.

  6. In the Template Customization section, select the required data binding object and line item. Choose Finish.

  7. Update the UI module with back-end information. To do so, right-click on mta.yaml file.

    mta.yaml is updated with Cloud Foundry and Mobile Service application information.

  8. Update back-end information in manifest.json and xs-app.json files. To do so, right-click on the newly created UI module and choose Use back-end destination.

Create a Blank WeChat Application

Create a blank WeChat micro app.

  1. Launch SAP Web IDE and navigate to your development workspace. Right click on Workspace and select New > Project from Template.

  2. On the pop-up screen that appears. In the Template Selection section, select Cloud Foundry in the Environment drop-down and Mobile Services in the Category drop-down. Choose Blank WeChat Micro App tile and then choose Next.

  3. Provide a Project Name and choose Next.

  4. In the Template Customization section, provide the Application ID, Application Version, and Description. Choose Next.

  5. In the Mobile Services section, provide your Cloud Foundry API Info, such as API Endpoint, Organization, and Space. You can select an existing application from the Application ID drop-down or create a new application by selecting the + icon. In the pop up for new application, provide the mobile services application ID, Name, Corp ID, and Agent ID.

  6. Choose Finish.

    A new project under the workspace is created.

    You can now perform the following:

    • Create an empty HTML5 module: Right click on the newly created project and select New > HTML5 Module. Choose SAPUI5 application and then choose Next. Provide values for Module Name and Namespace.
    • Create an empty JAVA Module: Right click on the newly created project and select New > Java Module. Choose Spring Boot application application and then choose Next. Provide values for Name, Group ID, Artifact ID, and Package.
    • Add messaging: Right click on srv folder and select Add Micro App Messaging. A messaging folder is generated in the current package.
    • Use SAP Cloud SDK to Generate OData Service Access Code:
      • Specify the OData service: Select your Java folder and expand the folder. Create a edmx folder under the Java module. Import the OData modules BusinessPartner.edmx and ECWorkflow.edmx into the newly created edmx folder. The OData modules are available on SAP Business Accelerator Hub.
      • Add build dependencies and plugins: Locate pom.xml in your Java module. Right click and select Add S/4 Hana Dependencies.
Last update: May 2, 2023