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 your 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.
  • Resources – built-in and user-added resources.
  • Android binary – all necessary Android .apk properties to prepare your app for the Google Play Market.
  • Android permissions – list of selectable permissions.
  • Android features – list of selectable features.
  • 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 – settings to manage Core and Imported Cordova plugins.
  • Npm modules (Ionic only) – used for managing the order of loading assets to Ionic-based applications.
  • Components - settings for UI components.
  • PWA – settings that prepare the app to be distributed as a PWA.

jQuery Mobile app settings.

Ionic 4 app settings.

General

The General page has the following properties:

App Name

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

App Description

A short description of this app.

Icon

An icon that can be selected for the app.

Font

The default font can be set. It is applied in the Visual Editor to have the same font displaying as the Preview and can be reset just like the icon.

Enable Weinre Debugging

Turns on the Weinre debug option which allows testing and debugging the app while running in the browser or on the device.

The following options are available in jQuery Mobile apps 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 swatch 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, 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 Ionic/Bootstrap/AngularJs apps only:

Custom Tags

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

Resources (Ionic)

The Resources view in an AngularJS app has the following settings:

Libraries Version

A set of libraries 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.

Resources (jQuery Mobile App)

The Resources view has the following options:

Libraries Version

A set of libraries that 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 the 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.

Internal JavaScript Resources

New resources can be dynamically added to this table (for example, when adding JavaScript via CREATE NEW > JavaScript) or deleted from it by a user. They are also draggable and droppable and validation works for the attributes input.

Internal CSS Resources

New resources can be dynamically added to this table (for example, when adding CSS via CREATE NEW > CSS) or deleted from it by a user. They are also draggable and droppable and validation works for the attributes input.

Android Binary

In this section, ​you can configure Android binary file settings, upload icons, and splash screens, and manage certificates.
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 to the Google Play Store).
  • Select the SDK versions to be supported.
  • Check the Release box to stop debugging. Builds with the unchecked Release box will be probably rejected by Play Store with the uploaded APK that is not zip aligned message.
  • Set the launch images for different screen sizes.
  • Set the key parameters and add certificates.

Ionic 4 Android binary settings.

jQuery Mobile Android binary settings.

👍

Managing Icons

In a JQM project, to upload an icon for Android binary, click Change to start the Media Manager then, upload the image file and then confirm by selecting it.
In an Ionic 4 app, you need to go to the corresponding section, Icons, and upload all the needed icons independently.

Automatic Update

The automatic update feature allows publishing app updates without going through an app store.
Learn more about Automatic Update here.

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 Features

A list of selectable Android features that can be added to the app:

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 uploading 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 file should preferably be a .PNG file with no transparency.

iOS binary settings.

Automatic Updates

The automatic update feature allows publishing app updates without going through an app store.
Learn more about Automatic Update here.

iOS Keys

In the 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.

Cordova Plugins

Core Cordova Plugins

In this view, you can select what plugins are to be included in your app:

Imported Cordova Plugins

When you install a custom Cordova plugin, additional permissions might be checked automatically that are required for the plugin to work properly:

Npm Modules

This view can be used for managing the order of loading assets to Angular-based applications as it provides the option of defining the module's dependencies: sequencing the added files in the necessary order:

You can check more about npm packages and modules here.

Components

This section allows for configuring UI components.

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.

Internationalization

Allows using the internationalization (i18n) library to build multilingual apps.
You can check here to learn how it can be used in an app.

PWA

This section offers many settings that can prepare the app to be distributed as a PWA.

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.

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. The 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 app, 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 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 Link into Description 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 space is used as the text for the link name.

Updated about a month ago

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.