Android SDK and PhoneGap - mobile
Download
Report
Transcript Android SDK and PhoneGap - mobile
Android SDK
How to make it work?
Doncho Minkov
Technical Trainer
http://www.minkov.it
Telerik Academy
academy.telerik.com
Table of Contents
The Android SDK
Installation
of Android SDK
Eclipse
Android SDK
Android ADT
Installation
of PhoneGap
"Hello PhoneGap" project
The Android SDK
The Android SDK
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
Installation of Android SDK
How to start Android development?
Steps for Installing Android SDK
1.
Installing Eclipse IDE
2.
Install Android SDK
3.
Install the ADT plugin for eclipse
4.
Add components needed for development
Eclipse
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 http://bit.ly/EclipseClassic
Android SDK
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
http://developer.android.com/sdk/index.html
Android SDK (2)
* 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
The Android SDK Manager
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
Installation of ADT Plugin
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 https://dlssl.google.com/android/eclipse/
Installation of ADT Plugin
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
Installation of Android SDK
Live Demo
Android Virtual Device
How to Create a AVD?
Android Virtual Device
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
AVD Manager - Example
Create new AVD
AVD Manager - Example
Give it some name
Better add the OS version
Add SD card sieze
Select OS version
You are done!
New PhoneGap Project
Two ways of creating
PhoneGap Project
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
New PhoneGap Project
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-1.0.0.jar to
the Project
New PhoneGap Project (2)
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
New PhoneGap Project (3)
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
http://phonegap.com/assets/guide/manifest.jpg
New PhoneGap Project Alternative Way
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: https://svn.codespot.com/a/eclipselabs.org/mobileweb-development-with-phonegap/tags/r1.2/download
New PhoneGap Project –
Alternative Way (2)
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
New PhoneGap Project
Live Demo
Hello World PhoneGap
Hello World PhoneGap
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 –
Example
Hello World, PhoneGap!
Open the index.html and copy the following
<!Doctype html>
<html>
<head>
<title> First PhoneGap Application </title>
<head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>
Go to Build -> Run as Android Application
The emulator should start
And the app run!
Hello World PhoneGap
Live Demo
Android SDK and PhoneGap
Questions?