Overview

Adding Appery.io public plug-ins to an Ionic 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 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:

238

Catalog of Appery.io plugins

πŸ“˜

Many Ionic 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:

891

🚧

Please note that after adding the predefined plug-in to your project you will be asked to select what you would like to do with the app IndexScreen:

884

πŸ‘

Important Note on Routing!

If you import a predefined plug-in to your app, all the needed pages are added to the existing app (usually, of Ionic Blank type with the Screen1 preset to the default route.
To test such an app, please make sure the routing rule is set to the correct page.
For example, the Restaurant App template created with implementation of the tab-based navigation requires that the Tabs page be set to the default route under Routing:

1579

πŸ“˜

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 app:

  1. Open your Appery.io Ionic 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:
1609

Appery.io plugins in Ionic 5 app

  1. Afer 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):
1393
  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:
1912
  1. Now, click the CODE panel to see the predefined markers variable added with its value:
1165

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.

1181

What’s Next