Skip to Content
Author's profile photo Midhun VP

3 Steps to Develop and Deploy your Mobile Apps – Everything on Cloud

In this blog I am explaining an easiest way of developing your mobile app on the Cloud. SAP’s tools in the cloud are made developer friendly, I hope you’ll like it. This example takes you through 3 major steps.

  1. Develop Fiori like application using Web IDE
  2. Deploy it to HANA Cloud Platform
  3. Deploy app to mobile device using Mobile Secure

IGWREST_35 Apr. 05 19.55.jpg

Requirements

HANA Cloud Platform trial (HCP) – The application development is using SAP Web IDE and it is on HCP. Register for free trial of HCP.

SAP Web IDE (do steps till 4.2)- It is a development environment for web and hybrid apps.

SAP Mobile Secure – It is the mobile device management solution on the cloud.

Creating app using SAP Web IDE

1. Open Web IDE

2. Click on > New > Project Template.

IGWREST_25 Apr. 04 22.44.jpg

3. Choose SAP Fiori Master Detail Application. Click Next.

IGWREST_25 Apr. 04 22.45.jpg

4. On Project Name field enter “End2End”. Click Next.

IGWREST_25 Apr. 04 22.47.jpg

5. Select Gateway system “ES1” and choose Odata service ZPRODUCT_SRV[ZCL_ZPRODUCT_DPC_EXT].

    Note: To use ES1 system as your backend for your mobile app make sure you have defined a destination with SAP Gateway trial. This video could help you                 to do it.

IGWREST_25 Apr. 04 22.49.jpg

6. Click Next.

7. On the new window opened provide below details.

IGWREST_25 Apr. 04 22.53.jpg

8. Click Next, then click on Finish. Done!! You have created an app.

9. To run the app expand the project. Click on index.html, then click on Run.

IGWREST_25 Apr. 04 22.54.jpg

10. It opens the app and asks for SAP Gateway credentials. Enter the credentials to see the app running on browser.

IGWREST_25 Apr. 04 22.55.jpg

Deploy App to HCP

1. Right click on the project choose Deploy, then select Deploy to HANA Cloud Platform.

IGWREST_25 Apr. 04 22.56.jpg

2. Provide HCP credentials. Click on Login.

IGWREST_25 Apr. 04 22.57.jpg

3. Check Create version and enter 1.0. Check Activate, then click on Deploy.

IGWREST_26 Apr. 04 22.57.jpg

4. You should get a Successfully Deployed message. Click on Close.

IGWREST_26 Apr. 04 22.58.jpg

Deploy App to Mobile Device

1. Login to SAP Mobile Secure. Click on Applications tab, then click on New Application.

IGWREST_28 Apr. 04 23.29.jpg

2. On Select Application Type window. Choose Fiori Application and click Next.

IGWREST_28 Apr. 04 23.30.jpg

3. On Name field enter Products. Check Deploy to managed users only and Mark as featured app.

IGWREST_34 Apr. 05 01.08.jpg

4. Click on Multimedia tab and set Application Icon and Banner image.

IGWREST_35 Apr. 05 01.08.jpg

5. Click on Supported Platforms. Click on Get Started. A new window will appear.

6. Choose OS platform as Android and enter Base URL (application URL).

IGWREST_35 Apr. 05 01.09.jpg

Note: Find your Base URL from HANA trial account – Login to https://account.hanatrial.ondemand.com/cockpit Click on HTML5 Applications > click on end2end.

IGWREST_28 Apr. 04 23.34.jpg

IGWREST_28 Apr. 04 23.35.jpg

7. Click on App Signing tab and browse android keystore and enter the password.

    Note: To create an android keystore follow the document: Creating a signed APK in Android Studio

              Use keystore of any application.

IGWREST_28 Apr. 04 23.43.jpg

8. Click OK. It will deploy the app.

IGWREST_29 Apr. 04 23.47.jpg

9. Click OK.

10. Click on workflow icon and select Set to production.

IGWREST_31 Apr. 04 23.47.jpg

11. Click Save. We have successfully added the app to the enterprise app store (mobile place).

Untitled.png

12. The enrolled user can go to Enterprise App Store and install the app in his device.

Note: when you run the app it asks for HCP credentials as well as backend credentials, to hide the HCP credentials add property “authenticationMethod”: “none” to the file neo-app.json

IGWREST_36 Apr. 07 10.50.jpgIGWREST_35 Apr. 07 10.50.jpg

IGWREST_35 Apr. 05 23.14.jpg IGWREST_35 Apr. 05 23.15.jpg

Note: Watch this video to know how to enrol your device with SAP Mobile Secure.

What’s happening during the build ?

Mobile secure is creating a Fiori Client app (Cordova based) with the Fiori application URL preconfigured with it. The Fiori Client is using the same Fiori web application which is hosted on HCP.

Regards, Midhun

SAP Technology RIG

Assigned Tags

      57 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vishnu Pankajakshan Panicker
      Vishnu Pankajakshan Panicker

      great post.

      Regards,

      Vishnu

      Author's profile photo Niladri Chakravarty
      Niladri Chakravarty

      Hi Midhun,

      Please suggest how do we access Mobile Place to download the app

      Thanks,

      Niladri

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Niladri,

      You will be able to add users to mobile secure. While adding users you could give roles that could access the mobile place.

      Once the user is added a mail will be send to the users with more information to access mobile place.

      This video has some information creating user:https://www.youtube.com/watch?v=DbB_jhWd3hQ

      Regards,

      Midhun VP

      Author's profile photo Niladri Chakravarty
      Niladri Chakravarty

      Hi Midhun,

      Thanks for your response. We have actually created trial user for mobile Secure. But the problem we are facing while trying to execute point#12. We have published our Android mobile application to mobile place, but when we access the Mobile Place, we could not see our App there. It is showing as No Data.

      Please suggest.

      regards,

      Niladri

      Author's profile photo R Sampath Kumar
      R Sampath Kumar

      Hi Midhun,

          

      Nice blog.useful info. i will try Open sap exercise via this.

      With regards,

      sampath kumar.

      Author's profile photo Tahir Öz
      Tahir Öz

      Usefull and very well explained Midhun.

      Thanks

      -Tahir

      Author's profile photo sridevi garapati
      sridevi garapati

      Hi Midhun,

      Thank for sharing a nice blog.

      By following the above steps I can uploaded APK file successfully.

      By following the suggested video I installed Afaria. When I am trying to open it it was asking about the Enrollment Code.

      Can you please suggest me , how to create Enrollment code to enter into the enterprise app.

      Regards

      Sridevi

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Sridevi,

      You could follow this video to enrol your device:https://www.youtube.com/watch?v=DbB_jhWd3hQ

      Also you could create a user in Mobile secure with access only to mobile place (internal app store), so from mobile they could go to the app store and install the app to device without enrolling the device. While creating user you will find roles related to this.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo sridevi garapati
      sridevi garapati

      Hi Midhun,

      Thanks for your reply.

      It's working fine

      Regards

      Sridevi

      Author's profile photo Sivaramakrishnan M
      Sivaramakrishnan M

      Bro, Video is private .. Can you tell us how do i configure my iphone 5s

      Author's profile photo Nataraj Bandaru
      Nataraj Bandaru

      Hi Midhun,

      THank you for this explanation. It is help fully really.

      I do have one more query, Actually ia m from  Abap back ground and  i have a task  given for internal purpose of competency.

      The task is that, i need to develop an ABAP appication adn should be deploed on HCP.

      Is it possible?, i see there is no ABAP stac on HCP. if so , is there any alternate way?

      could you pelase suggest.

      Regards,

      raju.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Raju,

      Since your question is not related to the topic in the blog please post your question in this space:SAP HANA Cloud Platform Developer Center

      Regards,Midhun

      Author's profile photo Beata Ciepiel
      Beata Ciepiel

      Hi Midhun,

      Thank you for this very useful blog.

      I have one question refering to step 3.

      I have created an android keystore in Android Studio with extension .jks. When I then try to upload this keystore file into the Mobile Secure in step 7 (App Signing), the system requires a file with extension .p12 or .pfx. Then I cannot finilized the deployment.
      I just followed the guide you refer to via the link in step 7.

      Regards

      Beata

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Beata,

      When you are creating keystore file change the extension from jks to keystore and try. Ex. demoapp.keystore.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo Beata Ciepiel
      Beata Ciepiel

      Hi Midhun,

      I use Android 1.1.0. When I go to Build > Genereate Sigend APK... the system only allows me to create a file with extension.jks (see attch).Udklip.PNG

      I create then "key store path", "key store password", "alias" and "key password".

      Udklip.PNG

      Then I successfully genereated an APK file.

      Udklip.PNG

      Before 'App Signing' in SAP Mobile Secure I have renamed .jks file to .keystore file manually.

      Udklip.PNG

      In SAP Mobile Secure in "App Signing" I entered the renamed .keystore file, "key store password" and "alias".

      Udklip.PNG

      Then I try to publish. Unfortunately I get the response: Publishing failing with a message.

      Udklip.PNG

      I am not sure if I enter right data in the relevant fields.

      Best regards

      Beata

      Author's profile photo Dhimant Patel
      Dhimant Patel

      Instead of .jks for extension, just use .keystore and save the file... @midhun is trying and he can confirm as well.

      In all honesty, the simple way to create a keystore is from command line...  see the example here...

      How to publish Fiori app for Android in SAP Mobile Secure

      How to use Java Keytool

      Usage:

      keytool -genkeypair -alias <KeyStoreAliasName> -keypass <KeyStorePassword_6_Char_or_more> -keystore <KeystoreFileName.keystore> -storepass <KeystorePassword> -dname <”CN=Firstname Lastname, OU=OrgUnit O=Org, L=City, S=State, C=Country” –sigalg <> -keyalg <DSA, DES, RSA> -keysize <56, 168, 256, 1024, 2048 > -validity <YEAR>

      Example:

      keytool -genkeypair -alias sap123 -keypass sap123 -keystore fiori.keystore -storepass sap123 -dname "CN=Dhimant Patel, OU=RIG O=SAP, L=Chicago, S=IL, C=US" -sigalg MD5withRSA -keyalg RSA -keysize 2048 -validity 99

      Author's profile photo Beata Ciepiel
      Beata Ciepiel

      Hi Dhimant,

      Thank you. It helped to create a keystore from the command line.

      BR

      Beata

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Beata,

      As Dhimant mentioned you could rename it to keystore from jks or use the command line.

      Also make sure you are passing alias name for the field Keychain alias, it's not the password of alias.

      In the below example, I have to pass "android" as Keychain alias.

      /wp-content/uploads/2015/04/2015_04_27_23_25_53_693646.png

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Hi Beata,

      I am also getting same error. Can you please give me some solution if you found out some solution.error.PNGThanks & Regards,

      Dashrath Singh

      Author's profile photo Dhimant Patel
      Dhimant Patel

      Please check you are using correct alias and password.  In the example below, the alias is “fiorialias” and keystore password is “sap123”.  You can run the below from command prompt, if you have java installed on your system.  Also, feel free to change the values.

      Example:

      keytool -genkeypair -alias fiorialias -keypass sap123 -keystore fiori.keystore -storepass sap123 -dname "CN=John Smith, OU=Mobile O=SAP, L=PaloAlto, S=California, C=US" -sigalg MD5withRSA -keyalg RSA -keysize 2048 -validity 99

      Author's profile photo Former Member
      Former Member

      Hi Dhimant,

      Thank you so much. Now its working fine.

      Regrds,

      Dashrath Singh

      Author's profile photo Former Member
      Former Member

      Hi Midhun,


      Nice blog, thanks for sharing..!!


      I tried to develop an application, I am able to save the required destination as per the credentials for ES1 in video SAP Web IDE Local Install Part 3 - Connecting to &amp;amp; Using an SAP Gateway OData Service - YouTube.


      Name                                         ES1

      Type                                           HTTP

      Description                               SAP EPM Demo System

      URL                                           https://sapes1.sapdevcenter.com:443

      Proxy Type                               Internet

      Cloud Connector Version      2

      Authentication                          NoAuthentication



      Additional Properties


      TrustAll                                     true

      WebIDEEnabled                    true

      WebIDESystem                      ES1

      WebIDEUsage                        ui5_execute_abap

      But I could not find ES1 in dropdown in Step 5 ( Data Connection ).

      Would request you to kindly assist.

      Thanking You All..!!

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Ankit,

      After adding the destination you should refresh Web IDE to see the data connection.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Hi Mithun,

      Thanks for the reply.

      I could not find it even after refreshing or re logging in.

      Looking for your assistance.

      Thanking You All..!!

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Ankit,

      WebIDEUsage property value you given is wrong. Please find my configuration below:

      /wp-content/uploads/2015/04/2015_04_24_16_22_57_694014.png

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Hi Mithun,

      Thanks a lot for the quick help..!!

      It worked..!!

      Thanking You All..!!

      Author's profile photo Kishore Kumar
      Kishore Kumar

      Hi Midhun,

      The app publishing is getting failed with the following error. I created the key store with the cmd prompt

      keytool -genkey -v -keystore MobilePlaceFi

      rstApp.keystore -alias MobilePlaceFirstApp -keyalg RSA -keysize 2048 -validity 1

      0000

      Details

      Failed to initialize session with signing server [{"Status":"Error","Code":1001,"Message":"Fiori Client build service error: Fail on jarsigner: 1 - jarsigner: Certificate chain not found for: <pwd>. <pwd> must reference a valid KeyStore key entry containing a private key and corresponding public key certificate chain.","Detail":" Signing server session id: brh54ij12r4r4mtec8spu86at7"}]

      Need suggestion

      Regards,

      Rottwei

      Author's profile photo Beata Ciepiel
      Beata Ciepiel

      Hi Rottwei

      Pls see Dhiman Patel answer to this issue above.

      BR

      Beata

      Author's profile photo Raj Govender
      Raj Govender

      Excellent Blog Midhun! Thanks for sharing.

      Author's profile photo Sudhir Lenka
      Sudhir Lenka

      Thank you so much Midhun for sharing such a excellent and nicely explained information.

      Thanks,

      Sudhir.

      Author's profile photo Kishore Pinnamaneni
      Kishore Pinnamaneni

      Nice blog Midhun..

      I am able to follow this blog and able to deploy the app in devices. Now my questions is do we still need SMP for deploying mobile solutions or SAP Mobile Secure is kind cloud replacement for SMP?

      In SMP we have to follow some manual steps like Cordova project creation, include Kapsel plugins and the build app etc.. where as in SAP Mobile Secure these steps were eliminated with one single click/step.

      Regards,

      Kishore

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Kishore,

      SAP Mobile secure is an Mobile device management(MDM) solution on the cloud (on premise is called Afaria). And SMP is a mobile enterprise application platform which simplify the task of creating mobile apps - integration with backend systems, in-built enterprise level features etc. Hence Mobile secure is different from SMP. Mobile secure and SMP can't replace each other.

      This demo is about a build service available on Mobile secure, that helps you to create a Cordova app (it's a Fiori client) with your web app URL preconfigured with it.

      You are right, when you are creating Kapsel apps using SMP you need to execute the Cordova commands (and yeah I know it's a pain).  To avoid these steps you could use SAP Web IDE. In Web IDE you could easily create a hybrid app and add kapsel plugins without any cordova commands. You could have a look at this - Develop Hybrid App with Camera using SAP Web IDE

      More info: SAP Web IDE - Overview

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo Kishore Pinnamaneni
      Kishore Pinnamaneni

      Midhun,

      Thank you for your suggestion. and you are right. The process has become simpler now using IDE and enable KAPSEL plugins.

      Have a questioin about Offline plugin. Is there a working example created using IDE which has offline capability?

      Regards,

      Kishore

      Author's profile photo billy shen
      billy shen

      Hi Midhun,

            this article is talking about the app deployed to HCP. what if i deployed my kapsel hybird app on SMP. what should do to let my end users to download the IPA and APK file to install my app? i used Web IDE to develop the app and deployed to SMP server. However i can't find any Application URL on SMP server.

          so what should to do to let my app downloaded by other users?

      thanks,

      Billy

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Billy,

      When you are creating a hybrid application the end product is an executable file for the mobile OS. Ex. apk file for Android. You need to distribute this to the end users via data cable or e-mail or MDM solutions or others.

      The Mobile Secure I mentioned here is an MDM solution. You could upload your apps to it - it has an enterprise app store (similar to Google Play/Apple App Store). You could push these apps to the users device or the users could go to the enterprise app store to download the app to their devices.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo billy shen
      billy shen

      Hi Midhun,

         thanks for replay, so where can i find the apk and ipa file when i using Web IDE? is there any guide for me to follow to generate end product( apk and ipa file)? i wanna know both in the Web IDE local version and the cloud version.

      thanks,

      Billy

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Billy,

      From Web IDE right click on your hybrid app and deploy it to HAT. You will find the project under path /Users.../SAPHybrid/

      To create apk or ipa files you need to import these project to respective IDEs. Ex. Android Studio/Eclipse with ADT for Android. And create the files. In google search "Create apk from Cordova" you will find the steps.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo billy shen
      billy shen

      Hi Midhun,

         thanks so much for your relpay,now i know the publish solution in local environment. and i'll try SAP Mobile Secure later.

      thanks,

      Billy

      Author's profile photo Dhimant Patel
      Dhimant Patel

      @Kishore, it really depends on the use case.  While I disagree on "being a pain" to create kapsel app using SDK, the fioriclient in SMP SDK gives you a lot more options to customize your application whereas Mobile Secure build-services simply provides you w/ a container that is limited in functionality and currently limited to one build per device.  If you have license for Mobile Secure and would like to quickly mobilize an application for demo purposes then it's a good approach.  But if you want your app to have "real-life" capabilities, then you'll want to use the SDK.

      Author's profile photo Former Member
      Former Member

      Hi Midhun, great post, need small favor. I was testing this one but after step 10, I'm not getting any data when running the application. Please could you let me know what should I check. Thanks again, it is nice blog.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Pavan,

      Are you referring to the section under "developing app using web ide". Could you give more information. Are you able to see data when you run the app in Web IDE ?

      Regards,Midhun

      Author's profile photo Former Member
      Former Member

      Hi Midhun, I'm at step 10 of  "Creating app using SAP Web IDE" . I'm able to create an app and when trying to run ( which is step 9), no data is coming (like step 10). Tested the services and it looks like there is no issue with gate way service.

      Best Regards,

      Pavan

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Pavan,

      Could you give a screen shot.

      Regards,Midhun

      Author's profile photo Former Member
      Former Member

      Hi Midhun, actually I changed it to RMTSAMPLEFLIGHT and its working now. Thanks for your help. May be some issue with Product gateway service.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Pavan,

      Could you please check the backend destination configurations.

      It should look like below:

      /wp-content/uploads/2015/05/scn_709288.png

      Regards,Midhun

      Author's profile photo billy shen
      billy shen

      Hi Midhun,

           I followed this blog, but on setp 7. Click on App Signing tab and browse android keystore and enter the password. i can't selected the keystore file i generated. i used eclipse and java keytool to generated the keystore ,both not worked. my os is Mac OS, and the SAP Mobile Secure account is a trail one.

          so what the extension of the file?  i suppose it's .keystore. however, when the select windows pops up, i can select nothing, all the file are gray. check the screenshot bellow.

      thanks,

      Billy

      2D920A1D-1714-4FEE-B93D-91FC41E2E437.png

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Billy,

      Could you try it from a different browser.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo billy shen
      billy shen

      Hi Midhun,

        i tried safari, it works. Chrome may not support for this step.

      and have you tried publish a fiori launchpad app using SAP Mobile Secure? i created an fiori component app (without an index.html file) and registered to  SAP Fiori Launchpad, then i found the URL to logon this launchpad which contains my app tile. next step i used the same way you did this blog, publish this launchpad app to Mobile Place. however i can't remove hcp credential, even i add "authenticationMethod": "none" in my fiori component app.

      so is there any way to publish an app which registerd to the SAP Fiori Launchpad and without asking the end user for HANA Cloud credetial?

      thanks,

      Billy

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Hi Billy,

      You could publish the Fiori launchpad itself from the Mobile secure.Ex.https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?helpset=trial&sap-client=…

      Follow only the steps in the Mobile secure.

      Regards,Midhun

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Hi Midhun,

      It is really a very good blog. I have followed all the steps but when i try to publish app in mobile secure, the Fiori app is disabled for me. Please find the screen shot and help.

      /wp-content/uploads/2015/11/image_823566.png

      Author's profile photo Dhimant Patel
      Dhimant Patel

      Hi, we are introducing new features to Fiori Mobile capabilities and it will be released later this quarter and thus the current functionality is disabled for time being.  Thanks.

      Author's profile photo Former Member
      Former Member

      Hi Dhiman,

      It is really a very good blog. I have followed all the steps but when i try to publish app in mobile secure, the Fiori app is disabled for me. Please find the screen shot and help.

      /wp-content/uploads/2015/11/image_834283.png

      OK ! But when can it be ACTIVE again.... any estimation of Date ?

      Author's profile photo Former Member
      Former Member

      Same with me as well here....

      Author's profile photo Dhimant Patel
      Dhimant Patel

      Hi All, we are in process of updating Fiori Mobile capabilities which is to be released sometimes next month.  You will really like the new capabilities, stay tuned!

      Author's profile photo Rajiv Konduru
      Rajiv Konduru

      Hi Midhun,

      I've a question regarding the installation of the App in the users device which was developed by using SMP and Fiori. Could you please have a look at the below URL .

      https://answers.sap.com/questions/59496/deploying-smp-fiori-application-to-user-mobileandr.html

      Thanks & Regards,

      Mahesh

      Author's profile photo Former Member
      Former Member

      Hello Guys,

       

      Any one can you help me the link for 30 Day trail SUP pls ?

       

      Regards

      hasi

       

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      What is recommended is "SAP Cloud Platform Mobile Service development and operations service" on SAP Cloud Platform instead of SUP for devleoping mobile apps.