Android SDK and PhoneGap


Published on

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Android SDK and PhoneGap

  1. 1. Android SDK How to make it work? <ul><li>Doncho Minkov </li></ul><ul><li>Telerik Mobile Development Course </li></ul><ul><li> </li></ul><ul><li>Technical Trainer </li></ul>
  2. 2. Table of Contents <ul><li>The Android SDK </li></ul><ul><li>Installation of Android SDK </li></ul><ul><ul><li>Eclipse </li></ul></ul><ul><ul><li>Android SDK </li></ul></ul><ul><ul><li>Android ADT </li></ul></ul><ul><li>Installation of PhoneGap </li></ul><ul><li>&quot;Hello PhoneGap&quot; project </li></ul>
  3. 3. The Android SDK
  4. 4. The Android SDK <ul><li>Android is a software stack for mobile devices that includes </li></ul><ul><ul><ul><li>An operating system </li></ul></ul></ul><ul><ul><ul><li>Middleware </li></ul></ul></ul><ul><ul><ul><li>Key applications </li></ul></ul></ul><ul><li>The Android SDK provides necessary tools and APIs to develop applications </li></ul><ul><ul><li>Using Java programming language </li></ul></ul>
  5. 5. Installation of Android SDK How to start Android development?
  6. 6. Steps for Installing Android SDK <ul><li>Installing Eclipse IDE </li></ul><ul><li>Install Android SDK </li></ul><ul><li>Install the ADT plugin for eclipse </li></ul><ul><li>Add components needed for development </li></ul>
  7. 7. Eclipse <ul><li>What is Eclipse? </li></ul><ul><ul><li>A multi-language software development environment comprising </li></ul></ul><ul><ul><li>An integrated development environment (IDE) </li></ul></ul><ul><ul><li>Mostly written in Java </li></ul></ul><ul><li>Eclipse is used to develop applications </li></ul><ul><ul><li>In Java, C, C++, Perl, PHP, Python, R, etc. </li></ul></ul><ul><ul><li>For Android (using Java) </li></ul></ul><ul><li>Download at http:// </li></ul>
  8. 8. Android SDK <ul><li>For the Android SDK to be installed </li></ul><ul><ul><li>The machine should have at least jdk 1.6 </li></ul></ul><ul><ul><ul><li>Version 1.7 is also ok </li></ul></ul></ul><ul><ul><li>Then download the installer file from </li></ul></ul><ul><ul><ul><li>http:// </li></ul></ul></ul>
  9. 9. Android SDK (2) <ul><li>* There is a known bug during installation of the SDK </li></ul><ul><ul><li>The installer cannot locate the jdk </li></ul></ul><ul><ul><ul><li>Just click the &quot;Back&quot; button and then &quot;Next&quot; </li></ul></ul></ul><ul><ul><ul><li>It should work </li></ul></ul></ul>
  10. 10. The Android SDK Manager <ul><li>After the installation of Android SDK </li></ul><ul><ul><li>Some components should be installed </li></ul></ul><ul><ul><ul><li>Packages for Android versions: 2.1, 2.2, 3.2, etc. </li></ul></ul></ul><ul><ul><ul><li>Some other tools like a couple of Google APIs </li></ul></ul></ul><ul><li>Start the Android SDK Manager and wait for fetching of packages </li></ul><ul><ul><li>This may take a while </li></ul></ul><ul><ul><li>Took me two / thirds of a day for all packages </li></ul></ul>
  11. 11. Installation of ADT Plugin <ul><li>Use the Update Manager feature of Eclipse </li></ul><ul><ul><li>To install the latest revision of ADT on your development computer </li></ul></ul><ul><li>How to download it? </li></ul><ul><ul><li>Start Eclipse, then select Help > Install New Software -> Add, in the top-right corner </li></ul></ul><ul><ul><li>In the Add Repository </li></ul></ul><ul><ul><ul><li>Enter &quot;ADT Plugin&quot; for the Name </li></ul></ul></ul><ul><ul><ul><li>Copy for location https :// / </li></ul></ul></ul>
  12. 12. Installation of ADT Plugin <ul><li>In the Available Software dialog </li></ul><ul><ul><li>Select the checkbox next to Developer Tools and click Next </li></ul></ul><ul><ul><li>In the next window, you'll see a list of the tools to be downloaded </li></ul></ul><ul><ul><ul><li>Click Next </li></ul></ul></ul><ul><ul><li>Read and accept the license agreements </li></ul></ul><ul><ul><li>Then click Finish </li></ul></ul><ul><li>Restart Eclipse </li></ul>
  13. 13. Installation of Android SDK Live Demo
  14. 14. Android Virtual Device How to Create a AVD?
  15. 15. Android Virtual Device <ul><li>To create virtual device </li></ul><ul><ul><li>Open Eclipse -> Window -> ADV Manager </li></ul></ul><ul><ul><ul><li>Open the Android Virtual Device manager </li></ul></ul></ul><ul><ul><li>Add new device </li></ul></ul><ul><ul><ul><li>With the Android OS version needed </li></ul></ul></ul><ul><li>Why need AVD? </li></ul><ul><ul><li>To test your app before deployment to a phone </li></ul></ul><ul><ul><li>To test on different versions of Android OS </li></ul></ul><ul><ul><li>To find and correct simple mistakes </li></ul></ul>
  16. 16. AVD Manager - Example <ul><li>Create new AVD </li></ul>
  17. 17. AVD Manager - Example <ul><li>Give it some name </li></ul><ul><ul><li>Better add the OS version </li></ul></ul><ul><li>Add SD card sieze </li></ul><ul><li>Select OS version </li></ul><ul><li>You are done! </li></ul>
  18. 18. New PhoneGap Project Two ways of creating
  19. 19. PhoneGap Project <ul><li>How to create a PhoneGap Project? </li></ul><ul><ul><li>Create an android project </li></ul></ul><ul><ul><ul><li>File -> New -> Android Project </li></ul></ul></ul><ul><ul><li>In the root directory of the project, create two new directories </li></ul></ul><ul><ul><li>/libs and /assets/www </li></ul></ul><ul><ul><li>Copy phonegap.js from your PhoneGap download earlier to /assets/www </li></ul></ul><ul><ul><li>Create an index.html file in /assets/www </li></ul></ul><ul><ul><li>Copy phonegap.jar from your PhoneGap download earlier to /libs </li></ul></ul>
  20. 20. New PhoneGap Project <ul><li>Copy xml folder from your PhoneGap download to /res </li></ul><ul><li>Set the build path of the phonegap.jar </li></ul><ul><ul><li>Right click on the /libs folder </li></ul></ul><ul><ul><li>Go to Build Paths/ -> Configure Build Paths. </li></ul></ul><ul><ul><li>In the Libraries tab, add phonegap-1.0.0.jar to the Project </li></ul></ul>
  21. 21. New PhoneGap Project (2) <ul><li>Make a few adjustments to the project's main Java file </li></ul><ul><ul><li>Change the class's extend from Activity to DroidGap </li></ul></ul><ul><ul><li>Replace the setContentView() line with super.loadUrl(&quot;file:///android_asset/www/index.html&quot;) ; </li></ul></ul><ul><li>Add import com.phonegap.* </li></ul><ul><li>Remove import </li></ul>
  22. 22. New PhoneGap Project (3) <ul><li>Right click on AndroidManifest.xml and select Open With > Text Editor </li></ul><ul><ul><li>You should edit the xml </li></ul></ul><ul><ul><ul><li>By adding new elements </li></ul></ul></ul><ul><ul><ul><li>By editing existing elements </li></ul></ul></ul><ul><ul><li>You can see how the final AndroidManifest.xml file should look like </li></ul></ul><ul><ul><ul><li>http:// </li></ul></ul></ul>
  23. 23. New PhoneGap Project - Alternative Way <ul><li>This is not so pleasing, right? </li></ul><ul><ul><li>Hopefully there is an easier way </li></ul></ul><ul><ul><ul><li>Using MDS AppLaud PhoneGap Eclipse Plugin </li></ul></ul></ul><ul><li>How to install it? </li></ul><ul><ul><li>Open Eclipse </li></ul></ul><ul><ul><li>Go to Help -> Install New Software -> Click Add </li></ul></ul><ul><ul><ul><li>Like with the ADT plugin </li></ul></ul></ul><ul><ul><li>For location type: https:// </li></ul></ul>
  24. 24. New PhoneGap Project – Alternative Way (2) <ul><li>After the plugin is installed and ready to go </li></ul><ul><ul><li>A PhoneGap icon should be displayed in the toolbar </li></ul></ul><ul><ul><li>After than the creation of new project is straight-forward </li></ul></ul><ul><li>With AppLaud plugin you can select to include jQuery or Sencha </li></ul>
  25. 25. New PhoneGap Project Live Demo
  26. 26. Hello World PhoneGap
  27. 27. Hello World PhoneGap <ul><li>Lets make our &quot;Hello World, PhoneGap!&quot; application </li></ul><ul><ul><li>Till now we have an empty PhoneGap project </li></ul></ul><ul><ul><li>All we need to do is to edit the index.html file </li></ul></ul><ul><ul><ul><li>Created by us </li></ul></ul></ul><ul><ul><ul><li>Located in /assets/www </li></ul></ul></ul><ul><ul><ul><li>This is the Entry point of our Application </li></ul></ul></ul>
  28. 28. Hello World PhoneGap – Example <ul><li>Hello World, PhoneGap! </li></ul><ul><ul><li>Open the index.html and copy the following </li></ul></ul><ul><li><!Doctype html> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> First PhoneGap Application </title> </li></ul><ul><li><head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Hello PhoneGap</h1> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Go to Build -> Run as Android Application </li></ul><ul><ul><li>The emulator should start </li></ul></ul><ul><ul><li>And the app run! </li></ul></ul>
  29. 29. Hello World PhoneGap Live Demo
  30. 30. Android SDK and PhoneGap