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 settingsjQuery Mobile app settings

jQuery Mobile app settings

Ionic 5 app settingsIonic 5 app settings

Ionic 5 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.

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 Ionic 4/5 apps only:

Assets (Ionic 4/5)

Allows access to the Theme Generator, Files Manager (along with the Media Manager) for uploading the needed files (for example, icons or fonts) to be used in the app. Click the icon Change button to open the Media Manager:

Custom Tags (Ionic 4/5)

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

The following options are available in jQuery Mobile apps only:

Icon (JQM)

An icon that can be selected for the app.

Start Page (JQM)

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

Theme (JQM)

The color scheme of the app.

Swatch (JQM)

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 (JQM)

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 (JQM)

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

Resources (Ionic)

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

Ionic 5 ResourcesIonic 5 Resources

Ionic 5 Resources

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 (jQM)

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:

jQM Libraries versionsjQM Libraries versions

jQM Libraries versions

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 resourcesjQuery Mobile app resources

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 SCSS Resources

New resources can be dynamically added to this table (for example, when adding SCSS via CREATE NEW > SCSS) 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 (more information about the Android SDK Platform can be found here);
  • Select the build type for exporting app binary and enable/disable the automatic update option;
  • Set the launch images for different screen sizes;
  • Set the key parameters and add certificates.
Ionic 5 Android binary settingsIonic 5 Android binary settings

Ionic 5 Android binary settings

Launch Icons and Screens Generator

You can significantly simplify the process of adding launch icons and screens to your app by using our built-in generator instead of uploading sets of files of needed sizes via the Media Manager.

👍

Important

Note that Appery.io Launch Icons and Screens Generator works for projects with the latest Cordova libraries versions: 2.1 (Ionic4) and 5.2 (JQM).

To do it, follow some simple steps:

  1. Go to the General tab and click Change to upload the image file as a launch icon and/or as a launch screen:

Note that that only the 1024x1024 .PNG files for launch icons and 2732x2732 .PNG for launch screens are accepted.

  1. Switch to the Cordova plugins > Core Cordova plugins tab and make sure that the Appery.io Resource Generator plug-in is enabled (it is enabled for all new Ionic 4/5 projects by default):

Now, you can generate icons and splash screens automatically and this is how it can look like on the device:

Please note that you are also free to upload some specific files independently if you need to do so.

👍

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/5 app, you need to go to the corresponding section, Icons, for examples, and upload all the needed icons independently or use the Launch Icons and Screens Generator feature.

jQuery Mobile Android binary settingsjQuery Mobile Android binary settings

jQuery Mobile Android binary settings

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 permissionsAndroid permissions

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:

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 settingsiOS binary settings

iOS binary settings

👍

Note that you can also choose to generate icons and splash screens automatically by using the Launch Icons and Screens Generator feature.

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 keysiOS keys

iOS keys

Cordova Plugins

Core Cordova Plugins

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

Imported 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:

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 Google Maps and Internationalization:

Google Maps

The Google Maps (Ionic) 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:

Ionic 5 PWAIonic 5 PWA

Ionic 5 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 filesLibrary - 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. 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 will need to Export the application as binary, and install it on the device to see the launch images.

📘

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 a 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.