Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android app development Hybrid approach for beginners

1,038 views

Published on

Android app development hybrid approach for beginners using HTML5, CSS3, jQuery, Apache Cordova, Android SDK

Published in: Technology
  • Be the first to comment

Android app development Hybrid approach for beginners

  1. 1. 26/1/2015 http://blog.kerul.net 1 Android Apps Development (Hybrid approach using HTML5, jQuery, Apache Cordova and Android SDK) Khirulnizam Abd Rahman blog.kerul.net
  2. 2. About Khirulnizam  Lecturer of Computer Science, Faculty of Information Science and Technology, Selangor International Islamic University College (KUIS) – since 2000.  Certified HRDF Trainer  Codes in blog.kerul.net  Avid Android developer since 2010 – MDeC ICONApp 2010.  Grants MDeC ICON 2010,2011; MDeC ICONdap 2013.  Apps in Google Play  M-Mathurat – 200K ( bit.ly/m-mathurat )  Peribahasa Dictionary – 20K ( bit.ly/pbahasa)  mDictionary – open-sourced ( bit.ly/m-dictionary ) 26/1/2015 http://blog.kerul.net 2
  3. 3. Agenda Day 1 26/1/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 3
  4. 4. Agenda Day 2 26/1/2015 http://blog.kerul.net 4
  5. 5. Android Devices 26/1/2015 http://blog.kerul.net 5
  6. 6. Android Story  http://www.techsavys.info/2011/07/the- android-story-an-android-infographic- discussing-about-its-beginning-on- going-changes-and-worldwide-market- shares.html 26/1/2015 http://blog.kerul.net 6
  7. 7. Faq1: What is Android?  Android is a software stack for mobile devices that includes an operating system, middleware and key applications (platform). The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language.  The kernel of most Android version is based on Linux 2.6 (3.0 for ICS).  Android architecture; 26/1/2015 http://blog.kerul.net 7
  8. 8. Android Architecture 26/1/2015 http://blog.kerul.net 8
  9. 9. Faq2: Who develop Android?  Initially developed by Andrew (Andy) Rubin and his team in Android Inc.  Google acquired Android Inc. in 2005.  Till Mac 2013, developed by Google under Andy Rubin (Senior Vice President of Mobile) 26/1/2015 http://blog.kerul.net 9
  10. 10. Android Global Market share Source: Strategy Analytics - http://blogs.strategyanalytics.c om/WSS/post/2013/10/31/And roid-Captures-Record-81- Percent-Share-of-Global- Smartphone-Shipments-in-Q3- 2013.aspx 26/1/2015 http://blog.kerul.net 10
  11. 11. Faq3: How many versions (distributions) Android has? 26/1/2015 http://blog.kerul.net 11
  12. 12.  Source: http://developer.android.com/resources/dashb oard/platform-versions.html 26/1/2015 http://blog.kerul.net 12
  13. 13. Faq4: What is API Level?  API Level is an integer value that uniquely identifies the framework API revision offered by a version of the Android platform.  The Android platform provides a framework API that applications can use to interact with the underlying Android system. 26/1/2015 http://blog.kerul.net 13
  14. 14. Faq5: What is Android app?  Developer can develop application that runs on top of Android.  App is actually a simpler version of application.  Uses *.apk for the installer file extension. 26/1/2015 http://blog.kerul.net 14
  15. 15. Apps samples 26/1/2015 http://blog.kerul.net 15
  16. 16. Apps 26/1/2015 http://blog.kerul.net 16
  17. 17. Faq6: What is Dalvik Virtual Machine, is it similar as JVM?  Author - Dan Bornstein  Dalvik VM implementing slightly different architecture to JVM.  Dalvik VM is a register-based architecture.  Being optimized for low memory and slower processing speed.  The VM was slimmed down to use less space. 26/1/2015 http://blog.kerul.net 17
  18. 18. DVM (for below Android 5) 26/1/2015 http://blog.kerul.net 18
  19. 19. ART  Android Runtime 26/1/2015 http://blog.kerul.net 19
  20. 20. Faq7: What is the language used to develop Android app Hybrid Approach?  HTML  CSS  JavaScript  Java  XML  SQL 26/1/2015 http://blog.kerul.net 20
  21. 21. Hybrid Approach 26/1/2015 http://blog.kerul.net 21
  22. 22. Hybrid Approach – consists of  HTML + jQuery (JavaScript, CSS)  Apache Cordova (HTML to Android Project)  Eclipse ADT – to generate APK 26/1/2015 http://blog.kerul.net 22
  23. 23. Faq8: What are tools needed to develop Android App Hybrid? HTML knowledge  jQuery (JavaScript + CSS framework)  NodeJS  Apache Ant  Apache Cordova  Latest JDK  Eclipse ADT Bundle  Android SDK 26/1/2015 http://blog.kerul.net 23
  24. 24. Apache ANT  Apache Ant is a Java library and command-line tool  to drive processes described in build files as targets and extension points dependent upon each other.  The main known usage of Ant is the build of Java applications. 26/1/2015 http://blog.kerul.net 24
  25. 25. NodeJS 26/1/2015 http://blog.kerul.net 25  Node.js contains a built-in library to allow applications to act as a Web server without software such as Apache HTTP
  26. 26. Apache Cordova  Previously known as PhoneGap  use HTML5 and CSS3 for their rendering, and JavaScript for logic  HTML5 provides better support for GPS, camera, video, etc.  includes basic plugins that allow access to the device's hardware’s.  embeds HTML5 code inside a native WebView on the device, using a foreign function interface to access the native resources of the device. 26/1/2015 http://blog.kerul.net 26
  27. 27. IDE - Eclipse 26/1/2015 http://blog.kerul.net 27
  28. 28. Emulator 26/1/2015 http://blog.kerul.net 28
  29. 29. Dalvik Debugger 26/1/2015 http://blog.kerul.net 29
  30. 30. Faq8: Where to distribute my App?  Play.google.com  Sampung App Store  Amazon AppStore  Appzill.net  GetJar.com  Your own distribution channel 26/1/2015 http://blog.kerul.net 30
  31. 31. Android Project Structure  Inside Android Project, there should be; /src – the Java codes are here /gen – generated automatically /assets – put your fonts, videos, sounds here /res – images, layout and global variables /drawable-hdpi –for high spec phones /drawable-ldpi –for low spec phones /drawable-mdpi –for medium spec phones /layout – all XML file for the screen(s) layout /values – global constant variables 26/1/2015 http://blog.kerul.net 31
  32. 32. 26/1/2015 http://blog.kerul.net 32
  33. 33. AndroidManifest  AndroidManifest.xml – app’s permissions need to be registered here – (eg: app can access Internet, phone contacts, camera, etc must be mentioned here) 26/1/2015 http://blog.kerul.net 33
  34. 34. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="7" android:versionName="1.7" package="net.kerul.mMathurat"> <application android:icon="@drawable/icon" android:label="@string/app_name" android:taskAffinity=".mMathuratActivity"> <activity android:name=".mMathuratActivity" android:label="@string/app_name" android:screenOrientation="portrait"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".Aboutus" class=".Aboutus" android:label="Mengenai kami..." android:screenOrientation="portrait"> </activity> <activity android:name=".Berterusan" class=".Berterusan" android:label="Mod pemanduan..." android:screenOrientation="portrait"> </activity> </application> <uses-sdk android:minSdkVersion="7" /> <receiver android:name=".DetectIncomingCall"> <intent-filter> <action android:name="android.intent.action.PHONE_STATE" /> </intent-filter> </receiver> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.VIBRATE"></uses-permission> </manifest> 26/1/2015 http://blog.kerul.net 34
  35. 35. DEMOs 26/1/2015 http://blog.kerul.net 35 LESS plan, MORE do - Mark Zuckerberg
  36. 36. Agenda Day 1 26/1/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 36
  37. 37. Installing Web Editor  Use NotePad++  Or any HTML editor (such as DreamWeaver) 26/1/2015 http://blog.kerul.net 37
  38. 38. Web Client  Any web browser could be the web client 26/1/2015 http://blog.kerul.net 38
  39. 39. Install the Web Server  Apache HTTPd – also available in XAMPP  Download at https://www.apachefriends.org/  localhost 26/1/2015 http://blog.kerul.net 39
  40. 40. Web root 26/1/2015 http://blog.kerul.net 40
  41. 41. What is HTML?  HyperText Mark-up Language  Marking up areas with angle brackets or TAGs 26/1/2015 http://blog.kerul.net 41
  42. 42. HTML Basics Structure  <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>  Save as index.html 26/1/2015 http://blog.kerul.net 42
  43. 43. Hyperlinks  <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <a href="http://kerul.net">This is a link</a> </body> </html> 26/1/2015 http://blog.kerul.net 43
  44. 44. Images  <img src="w3schools.jpg" alt="W3Schoo ls.com" width="104" height="142"> 26/1/2015 http://blog.kerul.net 44
  45. 45. Layout using DIV <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright © W3Schools.com </div> 26/1/2015 http://blog.kerul.net 45
  46. 46. CSS?  Cascading Style Sheet  Added to HTML4 to provide styles in HTML elements 26/1/2015 http://blog.kerul.net 46
  47. 47. CSS syntax  p { color: red; text-align: center; } 26/1/2015 http://blog.kerul.net 47
  48. 48. Simple CSS example - internal  <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> 26/1/2015 http://blog.kerul.net 48
  49. 49. CSS inline  <h1 style="color:blue;margin-left:30px;"> This is a heading.</h1> 26/1/2015 http://blog.kerul.net 49
  50. 50. CSS example <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body style=“background-color: #b0c4de;”> <h1>My CSS web page!</h1> <p>Hello world! This is a W3Schools.com example.</p> </body> </html> 26/1/2015 http://blog.kerul.net 50
  51. 51. JavaScript  Script to add live interaction to HTML <!DOCTYPE html> <html> <body> <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1> </body> </html> 26/1/2015 http://blog.kerul.net 51
  52. 52. JavaScript Example <!DOCTYPE html> <html> <head> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </head> <body> Enter your name: <input type="text" id="fname" onblur="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> </body> </html> 26/1/2015 http://blog.kerul.net 52
  53. 53. Mobile Web Page  Create folders in web root as below 26/1/2015 http://blog.kerul.net 53
  54. 54. Copy the template  css/jquery.mobile.min.css  js/jquery.min.js  js/jquery.mobile.min.js  index.html The css and js files are available in the jQuery.mobile 26/1/2015 http://blog.kerul.net 54
  55. 55. Mobile Web page structure <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> 26/1/2015 http://blog.kerul.net 55 http://demos.jquerymobile.com/1.4.5/pages/
  56. 56. Head segment <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1"> <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> 26/1/2015 http://blog.kerul.net 56

×