Friday, December 12, 2014

Installing the Ionic Framework from Scratch

What is the Ionic Framework?
Ionic is an open source project which combines Cordova, AngularJS, and their own CSS3 enhanced UI to build cross platform mobile apps. It currently supports iOS and Android device.


Ionic is built on top of Cordova which is Apache's open source version of Adobe's PhoneGap. Most developers know that Cordova lacks two things which are important in modern application development. First there is no user interface. You have only standard web development UI, which doesn't cut it on the web today, let alone on a smartphone. Second, there is no application framework. Frameworks assist the developer by doing a lot of the plumbing code necessary for building professional applications. Ionic uses AngularJS, which is a JavaScript MVC framework from Google. They also add their own JavaScript based components which are written specifically for running on mobile devices.


In order to build Ionic apps you will need to install a series of free tools. Failure to install any tool correctly will cause the entire installation to fail. And since many of the tools require other tools to install, not installing them in the correct order can also result in a failed installation. So please take your time with the installation. It will take two to five hours to complete, depending on your Internet & computer speed.


These instructions are specifically written for the Window operating system, however the order of tool installation and basic steps are the same for Mac OS X and Linux systems.


It is highly recommended that you backup your system before beginning this installation.


Prerequisites


You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.


Installation Instructions


General Warnings
Most of the tools come from operating systems other than Windows. As such they don't like spaces in the names of files or directories. This can be a big headache since Windows allows for the creation of files and directories with spaces in the name. And worse yet, the normal directories for installing applications on Windows are "Program Files" and "Program Files (x86)", both of which have spaces in the names. Avoid headaches and don't install any tool to a directory with a space in the name.


If you are running Windows on Parallels or any other virtual machine, you may get prompted to install a tool on to a network drive, don't do it. While many of the tools run just fine from network drives others don't. Keep things simple and install to a directory on your 'C' drive or other normal drive.

You will need to add environment variables for ANDROID_HOME, ANT_HOME, and JAVA_HOME during the installation process. These instruction explain how to do that when the time arises.


The ANDROID_HOME variable points to the Android SDK directory. The ANT_HOME directory points to your Apache Ant directory. And finally, the JAVA_HOME variable points to the directory holding the JDK. You also need to add tools to Path environment variable which you won't have to create, since it should already exist. You will only need to edit the path.


Environment Variables
  1. From Windows 8
  2. Hover the mouse over the lower left hand corner until the Windows logo appears
  3. Right click to bring up the option menu
  4. Click System
  5. Click Advanced system settings
  6. Click Environment Variables…
  7. On the System variables module, Click New…
  8. Enter the name of the variable in the Variable name text box
  9. Enter the value of the variable in the Variable value text box
  10. Click OK
  11. Click OK again


Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.


Install Git
  1. Download the installation package
  2. Launch it
  3. Accept the User Account Control request
  4. Follow on screen instructions
  5. (You can allow Git to install to the Program Files directory)
  6. Click Use Git from the Windows Command Prompt
  7. Click Checkout Windows-style, commit Unix-style line endings
  8. Complete the installation


Apache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other. Cordova uses it to build Android project.


Install Ant
  1. Download the zip file
  2. Extract it
  3. Move the file to some where accessible, I put mine in my C:\tools directory
  4. Set the 'ANT_HOME' using the system tools
  5. Add Ant to the path


Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary. If your machine is 64 bit, get the 64 bit package.


Install JDK 7
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Add JAVA_HOME
  5. Add Java to path


Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse.


Install Android Studio
  1. Download the installation package
  2. Launch it


In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of December 2014, the current SDK is Android 21, which supports Android devices up to version 5.0, aka Lollipop. Android 21 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 21. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step,  once  


Install Android 19
  1. Launch Android Studio
  2. Click Configure
  3. Click SDK Manager
  4. Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"
  5. Check the following:
    1. SDK Platform
    2. ARM EABI v7a System Image
  6. Scroll down a bit further until you see Extras, open it and check, "Google USB Driver"
  7. Click the install packages button
  8. Accept the license agreement
  9. Click Install


Be patient, it will take an hour or so to install the SDKs
Add the android tools to the path


NodeJS


Install NodeJS
  1. Download the installation program
  2. Launch the installation program
  3. Follow on screen instructions
  4. Restart machine so changes will be activated
  5. Verify that Node JS is installed: node -v
  6. (should respond with the version number, current is 10.33)




Install Cordova
  1. Instal Cordova globally with the following command: npm install -g cordova

    Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of Cordova from the command line: cordova -v




Install Ionic
  1. Install ionic globally with the following command: npm install -g ionic

    Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of Ionic from the command line: ionic -v
  3. It should respond with the current version number


Optional Stuff


Genymotion Emulator - https://www.genymotion.com
Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulators. It is built on top of Oracle's Virtual Box, so you can't run it from an virtual PC.



VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.

Tuesday, October 21, 2014

CodePen + AngularJS + Firebase = A Complete Demo App in the Cloud

Can you build a complete web app in CodePen? You can with AngularJS + Firebase/AngularFire. I will leave this contacts app up and public for a few weeks so you can check it out.

This was a demo for my AngularJS weekend class. It is amazing how much you can build in so few lines of code. 

Rule the clouds!


See the Pen finished-firebase-contacts by Troy Miles (@Rockncoder) on CodePen.

Cross Platform Mobile Apps with the Ionic Framework

Here are the slides from my talk on the Ionic Framework.


Monday, October 20, 2014

CodePen, AngularJS, and Jasmine!

Online Web editors, like JSbin, plnkr, and CodePen, are awesome. They allow you to easily work on an idea without all of the muss and fuss of having to spin up a server. You can also share the idea with friends or the entire Internet easily. 

Unit test is something that all developers, especially AngularJS ones, are encouraged to do. I work on a lot of angular ideas initially in CodePen. I also write unit test in Jasmine, but getting the two to play nice together in CodePen wasn't as easy as I thought it should be. 

In the pen below I show how to get the two working together. The main trouble I was having was the order of the files. It has to be as follows:


  1. jasmine.css
  2. jasmine.js
  3. jasmine-html.js
  4. boot.js 
  5. angular.js
  6. angular-mocks.js
If you get the order wrong, you may get errors like: ReferenceError: inject is not defined or ReferenceError: module is not defined. These can make you think something is wrong with your code when there isn't. 

The pen below is written using Jasmine 2.0 and AngularJS 1.26.





See the Pen finished-jasmine-unit-test by Troy Miles (@Rockncoder) on CodePen.

Sunday, October 5, 2014

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.


Screen Shot 2014-10-04 at 3.37.08 PM.png


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.