In this article by Yuxian, Eugene Liang, author of PhoneGap and AngularJS for Cross-platform Development, we will run through some of the stuff that you should be doing before launching your app to the world, whether it’s through Apple App Store or Google Android Play Store.

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

Using phonegap.com

The services on https://build.phonegap.com/ are a straightforward way for you to get your app compiled for various devices. While this is a paid service, there is a free plan if you only have one app that you want to work on. This would be fine in our case.

Choose a plan from PhoneGap

You will need to have an Adobe ID in order to use PhoneGap services. If not, feel free to create one. Since the process for generating compiled apps from PhoneGap may change, it’s best that you visit https://build.phonegap.com/ and sign up for their services and follow their instructions.

Preparing your PhoneGap app for an Android release

This section generally focuses on things that are specific for the Android platform. This is by no means a comprehensive checklist, but has some of the common tasks that you should go through before releasing your app to the Android world.

Testing your app on real devices

It is always good to run your app on an actual handset to see how the app is working. To run your PhoneGap app on a real device, issue the following command after you plug your handset into your computer:

cordova run android

You will see that your app now runs on your handset.

Exporting your app to install on other devices

In the previous section we talked about installing your app on your device. What if you want to export the APK so that you can test the app on other devices? Here’s what you can do:

• As usual, build your app using cordova build android
• Alternatively, if you can, run cordova build release

The previous step will create an unsigned release APK at /path_to_your_project/platforms/android/ant-build. This app is called YourAppName-release-unsigned.apk.

Now, you can simply copy YourAppName-release-unsigned.apk and install it on any android based device you want.

Preparing promotional artwork for release

In general, you will need to include screenshots of your app for upload to Google Play. In case your device does not allow you to take screenshots, here’s what you can do:

• The first technique that you can use is to simply run your app in the emulator and take screenshots off it. The size of the screenshot may be substantially larger, so you can crop it using GIMP or some other online image resizer.
• Alternatively, use the web app version and open it in your Google Chrome Browser. Resize your browser window so that it is narrow enough to resemble the width of mobile devices.

Building your app for release

To build your app for release, you will need Eclipse IDE.

1. To start your Eclipse IDE, navigate to File | New | Project.
2. Next, navigate to Existing Code | Android | Android Project.
3. Click on Browse and select the root directory of your app. The Project to Import window should show platforms/android.
4. Now, select Copy projects into workspace if you want and then click on Finish.

Signing the app

We have previously exported the app (unsigned) so that we can test it on devices other than those plugged into our computer. However, to release your app to the Play Store, you need to sign them with keys. The steps here are the general steps that you need to follow in order to generate “signed” APK apps to upload your app to the Play Store.

1. Right-click on the project that you have imported in the previous section, and then navigate to Android Tools | Export Signed Application Package. You will see the Project Checks dialog.
2. In the Project Checks dialog, you will see if your project has any errors or not.
3. Next, you should see the Keystore selection dialog. You will now create the key using the app name (without space) and the extension .keystore. Since this app is the first version, there is no prior original name to use. Now, you can browse to the location and save the keystore, and in the same box, give the name of the keystore. In the Keystore election dialog, add your desired password twice and click on Next. You will now see the Key Creation dialog.
4. In the Key Creation dialog, use app_name as your alias (without any spaces) and give the password of your keystore. Feel free to enter 50 for validity (which means the password is valid for 50 years). The remaining fields such as names, organization, and so on are pretty straightforward, so you can just go ahead and fill them in.
5. Finally, select the Destination APK file, which is the location to which you will export your .apk file.

Bear in mind that the preceding steps are not a comprehensive list of instructions. For the official documentation, feel free to visit http://developer.android.com/tools/publishing/app-signing.html.

Now that we are done with Android, it’s time to prepare our app for iOS.

iOS

As you might already know, preparing your PhoneGap app for Apple App Store requires similar levels, if not more, as compared to your usual Android deployment. In this section, I will not be covering things like making sure your app is in tandem with Apple User Interface guidelines, but rather, how to improve your app before it reaches the App Store. Before we get started, there are some basic requirements:

• Apple Developer Membership (if you ultimately want to deploy to the App Store)
• Xcode

Running your app on an iOS device

If you already have an iOS device, all you need to do is to plug your iOS device to your computer and issue the following command:

cordova run ios

You should see that your PhoneGap app will build and launch on your device. Note that before running the preceding command, you will need to install the ios-deploy package. You can install it using the following command:

sudo npm install –g ios-deploy

Other techniques

There are other ways to test and deploy your apps. These methods can be useful if you want to deploy your app to your own devices or even for external device testing.

Using Xcode

Now let’s get started with Xcode:

1. After starting your project using the command-line tool and after adding in iOS platform support, you may actually start developing using Xcode. You can start your Xcode and click on Open Other, as shown in the following screenshot:

2. Once you have clicked on Open Other, you will need to browse to your ToDo app folder.
3. Drill down until you see ToDo.xcodeproj (navigate to platforms | ios). Select and open this file.

4. You will see your Xcode device importing the files. After it’s all done, you should see something like the following screenshot:

   Files imported into Xcode

5. Notice that all the files are now imported to your Xcode, and you can start working from here. You can also deploy your app either to devices or simulators:

   Deploy on your device or on simulators

Summary

In this article, we went through the basics of packaging your app before submission to the respective app stores. In general, you should have a good idea of how to develop AngularJS apps and apply mobile skins on them so that it can be used on PhoneGap. You should also notice that developing for PhoneGap apps typically takes the pattern of creating a web app first, before converting it to a PhoneGap version. Of course, you may structure your project so that you can build a PhoneGap version from day one, but it may make testing more difficult. Anyway, I hope that you enjoyed this article and feel free to follow me at http://www.liangeugene.com and http://growthsnippets.com.

Resources for Article:

---

Further resources on this subject:

• Using Location Data with PhoneGap [Article]
• Working with the sharing plugin [Article]
• Geolocation – using PhoneGap features to improve an app’s functionality, write once use everywhere [Article]

---