Using in an Ionic App

Using Apache Cordova in an Ionic app.

Introduction

Every Ionic app that you create in Appery.io is based on Apache Cordova (PhoneGap).

In an Appery.io Ionic project, three main capabilities are offered:

  1. Using the pre-installed Cordova API wrapped as an out-of-the-box Appery.io service (Core Cordova plug-ins).
  2. Adding custom Cordova plug-ins to broaden the app functionality.
  3. Adding Npm modules that allow wrapping the mobile web app inside a native Ionic wrapper.

Managing Cordova Plug-ins

Pre-installed Cordova Plug-ins

Appery.io provides a set of pre-installed plug-ins that are available immediately once the new project has been created and the corresponding Ionic Native plug-ins will be automatically added to the project and included in the app module.
This is nice because you can easily enable many powerful mapping features that allow accessing native device features such as camera, contacts, and much more.

Under the Cordova plugins tab, you can control what plug-ins are included in your app (both core Cordova plugins and imported (custom) Cordova plug-ins ).
When a particular Cordova plug-in is selected, its files will be included in the app. When it is cleared, the plug-in files will be removed from the app (make sure you only clear plug-ins that are not used in the app). If a plug-in requires configuration parameters, click Options to set up the needed parameters (also available for imported Cordova plug-ins):

By default, a new Ionic app has no enabled plug-ins under App settings > Cordova plugins > Core Cordova plugins/Imported Cordova plugins (with the exception of the Appery.io Resource Generator plug-in):

🚧

Enabling Cordova Plug-ins

Please be informed that only enabled (selected) plug-ins will be included in the binary application and can be used for any target device type in events, services, etc.
To include the needed plug-ins in your app, you need to select the corresponding check boxes to enable them.
Also, you may decide not to enable some of them (or unselect them all by clicking the corresponding button) in your project in order to decrease the app size.

πŸ“˜

Important Note

We support and update the list of pre-installed (core) Cordova plug-ins as developers release new ones. To review the up-to-day core Cordova plug-ins that are available for your app by default, go to Resources > Cordova plugins > General > Core Cordova plugins.

You can also go to Resources > Cordova plugins > General > Cordova plugins/Core Cordova plugins to get information on the plug-in that is on the list of the preconfigured plug-ins available:

πŸ“˜

Note

In this view, managing permissions is disabled since the core Cordova plug-ins are available to the entire team.

Adding 3rd party Cordova Plug-ins

By adding custom Cordova plug-ins you can significantly expand the app functionality without the need for configuring additional source files.
There are two ways (a) needed Cordova plug-in(s) can be added to an Appery.io app:

  1. Importing from ZIP bundle
  2. Importing with Git URL
    To get more details about managing custom Cordova plug-ins in an app, please check the corresponding document here.

🚧

Troubleshooting Custom Plug-ins

There are many such plug-ins on the internet but finding an appropriate plug-in may take time as not all of them get updated regularly and may be incompatible with other app functionality.
This is why any help (and/or debugging) with your 3rd party Apache Cordova/PhoneGap plug-ins is not covered by our Support policy.

Working with Npm Modules

Under the Cordova plugins tab, Cordova plug-ins meant to work with the platform (iOS or Android) are added while under the Npm modules tab, the Ionic wrapping over this plug-in is specified that provides particular methods to work with this particular plug-in:

To work, this Ionic module then has to be imported under the CODE panel of the corresponding page (if you add it to the app page, it will be available for all project pages):

πŸ‘

Using Native APIs from Ionic: Examples

You can check this section to review how to add native device functionality to your Appery.io Ionic application.

🚧

Important Note!

Please note that the Ionic plug-in version and the dependency (module) version are not the same things and they do not have to be of the same version.
Actually, they are not even connected and can be modified independently.

Please check this tutorial, where the working combination of versions is provided but you are free to add the version(s) you like (the most current version being the best choice in most cases).
However, be informed that the best practice is to carefully read the corresponding documentation before.

πŸ“˜

Ionic versions of all the native plug-ins are modified concurrently.

πŸ‘

Using Live Debug

Apps with imported 3rd party Cordova plug-ins do not work in the https://docs.appery.io/docs/apperyio-tester-app app. Therefore, if your app uses 3rd party plug-ins, you need to install the app directly on the device or use the Live Debug feature to test this functionality.