“This is the 39th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

As one of the world’s preeminent enterprise management software providers, SAP solutions cover multiple platforms from PC to mobile devices. The author has worked in SAP Chengdu Research Institute for 15 years, and has dabbled in mobile development in the field of enterprise management software. This article will be my past work on mobile development in the accumulation of some experience and you exchange, please community mobile development experts give advice.

This article will share my mobile application development project experience in SAP through the following three parts:

(1) Android native Mobile application development based on Java; (2) Mixed Mobile application development based on UI5 + Cordova; (3) Mobile application development based on SAP BTP Mobile Service

Two of the biggest stars in mobile operating systems, iOS and Android, were born in 2007. SAP has since released a number of native mobile apps for iOS and Android. Take SAP Customer Briefing, a native Android application developed by the AUTHOR’s CRM development team in 2011 as an example. The application helps users efficiently and quickly browse the Customer master data stored in the REMOTE CRM system connected to the application. Display each customer’s Company Profile, historical business data, Key People, sales opportunities, social media-related information and other dimensions of data.

Customer master data information in CRM system is exposed to Android native application consumption through OData. OData is an OASIS standard that describes how to create and access Restful services. We use the programming language ABAP to implement OData services for Customer Briefing application consumption. The specific source code is located in the CRM system development package named CRM_ODATA.

A typical iOS/Android native mobile application connects to a remote CRM system. Because the CRM system is deployed on the Intranet and protected by a firewall, native mobile applications cannot directly consume OData services behind the firewall through HTTP.

In order to solve the problem of crossing the internal and external networks, we adopt the combined scheme of SUP and SAP Netweaver Gateway to forward the OData requests of native mobile applications located On the public network to the ABAP on-premises system behind the firewall of the internal network for business processing.

SUP, short for Sybase Unwired Platform, is a Mobile Enterprise Application Platform (MEAP). SUP is a middleware for managing mobile applications, mainly for storing and transferring data between mobile devices and SAP systems.

UI5 + Cordova based hybrid mobile application development

For mobile applications released in the mobile native application development mode, enterprises need to maintain two different sets of iOS and Android code lines for the same business scenario. With the birth of UI5, SAP’s self-developed front-end development framework, and the continuous maturity of Cordova open source project, we started SAP CRM Fiori mobile application development in 2014, and chose the technical solution of UI5 + Cordova.

SAP UI5 is short for SAP UI Development Toolkit for HTML5. It is a front-end Development framework launched by SAP in order to rapidly develop UI with Fiori design language style and build enterprise-class Web applications. Contains rich interface controls, CSS page display templates, hundreds of industry ICONS, and extension features to support controls.

Cordova is an open source mobile development framework. Through Cordova, developers can implement cross-platform mobile application development using common Web development technologies such as HTML5 and JavaScript, which is similar to Java’s “compile once, execute everywhere” effect.

After adopting the combination of UI5 + Cordova for SAP CRM Fiori mobile application, as application developers, we completed the development of Web application using UI5, and then used the build tool provided by Cordova to develop good front-end application. Packaged as Hybrid Mobile Applications that can be installed on iOS and Android platforms. The so-called hybrid mobile apps are intended to distinguish them from native apps that use native development methods. For the end user of a hybrid mobile app, the user experience is almost indistinguishable from that of a native mobile app.

The following diagram shows the architecture of Cordova. The orange Cordova Application in the upper part of the figure is a hybrid Application generated after the front-end Web Application is packaged with Cordova tools. At runtime, the front-end resource files in the hybrid application are loaded, rendered and run inside an embedded HTML Rendering Engine, or WebView control. The embedded WebView uses Plugins provided by the Cordova framework to access Native apis for mobile operating systems such as cameras, gyroscopes, and local storage.

On the other hand, Cordova is extremely scalable. Cordova can also be used for mobile development platforms such as iOS or Android if the API provided by the mobile operating system is not supported. Develop Custom Cordova plug-ins (see Custom Plugins in the blue figure below), which use iOS Object C & Swift, Android Java & Kotlin and other programming languages to call mobile operating system APIS. These Custom plugins are then exposed to front-end application consumption through a JavaScript interface.

Once the terminal of mixed mobile application finishes the development of Web application with UI5, it can be packaged into mixed mobile application that can be installed and run on specific mobile platform, which can be completed by simple command line.

As shown below, this is an application of a service order list that I completed with UI5. Here I will show you how to use Cordova’s build tools to generate an APK file that can be installed on the Android platform.

You are advised to install Cordova using the cli:

npm -g install cordova:

Then create a new folder, go inside the folder, and use the command line to create a new Cordova project:

cordova create JerryUI5HelloWorld

The following resource files are automatically created for cordova. At this point, the Platforms folder is still empty because we haven’t added the target mobile platforms supported by the Cordova project.

Add support for the Android platform using the command line:

cordova platform add android

After that, each folder will have an Android folder that contains all the resource files necessary to generate the Android APK installation file.

Copy the UI5 application to a WWW file in the root directory of the Cordova project. Then run Cordova prepare. The resources in the WWW file in the root directory are automatically copied to the platforms/ Android folder.

Finally using the command line cordova compile package, generated for the mixture of the Android platform mobile application APK file, will appear in the folder platforms/Android/build/output/APK.

Copy this APK file to my Android phone for installation and running, the effect is as follows:

Cordova has excellent scalability. The Custom Plugin and self-developed plug-ins mentioned in the official architecture diagram of Cordova are highlighted in red in the following figure.

Suppose that the hybrid mobile application we need to develop needs to use some hardware devices such as gyroscope of Android system. Traditional Web applications cannot directly call the native API provided by the mobile operating system through JavaScript code, so Custom Plugin needs to be developed. As a bridge between the JavaScript code in Cordova’s hybrid mobile applications and native apis in mobile operating systems.

Let’s look at a specific example. Taking The Android platform as an example, Java implements the addition of two integers to simulate the native API on the platform. We implement an adder in Java in the form of a Custom Plugin on the Android platform, and then consume the Custom Plugin with JavaScript code from the Web application.

Install the Cordova plug-in manager using NPM.

NPM -g install plugman

After successfully installing the plug-in manager, use it to create a Custom Plugin:

Command line: plugman create-name adder-plugin_id jerry. Adder-plugin_version 1.0.0

This command will automatically create a plug-in named Adder with the plugin ID Jerry. Adder and version 1.0.0.

Plugman automatically generates a folder named Adder where the source code for the Custom Plugin is written:

Go to the Adder folder and add support for the Android platform: plugman Platform add — platform_name Android

This command automatically generates the subfolder SRC/Android and the plug-in implementation file adder.java. Now you’re ready to start writing Java code.

Use Java to implement the addition operation of two integers. The operands are passed in through the JavaScript code of the Web application through the parameter args, and the calculation result is returned to the calling end through the CallbackContext CallbackContext.

After the Custom Plugin is developed, create a package.json file for it:

plugman createpackagejson ./

Automatically generate a package.json file.

Finally, use the command line to develop a good Custom Plugin and install it into the hybrid mobile application.

Cordova plugin add Adder.

If all is well, you will see BUILD SUCCESSFUL, which means that the plug-in can be consumed by the JavaScript code of the Web application.

In mobile hybrid applications folder/platforms/android/assets/WWW/js index. The js file, use the following JavaScript code consumption Custom Plugin:

The action name performAdd passed in the JavaScript calling code must be the same as the action name received in the Custom Plugin implementation Java code. The results of the Custom Plugin are returned to the JavaScript caller via the SUCCESS callback function in the code above.

In the above code, I pass 10 and 20 as addends in the JavaScript code and pass them to the Custom Plugin. Running the hybrid mobile application on the mobile phone, I get the calculation result of the adder 30.

The introduction of Cordova’s hybrid mobile technology enables enterprises to deliver cross-platform hybrid mobile apps with the same user experience as native mobile apps by maintaining a code base of Web apps instead of having to build teams with the skills to develop native mobile apps for iOS and Android. This reduces application development and maintenance costs.

Mobile applications of SAP CRM and SAP Cloud for Customer are developed based on the technical solutions of UI5 + Cordova described in this paper.

Mobile application development based on SAP BTP platform Mobile Service

With the advent of cloud era, SAP also launched its own cloud native application development Platform: SAP Business Technology Platform (HEREINAFTER referred to as SAP BTP).

SAP BTP integrates intelligent enterprise applications with database and data management, analytics, integration and extension capabilities into one platform for both cloud and hybrid environments, including hundreds of pre-built integrations for SAP and third-party applications.

SAP BTP Service Marketplace offers a variety of out-of-the-box services, one of which is Mobile Service, which is based on NativeScript, an open source framework for building native Mobile applications using JavaScript:

The Hybrid mobile application developed based on Cordova described in this article is essentially a Web application running in the Webview control of mobile platform, which is also the origin of the name “Hybrid”.

React Native, another popular framework in the industry, builds a truly Native mobile application that uses the same basic UI components as Native mobile applications written in Object C or Java, except that the UI components in React Native applications It is manipulated by Web developers using the JavaScript language and React, and then converted into native components by the compiler.

SAP BTP Mobile Service is based on the NativeScript framework, which works differently from React-Native. React Native uses the Bridge concept to enable two-way interaction between JavaScript and mobile OS Native apis, while JavaScript code written in NativeScript, It is executed in an environment called the NativeScript Runtime, which is responsible for JavaScript code interacting with the mobile platform’s native apis. The NativeScript Runtime is essentially a JavaScript virtual machine implemented by Google V8 on Android and WebKit JavaScriptCore on iOS.

Log in to the SAP BTP console, find Mobile Services in the Service Marketplace, and click Support to enter the Service console:

Create a new application:

Maintain the ID and Name fields of the application:

Assign Features to the mobile application:

These Features can be understood as SAP’s best practices for abstracting the most basic set of Features that enterprise-level mobile applications need to meet. After allocating Features based on the actual needs of the project, the mobile application engineering project we generate with WebIDE will automatically include the corresponding template implementation.

One Feature, Mobile Sample OData ESPM, acts like a Mock Server in UI5 development, enabling Mobile applications to develop without the need to connect to remote OData service implementations. ESPM is short for Enterprise Sales Procurement Model and contains a collection of business data such as SalesOrder, Customers, and Products.

After assigning the required Features to the Mobile application, open SAP WebIDE and enable Mobile Service Development Tools:

When successfully enabled, the MDK Development TAB will appear on the left side of SAP WebIDE:

Create a new MDK project:

In the Application ID drop-down menu, select the Application ID com.sap.jery. demo that was created in the Mobile Service console and assigned Features:

The project automatically generated by the Mobile Service Development Tools extension is shown below, where the Application. App plays a similar role to the manifest.xml configuration file in the Android native Development project:

How to deploy the mobile application project from WebIDE to Android devices? Right-click on the menu and select MDK Deploy and Activate:

The WebIDE control panel prints a successful deployment message:

After successful deployment through WebIDE, a QR code is generated. If the SAP Mobile Services Client is installed on the Android device, scan the QR code and the newly deployed application will be automatically displayed on the Android device.

The MDK project created in SAP WebIDE actually generates metadata in JSON format. After the SAP Mobile Services Client on an Android Mobile device connects to the SAP BTP Mobile Service, the former receives the metadata from the Mobile Services. Draw the UI of the Android native application and complete the initialization action.

After the author installed SAP Mobile Services Client on his Android phone, he scanned the QR code and a login prompt window popped up. Enter SAP BTP username and password to log in:

Then click the Get Started button:

SAP Mobile Services Client connects to SAP BTP Mobile Service, downloads the application metadata in JSON format generated in WebIDE, and initializes the application.

Finally, the Android phone successfully displays the local test data contained in the Mobile Sample OData ESPM selected when allocating Features in WebIDE. The result is as follows:

conclusion

This paper shares three different ideas and technologies of mobile application development that the author has used in the development work of SAP Chengdu Research Institute.

If your company is also developing mobile apps for enterprise users, and has a strong team of native mobile developers who can afford to maintain two different codelines for iOS and Android, you can definitely go native mobile.

If your mobile application needs do not rely heavily on native MOBILE OPERATING system apis, you want to take advantage of the Web development skills of your development team, or you do not want to maintain separate codelines for different mobile platforms, you can choose a hybrid mobile application route based on Cordova.

If the enterprise is already using SAP BTP to integrate with other SAP applications and is willing to directly reuse the many Mobile Features provided by SAP BTP Mobile Services out of the box, Consider SAP BTP Mobile Services for Mobile application development.

For more of Jerry’s original articles, see “Wang Zixi “: