Labels

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.

Labels:

Popular Posts