Install Ionic Framework for android development on ubuntu





I have recently been exploring different mobile development frameworks, more specifically JavaScript, HTML and CSS  hybrid frameworks.  The one framework I have enjoyed working with the most is Ionic  , due to that it has been the one with the most minimal learning curve for myself as it readily use Angular.  I have quite literally got up and running developing an app in hours.  It is awesome and really easy to learn.

 

Ionic is a free and open source library of mobile-optimized HTML, CSS and JS CSS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.

Although the setting up of Ionic and developing with ionic was extremely easy on my Macbook, I found the installing and setting up on my Ubuntu Workstation for android development a little trickier.  I found a few good resources out there to help, like Nic Raboy’s Install Android, Cordova and Ionic in Ubuntu , I did find that I needed to tweak his script a little.

 

The updates I had to make to Nic’s script were to remove the installation of Node , due to the fact I will install it via Node Version Manager  and install the Ionic 2 Framework, the core of Nic’s script remained the same,  and it is still worthwhile watching his video tutorial to get additional information. I thought I would post my version in order to provide further assistance to folks out there.



Install Node using Node Version Manager

One of the key areas I had to do differently to Nic’s post was I installed Node.JS by using the Node Version Manager.  This is now my preferred method on a Ubuntu Workstation, for a number of reasons.

  • Enables the execution of npm without sudo
  • enables the installation of number of different versions of node.js
  • Easily maintainable

 

NOTE :  Currently Ionic will only work with Node Version 4 and Below.   Currently it does not support of Node 5 .

 

I have removed the installation of node from the Script, in part because the instructions in Install Node using Node Version Manager covers this process.

 

Updated Script

I have also update the script to install the most current Android at the time of writing

#!/bin/bash
# Ubuntu Developer Script For Ionic Framework
# Created by Gary Woodfine
# https://garywoodfine.com
#             
##    Extension of original Script by Nic Raboy 
#     https://blog.nraboy.com/2014/09/install-android-cordova-ionic-framework-ubuntu/
#
#
# Downloads and configures the following:
#
#   Java JDK
#   Apache Ant
#   Android
#   Apache Cordova
#   Ionic Framework
 
HOME_PATH=$(cd ~/ && pwd)
INSTALL_PATH=/opt
ANDROID_SDK_PATH=/opt/android-sdk
NODE_PATH=/opt/node
 
# x86_64 or i686
LINUX_ARCH="$(lscpu | grep 'Architecture' | awk -F\: '{ print $2 }' | tr -d ' ')"
 
# Latest Android Linux SDK for x64 and x86 as of 25-01-2016
ANDROID_SDK_X64="http://dl.google.com/android/android-sdk_r24.4.1-linux.tgz"
ANDROID_SDK_X86="http://dl.google.com/android/android-sdk_r24.4.1-linux.tgz"
 
# Latest NodeJS for x64 and x86 as of 10-19-2014
#NODE_X64="http://nodejs.org/dist/v0.10.32/node-v0.10.32-linux-x64.tar.gz"
#NODE_X86="http://nodejs.org/dist/v0.10.32/node-v0.10.32-linux-x86.tar.gz"
 
# Update all Ubuntu software repository lists
apt-get update
 
cd ~/Desktop
 
if [ "$LINUX_ARCH" == "x86_64" ]; then
 
    #wget "$NODE_X64" -O "nodejs.tgz"
    wget "$ANDROID_SDK_X64" -O "android-sdk.tgz"
 
    tar zxf "android-sdk.tgz" -C "$INSTALL_PATH"
 
    cd "$INSTALL_PATH" && mv "android-sdk-linux" "android-sdk"
  
    # Android SDK requires some x86 architecture libraries even on x64 system
    apt-get install -qq -y libc6:i386 libgcc1:i386 libstdc++6:i386 libz1:i386
 
else
 
    #wget "$NODE_X86" -O "nodejs.tgz"
    wget "$ANDROID_SDK_X86" -O "android-sdk.tgz"
 
    tar zxf "android-sdk.tgz" -C "$INSTALL_PATH"
 
    cd "$INSTALL_PATH" && mv "android-sdk-linux" "android-sdk"
fi
 
cd "$INSTALL_PATH" && chown root:root "android-sdk" -R
cd "$INSTALL_PATH" && chmod 777 "android-sdk" -R
 
cd ~/
 
# Add Android and NPM paths to the profile to preserve settings on boot
echo "export PATH=\$PATH:$ANDROID_SDK_PATH/tools" >> ".profile"
echo "export PATH=\$PATH:$ANDROID_SDK_PATH/platform-tools" >> ".profile"

 
# Add Android and NPM paths to the temporary user path to complete installation
export PATH=$PATH:$ANDROID_SDK_PATH/tools
export PATH=$PATH:$ANDROID_SDK_PATH/platform-tools
export PATH=$PATH:$NODE_PATH/bin
 
# Install JDK and Apache Ant
apt-get -qq -y install default-jdk ant
 
# Set JAVA_HOME based on the default OpenJDK installed
export JAVA_HOME="$(find /usr -type l -name 'default-java')"
if [ "$JAVA_HOME" != "" ]; then
    echo "export JAVA_HOME=$JAVA_HOME" >> ".profile"
fi
 
# Install Apache Cordova and Ionic Framework
npm install -g cordova
npm install -g ionic@beta
 
#cd "$INSTALL_PATH" && chmod +x "node" -R
 
# Clean up any files that were downloaded from the internet
cd ~/Desktop && rm "android-sdk.tgz"

 
echo "----------------------------------"
echo "Restart your Ubuntu session for installation to complete..."




Additional Steps

 

Once the script has finished executing you will need to restart your Ubuntu machine for the changes to take effect.   Then once you have completed restart then complete these additional steps:

Open a terminal Window  (ctrl + alt + t ).  and type android and enter

This will open the Android SDK Manager  and Select Android 5.1.1 (API 22)
[ebs_thumbnail target=”_blank” alt=”Android SDK Manager” src=”https://garywoodfine.com/wp-content/uploads/2016/01/Android-1024×662.png”]

You can customise what you want to select from this list depending on what you need.

Gary Woodfine

Freelance Full Stack Developer at threenine.co.uk
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.

Latest posts by Gary Woodfine (see all)