Embed Size (px)
DESCRIPTION
Presented at Google I/O Extended Brunei 2012
Citation preview
So You Want to Develop on Android...
Timothy Lim @thewheatthewheatfield.org /cornergeeks.com
Downloads:http://tiny.cc/googleiobn
http://db.tt/kS08Pb6s
Overview
● apk = exe / dmg / tar.gz○ We're pirates! ○ Portable & Transferable
●●●● Permissions
○ Don't freak out the user○ AndroidManifest.xml
Overview
HC/ICS emulators scare me○ Get an Android device & download USB drivers now
http://developer.android.com/tools/extras/oem-usb.html
●● So many pixels
○ so many platforms○ so little time
■ Android 2.2■ HVGA (480x320)
●
Get the Tools!
● SDK http://developers.android.com○ tools to transfer apk to device○ different Android platforms (1.x,2.x,...) & emulator
●● Eclipse http://eclipse.org
○ Android Development Tools (ADT) plugin
●● PhoneGap http://phonegap.com
○ Mobile cross development platform○ i.e. we don't need no Java! (ok maybe a little)
●
● HTML & Javascript based○ Easy & Familiar (if not get familiar)○ Exposes device features via Javascript objects
●● Quick design & prototyping
○ all in the browser●● Cross platform●● Translatable skills●●●
Why PhoneGap?
PhoneGap Sample - Starting Upassets/www/index.html
Start something when app is loaded●
<body onload="onLoad()">-------------------------------------------------------
function onLoad() {document.addEventListener("deviceready",
onDeviceReady, false);}function onDeviceReady(){
initializeMapICentre();}
●
PhoneGap Sample - Interactivity<a href="#" onclick="mediaPlay()" id="lnk_play"> <img id="play" src="images/play.png"></a>-------------------------------------------------------function mediaPlay() {
if (!mediaPlaying) {... myAudio = new Media(URL_STREAM); myAudio.play();
mediaPlaying = true; ...} else {
... myAudio.stop(); mediaPlaying = false; ...
}}
●●
PhoneGap Sample - jQuery
jQuery makes things easier-- Before jQuery executes -----------------------------------
<div id="aLink">hello</div><span class='foo'>ice</span><span class='foo'>cream</span><span class='foo'>sandwich</span>
●-- Do jQuery -------------------------------------------------$("#aLink").html("<a href='http://google.com'>Google</a>");$(".foo").text("jelly"); $(".foo").eq(1).text("bean");
●-- After jQuery executes ------------------------------------
<div id="aLink"><a href='http://google.com'>Google</a></div>
<span class='foo'>jelly</span><span class='foo'>bean</span><span class='foo'>jelly</span>
PhoneGap Sample - AJAX// retrieve a webpage via PhoneGap // not really applicable in normal AJAX calls, i.e. can't test in browser
●$.get(url, function(data){
// data contains page source code// process via Javascriptvar pos_end = data.indexOf(" like");var pos_start = data.indexOf(">", pos_end - 10);$("#divContent").text(data.substring(pos_start+1, pos_end) + " likes");
});
● Your browser's BFFs○ View source○ Right click > Inspect element
(Chrome/Chromium/Firefox with Firebug/Opera)○ WYSI(NOT)WYG
■ Facebook / Twitter
PhoneGap Sample - jQuery$.get(url, function(data){
// process via jQueryvar element = $("<div></div>").append(data); var msg = '';element.find(".tweets").each(function(i){msg += $(this).find(".tweet-text").text() + "<hr>";
});$("#divContent").html(msg);
});
●● Doh!
○ <script> in data messes things up○ White screen of death
● Don't waste time. Ask help / find alternative
Hackaway
● Make an app!○ No limitations○ Brunei site tie-in possibilities
■ Brunei Post Office - online services■ Borneo Bulletin
● Possible features:○ Map○ Tweet list○ Facebook
● Upload your code to GitHub
● PhoneGap○ http://phonegap.com
● jQuery○ http://jquery.com
● Github○ https://github.com○ https://github.com/thewheat/PhoneGapSample
● Artwork acknowledgements○ CC-BY-NC: http://phonegap.com/artwork/○ CC: http://android.com/developers/branding.html
● Illumination Software Creator○ http://lunduke.com
●
Links & Stuff
Installing the Tools (Windows)
● c:\android○ readme.txt
● SDK○ install 1..*.exe to c:
\android\sdk○ unzip updates in c:
\android\sdk■ 2...*.zip (platform
tools)■ 3...*.zip (Android
2.2 files)
● Eclipse ○ unzip 4....*.zip to c:
\eclipse (Eclipse Classic 3.7.2 with updates)
○ install ADT●● PhoneGap
○ http://phonegap.com○ unzip to c:\android
●
