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 selectUser Login Registration Example
. SelectloginPage
as start page for AngularJS apps orlogin
page for jQuery Mobile apps. Also, if you’re building an Ionic app, go to yourindex
page after plug-in importing, selectPage
using breadcrumbs and hide theHeader
by going toControls Top > Header > False
in thePROPERTIES
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, clickChange default ACL button
. - Inside the input field type:
@Creator
, clickAdd User
. - Click
Save and Close
. - Copy the created database id and paste it to the
myDB_settings > database_id
(underServices
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
andSecret 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 inDatabase > Social connections
). - Lastly, copy the Appery.io app id from the current URL (value between
project/
and/editor
) and paste it to themyDB_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 fordatabase_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
Email and SMS
- Using the SendGrid Mail API plug-in to send emails
- Using the Mailgun Email API to send emails
- Using the Twillio API plug-in to interact with SMS data
Payments
Security
Utilities and development
- Using Upload File to Database plug-in to upload files to the Appery.io database
- Using the OAuth 2 Template plug-in to authenticate with OAuth 2.0 providers
- Fast Dynamic Image Processing in Your Appery.io Mobile App with Sirv
- Using the ServicePattern Mobile API plug-in
- Using the Auth0 plug-in for simple identity management
- Share your code using the GitHub API plug-in
- Using the Box API plug-in to get access to files in the cloud
- Using the Foursquare OAuth API plug-in to connect to the Foursquare API
Newspapers & books
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.