Skip to Content

Build Your Mobile Development Kit Client Using MDK SDK

test
0 %
Build Your Mobile Development Kit Client Using MDK SDK
Details

Build Your Mobile Development Kit Client Using MDK SDK

August 27, 2020
Created by
August 30, 2019
Set up your development environment that enable MDK SDK so that you can begin building your branded Mobile Development Kit client.

You will learn

  • How to install a Mobile development kit client SDK on Mac and Windows OS
  • How to build a Mobile development kit client for iOS and Android
  • How to connect to SAP Cloud Platform Mobile app

Prerequisites

The SAP Mobile Services client available in the App Store is meant for demo and development or learning purposes. For distribution to your users, you need to build a custom client. This enables you to:

  • Provide customer app icon
  • Use your signing profiles
  • Distribute custom extensions
  • Provide app-specific settings (Custom EULA texts, Add app assets)
  • Add demo mode
  • Customize languages (for onboarding screens)
  • Use your own distribution channels, like the mobile device management of your choice

Step 1: Run MDK Dependencies Installer

Make sure you are choosing the right development platform tab above.

Make sure that you have download latest version of MDK SDK as described in Prerequisites.

  1. Extract the downloaded zip file on your Mac OS.

    MDK

    You will also find other files in the extracted folder. The README file contains information about the version requirements, dependencies and some getting started links.

  2. MDK Dependencies Installer checks the status of the MDK dependencies and will install or upgrade the dependencies for you. Double click MDK Dependencies Installer.app file, click Open.

    MDK

    If you find some issues (for example: app cant be opened because the identity of the developer cannot be confirmed) while opening this file, go to System Preferences > Security & Privacy and click Open Anyway.

  3. Enter Admin user password and click OK.

    MDK

    You may need to grant admin access via Privileges app.

    The installer will list all required components for iOS and Android platform and automatically check if they are already installed in the machine. Follow the installer UI to install the components you selected.

    MDK
  1. Extract the downloaded zip file on your Windows OS.

    MDK

    You will also find other files in the extracted folder. The README file contains information about the version requirements, dependencies and some getting started links.

  2. Extract MDKDependenciesInstallerWindows.zip file.

    MDK Dependencies Installer checks the status of the MDK dependencies and will install or upgrade the dependencies for you. Double click MDK_Dependencies_Installer.exe file to open it.

    MDK

    The installer will list all required components for Android platform and automatically check if they are already installed in the machine. Follow the installer UI to install the components you selected.

    MDK

    If MDK Dependencies Installer keeps showing Loading... then use command MDK_Dependencies_Installer.exe –debug –debug to see more information.
    There might be some issue due to Security Policy. It can be fixed by executing this in PowerShell:
    Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser

You can look into console by clicking Show Log for execution of each dependencies.

Once you’ve installed these prerequisites, your machine is ready to generate and build an MDK project.

What are the prerequisites on your developer machine for using the MDK SDK?
×
Step 2: Installing the SDK dependencies

Make sure you are choosing the right development platform tab above.

  1. To use the SDK to generate a mobile development kit client, the first step is to setup the SDK to create a client. Unzip MDKClient_SDK.zip if it is not already extracted.

    MDK
  2. From a terminal window, navigate to the [path] -> MDKClient_SDK folder and execute ./install.command. If everything is fine, you will a success message in the console followed by next steps.

    MDKMDK

    Notice that the create-client.command file has appeared in the SDK directory.

    MDK
  1. To use the SDK to generate a mobile development kit client, the first step is to setup the SDK to create a client. Unzip MDKClient_SDK.zip if it is not already extracted.

    MDK
  2. From a command line window, navigate to the [path] -> MDKClient_SDK folder and execute install.cmd.

    MDK

    If everything is fine, you will a success message in the console followed by next steps.

    MDKMDK

    Once this completes, close the window. Notice that the create-client.cmd file has appeared in the SDK directory.

    MDK
Log on to answer question
Step 3: Create your .mdkproject folder

Make sure you are choosing the right development platform tab above.

  1. In the MDKClient_SDK folder, you will find the template.mdkproject folder. It is recommended that you copy this folder to another location to use it for future builds and paste it anywhere you want and you can rename template to whatever you want but the directory name needs to end in .mdkproject.

    MDK

    The idea of retaining the .mdkproject folder is so you can use it again in the future to build additional MDK clients using the same settings using a different version of the MDK SDK.

    For this tutorial, I have named my .mdkproject folder DemoSampleApp.mdkproject and put it outside of the MDK Client folder structure. I will refer this name for the rest of this tutorial.

    MDK
  2. Next, you will need to update the BrandedSettings.json and MDKProject.json files as needed for your client. Go into the DemoSampleApp.mdkproject folder.

    MDK
  3. Open the MDKProject.json file and update it as needed. This file has some build-time configurations such as the application name, version and bundle ID.

    MDK

    AppName: Provide a name for example: DemoSampleApp. This is the name of the application on the home screen of the device.

    BundleID: It should be unique for iOS and same as Identifier (AppID) that is registered in Apple Developer account since that determines if the application can be installed alongside other applications. If the XCode project is setup to use Automatically manage signing then when building, XCode will automatically generate a signing profile for the specified bundle id. Without matching them, trying to run the custom client in iOS device will result in failure.

    URLScheme: Allows you to specify a custom URL scheme which opens the client.
    If the URL includes connection settings as URL parameters, these settings will override the ones used by the client. The default is mdkclient.

    You can find more details about configuration of MDKProject.json file in this help documentation.

  4. Now, open the BrandedSettings.json file and update it with information from your MDK Mobile Services application.

    MDK

    To find the correct URLs for your client, you should go to Mobile Services cockpit and find your MDK application that you want to link to this client.

    Click com.sap.mdk.demo > Security tab.

    Copy the Client ID, Redirect URL, OAuth Authorization & OAuth Token and paste to ClientId, RedirectUrl, AuthorizationEndPointUrl and TokenUrl parameters respectively.

    MDK

    AppId: App ID from Info tab.

    MDK

    SapCloudPlatformEndpoint: Server URL from APIs tab.

    MDK

    For Android (7 and below), screen sharing or taking screen shots are disabled by default. To enable it, add "EnableScreenSharing": true in ConnectionSettings section. Screen sharing is already enabled in Android 8 and above. You can find more information about Enable Screen Sharing in this help documentation.

    Regarding other properties:
    Debug settings: The settings in the DebugSettings property are for development use and should not be enabled in a production setting.

    Log Settings: Set this to the log level to be used when the client is launched.

    Demo: If you want to access the app in the demo mode, you can configure required settings.

    If you are connecting to AliCloud accounts, you will also need to add your custom domains under URLWhitelist property in the same file. You can find more details in documentation.

  5. In the last section of BrandedSettings.json file, make these changes:

    Field Value
    DetailLabelViewText My first custom MDK client
    SigninButtonText Start
    MDK
  1. In the MDKClient_SDK folder, you will find the template.mdkproject folder. It is recommended that you copy this folder to another location to use it for future builds and paste it anywhere want and you can rename template to whatever you want but the directory name needs to end in .mdkproject.

    MDK

    The idea of retaining the .mdkproject folder is so you can use it again in the future to build additional MDK clients using the same settings using a different version of the MDK SDK.

    For this tutorial, I have named my .mdkproject folder DemoSampleApp.mdkproject and put it outside of the MDK Client folder structure. I will refer this name for the rest of this tutorial.

    MDK
  2. Next, you will need to update the BrandedSettings.json and MDKProject.json files as needed for your client. Go into the DemoSampleApp.mdkproject folder.

    MDK
  3. Open the MDKProject.json file and update it as needed. This file has some build-time configurations such as the application name, version and bundle ID.

    MDK

    AppName: Provide a name for example: DemoSampleApp. This is the name of the application on the home screen of the device.

    BundleID: The ID used for code signing

    URL Scheme: Allows you to specify a custom URL scheme which opens the client.
    If the URL includes connection settings as URL parameters, these settings will override the ones used by the client. The default is mdkclient.

    You can find more details about configuration of MDKProject.json file in this help documentation.

  4. Now, open the BrandedSettings.json file and update it with information from your MDK Mobile Services application.

    MDK

    To find the correct URLs for your client, you should go to Mobile Services cockpit and find your MDK application that you want to link to this client.

    Click com.sap.mdk.demo > Security tab.

    Copy the Client ID, Redirect URL, OAuth Authorization & OAuth Token and paste to ClientId, RedirectUrl, AuthorizationEndPointUrl and TokenUrl parameters respectively.

    MDK

    AppId: App ID from Info tab.

    MDK

    SapCloudPlatformEndpoint: Server URL from APIs tab.

    MDK

    For Android (7 and below), screen sharing or taking screen shots are disabled by default. To enable it, add "EnableScreenSharing": true in ConnectionSettings section. Screen sharing is already enabled in Android 8 and above. You can find more information about Enable Screen Sharing in this help documentation.

    Regarding other properties:
    Debug settings: The settings in the DebugSettings property are for development use and should not be enabled in a production setting.

    Log Settings: Set this to the log level to be used when the client is launched.

    Demo: If you want to access the app in the demo mode, you can configure required settings.

  5. In the last section of BrandedSettings.json file, make these changes:

    Field Value
    DetailLabelViewText My first custom MDK client
    SigninButtonText Start
    MDK
Log on to answer question
Step 4: Create the MDK Client

Make sure you are choosing the right development platform tab above.

  1. You can create a client by running ./create-client.command and providing the path to a valid .mdkproject directory.

    MDK

    You can run the create-client command from any directory. The resulting MDK client will be created in the directory where the create-client command is run from.

  2. You will be asked whether you would like to build for iOS or Android or All?

    MDK

    All option was chosen in this tutorial as you will learn how to create the MDK client for iOS and Android.

  3. Then, you will be asked whether you would like to build for device or simulator?

    MDK

    device option was chosen for this tutorial.

    Once the create-client.command script executed successfully, you will see Application ready message in terminal console.

    MDK

    You will also find your app created under the MDKClient_SDK folder.

    MDK
  1. You can create a client by running create-client.cmd and providing the path to a valid .mdkproject directory.

    MDK
  2. Once the create-client.cmd script executed successfully, you will see Application ready message in terminal console.

    MDKMDK

    You will also find your app created under the MDKClient_SDK folder.

    MDK

This name of this folder is based on the <App Name> provided in the MDKProject.json file and this is the NativeScript project.

What are some of the things you can do when building a custom Mobile Development Kit (MDK) Kit using the MDK SDK?
×
Step 5: Run the MDK Client

Make sure you are choosing the right device platform tab above.

  1. In this step, you will run the app on an android device. Attach the device to your Mac or Windows machine and run tns device android command to print a list of attached devices.

    MDK

    Make sure Developer option and USB debugging option is enabled in android device.

  2. Copy the Device Identifier value for your device.

  3. In terminal or command line window, navigate to the app name folder DemoSampleApp (in MDClient_SDK path) and use tns run android --device <device identifier> command to run the MDK client on android device.

    MDK

    To run the MDK client on Android emulator, you need to first create the client for emulator and then use tns run android --emulator command. Before trying to launch the client on Android emulator, make sure that you have already configured a virtual device (Android Studio>AVD Manager). Otherwise, you may get error like No emulator image available for device identifier.

    Once, above command gets successfully executed, you will see new MDK client up and running in Android device.

    MDK
  4. Tap AGREE on End User License Agreement.

  5. In Welcome screen, you will notice that app name, detailed label text and signing button text have been updated as per changes done in step 3.3 & 3.5.

    MDK
  6. Tap START to connect MDK client to SAP Cloud Platform.

  7. Enter your credentials to login to SAP Cloud Platform and tap Log On to authenticate.

    MDK
  8. Choose a passcode with at least 8 characters for unlocking the app and tap NEXT.

    MDK
  9. Confirm the passcode and tap DONE.

    MDK

    Optionally, you can enable fingerprint to get faster access to the app data.

    MDK

    If there is any app metadata already deployed to Mobile Services, you will see Update Now? dialog box Otherwise you will see an empty screen.

    MDK

    You can always interrupt running process in terminal window by pressing control + C.

    To build an APK for an Android device, use tns build android --release. More information about archiving can be found in NativeScript documentation here.

  1. In this step, In this step, you will run the app on an iOS device. Attach the device to your Mac and run tns device ios command to print a list of attached devices.

    MDK
  2. Copy the Device Identifier value for your device.

  3. In terminal window, navigate to the app name folder DemoSampleApp (in MDClient_SDK path) and use tns run ios --device <device identifier> command to run the MDK client on iOS device.

    MDK

    You can also run the app in Xcode. Open the project in Xcode with the command open platforms/ios/<app name>.xcworkspace, or open the workspace using the File -> Open... dialog in Xcode. Configure the application’s code signing settings, then run the application for the target device.

    To run the MDK client on iOS simulator, use tns run ios --emulator command.

    Once, above command gets successfully executed, you will see new MDK client up and running in your device.

    MDK
  4. Tap Agree on End User License Agreement.

  5. In Welcome screen, you will notice that app name, detailed label text and signing button text have been updated as per changes done in step 3.3 & 3.5.

    MDK

    Tap Start to connect MDK client to SAP Cloud Platform.

  6. Enter your credentials to login to SAP Cloud Platform and tap Log On to authenticate.

    MDK
  7. Choose a passcode with at least 8 characters for unlocking the app and tap Next.

    MDK
  8. Confirm the passcode and tap Done.

    MDK

    Optionally, you can enable Touch ID to get faster access to the app data, tap Enable.

    MDK

    If there is any app metadata already deployed to Mobile Services, you will see Update Now? dialog box Otherwise you will see an empty screen.

    MDK

    You can always interrupt running process in terminal window by pressing control + C.

    To build an IPA for an iOS device, use tns build ios --for-device --release. This can also be accomplished in Xcode by opening the workspace and selecting the Archive option. More information about archiving can be found in Apple’s documentation here.

Congratulations! You have successfully built Your Mobile Development Kit Client Using MDK SDK and you are now all set to Build Your Mobile Development Kit Client Using Cloud Build Service.

Log on to answer question

Next Steps

Back to top