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.

Mobile Web App development multiplatform using phonegap-cordova

1,145 views

Published on

Multiplatform Approach using HTML interface - http://kerul.net
- HTML + jQuery (JavaScript, CSS)
- Apache Cordova (HTML to Android Project)
- Eclipse ADT – to generate APK
- Xcode – to generate iOS app

Published in: Technology

Mobile Web App development multiplatform using phonegap-cordova

  1. 1. 23/4/2015 http://blog.kerul.net 1 Mobile Web Apps Development (Multiplatform using HTML5, jQuery, PhoneGap/Apache Cordova) Khirulnizam Abd Rahman kerul.net
  2. 2. About Khirulnizam  Codes in blog.kerul.net  Certified HRDF Trainer  Full time Lecturer of Computer Science, Faculty of Information Science and Technology, Selangor International Islamic University College (KUIS) – since 2000.  Avid Android developer since 2010 – MDeC ICONApp 2010.  Grants MDeC ICON 2010,2011; MDeC ICONdap 2013.  Apps in Google Play  SmartSolat using Adobe Air – bit.ly/smartsolat  Al-Mathurat bersama Ustaz Don – Android bit.ly/new-mathurat  Al-Mathurat bersama Ustaz Don – iPhone bit.ly/m-mathurat-ios  Peribahasa Dictionary – 20K ( bit.ly/pbahasa )  mDictionary – open-sourced ( bit.ly/m-dictionary ) 23/4/2015 http://blog.kerul.net 2
  3. 3. Day 1 FRONTE ND 23/4/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 3 The Mobile Apps Development Basics with HTML5 Introduction to Web-based Mobile Apps Development tools installation. Web server setup (Apache HTTPd). HTML and jQuery for the Interface Basic HTML file. Text, Fontface, Hyperlinks. Image, Paragraph, Division, Header. Division, Header. CSS. JavaScript & JQuery mobile framework basics. Mobile Page Structure Header Main Content Footer Single-page template structure Multi-page template structure Buttons Transition Listview Panel
  4. 4. Hybrid Approach 23/4/2015 http://blog.kerul.net 4
  5. 5. Hybrid Approach – consists of  HTML + jQuery (JavaScript, CSS)  Apache Cordova (HTML to Android Project)  Eclipse ADT – to generate APK  Xcode – to generate iOS app 23/4/2015 http://blog.kerul.net 5
  6. 6. What are tools needed to develop Android App Hybrid?  HTML knowledge  jQuery (JavaScript + CSS framework)  Apache Cordova  NodeJS  Apache Ant  Latest JDK  Eclipse ADT Bundle  Android SDK (for Android app)  Xcode (for iOS app) 23/4/2015 http://blog.kerul.net 6
  7. 7. Apache Cordova  Previously known as PhoneGap  use HTML5 and CSS3 for interface 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. 23/4/2015 http://blog.kerul.net 7
  8. 8. 23/4/2015 http://blog.kerul.net 8 CSS | HTML JavaScript
  9. 9. 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. 23/4/2015 http://blog.kerul.net 9
  10. 10. NodeJS 23/4/2015 http://blog.kerul.net 10  Node.js contains a built-in library to allow applications to act as a Web server without software such as Apache HTTP
  11. 11. Where to distribute my App?  Play.google.com  Apple App Store 23/4/2015 http://blog.kerul.net 11
  12. 12. DEMOs 23/4/2015 http://blog.kerul.net 12 LESS plan, MORE do - Mark Zuckerberg
  13. 13. Next Agenda Day 1 23/4/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 13
  14. 14. Installing Web Editor  Use NotePad++  Or any HTML editor (such as DreamWeaver) 23/4/2015 http://blog.kerul.net 14
  15. 15. Web Client  Any web browser could be the web client 23/4/2015 http://blog.kerul.net 15
  16. 16. What is HTML?  HyperText Mark-up Language  Marking up areas with angle brackets or TAGs 23/4/2015 http://blog.kerul.net 16
  17. 17. 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 23/4/2015 http://blog.kerul.net 17
  18. 18. 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> 23/4/2015 http://blog.kerul.net 18
  19. 19. Images  <img src="w3schools.jpg" alt="W3Schoo ls.com" width="104" height="142"> 23/4/2015 http://blog.kerul.net 19
  20. 20. 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> 23/4/2015 http://blog.kerul.net 20
  21. 21. CSS?  Cascading Style Sheet  Added to HTML4 to provide styles in HTML elements 23/4/2015 http://blog.kerul.net 21
  22. 22. CSS syntax  p { color: red; text-align: center; } 23/4/2015 http://blog.kerul.net 22
  23. 23. Simple CSS example - internal  <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> 23/4/2015 http://blog.kerul.net 23
  24. 24. CSS inline  <h1 style="color:blue;margin-left:30px;"> This is a heading.</h1> 23/4/2015 http://blog.kerul.net 24
  25. 25. 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> 23/4/2015 http://blog.kerul.net 25
  26. 26. 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> 23/4/2015 http://blog.kerul.net 26
  27. 27. 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> 23/4/2015 http://blog.kerul.net 27
  28. 28. Mobile Web Page  Create folders in web root as below 23/4/2015 http://blog.kerul.net 28
  29. 29. 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 23/4/2015 http://blog.kerul.net 29
  30. 30. 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> 23/4/2015 http://blog.kerul.net 30 http://demos.jquerymobile.com/1.4.5/pages/
  31. 31. 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> 23/4/2015 http://blog.kerul.net 31
  32. 32. 23/4/2015 http://blog.kerul.net 32
  33. 33. Multipage 23/4/2015 http://blog.kerul.net 33
  34. 34. Changing the Theme  http://themeroller.jquerymobile.com/ 23/4/2015 http://blog.kerul.net 34
  35. 35. Exercise  Developing department’s 3-page app. 23/4/2015 http://blog.kerul.net 35
  36. 36. Build.phonegap.com  Fast apps generation 23/4/2015 http://blog.kerul.net 36
  37. 37. 23/4/2015 http://blog.kerul.net 37
  38. 38. 23/4/2015 http://blog.kerul.net 38
  39. 39.  http://blog.kerul.net/2015/03/buildphone gapcom-to-generate-signed-apk.html 23/4/2015 http://blog.kerul.net 39
  40. 40. Day 2 - BACKEND Connecting to Online Database  Server configuration.  PHP and MySql connectivity.  Gui tool to manage data.  MySql query for selecting data.  Using PHP to display data.  Search facilities.  Filterable in jQueryMobile.  Inserting a new record.  Search result listing using AJAX approach. 23/4/2015 http://blog.kerul.net 40
  41. 41. Install the Web Server  For the back-end  Apache HTTPd – also available in XAMPP  Download at https://www.apachefriends.org/  localhost 23/4/2015 http://blog.kerul.net 41
  42. 42. Web root 23/4/2015 http://blog.kerul.net 42
  43. 43. To be continued… 23/4/2015 http://blog.kerul.net 43

×