This document discusses developing mobile web apps using HTML5, jQuery, and PhoneGap/Apache Cordova. It covers the hybrid approach of using HTML/CSS/JavaScript for the front-end and PhoneGap to package it as a native mobile app. Tools mentioned include Apache Cordova, Node.js, Eclipse, and Xcode. It provides an overview of key topics to be covered in subsequent days, such as the mobile web page structure using jQuery Mobile, connecting to online databases using PHP and MySQL, and building apps with PhoneGap Build.
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
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
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
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
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
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