1.
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

2.
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
 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

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

4.
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

5.
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

6.
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

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

8.
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

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

10.
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

11.
Android Studio
 Download from
http://developer.android.com/sdk/index.html
16/4/2015 http://blog.kerul.net 11

12.
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

13.
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

14.
Environment Variables
 Right-click on MyComputer ->
Properties
16/4/2015 http://blog.kerul.net 14

15.
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

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

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

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

19.
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

20.
Cmd line
 To run ant commands
 Search for CMD, right-click and Run as
administrator
16/4/2015 http://blog.kerul.net 20

21.
Test running ant
16/4/2015 http://blog.kerul.net 21

22.
Download Cordova
 Update nodejs
npm update
 Install Apache Cordova
npm install –g cordova
16/4/2015 http://blog.kerul.net 22

23.
16/4/2015 http://blog.kerul.net 23
Generate Android Project

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

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

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

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

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

29.
16/4/2015 http://blog.kerul.net 29
Open Android project in
Android Studio

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

31.
Change ic_launcher
 Res/drawable
16/4/2015 http://blog.kerul.net 31

32.
 Turn ON the AVD
16/4/2015 http://blog.kerul.net 32
Test APK on Emulator

33.
 Complete guide: http://blog.kerul.net/2015/04/android-
studio-to-generate-signed-apk.html16/4/2015 http://blog.kerul.net 33
Sign APK

34.
 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

35.
All the best
 Check your apps tomorrow
16/4/2015 http://blog.kerul.net 35