Mobile Web App development multiplatform using phonegap-cordova

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. 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. 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. Hybrid Approach 23/4/2015 http://blog.kerul.net 4

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. 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. 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. 23/4/2015 http://blog.kerul.net 8 CSS | HTML JavaScript

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. 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. Where to distribute my App?  Play.google.com  Apple App Store 23/4/2015 http://blog.kerul.net 11

12. DEMOs 23/4/2015 http://blog.kerul.net 12 LESS plan, MORE do - Mark Zuckerberg

13. Next Agenda Day 1 23/4/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 13

14. Installing Web Editor  Use NotePad++  Or any HTML editor (such as DreamWeaver) 23/4/2015 http://blog.kerul.net 14

15. Web Client  Any web browser could be the web client 23/4/2015 http://blog.kerul.net 15

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. 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. 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. Images  <img src="w3schools.jpg" alt="W3Schoo ls.com" width="104" height="142"> 23/4/2015 http://blog.kerul.net 19

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. CSS?  Cascading Style Sheet  Added to HTML4 to provide styles in HTML elements 23/4/2015 http://blog.kerul.net 21

22. CSS syntax  p { color: red; text-align: center; } 23/4/2015 http://blog.kerul.net 22

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. CSS inline  <h1 style="color:blue;margin-left:30px;"> This is a heading.</h1> 23/4/2015 http://blog.kerul.net 24

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. 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. 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. Mobile Web Page  Create folders in web root as below 23/4/2015 http://blog.kerul.net 28

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. 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> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html> 23/4/2015 http://blog.kerul.net 30 http://demos.jquerymobile.com/1.4.5/pages/

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. 23/4/2015 http://blog.kerul.net 32

33. Multipage 23/4/2015 http://blog.kerul.net 33

34. Changing the Theme  http://themeroller.jquerymobile.com/ 23/4/2015 http://blog.kerul.net 34

35. Exercise  Developing department’s 3-page app. 23/4/2015 http://blog.kerul.net 35

36. Build.phonegap.com  Fast apps generation 23/4/2015 http://blog.kerul.net 36

39.  http://blog.kerul.net/2015/03/buildphone gapcom-to-generate-signed-apk.html 23/4/2015 http://blog.kerul.net 39

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. 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. Web root 23/4/2015 http://blog.kerul.net 42

43. To be continued… 23/4/2015 http://blog.kerul.net 43