Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

App Settings

App Builder app settings.

This page covers various app settings, including settings for binary iOS and Android builds.

App Settings

When you are in the Appery.io App Builder, go to Project > App settings. Here you’ll have the ability to configure many parts of the app:

The App settings tab has the following views:

  • General – general information about the project: its name and description, start page, page size and color scheme.
  • External resources (jQuery Mobile) / Resources (AngularJS) – built-in and user-added resources.
  • Android binary – all necessary Android .apk properties to prepare your app for the Android Market.
  • Android permissions – list of selectable permissions.
  • iOS binary – developer information and certificates needed to build an iOS binary.
  • iOS keys – list of keys, for which you can choose the value.
  • Cordova plugins (AngularJS only) – settings to manage Core and Imported Cordova plug-ins.
  • Components - settings for UI components.
jQuery Mobile app settings.

jQuery Mobile app settings.

Ionic app settings.

Ionic app settings.

General

The General page has the following properties:

App name

The name of this app. The app name can be edited on app details page (after you exit the visual App Builder).

Description

A short description of this app.

Enable Weinre Debugging

Turns on the Weinre debug options which allows to test and debug the app while running in the browser or on the device.

The following options are available in a jQuery Mobile app only.

Start Page

The first page to be launched when running the app; it may be selected from the list of all app pages.

Theme

The color scheme of the app.

Swatch

Based on the selected theme, this swa​tch will be the default for project pages and components if their Swatch property is set to Inherit.

Default Page Size

Set a custom device/page size. If the Custom size box is checked, the Default page size list becomes disabled. The selected size will be applied to all newly created pages. Additionally, a screen size can be set for each page separately, in its Properties panel.

Render all pages in one HTML file

jQuery Mobile framework option to place all HTML files into one file (multi-page template). This usually results in better performance.

The following option is available in an Ionic/Bootstrap/AngularJs app only:

Custom Tags

The Custom tags section allows you to add custom HTML meta tags that will be added to the app index.html page.

External Resources (jQuery Mobile App)

The External resources view has the following options:

Libraries version

A set of libraries which are used in an app. A new app always uses the newest library version.

Built-in resources

A list of libraries and their versions that are used by Appery.io and correspond to a library version.

User-defined resources

A list of external JavaScript resources added the app. Use Up/Down buttons to change the order in which the resources will be loaded.

Changing Library Version

Please read the Library Version section before changing the library version.

jQuery Mobile app resources.

jQuery Mobile app resources.

Resources (Ionic/Bootstrap/AngularJS)

The Resources view in AngularJS app has the following settings:

Libraries Version

A set of libraries which are used in an app. A new app always uses the newest library version.

Changing Library Version

Please read the Library Version section before changing the library version.

Built-in resources

A list of libraries and their versions that are used by Appery.io and correspond to a library version.

External Resources

A list of external JavaScript resources added the app.

Internal Resources

Contains a table with .js files, Services, and Directives that have been added to the app. Checking Show system resources will also show resources automatically installed in each app.

Ionic app resources.

Ionic app resources.

Android Binary

In this section, ​you can configure Android binary file settings, upload icons and splash screens, and manage certificates.

Android binary settings.

Android binary settings.

In the Android binary view, you can set the properties necessary for generating an Android release binary version of your app, that can be published to the Google Play Store:

  • Set your app name and icon to be displayed on the device.
  • Set your app version code and name (important when you publish your app on the Google Play Store).
  • Select the SDK versions to be supported.
  • Check the Release box to stop debugging. Builds with unchecked Release box will be probably rejected by Play Store with the You uploaded an APK that is not zip aligned message.
  • Set the launch images for different screen sizes.
  • Set the key parameters.

Automatic Update

Learn about Automatic Update.

Android Permissions

In this section, you can set Android permissions that your app requires.

Permission Advice

Read more about Android permissions. Be careful when adding/removing permissions. It’s not a good practice to give your app permissions which it doesn’t require. On the other hand, make sure to check permissions that your app requires or it won’t work properly.

Android permissions.

Android permissions.

Custom Cordova Plugins

When you install a custom Cordova plug-in, additional permissions might be checked automatically that are required for the plug-in to work properly.

iOS Binary

In the iOS binary view you can set all developer information and certificates you need to generate an iOS App Store package:

  • Set the app label and version.
  • Upload the icons and launch images of standard sizes.
  • Upload the distribution certificate and provisioning profile.

You can specify several different icons for use in different situations. Appery.io allows you to upload icons for apps running on iPad, iPhone, and iPod touch. Small icons are used when displaying search results, high-resolution icons are used for devices with Retina displays.

App Icons

The App Icons files preferably should be a PNG file with no transparency.

iOS binary settings.

iOS binary settings.

Automatic Update

Learn about Automatic Update.

iOS Keys

In iOS keys view you can configure the appearance of your app at launch time, and the behavior of your app once it’s running.

iOS keys.

iOS keys.

Components

This section allows to configure any UI components. Today this section has configuration only for Google Maps API key.

Google Maps

The Google Maps (Ionic/Bootstrap) or Map (jQuery Mobile) component API key is required for the component to work properly. Read how to get an API key. The same API key will be used for all Google Maps components in an app. If you are creating a hybrid app, you don't need to set any API key restrictions.

Library Version

Inside the App Builder, a Library is a collection of one or more JavaScript files that are automatically included in a new app. For example, the following JavaScript files are included when creating a new Ionic app with version 1.1:

Library - a collection of JavaScript files.

Library - a collection of JavaScript files.

A library and its resources impact what app code is generated by the platform.

If one of the JavaScript files needs to be updated, a new library version will usually be created. A new app is always created with a latest library version. An existing app that has been created with the old version retains the old version.

The older library version is retained in order not to impact the app and make sure it continues to work.

The older library version is retained in order to let you (the developer) to update the app manually, test the app and make sure it works before publishing it again.

Updating Library Version

When you update the library version, new app code will be generated which may impact the app logic and how it works. It's important you to test the app to ensure it works properly.

You can select a new library version by selecting a new version from the list. An Apply button will appear which you need to press to confirm the update.

Angular Version 1.0 and 2.0

The users with Angular version 1.0 will also need to re-import the Apperyio Ionic Push plug-in to be able to send push messages.

Launch Images

A splash screen is a screen that appears after a user starts an app and before the app has loaded.

If you want a special image to appear while your app starts, you can upload launch images for Android and iOS devices on the Android binary and iOS binary tabs. As the screen size on devices vary, you can set different images sizes for your launch images.

When you click Browse, the Media Manager opens, where you can upload and/or select the image.

Image Type And Size

According to the Cordova policy, all images to be used as splash screens should be uploaded in the .png format only! Make sure your image files correspond with this rule!

You can’t see the launch images from the Appery.io App Tester., you will need to Export the application as binary, and install it on the device to see it.

JQM And AngularJS Projects

To use launch images in JQM projects with libraries version 3.0 or angular projects, go to: Project > App settings > Cordova plugins and check the Splashscreen (Cordova Splashscreen Plugin) under the Core Cordova plugins tab.

Using 9-Patch Images

Creating Android splash screens can be more complicated and time consuming than their iOS counterparts due to the wide variety of screen ratios. You should use a 9-patch image for your splash screen.

A 9-patch image is a stretchable bitmap image that contains extra information to define what parts can be stretched, and what remains as the original design. This way you can have the content appear without distortion in whatever aspect ratio the target device screen has.

Useful Sites

Since 9-patch can get confusing here are a few sites to assist you.

These sites provide general information regarding 9-patch:

For more detail on 9-patch visit these sites:

9-patch images can be created in many graphic editors. There are also some online tools (for example, try draw9patch or Simple Nine-patch Generator), which can show you how your image would look like on devices with different screens.

Using a nine-patch editor will likely create a 9-patch image with the .9.png file name.

To use 9-patch for splash screens in your project, upload.9.png images in App Settings>Android binary using the media manager, then refresh Android resources and save the app.

For the best quality, create splash images for every dimension available in Appery.io. Use a simple picture (for example, white background with small good quality picture in the center).

Warning

iOS does not support the use of 9-patch images. One reason for this is the reduced number of variations of sizes.

9-patch images don’t scale down – they only scale up. So it’s best to start as small as possible.

Inserting a Link into Desription Using Markup

You can add a link using markup language in the following places in the App Builder:

  • App description.
  • Plug-in description.
  • App template description.

To insert a link use the following format: [link_url link_name].

For example, the markup [http://appery.io/ Appery.io main page] creates the following link: Appery.io main page. All text after the space is used as the text for the link name.

App Settings


App Builder app settings.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.