Android app development Hybrid approach for beginners

26/1/2015 http://blog.kerul.net 1
Android Apps Development
(Hybrid approach using HTML5, jQuery,
Apache Cordova and Android SDK)
Khirulnizam Abd Rahman
blog.kerul.net

About Khirulnizam
 Lecturer of Computer Science, Faculty of
Information Science and Technology, Selangor
International Islamic University College (KUIS) –
since 2000.
 Certified HRDF Trainer
 Codes in blog.kerul.net
 Avid Android developer since 2010 – MDeC
ICONApp 2010.
 Grants MDeC ICON 2010,2011; MDeC
ICONdap 2013.
 Apps in Google Play
 M-Mathurat – 200K ( bit.ly/m-mathurat )
 Peribahasa Dictionary – 20K ( bit.ly/pbahasa)
 mDictionary – open-sourced ( bit.ly/m-dictionary )

Agenda Day 1
26/1/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 3

Agenda Day 2

Android Devices

Android Story
 http://www.techsavys.info/2011/07/the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shares.html

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;

Android Architecture

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)

Android
Global
Market
share
Source: Strategy Analytics -
http://blogs.strategyanalytics.c
om/WSS/post/2013/10/31/And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013.aspx

Faq3: How many versions
(distributions) Android has?

 Source:
http://developer.android.com/resources/dashb
oard/platform-versions.html

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.

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.

Apps samples

Apps

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.

DVM (for below Android 5)

ART
 Android Runtime

Faq7: What is the language
used to develop Android app
Hybrid Approach?
 HTML
 CSS
 JavaScript
 Java
 XML
 SQL

Hybrid Approach

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

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

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

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.

IDE - Eclipse

Emulator

Dalvik Debugger

Faq8: Where to distribute my
App?
 Play.google.com
 Sampung App Store
 Amazon AppStore
 Appzill.net
 GetJar.com
 Your own distribution channel

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

AndroidManifest
 AndroidManifest.xml – app’s
permissions need to be registered here
– (eg: app can access Internet, phone
contacts, camera, etc must be
mentioned here)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionCode="7"
android:versionName="1.7"
package="net.kerul.mMathurat">
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:taskAffinity=".mMathuratActivity">
<activity android:name=".mMathuratActivity"
android:label="@string/app_name"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".Aboutus" class=".Aboutus"
android:label="Mengenai kami..." android:screenOrientation="portrait">
</activity>
<activity android:name=".Berterusan" class=".Berterusan"
android:label="Mod pemanduan..." android:screenOrientation="portrait">
</activity>
</application>
<uses-sdk android:minSdkVersion="7" />
<receiver android:name=".DetectIncomingCall">
<intent-filter>
<action android:name="android.intent.action.PHONE_STATE" />
</intent-filter>
</receiver>
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE"></uses-permission>
</manifest>

DEMOs
LESS plan, MORE do
- Mark Zuckerberg

Agenda Day 1
26/1/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 36

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

Web Client
 Any web browser could be the web
client

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

Web root

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>

Android app development Hybrid approach for beginners

More Related Content

What's hot

Viewers also liked

Similar to Android app development Hybrid approach for beginners

More from Khirulnizam Abd Rahman

Recently uploaded

Android app development Hybrid approach for beginners