Getting Started Building Mobile Apps with the Ionic Framework
Let's learn how to start building mobile apps with the Ionic Framework. If you aren't hip to Ionic, don't worry. It is a relatively new framework. At the time this post was written the current version is: 1.0.0 beta 13, not quite release version, but pretty close.
Ionic comes to us from a cool company in Wisconsin named Drifty. If the name sounds familiar, they were also responsible for a hot little jQuery Mobile theme called Graphite. It gave jQuery Mobile apps a sorely need touch of class. Which makes them the perfect guys to create the Ionic Framework.
Ionic is a framework for creating hybrid mobile apps. It sits on top of Cordova/PhoneGap and adds AngularJS and fast, sexy CSS3. With Ionic you create mobile apps with the web tools you know and love, yet they perform like native ones. If you don't think so, check out some of the apps on the Ionic Showcase site, http://showcase.ionicframework.com/.
The downside of Ionic especially when building Android apps is that you have to install a lot of tools just to get start: Java, the Android SDK, NodeJS, Cordova, etc. It is even worse if you are a Windows dev. But fear not brave coder. The good folks at Drifty have felt your pain and have a cure for what ails you, the Ionic Box. The Ionic Box is everything you need to build Android apps with Ionic - everything. Sorry, iOS devs, the Ionic Box doesn't include any iOS tooling. So let me show you how easy it is to get started. We are going to build a sample Android app, run it on the web and edit it with live reload. In the second part of this post, we will deploy our app to an Android device.
Prerequisites:
We need two apps before we can use the Ionic Box - VirtualBox and Vagrant. Since both are free they won't make a dent in your wallet. You may also want to use the Chrome browser. It isn't required but it has built in support for mobile web emulation which is pretty sweet for Ionic development.
Vagrant was something new for me. Essentially, Vagrant makes VirtualBox usuable by mere mortals. A fuller explanation is out of scope for us. Just head over to https://www.vagrantup.com/ and install it.
VirtualBox from Oracle is a free virtual machine program. The easy way to describe a virtual machine, is it sets up a complete computer and operating system on your machine. It makes it possible to run Linux on a Windows machine, Windows on a Mac, etc. VirtualBox has been around and in use for a long time. It is available on pretty much every platform. If you haven't installed it already just head on over to: https://www.virtualbox.org/ and do so. If your machine supports 64 bits, be sure to get the 64 bit version of VirtualBox.
The Ionic Box
With our prerequisites installed. Head over to Drifty's GitHub page for the Ionic Box at: https://github.com/driftyco/ionic-box.
On the GitHub page, click the "Download ZIP"
Create a directory named, "boxdemo"
Copy the contents of the Download ZIP, our Ionic Box files, to the boxdemo directory
Inside of the boxdemo directory, create a directory named "project"
Modify the Vagrantfile
Vagrant allows us to modify its settings via its Vagrantfile which is simply a text file. Use a text editor to edit it. We need to make two modifications to it. The first, will allow us to use the live reload feature. Live reload, automatically reloads the current web page everytime it is editted. The second feature allows us to sync a folder on our host machine with one on the virtual machine. This we can edit files using our favorite text editors locally and sync the changes to guest machine.
In the Vagrantfile, find the following lines:
# Create a forwarded port mapping which allows access to a specific port
# within the machine from a port on the host machine. In the example below,
# accessing "localhost:8080" will access port 80 on the guest machine.
# config.vm.network "forwarded_port", guest: 80, host: 8080
Below them add the following to lines:
config.vm.network :forwarded_port, host: 8100, guest: 8100
config.vm.network :forwarded_port, host: 35729, guest: 35729
Ionic serve uses port 8100. We forward that port to the host machine so we can access the web server. The live reload function uses port 35729. By forwarding it, our browser will reload itself anytime we change a file.
Next, locate the following lines:
# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
# config.vm.synced_folder "../data", "/vagrant_data"
Below them add the following line:
config.vm.synced_folder "project", "/project"
This line sync a folder on the host machine with one on the guest machine. In our case we are sharing the project folder with a identically named project folder on the guest machine.
cd boxdemo
vagrant up
The vagrant up command will take quite a while to run the first time. So get yourself lunch or something and come back. Be patient.
Examine the output of the vagrant up command. We should see it forward our two ports: 8100 & 35729. We should also see it sync'ing our project folder.
On the host machine (within the boxdemo directory):
vagrant ssh
This will gives us a terminal/command window into our virtual machine. This window is now running from within the guest machine. You will need to open another terminal window pointing at the boxdemo directory.
On the guest machine:
cd /project
ionic start boxdemo tabs
This will create an ionic app named boxdemo with a tabs user interface. Since we have the project directory sync'd, the project will be created on both the host and guest machine.
From the guest machine:
cd boxdemo
ionic serve
This will start the ionic web server with live reload. From the host machine, open your web browser and go to: http://localhost:8100. You should see your app.
On the host machine, using your favorite text editor open the file: boxdemo/www/templates/tab-dash.html.
We are just going to make a minor change to see if live reload is working. Inside the file, you should see the following lines:
<ion-view title="Dashboard">
<ion-content class="padding">
<h1>Dash</h1>
</ion-content>
</ion-view>
Change the first line to:
<ion-view title="Dasher bored">
Or something else and save the file. On web, you should see the "Dashboard" change to "Dasher bored" almost immediately.
Hopefully you gotten everything working. Getting started building mobile apps with the Ionic Framework using the Ionic Box is much easier than installing a half of dozen or more tools. Next time we will deploy our app to an Android device.
