Lesson 1: Setting Up Ionic / The Development Environment

Initially I will be tackling just the Android side of working with Ionic but from what I can see, in practice there is little difference as far as what you do with Ionic between that and iOS.  However you should bear in mind that I am following all the below steps on a device running Windows 10, so if you are a OSX user this guide may not be as useful to you as Windows users.


Step 1: Install node.js

A lot of what we will be doing requires working in a command prompt (Git Bash) as that is the way we send commands using the Ionic framework (there is no easy to use front end GUI).  A prerequisite of that is having node.js installed so go ahead and do that.  It’s no more complicated that following this link, downloading and then running the installer.


Step 2: Install Git Bash

I’m using this as the command line interface with Ionic.  If you have used the Windows command prompt before then this is pretty much the same thing, in fact you can use the Windows “cmd” executable if you wish. The generic windows commands are not what we’ll be working with however – Node, Ionic etc come with their own rules / commands and for the sake of simplicity I would suggest also working from Git Bash.  Go here, pick your installer, download and run it.


Step 3: Install Java

In order to develop Android apps you need to install the Java SDK (Java is Googles chosen language for app creation).  For my fellow Windows users you’ll need to do the following:

  1. Download the Java JDK here. You’ll need to make sure you pick the installer for your OS type and Bit version.  Remember x64 = 64 bit Windows and x86 = 32 bit Windows.  If you are unsure what version of windows you are running, right click My Computer / This PC icon > Properties > Under the “System” heading on the window that appears look for “System Type” and it should all be in there.  I selected the installer that does not include the bundled samples and demos.
  2. Once downloaded, run and install it.  I left all the install options on the default settings.
  3. Now it’s installed we need to add some stuff to the Windows Environment Variables, which sounds more complicated than it is.  Begin by right clicking on My Computer / This PC and selecting properties. Then click the “Advanced System Settings” link and then the “Environment Variables” button. We’ll be dipping in and out of here quite a lot so remember how to get here.
  4. Everything we’re doing will be in the “System variables” box at the bottom so disregard the top section.  First, click on “New” and enter
    1. Variable Name: JAVA_HOME
    2. Variable Value: The path to your Java JDK folder.  For me this was c:\Program Files\Java\jdk1.7.0_79
    3. We need to add the Java JDKs “bin” folder to the existing “Path” variable.  The bin folder will be just inside the JAVA_HOME path, so again for me this was c:\Program Files\Java\jdk1.7.0_79\bin.  To add this, scroll down in the “System variables” panel and find a Variable entry called “Path”, select it and click “Edit”.  In the window that pops up click “Edit text” again and then in the next window that pops up, in the “Variable value” field and roll your cursor all the way back to the start. Paste in your new value and add a “;” at the end to separate it from the next entry. So mine ended up looking like: C:\Program Files\Java\jdk1.7.0_79\bin;%SystemRoot%\system32;%SystemRoot….  You can also add new entries to this “Path” variable value by just clicking “New” instead of “Edit text”.  If you do t that way you dont need to worry about adding th “;” at the end of the entry.
    4. OK out of all the dialog boxes to save the changes.

Step 4: Installing Apache Ant

  1. Visit this link and download the zip file.  When done extract that folder to your c:\ drive so the path should be something like C:\apache-ant-1.9.6 and in there will be the folder bin, etc and so on.
  2. Fire your environment variables window back up and exactly as we added Javas “bin” folder to the “Path” variable, add Ants “bin” folder the same way.  So my path was C:\apache-ant-1.9.6\bin and I just added that to the start of the “Path” variable, remembering to add the “;” separator at the end.

Step 5: Install Android SDK

  1. This is the development studio provided by Google for Android development.  Ionic will call upon this to make use of various libraries as well as for testing and debugging.  You can download the latest version here. Its a big file (about 1.1gb) so go make yourself a cup of tea whilst it downloads.  Once it’s done it, install it (again I left everything on default).  Make sure you fire up the application once installed as that will initiate the download of the SDK tools which will be called upon when you try and test your apps later on.
  2. Once you have this installed we need to do some more stuff with the environment variables.  For this we need to:
    1. Add a new variable called “ANDROID_HOME” which will point to the path of your Android SDK installation.  Now for me this was not the main installation folder.  Instead it was located at the following path (enable viewing hidden folders) c:\Users\my-user-name\AppData\Local\Android\sdk
    2. Add two new values to the “Path” variable.  Exactly the same as before, we’re adding the “tools” and “platform-tools” folders which should be sub-folders of the above “ANDROID_HOME” path.  Go ahead and add those, remembering to add the “;” separator between the paths if necessary.
    3. OK out of the screens to save/apply all your handiwork.

Step 6: Install Cordova

We will be creating apps that are basically websites and then loading them in a “wrapper” that behaves like a native app on whatever OS we develop for.  This wrapper interprets the HTML/CSS/JS etc we throw at it and can also access the specific device controls (like a “normal” app would) such as the camera, microphone and so on. The wonderful, beautiful thing that does this for us is Cordova and so obviously we need to install it.  To do that:

  1. Fire up Git Bash (run as Administrator) and you should have command prompt open.
  2. Type: npm install -g cordova (if you are following me on a Mac you’ll need to prefix all the npm command I give with “sudo“).
  3. It’ll spring into action and begin downloading Cordova.  When its done, it’s done, and you’ll return to the cursor.

Step 7: Installing Ionic

Now we need to install the Ionic framework.  Again, in your Git Bash terminal:

  1. Enter: npm install -g ionic

Let it do it’s thing and all being well it should give you a confirmation it’s all set up.

Step 8: Pat yourself on the back

That is the environment (essentially) all set up.  You wont need to do the above again but we will (probably) need to make some more tweaks to some of these applications when we start testing.

Note: I hit various issues along the way during the next stages which ultimately stemmed from me not having the latest version of Node installed, so please make sure you do (just download the latest installer and run it).  It’ll save you a lot of headaches later on if you do that now.