android sdk and phonegap
TRANSCRIPT
![Page 1: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/1.jpg)
Android SDKAndroid SDKHow to make it work?How to make it work?
Doncho MinkovDoncho Minkov
Telerik Mobile Telerik Mobile Development CourseDevelopment Coursemobiledevcourse.telerik.com
Technical TrainerTechnical Trainerhttp://www.minkov.it
![Page 2: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/2.jpg)
Table of ContentsTable of Contents The Android SDKThe Android SDK Installation of Android SDKInstallation of Android SDK
EclipseEclipse
Android SDKAndroid SDK
Android ADTAndroid ADT Installation of PhoneGapInstallation of PhoneGap "Hello PhoneGap" project"Hello PhoneGap" project
![Page 3: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/3.jpg)
The Android SDKThe Android SDK
![Page 4: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/4.jpg)
The Android SDKThe Android SDK Android is a software stack for Android is a software stack for
mobile devices that includesmobile devices that includes An operating systemAn operating system
Middleware Middleware
Key applicationsKey applications
The Android SDK provides The Android SDK provides necessary tools and APIs to necessary tools and APIs to develop applicationsdevelop applications Using Java programming languageUsing Java programming language
![Page 5: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/5.jpg)
Installation of Installation of Android SDKAndroid SDK
How to start Android development?How to start Android development?
![Page 6: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/6.jpg)
Steps for Installing Steps for Installing Android SDKAndroid SDK
1.1. Installing Eclipse IDEInstalling Eclipse IDE
2.2. Install Android SDKInstall Android SDK
3.3. Install the ADT plugin for eclipseInstall the ADT plugin for eclipse
4.4. Add components needed for Add components needed for developmentdevelopment
![Page 7: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/7.jpg)
EclipseEclipse What is Eclipse?What is Eclipse?
A multi-language software development A multi-language software development environment comprising environment comprising
An integrated development environment An integrated development environment (IDE) (IDE)
Mostly written in JavaMostly written in Java Eclipse is used to develop applicationsEclipse is used to develop applications
In Java, C, C++, Perl, PHP, Python, R, In Java, C, C++, Perl, PHP, Python, R, etc.etc.
For Android (using Java)For Android (using Java) Download at Download at http://bit.ly/EclipseClassic
![Page 8: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/8.jpg)
Android SDKAndroid SDK
For the Android SDK to be installedFor the Android SDK to be installed The machine should have at least The machine should have at least
jdk 1.6jdk 1.6
Version 1.7 is also okVersion 1.7 is also ok
Then download the installer file Then download the installer file fromfrom
http://developer.android.com/sdk/http://developer.android.com/sdk/index.htmlindex.html
![Page 9: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/9.jpg)
Android SDK (2)Android SDK (2)
* There is a known bug during * There is a known bug during installation of the SDKinstallation of the SDK The installer cannot locate the jdkThe installer cannot locate the jdk
Just click the "Back" button and then Just click the "Back" button and then "Next""Next"
It should workIt should work
![Page 10: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/10.jpg)
The Android SDK The Android SDK ManagerManager
After the installation of Android SDKAfter the installation of Android SDK Some components should be installedSome components should be installed
Packages for Android versions: 2.1, 2.2, Packages for Android versions: 2.1, 2.2, 3.2, etc.3.2, etc.
Some other tools like a couple of Google Some other tools like a couple of Google APIsAPIs
Start the Android SDK Manager and Start the Android SDK Manager and wait for fetching of packageswait for fetching of packages This may take a whileThis may take a while Took me two / thirds of a day for all Took me two / thirds of a day for all
packagespackages
![Page 11: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/11.jpg)
Installation of ADT Installation of ADT PluginPlugin Use the Update Manager feature of Use the Update Manager feature of
EclipseEclipse To install the latest revision of ADT on your To install the latest revision of ADT on your
development computerdevelopment computer How to download it?How to download it?
Start Eclipse, then select Start Eclipse, then select Help Help > > Install Install New SoftwareNew Software -> Add, in the top-right -> Add, in the top-right cornercorner
In the Add Repository In the Add Repository
Enter "ADT Plugin" for the Name Enter "ADT Plugin" for the Name
Copy for location Copy for location https://dl-ssl.google.com/android/eclipse/ https://dl-ssl.google.com/android/eclipse/
![Page 12: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/12.jpg)
Installation of ADT Installation of ADT PluginPlugin
In the Available Software dialogIn the Available Software dialog Select the checkbox next to Select the checkbox next to
Developer Tools and click NextDeveloper Tools and click Next
In the next window, you'll see a list In the next window, you'll see a list of the tools to be downloadedof the tools to be downloaded
Click NextClick Next
Read and accept the license Read and accept the license agreementsagreements
Then click FinishThen click Finish Restart EclipseRestart Eclipse
![Page 13: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/13.jpg)
Installation of Installation of Android SDKAndroid SDK
Live DemoLive Demo
![Page 14: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/14.jpg)
Android Virtual Android Virtual Device Device
How to Create a AVD?How to Create a AVD?
![Page 15: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/15.jpg)
Android Virtual DeviceAndroid Virtual Device To create virtual deviceTo create virtual device
Open Eclipse -> Window -> ADV ManagerOpen Eclipse -> Window -> ADV Manager
Open the Android Virtual Device managerOpen the Android Virtual Device manager
Add new deviceAdd new device
With the Android OS version neededWith the Android OS version needed
Why need AVD?Why need AVD? To test your app before deployment to a To test your app before deployment to a
phonephone
To test on different versions of Android To test on different versions of Android OSOS
To find and correct simple mistakesTo find and correct simple mistakes
![Page 16: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/16.jpg)
AVD Manager - ExampleAVD Manager - Example Create new AVDCreate new AVD
![Page 17: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/17.jpg)
AVD Manager - ExampleAVD Manager - Example Give it some nameGive it some name
Better add the OS Better add the OS versionversion
Add SD card siezeAdd SD card sieze Select OS versionSelect OS version You are done!You are done!
![Page 18: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/18.jpg)
New PhoneGap New PhoneGap ProjectProject
Two ways of creatingTwo ways of creating
![Page 19: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/19.jpg)
PhoneGap ProjectPhoneGap Project How to create a PhoneGap Project?How to create a PhoneGap Project?
Create an android projectCreate an android project File -> New -> Android ProjectFile -> New -> Android Project
In the root directory of the project, In the root directory of the project, create two new directoriescreate two new directories
/libs and /assets/www/libs and /assets/www Copy phonegap.js from your PhoneGap Copy phonegap.js from your PhoneGap
download earlier to /assets/wwwdownload earlier to /assets/www Create an index.html file in /assets/wwwCreate an index.html file in /assets/www Copy phonegap.jar from your PhoneGap Copy phonegap.jar from your PhoneGap
download earlier to /libsdownload earlier to /libs
![Page 20: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/20.jpg)
New PhoneGap ProjectNew PhoneGap Project
Copy xml folder from your Copy xml folder from your PhoneGap download to /resPhoneGap download to /res
Set the build path of the Set the build path of the phonegap.jarphonegap.jar Right click on the /libs folder Right click on the /libs folder Go to Build Paths/ -> Configure Go to Build Paths/ -> Configure
Build Paths. Build Paths. In the Libraries tab, add phonegap-In the Libraries tab, add phonegap-
1.0.0.jar to the Project1.0.0.jar to the Project
![Page 21: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/21.jpg)
New PhoneGap Project New PhoneGap Project (2)(2)
Make a few adjustments to the Make a few adjustments to the project's main Java fileproject's main Java file Change the class's extend from Change the class's extend from
ActivityActivity to to DroidGapDroidGap
Replace the Replace the setContentView()setContentView() line line with with super.loadUrl("file:///android_asset/wsuper.loadUrl("file:///android_asset/www/index.html")ww/index.html");;
Add Add import com.phonegap.*import com.phonegap.* Remove import Remove import
android.app.Activityandroid.app.Activity
![Page 22: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/22.jpg)
New PhoneGap Project New PhoneGap Project (3)(3)
Right click on AndroidManifest.xml Right click on AndroidManifest.xml and select Open With > Text Editorand select Open With > Text Editor You should edit the xmlYou should edit the xml
By adding new elementsBy adding new elements
By editing existing elementsBy editing existing elements
You can see how the final You can see how the final AndroidManifest.xml file should AndroidManifest.xml file should look likelook like
http://phonegap.com/assets/guide/http://phonegap.com/assets/guide/manifest.jpg manifest.jpg
![Page 23: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/23.jpg)
New PhoneGap Project New PhoneGap Project --
Alternative WayAlternative Way This is not so pleasing, right?This is not so pleasing, right? Hopefully there is an easier wayHopefully there is an easier way
Using Using MDS AppLaud PhoneGap Eclipse PluginMDS AppLaud PhoneGap Eclipse Plugin
How to install it?How to install it? Open EclipseOpen Eclipse
Go to Help -> Install New Software -> Click Go to Help -> Install New Software -> Click AddAdd
Like with the ADT pluginLike with the ADT plugin
For location type: For location type: https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-
phonegap/tags/r1.2/downloadphonegap/tags/r1.2/download
![Page 24: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/24.jpg)
New PhoneGap Project New PhoneGap Project ––
Alternative Way (2)Alternative Way (2) After the plugin is installed and After the plugin is installed and ready to goready to go A PhoneGap icon should be A PhoneGap icon should be
displayed in the toolbardisplayed in the toolbar
After than the creation of new After than the creation of new project is straight-forwardproject is straight-forward
With With AppLaud AppLaud plugin you can plugin you can select to include jQuery or Senchaselect to include jQuery or Sencha
![Page 25: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/25.jpg)
New PhoneGap New PhoneGap ProjectProjectLive DemoLive Demo
![Page 26: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/26.jpg)
Hello World Hello World PhoneGapPhoneGap
![Page 27: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/27.jpg)
Hello World PhoneGapHello World PhoneGap Lets make our "Hello World, Lets make our "Hello World,
PhoneGap!" applicationPhoneGap!" application Till now we have an empty Till now we have an empty
PhoneGap projectPhoneGap project
All we need to do is to edit the All we need to do is to edit the index.htmlindex.html file file
Created by usCreated by us
Located in /assets/wwwLocated in /assets/www
This is the Entry point of our This is the Entry point of our ApplicationApplication
![Page 28: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/28.jpg)
Hello World PhoneGap – Hello World PhoneGap – ExampleExample
Hello World, PhoneGap!Hello World, PhoneGap! Open the index.html and copy the Open the index.html and copy the
followingfollowing<!Doctype html><!Doctype html><html><html><head><head> <title> First PhoneGap Application </title><title> First PhoneGap Application </title><head><head><body><body> <h1>Hello PhoneGap</h1><h1>Hello PhoneGap</h1></body></body></html></html>
Go to Build -> Run as Android Go to Build -> Run as Android ApplicationApplication The emulator should startThe emulator should start
And the app run!And the app run!
![Page 29: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/29.jpg)
Hello World Hello World PhoneGapPhoneGap
Live DemoLive Demo
![Page 30: Android SDK and PhoneGap](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554ebd31b4c905de468b48a0/html5/thumbnails/30.jpg)
QuestionsQuestions??
Android SDK and Android SDK and PhoneGapPhoneGap