Creating SAP based Mobile Apps (Using Hybrid and MDK Tools)
Hi everyone, in this blog, I am going to discuss the various ways through which we can develop mobile apps that are based on SAP. By making use of the SAP Cloud platform cockpit, its services and destinations, we can even integrate our OData services and perform CRUD operations through these mobile apps.
– Hybrid & Native approaches to Mobile app development
– Offline & Online Apps
– Signing Profile
– Hybrid Mobile App Development
– Fiori Client
– Hybrid App Toolkit (Usage of Cordova Plugins)
– Native Mobile App Development
– Mobile Development Kit (MDK) and SAP Mobile Services
Hybrid & Native approaches to Mobile app development
There are basically two paradigms in mobile app development using SAP, namely the Hybrid and the Native paradigm.
Hybrid apps are usually easier and faster to develop than native apps. They also need less support and maintenance. On the contrary, the speed of your hybrid app will depend completely on the speed of the end user’s browser. This means that the hybrid apps will almost never run as fast as a native app.
Native apps are very fast and responsive because they are built for that specific platform (Android/IOS) and are compiled using the platform’s core programming languages and APIs. As a result, the app generated, is much more efficient than the hybrid apps. The device stores the app allowing the app’s software to leverage the device’s processing speed. These apps can also directly access the hardware of the device such as the GPS, camera, microphone, etc. So they are much faster than hybrid apps in execution, which ultimately results in better user experience. Push notifications are another huge advantage in native apps.
In the SAP domain, an SAPUI5 or FIORI app can directly be converted (built) into a mobile app from the WebIDE. This is an example of Hybrid app development in SAP. But, to use native technology for our mobile app development, SAP has provided a new set of tools called as MDK (Mobile Development Kit), which is based on the FIORI guidelines, and provides a user friendly UX. It also has a drag and drop interface which can be used for app development. We will look in detail at these paradigms, in this blog.
Hybrid approach is becoming obsolete for our SAP mobile apps development. Due to the reasons mentioned above, SAP is moving more towards development of mobile apps using the MDK tool. It is easier to develop and use.
On Android, application signing or the signing profile is the first step to placing an application in its Application Sandbox. It internally generates a signed application certificate. The signed application certificate defines which user ID is associated with which application.The account administrator, app catalog administrator, and app publisher can create signing profiles for the apps in SAP.
Offline & Online Apps
Mobile apps can operate both at online and offline modes based on their functionality.
Online mobile apps require WiFi or internet connectivity to run the application whereas offline apps can run in the absence of internet connection to their devices. Online mobile apps might require some add-ons or extensions if applicable but any failure in network activity might affect the performance of the application. Some popular examples of online mobile apps are mobile banking apps, games, email clients etc.
Offline mobile apps are best when mobile users have limited accessibility to WiFi or network connectivity i.e. the reference data to run the app is stored locally on the device. This means that, the functionality within the mobile app is available even when there is no connection to the back-end application. However, it may require download of all reference data during initialization and then later connects with the back-end to synchronize the updates.
Hybrid Mobile App Development in SAP
Fiori Client – Launchpad Method
Hybrid Application Toolkit Method (Usage of Cordova plugins)
In this method, we create a mobile app from a existing SAPUI5 web application. This method can work for both custom UI5 apps and Fiori elements. So, the first step here would be to create a UI5/Fiori app and connect it to a OData service. We have used a CDS based service for this example.
This is our data (in CDS data preview):
This is the UI application (running from Fiori Launchpad) – Make sure that the app is running without any errors and also run the app by specifying the version in the run configurations in the WebIDE as this can cause a issue during the creation of a signing profile:
This is the project structure of the application in WebIDE:
Now, before we start building a mobile app from this Fiori app, we need to make sure of two things:
- Roles & authorization: Make sure that the appropriate roles are assigned to the user. The user must be authorized to create and build the mobile apps in addition to creating a signing profile. Roles can be assigned in the roles tab in the authorization section at the Cloud platform.
- Plugin – Make sure the Hybrid Application Toolkit (HAT) plugin is enabled in WebIDE. It can be enabled in the settings section:
After performing the above steps, follow the below steps to create a hybrid mobile app from the existing Fiori app:
Right click on the project directory and hover on Mobile, then click on Enable as Hybrid Mobile Project.
The use of this step is that now, our project can be built into a mobile app. This is achieved by using the Hybrid Application Toolkit.
In the next step, now that we have enabled our project to be used as a mobile app, we can make use of Cordova plugins to supplement extra functionalities in our app. We have two other options i.e. Build packaged app & Build developer companion.
The developer companion apps are basically online apps. They do not possess the Kapsel offline plugin. Hence, these apps cannot be used to test online scenarios. These apps just pull the web application into the web view container of the mobile from an external source.
In this example, we are going to use the build packaged app. Once we click on the menu for the packaged app:
Fill in the app info details and click on next.
In the next screen, select the environment (IOS/Android), select a signing profile and enter the min OS version. If no signing profile is available, create one by clicking on the dropdown button:
In the next screen click on build:
It will take some time depending upon your internet connection to build your project. Once the build is complete, you will get the below popup:
Here we have two sections, one is the QR Code section and the other a link. So, we can either directly download the app’s apk file, and install in our android system, to get the output. Or, we could scan the QR Code with a barcode scanner app in the phone and install it in android.
Once download is complete, install and open it in the android system (Could be a android emulator or a physical android device).
Output on a nox player (Emulator for Android in windows)
Detail page of the app.
We can see the app icon that we had configured. It can be changed again in further builds.
NATIVE MOBILE APP DEVELOPMENT IN SAP
Mobile Development Kit (MDK) & SAP Mobile Services
The SAP Mobile Development Kit (MDK), which is integrated in the SAP Cloud Platform mobile services, offers a comprehensive set of documentation and tools to develop applications for SAP MI and, it can also be used to develop applications against the OData/SAP backend.
The MDK offers a nicely integrated and a comprehensive set of documentation and tools to quickly allow the following features:
- Understand the development concept for SAP MI-based applications.
- Program SAP MI example programs.
- Develop, start, and test your custom programs.
Let us look in detail about the architecture and the libraries of a MDK application by creating a sample app.
Before we dive further into creating a mobile app, make sure, that you have created a new application in the SAP Mobile Services. To do that, follow the below steps:
Go to your Cloud Platform account, under services section, search for mobile. Under the extension suite section, select the highlighted mobile service. Go into the service and enable it.
Also, go to the links for configuring the mobile services and the cockpit. It is just the addition of the relevant roles and authorizations that are necessary to develop and test MDK apps.
Now click on go to service and in the next screen click on the Native/Hybrid section, here we can get the list of all the existing apps and also create a new app. Click on the new button on the detail page header section.
In the new app popup, select the native option, enter a app id (similar to resource roots in our SAPUI5/FIORI app e.g.: com.sap.new.mobileapp.test1), then enter the app name, description, and click save.
A short note here, in the SAP Neo environment, if you don’t select Mobile Development Kit as the application type you will run into problems when deploying from WebIDE.
In the next screen, there are many options. Let us take a brief look at each one of them here:
The header buttons:
Delete – As the name suggests, it will delete the created mobile app service.
Export – This can be used to download this app instance, which can be later uploaded with the same configurations.
Lock – It is used to provide locking mechanism for the mobile app service instance.
Publish to discovery service – It publishes the mobile application configurations to the SAP Discovery service. SAP has delivered the SAP Discovery Service cloud solution, which allows you to publish app connection settings for end users on your email domain/sub-domains, using just their email address. SAP Discovery Service is integrated with HCPms and SAP Mobile Secure services.
The sub sections:
Info – It has two subsections, the Application details, provides the brief details of our mobile app.
Assigned features – It is a very important section, as it can be used to provide multiple features in our app such as OData connectivity, Destinations configuration, password/passcode protection to our app, policies configuration, etc. New features can be added and customized by clicking on the add button.
APIs – It can be used to add custom application interfaces to our app.
Application links – It is a feature by Apple. Universal Links allow your users to intelligently follow links to content inside your app.
User registrations – As the name suggests, the application users can be handled from this section. Users can be added, removed and the user details can be modified here.
Usage Analytics – It gives a dashboard kind of view of the app’s usage statistics. Graphs and tables based on the user’s registrations, device registrations, requests & response (for both online and offline), threshold hit count, outbound traffic and any requests of the previous versions can be viewed from here. The timeline can be customized as per requirement. Also the data can be downloaded.
For more updated information about the same, visit the SAP cloud platform mobile SDK.
Back to our MDK app development, we need to set up our OData service connectivity to proceed further. We shall be using the same service as in the last example above. To set up OData connectivity, click on the connectivity feature.
Initially we do not have any connectivity instances for our app. To add an connectivity instance, we have two methods. We can either select one of the destinations and add it here, or create a destination specific to our app. For the first option, click on the second button.
Configuring of Destinations in MDK:
There are three types of destinations that are supported by MDK:
- Cloud Platform Destination: The destinations that are available at our cloud platform cockpit can directly be used here in MDK. The SCP destination needs a property called “MobileEnabled” that is set to true to be accessed here.
- Mobile Destination: These are custom destinations which could point to any web services such as Google Map API, Amazon AWS services, MS Azure services, etc.
- Fiori Destination: These are services reserved for the Fiori apps and launchpad. It also takes annotation files as parameters.
Once the destination is configured, we can go to our WebIDE and select the below option:
This is a kind of like our workspace, which can be used for Mobile app development specifically with the MDK. For this example, we shall try to create a CRUD MDK app, based on the OData service that we have created above.
So, right click on the workspace, select new, and click on MDK Crud project. One thing to remember here is that, if you don’t have a OData connectivity configured in the mobile services section, it is not possible to create any project other than the MDK empty project.
In the application creation wizard, give the application name and the project name, give the service credentials, select the entity sets for the crud operation and confirm, to create the application.
Once created, the project structure should look similar to this:
Now, let us take a brief look into the project architecture:
Our application starts with the Application.app file. It contains details about the launch actions, contact point of the app, initial page that is to be displayed, etc.
We have pages here, which are used as presentation layer. The controls are defined in the sap.mde library. The Mobile Data Entry library is a new feature created by SAP. It is a library containing controls which follow the FIORI guidelines and can be used for our native mobile applications.
For the behavior definition, or the controller layer, we have the actions folder. A new action can be created for any custom event that happens in the pages (such as a button click or table item press).
The services folder contains our service path and destinations.
Similarly there are other folders which allow the developer to customize the mobile app such as styles, images, extension and i18n (for localization of static texts within the app).
All these can be done without even writing a single line of code.
In our case, as we are creating a crud app, we can directly deploy it to the mobile app service that we had created before. To do this, right click on the app folder in the workspace:
Here, select the option metadata validate to check for errors in the MDK app metadata. It can show if there are any errors in the app. Then, click on deploy and activate option, which will deploy the app to the Mobile Service instance created in the last step and activate the app.
On clicking the option, select the upload bundle to mobile services checkbox, as it will be easier to build the app later on. Then click next.
In the next screen, select the app id. Give the app id of the mobile service that we had created before.
Then click on next to deploy the mobile app.
Once the app is deployed, to run the app, we have two ways:
- Run using the “Mobile Svcs” app:
Go to the play store in Android or IOS, download &install the app Mobile Svcs. After installation, right click on the application in WebIDE and select show QR Code. It would show the QR Code of the app. Scan it from the mobile app, authenticate the by entering the cloud platform credentials, and the app will run on your phone.
- Download the APK of the app:
As we have deployed the app to the mobile service that we had created, we can go there and build the app. To achieve this, first go to the created mobile service, and select cloud build from the features:
Then, click on the edit button (pencil icon).
In the popup, enter the necessary details. Most of them will be auto populated. Make any changes if necessary. Then click on next, there select the app’s launch icon (Custom icons can also be uploaded), then select the signing profile. Then click finish.
Then click on build button. The build process takes some time (usually 20-40 mins), depending on the server speed. Once it is done, click on the install button, to download the apk. This apk can be installed and run in any android system (phone or emulator).
Similar process can be followed for IOS systems as well. The output as viewed from mobile
The Detail page:
Here, as we have seen from the process above that, without writing even a single line of code, we can create a SAP based CRUD app for our mobiles.
Developers might face difficulties in fetching and using the SCP destinations for the MDK apps. The workaround for this scenario is, open the network tab in the developer tools for chrome. Now try to fetch your services for a UI5 app, and check the network call to the backend which fetches the services through the destinations. Copy this call and paste it for your MDK destination. By this way the MDK can be connected to the SCP destinations.
Additionally, MDK is a very robust tool still at its early stages of development and usage. The functionalities keep on changing from time. For updated information please visit the SAP documentations provided in the references section below.
Complete SAP Mobile Development Kit documentation (With tutorials and client user guide) – https://help.sap.com/viewer/p/MDK
Native app development – https://blogs.sap.com/2017/09/26/rapidly-build-rich-native-mobile-apps-without-writing-any-code/
MDK basic – https://blogs.sap.com/2017/05/24/sap-enterprise-app-modeler/
SAP Discovery service – https://blogs.sap.com/2016/03/03/setting-up-sap-discovery-service-rest-api/
MDK app development documentation –
MDK offline app development – https://developers.sap.com/tutorials/cp-mobile-dev-kit-offline-app.html
MDK online app development – https://developers.sap.com/tutorials/cp-mobile-dev-kit-online-app.html
Kindly ask any doubts/question in comments.
Very nice blog. Details about all kind of processes. Its very informative.
This is a very detailed blog which help me have an overview about hybrid and native mobile applications and the SAP way of development.
I am using mdk to develop an app, which need to call the front camera. Do you know how to realize this? I go through the help doc and api document of MDK and no results. Thanks if you can provide any clues.
Same problem. Any solution?
hi Arjun Biswas / Jitendra Kansal ,
As we all know SAP fiori client will no longer be available in App stores.
Is it possible that we can build this SAP fiori client as Hybird app and Publish it for mobiles??
If yes, will all the app's inside SAP fiori client will be there for mobiles ...In that case can we have a blog for how to do that?