As mentioned in Jerry’s previous article, there are three ways to deploy SAP Fiori applications:

  • On Premise uses ABAP BSP as the carrier for Fiori application deployment and operation
  • Deploy and run in an On Cloud environment, such as SAP Cloud platform
  • Cordova is packaged as a platform native application and installed on mobile devices

In this post, we’ll focus on the third approach, one of SAP’s mobile solutions: using Cordova to package front-end applications into a mobile platform-specific hybrid mobile application.

In this article, Jerry will give you a general introduction to Cordova. Then, Jerry’s colleague Yang Joey, a member of the Cloud for Customer development team at SAP Chengdu Research Institute, will introduce Cordova to you. SAP Cloud for Customer using THE unique features of SAP UI5) explains how Cordova is applied to SAP C4C mobile applications.

In addition to Cordova, there are many other mobile development frameworks, such as Facebook’s React Native. Although IT is not used in SAP’s standard products as far as I know, I learned from my colleague Yufei Peng, who has the title “Product Manager, developer and architect all in one”. React Native is also used in many of SAP’s custom development projects. There are also frameworks like Weex, Angular Mobile UI, etc., which Jerry has never used and are not covered in this article.

In the traditional way of mobile development, iOS and Android developers need to learn the programming language and programming environment related to the mobile platform. It is completely impossible for code developed on platform A to be directly applied to platform B. SAP, for example, launched an ios-based native mobile app called SAP Customer Briefing. In 2011, Jerry’s team was asked to port the app to Android. Jerry and three other members of the development team chewed through the source code for the iOS version of Object C to understand the logic of the application, while rewriting it entirely in Java. It took seven months to complete the port.

On the other hand, a Web developer with no knowledge of mobile application development can build a mobile application that can be installed directly on a mobile device with the help of Cordova. The user experience is almost indistinguishable from that of apps developed with native programming tools (such as XCode and Android Studio) and programming languages. For the sake of differentiation, we sometimes refer to a mobile App generated from Cordova plus a Web App as a Hybrid App.

What’s the magic of Cordova?

One of the best ways to learn Cordova is through its website, which has detailed documentation from the beginning to the end.

Cordova.apache.org/docs/en/lat…

Cordova is an open source mobile development framework that allows developers to develop cross-platform mobile applications using standard Web technologies such as HTML5,CSS3, and JavaScript. Cross-platform is similar to Java’s “build once, execute everywhere”. We only need to focus on front-end application development, and then use the build tool provided by Cordova to package the developed front-end application into a hybrid application that can be installed on the mobile platform.

The following diagram shows the architecture of Cordova. The orange Cordova Application is a hybrid Application packaged with the Cordova tool. At runtime, the front-end resources in the hybrid application are loaded, rendered, and run in an embedded WebView control. This embedded WebView uses Plugins provided by the Cordova framework to access core mobile operating system functions such as cameras, storage, and other system calls. If the existing Cordova plugin does not support some of the mobile OPERATING system apis you need to use in your hybrid application, you have another option: Develop your own Cordova plug-in directly on a mobile development platform (Custom Plugins in blue below), which calls the mobile operating system API and then exposes it to your front-end application consumption through a JavaScript interface.

The SAP Cloud for Customer and SAP Mobile Platform solutions include a number of Cordova plug-ins developed by SAP. C4C Cordova Plugins will be introduced by Joey below, while SMP Cordova Plugins are called Kapsel Plugins by SAP:

Help.sap.com/saphelp_smp…

Back in Fiori development, Jerry was curious about how the OData Offline plugin in Kapsel worked. Since I am a die-hard Android phone fan, I have carefully studied the source code and working principle of Offline plug-in on Android platform:

  • How is OData request routed to Offline data store by Odata offline plugin
  • Blogs.sap.com/2016/08/04/…
  • How is JavaScript code in OData offline plugin delegated to native Java code in Android
  • Blogs.sap.com/2016/08/04/…
  • How is OData offline store opened in Android platform
  • Blogs.sap.com/2016/08/05/…

Talk is cheap, show me the code. Now let’s take a look at how to package a Fiori application into a hybrid application using Cordova. The hybrid app ended up running on my Samsung phone like this:

NPM -g install Cordova Install cordova.

Cordova create Create a cordova project.

This command line has helped us automatically generate many of the resource files that will be needed later to package into a hybrid application.

Suppose I want to build a hybrid application based on the Android platform, then add support for the Android platform using the command line:

cordova platform add android

Now, in the Platforms folder of the Cordova project, there will be an Android folder that contains the necessary resources for a hybrid application running on the Android platform.

Copy the entire Fiori application project into the WWW directory under the Cordova project folder. Execute command line cordova, prepare the WWW directory of all resources used Fiori platformsandroidassetswww the following files are automatically copied to the folder.

Finally, run the cordova compile command to generate apK files that can be installed on Android devices.

That’s the whole process. To summarize, the Fiori application can be packaged into a hybrid application running on Android in just four command lines, which demonstrates Cordova’s ability to reduce mobile development costs and increase cross-platform development efficiency.

  • cordova create
  • cordova platform add android
  • cordova prepare
  • cordova compile

If you want to develop a new Cordova plugin for a mobile platform, the steps are simple.

I implemented an adder in Java that mimics the API provided by the Android platform, and exposed it to the front-end application in JavaScript.

Create a plugin named Adder with id jerry. Adder:

Plugman create-name adder-plugin_id jerry. Adder-plugin_version 1.0.0

Once created, a folder of the same name will be generated:

Use the command line to declare that the plugin is for the Android platform:

Plugman Platform add — platform_name Android

This command automatically generates an adder.java. The next step is Java programming. The two operands passed in by the JavaScript side are obtained with the input parameter args, and the addition is performed on the Java side. The result is then passed back to the JavaScript side via CallbackContext, which gets the result of the addition calculation on the Java side through a callback function.

After Java development is complete, add the plug-in to the hybrid application with the following command line and compile cordova to get the latest APK containing the custom plug-in.

cordova plugin add Adder

In the front-end JavaScript code, Cordova provides an interface, cordova. exec, to consume the plug-in, as shown in line 15 below. The two operands for addition, 10 and 20, are passed in through an array.

The addition is performed on the Java side and returned to the front end via a callback function, printed with alert on line 11:

See my blog for detailed steps:

Blogs.sap.com/2017/08/18/…

The Android plugin can be debugged, of course, using Android Studio. For detailed environment configuration and debugging methods, refer to my blog:

Blogs.sap.com/2017/08/18/…

SAP Cloud for Customer Mobility solution based on Cordova – Yang Joey

Hi, I’m Joey. SAP Cloud for Customer mobility solution, which we call Aurora internally. Aurora is the Norse goddess of dawn and dawn, as mentioned in Angela Chang’s album Aurora.

Interestingly, the SAP C4C US development team, with a programmer’s sense of humor, included Aurora in the startup script of our C4C local development environment, so that every C4C developer gets to see her every day. Kudos to these thoughtful colleagues!

When I joined the C4C development team at SAP Chengdu Research Institute in the summer of 2017, I was very curious about how the Javascript code I wrote every day at work would run on mobile devices. So, using Android as an example, I unpacked SAP apps for the Android market and looked at them.

I changed the apK file I downloaded from the Android Market to ZIP and unzipped it. You get the following folder, which is a classic Android app APK package structure:

As Jerry has mentioned before, the C4C project files are packaged into an Android hybrid application using Cordova. After the client installs APK on the Android device, the hybrid application actually runs in the WebView of the Android platform.

The JavaScript and HTML files loaded in the WebView come from the APK file constructed from the compile command line of Cordova. At runtime, these resource files are loaded into the WebView through an embedded Web server in apK.

Of course, C4C business data that need to be displayed in C4C mobile applications, such as opening the Account work center in THE C4C application on the mobile phone, all the Account data seen are from the corresponding C4C background system. These data reading requests are sent to the C4C background ABAP system through the embedded Web server inside APK.

Open the subfolder assets/ WWW under the decompressed apK folder and see the following file structure:

The most eye-catching of these are several ZIP packages:

  • cod.zip
  • oberon.zip
  • oberon.ui5.zip

These zip files are the complete code for the entire C4C front-end implementation, including JavaScript code and CSS stylesheet files. We can open oberon.zip to see what’s inside.

On the left is the loaded JavaScript file observed in the Sources TAB of Chrome Developer Tools after logging into a C4C system, and on the right is the oberon.zip contained in the apK file of the hybrid application.

Those of you who have done the Fiori app will remember that the portal to the Fiori app, if configured to be accessed as a Tile on the Fiori Launchpad, is component.js, otherwise as a standalone app, The entry point is a web page containing sap-UI-core. js, usually index.html.

The entry to the C4C application is the latter. Let’s look at the contents of index.html:

You can see that index.html loads two JS files and runs the app.initialize() method, which is defined in the loaded second js file js/index.js, The initialize method loads the SAP UI standard library, theme library, language, etc. : line 27 sap-ui-core.js is our old friend.

LoadOberon and oberon.zip. What does Oberon mean? SAP C4C UI framework contains XML views developed using UI Designer, XRepository for storing these views behind the scenes, JavaScript code for rendering these views, and so on. The whole framework was also introduced in my previous article “SAP Cloud for Customer using SAP UI5”.

Jerry explained how to develop a new Cordova plug-in using the Java adder as an example. Jerry also mentioned a collection of Cordova plugins developed for the SAP Mobile Platform called Kapsel. SAP C4C Cordova plugins can also be found in the apK folder of C4C.

These folders contain JavaScript interfaces corresponding to C4C’s Cordova plugin on the Android platform. C4C Mobile uses these JavaScript interfaces to consume Cordova plug-ins developed in Java.

To open a folder com. SAP. Byd. Cod. BusinessCardScanner JavaScript files, from below line 13 can see, with Jerry before in his testing front-end application consumption since the development of Java adder plugin, The third argument is BusinessCardScanner, which is the name of the Java class implemented by the Cordova framework. Scan is a public method name of the Java class. Business logic for implementing the plug-in.

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: