In this article by Andrey Kovalenko author of the book PhoneGap by Example we implemented several unit and integration tests with the Jasmine tool for our application. We used the headless browser PhantomJS, and we measured performance with Appium. All this is great and helps us automate the testing approach to find bugs in the early stages of application development. Once we finish creating our application and test it, we can think of delivering our application to other people. We can distribute the application in several different ways.

Once we finish these tasks, we will be ready to do a full cycle of the application creation and distribution processes.

We already know how to set up development environments to develop for iOS and Android. We will reuse these skills in this article as well to prepare our builds for distribution.

This article read as a step-by-step tutorial for the setup of different tools.

(For more resources related to this topic, see here.)

We already know how to build our application using IDE (Xcode or Android Studio). However, now, we will explore how to build the application for different platforms using the PhoneGap Build service.

PhoneGap Build helps us stay away from different SDKs. It works for us by compiling in the cloud.

First of all, we should register on https://build.phonegap.com. It is pretty straightforward. Once we register, we can log in, and under the apps menu section, we will see something like this:

We entered a link to our git repository with source files or upload the zip archive with the same source code.

However, there is a specific requirement for the structure of the folders for upload. We should take only the www directory of the Cordova/PhoneGap application, add config.xml inside it, and compress this folder. Let's look at this approach using an example of the Crazy Bubbles application.

PhoneGap config.xml

In the root folder of the game, we will place the following config.xml file:

<?xml version="1.0" encoding="UTF-8" ?>
    <widget 
        
        id          = "com.cybind.crazybubbles"
        versionCode = "10"
        version     = "1.0.0" >
    <name>Crazy Bubbles</name>
    <description>
        Nice PhoneGap game
    </description>
    <author href="https://build.phonegap.com"     email="support@phonegap.com">
        Andrew Kovalenko
    </author>
    <gap:plugin name="com.phonegap.plugin.statusbar" />
</widget>

This configuration file specifies the main setup for the PhoneGap Build application. The setup is made up of these elements:

• widget is a root element of our XML file based on the W3C specification, with the following attributes:
  • id: This is the application name in the reverse-domain style
  • version: This is the version of the application in numbers format
  • versionCode: This is optional and used only for Android
• name of the application
• description of the application
• name of the author with website link and e-mail
• List of plugins if required by the application

We can use this XML file or enter the same information using a web interface. When we go to Settings | Configuration, we will see something like the following screenshot:

PhoneGap plugins

As you can see, we included one plugin in config.xml:

<gap:plugin name="com.phonegap.plugin.statusbar" />

There are several attributes that the gap:plugin tag has. They are as follows:

• name: This is required, plugin ID in the reverse-domain format
• version: This is optional, plugin version
• source: This is optional, can be pgb, npm, or plugins.cordova.io. The default is pgb
• params: This is optional, configuration for plugin if needed

We included the StatusBar plugin, which doesn't require JavaScript code. However, there are some other plugins that need JavaScript in the index.html file. So, we should not forget to add the code.

Initial upload and build

Once we finish the configuration steps and create a Zip archive of the www folder, we can upload it. Then, we will see the following screen:

Here, we can see generic information about the application, where we can enable remote debugging with Weinre.

Weinre is a remote web inspector. It allows access to the DOM and JavaScript.

Now, we can click on the Ready to build button, and it will trigger the build for us.

Here, you can see that the iOS build has failed. Let's click on the application title and figure out what is going on. Once the application properties page loads, we will see the following screenshot:

When we click on the Error button, we will see the reason why it failed:

So, we need to provide a signing key. Basically, you need a provisioning profile and certificate needed to build the application. We already downloaded the provisioning profile from the Apple Development portal, but we should export the certificate from the Keychain Access.

We are going to open it, find our certificate in the list, and export it:

When we export it, we will be asked for the destination to store the .p12 file:

Add a password to protect the file:

Once we save the file, we can go back to the PhoneGap Build portal and create a signing key:

Just click on the No key selected button in the dropdown and upload the exported certificate and provisioning profile for the application. Once the upload is finished, the build will be triggered:

Now, we will get a successful result and can see all the build platforms:

Now, we can download the application for both iOS and Android and install it on the device. Alternatively, we can install the application by scanning the QR code on the application main page. We can do this with any mobile QR scanner application on our device. It will return a direct link for the build download for a specific platform. Once it is downloaded, we can install it and see it running on our device.

Congratulations! We just successfully created the build with the PhoneGap Build service! Now, let's take a closer look at the versioning approach for the application.

Beta release of the iOS application

For the beta release of our application, we will use the TestFlight service from the Apple.

As a developer, we need to be a member of the iOS Developer program. As a tester, we will need to install the application for beta testing and the TestFlight application from the App Store. After that, the tester can leave feedback about the application.

First of all, let's go to https://itunesconnect.apple.com and login there. After that, we can go to the My Apps section and click on the plus sign in the top-left corner. We will get a popup with a request to enter some main information about the application. Let's add the information about our application so that it looks like this:

All the fields in the preceding screenshot are well known and do not require additional explanation.

Once we click on the Create button, the application is created, and we can see the Versions tab of the application. Now, we need to build and upload our application. We can do this in two ways:

• Using Xcode
• Using Application Loader

However, before submitting to beta testing, we need to generate a provisioning profile for distribution. Let's do it on the Developer portal.

Generate a distribution provisioning profile

Go to the Provisioning Profiles, and perform the following steps:

1. Click on + to add a new provisioning profile and go to Distribution | App Store as presented in the following screenshot:

   

2. Then, select the application ID. In my case, it is Travelly:

   

3. After that, select the certificates to include in the provisioning profile. The certificate should be for distribution as well:

   

4. Finally, generate the provisioning profile, set a name for the file, and download it:

   

5. Now, we can build and upload our application to iTunes Connect.

Upload to iTunes Connect with Xcode

Let's open the Travelly application in Xcode. Go to cordova/platforms/ios and open Travelly.xcodeproj. After that, we have to select iOS Device to run our application. In this case, we will see the Archive option available. It would not be available if the emulator option is selected. Now, we can initiate archiving by going to Product | Archive:

Once the build is completed, we will see the list of archives:

Now, click on the Submit to App Store… button. It will ask us to select a development team if we have several teams:

At this stage, Xcode is looking for the provisioning profile we generated earlier. We would be notified if there is no distribution provisioning profile for our application.

Once we click on Choose, we are redirected to the screen with binary and provisioning information:

When we click on the Submit button, Xcode starts to upload the application to iTunes Connect:

Congratulations! We have successfully uploaded our build with Xcode:

Upload to iTunes Connect with Application Loader

Before the reviewing process of build upload with Application Loader, we need to install the tool first.

Let's go to iTunes Connect | Resources and Help | App Preparation and Delivery and click on the Application Loader link. It will propose the installation file for download. We will download and install it. After that, we can review the upload process.

Uploading with Application Loader is a little different than with XCode. We will follow the initial steps until we get the following screen:

In this case, on the screen, we will click on the Export button, where we can save the .ipa file. However, before that, we have to select the export method:

We are interested in distribution to the App Store, so we selected the first option. We need to save the generated file somewhere to the filesystem.

Now, we will launch Application Loader and log in using our Apple Developer account:

After that, we will select Deliver Your App and pick the generated file:

In the following screenshot, we can see the application's generic information: name, version, and so on:

When we click on the Next button, we will trigger upload to iTunes Connect, which is successfully executed:

During the process, the package will be uploaded to the iTunes Store, as shown here:

Once the application is added, it will show you the following screenshot:

Now, if we go to iTunes Connect | My Apps | Travelly | Prerelease | Builds, we will see our two uploaded builds:

As you can see, they are both inactive. We need to send our application to internal and external testers.

Invite internal and external testers

Let's work with version 0.0.2 of the application. First of all, we need to turn on the check box to the right of the TestFlight Beta Testing label.

There are two types of testers we can invite:

• Internal testers are iTunes Connect users. It is possible to invite up to 25 internal testers.
• External testers are independent users who can install the application using the TestFlight mobile tool.

To invite internal testers, let's go to the Internal Testers tab, add the e-mail of the desired tester, place the check mark, and click on the Invite button:

The user will receive an e-mail with the following content:

Users can click on the link and follow the instructions to install the application.

To allow testing for external users, we will go to the External Testers tab. Before becoming available for external testing, the application should be reviewed. For the review, some generic information is needed. We need to add:

• Instructions for the testers on what to test
• Description of the application
• Feedback information

  

Once this information is entered, we can click on the Next button and answer questions about cryptography usage in the application:

We do not use cryptography, so we select No and click on Submit. Now, our application is waiting for review approval:

Now, there is a button available to add external testers:

We can invite up to 1000 external testers. After the tester accepts the invite on their device, the invite will be linked to their current Apple ID.

Once the application review is finished, it will become available for external testers.

Summary

In this article of the book, you learned how to release the PhoneGap application with the PhoneGap Build service. Also, we released the application through TestFlight for beta testing.

Now, we will be able to develop different types of Cordova/PhoneGap applications, test them. I think it is pretty awesome, don't you?

Resources for Article:

Further resources on this subject:

• Geolocation – using PhoneGap features to improve an app's functionality, write once use everywhere[article]
• Getting Ready to Launch Your PhoneGap App in the Real World[article]
• Using Location Data with PhoneGap [article]