Skip to Content

As I tried to setup my new Mac with Mac OS Sierra to allow development of SAP Kapsel applications, I have realised that there are a few things different to the last installations. Because of this I decided to write this short documentation together with my colleagues Tim Netzlaf and Aram Soltanian.

The goal of this documentation is to have a working scenario and to be able to develop Kapsel Apps in Eclipse for Android and iOS and to let them run in a simulator from Eclipse.

Component Installation

At first we will install the necessary components.

Java

Even Java is already installed on Mac at rollout, we want to get the most actual Version of Java SDK installed. We download the Java SDK from this location:

http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html#javasejdk

We simply run the DMG installer as usual and Java will update to the latest version.

SMP3.0SDK

At the moment of writing this document, the most actual Version of SMP3.0 SDK is SP13 PL03. If we have no SDK installed yet, it is enough to download SP13 PL0 to PL03 from the website and install it in correct order. It is not necessary to install all Versions prior to SP13, but it is necessary to install SP13PL00 first. We need to install SP13PL01 and SP13PL02 before installing PL03, so we do always install all Patches of a ServicePack in correct order.

We will download the files from source: https://support.sap.com/swdc which opens the following screen:

Picture1.png

We select the grey box “Software Downloads” and on the next screen “by Alphabetical Index (A-Z)” by pressing the “>” sign in the front .

Picture2.png

Under the “M”-Folder we will find “SAP Mobile Platform SDK” and select “SAP MOBILE PLATFORM SDK 3.0” on the next screen. On the following screen we select “SUPPORT PACKAGES” and then “SAP MOBILE PLATFORM SDK” again on the next screen.

Picture3.png

Now a list of all available ServicePack (SP) and PatchLevel (PL) Files is shown.

First we have to select the correct operating system. In our case it is MAC OS.

After that we can download the necessary files. I have marked them already in the following screenshot.

There are 2 options available:

  1. ) Either we can download each file directly by selecting its name. This will download the file to the usual download directory of the browser
  2. ) We can use SAP Download Manager. To do this select the files as shown by ticking the box in the front and press the download basket button at the top right corner of the list.

Screenshot 2016-09-16 09.21.54.png

Once all files are downloaded to the local machine, we need to install them one after the other in correct order.

In my case the first file would be SMPSDK30013_0_21011833.TGZ and it unpacks to folder ebf26454. The folder contains a file named “InstallSDK.command” that we start with a double click. It takes a while to open and we simply follow the installation instructions. Please do not use the setupMacOSX.jar file, cause it simply will not work.

Screenshot 2016-09-16 10.11.02.png

Sometimes it throws an exception at installation time:

Screenshot 2016-09-16 10.18.46.png

In this case check if an old instance of a installer is still running and finish it first. Of no other installer is running, delete the following file:

~/<username>/InstallShield/SMPClient/instance.running

and run the installSDK.command file again by double click.

If you delete the complete folder, it misses which EBF are already installed and you need to install the sequence again, starting at SP13PL00 in our case.

Once the installation of the EBF is complete, delete the EBF Folder and continue with the next PL until all files are installed.

If you are uncertain which version of SDK you have installed already, open the file

Smpsdk_product_info.xml

and scroll to the bottom. In there you will find the latest installed version. In this case:

<product compatibilityVersions=“3.0.13.0, 3.0.13.1, 3.0.13.2” name=“SMPSDK” version=“3.0.13.3”>

So we have successfully installed SMPSDK3.0 SP13PL03

NODE.JS

We need NODE.JS at least to get NPM. This will allow us to install CORDOVA from the command line. There are 2 options to install this file.

By the first option we show how to download the files via a webpage. We encountered several issues with the latest Version, so we usually take the previous version and use it. Usually that solves the open issues.

Go to: https://nodejs.org/en/

This will open the following screen and as mentioned we select Version v4.5.0 TLS. The combination of V6.6.0 that is available for download on the WebPage and MacOS Sierra caused issues in the installation and we have not been able to get a complete Cordova installation using this download.

Screenshot 2016-09-17 08.43.22.png

Once Version 4.5.0 is downloaded, simply run the installer and it will install NPM and NODE.JS on your machine.

AThe second option will use the terminal command line and HOMEBREW. It is a little handcrafting and so not the simple drag and drop process, but it gives us more control and for us the more reliable result. Please use Terminal and run through the following process:

First we install HomeBrew on our machine:

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

After this initial installation is complete, update brew just to be on the safe side

brew update

and now we will check the installation by using

brew doctor

Make sure it has no recommendations and warnings. If there are any like in the following screenshot, please correct them before you continue:

Screenshot 2016-09-17 08.59.44.png

in this case it informs us about some issues with the path. To solve this it is necessary to change file .bash_profile using the command

sudo nano ~/.bash_profile


and enter the following line


export PATH=”/usr/local/bin:/usr/bin:$PATH”

After the changes are complete, do not forget to reload the new settings by typing:

source ~/.bash_profile

If you have changed the PATH Variable, type set and make sure the $PATH is still correct and has no special characters. Sometimes the editor mixes up with the “ sign and the path will be corrupted. If you see a path with numbers inside, like in this example:

…m:/usr/local/mysql/bin:?\200\234/Users/…

Then you need to check the .bash_profile again, especially make sure the ” signs are set correctly.

Ok, your brew doctor check does not give any more issues and recommendations, then we finally continue with installing node

brew install node

After this step has completed without errors, the preparation is done and we can install cordova in the next step. This will test our node installation as well.

CORDOVA

To install cordova we open the terminal again and we type

sudo npm install –g cordova

After entering the admin password, the process will continue automatically, it will download the necessary files and install cordova on the local machine.

To check the installation, we build a small project:

Move to our documents folder and run the following commands:

Cd ~/documents/workspace

Cordova create testApp com.placeworkers.testapp testApp

Cd testApp

Cordova platform add ios

Cordova prepare

Cordova run

If everything is fine, it will come back with the following screen in the emulator:

Screenshot 2016-09-17 10.34.35.png

If there is an issue with the run command, please check if XCODE is installed on your machine. If not, please install the latest version of XCODE on your machine and make sure the emulator is working in XCODE.

Any previous error beside the Xcode emulator is most likely due to problems with the cordova installation and npm. In that case go back to the previous step and check if npm, node and cordova got installed without issues.

Prepare Android development

Once we can run Cordova apps on iOS simulators it is time to make sure, we can run Android apps as well.

We can do this by either installing Android with the Android Stand-alone SDK tools or using Android Studio.

For a more detailed installation guide please follow this instruction: https://cordova.apache.org/docs/en/latest/guide/platforms/android/

We found it the easiest way to start with the Android Studio download. So please download the installer from this location and follow the instructions.

https://developer.android.com/studio/index.html 

Picture4.png

Now as we have Android Studio installed, we need to start it and configure the necessary runtimes and emulators.

First we need to find out, which API Level of Android we need to run our project. From the iOS example, we have our first Cordova project. We open our Terminal, navigate to this project and add Android as platform to it.

Cd ~/documents/workspace/testApp

Cordova platform add android

Once completed, we will see something like the following:

Screenshot 2016-09-17 10.56.39.png

This tells us, we do need Android 5.2.2 and Target Version 23.

If Android is already added as a platform and we need to check the necessary version, we can simply run

Cordova platform list

Which does return the following list in my case:

Screenshot 2016-09-17 10.59.38.png

If Android Studio is properly installed on the client, lets start it and open

TOOLS->ANDROID->SDK MANAGER.

Make sure the following items are installed properly:

  • Android Platform SDK for the targeted version of Android as shown above (6.0 or API Level 23 in our case)
  • Android SDK Build-Tools
  • Android SDK Platform-Tools
  • Android SDK Tools
  • Android Support Repository (found under Extras)

In my example I have added a few more files, because we do some other developments as well. As we can see on the screenshot, the files are installed in location ~/Library/Android/sdk. Please note this location, cause we will need it later.

Screenshot 2016-09-17 15.44.58.png

Once these files are installed properly, please open

TOOLS->ANDROID->ADV Manager

And create a new Virtual Device by pressing the button at the bottom left corner. As an Example we create a Nexus 5x. Make sure it is running on the same version of Android we have seen in out Cordova test. (23 in our case)

Select PHONE -> Nexus 5X and press NEXT.

Screenshot 2016-09-17 15.33.19.png

On the Next Screen you have to select the System Image. If you do this the first time, it is perhaps necessary to download the MASHMALLOW Image first by pressing the Download link right to the name. If it is already downloaded, select the relevant one (x86) and press NEXT.

Screenshot 2016-09-17 15.33.27.png

On the last screen you can simply check if all values are correct or change some parameters. In this example we simply accept the values by pressing FINISH.

Screenshot 2016-09-17 15.34.46.png

Now we can see the created device in the list of available emulators. For testing you can start it from here and once started close it again.Screenshot 2016-09-17 15.36.06.png

We need to make sure that the new created settings are available in terminal and Cordova as well. To do this, please enter the path and system variables in .bash_profile. As we already know, we edit the file by entering:

Sudo nano ~/.bash_profile

And in there we enter the following lines:

export ANDROID_HOME=”~/Library/Android/sdk”

export ANDROID_SDK_ROOT=”~/Library/Android/sdk”

export PATH=”$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/usr/local/$

The location of ANDROID_HOME and ANDROID_SDK_ROOT is the same as in the screenshot, seen earlier in the document. Please use your location, shown in your ANDROID SDK Manager. Once the path is set correctly, you can run the SDK Manager simply by entering ANDROID in the terminal.

Once these steps are completed, test if it is working fine by running

Cordova run android

In Terminal. This well download necessary files, compile and run the app in the emulator.

ECLIPSE

As we want to do our development with Eclipse, the next step is to download the IDE. We will download ECLIPSE Mars using this location:

https://eclipse.org/downloads/packages/release/Mars/2

We do select the J2EE Java Development Version, cause this gives us the least issues with SAP HANA plugins.

Screenshot 2016-09-17 15.57.12.png

Once downloaded, unzip it and copy the file to your programs folder. Now Eclipse is installed and ready to run. Just start it

We now need to install a few plugins, to get Eclipse working with Cordova.

At first we will install the THyM Cordova plugin:

Go to:  Help (in the upper menu) -> Install New Software

Picture5.png

and on the next screen type the following url into “work with” http://download.eclipse.org/thym/releases/latest/ and press return.

Select all items from the following list and go on with the “next” button.

Picture6.png

Next two windows click next and don’t forget to agree the term of the license. Then click on finish. Now the plugin will be installed.

Picture7.png

Next we want to install the SAP plugins as well. Again we go to HELP->Install new Software and we enter the following URL:

https://tools.hana.ondemand.com/mars

On the following screen we select the tools for

  • SAP Mobile Platform Tools
  • UI Development Toolkit for HTML5

And run through the installation process, again do not forget to accept license agreement.

Picture8.png

UI5

In the last step we download UI5 Runtime from openui5 and copy the files to the SAP SDK Folder for future reference.

Download the latest OpenUI5 Runtime from: http://openui5.org/download.html

Picture9.png

Unzip the files and copy it to the SMP SDK installation folder. We do need this folder when we want to create UI5 applications with Kapsel.

Picture10.png

After this step the installation process is completed so far and we will check if everything is working fine.

Test

We open Eclipse and we create a new Cordova project by entering

File -> New –> Project

And we select MOBILE->Hybrid Mobile (Cordova)Application Project

Picture111.png

We press next and we enter the Values of our new Project

We call our application Inst Test, cause we want to check if the installation is working fine.

Picture12.png

On the next screen we select iOS and Android as platform and press Finish.

Picture13.png

If everything works fine so far, we can run the application, by pressing right mouse on the project name and selecting RUN -> Platform.

Picture14.png

This will now start the selected Emulator and run the application.

Picture15.png

If this is the case, the installation process is complete and we can start developing Kapsel applications from inside Eclipse.

We hope this explanation helps to do the basic setup for your Kapsel development system.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply