Saturday, July 26, 2014

Start Building Android Apps With Phonegap

If your completely new to mobile app development then you may want to read my first article called Introduction To Phonegap before you read this.

In this article I will teach you how to setup your development environment to build Android Apps using phonegap. Since phonegap likes to play by the rules and expects developers to do the same, your limited to what each mobile system allows you to do. For example if Apple requires you to build iPhone Apps on an Apple computer then you can build the iPhone App with Phonegap as long as you build it with phonegap on an Apple computer.

Android is one of the most flexible systems for developers. Google doesn’t care if you develop on Windows, Mac, Linux or your phone. They also don’t manually approve your apps not to mention an Android Developer Account is only $25.00 for one time payment.

Because of this Android Apps are favored by developers. And this article will show you how to get started building them.

Preperation

Phonegap doesn’t have any IDE’s and Adobe claims they have no intention of making any IDE’s for it either, we will first need to get an IDE. We will use Eclipse as our IDE mainly because Eclipse has many plugins available and Google created an Android SDK plugin for Eclipse. Further more Libby Baldwin has created a Phonegap plugin for Eclipse, so this is the best and easiest approach. You can download Eclipse by going the Eclipse website [1] and downloading the latest stable version.

Next we will need to download the Android SDK [2] . This can be done by going to the Android Developer website and downloading the latest SDK tools only not the bundle.

Libby Baldwin’s [3] Eclipse plugin will install and use an older version of Phonegap. And her plugin hasn’t been updated in quite some time. However she left the option to allow you to use a different version of Phonegap. So we will want to download the latest version of Phonegap [4] as well.

We will also need some Javascript libraries. The Phonegap plugin gives you a version of jQuery Mobile that is obsolete and not hosted in the same location anymore. However the plugin allows you to choose any javascript libraries you want, so we will download the latest version of jQuery Mobile [5] as well as jQuery [6] .

Install Eclipse

Now we simply need to extract the eclipse files from the compressed eclipse folder we downloaded earlier. Once it has been extracted we will click the executable eclipse program and it will start up. When it first starts up it will ask you where you want to have your workspace folder. It really is up to you but remember where you have it.

If your running Linux the above will work but if you want a nicer approach you may want to take a look at If Not True Then False [7] .

Install The Android SDK

Now we extract the files from the Android SDK and remember where we extracted them to. After we have done this we will need to install the Android Eclipse plugin. To do this we will start Eclipse if it isn’t already running. Then we will go to Help > Install New Software this will open up another Window.

We will now add the Android SDK Repository by clicking the Add button and typing the following.

Name: ADT Plugin
Location: https://dl-ssl.google.com/android/eclipse/

Then click the Ok button which will bring you back to the previous window. Now you will choose from the drop down box the option that says ADT Plugin.

Now you will see a checkbox that says Developer Tools next to it. Check the checkbox and then click the Next button.

Agree to all of the license terms and allow it to install everything.

After Eclipse installs the plugin you will need to restart Eclipse. Once you have restarted Eclipse you will go to Window > Android SDK Manager. And a new window will pop up.

Tick the check boxes that says Updates/New and Installed then install all of the packages. This can take a few hours so feel free to catch up on some missed episodes of The Big Bang Theory.

Install The PhoneGap Plugin For Eclipse

To install the PhoneGap plugin you will need to start Eclipse up. Then go to Help > Install New Software. Then in the New Software window click Add. After that you will enter the following information.

Name: MDS AppLaud
Location: http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2.9/download

Now you will also need to install the Juno repository, since the latest version of Eclipse doesn’t offer the tools that the Applaud plugin requires and the plugin installaton breaks when trying to install the entire package. So to add the Juno Repository click the Add button and enter the following.

Name: Juno
Location: http://download.eclipse.org/webtools/repository/juno

Now lets first install the tools from the Juno repository. We will search for the following packages then install them the same way we have done for the above.

  • Javascript Development Tools
  • jslint4java

After they have been installed you can then install the PhoneGap Plugin by selecting the MDS repository. And choosing the option that says Phonegap For Android.

After you have installed the Phonegap plugin you may want to install the web editor plugin found in the Juno repository. Search for Web Page Editor and install it. Your pretty much done now.

Post installation

Now you will most likely want to setup a Virtual Android Machine to test Apps in. That is as easy as going to Window > Android Virtual Device Manager. After you have done that you click on New and you will be able to configure a custom Android Device. If your like me I like to have Apps work on different versions of Android so I usually create one device with the latest version of Android and one with the oldest version of Android.

Links
  1. ^ Eclipse website (adf.ly)
  2. ^ Android SDK (adf.ly)
  3. ^ Libby Baldwin’s (adf.ly)
  4. ^ Phonegap (adf.ly)
  5. ^ jQuery Mobile (adf.ly)
  6. ^ jQuery (adf.ly)
  7. ^ If Not True Then False (adf.ly)

No comments:

Post a Comment

Search This Blog