Embed Size (px)
Citation preview
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
