Explore… the Build & Deployment Process

Once you have finished building your application in the Infinity App Studio, the application files can pass through the Build Process to create a standalone application. The built application can then be deployed to an Android or iOS device, or published to a website to be accessed by a range of supported browsers.

Before it is possible to pass the app files to the Build Process, it is necessary to create the required accounts and configure these within the Studio’s settings. There are a few differences depending on the target platform, which are detailed in the sections below.

Topics covered in this article

1. Create a GitHub Account
2. Create a PhoneGap Account
3. Signing Keys
4. Build Process
5. Deployment Process

1. Create a GitHub account

In order to use the Build Process for any of the 3 platforms, it is necessary to have a GitHub account. If you do not already own an account, a new one can be registered using the steps below:

  1. Open a browser and navigate to the GitHub website.
  2. Select the ‘Sign Up‘ button in the top menu.
  3. Enter your details.
  4. Choose your desired payment plan – A free option is available.
  5. Select ‘Finish sign up’. This will navigate you to the GitHub dashboard.
  6. You should receive a confirmation email. It will be necessary to verify your email address before continuing.

1a. Create a GitHub Repository

Once you have created a GitHub account, it will be necessary to create a new repository. This is used to store a copy of the application files prepared by the Infinity App Studio.

As the contents of the repository is overwritten each time you re-build the application, it is recommended that a separate repository is used for each app. New repositories can be made using the following steps:

  1. Select the ‘New repository‘ button on the GitHub dashboard.
  2. Enter a name for your repository.
  3. Select whether the repository should be set to public or private.
  4. Check the ‘Initialize this repository with a README‘ option.
  5. Select ‘Create repository’.

1b. Add GitHub account to Infinity Studio

In order for CommonTime Infinity to be able to push files to your GitHub repository, your GitHub account must be registered in the App Studio via the Studio Settings screen.

This requires you to provide a Personal Access Token which will grant the Infinity App Studio the necessary permissions to commit files to the repository and check information about your user account. The following steps only need to be completed once for each GitHub account you wish to use:

  1. In your browser, return to the GitHub page.
  2. Select your user icon in the top right corner and choose ‘Settings‘ from the drop list.
  3. Select the ‘Personal access tokens‘ section in the left hand sidebar.
  4. ‘Select ‘Generate new token‘. This will require you to confirm your password.
  5. Enter a description for the token.
  6. Select all of the options within the ‘repo‘ and user‘ scopes.
  7. Select ‘Generate token‘. Copy the key and paste it somewhere safe as you won’t be able to view it again (without generating a new key).
  8. Open CommonTime Infinity.
  9. Using the cog symbol in the top right corner, open the ‘Studio settings’ screen.
  10. Navigate to the ‘GitHub’ section and select ‘Add Account’.
  11. Enter your GitHub username and Personal Access Token. When done, press ‘Save’.

 

2. Create a PhoneGap account

When building a standalone application for an Android or iOS device, it is necessary for the files to be passed through an additional step known as the PhoneGap Build Service.

If you do not have a PhoneGap account, the following steps can be used to create one:

  1. Navigate to the PhoneGap Build website.
    Note: It is recommended that this is opened in a separate tab/window as the GitHub page will be required shortly.
  2. Select ‘Sign Up’ in the top menu.
  3. Choose your preferred plan – A free option is available.
  4. Sign in using your Adobe ID. If you do not yet have an Adobe account, use the ‘get an Adobe ID’ link to register for one.

2a. Link GitHub to PhoneGap

Once you have created your PhoneGap account, it is necessary to register a PhoneGap ‘app’. This should be linked to your GitHub repository to allow the Android and iOS files to automatically be passed from one account to the other.

The following set of steps should therefore need to be repeated for each repository which you will use:

  1. Return to the GitHub dashboard and open the repository you wish to use.
  2. Select the ‘Create new file‘ button and name the file “index.html“.
  3. Scroll to the bottom of the page and select ‘Commit new file‘.
  4. From the repository overview, select ‘Clone or download’ and copy the HTTPS clone URL. This should be specified in the format:  https://github.com/GitHubUsername/RepositoryName.git
  5. Swap to the PhoneGap window.
  6. Select the ‘new app‘ button and paste the GitHub URL into the ‘paste .git repo’ field.
  7. Select the ‘Pull from .git repository’ button.

 

 

2b. Add PhoneGap to Infinity Studio

In order for CommonTime Infinity can initiate builds for Android and iOS, your PhoneGap account must be registered in the App Studio via the Studio Settings screen.

This requires you to provide a Client ID, Client Key and Authentication Token which will grant the Infinity App Studio the necessary permissions to initiate app builds and check information about your user account. The following steps only need to be completed once for each PhoneGap account you wish to use:

  1. In your browser, return to the PhoneGap dashboard.
  2. Select your user icon in the upper right corner and choose ‘Edit Account‘.
  3. Select the ‘Client Applications‘ tab and press the ‘Register new application‘ button.
  4. Enter the details for your app:
    • Name
      The name of the application
    • Main Application URL
      A URL to a webpage containing details of your company or app
    • Callback URL
      A URL that PhoneGap will redirect a user to after the application is allowed to interact with the Build account. For more details, see this documentation.
  5. Select ‘Register’.
  6. Click on the newly created app to view its details.
  7. Take a note of the ‘Client ID‘ and ‘Client Secret‘ value and close the app details window.
  8. Scroll down the page to the ‘Authentication Tokens’ section. If you have not  yet generated a token, select the ‘Reset’ button.
  9.  Take a copy of the authentication token.
  10. Open CommonTime Infinity and use the cog symbol to navigate to the Studio Config screen.
  11. Select the ‘PhoneGap’ section and press the ‘Add Account’ button.
  12. Enter a name which will be used within the Studio to identifiy this app.
  13. Paste in the Client ID, Secret ID and Auth Token. When complete, select ‘Save’.

 

 

 

3. Signing Key

Within the PhoneGap Build Service it is possible to specify distribution certificates which will be used to sign your applications. The requirements and type of distribution certificate differ depending on your chosen platform. Please see the sections below for further information.

To register a new Signing Key:

  1. Open your browser and return to the PhoneGap dashboard.
  2. Select the user icon in the top right corner and choose the ‘Edit account‘ option.
  3. Select the ‘Signing Keys‘ tab.

3a. Android Keystore

The certificate used to sign Android applications is known as a Keystore which can be generated free of charge using your own computer. For further information on this process, please see this documentation.

The Build Process does not require you to use a Keystore. However, if you do not select one at build time, the application which is produced will have debug mode enabled allowing users to inspect the application via the Chrome Developer Tools. This is useful when testing the application, but should not be distributed in a production environment, and cannot be submitted to the Google Play Store.

In order to produce a ‘release’ version of the application, the Keystore should be uploaded as a Signing Key. The same Signing Key can be used to sign multiple Android applications across multiple distribution methods (MDM, Play Store etc).

If you are distributing the app via the Google Play Store, it is important that a backup of the Keystore is made. If the Keystore is lost, it will not be possible to upload updates to the same listing within the Play Store.

Once you have generated/obtained the Keystore you wish to use, it can be registered as a Signing Key:

  1. Select the ‘add a key’ button in the Android section.
  2. Enter a title (i.e. a name used to identify the key).
  3. Upload the Keystore and specify the alias (which was set when creating the Keystore).
  4. Select ‘submit key’.

PhoneGap locks each of the keys to prevent them from being used without the pair of passwords associated with the Keystore file. When building an application via the Infinity App Studio, you will be prompted for the two password to unlock the Signing Key.

3b. iOS Certificates

Apple requires that iOS applications must be signed with a certificate before they can be installed on a device, regardless of whether they are being distributed as a test, Enterprise or App Store application.

To set up an iOS Signing Key, it is necessary to generate an App ID, Distribution Certificate and Provisioning Profile by signing up for one of the Apple Developer Programs and logging into the iOS Dev Center. For further details on this process, please review this documentation.

Note: Separate Developer Programs are available based on whether the application will be distributed to an Enterprise, or publicly through the App Store. Please ensure the correct developer type is selected dependent on how you wish to distribute the application. Each account has an annual fee ($299/$99) and the account type cannot be changed at a later point in time.

Once you have generated/obtained the distribution certificate (.p12) and provisioning profile (.mobileprovision), they can be registered as a Signing Key:

  1. Select the ‘add a key’ button in the iOS section.
  2. Enter a title (i.e. a name used to identify the key).
  3. Upload the .p12 and provisioning profile.
  4. Select ‘submit key’.

PhoneGap locks each of the keys to prevent them from being used without the password associated with the p12 file. When building an application via the Infinity App Studio, you will be prompted for this password to unlock the Signing Key.

More than one Signing Key can be registered for each PhoneGap account. This allows you to store keys for different applications (with individual provisioning profiles) or different purposes (Development, Enterprise, App Store). Note that the certificates and provisioning profiles expire after a set period of time and will need maintaining to ensure that you can continue to sign apps over multiple years.

4. Build Process

Once the account(s) required for the Build Process has been set up and configured, it is quick and easy to build your applications from within the Infinity App Studio:

  1. Open CommonTime Infinity and navigate to the App List Screen.
  2. Select the central icon above the app you wish to build.
  3. Select the ‘New Build‘ button.
  4. Choose which platform(s) you wish to build the application for.

You will then be presented with a number of fields to select which account and settings you wish to use. These different depending on the platform(s) which you have selected on the build screen. For more information, see the sections below.

4a. Browser Only

If you only wish to build for a Browser, you will be prompted to choose the name of the GitHub account you wish to use. Upon selecting an option, the second drop down list will be populated with a list of repositories associated with that account.

As an additional option, you can select whether the files should be pushed to ‘GitHub Pages‘. This produces a temporary website with the files, which can be used for quickly testing changes before pushing the files onto your live site. For further information, please see this documentation.

Once you have chosen your desired settings, press the ‘Build‘ button.

Note that Browser applications are not able to use some features provided by CommonTime Infinity as they cannot access input from a camera, microphone etc. For a full list of compatible features, please see this page.

4b. At least one device

If you wish to build the application for an Android or iOS device, you will be prompted to choose the name of the PhoneGap account you wish to use. Upon selecting an option, the second drop down list will be populated with a list of PhoneGap apps associated with that account.

You can then select which Signing Keys should be used to sign the applications. Where required, password fields will be provided to allow you to unlock the chosen keys.

Once you have entered your desired settings, press the ‘Build‘ button.

Note that if you choose to build for both desktop and devices, you will not be prompted to choose your GitHub details as these can be derived from which PhoneGap app you choose to use.

5. Deployment Process

Selecting the ‘Build’ button in CommonTime Infinity will push the latest code for the app into the GitHub repository. If you have selected to build a device version, the code will then be passed to PhoneGap to build the .apk (Android) and .ipa (iOS) versions.

The status of the build process can be determined using the coloured bars in the ‘Latest builds’ section. Green denotes the build has completed and was successful. Red indicates there was an error in the build process. Pending applications will be shown in blue. Further logs can be seen via your PhoneGap account.

When the app has been successfully been built, it can be deployed. This method varies depending on the platform type:

5a. Deploy to a Device

Once the Build Process has finished successfully, PhoneGap will produce an .apk file (for Android) and/or an .ipa file (for iOS). To start using the application, these must be deployed to a device using one of the following methods:

Install via PhoneGap Link

PhoneGap supplies a QR Code and URL which can be used to download the application from the PhoneGap site. This is useful for testing or quickly deploying to a small number of devices.

  1. In the ‘Latest builds’ section, select the icon for the platform you wish to deploy.
  2. On the device, scan the QR code or navigate to the URL provided.
  3. The download should begin automatically. If not, select the appropriate link to begin the download.
  4. If the device asks whether you would like to download/install the file, select the ‘install’ or ‘ok’ option.

Note that this method can be used for all Android applications, and iOS apps signed with an Enterprise or Developer Distribution certificate. If your app has been signed with an App Store, the app should instead be downloaded and tested using Testflight (Apple’s Official testing platform).

 

Download & Distribute App

Using the link provided PhoneGap it is also possible to download a copy of the the .apk (Android) and/or .ipa (iOS) files. This allows you to distribute them through a method of your choice, such as an App Store, a secure website or MDM program:

  1. In the ‘Latest builds’ section, select the icon for the platform you wish to deploy.
  2. On a computer, navigate to the URL provided.
  3. Select the desired platform link to begin the download.
  4. Distribute the apk (Android) or ipa (iOS) file using your chosen method.

5b. Deploy to Browser

Where the ‘Browser’ platform has been selected, CommonTime Infinity will produce a set of files which can be hosted on a website. This allows users to access the application by navigating to the site using one of the supported browsers.

To obtain a copy of the application files:

  1. Navigate to the URL provided by CommonTime Infinity. This will be in the format:

https://github.com/GitHubUsername/RepositoryName

  1. Download a copy of the files from your GitHub account using the ‘clone or download‘ button.
  2. Host these files on your website.

GitHub Pages

By selecting the ‘Push to GitHub pages’ option during the build process, a version of the application will be hosted on a webpage linked to your GitHub account. It is not recommended that this is used for live deployment, as CommonTime Infinity will overwrite the application files if you choose to re-build the application. However, does allow you to test updates in a quick and efficient manner.

To access it, open a browser and navigate to a link in the format:

https://GitHubUsername.github.io/RepositoryName

Note that it may take a few minutes for the GitHub Pages to become available once the application has finished building.