Testing an Ionic App on iOS and Android Emulators and Devices

How to finish that “hello world” tutorial of yours and actually see it outside of your browser.

Required Equipment:

A Mac computer with the latest OS.

An iPhone, iPad or an iPod touch and appropriate connectors.

An Android phone, tablet or other device and appropriate connectors.

Author’s Ramblings

There are a lot of great tutorials for Ionic. Very few actually tell you how to get your app onto a mobile device to see if it’s really working or not. This is something that should be done early into your app development to catch JS compatibility errors before they get out of hand.

I apologize for requiring you to have a Mac. It’s an iOS requirement. Ionic has a tool to bypass this necessity. But I wanted to get closer to the metal with this tutorial. That, and I’ve noticed that some things work on a device, but not on their app and vice versa. The same thing goes for testing with emulators.

Actual Useful Information

Get Everything Installed

• Install Xcode from the App Store.
• Install Android Studio.
• Install VirtualBox — needed for Genymotion Android Emulator.
• Install Genymotion

I use Genymotion because the default Emulator is slow. There is a free version of Genymotion available once you sign in. You’ll need to pick a version of Android and a device to emulate. I went with a Galaxy S3 with Jellybean 4.1.x.

• Install the Java JDK.
• Add JAVA_HOME to your environment variables.
• Install Node and Ionic if you haven’t already. (Only install Ionic. Stop before the “Create the Project” step.)

Create and Build Your App

Rather than using Ionic’s ‘run’ command, we’re going to use Android Studio and Xcode to run our app. This is a hands-on approach that will offer us more flexibility and options. The APIs are some heavy duty tools but we’ll only have to learn a small fraction of their capabilities to do what we need.

From the command line, run:

ionic start my_app -s # add -v for version 2
cd my_app
ionic build ios
ionic build android

At this point you’ll likely get an error because it wasn’t hard enough to set up your system for Android. My error looked like this:

> failed to find target with hash string ‘android-23’ in: /Users/leetheguy/Library/Android/sdk

You can fix this from Android Studio. On the ‘Welcome to Android Studio’ page, click the ‘Configure’ gear and select SDK Manager. Refer to the ‘API Level’ column and check the version that Ionic requested. Just to be on the safe side, you may want to install all SDKs that have at least a %5 market. I installed 16 through 24. Click the checkboxes you want, then Apply, then OK. And once again:

ionic build android

Test Your App in the Emulators

iOS:
Open up Xcode. At the bottom of the gray area on the right, click ‘Open another project…’ Find your app and Open ‘my_app/platforms/ios’. Click the play button in the upper-left hand corner. Enable developer mode if you’re asked. The screen will be pretty large. You can scale it with ⌘1 through ⌘5.

Android:
Open up Android Studio. Select ‘Start an Existing Android Studio Project’. Find your app and select ‘my_app/platforms/android’ and select OK. Allow java to accept incoming network connections. Install the Genymotion plugin and restart Android Studio. Click the Genymotion button on the toolbar. Add the path ‘/Applications/Genymotion.app’ when prompted and hit OK. Click the Genymotion button again, select a device and click start. Go back to Android Studio and press the green play button. Select the Genymotion emulator and click OK. Watch for updates at the bottom. When the build finishes, go back to Genymotion.

Test Your App on Your Device

iOS:
Exit the emulator. Plug your physical iOS device into your computer. Go back to Xcode. Select ‘my_app’ under the folder on the left. Select the ‘Signing’ section and sign in with your Apple ID. Set your team to you or ‘Your Name (Personal Team)’.

Click the right side of the button, two buttons to the right of the play button which should be something like ‘my_app > iPhone 7 Plus’. Choose your physical device from the list. (My device needed a minute to ‘Process symbol files’.) Then hit play.

Now you’ll get an ‘Untrusted Developer’ warning on your physical device. Open your settings and go to ‘General > Device Management’. Select your app and click ‘Trust “yourself@example.com”’.

Android:
On your physical device, go into ‘Settings > Security’ and enable ‘Unknown sources.’ Plug your device into your computer. Drag down the top menu of your device and select the item where you see the 3-pronged ‘Connected as’ USB icon. Check Camera (PTP) and enable your computer. Go back to Android Studio and press the red stop button. Then click play and select your physical connected device.