SAP Mobile Cards: Build Mobile card kit clients using the cloud build service

Updated: For latest information, please visit SAP Mobile cards documentation. 

 

Updated: With the release of SAP Cloud Platform Mobile Services 1810, you can now also include the iMessage and Today extensions for Mobile cards custom client using Cloud Build Service.

---

With the release of SAP Cloud Platform Mobile Services 1806, you can now also create a custom Mobile card kit client using Cloud Build Service for iOS & Android devices. Cloud Build service already supports configuring and building custom Fiori Client, Mobile Development Kit Clients and SAP Asset Manager.

In this blog post, you will learn how to build a Mobile card kit client using cloud build service with adding a new app icon, app name etc. like below.

left side image/icon is from standard SAP Mobile Cards app , right one is custom.

Let’s get started,

For Android client, start from step #7

For iOS Client, follow all steps

• Step 1 : Obtain a certificate signing request
• Step 2 : Create a new development certificate
• Step 3 : Register an App Group
• Step 4 : Create an iOS App ID
• Step 5 : Register your device
• Step 6 : Create a development provisioning profile
• Step 7 : Configuration in SAP Cloud Platform Mobile Services Cockpit – Creating a signing Profile
• Step 8: Start Cloud Build Service

Note: below steps are sort of a walkthrough choosing minimal steps in order to show how to build a custom client, you are free to choose various other ways/options for the same outcome.

Before we proceed, go to the Apple Developer website and make sure that you are enrolled in the Apple Developer Program, either individually or as a member of a development team.

Step 1 : Obtain a certificate signing request

Open KeyChain Access app on your local MacBook , navigate to Keychain Access Menu > Certificate Assistant > Request a Certificate From a Certificate Authority…

Fill out the information in the Certificate Information window as specified below and click “Continue.”

• In the User Email Address field, enter the email address to identify with this certificate
• In the Common Name field, enter your name
•  In the Request group, click the “Saved to disk” option
• Click on Continue and Save it .

Step 2 : Create a new development certificate

•  open https://developer.apple.com/account/  > Certificates, IDs & Profiles
• Create a new iOS Certificate (Development) and download it locally.

Note: downloaded certificate is with .cer extension , for creating a Signing Profile in Mobile Services “Signing certificate file extension should be p12 or pfx“

• Double click on downloaded certificate, this certificate will be added to KeyChain Access app, right click on it. Select “Export….”

If you don’t find certificate you double clicked on , go to “My Certificates” under category and look over there.

 

• You will be required to enter a password which will be used to protect this certificate, once done, you will have certificate file with .p12 extension. (note down this password somewhere or remember it , as this will be used later while creating a signing profile in Mobile Services Cockpit) 

Step 3 : Register an App Group

• Navigate to “App Groups” under “Identifiers”, click on ‘+’ icon.
• Enter App Group name
• For ID: “group.” is default added as soon as you starting type ID (you have to enter only ID like com.test.jk)

 

 

• Click “Continue” and “Register“

Step 4 : Create below iOS App IDs

1. for main app – com.test.jk (could be any name of your choice)
2. for iMessage extension – com.test.jk.messageextension (should be followed as main app id.messageextension)
3. for Todays extension – com.test.jk.todayextension (should be followed as main app id.todayextension)

• Bundle ID: Should be same as mention in App Group i.e. com.test.jk

Note: Apple recommends (or requires) that the App Group and the Bundle ID match, with “group.” added to the beginning of the Bundle ID to form the App Group.

 

 

• Under App Services, select  App Groups as shown below:

 

 

• Click Continue and Register

repeat the same for below App IDs , make sure you have enabled “App Groups” service while creating these

com.test.jk.messageextension

 com.test.jk.todayextension

• Wait, we haven’t assigned which App Group these app IDs should linked to. So, go to list of App Ids (left side) and look for the IDs you just created in previous step . Select it and click on Edit and then again click on Edit as mentioned in below screenshot. Select App Group , continue and Assign.

You have successfully updated the App Groups associations with all 3 App IDs.

Step 5 : Register your device

• UDID: Device’s unique identification (Connect your iphone to your Mac, open Xcode , look into “Device & Simulators” option under “Window” menu

 

Step 6 : Create development provisioning profile

You need to create 3 different development provisioning profiles for all 3 App IDs created in step#4 . Let’s go one by one.

• Click on “Development” available under “Provisioning Profiles” section
• Click on ‘+’ icon
• Select “iOS App Development” under Development, click on Continue
• Select App ID created in step#4, click on Continue 
• Select Certificates , you can find this certificate with name (Common Name) you provided in step#1, click on Continue
• Select devices added in step#5
• Add a valid name to your provisioning profile, click on Continue and then Download it

repeat same steps for other 2 App IDs. In the end, you should have something similar to below screenshot

Note: Max char length for a provisioning profile file name shouldn’t exceed 50 char (including it’s type e.g. JKMobileCardsiMessagExtProvProfile.mobileprovision) 

Step 7 : Configuration in SAP Cloud Platform Mobile Services Cockpit – Creating a signing Profile

• Login to Mobile services cockpit page e.g. trial account – https://hcpmsadmin-xxxxxxtrial.dispatcher.hanatrial.ondemand.com/
• Expand “Settings” > click on “Signing Profiles“

• Click on “Upload“
• Select Platforms – iOS / Android

For iOS Client:

We need to create 3 different signing profiles pointing to same Signing profile and respective Provisioning profile

• Give a unique name to your profile
• Import Signing certificate .p12 generated in step#2, enter key
• Import Provisioning Profile downloaded in step#6
• Click “OK”

repeat same for other two provisioning profiles (as below screenshots)

Once done, you should see something like this

 

For Android Client:

If you already have an Android Signing profile, you can directly upload it by clicking on “Upload” option.

Otherwise, as an Administrator, creating a signing profile for Android is also possible in SAP Cloud Platform Mobile Services Cockpit.

• Click on Settings > Signing Profiles
• Click on “Generate” to generate a signing profile for Android OS
• Provide below mandatory info:  Profile Name (any name of your choice, Validity, Common Name (user’s name). Other asked information are optional.
• then click on “OK”

Step 8 : Start Cloud Build service

• Expand “Mobile Applications” , Click on “SAP Mobile Cards“
• Click on “Cloud Build“

 

• Enter Device App Name – Enter any name of your choice
• Bundle ID – same as mentioned in step#4
• App version – e.g. 1.0
• URL Scheme- optional
• Application Launch Icon – Optional
• Save it

• Click on “Build History“
• Click on “Build” , select  respective “Signing Profiles” for required platforms, Press “OK“

 

Note: You can click on above build to see related logs.  After couple of minutes, build completes with success.

You can install this new custom mobile card client app either by scanning QR code from iPhone/Android phone’s camera app (click on “Install”) or Download binary (ipa, apk) locally and install in your device via IDEs like XCode, Android Studio or via other means.

iOS Client:

 

For Todays widget:

 

for iMessage:

 

 

 

Android Client:

 

More information on

• Cloud Build service 
• To learn more about “SAP Mobile Cards” , check these tutorials 

I hope this gives you some idea how to create a custom Mobile card kit application.