Overview

Adding Appery.io public plug-ins to an Ionic 5 app

Introduction

Appery.io plug-ins are out-of-the-box example apps that can be easily added to your project. They can be as simple as a single page or service but provide more complete functionality; it usually contains a page, service, and mapping. Such plug-ins are public and available to all Appery.io users by default.

👍

Note!

You can also create your own plug-ins called private. These plug-ins will be private by default, and available only to you.

More information about Appery.io plug-ins can be found on the plug-ins page.
Go to this page to view the full list of all available Appery.io plug-ins.
Also, most of our plug-ins are featured on our YouTube channel.

Working with Appery.io Ionic 5 Public Plug-ins

A public plug-in is usually created by the Appery.io team and then made available.
Our team regularly releases new plug-ins. To review the available plug-ins from Appery.io, in the Project view, click CREATE NEW > From Plugin:

238238

Catalog of Appery.io plugins

📘

Many Ionic 5 sample apps can be imported as a plug-in.

To quickly find the needed plug-in, start typing its name or group all plug-ins by the vendor. By default, they are grouped by Category:

891891

🚧

Please note that currently, most plug-ins are still offered for Ionic 4 only but we are actively working on migrating our platform from Ionic 4 to Ionic 5 and in Q2 2021, the option of upgrading Ionic 4 projects to the Ionic 5 version with keeping both apps active will be offered.

📘

Appery.io Plug-ins Categories

You can check the list of Appery.io plug-ins categories under this link.

👍

Appery.io Community Channel

You can also check our YouTube Channel where the newest and/or most requested Appery.io plugins are presented.

Adding Plug-in into your App

To add a plug-in with native functionality to an Ionic 5 app:

  1. Open your Appery.io Ionic 5 project or create a new one.
  2. In the App Builder, go to Project > CREATE NEW > From Plugin.
  3. In the new window, select one or more of the plug-ins and click Import selected plugins. Let's take the Google Map plug-in, for example:
16091609

Appery.io plugins in Ionic 5 app

  1. Once the service has been added, it is listed under the Services folder and new files and/or scripts and pages with the added service are created (here, the Map page and GeoService_Impl TypeScript file):
13931393
  1. To view how the service is mapped to one or more pages, open the page with the service and switch to its DATA panel.
  2. Check the predefined datasource instance with the corresponding mappings:
19121912
  1. Now, click the CODE panel to see the predefined markers variable added with its value:
11651165

So, you can see that the app is all set and ready to work with!

🚧

Resolving Name Conflicts

If an app resource name conflicts with a plug-in resource name, it will be automatically renamed. You might need to rename screens, services, directives, etc.

📘

Working with JQM Plug-ins

Working with a JQM app is similar.
The only difference is that the plug-ins set can be different. To review the available plug-ins from Appery.io, in the Project view of your jQuery app, click CREATE NEW > From Plugin:

11811181

Did this page help you?