Ionic Framework

Getting started with Ionic for Android

@richardkotze

Slides available at: slides.com/rkotze/

The talk

  • Share my experience
  • About Ionic
  • How to get your app on an Android device
  • Tips
  • Attempt live demo

Where I started

  • Started using Cordova and AngularJS
  • Uses web technology HTML, CSS, JS 
  • Felt like a web app. Delays in interaction
  • Laggy scrolling lists and infinite scroll
  • Very tedious
  • Found Ionic

Ionic solved these issues

  • UI components specific for mobile devices
  • Fixed delayed interactions
  • Smooth scrolling lists
  • Feels close to native 
  • Requires AngularJS
  • It's quick and easy to get started

Let's get started...

Both Mac OSX and Windows

Install NodeJS

Go to nodejs.org

Ionic command line tools are on NPM

Quick and easy

Open cmd & Install Ionic

npm install -g cordova ionic
ionic start FooBarApp tabs

Start your Ionic project 

ionic serve

Now you are ready to start developing

cd FooBarApp/

Developing in the browser :D

Awesome!

Let's get it on the device

ionic platform add android

Not going to work ;(

We need to install a few more things

ERROR : executing command 'ant', make sure you have 
ant installed and added to your path.

Install Java

  • Android apps are written in Java
  • Tools for building use Java
  • Install Java JDK

Apache ANT

  • Go to the binary distributions
  • Download the .zip and extract
  • ANT is typically used to help build Java software

Android SDK

Take note where you install ANT & Android SDK will need to add it to the path

  • Download & install the Android SDK
  • Choose between stand-alone or studio
  • Stand-alone has the core SDK tools
  • Studio includes an IDE 

Quick tinker

Open cmd & Is Java there?

java -h

If not add it to the path in Environment Variables

Tip: when updating the path restart the cmd

Setting up Android SDK

  • Open up Android SDK Manager
  • Download the relevant packages
  • Platform tools
  • API 21:  Cordova 4.1.0
  • Android support library
  • Google USB driver (Nexus debugging on windows)

Setting up Android SDK

Add ADT tools & platform-tools to the path

;C:\Android\sdk\platform-tools;C:\Android\sdk\tools

Apache ANT

Add the bin into the path

;C:\path\to\apache-ant\bin

Back to Ionic

ionic platform add android
ionic build android

Not quite ready to deploy to device

Need to unlock Developer options

You need to find the build number

Settings > About phone > Build number

Keep Tapping = now you are a developer

Are we there yet?

Yes :D

Open up developer options and check Android Debugging

Plugin your device and notification might show, allow USB debugging. :)

Ionic run android

Mac OSX

Add the ADT tools & platform-tools to the path

export ANDROID_HOME=/path/to/android-sdk/
export PATH=$PATH:$ANDROID_HOME/platform-tools/:$ANDROID_HOME/tools/
sudo vim ~/.bash_profile

Add ANT to the path

export PATH=$PATH:/you/path/to/apache-ant/bin/

Updating the path

Install tools

Chocolatey, package manager for windows

choco install nodejs
choco install jdk
choco install android-sdk
choco install ant

Homebrew, package manager for Mac OSX

brew install node
brew install android-sdk
brew install ant

Tips

Install git and add to your path. A few of the Cordova plugins use .git URLs

Running Android emulator super slow

Better to test and debug on a device

Try Genymotion faster emulator

Remote debugging on device using chrome://inspect

USE -> ionic run NOT -> ionic emulate

Development tips

ionic serve --lab

View Android and iOS side by side

Improved plugin management for teams  in latest version of Cordova 4.3.0

ionic plugin add org.apache.cordova.camera --save

--save flag adds feature to config.xml

Development tips

npm update -g cordova
cordova platform update android
ionic info

Updating Cordova

Try stay up to date

Attempt demo ...

Finished

Questions?

Made with Slides.com