How to install Hybrid Application Toolkit (HAT) on Mac

Introduction

Let me complete my previous blog with some considerations regarding the installation of HAT on MAC OS X (El Capitan). I’m going to show here just the main differences between this installation and the one on Windows. The required steps are pretty much the same, but as you might know with Mac platforms you can also deploy your apps to iOS device. This requires the installation of a development tool named XCode. Further to that you need also to install the corresponding Command Line Developer Tools. Of course this is only needed if you want to develop apps for iOS: if you want to stick with Android apps you just need to install the Android SDK as explained later in this document. Here in this guide I’m going to describe how to install all the required tools for both development platforms: iOS and Android.

One could think that the installation of HAT and its prerequisites on MAC is harder than on Windows, but I can show here that it’s even easier if we use the Terminal window to issue the installation instructions.

Let’s start from the beginning.

Prerequisites

We are assuming here that Xcode is already installed and Command Line Developer Tools as well. You can get the first one from the Apple store or you can access the https://developer.apple.com/downloads/ site and download it from there, together with the Command Line Developer Tools.

If you have downloaded both packages from this developer site you can install them very quickly: for the first one, once mounted the .dmg file, you just need to drag & drop the Xcode app to your application folder.

The second tool can be installed by performing the following steps:

1) Double click on the .dmg image file in order to mount it

2) Double click on the installation package

3) At the Introduction screen click on Continue

4) At the License screen click on Continue

5) Click on Agree

6) At the Installation Type screen click on Install

7) Provide your credentials

8) At the Summary screen click on Close

9) Command Line Developers Tool is installed

You can continue now with this guide

Let’s get started!

This is what we are going to install today:

• Homebrew (Homebrew — The missing package manager for OS X) – Homebrew is a package manager which helps you to install some components you need direclty from the command line. It also symlinks their files into the /usr/local folder
• Cask(http://caskroom.io/) – Cask is a tool which extends Homebrew and allows you to install large binaries like big applications on your Mac direclty from the command line
• Oracle Java JDK – It’s installed through Cask
• Apache Ant – It’s a build tool required by Android development
• Android SDK – Required for Android Development
• Kapsel – Required for adding Kapsel plugins to your hybrid apps
• Configuration of some environment variables
• Bower (http://bower.io/) – It’s a package manager specific for the web and it’s required by the HAT installation procedure
• NodeJS (https://nodejs.org/en/) – Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model      that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
• ios-deploy – Required for deployment on iOS Simulator/Device
• ios-sim – Required to manage iOS Simulator
• Cordova (https://cordova.apache.org/) – Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms’ native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s sensors, data, and network status.
• Kapsel CLI – It’s the Command Line Interface for Kapsel
• HAT – Hybrid Application Toolkit

Don’t be afraid about the number of the components we are going to install because the entire process will be quite straightforward by using the Terminal window.

1) Open a Terminal window on your Mac

2) The first thing to install is Homebrew: this will allow us to install other components very smoothly. The command to install Homebrew is

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

3) Now let’s use Homebrew to install Cask, this will allow us to easily install Java JDK in the next step

     brew install cask

4) Install Oracle Java JDK by using the command

     brew cask install java

     this will install automatically the latest version

5)  If you are going to develop and deploy to Android platform you need Apache Ant. You can skip this step and the next one if you don’t need to develop for

     Android. This is the command to install Ant

    

     brew install ant

     It should be installed under the following path: /usr/local/Cellar/ant/1.9.6

6) Let’s now install the Android SDK through the command

     brew install android-sdk

     It should be installed under the path /usr/local/Cellar/android-sdk/24.4.1

7) Once installed you need to configure it. Run:

    

     android

     The Android SDK manager starts and you can select here the required components you want to install. Here it’s a list of just the ones required to make it      working

• Click on the Install 10 packages button

    

•      Accept the License

    

•      The installation starts: when it finishes, close the Android SDK manager tool.

8) Create a virtual device for Android development.

•      Run the command android avd
•      Click on the Device Definitions tab
•      choose the device you want to use as a template for your emulator (i.e. Nexus 4)
•      click on Create Device on the left side.
•      Provide the following information and click on OK

    

•      Then close the Android AVD Manager

9) Another required tool is NodeJS. You can install it by going on the product web site and downloading it from there, but I’m going to show you this quicker way to do it:

     brew tap homebrew/boneyard

     brew install homebrew/versions/node012

With this command I’m going to install a specific version of Node, in particular I’m going to install the latest build of the version 0.12 which, at the time I’m writing, is 0.12.7. I’m installing this specific version because this is the one supported and required by the HAT installation procedure.

10) Now it’s the time to install the Kapsel plugins. Download the package from the SAP Store. I’m assuming that the package has been downloaded into the folder Desktop/temp of your Mac. From the terminal, run the following commands:

     cd ~/Desktop/temp

     tar xvzf SMPSDK30010P_1-21011833.gz

     unzip ebf25343/modules/KapselSDK/KapselSDK.zip -d ~/KapselSDK

Now, in your home folder you should find a new subfolder named KapselSDK

11) Some environment variables must be defined in the system. According to the HAT installation guide, the best place to define these variables is the .bash_profile file that you should find in your Home folder. If this file is not present you need to create it. So

• run “cd” to go back to your home folder
• run “ls -la” to check if this file is present or not. if It’s not present create it by running the command “touch .bash_profile”
• run “nano .bash_profile” to open the file with the nano editor
• copy and paste the following lines in the file

export JAVA_HOME=$(/usr/libexec/java_home)
export ANDROID_HOME="/usr/local/Cellar/android-sdk/24.4.1"
export ANT_HOME="/usr/local/Cellar/ant/1.9.6/libexec/"
export KAPSEL_HOME="/Users/virtual/KapselSDK"
export PATH=$PATH:/usr/local/bin/ant

ℹ NOTE: please pay attention to the two variables ANDROID_HOME and ANT_HOME where there is hard-coded the version numbers of the two softwares. You must change them according to your installed versions. Pay also attention to the variable KAPSEL_HOME where you have to replace the user named “virtual” with your user.

 

• press “CTRL-O” to save the file, confirm the name by hitting ENTER and then press “CTRL-X” to exit from the editor
• run “source .bash_profile” to apply the changes immediately

12) You can check that the changes have been applied by running the command “export“.This will print out the complete list of the exported variables where you should be able to find the one you defined

    

13) Install ios-deploy, cordova, ios-sim and the Command Line Interface(CLI) for Kapsel with the following commands:

     npm install -g ios-deploy@1.8.2

     npm install -g cordova@5.2.0

     npm install -g ios-sim

     npm install -g ~/KapselSDK/cli

14) Finally we can start the installation of HAT. I’m always assuming that your HAT .zip package is located as well under he folder Desktop/temp of your Mac. These commands will extract the .zip file under the hat subfolder of your home directory and will make all the .sh files as executables. Then the setup procedure will be launched

     unzip ~/Desktop/temp/SAP_HAT_local_1_9_7.zip -d ~/

     mv ~/SAP_HAT_local-1.9.7/ ~/hat

     cd ~/hat

     chmod +x *.sh

     ./setup.sh

15) The installation starts. Some other required components and libraries will be installed. When the web page shows up you can close the splash screen and select both the platforms on the top of the screen. Then click on the Check All button

    

16) From this moment on it continues at the same way I showed in my blog for HAT Installation on Windows platform.

Have fun!