Skip to Content

Quick Start with the Mobile Development Kit (MDK)

test
0 %
Quick Start with the Mobile Development Kit (MDK)
Details

Quick Start with the Mobile Development Kit (MDK)

November 28, 2021
Created by
February 8, 2020
Create and examine your first mobile (offline) and web application using the MDK template connecting against a sample service.

You will learn

  • How to create an MDK sample app using a template in SAP Business Application Studio
  • How to deploy an MDK app to Mobile Services and run it in mobile client
  • How to deploy an MDK app to Cloud Foundry and run it as a Web application
QR code

Prerequisites


Step 1: Create a new MDK project in SAP Business Application Studio

This step includes creating the mobile development kit project in the editor.

  1. Launch the Dev space in SAP Business Application Studio.

  2. Click Start from template on Welcome page.

    MDK

    If you do not see the Welcome page, you can access it via Help menu or via View menu > Find Command > Welcome.

  3. Select MDK Project and click Start.

    MDK
  4. In Basic Information step, provide the below information and click Next:

    Field Value
    MDK Template Type Select CRUD from the dropdown
    Your Project Name Provide a name of your choice. MDKAppis used for this tutorial
    Your Application Name <default name is same as project name, you can provide any name of your choice>
    Target MDK Client Version Leave the default selection as MDK 6.0+ (For use with MDK 6.0 or later clients)
    MDK

    This screen will only show up when your CF login session has expired. Enter your login credentials, click Login icon and select the org & space where you have set up the initial configuration for your MDK app.

    MDK
  5. In Service configuration step, provide the below information and click Next:

    Field Value
    Data Source Select Mobile Services from the dropdown
    Mobile Services Landscape Select standard from the dropdown
    Application Id Select com.sap.mdk.demo from the dropdown (this app was configured as per this tutorial)
    Destination Select SampleServiceV2 from the dropdown
    Enter a path to service Leave it as it is
    Enable Offline It’s enabled by default
    MDK

    Regardless of whether you are creating an online or offline application, this step is needed for app to connect to an OData service. When building an MDK Mobile application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services. For MDK Web application, destination is set up in SAP BTP cockpit.

    The generated application will be offline enabled in the MDK Mobile client and will run as online in Web environment.

  6. In the Data Collections step, select Customers, Products, PurchaseOrderHeaders, PurchaseOrderItems SalesOrderHeaders and SalesOrderItems. Click Finish to complete the project creation.

    MDK
  7. After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the MDKApp project in the project explorer.

Log on to answer question
Step 2: Get familiar with generated project structure

This is how the project structure looks like within the workspace.

MDK

These are the metadata definitions available in the editor and the format in which these metadata definitions are stored in the editor. Just to brief on some of these:

  • InitializeOffline.action: For Mobile applications, this action binds the application to the Mobile Services Offline OData server and downloads the required data to the offline store on the mobile device. For Web applications, it will initialize the service to be consumed in online mode.

  • DownloadOffline.action and UploadOffline.action: These actions are applicable to Mobile client only. Using app initialization, data is downloaded to the offline store. If you want to have the application download any updated data from the backend server or upload changed data to the backend server, these actions will be needed.

  • Success & Failure Message action: Here are some messages showing up in the app on a successful or failure of data initialization, sync etc.

  • Main.page: This is the first page of your MDK application that is shown. For this application you will use this as a launching page to get to application functionality.

  • OnWillUpdate.js: This rule is applicable to Mobile client only. MDK applications automatically download updates and apply them to the client without the end-user needing to take any action. The OnWillUpdate rule empowers the user to run business logic before the new definitions are applied. This allows the app designer to include logic to prompt the user to accept or defer applying the new definitions based on their current activity. For example, if the end-user is currently adding new customer details or in the middle of a transaction, they will be able to defer the update. The app will prompt again the next time it checks for updates.

  • Web: In this folder, you can provide web specific app resource files and configurations.

  • Application.app: this is the main configuration file for your application from within SAP Business Application Studio. Here you define your start page (here in this tutorial, it is main.page), action settings for different stages of the application session lifecycle, push notifications, and more.

Open the application settings in the application editor by clicking the Application.app.

MDK
Log on to answer question
Step 3: Deploy the application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy this application definition to Mobile Services and Cloud Foundry to consume it as Mobile and Web application respectively.

  1. Right-click Application.app and select MDK: Deploy.

    MDK
  2. Select deploy target as Mobile & Cloud.

MDK editor will deploy the metadata to Mobile Services (for Mobile application) followed by to Cloud Foundry (for Web application).

MDK

First web deployment takes 2-3 minutes as it creates five service instances for the application, you can find these details in space cockpit.

  • XSUAA

  • destination

  • connectivity

  • HTML Repo host

  • HTML repo runtime

You should see successful messages for both deployments.

MDK
Log on to answer question
Step 4: Display the QR code for onboarding the Mobile app

SAP Business Application Studio has a feature to generate QR code for onboarding the mobile app.

Click the Application.app to open it in MDK Application Editor and click Application QR Code icon.

MDK

The On-boarding QR code is now displayed.

MDK

Leave the Onboarding dialog box open for step 5.

Log on to answer question
Step 5: Run the app

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

Follow these steps to on-board the MDK client.

There is a limit of total 3 user registrations per app in trial accounts.

Once you accept app update, you will see the list of entities on the Main page, LOGOUT and SYNC options at bottom of the page and Offline store is being initialized. click either entity, it navigates to detail page, you can create, update, delete a record. This record gets saved to offline request queue database, navigate back to main page and press SYNC to upload local changes to the backend. Once the upload is successful, it will also download the data from the backend to the offline store to have same dataset on both ends.

MDK

Additionally, you can search over all properties of the objects displayed in the section by entering manually or via barcode scanner. For example, in Products list, you can scan the barcode to search the products belong to MP3 Players category.

MDK

Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

Follow these steps to on-board the MDK client.

There is a limit of total 3 user registrations per app in trial accounts.

Once you accept app update, you will see the list of entities on the Main page, Logout and Sync options at bottom of the page and Offline store is being initialized. click either entity, it navigates to detail page, you can create, update, delete a record. This record gets saved to offline request queue database, navigate back to main page and press Sync to upload local changes to the backend. Once the upload is successful, it will also download the data from the backend to the offline store to have same dataset on both ends.

MDK

Additionally, you can search over all properties of the objects displayed in the section by entering manually or via barcode scanner. For example, in Products list, you can scan the barcode to search the products belong to MP3 Players category.

MDK

Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

For this tutorial, MDK web app is going to connect to SAP Mobile Services’ sample backend which will register your user in Mobile Services application. In case, if you see any registration count limit related error, please be note that there is a total 3 user registrations per app in trial accounts.

  1. Click the highlighted button to open the MDK Web application in a browser. Enter your SAP BTP credentials if asked.MDK

    You can also open the MDK web application by accessing its URL from .project.json file.
    MDK

    You will see the list of entities on the Main page, Logout option at bottom of the page and application data service is being initialized. click either entity, it navigates to detail page, you can create, update, delete a record.

    MDK
Which is main configuration file in an MDK project?
×

Congratulations! You have created a Multi-Channel (Mobile & Web) application with just couple of clicks. You may now follow these tutorials to create an MDK app from scratch.


Next Steps

Back to top