OnBoarding Your Mobile Development Kit App Store App

[former_member204320]

I am happy to announce that there is a new Mobile Development Kit (MDK) client application on the Apple App Store. The app is called SAP Mobile Services Client and it is a generic client app that displays the mobile application you have built using the Mobile Development Kit editor and deployed to SAP Cloud Platform Mobile Services.  The mobile development Kit (MDK) is a feature of SAP Cloud Platform Mobile Services. See the tutorial here: https://developers.sap.com/mission.mobile-dev-kit-get-started.html

Not familiar with Mobile Development Kit? Download the app and click “Try the Demo”.  The Mobile Development Kit demo is a simple application, running offline, that shows you the type of application you can build using this tool.  Then, review the Learning Journey which provides overview topics, blogs, videos, and tutorials to help you get started.

To view more than just the offline demo, you will need to make a connection to a specific SAP Cloud Platform Mobile Services MDK application.  The SAP Mobile Services Client includes an onboarding feature that allows you to easily set up the generic app to connect to your mobile services MDK application.

This blog provides the details to onboard your Mobile Services App Store app.

Pre-requisites

You need to setup your own mobile services account to begin building and testing your own MDK applications.

This blog assumes you have already setup your SAP Cloud Platform mobile services account following the mobile development kit setup video on YouTube.com.

 

Install from Apple App Store

1. Go to the Apple App Store and search for SAP Mobile Development Kit or SAP Mobile Services Client. The SAP Mobile Services Client appears as this is official name for the mobile development kit client.


2. Download it to your device.

 

Create onboarding string to connect the client to your custom MDK app

The MDK App Store app needs to connect to a specific Mobile Services application.  To do this, you will create a URL using your Mobile Services application details.  The URL includes App ID, SAP Cloud Platform base URL, and OAuth Security URLs.   You will then generate a QR code and scan it to onboard your app.

To create the URL string, go to your Mobile Development Kit application in SAP Cloud Platform Mobile Services.

 

• Login to mobile services and click on Native/Hybrid under Mobile Applications in the left menu.

• You should see the list of mobile services applications you have already created. Click on the mobile development kit application you want to link to the SAP Mobile Services Client on your device. This takes you in the Application Details page.

 

 

• Now you will create a URL to generate a QR code and click on from the mobile device.  I suggest you open a text file, copy the base URL there and add the IDs and URLs for your application.

 

sapmobilesvcs://?AppId={}&ClientId={}&SapCloudPlatformEndpoint={}&AuthorizationEndpointUrl={}&RedirectUrl={}&TokenUrl={}&ServiceTimeZoneAbbreviation=PST

 

• From the mobile services application, copy the App ID and replace the {} with the ID you copied.

 



 

• Now, click on the API tab. This is located above the Application Details section.  Here you will copy the server URL (without the trailing “/”) and replace the {} for SAPCloudPlatformEndpoint

 

Note:  Even though you see a QR code on this screen Mobile Development Kit applications cannot take advantage of it today.

 

• Now go back to the Info tab to get the remaining URLs. Under the Info tab, click on Security under Assigned Features.

 

• In the Security page, click on the entry under OAuth Clients

 

• A popup screen appears with the OAuth Client details. Select the Client ID and copy it to your clipboard.  If you are unable to select the Client ID in your browser to copy the Client ID, you will need to type it manually and triple check the ID.  Paste (or type in) the Client ID in your url string replacing the {} after ClientId.

 



 

 

• From the same screen, copy the Authorization Endpoint URL and replace the {} for AuthorizationEndpointUrl.

 

• From the same screen, copy the Redirect URL and replace the {} for RedirectUrl.

 

• From the same screen, copy the Token Endpoint Url and replace the {} for TokenURl.

 

• Click Cancel on this screen. You are done copying URLs.  You final URL should look similar to this. There should be no spaces in in the Url and it should be all on one line.

 

sapmobilesvcs://?AppId=com.sap.mdk.demo&ClientId=s66a5e27-e086-457d-a7a7-22e85078bb8&SapCloudPlatformEndpoint=https://hcpms-p123456trial.hanatrial.ondemand.com&AuthorizationEndpointUrl=https://oauthasservices-p123456trial.hanatrial.ondemand.com/oauth2/api/v1/authorize&RedirectUrl=https://oauthasservices-p123456trial.hanatrial.ondemand.com&TokenUrl=https://oauthasservices-p123456trial.hanatrial.ondemand.com/oauth2/api/v1/token&ServiceTimeZoneAbbreviation=PST

 

• Now, you can use the URL to generate a QR code and use your device camera to scan the QR code. You can use any QR Code Generator.  I searched for free QR code generator and used one of the top choices.  Copy the URL and paste into the QR code generator.

 

• Open your device camera and point it at the QR code. If you are using iOS 11.x, you should see a popup notification asking you to open the SAP Mobile Services Client (Mobile Svcs). Click on the Notification and go to the next numbered step. Skip the email instructions as those are only if the QR code doesn’t work for you.

 

Note:  If for some reason creating a QR code does not work for you, simply paste the Url into an email and send it to an account that is accessible from your device.



Go to your device and open up your email.  Click on the link.  It will ask you for permission to open the SAP Mobile Services client.  Click Open.



Note: The default mail client on iOS will have a clickable link it finds an app on the device named sapmobilesvcs.  The app must already be install on your device and make sure there are no spaces in your URL and the url starts with sapmobilesvcs://

 

 

• When clicking on the notification from the QR code or email, your device should automatically open the SAP Mobile Services Client. Click on Start .

 



Note:  If you have already clicked on “Try the Demo”, you will need to click on User from the Landing Page and then Reset all.  This will take you back to the app welcome screen with the start button.

• When you click on Start, you should see the login screen. Login with your SAP Cloud Platform account information.

 



 

 

 

• You should now see a new screen with Authorize. Click Authorize.Accept the End User License Agreement and Enable Touch ID or enter a passcode for the application if Touch ID is not setup on your device.

 



 

 

 

• Now the app should login to mobile services and download the app content.  If you don’t have any app content yet, you may just see a blank screen with the title SAP Mobile Development Kit.

 

You are now ready to build applications in the mobile development kit editor, a plugin for SAP Web IDE.  Once again, here is a link to the Mobile Development Kit Learning Journey to help you get started.