Book Image

Ionic 2 Cookbook - Second Edition

By : Hoc Phan
Book Image

Ionic 2 Cookbook - Second Edition

By: Hoc Phan

Overview of this book

Developing real-time apps is the need of the hour, and apps that deal with humongous amounts of user data and real-time information that needs to be updated frequently are in high demand. Currently, one of the most popular frameworks for this task is Ionic Framework, which is undergoing a major makeover. This book will get you started with Ionic and help you create Angular 2 components that interact with templates. From there, you’ll work with Ionic components and find out how to share data efficiently between them. You’ll discover how to make the best use of the REST API to handle back-end services and then move on to animating the application to make it look pretty. You’ll learn to add in a local push notification in order to test the app. You’ll work with Cordova to support native functionalities on both iOS and Android. From there, you’ll get to grips with using the default themes for each platform as well as customizing your own. Finally, you’ll see how best to deploy your app to different platforms. This book will solve all your Ionic-related issues through dedicated recipes that will help you get the best out of Ionic.
Table of Contents (16 chapters)
Ionic 2 Cookbook Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 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.

    Note

    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.

  2. Run Android Studio.

  3. You need to install all the required packages, such as Android SDK. Just click Next twice at the setup wizard screen and click on the Finish button to start the packages' installation.

  4. After the installation is completed, you need to install additional packages and other SDK versions. On the Quick Start screen, select Configure, as illustrated:

  5. After this, select SDK Manager, as shown:

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

  7. Click on the Install packages… button.

  8. Check the box on Accept License and select Install.

  9. 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.

  10. Go to the terminal and type the following command:

      $ touch ~/.bash_profile; open ~/.bash_profile.
    
  11. This will open a text editor to edit your bash profile file. Insert the following 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
    
  12. Save and close that text editor.

  13. Go back to terminal and type.

      $ source ~/.bash_profile
      $ echo $ANDROID_HOME
    
  14. You should see the output as your SDK Path. This verifies that you have correctly configured the Android developer environment.

  15. The next step is to install and configure Genymotion. Download and install Genymotion and Genymotion Shell from genymotion.com.

  16. Run Genymotion.

  17. Click on the Add button to start adding a new Android device, as illustrated:

  18. Select a device that you want to simulate. In this case, let select Samsung Galaxy S5, as follows:

  19. You will see the device being added to your virtual devices. Click on that device.

  20. Then click on Start:

  21. 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 yet:

  22. Run Genymotion Shell.

  23. From Genymotion Shell, you need to get a device list and keep the IP address of the device attached, which is Samsung Galaxy S5. Type devices list:

  24. Type adb connect 192.168.56.101 (or whatever the IP address was that you saw earlier from the devices list command line).

  25. Type adb devices to confirm that it is connected.

  26. Type ionic platform add android to add Android as a platform for your app.

  27. Finally, type ionic run android.

  28. You should be able to see the Genymotion window showing your app.

Although there are many steps 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 in different Android devices, it's easy to add another virtual device in Genymotion and connect to it.