Cordova – PhoneGap: package mobile apps in the cloud

The benefit of the Cordova project is the ability to create a native application from an HTML file and a little JavaScript, at it’s very minimum. Building PhoneGap applications for multiple mobile platforms can be a challenging endeavor. You have to install each platform’s SDK, as well as IDEs, build tools, simulators or emulators, and more. The PhoneGap Build service provides the means to build PhoneGap applications in the cloud, without the need to install a bunch of software on a developer workstation. All you have to do is write your web applications using your web content editor of choice, upload the files to the cloud, and then let PhoneGap Build do the rest. Adobe Dreamweaver CS6 has the built-in capabilities to interact with and upload your mobile project directly to the remote PhoneGap Build service on your behalf. You can, however, build your application using the service directly via the web. PhoneGap Build currently supports the following mobile platforms:

  • Android
  • BlackBerry
  • iOS
  • Symbian
  • webOS

PhoneGap Build takes care of all the packaging and compilation, and you get some mobile apps back in a matter of minutes. PhoneGap Build gives you two options – you can upload an existing PhoneGap project either as a single index.html or a package zip archive, or link the site to a source control repository.

PhoneGap Build uses an open packaging model that follows the W3C Widget Packaging specification. More information can be found here.

  • PhoneGap Build only requires the assets of your application. This is essentially your www directory which contains your html, css, images, js files, etc.
  • Remove the phonegap.js (cordova.js) as Build will automatically inject it during compile time
  • Ensure that the following reference is made in your index.html: <script src=”phonegap.js”></script>
  • Optionally you can configure your application with a configuration XML file
  • You should now be ready to proceed with building your application on PhoneGap Build

Now for the apps themselves. It’s not too difficult to install them directly, depending on which platform you’re using:

  • Android: ensure your Android device can install apk files from unknown sources: enter Settings -> Applications -> and enable Unkown Sources
  • webOS: You cannot install webOS packages (ipk files) directly from the web; use Palm’s palm-install utility for this
  • Symbian: Download and open the wgz file on your device
  • BlackBerry: Hit the OTA install link and follow the instructions on your device
  • Windows Phone: You cannot install Windows Phone packages directly from the web; you will need to use Microsoft’s tools

For the platforms that support direct installation, you can either navigate to the site and touch the appropriate link, or use the phone’s camera to read the QR code displayed with a QR code reader of your choice. Find more information about Building for iOS. Find more information about iOS Custom Icon and Image Creation Guidelines.

Building for iOS

Adobe PhoneGap Build offers support for building to iOS devices. All iOS builds need to be signed by a developer certificate and a provisioning profile. You will need a key which will actually consist of two files: a certificate and a provisioning profile.

But first we need to create an App ID. An app ID’s primary use is as part of a provisioning profile. An app ID is a string containing two parts, a team ID and a bundle ID search string, with a period (.) separating the two parts. The team ID is a unique 10-character string generated by Apple. Two kinds of app IDs are supported: wildcard app IDs and explicit app IDs. In order to incorporate Apple Push Notification Service (APNS), In App Purchase, or Game Center features into your app, you must create an explicit app ID for your app. Explicit App ID:

Team ID (generated by Apple).Bundle ID
A1B2C3D4E5.com.domain.appname

When you create your profile, you will specify the App IDs that are linked to the profile. This is important when using PhoneGap Build: the package name you specify for your app, in your config.xml (the id attribute of the widget element) or through the Edit App page, will have to match the ID for the provisioning profile. Apple appends a Team ID to the provisioning profile when you generate it through the iOS Developer Center. Note that you do not to include this App ID Prefix in your config.xml for PhoneGap Build to build successfully. You just need the reverse-domain style Bundle Identifier – com.domain.appname.

To create an App ID follow the steps below:

  • Go to the Apple Member Center and sign in
  • Click on Provision & test your apps…
  • Click on App IDs and click on New App ID
  • Enter a common name or description of your App ID
  • Enter a unique identifier for your App ID. The recommended usage is a reverse-domain name style string, e.g., com.domain.appname.

Then we need to create a provisioning profile in the iOS Provisioning Portal:

  • Click on the Provisioning link
  • Click on the Distribution tab and click New Profile
  • Profile Name: <App_Name> Distribution Profile (the app name in the name of the provisioning profile is optional)
  • App ID: The appropriate app ID for the app being distributed (the app ID can identify a specific app or an app domain)
  • Click Submit

Next step in the process is the generation of a certificate.

Generate a p12 certificate on Windows (64 bit)

  • Download and install OpenSSL for Windows 64 (current version: Win64 OpenSSL v1.0.1e). You may need to install the VC2008 64 Bit Redistributables as well
  • Open the command prompt
  • set OPENSSL_CONF=c:\OpenSSL-Win64\bin\openssl.cfg
  • C:\OpenSSL-Win64\bin\openssl genrsa -out mykey.key 2048
  • C:\OpenSSL-Win64\bin\openssl req -new -key mykey.key -out cert.csr -subj “/emailAddress=email@address.com, CN=Your Name, C=NL” (replace email address and name by your own and C=NL by your country code)
  • Upload the Certificate Signing Request (cert.csr) to the Apple Developer Site. Refresh the page after a few moments and your CSR should be accepted
  • Click the Download link listed next to your accepted certificate. This will download the developer_identity.cer file
  • C:\OpenSSL-Win64\bin\openssl x509 -in ios_distribution.cer -inform DER -out ios_distribution.pem -outform PEM
  • C:\OpenSSL-Win64\bin\openssl pkcs12 -export -inkey mykey.key -in ios_distribution.pem -out ios_distribution.p12 (you will be asked to enter a password and confirm it. This password will need to be re-entered when submitting the .p12 file to PhoneGap Build)

Generate a p12 certificate on Mac OS X

  • Open the Keychain Access utility on your Mac, and identify the certificate that you use for iOS development. Right click on that certificate and select Export
  • Save the certificate and enter a password. Remember the password: you will need to give it to PhoneGap Build

On the Adobe PhoneGap Build app detail page, simply select the New key option from the signing key dropdown and then, from the list of platforms with signing available, hit add a key for iOS. Fill out the form: add your p12 certificate file and your mobileprovision file, and enter the password associated with your certificate.
Building for Android
Adobe PhoneGap Build allows you to sign your Android builds, so they are suitable for submission to the Android Market. To get a release build ready, you first need to generate a signing keystore file.

Generate a certificate on Windows (64 bit)

  • Dowload and install the Android SDK
  • Install Java Platform, Standard Edition (Java SE / Java Platform (JDK)) Be sure to download the  Windows x64 version
  • Open the command prompt
  • set PATH=%PATH%;C:\Program Files\Java\jre7\bin
  • set JAVA_HOME=C:\Program Files\Java\jre7
  • keytool -genkey -v -keystore mycertificate.keystore -alias mykey -keyalg RSA -keysize 2048 -validity 20000 (Keytool prompts you to provide passwords for the keystore and key, and to provide the Distinguished Name fields for your key)

Now we can sign our application:

  • jarsigner -verbose -sigalg MD5withRSA -digestalg SHA1 -keystore mycertificate.keystore filename.apk mykey
  • jarsigner -verify -verbose filename.apk

It is recommended that you use the zipalign tool to optimize the final APK package:

  • zipalign -v 4 filename.apk signedfilename.apk (the zipalign tool is provided with the Android SDK, inside the tools/ directory)

The next step is to go to edit your account and add the key. Scroll down and you should see a new panel present, for signing keys and certificates. Hit add a key and fill in all of your details – ensure that the alias, key password and keystore password fields match those entered when you created your key. The title field can be anything you want – something to help you identify your key. Hit save and the list of keys at the bottom should be updated to include your new key.  Make sure you set your new key to be the default.

When a release build of an app is made with PhoneGap Build, we sign the binary with your keystore, and also align it using the zipalign tool. Now you’re ready to go: all subsequent Android builds will use your default selected key, and be release ready.

Note: on my system jarsigner was installed in C:\Program Files\Java\jdk1.7.0_17\bin

Note: If your get the following error: jarsigner: unable to sign jar: java.util.zip.ZipException: invalid entry compressed size, this is what you should do:

  • Rename the .apk file to .zip
  • Unpack the .zip file and remove the META-INF folder
  • Zip the folder again and rename it to .apk

Note: when you get the warning This jar contains entries whose certificate chain is not validated during verification try to use:

  • jarsigner -verify -keystore mycertificate.keystore filename.apk

Note: when you get the warning keytool error: java.lang.Exception: Key pair not generated, alias already exists you should change the name of mycertificate.keystore.
iOS icons

App icon (required for all apps);

  • 114 x 114
  • 57 x 57
  • 72 x 72

Android icons

Android launcher icons should be 32-bit PNGs with an alpha channel for transparency. The finished launcher icon dimensions corresponding to a given generalized screen density are shown in the table below.

  • ldpi (120 dpi); (Low density screen) 36 x 36 px
  • mdpi (160 dpi); (Medium density screen) 48 x 48 px
  • hdpi (240 dpi); (High density screen) 72 x 72 px
  • xhdpi (320 dpi); (Extra-high density screen); 96 x 96 px

Andoid splash screen landscape

  • screen-xhdpi-landscape.png 1280 x 720
  • screen-hdpi-landscape.png 800 x 480
  • screen-mdpi-landscape.png 480 x 320
  • screen-ldpi-landscape.png 320 x 200

Andoid splash screen portrait

  • screen-xhdpi-portrait 720 x 1280
  • screen-hdpi-portrait.png 480 x 800
  • screen-mdpi-portrait 320 x 480
  • screen-ldpi-portrait.png 200 x 320

iOS splash screen

  • Default-568h@2x~iphone.png (640×1136 pixels)
  • Default-Landscape@2x~ipad.png (2048×1496 pixels)
  • Default-Landscape~ipad.png (1024×768 pixels)
  • Default-Portrait@2x~ipad.png (1536×2008 pixels)
  • Default-Portrait~ipad.png (768×1024 pixels)
  • Default@2x~iphone.png (640×960 pixels)
  • Default~iphone.png (320×240 pixels)

Leave a Reply