Using Cordova 3.5 CLI on Mac OS X Mavericks to build Android apps

This article gets you up to speed on how to integrate your HTML/CSS/JS app with PhoneGap/Cordova into an Android app using a Mac and prepare it for App Store submission. This article assumes you’ve already followed the steps on http://iphonedevlog.wordpress.com/2013/08/16/using-phonegap-3-0-cli-on-mac-osx-10-to-build-ios-and-android-projects/ to:

Download Node.js
Add PATH statements to .profile

In this article, I am referencing Mac OS X Mavericks 10.9.3 and ADT + Eclipse v22.6.4 on a Mac Mini. Cordova CLI 3.5.0 was installed. I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service.

Cordova CLI Android resource:
http://docs.phonegap.com/en/3.5.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide

PhoneGap/Cordova uses the command-line interface (CLI) to generate the files needed to start the project. However, one still needs to enter ADT + Eclipse (Android Development Tools) to create the program’s .apk file for uploading to Google Play.

This article covers the creation of an app from CLI creation to upload a final apk to Google Play.

Install ADT + Eclipse Bundle

Visit http://developer.android.com/sdk/index.html and download the bundle. To the left of that page are the instructions for setting it up. Within ADT, create AVDs with Window > Android Virtual Device Manager in order to test your project later.

Resource:
http://developer.android.com/tools/devices/managing-avds.html

Install Ant

My home computer Mac did not have ant installed. Ant is important for installing the Android platform. The easiest way is to use Homebrew.

1. Open Terminal and download Homebrew (http:brew.sh) with:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

2. When the prompt returns, type:

brew update

3. Then:

brew doctor

4. Then finally:

brew install ant

5. Check that it is installed with:

ant -version

I got the response:

Apache Ant(TM) version 1.9.4 compiled on April 29 2014

6. I received the message in Terminal to install Android target 19. So I typed:

Android

. . . and selected the latest version of Android 19 (19.0.3) when the Android SDK Manager window popped up. I followed the Install X packages routine, clicking on the files at left and accepting the license, and waiting for the downloads to complete. These downloads can take 15 minutes or more to finish. I clicked on OK to finish the install.

I’m told to close the Manager and re-open it, and to open Eclipse > Help > Check for Updates to see if the plug-in needs to be updated. If the SDK Manager indicates “Install X packages” again, then go ahead and click through to install.

7. Open Eclipse. It may indicate updates. If so, click through to install them. Mine indicated that Android 23 was necessary. Then it asked for a Restart to finish.

Install Cordova CLI

1. Open Terminal and issue the following command:

sudo npm install -g cordova

Pay attention to the inconsistency in the PhoneGap documentation between the use of “phonegap” and “cordova” in the command line. For instance, the Command-line Interface online page uses “phonegap” while the InAppBrowser API online page uses “cordova.” They are not interchangeable when using CLI. As seen in the above command, we are asking to download “cordova.” So we would replace all instances of “phonegap” in the documentation with “cordova,” or the command will generate a “not found”-type error.

However, use “phonegap” in place of “cordova” if you expect to use the PhoneGap Build service.

2. Give the root password and hit Enter. I got a series of ERR lines, ending with:

npm ERR! not ok code 0

I kept pasting the command and hitting Enter over and over until it completed (maybe three times). When successful, you should get a long list of lines beginning with “npm http,” then finally ending with a series of words containing the @ symbol and digit/dot pairings, terminating with your username at the end.

Create Cordova Project Files with CLI

1. Open a Finder window and select the folder you want to create your project’s folder inside of, such as /PhonegapApps
2. Open the Terminal app (click on its icon in the dock below, or click on the magnifying glass at top right and type in “terminal”), type cd and a space (for “change directory”), drag the selected folder to the Terminal screen, let go, click on the Terminal to select it, then hit Return. This will orient all commands to that folder.

For this project, all of your commands will always begin with “cordova.” Some online tutorials and PhoneGap documentation will tell you to use “phonegap;” in that case, change it to “cordova” and it should work fine.

3. Type the following in the terminal:

cordova create myApp

Basic files are generated in the /myApp folder.

4. Enter the new folder you created in Terminal with the cd (change directory) command:

cd myApp

5. CLI only downloaded the skeleton files needed for all platforms. Now you need to download the specific files for Android:

cordova platform add android

Open the myApp/platforms folder to see a new folder, /android.

Cordova included several files for a default one-screen app, complete with splashscreen and icon. To create a test apk file of the default Cordova PhoneGap app, type:

cordova build android

The apk file was built and saved as: myApp/platforms/android/ant-build/helloCordova-debug.apk

To run the apk on your device, you’ll need to go into your device’s Settings and enable for debugging. I have DropBox installed on my Android device and computer. It’s a simple matter to copy the file to DropBox on the computer, turn on my device, open DropBox there, and select the apk file to download, install and run it. You’ll know it’s running correctly when you see “APACHE CORDOVA DEVICE IS READY” on the screen. This is faster than running it in the Eclipse emulator.

For subsequent versions of the app, I always run the Refresh command in DropBox to make sure I’m referencing the latest version of the app.

If you have ADT + Eclipse installed, you can view your app on the computer after an abominably long waiting period. (Not recommended.) Type:

cordova run android

The app will build and Eclipse’s s-l-o-w emulator will run and display the default one-page Cordova app on the screen. If it never seems to load, shut down the emulator and terminal, and try both again.

If you only have one platform installed, you can shorten the command above to “cordova build” and “cordova emulate.” If you have more than one platform installed, “cordova build” will build each platform.

If you have an earlier cordova version installed (check with “cordova -v”), you can update to the latest version with:

npm update -g cordova

About Cordova Serve

We can also view the app in the browser with:

cordova serve android

I get this returned in the Terminal:

Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down

I opened a browser and copied/pasted the above URL in and saw a screen of text. Android was underlined, so I clicked on that and the app startup screen appeared. I clicked on OK to get rid of the message info box (which pops up when the default screen is not showing in a mobile device). The message displayed was, “APACHE CORDOVA Connecting to Device.” That is correct behavior for the default Cordova app — the message won’t update because the desktop monitor is not a “device” to connect to.

This is a “static” file, meaning if you opened the html page, made a change, and saved it, refreshing the browser will not show the changes.

I clicked on the Terminal and then CTRL + C returned me to the prompt.

Update the App Name

You’ll notice that the apk name was not “myApp.” To rectify that, open the myApp/config.xml page in a text editor. Change the <widget id= line to your reverse domain name or bundle identifier (Apple’s term), such as com.developerName.myApp. On the same line, put the correct version number, from 0.0.1 to 1.0.0, for instance.

Change <name>HelloCordova</name> to your app’s name: <name>myApp</name>.

Update the <description> and <author> information with your own.

Go ahead and replace the default Cordova resource files with your own. In other words, you can safely delete the /www/css, www/img, and /www/js folders. Replace the entire /www/ contents with your own HTML/CSS/JavaScript files and all other content files, like images and videos. (For this blog’s sake, I’m keeping the Cordova default app contents.)

When I did a cordova build android, the old name was still there. So I removed the android platform with the following code (WARNING: the entire /platforms/android folder and all its contents will be removed with this command, so if you have added any content like splashscreen images, you’ll want to copy them to another folder first):

cordova platform rm android

… then added it again with:

cordova platform add android

… and the new name appeared when I did a cordova build.

Add a Cordova API plugin

To implement Cordova features into your app, you’ll need to add the following to the head of the index.html page, as well as any page that uses Cordova APIs (application programming interface) such as InAppBrowser or SplashScreen:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script type="text/javascript" charset="utf-8"> // Wait for device API libraries to load document.addEventListener("deviceready", onDeviceReady, false); // device APIs are available

function onDeviceReady() {

</script>

The cordova.js file will be added for you at build time; no need to hunt around for it.

Add the InAppBrowser Plugin

Cordova adds extra functionality via plugins. Each plugin has its own code and must be downloaded separately. As an example of this process, we’ll load the InAppBrowser (IAB) plugin to the app. InAppBrowser enables external links in our app to remain in the app, otherwise an external link will take the user out of the app and open a browser. Then the user would need to exit the browser and reopen the app. The IAB will instead open a webView window to display the page, and a Done button (in iOS at bottom left) or an X (in Android at upper right) will close the window and return one to the app. The core plugins are here:
http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs

Resources:
https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index.md
http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

1. To install the IAB, make sure the Terminal shows the starting point as myApp, then type:

cordova plugin add org.apache.cordova.inappbrowser

You’ll see it installed in /myApp/plugins

To see all available installed plugins, type:

cordova plugin list

2. Open /myApp/config.xml and add the following above the </widget> line:

<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser" />
</feature>

3. Now we follow the instructions to style our links so they open in the IAB:

<!-- ***** START BELOW THIS LINE ***** -->
<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewpoint" content="user-scalable-no, initial-scale=1, width=device-width">
<!-- Set the viewport width to device width for mobile. May introduce problems with iOS 7 on iPhone, though. -->
 <meta name="viewport" content="width=device-width">
<title>inAppBrowser Test (with onTouchStart instead of onClick)</title>
<script src="cordova.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
}
</script>
<style type="text/css">
 html, body { background-color: #FFFFCC; margin: 0; padding: 0; }
 #wrapper { margin:0; width:100%; padding-top: 2em; }
 p { color: black; font-family: Helvetica; padding:.5em; margin: .5em; }
 p.button { font-size: .8em; border-radius: 8px; border: 1px gray solid; background-color: white; text-align: center; display: block; }
 p.note { font-family: Courier; color: black; font-size: .7em; font-style: italic; text-align: left;}
 a { text-decoration: none; }
</style>
</head>
<body onLoad="onBodyLoad()">
 <div id="wrapper" style="margin:20px;">
<h2>inAppBrowser Test (with onTouchStart instead of onClick)</h2>
 <p class="button"><a href="#" onTouchStart="window.open('http://docs.phonegap.com/en/3.5.0/guide_support_index.md.html#Platform%20Support','_blank');"> IAB with location bar (showing URL)</a> 
 </p>
 <p class="note">
&lt;a href="#" onclick="window.<br> 
open('http://URL','_blank',<span style="color:red;">'location=no'</span>);"&gt;
 </p> 
 <p class="button"><a href="#" onclick="window.open('http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/','_system');">URL opens in system web browser (must shut down browser then re-open app)</a>
 </p>
 <p class="note">
&lt;a href="#" onTouchStart="window.<br> 
open('http://URL',<span style="color:red;">'_system'</span>);">
 </p> 
 <p class="button"><a href="http://www.phonegap.com">Plain URL (no return to app; must remove app from memory before re-opening app)</a> 
 </p>
 <p class="note"><span style="color:red;"><a href="http://URL"> Just a URL link.</a></span>
 </p>
 </div>
</body>
</html>
<!-- ***** END ABOVE THIS LINE ***** -->

I completely replaced the contents of the default Cordova project’s index.html page with the above page, typed cordova build android to build the apk, moved myApp-debug.apk to DropBox, and opened it in my device. The screen shows several buttons, each one showing a different way to implement IAB, and what happens if you don’t use it. IAB works. Mission accomplished.

Update AndroidManifest.xml

[It's possible you will not need to do this step.] You’ll want to update myApp/platforms/android/AndroidManifest.xml with your permissions. Almost all of these are missing; enter ONLY what’s required for your app (the top one should already be there — if it weren’t, then the IAB would not have retrieved the page):

<uses-permission android:name=”android.permission.INTERNET”/>
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”/>
<uses-permission android:name=”android.permission.CAMERA”/>
<uses-permission android:name=”android.permission.VIBRATE”/>
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”/>
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”/>
<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS”/>
<uses-permission android:name=”android.permission.RECEIVE_SMS”/>
<uses-permission android:name=”android.permission.RECORD_AUDIO”/>
<uses-permission android:name=”android.permission.RECORD_VIDEO”/>
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS”/>
<uses-permission android:name=”android.permission.READ_CONTACTS”/>
<uses-permission android:name=”android.permission.WRITE_CONTACTS”/>
<uses-permission android:name=”android.permission.GET_ACCOUNTS”/>
<uses-permission android:name=”android.permission.BROADCAST_STICKY”/>

Update the version code as well if it’s more than version 1. VersionCode is what will display in the store; versionName is for your internal use and won’t be shown:
android:versionCode=”10000″ android:versionName=”1.0.0″ [Note on format: "10000" = 1.00.00. Earlier versions of ADT accepted "android:versionCode="1" but no longer.]

Make sure the following is accurate:
package=”com.developerName.myApp”

Add Your Icon

Resource: http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

You may have noticed that the Cordova icon appears on your home screen on your test device. Let’s replace it with your own.

Back in config.xml, after your last preferences line, type:

<icon src="res/icon.png" /> <!-- icon for all platforms -->

Create a folder named /res in myApp (myApp/res) and add your default 48x48px png icon there. It’ll be used for the device’s home screen launcher icon.

In config.xml just above the </widget> line, put:

<platform name="android">
 <icon src="res/android/mdpi.png" density="mdpi" /><!-- 48x48px -->
 <icon src="res/android/hdpi.png" density="hdpi" /><!-- 72×72px -->
 <icon src="res/android/xhdpi.png" density="xhdpi" /><!-- 96×96px -->
 <icon src="res/android/xxhdpi.png" density="xxhdpi" /><!-- 144×144px -->
 <icon src="res/android/xxxhdpi.png" density="xxxhdpi" /><!-- 192x192px -->
</platform>

Create a folder named /res/android in www (/myApp/res/android). We’ll put all our other icon sizes in there. (Android will automatically use the hdpi icon for the ldpi icon. See http://developer.android.com/design/style/iconography.html) The above entry in the config.xml will reference them and put them in the right place in the apk. Name the icons just the way they are in the config.xml in the sizes noted. That’s the beauty of the config.xml file — we put all the important into there and edit fewer Java files. (And that’s the beauty of this blog post — just copy and paste!)

Let’s add more features to the config.xml file. After the <access origin=”*” /> line, add:

<preference name="InAppBrowserStorageEnabled" value="true"/>
<preference name="keepRunning" value="false" />
<preference name="Orientation" value="portrait" /> <!-- to lock the orientation -->

For more information about changes to this file, read: http://docs.phonegap.com/en/3.5.0/guide_platforms_android_config.md.html#Android%20Configuration

Go ahead and test in your device with cordova build android. As it is installing, you should see a small icon next to “appName” in the progress box. After you exit the app, look for the app icon among the others and make sure the correct icon is showing. If a Cordova icon is shown, then delete all the icon.png files in the /myApp/platforms/android/res/drawable folders and test again.

Add Your Splash Screen

Resources:
https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md
http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

We add splashscreen functionality with a plugin. In Terminal, making sure it starts within your myApp folder, add the plugin with:

cordova plugin add org.apache.cordova.splashscreen

(To remove a plugin in the future, type cordova plugin list and view the list of available plugins, then type cordova plugin rm and copy/paste the plugin line at the end, then hit Enter.)

Create your splash screens as 9-patch png images. For instructions on how to do this, see my article here:
http://iphonedevlog.wordpress.com/2013/07/02/creating-and-installing-a-splash-screen-for-android-using-eclipse-and-phonegap/ I suggest naming each one “splash-[size].png,” such as splash-mdpi.png.

The size for each should be:
xlarge (splash-xhdpi.png,): at least 960 × 720
large (splash-hdpi.png,): at least 640 × 480
medium (splash-mdpi.png,): at least 470 × 320
small (splash-ldpi.png,): at least 426 × 320

Cordova has its splashscreens located in several /myApp/platforms/android/res/drawable folders. Delete their images and add your own and rename each one as splash.png. Delete all /drawable folders for sizes and orientations that you won’t be using. Delete all icon.png files in those folders. Leave the ic_action*.png images — they are for the IAB.

In /www/config.xml, include:

<preference name="SplashScreen" value="splash" /><!-- prefix of splashscreen .png names -->
<preference name="SplashScreenDelay" value="2000" /><!-- view for 2 seconds-->

(Note that with “org.apache.cordova.SplashScreen” you should pay attention to case.) In your index.html page add the navigator.splashscreen.hide(); line here:

<script type="text/javascript" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
 navigator.splashscreen.hide();
}

Run cordova build android and test in your device. I should remind you that if you need to remove the platform and add it again (usually for debugging purposes), you’ll lose all the content in the platforms/android folder. So you’ll want to copy the splashscreen files to a safe place before then.

Go ahead and test in your device with cordova build android. Make sure the splash screen shows before your app does.

Try out the Developer App

Cordova released the Developer App, in which you download their app onto your device, run a cordova server in the terminal, and view your app on the device without having to download and install it to the device. You can make changes to your app and instantly see them in the device. For more information on this, see these steps: http://iphonedevlog.wordpress.com/2014/05/02/app-testing-with-the-phonegap-app-see-your-changes-instantly-without-re-building/

What if you need to use different versions of pages for different platforms?

a) I needed the home page of my app to be different on Android and iOS. That’s what the myApp/merges folder is for. The myApp/merges/android folder is the same as your myApp/www folder, so I moved the index.html file to the merges/android folder. When I did a cordova platform add ios, it created a merges/ios folder. I copied the index.html file there and made the changes for the iOS version. So when I do a cordova build ios or android it will use the correct file for each build.

b) When styling links for YouTube in the InAppBrowser, onclick=”window.openwindow.open()” works in iOS to open a YouTube link in IAB but not in Android (it didn’t work in my Nexus 7). So I put differnt versions of those pages in /merges/android and /merges/ios, each page with its own link style:

iOS: <a href=”#” onclick=”window.open(‘http://www.youtube.com/watch?v=nxP0wgBf6Zk’, ‘_blank’);”>link</a>

Android: <a href=”http://www.youtube.com/watch?v=nxP0wgBf6Zk”>link</a>

The Android link did not appear in IAB, but that was fine – the user simply used the Back button to return to the app.

c) If you have a /www/css folder and want different style sheets for each app, just create a /css folder inside each merges platform folder (like myApp/merges/android/css/style.css) and put the css there instead of in the /myApp/www/css folder. That will style each platform differently according to your CSS files.

To quickly test this, create a /merges/android folder if you don’t have one and simply move the /www/index.html file there. Open the index.html file and add the following right after the button code we added earlier:

<p>&nbsp;</p>
 <h2>This index.html page is in the /platforms/merges folder.</h2>

Go ahead and test in your device with cordova build android. The above text should appear at the bottom of the screen.

About the myApp/Hooks Folder

If you open myApp/hooks, you’ll see a readme text file there. That folder is for adding scripts that will execute as part of your CLI operation. For instance, you can add a before_build script which will automatically add all your plugins before the actual build commences. So each time you create a new app, you’ll copy/paste that file into the new app’s /hooks/before_build folder. I’m not familiar enough with this process to explain it here, but if you already know node.js scripting, you might look into it. For instance, this page gives the hooks steps for automatically creating app icons (requires installation of Homebrew and ImageMagick): https://github.com/AlexDisler/cordova-icon.

Update Cordova

1. If you encounter issues with an individual plugin, by all means let your debugging include removing the plugin and adding it again. To do that, follow these steps:

a. In terminal: cordova plugin ls to see the plugins installed. Highlight the plugin you want to remove, and copy it.

b. In terminal: cordova plugin rm and paste in the copied plugin (like this: cordova plugin rm org.apache.cordova.inappbrowser). Hit Enter.

c. To install again, in terminal: cordova plugin add and paste in the copied plugin (like this: cordova plugin rm org.apache.cordova.inappbrowser). Hit Enter.

Note that Cordova does not have a way to update plugins. If you know of an updated plugin, then you simply following the a, b, c steps above to install the new plugin version.

2. If you need to update Cordova 3.x, then do this way:

npm update -g cordova

3. To update a particular platform (perform this command one at a time for each platform):

cordova platform update android

Build your App in ADT + Eclipse

First check for updates to Eclipse and install them: Help > Check for Updates. (You may be asked to update the SDK tools to a later version as well. Click on OK to do that.) The update process may take many minutes.

1. In terminal, type:

cordova prepare android

2. In Eclipse: File > New > Project . . .
3. Then: Android > Android Project from Existing Code > Next (or Finish)

I followed these steps in a later version and the Finish button did nothing. If that happens, replace steps 1-3 with: File > Import…, General > Existing Projects into Workspace, Next. Now continue with step 4.

4. Click on Browse and select the Root Directory of the project, /myApp. The Root Directory field should then be filled in, and Project to Import will show “platforms/android” selected. Select “Copy projects into workspace” if you wish. Click Finish.

Anytime you make changes to your files and want to review them in Eclipse, always do cordova prepare android in terminal first, then Project > Clean in Eclipse.

Check Your Work Thoroughly

1. Let Eclipse check your work for errors. First click on Project > Clean . . . and select myApp. The lower right of the window will show the progress. Use Project > Clean between each of the following steps.

2. Window > Open Perspective > Java. Now right-click on your project name and select Validate. If it mentioned errors or warnings in a popup, then you can find those messages in Window > Show View > Problems. You can actually double-click on the lines and Eclipse will open to the page and line of the problem. Fix all those problems, Clean, and Validate again.

3. Right-click on your project name and select Android Tools > Run Lint and fix those errors (showing a red circle with an X). Apps simply won’t build if there are errors. For instance, my error was: “Call requires API level 16 (current is 10).” clicking on that line revealed notes in the right panel. To fix it, I needed to change the AndroidManifest.xml file line from “10” to “16” here: <uses-sdk android:minSdkVersion=”16″ I then did a cordova prepare in terminal and Project > Clean in Eclipse and ran Android Tools > Run Lint again. The error was gone.

If you find other errors under Eclipse’s Lint Warnings tab, use this article to help deal with some of them: http://iphonedevlog.wordpress.com/2013/06/26/fixing-android-lint-warnings-found-when-building-a-phonegap-project/

4. Right-click on your project name again, and select Run As > Android Application. If you have a working emulator installed, then it will launch. Click on the Debug tab in Eclipse at upper right and the Console will inform you of the steps it’s taking as it launches. Mine tells me I am launching a device with Android_18 installed. Soon you’ll see the home screen of the device with a lock in a circle. Slide the lock over and the app will launch, if all is well.

Then click on the Java tab in the upper right and click on the LogCat and Error Log screens at the bottom of the Eclipse environment and watch as it records what is happening in the emulator. If you don’t understand the errors, you can double-click on the line, then copy and paste it into Google for a search.

If you get this in the emulator before the app has even opened: “The application . . . has stopped unexpectedly. Please try again,” problems may exist in AndroidManifest.xml, because that has to be processed before the index.html file starts. One of the three parts of the “package=” line may be wrong. the name may have upper/lowercase inconsistencies. You may not have the right AVD.

If you get a “Failed to load properties file for android project” message in Eclipse when testing, right-click on the project name in Eclipse, select Android Tools > Fix project properties, do a Clean, and see if that helps.

If you get in the Console tab: “Could not find appName.apk!” then this may help: Right-click on the project name in Eclipse, then on Properties. Select the latest Project Build Target, then click on OK. Restart Eclipse.

If you get lost among the log messages and want to get back to the key windows, go to Window > Open Perspective > Java.

5. You can choose among Android devices to target for testing. In menu bar at top use Run > Debug Configurations > Target tab to choose which Android API to test in the emulator. Click on the AVD Name then Debug. Create new AVDs with Window > Android Virtual Device Manager. Resource: http://developer.android.com/tools/devices/managing-avds.html

6. Do remote debugging. That means you’ll try out the app in your device, but you’ll get the benefit of reading the log output on your desktop, specifically, the LogCat panel in Eclipse. You’ll need to add console.log(“message for output here”); within your JavaScript <script></script> tags wherever you want to see console output appear. For instructions, follow: http://developer.android.com/tools/device.html

Sign the App

Apps in the app store must be “signed” with keys. Here are the steps to accomplish this. These steps create the “apk” file that is uploaded to the app store for purchasers’ download.

1. Right-click on the project name in Eclipse, then click on Android Tools > Export Signed Application Package.
2. “Project Checks” dialog:
This screen will tell you if you have serious errors that need to be fixed before you can go further. If you have problems, copy the error into Google and search for resolutions if you are unfamiliar with these problems.
3. “Keystore selection” selection dialog:
Create the key using the app name, no spaces, ending in “.keystore”. WARNING: if this is an upgrade, use the same name as the earlier version! Browse to the location to save the keystore and in the same box give the name of the keystore. Back in the Keystore selection dialog, add the password twice and hit Next.
4. Key ["Private Key"] Creation dialog:
Alias: same as app_name, no spaces.
password of keystore.
validity: 50 [meaning, good for 50 years].
First and Last name:
Organizational unit: [division of company, or leave blank]
Organization: [use no punctuation - only letters and numbers, or you'll get an "keytool error" notice later.]
City:
State: [2-letter abbr. is fine.]
Country: Look up here: http://www.worldatlas.com/aatlas/ctycodes.htm
Destination APK file: This is the hard disk location where Eclipse will save the program’s .apk file that you will later upload to Google Play or other app store. Browse, then click Finish when done.

Write down the above Key Creation information, passwords, and APK destination and keep it safe for later retrieval and app updates. If it is lost, you can’t upgrade the app any further. To release the app after this file has been lost, you’ll have to create a whole new app and release it separately, making your customers ineligible for any updates.

Perhaps make a separate private key for each app, especially if you expect to sell the rights to an app to someone else. Save the keystore and apk files to a separate location for safety.

If you get: “keytool error: java.io.IOException: Incorrect AVA format,” then an invalid character was used in one of the previous screens. Solution: remove any punctuation so only letters, spaces, and numbers remain.

Prepare Copy and Other Graphic Assets for App Store

You’ll need this information on hand when filling out the form for apk submission within Google Play. Follow these steps:
http://iphonedevlog.wordpress.com/google-play-app-publishers-template-22013/

Ready For Public Release

Congratulations! You are now ready to show off your baby to the world!

To register as a Google Play developer and set up your publisher account, visit the Google Play publisher site: http://developer.android.com/index.html

My Helpful Links page gives a small listing of other sites where you can upload your apps. Visit http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/ and look under “App Stores.”

Further Recommended Steps

If you are going to be involved with PhoneGap regularly, keep up to date with the release announcements of upcoming versions, updated plugins, and other news.

Next Steps: http://docs.phonegap.com/en/3.5.0/guide_next_index.md.html#Next%20Steps

PhoneGap Blog: http://phonegap.com/blog/

PhoneGap Twitter feed: http://twitter.com/phonegap

Facebook: http://www.facebook.com/PhoneGap

Join Google Groups: https://groups.google.com/forum/#!forum/phonegap