Build and Run an Android Application with Ionic on a Mac

[00:00] In this lesson we are going to learn how to build Android applications with Ionic. This is going to involve a few steps. The first being installing the Android SDK, and then from there we're going to install the Android package dependencies.

[00:15] The Android virtual machine is a little clunky, and so we are going to install VirtualBox and Genymotion, which just gives us a better emulator experience. From there we're going to create our Genymotion virtual machine and run our Ionic application within it. Let's get started.

[00:34] Let's go ahead and add Android to our project. We'll go Ionic platform, add Android. We'll hit enter and when this has added Android to our project we'll go ahead and build the project using Ionic build Android. We're going to throw an error.

[00:51] The reason being is that we have not installed the Android SDKs nor have we added it to our profile path. We'll go to developer.Android.com and we'll click Get the SDK. We'll scroll all the way down to the bottom of this page and we'll choose the Mac OSX Android SDK. We'll click that. We will accept the terms and conditions, and from here we will download the SDK files.

[01:21] Once this has downloaded we are going to hop back into our command line where we're going to unzip the contents of the zip file into a place that we can find, and we're going to add a reference to that within our profile.

[01:41] We'll put this in library developer. Once this has unzipped to that path we are going to copy a reference to that to our clipboard.

[02:03] From here let's add this to our profile. I'm using Z shell, you may be using Bash, so this could be slightly different, but we'll open up our profile. Let's hop down to the bottom, and we're going to augment the path to point to the path we have on our clipboard with one slight variation.

[02:35] Then we're going to just add /tools to this. We will then save our changes and then we'll go ahead and refresh our profile changes using source. Then let's go ahead and echo out our path variable. You can see that we have the appropriate path appended to that.

[03:03] Then the real test is when we take an Android on our command line, what happens. You can see that the Android SDK manager pops up. Now we are ready to install our dependencies. Let's go ahead and run Ionic build Android and see what happens.

[03:24] We are throwing an error saying that we need the SDK platform for Android 22, platform tools and build tools. Let's start up the SDK manager one more time. You will go ahead and choose the platform dependency tools that we need.

[03:40] We'll deselect all and then we are then going to select the platform tools, build tools, and then the SDK platform for API 22. We will click Install packages. We'll select these packages and accept license and install.

[04:13] Now that these are installed let's run Ionic build Android one more time and see what happens.

[04:34] Our build was successful. Now it is time for us to set up an Android virtual machine to run our application. We are going to accomplish this by installing VirtualBox and Genymotion.

[04:47] If you go to the virtualbox.org website and we click Download VirtualBox, we can choose the installer for OSX. We're going to go ahead and download that. Once it's downloaded, we're going to click on the installer and it'll open up and we're just going to double click on virtualbox.package, which will start up the installer. We'll click Continue. Continue again, going to click Install. This will start the installation.

[05:25] Once this is complete, then we are ready to install Genymotion. The reason why we're installing Genymotion is because the Android emulators tend to be a bit clunky and this is a better experience. If you go to Genymotion.com, you can click Get Genymotion. They have a free version for personal use that we're going to download.

[05:49] Before we can do that we need to actually create an account with Genymotion. I already have one. I am just going to sign in using my credentials, so my email address and my top secret password, password. Once I'm signed in then it will start the download.

[06:11] From here we're going to just double click on the installer which will open up the disc and we're going to then drag the Genymotion application to our applications folder.

[06:36] Now we are ready to run Genymotion and create an Android virtual machine in which to run our application.

[06:46] Now we're being prompted to create a new virtual device. We're going to go ahead and click Yes, which is then going to list out the virtual devices that are available. We'll go ahead with this custom phone because it has API 22. We're going to give this device a name, Ionic phone. We're going to click Next.

[07:08] Then once this has been created we are going to go ahead and start the virtual device by clicking the start button. After just a few moments our virtual device will spin up and we will then have Android running within this Genymotion virtual device. From here let's go Ionic run Android.

[07:34] Then this is going to build our Android project and deploy it to our Genymotion device, which you can see it running in the emulator.

[07:51] Just to review, we installed the Android SDK, the platform dependencies, we installed VirtualBox and Genymotion. Then from there we did Ionic run Android, which then put our application on the Genymotion device. This is how you build Android applications for Ionic.