Install this, then that, and that.

Today we're installing Ionic on Windows.

I've been learning Ionic through a Virtual Machine hosted on a trial subscription for Windows Azure, it was part of the course. While this may be acceptable for some, when it comes to your average student it's a bit overkill. On top of that everything was done in VI, which isn't the best environment for most users. Most people aren't going to know how to get anything done in Linux to begin with.

That being said, developing in Windows would be optimal. So let's do that...

Unfortunately, the documentation for installing Ionic on a Windows OS isn't what I would consider "well done". I would best describe it as following a trail bread crumbs. No one guide actually contained everything I needed. The Ionic guide does the job, but expect to follow most every link on the page to a relevant library doc.

So, I'll try to save you some time.

First let's open Ionic's installation guide in another tab for reference. I'll just provide some help on everything that tripped me up as you go through the install process.

To preface: You will need the JavaSDK, as well as IOS and/or Android SDK's for actually publishing apps on their respective platform. I personally won't bother with IOS at this stage, as I'm an android kinda guy. Sorry, Apple fans.

If you've got those installed, it's time to get Git for Windows. Most of the installer is a typical game of smash the next button. Except for this screen:

Make sure you check the Git Bash box, and the GUI is optional.



The next screen determines how you run Git. You can run it from the Command Prompt, with or without Unix tools. It really didn't matter to me, I stuck with the Git Bash.

This next screen should look like this, as it says; its the recommended setting for windows.

The Git bash will make installing things a bit easier. Instead of downloading installers we just run one from the command line. But before we get to do any of that, we need NodeJs, there's a big green INSTALL button on their website, you can't miss it. Installing it should be easy. Click next/okay/yes/letsgetthisdone until it goes away.

Now run the Git Bash. It should show up in the Windows start button search box. Just type this in the command line and hit enter:

npm install -g cordova

Note: You may run into issues with these commands, on Windows 8.1 my Environment Variables weren't working properly. If you get an error similar to "npm not found", try a reboot.

Assuming Cordova installed correctly, now install ionic:

npm install -g ionic

Now that ionic is installed, you can create a starter app from a template using the following command:

ionic start myApp sidemenu

By default, a folder named myApp will be created in your user folder, usually located in the Users folder on the C drive. Open the myApp folder, then the WWW folder. Open the index.html file to see the app.

Most of the important files you will be working with are in the WWW folder. You can edit these with whatever IDE you prefer for JavaScript and HTML. I'll cover that at a later time.

Obligatory Introduction Post

First things first, I should introduce myself.

My name is Robert Bryant, and I am currently studying Software Development at the Galway-Mayo Institute of Technology (GMIT). I've got a decent background in IT and Communications, about five and half years in the US Navy as an IT. From radio communication with handheld HF transceivers, to network and server administration, I did a bit of everything. But, as cliche as it sounds, it didn't start there.


It started around the time I was seven, my family had an old Intel 386. It had a TURBO button, naturally it was never turned off. I remember playing your run of the mill children's games, chasing down the alphabet as Donald Duck. Eventually my father bought a new computer, a 486. I received the old one, along with the responsibility of fixing it when I broke it (and I did, a lot).  As my father continued to upgrade his computer, I continued to inherit his older ones, I broke them too. All in all I've spent a fair amount of time in front of a screen and my posture reflects that...


Fast forward 20 years.

This is my second year at GMIT, and so far things are going well. I'm enjoying

this course, it's been very hands on and I don't think there is a better way to learn coding. So far we've covered Java, C, C#, and HTML/CSS. We've done a fair bit of Business and Business Communications on the side as well. But this year GMIT changed the curriculum to include cross platform app development with the Ionic Framework. It is very much a "learn it yourself" environment at this point. I immediately realized that there are many different parts that go into making an Ionic app. In a way it's like a Windows app, you use a markup language to control the look and feel of the app, but the real work is done in a more object-oriented language. Except AngularJS isn't really a proper, full fledged object-oriented language... but technicalities are overrated, and metaphors are fun.

Learning Ionic, conveniently enough, coincides with a project in another course of mine; to create an online presence through a blog. As you might guess, this would be that blog. So I decided to put what I learn to the metaphorical paper, as I learn it.