PhoneGap Application Development - Santhi J Krishnan

PHONEGAP APPLICATION
DEVELOPMENT

Setting Up Android ADT And Eclipse
Although Eclipse IDE is not strictly necessary but it’s the officially
recommended IDE for Android, it also makes testing, debugging and
deployment much easier for a beginner.
What you need to install ?
 JDK/JRE
 Eclipse
 ADT (Android Development Tools)
WWW.ORISYS.IN 2

Step 1. Install JDK and Eclipse IDE
 Open a terminal and install Eclipse IDE as well as JDK, in one command
(Installs Eclipse 3.7 + OpenJDK 6). The command is:
sudo apt-get install eclipse-jdt
Step 2. Download Android SDK Starter Package
 Download Android SDK Starter Package (From Official Site)
Step 3. Install ADT Plugins for Eclipse
 Now, Open Eclipse IDE -> select a workspace (any folder created in you system) -> OK.
 Eclipse launches. Now go to Help -> Install New Software, then click on Add and
enter the following URL as Location:
 https://dl-ssl.google.com/android/eclipse/ and Android ADT as name -> OK.
WWW.ORISYS.IN 3

 Now select the Developer Tools, then a couple of Next, followed by Finish -> Accept the
terms and conditions -> OK.
 This would begin the Download/Installation process; once it completes, a warning pop-up
opens up -> click OK, restart Eclipse.
WWW.ORISYS.IN 5

Step 4. Install Android SDK
 Then open Window -> Preferences -> Select Android from left menu and locate your Android
SDK starter package (You should browse the location of extracted Android SDK starter package) ->
Apply -> OK.
WWW.ORISYS.IN 6

 Then go to Window -> Android SDK Manager, Select the packages you want to install
and click Install [x] Packages. Accept terms and conditions -> OK
WWW.ORISYS.IN 7

Step 5. Installing Phonegap/Cordova
 Now, you’ve Android and Java environment ready, install Cordova/Phonegap.
WWW.ORISYS.IN 8
Install NodeJS
 Open a terminal and type: (The NodeJS package available in repository may be out of date,
so use ppa)
sudo apt-add-repository -y ppa:chris-lea/node.js
sudo apt-get -y update
sudo apt-get -y install NodeJS

WWW.ORISYS.IN 9
Install Cordova
 Open a terminal and type:
sudo npm install -g cordova
 Open a terminal and type Cordova, just to make sure it’s installed correctly.
 Now, the development IDE is all set.

Downloading and installing PhoneGap
 Visit the PhoneGap download page http://phonegap.com/install/ and
 Download the latest PhoneGap version zip.
 Extract the archive to your local file system for later use.
 You are now ready to create your first PhoneGap project for Android within Eclipse.
WWW.ORISYS.IN 10

Creating the project in Eclipse
 Follow these steps to create a new Android project in Eclipse:
WWW.ORISYS.IN 11
 Choose New > Android Project
 Other steps will be demonstrated in following slides :

 In the New Android Project dialog box, type a project name and select
Create New Project In Workspace
 Click Next.
WWW.ORISYS.IN 12

Configure the project to use PhoneGap
Create an assets/www directory and a libs directory inside of the new Android project.
All of the HTML and JavaScript for your PhoneGap application interface will reside within
the assets/www folder
WWW.ORISYS.IN 16

 Copy cordova-x.x.x.js to the assets/www directory within the
Android project.
 Copy cordova-x.x.x.jar to the libs directory within the Android
project.
 Copy the xml directory into the res directory within the
Android project
WWW.ORISYS.IN 17

 Next, create a file named index.html in the assets/www folder. This file will
be used as the main entry point for your PhoneGap application's interface.
 In index.html, add the following HTML code to act as a starting point for
your user interface development:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src=
"cordova- 1.5.0.js"></script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>
WWW.ORISYS.IN 18

 You will need to add the cordova-x.x.x.jar library to the build path for the Android project.
Right-click cordova-x.x.x.jar and select Build Path > Add To Build Path
WWW.ORISYS.IN 19

WWW.ORISYS.IN 20
Update the Activity class
 Open application Activity file.
 In the main Activity class, add an import statement
import org.apache.cordova.DroidGap;
 Change the base class from Activity to DroidGap
This is in the class definition following the word ‘extends’
 Replace the call to setContentView() with a reference to load the PhoneGap interface from the
local assets/www/index.html file, which you created earlier
super.loadUrl("file:///android_asset/www/index.html");

 Open AndroidManifest.xml file in project root.
Use the Eclipse text editor by right-clicking the AndroidManifest.xml file
and selecting Open With > Text Editor
WWW.ORISYS.IN 22

 In AndroidManifest.xml, add the following supports-screen XML node as a
child of the root manifest node:
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
 Copy the following <uses-permission> XML nodes and paste them as
children of the root <manifest> node in the AndroidManifest.xml file:
<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" />
WWW.ORISYS.IN 23

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<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.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
 Locate the <activity> node, which is a child of the <application> XML node.
Add the following attribute to the <activity> node:
android:configChanges="orientation|keyboardHidden"
www.orisys.in 24

Running the application
 To launch PhoneGap application in the Android emulator, right-click the project
root, and select Run As > Android Application
WWW.ORISYS.IN 25

WWW.ORISYS.IN 26
References
http://docs.phonegap.com/en/edge/guide_platforms_ubuntu_index.md.html
http://www.opensourceforu.com/2011/08/build-android-apps-using-html-with-phonegap/
http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html
http://phonegap.com/install/

WWW.ORISYS.IN 27
Questions
• feedback @ santhi.j.krishnan@orisys.in
• download slides here : bit.ly/1xmX7bM

PhoneGap Application Development - Santhi J Krishnan

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to PhoneGap Application Development - Santhi J Krishnan (20)

Recently uploaded (6)

PhoneGap Application Development - Santhi J Krishnan