Setup macOS Sierra to develop KAPSEL Application in Eclipse
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.
At first we will install the necessary components.
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:
We simply run the DMG installer as usual and Java will update to the latest version.
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:
We select the grey box “Software Downloads” and on the next screen “by Alphabetical Index (A-Z)” by pressing the “>” sign in the front .
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.
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:
- ) Either we can download each file directly by selecting its name. This will download the file to the usual download directory of the browser
- ) 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.
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.
Sometimes it throws an exception at installation time:
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:
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
and scroll to the bottom. In there you will find the latest installed version. In this case:
<product compatibilityVersions=“188.8.131.52, 184.108.40.206, 220.127.116.11” name=“SMPSDK” version=“18.104.22.168”>
So we have successfully installed SMPSDK3.0 SP13PL03
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.
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
and now we will check the installation by using
Make sure it has no recommendations and warnings. If there are any like in the following screenshot, please correct them before you continue:
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
After the changes are complete, do not forget to reload the new settings by typing:
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:
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.
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:
Cordova create testApp com.placeworkers.testapp testApp
Cordova platform add ios
If everything is fine, it will come back with the following screen in the emulator:
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.
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.
Cordova platform add android
Once completed, we will see something like the following:
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:
If Android Studio is properly installed on the client, lets start it and open
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.
Once these files are installed properly, please open
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.
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.
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.
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:
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.
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:
We do select the J2EE Java Development Version, cause this gives us the least issues with SAP HANA plugins.
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
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.
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.
Next we want to install the SAP plugins as well. Again we go to HELP->Install new Software and we enter the following URL:
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.
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
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.
After this step the installation process is completed so far and we will check if everything is working fine.
We open Eclipse and we create a new Cordova project by entering
File -> New –> Project
And we select MOBILE->Hybrid Mobile (Cordova)Application Project
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.
On the next screen we select iOS and Android as platform and press Finish.
If everything works fine so far, we can run the application, by pressing right mouse on the project name and selecting RUN -> Platform.
This will now start the selected Emulator and run the application.
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.