Introduction
You can add native Apache Cordova (PhoneGap) features to your apps as plug-ins.
Below are the main principles of working with services in AngularJS applications.
You can edit JavaScript code in the screen SCOPE
tab to make your app more flexible and customized.
Services can be added manually or called via the “Invoke service” button from the snippet panel (by clicking CTRL+SPACE
to autocomplete a service name). Also, you can use a drag and drop feature to invoke services. Read here to learn how.
Quickstart
If you are new to using native features, please try these quickstart tutorials:
- Using the Geolocation service
- Using the Vibration service
- Using the InAppBrowser API
- Using the Camera component
- Using the Push notifications
- Using the Barcodescanner service
- Using the Contacts service
Pre-installed Cordova plugins
Appery.io provides a set of pre-installed plugins that are available immediately once the new project has been created:
- com.adobe.plugins.GAPlugin
- com.phonegap.plugins.barcodescanner
- com.phonegap.plugins.pushnotification (Android)
- org.apache.cordova.battery-status
- org.apache.cordova.camera
- org.apache.cordova.console (iOS)
- org.apache.cordova.contacts
- org.apache.cordova.device
- org.apache.cordova.device-motion
- org.apache.cordova.device-orientation
- org.apache.cordova.dialogs
- org.apache.cordova.file
- org.apache.cordova.file-transfer
- org.apache.cordova.geolocation
- org.apache.cordova.globalization
- org.apache.cordova.inappbrowser
- org.apache.cordova.media
- org.apache.cordova.media-capture
- org.apache.cordova.network-information
- org.apache.cordova.plugins.PushNotification (iOS)
- org.apache.cordova.splashscreen
- org.apache.cordova.statusbar (iOS)
- org.apache.cordova.vibration
Appery.io supports and updates its list of pre-installed Cordova plugins as developers release new ones. To review the up-to-day core Cordova plugins that are available for your app by default, go to:
Resources > Cordova plugins > General > Core Cordova plugins
.
Adding native features
Device
services are Appery.io plug-ins that can be added to your app.
You can create your own services and save them as plug-ins to use them later. In fact, this is a custom implementation of Generic services.
Appery.io also comes with a number of Cordova APIs available as preconfigured native services that can be added as plug-ins.
To add a plug-in with native functionality to an app:
Open your Appery.io Bootstrap/AngularJS or Ionic/AngularJS project or create a new one.
In the builder, go to Project > CREATE NEW > From Plugin
.
In the new window, select one or more of the plug-ins and click Import selected plugins.
Once the service has been added, it is listed under the Services
folder and new JavaScript files are created:
After a native service has been added to the app, it can be called in your app. Invoking a native service is very similar to invoking a REST service.
Invoking the service
To invoke the added service, go to the SCOPE
view of the corresponding screen and use the snippets menu:
Each snippet in the drop-down list has a pop-up with its description and code preview (with syntax highlight) and a link to documentation (if available).
Select Invoke service
, click Backspace
and then CTRL+SPACE
to select and autocomplete the service name:
In SCOPE
, adding several functions and/or related variables to the app is possible.
Once a service has been added to the function code, you can click Mapping to map it to the page: the click on the upper mapping button defines the service request, on the lower one – the service response:
The page UI has to be created first so that you can map the services.
You would have to notify AngularJS about the need to run update loop using scope method
$scope.$apply();
Please find more info about this here.
Adding 3rd party plugins
Introduction
Appery.io enables you to import Cordova plug-ins for use in apps without needing to configure additional source files.
This functionality will be added beginning with the new external library version 3.0 (JQM)/ 1.0 (AngularJS) only.
So, when switching from 3.0 to other libraries, all manual changes will be deleted and the added plug-ins will be deleted too – therefore, a project version should be created before downgrading libraries.
Core Cordova plug-ins
Go to Resources > Cordova plugins > Core Cordova plugins
to see the list of the preconfigured plug-ins available from Cordova. To get information on the plug-in, select it:
In this view, managing permissions is disabled since the core Cordova plug-ins are available to the entire team.
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. Only enabled (checked) plug-ins will be included into the binary application and be used for any target device type in events, services, etc.: Project > App settings > Cordova plugins
.
Importing Cordova plug-ins
In the following examples, you’ll learn how to import 3rd party Cordova plug-ins, that are not on the Core Cordova plugins
list. You’ll learn to import them, configure them by passing parameters, and then launch them.
Importing Toast plug-in
In the following example, you’ll learn how to import 3rd party Cordova plug-in in the example of the Toast-PhoneGap
plug-in.
- Go to the plug-in page: https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin and click Download ZIP to start downloading and then save the file to your drive:
>
It’s highly recommended that you download the latest stable version available.
- In the Appery.io Visual Builder, switch to
Resources > Cordova Plugins
and click Import Cordova plugin, then: Choose file, locate the downloaded file (Toast-PhoneGap-Plugin-master.zip
) and click Import plugin. The plug-in appears underCordova plugins
:
- To manage permissions to the imported Cordova plug-ins, go to:
Resources > Cordova plugins
, select the plug-in underCordova plugins
and switch to thePermissions
tab:
Managing permissions to the imported Cordova plug-ins is similar to managing permissions under
Apps > Permissions
.
The plug-in also appears in App settings > Cordova plugins > Imported Cordova plugins
in all your projects. To enable the plug-in for the current project, check the appropriate box to add it to the binary application:
Use the corresponding buttons to select/unselect all the imported Cordova plug-ins to the build.
Click the Refresh button if the plug-in has been imported/deleted with the editor open.
Basically, that’s all you need to do in plug-in configuring. Now you can use its API as described in appropriate docs. For example, you can execute the following code on button click to show the toast:
1 2 3 4 5 6 7 8 9 10 11 |
window.plugins.toast.showWithOptions({ message: 'Hi there!', duration: 'short', position: 'top' }, function(a) { console.log('toast success: ' + a); }, function(b) { alert('toast error: ' + b); }); |
We’ve prepared a little more extended app with Toast plug-in enabled. In this app, you can modify your toasts’s message, duration, and position via UI. It looks as following:
You can create this app from the backup (backup) to see how it’s built (but make sure you have imported Toast plug-in before).
To create an app from the backup:
- Click Create new app.
- Type an app name.
- Click From backup and select the project backup file.
- Click Create.
To test the app, you must build the binary and launch the app on your device.
Importing Facebook plug-in
In the following example, you’ll learn how to import the Facebook Plugin.
- First, go to the plug-in page: https://github.com/Wizcorp/phonegap-facebook-plugin and click Download ZIP to start downloading it and then save the file to your drive:
It’s highly recommended that you download the latest stable version available.
In the Appery.io Visual Builder, switch to
Resources > Cordova Plugins
and click Import Cordova plugin, then: Choose file, locate the downloaded file and click Import plugin. The plug-in appears underCordova plugins
:
To manage permissions to the imported Cordova plug-ins, go to:
Resources > Cordova plugins
, select the plug-in underCordova plugins
and switch to thePermissions
tab:Managing permissions to the imported Cordova plug-ins is similar to managing permissions under
Apps > Permissions
.The plug-in also appears in
App settings > Cordova plugins > Imported Cordova plugins
in all your projects. To enable the plug-in for the current project, check the appropriate box to add it to the binary application:
Use the corresponding buttons to select/unselect all the imported Cordova plug-ins to the build.
Click the Refresh button if the plug-in has been imported/deleted with the editor open.
Passing parameters to plug-ins
Some Cordova plug-ins require initial parameters.
The
phonegap-facebook-plug-in
, for example, requiresAPP_ID
andAPP_NAME
variables to be specified. Read here about the details.To do it, first download the plug-in, then import it (see above), and then go to
App settings > Cordova plugins
and click the Options button next to the plug-in. A modal window opens, where the necessary options can be added and specified:
The Options buttons have different styles depending on which options have been set.
The selected options can be viewed by hovering the mouse over the Options button.
Basics:
- You can add any number of key/value pairs to any Cordova plug-in (core or custom).
- Key/values options can be changed/deleted any time.
- Options for unselected plug-ins can be managed as well.
- Keys should be unique to one plug-in (subject to validation).
- For parameter names, the following symbols are allowed: all digits, letters, and an underscore or minus sign (subject to validation).
- Empty keys/values are not allowed.
- Parameter names are validated for duplication.
Quirks
There are several important issues when using Cordova plug-ins:
- Uploading files larger than 20 Mb is not allowed.
- Before uploading plugin .zip archive make sure it contains only plugin code (without any other files).
- Plug-ins do not work for the Appery.io Tester.
- Cordova and Cordova plug-ins can’t be updated with the Autoupdate feature.
- When creating an app from the backup, re-adding custom plug-ins to the backup application is required as they are lost while building a backup.
- Cordova plug-ins are not included under the
Source
tab inProject
view.
More help resources
More help resources are links to the blog, our YouTube channel and other web sites.