- SAP Managed Tags:
This blog post is the third in a series of posts that cover the connectivity options available for SAP Build Apps to interface with SAP systems. The series will cover connecting SAP Build Apps with the following:
- CAP-based services
- S/4HANA systems
- ABAP systems
The format of this post is similar to a tutorial. However, I'll provide more comprehensive details, tips and the opportunity for you to provide feedback. Based on the feedback we will be able to adjust and enhance this post and future parts of the series, and might even be able to improve the products involved as well.
Introduction
Before we get into the details of setting up connections between SAP Build Apps and SAP Systems, I intend to introduce a couple of SAP technology components in each post that are relevant for the use cases covered in the series.
SAP Mobile Services
The use case described in this blog post makes use of SAP Mobile Services to authenticate the mobile apps we will be running on our devices.
SAP Mobile Services is a collection of services on SAP Business Technology Platform that enables mobile application development, configuration and management. It is a cloud-based offering complemented by various development tools such as the native SDKs for iOS and Android, the mobile development kit (MDK) or SAP Mobile Cards. The overall objective is to deliver reusable services, which can be leveraged in mobile app development projects. We have recently added integration with SAP Mobile Services in SAP Build Apps.
In the context of SAP Build Apps in this blog post, we will be using the server features related to security: enterprise authentication and enterprise app management. SAP Mobile Services authenticates your mobile users with Cloud Identity Services and provides access to integrations and SAP BTP services within your mobile applications. For the mobile apps, SAP Build Apps will use some portions of the SAP SDKs that allow for easy authentication through SAP Mobile Services.
Build service
SAP Build Apps offers a build service that allows you to build your web application and mobile applications for iOS and Android in the cloud, without the need to install the required tools on your local machine. After building your web application, you can deploy the app to SAP Business Technology Platform. For the mobile apps, you can download the IPA (iOS) and APK (Android) file and install the app on your mobile device(s).
As you might be aware, Apple has restricted the building of iOS apps to Apple hardware. With the SAP Build Apps build service, non-Apple hardware users can still build iOS apps, provided these users have access to specific files required for signing the apps.
Note: although SAP Mobile Services offers a reuse service for "Cloud Build Service for CI" as shown in the diagram above, SAP Build Apps does not make use of this and offers a separate Build service, dedicated for building SAP Build Apps client apps.
Use case C : Consume the CAP service in a mobile app on the iOS and Android platforms
For this use case, we will make use of the previously created basic CAP service in SAP Build Code. We will be creating dedicated mobile apps for the iOS and Android platforms to consume this service. In the first post in this series, I've already highlighted that you can preview your app on a mobile device using the SAP Build Apps client app that is available for download in the public app stores for iOS and Android. But you can't use this to publish your own apps. We offer you a way to build your own apps in the cloud. There is no need to install tooling on your own machines to accomplish this.
Solution diagram
Let's first take a quick look at what we need to change in our solution overview to accommodate for mobile apps. Building upon the solution diagram created in the previous blog post, we now add SAP Mobile Services. The design time environment of SAP Build Apps will register the application with SAP Mobile Services. End users install our mobile app on their device. The mobile app authenticates with the Identity Authentication service (IAS). SAP Mobile Services handles the token exchange with Authorization and Trust Management (XSUAA) and acts as a proxy to provide access to the BTP destination. Only users who have the correct Roles assigned will be able to access the data provided in the CAP-based data service.
Developing the mobile apps
Before we start, as a teaser, let me show you a few screenshots of the iOS app we will be creating. An animated recording is available at the end of this blog post.
Let's get started building this mobile app.
Open SAP Build Apps, and navigate to the Launch tab. Select the "Open build service" button on the Build your app tile.
You will now see three options. In this blog we will focus on the mobile apps. We'll take a look at the web app option in one of the next posts.
Building the Android app
The easiest mobile build is for Android. Select Configure under Android Mobile/Tablet.
Android keystore
Your first task is to create and upload an Android keystore. The Android platform requires that all APKs (Android application package) are digitally signed with a certificate before they are installed on a device or updated.
To create a new keystore, you'll need a CLI tool called keytool, which is part of the Java Development Kit (JDK). Instead of downloading this JDK from our competitor and agreeing to all kinds of legal fine print, you could also download this from the SAP Development Tools site (look for the SAP JVM package for your machine). However, this package is rather large. If you don't want to install anything on your local machine, we have an even better option: your Dev Space in SAP Build Code ! This Dev Space contains various developer tools out-of-the-box, and a key feature is that you can actually run them directly in this cloud environment. Simply go back to SAP Build Code (or SAP Business Application Studio) and open the terminal.
Generate the keystore from the Command Line, using the following (adapt file name and alias to your own preferences):
keytool -genkey -v -keystore blogdemoapp.keystore.jks -alias blogdemoapp -keyalg RSA -keysize 2048 -validity 10000
Answer the questions asked by the keytool and note the password, which we need to provide later on in the SAP Build Apps build configuration UI.
Once completed, you will have a keystore file stored in your Dev Space. Navigate to the (File) Explorer, find the keystore file and right-click on it. Select Download, to store the file on your local machine.
Going back to SAP Build Apps, upload the keystore file and provide the password. Provide another password for the keystore alias. Select NEXT.
Android application bundle
In the Bundle Settings, select APK for the build scheme. Provide a package identifier in the form of a reverse domain name. Provide a display name for the app, which will be visible on your device's home screen. Select NEXT.
Image Assets
In the Image Assets tab, we can optionally upload images for the application icon, the splash screen and notification icon. This allows you to apply your personal or company's branding to the app. The application icon will be visible on your device's home page. When opening up the app, users will briefly see a splash screen, which can be used as introduction or welcome page. This is where we can show the splash screen image.
For the icon image, I've actually used a Generative AI service (in my case Microsoft Copilot). Feel free to get creative yourself, or use some other image generation service. The images have to be in PNG format and provided in various sizes to support all the various device form factors and display resolutions available in the market. There are various online tools available to help you create these images from a source image. Search for "icon splash android generator" to find one that suits your needs.
Recommendation: keep your images as small as possible. The splash screen is a nice to have, but will only be visible to the user for a very short period of time.
After uploading all required images, click NEXT.
Application permissions
On the Permissions tab, you can configure application permissions that your app might require. For our demo, we will skip this and click NEXT.
Mobile Services connection
Last but not least, we have to configure the Mobile Services connection. Your app will be interfacing with a specific instance of SAP Mobile Services, available in your subaccount. We need to provide the endpoint for this particular instance. Otherwise your app will not know where Mobile Services can be found. Click the Enable SAP Mobile Services button and log in.
Select the API endpoint for your subaccount. In case you are not sure which one this is, you can check the Overview page on your subaccount's BTP cockpit. Once the endpoint is selected, you will need to log in.
After a successful log in, you will be able to pick the Organization in the dropdown list, followed by the Space.
Once this is configured, you again click on the Enable SAP Mobile Services button. During this process, SAP Build Apps will register your app with SAP Mobile Services.
Selecting NEXT will bring you back to the Build page.
Build for Android
Now that we are done configuring the Android build, let's request the build service to produce an APK for us. Click the BUILD button. On the next page, select the client runtime version and provide a version code and version name.
Once you click the BUILD button, a request to build an APK for your app will be sent and queued. Builds can take some time. We are in the process of significantly speeding this up.
Once the build is done, you can click the DOWNLOAD button to retrieve the APK file and store it on your local machine.
Installing the app on your device
For installing the APK onto your device, there are various options (and challenges), depending on what device you have and the PC you are using. In general, you'll need to connect your device to your PC and transfer the file over for example a USB connection. To help transfer the file, you can for example use Android File Transfer. Once the APK file is transferred onto the device, open a file explorer app such as My Files. Select the APK file and open with Package Installer. Once this is done, find your app in the applications list.
Note: you might run into various challenges when your device is managed (by your company), security settings that are set tight, or Developer Options are turned off.
Tip: when accessing your device, make sure the screen is unlocked.
Below is a capture of the app running on a Samsung phone. Please refer to the iOS app for a recording in better quality.
Building the iOS app
Compared to the Android build, this task is less easy. This is due to restrictions defined by Apple. The main challenge is in getting the correct certificate and profile to be able to install the app on your device.
Select the CONFIGURE button on the Build page to configure iOS Mobile/Tablet builds.
Certificates
The most tricky part in this process is on the Certificates tab. You need to provide an iOS Distribution Certificate. Take note that an iOS Developer Certificate will NOT work.
More details on how to get a certificate can be found on the Apple Developer site: https://developer.apple.com/help/account/create-certificates/create-enterprise-distribution-certific...
If you don't have an iOS Developer account or you are not part of an iOS Enterprise Developer program, then you could ask a colleague to add you to an existing program, or register your device's UDID and provide you with the certificate and provisioning profile (see next step).
Once done, click NEXT.
Note: certificates have an expiry date. Your app will no longer start once the certificate is expired.
Bundle Settings
There are two build schemes you can choose from: App Store distribution or Ad Hoc distribution. For development and testing purposes as covered in this blog post, we will use the Ad Hoc distribution. The distribution is limited to a specified set of registered devices. The app will refuse to install on other devices.
Provide the Display Name of the app. The name will be visible on your device's Home Screen.
Provide a bundle identifier in the form of a reverse domain name. This is a unique identifier for your application. Take note that the provisioning profile has to include the app's bundle identifier as well.
Next is another challenge that requires you to navigate the Apple Developer site: getting the Ad Hoc provisioning profile. More details are on Apple's Developer site: https://developer.apple.com/help/account/manage-provisioning-profiles/create-an-ad-hoc-provisioning-....
You can skip the URL scheme and lock screen orientation. Select NEXT.
Image Assets
For the app's icon, I am going to use exactly the same image that I've created for Android. For the iOS splash screen I've also used Microsoft's Copilot and enhanced it further with an image editor. For iOS, you'll need different PNG image sizes compared to Android. For the icons you can easily find image converter tools online. For the splash screen I've actually manually resized the original image. When uploading the images, SAP Build Apps will check whether the image is in the correct format and pixel dimensions.
Once done, click NEXT.
Usage strings
We will not change anything here. Click NEXT.
Mobile Services
This will be a repeat of the Android configuration. We now need to configure the connection between the mobile app and SAP Mobile Services. Your app will be interfacing with a specific instance of SAP Mobile Services, available in your subaccount. We need to provide the endpoint for this particular instance. Otherwise your app will not know where Mobile Services can be found. Click the Enable SAP Mobile Services button and log in.
Select the API endpoint for your subaccount. In case you are not sure which API endpoint this is, you can check the Overview page on your subaccount's BTP cockpit (see also the tip provided on screen). Once the endpoint is selected, you will need to log in (if you have not done so already).
After a successful log in, you will be able to pick the Cloud Foundry Organization in the dropdown list, followed by the Space.
Once this is configured, you again click on the Enable SAP Mobile Services button. During this process, SAP Build Apps will register your app with SAP Mobile Services. On the login screen of the app (see screenshot shared at the beginning of this blog post), you will see the identification of the app as it was registered in SAP Mobile Services. In my case: buildApps94767.
Selecting NEXT will bring you back to the Build page.
Build for iOS
Now that we are done configuring the iOS build, let's request the build service to produce an IPA for us. Click the BUILD button. On the next page, select Ad Hoc, the client runtime version and provide a version and short version.
Once you click the BUILD button, a request to build an IPA for your app will be sent and queued. Builds can take some time. We are in the process of significantly speeding this up.
Once the build is done, you can click the DOWNLOAD button to retrieve the IPA file and store it on your local machine.
Installing the app on your device
For installing the IPA onto your device, there are various options, depending on what device you have and the PC you are using. In general, you'll need to connect your device to your PC and transfer the file over a USB connection. On Mac OS, you can use Finder and select your device. You can then drag and drop the IPA file onto the Finder view and the app will automatically be installed. Once this is done, find your app on your device's home screen.
Summary – use case C
In this use case we have created dedicated mobile apps for the iOS and Android platforms. Building the app in the cloud is relatively easy, as you don't need to install any tools on your local development machine. For iOS apps, getting the correct certificate and provisioning profile can be a challenge though.
By customising the app's icons and splash screens, you are able to apply your own branding.
SAP Build Apps registers the application with SAP Mobile Services. Using the mobile app, end users authenticate with IAS. SAP Mobile Services handles the token exchange with XSUAA and acts as a proxy to provide access to the BTP destination. Only users who have the correct Roles assigned will be able to access the data provided in the CAP-based data service.
What's next
In the next blog post, we will deploy the web application to SAP Build Work Zone.
3 Comments
