Viewing the app using Genymotion for Android

While it's possible to install the Google Android simulator, many developers have an inconsistent experience on a Mac. There are many commercial and free alternatives that offer more convenience and a wide range of device support. Genymotion provides some unique advantages, such as allowing users to switch the Android model and version, supporting networking from within the app, and allowing SD card simulation.

In this section, you will learn how to set up an Android developer environment (on a Mac in this case) first. Then, you will install and configure Genymotion for mobile app development.

How to do it...

1. The first step is to set up the Android environment properly for development. Download and install Android Studio from https://developer.android.com/studio/index.html.
2. You might be asked to install other libraries if your machine doesn't have the correct dependencies. If that is the case, you should run sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6 from the command line to install them.
3. Run Android Studio.

4. You need to install all of the required packages, such as Android SDK. Just click Next twice on the setup wizard screen and click on the Finish button to start the packages' installation.
   
5. After the installation is complete, you need to install additional packages and other SDK versions. On the Quick Start screen, select Configure:

6. After this, select SDKManager, as shown:
   

7. It's good practice to install the previous version, such as Android5.0.1 and 5.1.1. You may also want to install all Tools and Extras for later use:
   

8. Click on the Install packages... button.
9. Check the box on Accept License and select Install.

10. The SDK Manager will give you an SDK path on the top. Make a copy of this path because you need to modify the environment path.
11. Go to the terminal and type the following command:

$ touch ~/.bash_profile; open ~/.bash_profile

12. This will open a text editor to edit your bash profile file. Insert the following
    the line, where /YOUR_PATH_TO/android-sdk should be the SDK Path that you
    copied earlier:

export ANDROID_HOME=/YOUR_PATH_TO/android-sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH

13. Save and close that text editor.
14. Go back to the terminal and type:

$ source ~/.bash_profile
$ echo $ANDROID_HOME

15. You should see the output as your SDK path. This verifies that you have correctly configured the Android developer environment.
16. The next step is to install and configure Genymotion. Download and install Genymotion and Genymotion Shell from sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6.
17. Run Genymotion.
18. Click on the Add button to start adding a new Android device, as illustrated:
    

19. Select the device that you want to simulate. In this case, let's select Samsung Galaxy S5, as follows:
    
20. You will see the device being added to your virtual devices. Click on that device.
21. Then click on Start.
    
22. The simulator will take a few seconds to start and will show another window. This is just a blank simulator without your app running inside it yet.
23. Run Genymotion Shell.

24. From Genymotion Shell, you need to get a device list and keep the IP address of the device attached, which is the Samsung Galaxy S5. Type devices list.
25. Type adb connect 192.168.56.101 (or whatever the IP address was that you saw earlier from the devices list command line).
26. Type adb devices to confirm that it is connected.
27. Type Ionic Cordova platform adds Android to add Android as a platform for your app.
28. Finally, type Ionic Cordova run android.
29. You should be able to see the Genymotion window showing your app.

Although there are many steps to take to get this working, it's a lot less likely that you have to go through the same process over. Once your environment is set up, all you need to do is to leave Genymotion running, while writing code. If there is a need to test the app on different Android devices, it's easy to add another virtual device in Genymotion and connect to it.