How to make it work? Doncho Minkov Telerik Academy academy.telerik.com Technical Trainer

 The Android SDK  Installation of Android SDK  Eclipse  Android SDK  Android ADT  Installation of PhoneGap  "Hello PhoneGap" project

 Android is a software stack for mobile devices that includes  An operating system  Middleware  Key applications  The Android SDK provides necessary tools and APIs to develop applications  Using Java programming language

How to start Android development?

1. Installing Eclipse IDE 2. Install Android SDK 3. Install the ADT plugin for eclipse 4. Add components needed for development

 What is Eclipse?  A multi-language software development environment comprising  An integrated development environment (IDE)  Mostly written in Java  Eclipse is used to develop applications  In Java, C, C++, Perl, PHP, Python, R, etc.  For Android (using Java)  Download at

 For the Android SDK to be installed  The machine should have at least jdk 1.6  Version 1.7 is also ok  Then download the installer file from 

 * There is a known bug during installation of the SDK  The installer cannot locate the jdk  Just click the "Back" button and then "Next"  It should work

 After the installation of Android SDK  Some components should be installed  Packages for Android versions: 2.1, 2.2, 3.2, etc.  Some other tools like a couple of Google APIs  Start the Android SDK Manager and wait for fetching of packages  This may take a while  Took me two / thirds of a day for all packages

 Use the Update Manager feature of Eclipse  To install the latest revision of ADT on your development computer  How to download it?  Start Eclipse, then select Help > Install New Software -> Add, in the top-right corner  In the Add Repository  Enter "ADT Plugin" for the Name  Copy for location ssl.google.com/android/eclipse/ ssl.google.com/android/eclipse/ ssl.google.com/android/eclipse/

 In the Available Software dialog  Select the checkbox next to Developer Tools and click Next  In the next window, you'll see a list of the tools to be downloaded  Click Next  Read and accept the license agreements  Then click Finish  Restart Eclipse

Live Demo

How to Create a AVD?

 To create virtual device  Open Eclipse -> Window -> ADV Manager  Open the Android Virtual Device manager  Add new device  With the Android OS version needed  Why need AVD?  To test your app before deployment to a phone  To test on different versions of Android OS  To find and correct simple mistakes

 Create new AVD

 Give it some name  Better add the OS version  Add SD card sieze  Select OS version  You are done!

Two ways of creating

 How to create a PhoneGap Project?  Create an android project  File -> New -> Android Project  In the root directory of the project, create two new directories  /libs and /assets/www  Copy phonegap.js from your PhoneGap download earlier to /assets/www  Create an index.html file in /assets/www  Copy phonegap.jar from your PhoneGap download earlier to /libs

 Copy xml folder from your PhoneGap download to /res  Set the build path of the phonegap.jar  Right click on the /libs folder  Go to Build Paths/ -> Configure Build Paths.  In the Libraries tab, add phonegap jar to the Project

 Make a few adjustments to the project's main Java file  Change the class's extend from Activity to DroidGap  Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index. html");  Add import com.phonegap.*  Remove import android.app.Activity

 Right click on AndroidManifest.xml and select Open With > Text Editor  You should edit the xml  By adding new elements  By editing existing elements  You can see how the final AndroidManifest.xml file should look like 

 This is not so pleasing, right?  Hopefully there is an easier way  Using MDS AppLaud PhoneGap Eclipse Plugin  How to install it?  Open Eclipse  Go to Help -> Install New Software -> Click Add  Like with the ADT plugin  For location type: web-development-with-phonegap/tags/r1.2/download web-development-with-phonegap/tags/r1.2/download web-development-with-phonegap/tags/r1.2/download

 After the plugin is installed and ready to go  A PhoneGap icon should be displayed in the toolbar  After than the creation of new project is straight-forward  With AppLaud plugin you can select to include jQuery or Sencha

Live Demo

 Lets make our "Hello World, PhoneGap!" application  Till now we have an empty PhoneGap project  All we need to do is to edit the index.html file  Created by us  Located in /assets/www  This is the Entry point of our Application

 Hello World, PhoneGap!  Open the index.html and copy the following <html><head> First PhoneGap Application First PhoneGap Application <head><body> Hello PhoneGap Hello PhoneGap </body></html>  Go to Build -> Run as Android Application  The emulator should start  And the app run!

Live Demo

Questions?