Part 6 Build a Mobile MDK application #epl-app

[kevin_hu]

Background

dj.adams.sap wrote a great blog (CAP is important because it’s not important) about CAP, SAP Cloud Programming Model. It mentions

It is the backbone which is the stable base that connects everything together, the trunk from which all branches can flourish.

It reminds me to write another blog to build a Mobile MDK application using SAP Mobile Services Development Kit to connect to my existing EPL-APP in SAP Cloud Foundry. It makes sense to get some native mobile experience when check match results anyway. 🙂

 

It is also a good time to see some of the new features since my last blog about the MDK toolset almost a year ago. Amont those are really exciting ones like Android device support and odata v4 support. So let's get started.

Also please check the previous blogs of this series on how the backbone application was built and deployed to cloud foundry using CAP.

 

Preparation

1. SAP Cloud Platform Trial, both Neo and Cloud Foundry. We will be using the WebIDE Fullstack from Neo. Cloud foundry will be our mobile middleware (mobile service) + our MDK mobile appliation + hosting our previously created epl-app

2. Mobile Services App Development Tools Extension enabled in WebIDE

3. Create a destination on Neo pointing to the Mobile Service on Cloud Foundry, with the webide usage enabled. - this step is for webide to "discover" the app we will build on mobile services in design time.

Check the "Prerequisites" section of this blog for detailed steps to do the set up.

On Mobile Service

1. Open the mobile service cockpit, URL is like this:

https://mobile-service-cockpit-web.cfapps.eu10.hana.ondemand.com/

2. Create a Native/Hybrid Application, name "EplApp"



3. Add the required Features, such as "Mobile Connectivity" in to the application. Also enable the "Mobile App Update" feature.



4. Create a "Mobile Destination" pointing to the famous existing app built by CAP. Leave the other settings as default and Finish.



5. Do a quick test on the destination by pressing the highlighted button, make sure we got connected pass the test.



 

WebIDE, coding time

1. Create a MDK application using the pre-built template. Name it "EplAppMDK"



Name: the service name - one project can have multiple service

Service URL: our destination pointing to mobile service

Application ID: the app id we just created in mobile service

Destination: the "mobile destination" we created

Uncheck "Enable Offline Store"

Currently only odata v2 is supported for offline use. As our epl-app is built on odata v4, we are going to build an online MDK app.



2. Press the check service button to test. If everything is ok, next step is to set the binding for the entity types. I set the Matches entity set and some initial field binding



3. Then the query option needs to be update as

$expand=homeTeam,awayTeam



4. Next



5. Done. Project created.



 

Deploy the app

1. Choose deploy the project. Webide will package the application and deploy to mobile service.



2. Leave settings as default. In the last screen, press the "scanner" button to get the device onboarding QR code and URL.





 

On Boarding Samsung Android

1. Download the SAP Mobile Services Client

https://play.google.com/store/apps/details?id=com.sap.mobileservices.client&hl=en

2. Use a third party QR scanner (built-in scanner does not seem to work on this) and scan the code above. Then open it in browser and redirect to the SAP Mobile Services Application

3. Follow the onboarding process. Lastly press ok to update the app metadata. We got the app working!

Some real "coding"

1. We don't want to show the team id and all those information are not that readable. We need to do some real "coding" in MDK

2. Update the Matches_List.page on the "QueryOptions" as

$expand=homeTeam,awayTeam&$orderby=matchDate desc

3. Upate the "Footnote" as

{{#Property:awayTeam/#Property:name}} {{#Property:awayTeamScore}}

4. Update the "Subhead" as

{{#Property:homeTeam/#Property:name}} {{#Property:homeTeamScore}}

5. Remove "Status" and "SubStatus" field values

6. Update "Title" field value as

$(D,{matchDate})

7. Update Main.page on "Caption" as #EPL-APP



8. Deploy again. Go back to mobile app and check the result.



 

Smooth and Great profit

CAP opens a window for us to explore the whole universe, the limit is your imagination.

Also kudos to the mobile service team, I can see the pre-built template really rocks, and initial set up is much easier and webide toolset is much more stable. On boarding process on Android is just within seconds. Great great tool to build native cross-platform mobile application.

 

source code for the MDK project

 

Stay Tuned. #epl-app