Getting Ionic and Android Studio up and running on OS X Mavericks
I started an adventure into Ionic Framework and Android Studio on a shiny new MacBook Pro today.
Ionic Framework is a front-end framework for building hybrid mobile applications. Ionic leverages the incredibly successful AngularJS JavaScript framework and Cordova.
The idea behind hybrid applications being you can take your skills a aweb developers and build fully fledged installed web applications. The other big advantage of of the hybrid approach coupled with the likes of Cordova is you can technically build one application and deploy to multiple eco-systems. IOS, Android, Windows Phone Blackberry and many more.
Uuurrrgghhh!! not such a simple experience so posting the process here in hope it may help someone else. There are a few steps below but excluding download times this is a 5 minute job so please have a go.
Install NodeJS.
Use homebrew or get the package.
$ brew install node
Install Android Studio. Also install your preferred sdks
After installation to make Android Studio play nice you need the tools and platform-tools on your path. A detailed post on how to manage your path, but cheat sheet below. You may be prompted to install Java SDK, Do it
Create/edit .bash_profile if you don’t have one.
$ nano ~/.bash_profile
Add the following lines to your .bash_profile to add sdk/tools and sdk/platform-tools to your path
Tip: ctrl-o to save and ctrl-x to exit
export PATH="$PATH:/Applications/Android Studio.app/sdk/platform-tools:/Applications/Android Studio.app/sdk/tools"
Reload your .bash_profile
$ . ~/.bash_profile
Create an AVD (Android Virtual Device)
This is the emulator to be used for development. You can use the GUI or the command line. First list the possible devices based on installed SDK’s. Then create it. More detailed instructions on creating AVD’s
$ android list targets
$ android create avd -n <name> -t <targetID>
Install Cordova & Ionic Framework (use sudo if you need to) it is simply an npm package
$ npm install -g cordova ionic
Create your first app by going to your regular code/projects folder and executing the following
Tip: During this process operations failed as apparently Ant is no longer included in OS X. You can easily remedy that by installing Ant. I found this SO thread useful.
$ ionic start awesomeapp tabs
Hop into you app folder
$ cd awesomeapp
Add android platform to your application
$ ionic platform add android
Build the application
$ ionic build android
Finally run it!!
$ ionic emulate android
Additional reads
Installing NodeJS with Homebrew Managing Android Virtual Devices from the command line Note on boosting performance. Intel have provided an image that dramatically improves performance of the emulator. Modifying shell path on MAC OS X 10.9
Feedback
Not helpful? Or if you find any errors please leave a comment or get me on
photo credit: Navaneeth K N via photopin cc