Skip to Content

Update: SAP’s recommended tool to develop SAPUI5 apps is using SAP Web IDE. So I would suggest you to start with Web IDE instead of Appbuilder. More info: SAP Web IDE – Enablement


Create a new project in Appbuilder

I am developing a hybrid app using the SAP Appbuilder and deploying it to SMP server (It uses the application created in part 1). Appbuilder helps me to do this with zero coding. Setup SAP Appbuilder in your system.

1. Open Appbuilder and click on “New” button and provide the details as given below and click on “Confirm“.

ScreenHunter_120 May. 26 22.43.jpg

ScreenHunter_160 Jun. 01 16.04.jpg

2. Click on Help> SMP Settings and provide the following settings. You can find your IP using Google. The credentials provided is backend credentials. Click on “Confirm” to create a new profile.

ScreenHunter_160 Jun. 01 16.07.jpg

3. Perform the on-boarding of the Appbuilder by clicking on the pencil icon in SMP Services panel in left side. Choose the SMP profile we defined and click on “Retrieve” button. Click on “Confirm” button after getting the success message as given below.

ScreenHunter_121 May. 26 22.49.jpgScreenHunter_155 May. 31 23.26.jpg

Populating data using a SuperList

1. Select “Designer“> New SuperList. In the new dailog window leave all fields as by default and click on “Confirm“.

ScreenHunter_124 May. 26 23.49.jpgScreenHunter_125 May. 26 23.49.jpg

2. Click on dataStructure button on right side to select data source.

ScreenHunter_125 May. 26 23.50.jpg

3. Click on “” button and select “CUSTOMER” and click on “Confirm“. CUSTOMER is the name of the table created in HSQDB as mentioned in How to use Integration Gateway with SMP 3.0.

ScreenHunter_157 May. 31 23.28.jpg

4. Enter “ID” inside Navigation Parameters textbox and click on “Confirm“.

ScreenHunter_156 May. 31 23.28.jpg

5. Locate “Label” in Toolbox> Drag and drop 2 labels to phone screen. Select first label and change it’s properties> click on button on right side> delete content inside “Express Definition” textbox> double click on “ID“> Confirm. For the second label select FIRST_NAME.

ScreenHunter_138 May. 27 02.25.jpgScreenHunter_160 Jun. 01 16.26.jpg

6. Save the project and click on “Return” button. From toolbox drag and drop Superlist to phone screen and set the style as given below:

ScreenHunter_158 May. 31 23.30.jpgScreenHunter_157 May. 31 23.30.jpg

7. Click on metadataFile button on the right side> Select Superlist file created and click on “Confirm“. You will get a list on the phone screen now. Click on “Run” button to see the app running in a simulator. We have called Odata service to get the data from HSQDB backend.

ScreenHunter_158 May. 31 23.32.jpgScreenHunter_160 Jun. 01 16.37.jpg

Steps to deploy the app to SMP server is explained here, Deploy Kapsel in SMP server. Once the project is deployed> import the project to Android Developer Tools (Eclipse IDE) and run the app.


Go to Part 1

Related blog,

Example on SMP 3 Connecting to SAP Backend

Thanks,

Midhun VP

@midhunvptwit



To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. ANGELIKI PISIRITZI

    Hi Midhun,


    Finally i made it work following your tutorial! It is really helpful!!


    I have 2 questions

    1. How do you inport your appbuilder project  in eclipse through kapsel plug in?

    2. How did you make the registration device on SMP?


    Keep on publishing amazing tutorials like this!


    Thanks in advance

    Angeliki

    (0) 
    1. Midhun VP Post author

      Finally!! Good job 🙂 .

      1. How do you inport your appbuilder project  in eclipse through kapsel plug in?

      From Appbuilder>Deployment>Workspace setting, you will find the path of the project saved. Setup Android SDK in your system and import this project to it and run !!.


      2. How did you make the registration device on SMP?

      In the example I am using the Kapsel logon plugin, it makes your life easy, it gets you a login screen> enter the SMP details and credentials and it takes care of the login (as in the video).


      Midhun VP

      (0) 
      1. Marius Stoica

        Hi Midhun,

        1. I’m trying to set up the Android SDK. What plugins I need to install in order to import the AppBuilder application and to deploy it to a real (not simulator) device?

        2. There is a step (or more) that I’m missing. In AppBuilder we create the app. We see the app in SMP. How do we deploy the app to a device (if it’s hybrid)? I’m probably to used to SCC where we install the container on a device and with the SCC user we get the connection going, but here? There is no container to install.

        Can u shade some light?

        Thanks,
        Marius

        (0) 
        1. Midhun VP Post author
          • You will find a lot of information on how to install Android SDK. After installing the SDK in your system, import the project you created using appbuilder to the workspace (From Appbuilder>Deployment>Workspace setting, you will find the path of the project saved.) . To import the project: from android sdk, File>new >project> Android> Android project from existing code>browse.
          • Connect your device to your system> Right click on the project and run or run the app in a simulator (a simulator opens when you run).

          Midhun VP

          (0) 
          1. Marius Stoica

            Hmmm …

            1. Tried like you said but something is wrong:

                 used these paths:

                 c:\kapsel\app

                 c:\kapsel\app\app

                 c:\kapsel\app\app\www

                 c:\kapsel\app\www

            I get the same error “Select a directory to search for existing Android projects” 🙁 (with and without “SAP Development Tools for Eclipse“)

            2. I guess this works fine for testing purposes, but for productive use? it’s not “ok” to simulate for each device. How do I go “productive”? Btw, the simulator doesn’t start 🙁 and I get no error message.

            (0) 
            1. Midhun VP Post author

              1. Looks like you haven’t configured cordova and android properly.

              After developing the app using appbuilder when you deploy the app as mentioned here, Developing SMP 3 Mobile App using Appbuilder, Kapsel and SMP 3 Trial – Part 3 the android supported files are added to the project you created, you will see some command windows poping up executing cordova commands. Once that is successful you will be able to import the project to android SDK.

              2. The project you created can be used for production. The android project you imported to the android sdk can be exported as apk file. You can give the apk file to the end users for installation in their devices. You need to look at some basics of Android to do so. You can follow some android tutorial in youtube.

              Midhun VP

              (0) 
              1. Marius Stoica

                1. In app builder, I’ve only put the paths for Kapsel in “Workspace settings” (and I’ve verified it that it’s correct), in SMP settings I’ve checked the profile created and the test was successful. When I deployed the project, the “Native plugins” are like this:

                     the Cordova path was empty (to use global path – do I have o set this?)

                     the Kapsel path is set and correct

                     the Android minimal SDK version was set, by default, to 11 (do I have to change this?).

                After all the process was completed, I couldn’t import the project to Eclipse 🙁 . ANy other ideas ?

                2. The point to my question was: At an earlier version of SMP (was called SUP 😛 ) we had SCC wich was used to deploy and control the app from distance (not on premise) using the Hybrid Web Container who made the connection between the device and the SUP server. It’s hard for me to understand how a newer version doesn’t have this capability 🙁 It’s not SAP like to have to send the .apk file to all devices manually, after importing the project manually to Eclipse (that has no plugins for this). Although after installing SMP on premise we found a newer version of SCC, there is no Eclipse prepared to deploy the app to SCC. And even so, no Hybrid Web Container to receive the app. So there are some differences between the two, and/or inconsistencies.

                Are the capabilities in development ? Or we didn’t discover them yet?

                PS: AppBuilder is version 1.0.1252 if it matters in any way 😛

                (0) 
                1. Midhun VP Post author

                  1. You have to make sure you installed the appbuilder, cordova, smp 3 sdk (to access kapsel plugins) and android properly.

                  To check the cordova installation go to Start>run”cmd” and enter cordova -v. The response is given below:

                  ScreenHunter_162 Jul. 03 18.30.jpg

                  To check the android SDK installation, from android SDK run the Android SDK Manager from menus in top left. It should show the packages installed, if not, install it. Given below is the screen shot:

                  ScreenHunter_162 Jul. 03 18.36.jpg

                  After installing the SMP SDK you will find the kapsel plugins in the path as given below (this patch is mentioned in appbuilder):

                  ScreenHunter_162 Jul. 03 18.38.jpg

                  After successful deployment of app from appbuilder the project should have the android and plugins folders as given below:

                  ScreenHunter_162 Jul. 03 18.40.jpg

                  ScreenHunter_163 Jul. 03 18.40.jpg

                  Then you can import this project to your android workspace to run the app in a device. if any of the installations is not proper you will not find the logon related plugins inside the plugins folder or the android folder inside the platforms folder.

                  Appbuilder in background is running the cordova commands to add the plugins and android platform to the app you created. I choose appbuilder to develop this demo because it helps me to develop app with zero coding. But in another demo I am writing the cordova commands manually. You can have a look at it to understand how cordova works, Get your hands dirty by trying Kapsel with SMP Cloud

                  2. HWC is a proprietary solution from SAP and it is replaced with cordova hybrid app in SMP 3. In the older approach also you have to install the container in the phone. After successful registration only you will control the app remotely. In the new approach after installation of hybrid app in a device you can push the updates to the device remotely using the appupdate plugin in kapsel. And you are right, there are differences with SCC and new admin cockpit, but the new admin cockpit is easy when compared to SCC.

                  Midhun VP

                  (0) 
                  1. Marius Stoica

                    Hi Midhun,

                    I’ve followed your line and here is my update:

                    cordova: 3.5.0-0.2.4

                    android SDK tools: 23.0.2

                    Android SDK Platform-Tools: 20

                    Android: 4.2.2

                    Android: 4.1.2

                    Android: 4.0.3

                    After restarting and rebooting everything I’ve redeployed the app.

                    The Android device is … almost empty … in any case not what u’ve shown …

                    /wp-content/uploads/2014/07/1_491942.png

                    but the plugins directory is close 🙂

                    /wp-content/uploads/2014/07/2_491945.png

                    So there might be something wrong.

                    I’ve started the cordova project manually as you’ve shown us in the second blog but I get an error message:

                    /wp-content/uploads/2014/07/3_491946.png

                    where ‘ant’ is (as far as google can tell me 😛 ) Apache Ant(TM). I can start downloading it and install it. I’ll come back with an update.

                    Thanks for the step by step help 🙂 helps with the debugging.

                    I suppose that after this the deploy from Eclipse to Device should work just fine. Fingers crossed.

                    2. I understand now the “new” point of view. The thing is that .. it’s not enterprise like the deployment system, and in my case the devices are spread around the entire country so I will have to devise a strategy for it.

                    Thanks

                    (0) 
                    1. Midhun VP Post author

                      Installation of Apache ant is a part of appbuilder installation and you are missing that, resulting in error during creation of android project.

                      Midhun VP

                      (0) 
                      1. Marius Stoica

                        Hi Midhun,

                        I’ve installed Apache Ant, and after that I’ve debugged Cordova. My problem was with Cordova. After taking it step by step with it (all those commands from cordova site) made on a dummy project, everything went just fine.

                        Thanks,

                        Marius

                        (0) 
                        1. Tirupati Mudumadigela

                          Hi Marius,

                          I am facing the same problem, Under the Kapsel\MyProject\platforms\android –> only  assets folder I am able to see;

                          Similar to what you have mentioned in the earlier screen shot, I have also installed the Apache ant, but no luck. Kindly suggest what are the steps followed to resolve this issue.

                          Thank-You In Advance.

                          Regards,

                          Tirupati

                          (0) 
                          1. Marius Stoica

                            Hi,

                            I followed the command lines that you see here “Apache Cordova API Documentation

                            and debugged them. If you search the errors that you receive while creating a Cordova project from command line, you will make it work. Once it works from command line, AppBuilder will work just as well.

                            Regards,

                            Marius

                            (0) 
                            1. Tirupati Mudumadigela

                              Thanks Marius for the information,

                              I have followed the command lines as per the Apache Cordova API Documentation, I am able create a Cordova project by using command line, also by using AppBuilder.

                              Created New Project in Eclipse IDE by using option ‘Android Project using existing Code’ while running the App as Android App the data is not populating(Showing a Blank Screen) on the device upon verified the console, it is throwing following Error Message.

                              Error :

                              D/CordovaLog(14719): file:///android_asset/www/index.html: Line 48 : Uncaught TypeError: Cannot read property ‘IabUi’ of undefined

                              E/Web Console(14719): Uncaught TypeError: Cannot read property ‘IabUi’ of undefined:48

                              Kindly suggest.

                              Many Thanks !

                              Regards,

                              Tirupati

                              (0) 

Leave a Reply