Develop Mobile Applications Using PhoneGap and Kendo UI: Part 1

Objective

I have begun this series to help you in creating Windows Phone and Android applications using the PhoneGap and Kendo UI. In this article I will be showing you the setting of the environment on a Windows machine for Android development. In the end of the article we will create a Hello World Android application.

Background

PhoneGap and Kendo UI helps to create applications that can be deployed on any device. Applications created using PhoneGap have a single code base and can be deployed to various types of devices. PhoneGap is based on the HTML5 and CSS3.0 open source framework. PhoneGap uses HTML5 and JavaScript.

PhoneGap1.jpg

  1. PhoneGap uses Web standards like HTML5 and CSS 3 to create native mobile apps
  2. PhoneGap uses JavaScript to write codes.
  3. Using PhoneGap native features of devices can be accessed.
  4. PhoneGap allows deploying applications to multiple platforms.
  5. PhoneGap supports 7 different platforms.

In future articles we will go into more theoretical discussions of PhoneGap and the Kendo UI. Let us get started with steps to set up the Android development environment.
 
Step 1: Download and Install the JDK

The very first thing you need to do is to download and install the Java Development Kit (JDK) from here.

You will get q Windows installer. Click on the Exe to install and follow the dialog boxes by clicking next buttons.

Step 2: Download and Install Eclipse

Download Eclipse Classic from here. Download and unzip the file. After unzipping, click on the Eclipse application (Blue one). Once Eclipse is open you need to set the workspace.


PhoneGap2.jpg

Step 3: Download and Install ADT

Now you need to download and install the ADT. To do this click on Help ->Install New Software from the menu.

PhoneGap3.jpg

You will be getting an Available Software dialog box. Click on Add at the right corner.

PhoneGap4.jpg

You will get an Add Repository dialog box. In that give the name as ADT Plugin and the Location as https://dl-ssl.google.com/android/eclipse/ 

PhoneGap5.jpg

Click on OK, then check all the check boxes in the Developer Tool check box and all the four check boxes in the bottom. After selecting all the check boxes click on Next.

PhoneGap6.jpg

You will get a review dialog to review all the items to be installed. Review and click on Next.

PhoneGap7.jpg

Accept the term and conditions and click on Finish.

PhoneGap8.jpg

After installation you need to click on Restart Now. During installation if you get any message related to an unsigned document then just click on Ok to continue.

PhoneGap9.jpg

After restarting Eclipse you will get a Welcome to Android Development dialog box. Here select Install new SDK and click on Next.

PhoneGap10.jpg

Select the option Send usage Statistics to Google and click on Finish.

PhoneGap11.jpg

Open Eclipse and open the Windows and Android SDK Manager. And select the Android version to install. I recommend you to install all the documents.

PhoneGap12.jpg

PhoneGap13.jpg

After installation you will get the done message at the bottom.

Step 4: Create Android Virtual Device

Now we are done with all the installation and now we need to create an Android Virtual Device [AVD]. To create an AVD from the Menu, select Windows and then the AVD Manager. You will get the AVD manager dialog box. Click on New.

PhoneGap14.jpg

You will get the following dialog box. Give some name like My_avd and select Target to Android 2.1 and set any other parameters as you need to then click on Create AVD.

PhoneGap15.jpg

Step 5: Create Hello World Project

After creating the AVD you are all set to create your first Android app. To create an app click on File->New->Project->Android->Android Project

PhoneGap16.jpg

Give the project a name and choose the location. In this case the project will be created in the default location.

PhoneGap17.jpg

Now choose the target type as exactly the same as the AVD.

PhoneGap18.jpg

Next give the namespace a name. I am naming the namespace Debugmode.Android.Firstapp; then click on Finish.

PhoneGap19.jpg

Now time to write some code. Open the MyFirstActivity.java file.

PhoneGap20.jpg

Next write the following code. In code I am creating a TextView and setting the text.

PhoneGap21.jpg

From the menu click on Run->Run to run the application in the Android emulator.

PhoneGap22.jpg

As of now we have setup the android environment. We have created a Hello World application as well. In the next part of this article we will download, install and setup PhoneGap and KendoUI to create native mobile applications to be deployed on multiple platforms.

Next Recommended Readings