femaledev -- html5 mobile apps
DESCRIPTION
My Presentation today at FemaleDev Workshop event. held by GSA University of Indonesia & FemaleDev, on Fasilkom UI. Oct 26th, 2013. At the FemaleDev workshop, all the audience are women developers. The presentation is about how to develop mobile application using HTML5 technology. The target is not (only) to make multiplatforms smartphone mobile application, but most important is how any person can start making mobile application in easy way. This is part of my #mobilisasi campaign, attract people from any background to start make their own mobile application. http://oo.or.id/html5 http://femaledev.comTRANSCRIPT
HTML5 FOR MOBILE APPS
Oon Arf iandwi <[email protected]. 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