Mobile Web App development multiplatform using phonegap-cordova

23/4/2015 http://blog.kerul.net 1
Mobile Web Apps Development
(Multiplatform using HTML5,
jQuery, PhoneGap/Apache
Cordova)
Khirulnizam Abd Rahman
kerul.net

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 )

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

Hybrid Approach

Hybrid Approach – consists
of
 HTML + jQuery (JavaScript, CSS)
 Apache Cordova (HTML to Android
Project)
 Eclipse ADT – to generate APK
 Xcode – to generate iOS app

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)

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.

CSS | HTML
JavaScript

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.

NodeJS
 Node.js contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP

Where to distribute my
App?
 Play.google.com
 Apple App Store

DEMOs
LESS plan, MORE do
- Mark Zuckerberg

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

Installing Web Editor
 Use NotePad++
 Or any HTML editor (such as
DreamWeaver)

Web Client
 Any web browser could be the web
client

What is HTML?
 HyperText Mark-up Language
 Marking up areas with angle brackets or
TAGs

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

Hyperlinks
 <!DOCTYPE html>
<html>
<head>
</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>

Images
 <img src="w3schools.jpg" alt="W3Schoo
ls.com" width="104" height="142">

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>

CSS?
 Cascading Style Sheet
 Added to HTML4 to provide styles in
HTML elements

CSS syntax
 p {
color: red;
text-align: center;
}

Simple CSS example - internal
 <head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

CSS inline
 <h1 style="color:blue;margin-left:30px;">
This is a heading.</h1>

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>

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>

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>

Mobile Web Page
 Create folders in web root as below

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

Mobile Web page structure
<!DOCTYPE html>
<html>
<head>
<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>
http://demos.jquerymobile.com/1.4.5/pages/

Head segment
<head>
<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>

Multipage

Changing the Theme
 http://themeroller.jquerymobile.com/

Exercise
 Developing department’s 3-page app.

Build.phonegap.com
 Fast apps generation

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

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.

Install the Web Server
 For the back-end
 Apache HTTPd – also available in
XAMPP
 Download at
https://www.apachefriends.org/
 localhost

Web root

To be continued…

Mobile Web App development multiplatform using phonegap-cordova

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Mobile Web App development multiplatform using phonegap-cordova

Similar to Mobile Web App development multiplatform using phonegap-cordova (20)

More from Khirulnizam Abd Rahman

More from Khirulnizam Abd Rahman (18)

Recently uploaded

Recently uploaded (20)

Mobile Web App development multiplatform using phonegap-cordova