Mobile Feed Reader App – Part 1: Environment & Project Setup

A few weeks ago I started to post regarding the building of my first mobile app. After working with jQuery Mobile some and getting a good feel on its capabilities I started to move forward.  For part one of this series I am going to step through the creation of the PhoneGap Android project and basically getting the project setup with the jQuery Mobile framework and getting it ready to work with.

First off, we need to make sure that we have the appropriate software installed onto the machine.  The list of software we will need includes the following

  • Android ADT – This is a bundle that includes a version of Eclipse, Android SDK,  Android platform and tools, as well as the system images for emulator.
  • Latest version of PhoneGap
  • Apache Ant

After all that software is installed, you will also want to add a package to the Eclipse IDE so that we can better edit HTML files.  To do this, open Eclipse and in the top menu navigate to Help->Install New Software.  Once this loads in the work with drop down box, select the Juno – http://download.eclipse.org/releases/juno option.  In the filter box, type in Web Developer and you will notice the Eclipse Web Developer Tools package.  Check this option and then follow the prompts to install it.

Secondly, we need to make sure that we have the appropriate environmental variables setup.  To use the PhoneGap create script, which will setup a new android project for us, we need to have the following directory paths into the PATH environment variable.  To check this in windows, click the start button and find My Computer.  Right click on that and then go to properties.  After this, click on Advanced system settings.  A new window will open and then click on the Environment Variables button. Under the system variables section, find the variables listed below and modify them to include the appropriate paths.  More on this step can be found in PhoneGaps documentation, or by click on this link.

Variable Name Included Paths
JAVA_HOME Your instance of the java jdk
ANT_HOME Your instance of Apache Ant
PATH C:\android-sdk-windows\platform-tools;C:\android-sdk-windows\tools
Note: Update directory path with your directory information.

Once the system variables are correct, we can run the create script that will setup or new Eclipse project.  For the case of this article, we will use the below command…

theRedneckCoderReader

theRedneckCoderReader-EclipseProjectNow we have the project created and we simply need to import this new existing project into our Eclipse workspace.  Now we can navigate this new project and see its contents.  You will also notice the assets directory.  This directory will host the HTML based content of our app and will be where most of the work will be done going forward.

References:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s