How to install Hybrid Application Toolkit (HAT) on Mac
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.
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
- ios-deploy – Required for deployment on iOS Simulator/Device
- ios-sim – Required to manage iOS Simulator
- 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:
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:
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 firstname.lastname@example.org
npm install -g email@example.com
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
chmod +x *.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.
Hi , Thanks a lot for the detailed blog. I tried and managed to run my first Kapsel App on a iOS simulator with WebIDE and have few suggestions which could have saved my time.
1. In Step 10, SMP SDK installation, the blog says that the download is a “.gz” file and just says to do a unzip. But to install the SDK, I had to change permissions on the files and run a “installSDK.command”. I wasted some time to figure this on my own.
2. In Step 14, for the HAT installation, a link to the download of HAT would be helpful. I had to search the web and then found the download link in the other blog.
3. Also this page does not talk about the proxy settings but the Windows blog has a detailed description on Proxy settings, may be you could link that here in this blog.
4. Then in the blog http://scn.sap.com/community/developer-center/front-end/blog/2015/07/13/how-to-install-hybrid-application-toolkit-hat-on-windows-part-3-of-3, Steps 12 and 13 were interchanged when running on MAC. I had Step 4 as “Generate HAT connector server certificate” where I had to provide a password for the local keystore.
5. In "Step Run HAT and test its connectivity with SAP Web IDE" , here in Step 4, you could point out how to enable the “optional plugins” to get the HAT. I had to search other blogs to find this out.
Thanks a lot and I provide my comments here so that we could improve the blog further and save the time for the other people who try out this blog.
Hi Sangeetha, thanks for your precious comment! I'll try to adopt your suggestions next time I have to update my blog for some important release change.
Thanks for describing how to install the HAT connector on a Mac.
I used already your other blog to install HAT successfully on my Windows PC. That worked, but when following your blog here I have problems on my Macbook:
Again the Android part is working fine as on my Window PC but when doing the setup for IOS I run into the warnings which you can see on the following screenshot:
Especially the "you may need to install a developer profile" looks suspicious to me.
I already generated a developer profile which I've downloaded to my MAC.
But where is the connection to the HAT connector and later Cordova build.
How does it know where my developer profile is?
I'm new to the Mac world and you might know immediately what is missing on my side.
Thank you very much for your help.
for the first warning, this is ok. It means that you can no longer pass the preview link to the Companion app on the simulator.
For the second issue, unfortunately this is the first time I see this kind of problem. We could start investigating if this is something related to HAT installation or not.
You could perform the following steps:
The above commands simply create a very basic cordova app for you, just an “HelloWorld” app.
I would prefer to be contacted by direct messages, so that we don't fill this blog with a lot of answers.
If you put you mouse over my name here you should see "Send Direct Message".
Thank you very much Simmaco for your support this morning.
HAT installation works now on my Mac 🙂
Basically developers who use your above guide should make sure that the created "HelloWorld" application runs once in xcode without errors (as in xcode you can set your Dev Profile as described below in ).
Additional steps which were necessary for my successful (IOS) HAT installation on Mac:
Create and build a "HelloWorld" on terminal
Result: Build failed with errors
Fix it in xcode:
Result: Again Error popup: “Failed to code sign “HelloWorld”… ". On the error popup you find a “Fix Issue” button
And once that has been done, also the HAT installation - especially the cordova build project step - runs also successfully through.
Thank you for the detailed blog it was the reason I was able to complete the HAT install on my Mac which runs El Capitan. I was considering to give up on the install as I had started down a path of manually setting up my system via direct downloads of the pre-req software. Using brew installation method helped me out and I finally managed to complete the install.
One item on step 7 for me was an issue with selecting "Android Support Repository" as it was not available on my installation of the sdk (although exactly the same version). In the end I included the "local Maven repository for Support libraries" which was an option and I think helped , although around the same time I was removing the manually downloaded version of the sdk.
Hi, I have problem to run hat by terminal .... it's return me , always, error status
This blog post is outdated. We have reached end-of-maintenance for HAT local add-on. You can no longer download this tool from the SAP Store. We no longer support this tool. You are strongly advised to make use of our Cloud Build Service provided through Mobile Services. More information can be found here: https://blogs.sap.com/2018/08/16/announcing-end-of-maintenance-for-hybrid-app-toolkit-local-add-on-local-builds-only
Product Owner – Hybrid Application Toolkit