Skip to Content

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.

/wp-content/uploads/2015/11/33_829560.jpg

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 JDKIt’s installed through Cask
  • Apache AntIt’s a build tool required by Android development
  • Android SDKRequired for Android Development
  • KapselRequired 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-deployRequired for deployment on iOS Simulator/Device
  • ios-simRequired 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 CLIIt’s the Command Line Interface for Kapsel
  • HATHybrid 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

     /wp-content/uploads/2015/11/05_830153.jpg

  •      Accept the License

     /wp-content/uploads/2015/11/06_830156.jpg

  •      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

     /wp-content/uploads/2015/11/07_830158.jpg

  •      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

/wp-content/uploads/2015/11/12_830164.jpg


ℹ 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

     /wp-content/uploads/2015/11/13_830186.jpg


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

     /wp-content/uploads/2015/11/17_830187.jpg

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

Have fun!

To report this post you need to login first.

6 Comments

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

  1. Sangeetha Jayakumar

    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.

    (0) 
    1. SIMMACO FERRIERO Post author

      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.

      Regards,

      Simmaco

      (0) 
  2. Jens Glander

    Hi Simmaco,

    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:

    /wp-content/uploads/2016/02/hat_mac_installation_problems_880093.png

    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.

    Best regards,

    Jens

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi Jens,

      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:

      • Open a Terminal window
      • Go to a temporary folder and run one by one the following commands:
        • cordova create hello com.example.hello “HelloWorld”
        • cd hello
        • cordova platform add ios
        • cordova build ios –device
      • Let me know if you have any errors.

      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”.

      Regards,

      Simmaco

      (0) 
      1. Jens Glander

        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 [1]).

        Many THANKS!

        Jens

        [1] Details:

        Additional steps which were necessary for my successful (IOS) HAT installation on Mac:

        Create and build a “HelloWorld” on terminal

        • Open a terminal window
        • Go to a temporary folder and run one by one the following commands:
        • cordova create hello com.example.hello “HelloWorld”
        • cd hello
        • cordova platform add ios
        • cordova build ios –device

        Result: Build failed with errors

        Fix it in xcode:

        • Start xcode
        • Open the HelloWorld.xcodeproj file located under the path “…/hello/platforms/ios”
        • Click the “Build and then run the current scheme” toolbar icon (grey rectangle).

        Result: Again Error popup: “Failed to code sign “HelloWorld”… “. On the error popup you find a “Fix Issue” button

        • Clicked the “Fix issue” button and straight forward instruction, i.e. choose the preselected Dev Profile etc. (that was what was missing before).
        • After that the build runs successfully through in xcode

        And once that has been done, also the HAT installation – especially the cordova build project step – runs also successfully through.

        (0) 
  3. Robert Russell

    Hi Simmaco,

    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.


    Best Regards

    Robert

    (0) 

Leave a Reply