How to Get Started with Ionic Framework

Below are the steps I used to start working with the Ionic Framework on a Windows 7 computer. This includes setting up Android. Also includes tools that I use for development.

Get Chocolatey (windows package manager)

https://chocolatey.org/

Get Conemu (optional). Provides an alternative to the basic windows command line

Open a command line window as administrator

Must use older chocolatey syntax

choco install conemu

Get Node.js

cinst nodejs

            Close command window and then open a new one. Type npm to verify installation.

Get git for Windows

cinst git

Close command window and then open a new one. Type git to verify installation.

If there are firewall restrictions, use following command

git config –global url.”https://”.insteadOf git://

To verify change, look for .gitconfig file and verify that line has been added

Get Cordova (install globally)

npm install cordova -g

            Type cordova to verify  installation

Get Ionic (install globally)

npm install ionic -g

At this point, you should be able to go to a directory and create a new Ionic project:

ionic start myApp sidemenu

You may skip the part about creating a new  account

Navigate into directory

cd myApp

Then with Google Chrome as default browser, serve up the project :

ionic serve

Choose localhost, option 2 as the base address

Use Google Chrome Developer Tools (F12) and select to emulate mobile device

To test git and verify firewall ‘work-around’, try to install a plugin:

cordova plugin add org.apache.cordova.splashscreen

Make sure no errors reported and plugin should appear in plugins folder of myApp

Get Bower (install globally)

npm install bower -g

Type bower to verify installation.

As a further test use bower to add a third-party dependency (make sure you are in the root of the myApp directory)

bower install moment –save

You should now see a moment folder under the www\lib folder as well as a reference to moment in the bower.json file (can read using type bower.json from the command line)

Get Grunt CLI (install globally)

npm install grunt-cli  -g

To test installation, from root of myApp use npm to add grunt locally

npm install grunt –save-dev

Then type grunt –help

Get Git Extensions (optional) as a friendly UI for your local git repo

Open a command line window as administrator

cinst gitextensions

Get Ruby (optional, if wanting to use Sass):

Open a command line window as administrator

cinst ruby

Get Sass (optional)

Check if Chocolatey has at least Sass 3.4

cinst sass

If not, via ruby gem

Close command line window and open a new one

      gem sources -a http://rubygems.org/

Confirm warning about untrusted sources

gem install sass

Ignore warning about SSL_connect

 

_________________Setup Android Development Environment__________________________

Get Java SDK

The chocolatey package is for version 7, but 8 has already been released, so install this manually.

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Close command line window and open a new one. Type java to test the installation

Get Apache Ant

Open a command line window as administrator

cinst ant

Get Android SDK

cinst android-sdk

Setup Path Variables

(Computer > Properties > Advanced system settings > Environmental variables)

Locations may be different:

JAVA_HOME (C:\Program Files\Java\jdk1.8.0_31)

ANT_HOME (C:\tools\apache-ant-1.9.4)

ANDROID_HOME (C:\Users\<Username>\AppData\Local\Android\android-sdk)

Add these to your PATH variable like %ANT_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%JAVA_HOME%\bin

Use Android SDK Manager to download APIs

Open a command line window and type Android

From Android SDK Manager, select the SDK Platform-tools, SDK Build-tools and the API versions:4.0 and above (skip 4.4.W.2). For each API, you just need the SDK Platform, System Images (ARM and Intel, skip Wear and TV images). Make sure to accept all licenses.

wp1

Create an Android emulator

Use the following command: android avd

This should bring up the AVD window where you can create and then start an emulator.

 emulator

Add Android platform to Ionic project

Go to the command line window and navigate to the myApp directory

ionic platform add android

You should now see a platform folder created with Android-specific files underneath

Build the project:

Ionic build android

To test via emulator:

ionic emulate android

This will take a few minutes!

To test using an actual Android device:

Enable Developer Options on the device:

Go to the Build Number setting and tap on it 7 times

You should see a Toast message indicating that this was successful:

wp3

Under Settings you should now see a ‘Developer Options’ section. Within this section select the checkbox titled “Enable USB debugging”

Connect the device to the computer via USB cable

On Windows, you may need to install usb drivers (let Windows find them or find and install on your own). Reference: http://developer.android.com/tools/extras/oem-usb.html

For Samsung Galaxy S4: http://developer.samsung.com/technical-doc/view.do?v=T000000117

Once complete, unplug the device and plug it back in. You should get a prompt on the device asking whether to access an RSA key that allows debugging through this computer.

To verify that the device is now detected, type the following on the command line:

adb devices

You should see a list that includes your device (and possibly the emulator, if still running)

Deploy to your device using the following command:

ionic run android

Debugging using Chrome:

With the device still connected, open a Chrome tab and type: chrome:\\inspect

You should get a list of open Web Views, select the one under your project and you should be able to debug the app running on your phone

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s