android app development hybrid approach for beginners - tools installations and settings in windows...

16/4/2015 http://blog.kerul.net 1

Installation, Settings & Deployment

(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 ICONApp2010.

Grants MDeC ICON 2010,2011; MDeC ICONdap2013.

Apps in Google Play SmartSolat (prototype) – 2014 bit.ly/smartsolat

M-Mathurat – 200K ( bit.ly/m-mathurat )

Peribahasa Dictionary – 20K ( bit.ly/pbahasa)

mDictionary – open-sourced ( bit.ly/m-dictionary )

16/4/2015 http://blog.kerul.net 2

Hybrid Approach

16/4/2015 http://blog.kerul.net 3

Hybrid Approach – consists

of HTML + jQuery (JavaScript, CSS)

Apache Cordova (HTML to Android

Project)

Android Studio– to generate APK

16/4/2015 http://blog.kerul.net 4

What are tools needed to

develop Android App Hybrid? HTML knowledge

jQuery (JavaScript + CSS framework)

PHP&MySQL (Online DB)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Android Studio

Android SDK

16/4/2015 http://blog.kerul.net 5

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.

16/4/2015 http://blog.kerul.net 6

NodeJS

16/4/2015 http://blog.kerul.net 7

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.

16/4/2015 http://blog.kerul.net 8

Agenda Day 4

16/4/2015 ANDROID APP DEVELOPMENT (Hybrid) - blog.kerul.net 9

Installation of Android

Studio Install JDK (needed to run Android

Studio)

Install the Android Studio

Inside Android Studio is included

Android SDK

Needed to convert web apps into

Android project

16/4/2015 http://blog.kerul.net 10

Android Studio

Download from

http://developer.android.com/sdk/index.html

16/4/2015 http://blog.kerul.net 11

Inside Android Studio

bundle Android Studio IDE

Android SDK tools

Android 5.0 (Lollipop) Platform

Android 5.0 emulator system image with

Google APIs

16/4/2015 http://blog.kerul.net 12

Installation of Cordova

Install Apache ANT – extract the binary

provided (or download from

http://ant.apache.org/bindownload.cgi)

Install NodeJS -

http://nodejs.org/download/

16/4/2015 http://blog.kerul.net 13

Environment Variables

Right-click on MyComputer ->

Properties

16/4/2015 http://blog.kerul.net 14

Environment Variables

Set JAVA_HOME

Set ANT_HOME

Set ANDROID_HOME

Set the path to Android SDK platforms

and platform_tools

Testing

16/4/2015 http://blog.kerul.net 15

Set JAVA_HOME

16/4/2015 http://blog.kerul.net 16

Set ANT_HOME

16/4/2015 http://blog.kerul.net 17

Set Path

16/4/2015 http://blog.kerul.net 18

Set path

Add to end of the existing PATH

;%JAVA_HOME%\bin;

%ANT_HOME%\bin;

%ANDROID_HOME%\tools;

%ANDROID_HOME%\platform-tools

16/4/2015 http://blog.kerul.net 19

Cmd line

To run ant commands

Search for CMD, right-click and Run as

administrator

16/4/2015 http://blog.kerul.net 20

Test running ant

16/4/2015 http://blog.kerul.net 21

Download Cordova Update nodejs

npm update

Install Apache Cordova

npm install –g cordova

16/4/2015 http://blog.kerul.net 22

16/4/2015 http://blog.kerul.net 23

Generate Android Project

16/4/2015 http://blog.kerul.net 24

16/4/2015 http://blog.kerul.net 25

16/4/2015 http://blog.kerul.net 26

16/4/2015 http://blog.kerul.net 27

16/4/2015 http://blog.kerul.net 28

16/4/2015 http://blog.kerul.net 29

Open Android project in

Android Studio

16/4/2015 http://blog.kerul.net 30

Change ic_launcher

Res/drawable

16/4/2015 http://blog.kerul.net 31

Turn ON the AVD

16/4/2015 http://blog.kerul.net 32

Test APK on Emulator

Complete guide: http://blog.kerul.net/2015/04/android-studio-to-generate-signed-apk.html

16/4/2015 http://blog.kerul.net 33

Sign APK

Preparation

Signed APK

Icon 512x512

2 apps screenshots

Banner 1024 w x 500 h

Apps descriptions

https://play.google.com/apps/publish/

Complete guide: http://blog.kerul.net/2015/04/publishing-apps-to-google-play.html

16/4/2015 http://blog.kerul.net 34

Upload to Google Play

All the best

Check your apps tomorrow

16/4/2015 http://blog.kerul.net 35