This document provides an overview and introduction to developing Android apps using a hybrid approach with HTML5, jQuery, Apache Cordova and the Android SDK. It begins with background information about the author and their experience developing Android apps. It then outlines an agenda for two days of training on this topic. The rest of the document addresses frequently asked questions about Android and the hybrid app development process through short explanations and diagrams. Key topics covered include what Android is, its architecture, tools used for hybrid app development like Cordova and Eclipse, and how to structure an Android project.
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
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
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. 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
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
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
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. 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. 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
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
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. 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
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
37. Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
26/1/2015 http://blog.kerul.net 37
38. Web Client
Any web browser could be the web
client
26/1/2015 http://blog.kerul.net 38
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
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. 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. 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
49. CSS inline
<h1 style="color:blue;margin-left:30px;">
This is a heading.</h1>
26/1/2015 http://blog.kerul.net 49
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. 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. 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. Mobile Web Page
Create folders in web root as below
26/1/2015 http://blog.kerul.net 53
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