Preparing for the mobile package

These preparations are for packaging the stand-alone mobile apps (for iOS and Android) and customizing and packaging the Appeon Workspace.

Preparations for the iOS package

Before you packaging the iOS application, make the following preparations accordingly:

  1. (Required) Register for an Apple ID.

    You can follow the onscreen instructions on My Apple ID to create an Apple ID if you do not have one.

    It is strongly recommended that you consistently use the same Apple ID in every place that requires you to input an Apple ID. This is mainly for the following two reasons: 1) Using the same Apple ID when packaging the iOS applications can help Appeon determine whether the apps are running on the same device, so Appeon can correctly manage the device sessions in the license file. More details are provided in the section called “Task 3.1 (Optional): Import the certificate” in Appeon Mobile Tutorials. 2) Using the same Apple ID when working with Xcode can eliminate the likelihood of conflicts between the certificate and the provisioning profile.

  2. (Required) Prepare a Mac machine with the latest Xcode installed.

    The Package Wizard will generate an Xcode project which you will need to compile into the IPA file using Xcode. There are several other tasks you should do to prepare the Xcode environment. Detailed instructions are provided in the section called “Task 1: Prepare the Xcode environment” in Appeon Mobile Tutorials.

  3. (Optional) Prepare the icons/images for your application.

    You can provide you own app icons, launch images, and spotlight icons for your iOS application. If you do not provide the icons and images, the Package Wizard will use the default ones provided by Appeon.

    1. App Icons: Refer to App Icon for the size requirement for different iOS devices.

    2. Launch Images: Refer to Launch Image for the size requirement for different iOS devices.

      It is optional to reduce the iOS status bar (20 pixels for standard display and 40 pixels for retina display) for the launch image, for example, 1004 x 768 pixels as the launch image for standard display in landscape on iPad.

    3. Spotlight Icons: Refer to Spotlight Icon for the size requirement for different iOS devices.

Preparations for the Android package

Before you packaging the Android application, make the following preparations accordingly:

  1. (Required) Obtain a private key.

    The Android operating system requires that all installed applications be digitally signed with a certificate whose private key is held by the application's developer and uses the certificate as a means of identifying the author of an application and establishing trust relationships between applications. You can either use the default keystore file generated by Appeon or use the Keytool utility included in the Android Java Development Kits (JDK) to generate your private key. For details, refer to http://developer.android.com/tools/publishing/app-signing.html.

  2. (Optional) Prepare the icons/images for your application.

    You can provide you own app icons and splash/launch images for your Android application. If you do not provide the icons and images, the Package Wizard will use the default ones provided by Appeon.

    Android powers a variety of devices with different screen sizes and densities, in order to get a proper UI look on those different screens, you may need to provide different app icons and splash/launch images for your app.

    1. App Icons: Refer to App Icon for the size requirement for different Android screens.

    2. Splash/Launch Images: Refer to Splash Image for the size requirement for different Android screens.

Preparations for the Appeon Workspace package

Except for the above two preparations, you may also need to do the following two preparations if you want to customize and package the Appeon Workspace, otherwise, the Package Wizard will use the default settings.

  1. (Optional) Prepare your own banner.

    The banner in the Appeon Workspace is an HTML Web app. You can design your own banner and replace the Appeon Workspace Banner.

    1. Banner size:

      1. For iOS devices: The height is 248 pixels for iPad (including iPad 2, 3, 4, mini and Air), and 124 pixels for iPhone (including iPhone 4, 4S, 5, 5C, 5S); the width is subject to the device (usually the same width as the device screen). Below is the width for different screens:

        For iPad 2, 3, 4, and mini, the width in Portrait view is 768 pixels, and the width in Landscape view is 1024 pixels.

        For iPad mini with retina display and iPad Air, the width in Portrait view is 1536 pixels, and the width in Landscape view is 2048 pixels.

        For iPhone 4, 4S, 5, 5C, and 5S, the width in Portrait view is 640 pixels, and the width in Landscape view is 960 pixels for iPhone 4/4S, and 1136 pixels for iPhone 5, 5C, and 5S.

      2. For Android-powered devices: You need to design your own height (or you can use the recommended 248 pixels for tablets, and 124 pixels for smartphones) and the width is subject to the devices. You may need to write scripts to retrieve the size of the device screen first and then design your own HTML Web app as the Workspace Banner accordingly.

    2. HTML file name:

      Make sure that the HTML Web app contains an index.html file under the root directory of the app. The index.html file is the default file that the Workspace Banner loads.

    3. Important Notes:

      1. Keep the banner height as 248 pixels for iPad, and 124 pixels for iPhone; and the width the same as the device screen.

      2. There are different widths for the portrait view and for the landscape view on a device if your workspace supports both orientations.

      3. Pay attention to the compatibilities of the related JavaScript.

  2. (Optional) Prepare the UI language package:

    The workspace UI can be displayed in English, French, Simplified Chinese, Traditional Chinese, Japanese, Korean, Italian, and Spanish.

    To make Appeon Workspace display in other language as well, you will need to add the other language packages before you package Appeon Workspace:

    1. Navigate to one of the following folders under the Appeon Developer installation directory according to your package type.

      1. For iOS packages: ...\Appeon\Developer2013R2\AppTemplate\iOS\XcodeX\AppeonWS.bundle\config\Aws\ (the second "X" in XcodeX indicates the Xcode version);

      2. For Android packages: ...\Appeon\Developer2013R2\AppTemplate\Android\\AppeonWS.bundle\config\Aws\.

      Open the languages.xml file in a text editor and uncomment the line of script that corresponds to the language you want to add. It is recommended that you back up this file before modifying it.

      For example, to add the support for German, find the corresponding line of script (or add it if it is not pre-defined), and then remove the comment as shown below:

      <lang code="de" name="Deutsch" c="德文"/>

      The value of code must be used as the file name for the language in the next step.

      The value of name will be used as the display name for the language in the Language tool of Appeon Workspace later.

    2. Make a copy of an existing language file under one of the following folders (according to your package type) under the Appeon Developer installation directory.

      1. For iOS packages: ...\Appeon\Developer2013R2\AppTemplate\iOS\XcodeX\AppeonWS.bundle\config\Aws\lang;

      2. For Android packages: ...\Appeon\Developer2013R2\AppTemplate\Android\AppeonWS.bundle\config\Aws\lang.

      Put the copy under the same directory, and name the copy after the value of code. Take German for example, the language file must be named as de.xml.

      Then open the file, and translate the content into the language you want to add.

    3. In the Package tool, when you click the ellipse button in the Default Language field, the language you added will be displayed for selection.

    4. In addition, you can customize the UI text by editing the language file under one of the following folders (according to your package type) under the Appeon Developer installation directory.

      1. For iOS packages: ...\Appeon\Developer2013R2\AppTemplate\iOS\XcodeX\AppeonWS.bundle\config\Aws\lang;

      2. For Android packages: ...\Appeon\Developer2013R2\AppTemplate\Android\AppeonWS.bundle\config\Aws\lang.

      For example, you can open en.xml and change the text (id="1") from "Appeon Workspace" to "ABC Workspace", so "ABC Workspace" will display in the center of workspace titlebar instead of "Appeon Workspace".