HTML5 FOR MOBILE APPS

Oon Arf iandwi <oon@oo.or. id> | ht tp: / /oo.or. id/html5/ / femaledev Dec 14th, 2013

http: / /en.wik ipedia.org/wik i /Fi le:Prambanan_Complex_1. jpg

HELLO WORLD!๏ Hi Female Developers! my name is Oon Arfiandwi

๏ I’m a Mobile Apps Developer & Entrepreneur

๏ CTO & Founder of 7Langit, mobile apps development & agency

๏ Mobile strategist for several startups

๏ Maintain a regular free* class of HTML5 for Mobile Apps

๏ http://about.me/oon

Intro๏ Who wants to develop mobile applications?

๏ What’s the most popular smartphone platform today?

๏ So, what’s the easiest way to develop mobile apps for Android platform?

๏ How about Programming in Java?Or Programming in HTML5 (HTML, CSS, JavaScript)?

the presentation only for

#developers

FILES YOU NEED TO DOWNLOAD

๏ jquery-1.10.2.min.js

๏ jquery.mobile-1.3.2.zip

๏ Java SE 6 (SDK)

๏ apache-ant-1.9.2-bin.zip

๏ Android SDK

๏ phonegap-2.9.0.zip

๏ http://jquery.com/download/

๏ http://jquerymobile.com/download

๏ http://java.sun.com

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

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

๏ http://phonegap.com/install

Outline๏ HTML5 at a glance

๏ Mobile site with jQuery Mobile

๏ Android App with HTML5 & PhoneGap

๏ Working with Opensource HTML5 Mobile App Samples (Github)

๏ Connect Mobile App to WebService (JSON)

๏ Going Multiplatforms with PhoneGap Build

HTML5๏ HTML

๏ JavaScript

๏ jQuery, jQuery Mobile

๏ CSS

๏ Wrappers for Mobile platforms

๏ PhoneGap, Sencha, ...

ht tp: / /html5rocks.comhttp: / /www.cocos2d-x.org/wik i /cocos2d-html5

http: / /people.phonegap.comhttp: / /phonegap.com/case/

ht tp: / /devgir l .org

HTML5 MOBILE APPShttp: / /phonegap.com/about/artwork

jQuery Mobilehttp: / /v iew. jquerymobi le.com/1.3.2/dist /demos/

jQuery Mobile Themehttp: / /oo.or. id/ tags/ theme

PHONEGAP๏ unzip phonegap-2.9.0.zip

๏ import Android code from lib/android/example/

๏ build! run! (on device or simulator)

PHONEGAP, TRY TO CUSTOM THE CODE!

๏ edit file index.html

http: / /oo.or. id/content/how-to-get-device- informat ion-phonegap

PHONEGAP, TRY TO CUSTOM THE CODE!

๏ edit file index.js

http: / /oo.or. id/content/how-to-get-device- informat ion-phonegap

PHONEGAP, TRY TO CUSTOM THE CODE!

http: / /oo.or. id/content/how-to-get-device- informat ion-phonegap

PHONEGAP + JQUERY MOBILE

http: / /oo.or. id/content/hel lo- jquery-mobi le

PHONEGAP + JQUERY MOBILE

http: / /oo.or. id/content/hel lo- jquery-mobi le

SAMPLE #1 HALOACI๏ https://github.com/arfiandwi/haloaci

๏ Open Source Music Mobile App forHaloACI: Album Kompilasi 100Musisi Cinta Indonesia

๏ include 8 .m4a songs inhaloaci/assets/www/audio/

ht tp: / /oo.or. id/ tags/ learn-example

SAMPLE #2 JOGJARADIO

https: / /g i thub.com/arf iandwi/ jogjaradio

SAMPLE #3 DOAMUSLIM

https: / /g i thub.com/arf iandwi/doamusl im

WEBSERVICE SAMPLEWORDPRESS JSON-API

๏ Sample data from WordPress site http://boomee.co

๏ Install WordPress plugin JSON-APIhttp://wordpress.org/plugins/json-api/

WEBSERVICE SAMPLEWORDPRESS JSON-API

WEBSERVICE SAMPLEWORDPRESS JSON-API

๏ http://boomee.oo.or.id/api/get_post/?id=1360

WEBSERVICE SAMPLEWORDPRESS JSON-API

MULTIPLATFORM WITH PHONEGAP BUILD

@femaledev @oonid@7langit+femaledev