Friday, December 12, 2014

Installing the Ionic Framework from Scratch

What is the Ionic Framework?
Ionic is an open source project which combines PhoneGap, AngularJS, and their own CSS3 enhanced UI to build cross platform mobile apps. It currently supports iOS and Android devices with Windows Phone and Firefox OS slated for a future release.

Ionic is built on top of PhoneGap. Most developers know that PhoneGap 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 PhoneGap 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 PhoneGap 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.