Using plug-ins | Appery.io Dev Center

If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

A plug-in is an out-of-the-box component that can be easily added to your app. A plug-in can be as simple as a single page or service, but to provide more complete functionality, it usually contains a page, service and a mapping. You can create your own plug-ins. These plug-ins will be private by default, and available only to you.

Example apps from plug-ins

The Appery.io team has created app example(s) that you can add to your app once an app has been created. These examples can be found under Appery.io Examples category.

Login Registration Example

Example available for UI framework(s): jQuery Mobile, Bootstrap, Ionic.

This example shows the following features:

User registration
User login
User login with social network
User sign out
User session management
Create/view/delete – a list of items for the logged in user

For this app to work, it requires a very minimal setup:

If you want to import this app as a plug-in, go to CREATE NEW > From plug-in and select User Login Registration Example. Select loginPage as start page for AngularJS apps or login page for jQuery Mobile apps. Also, if you’re building an Ionic app, go to your index page after plug-in importing, select Page using breadcrumbs and hide the Header by going to Controls Top > Header > False in the PROPERTIES panel to the right.

Create a new database called: myDB.
Inside the database, create a collection called: Stuff.
Inside the Stuff collection, create one column called: text (String type).
With the Stuff collection open, click Change default ACL button.
Inside the input field type: @Creator, click Add User.
Click Save and Close.
Copy the created database id and paste it to the myDB_settings > database_id (under Services folder) in the App Builder.
To turn on the Social Network authentication for current database, go to Social connections tab (on the database page) and click “Add an app”.
Select provider and specify App name (can be anything you want), Cliend Id and Secret Id. Those credentials can be retrieved by creating the app on the social network side. See how to create an app for Facebook, Twitter and Google.
Go to your app, open myDB_settings and specify client ids for each social network (the same as you specified in Database > Social connections).
Lastly, copy the Appery.io app id from the current URL (value between project/ and /editor) and paste it to the myDB_settings > appId.

Remove the frame when testing in browser. Due to security reasons, social providers don’t allow launching the app in frames.

You are now ready to run the app. Don’t forget to create the first user.

Slide Panel Example

This example uses a page template to create a menu that slides from the left.

Tabbed Pages Example

This examples uses a page template and the NavBar component to create tabbed pages and navigation between the pages.

Barcode Scanner with Database Example

This example shows how to use the barcode scanner to scan a product then search the database for that code. If a product is found, then you can edit the product (name, quantity). If the product is not found in the database, you can add the product to the database.

This example requires minimal setup.

Create new database called: ProductsDB
Inside the database, create a collection called: Products
Inside the Products collection define three columns:
- code:string
- name:string
- quantity:number
Copy the database key from Settings tab and set it Services > Database_settings
Set the start page to Scan

As this app uses the barcode scanner Cordova plug-in, the app has to be tested on the device. Use the Appery.io Tester app to test this app.

Clickable List Example

Example available for UI framework(s): jQuery Mobile.

This example shows how to use:

Model and Storage
Load data from database
Create a clickable list (master-detail) to show item details on second page

For this app to work, it requires a very minimal setup:

Create new database called: ProductsDB
Inside the database, create a collection called: Products
Inside the Products collection define three columns (name, description, quantity) and enter any sample data to look like this:

Or, download and import this sample database file.
Open Settings tab and copy the database API key.
Inside the App Builder, open Services/Database_settings and paste the API key for database_id value.

You are now ready to run the app.

Weather API and Geolocation Example

This examples uses Weather REST API to show the temperature information based on your location.

Tutorials for public plug-ins

Public plug-ins are available to all Appery.io developers. If you created a plug-in, and would like us to add it to our plug-in directory, please email us at support@appery.io. Below is a list of available tutorials for our public plug-ins.

Social media

Using the Facebook API plug-in

Email and SMS

Payments

Security

Using MetaCert Security API

Utilities and development

Newspapers & books

Using the USA Today API plug-in to read news and music, movie, and book reviews

Creating and using your own plug-ins

You can create, edit your own plug-ins. These plug-ins are only available to you and your team. If you want to make a plug-in public (available to all Appery.io developers) send us an email to support@appery.io.

Add a plug-in

To add a plug-in (public or private) to your app:

1. From Project view, select CREATE NEW > From Plug-in.

2. Select the plug-in you want to add (you can select multiple):

To quickly find the plug-in, you can start typing its name, or group all plug-ins by vendor (they are grouped by category, by default).

3. Click “Import selected plug-ins.” The following window will appear:

4. Most API services will require you to set an API key. To get an API key, sign-up with the API provider and create an app that will give you an API key.

Appery.io plug-ins keep API keys, information, and other common information about all services in a special Settings service. The service is usually named <APIProvider>_Settings. By checking the box above, the Settings service will be opened and you can set the keys. You can always skip this step, and open the service later. It will be under the Services folder.

5. You also have the option to set the start page for your app (this can be skipped). You can always set the start page in Project > App settings > General.

6. Click “Apply settings”.

In Project view, you should now see files from the plug-in added to your app (this example uses a Salesforce plug-in):

The Settings service will open.

Once you set all the information, click “Test”, to test the plug-in and its functionality.

It’s important to remember that every API service will be different. Some will require only the API key, some will require a callback URL. Please visit the API provider’s documentation to learn what is needed to use the service.

Create a plug-in

To create a plug-in, simply build any app and export it (or its parts) as a plug-in.

Example:

1. Build an app that you want to export as a plug-in. You don’t need to build a complete, working app. You can create just pages, or just services, and export them as a plug-in.

In this example, you’ve built an app that looks like:

2. To export this app as a plug-in, click “Export” in the upper dashboard:

3. Click “Appery.io plug-in”. The following screen will appear:

Upload the plug-in’s icon image.
Set the plug-in’s name.
Set the plug-in’s description.
Provide a API home page and documentation site.
Set the plug-in version.
Pick one or more categories.
Set the API vendor.

4. By default, the entire project is exported as a plug-in:

5. If you would like to export just parts of the app into the plug-in (only pages or only specific services), uncheck the “Export entire project” checkbox. You’ll receive an option to select which app file you’d like to export into the plug-in:

6. Click “Export” to finish creating the plug-in.

7. To check your plug-in, select CREATE NEW > From Plugin:

Plug-in list

To see all plug-ins (private) you have created, go to the Plugins tab:

You can find information about the plug-in (creator e-mail, publicity, import counter value and so on) and:

Open the plug-in to edit it.
Rename the plug-in.
Delete it.
Backup it.

Update the plug-in

There are three ways to update the plug-in:

Create a new plug-in.
Open the plug-in and edit it.
Replace the plug-in with a new version.

When creating a new plug-in, you lose the Import counter value (the new plug-in doesn’t inherit this value from the old one). If you open and edit the plug-in, someone can import it when you haven’t finished working on it – it’s unsafe. The safest way is to replace the plug-in with a new version.

To replace the plug-in with a new version:

1. Open the project your plug-in was created from, or recreate a project with the same features.

2. Make changes in the project and check that it works correctly (debug it).

3. Select Export > Appery.io plug-in.

4. In the Export plugin tab, check the “Replace plugin” box:

5. In the popup, check the plug-in you are going to replace and click “Import selected plug-ins”:

6. Change the version of the plug-in. Other properties can also be updated. Make sure the additional options’ boxes are checked correctly:

7. Click “Replace.”

Your plug-in will be replaced instantly, and the import counter will be kept.

Publish as project template

Any project can also be published as a project template. To export it as a project template, check “Export entire project,” and “Add this plugin as project template”:

To export it as a project template, “Export entire project” must be selected.

To create a new app based on a project template, click “Create” from the Apps page, then select the project template:

When you go to Plugins, you’ll see a project template listed there as well (with “Project template: yes”):

Public plug-ins

If you would like to make your plug-in public and available to the entire Appery.io user community, please contact support@appery.io. We will review the plug-in and publish it.

More help resources

More help resources are links to the blog, our YouTube channel and other web sites.