This document provides an overview of PhoneGap, a framework for building mobile apps using HTML, CSS, and JavaScript. It discusses how PhoneGap works, supported platforms, architecture, and front-end development. UI frameworks like jQuery Mobile and Sencha Touch are presented. It also covers single page apps using JavaScript libraries like AngularJS, BackboneJS, KnockoutJS and EmberJS. Monetization strategies for PhoneGap apps are briefly mentioned. The document concludes by encouraging selecting a problem to solve, finding the right solution, building a strong team, and focused execution to develop and launch a great mobile product.

1. ANDROID APPLICATION
DEVELOPMENT
Pengenalan Phonegap dalam
Pembuatan Aplikasi Mobile
Multiplatform

2. ABOUT ME
 Editor PojokProgrammer.net
 Writers Welcome!
 CEO BiruniLabs
 Trainers Welcome!

3. BRAIN
GYM

4. ARE YOU READY ?

5. OVERVIEW

6. PENGGUNA SMARTPHONE
0
10
20
30
40
50
60
70
80
UAE
Korea
SaudiArabia
Singapore
Norway
Australia
Sweden
HongKong
UK
Denmark
Ireland
Israel
Canada
USA
Spain
Switzerland
NewZealand
Netherlands
Taiwan
Austria
China
Slovakia
Finland
France
CzechRepublic
Italy
Germany
SouthAfrica
Philippines
Mexico
Russia
Poland
Malaysia
Hungary
Belgium
Greece
Portugal
Thailand
Argentina
Turkey
Romania
Brazil
Japan
Vietnam
Ukraine
Indonesia
India
SOURCE: OUR MOBILE PLANET

7. PENETRASI SMARTPHONE
0%
10%
20%
30%
40%
50%
60%
70%
80%
Smartphone User Growth 2013
SOURCE: EMARKETER, MAY2013

8. APPS LEBIH DISUKAI
Total mobile app and web duration on Android and iOS
0
20
40
60
80
100
120
140
160
Mar-11 Jul-11 Nov-11 Mar-12 Jul-12
Minutesspentpermonth(billions)
33%
Games
Smartphone app
downloads worldwide,
by category, 2012
8%
Widgets
7%
Entertainment
5%
Social
Mobile web
Apps
SOURCE: NIELSEN SMARTPHONE ANALYTICS, DISTIMO, “2012 YEAR IN REVIEW ,”
DEC 21, 2012

9. DEVELOPING MOBILE APPS

10. NATIVE VS CROSS PLATFORM

11. NATIVE

12. CROSS PLATFORM

13. CROSS PLATFORM
Kelebihan
 write one application
 support different mobile
platforms and web
 exploit knowledge of web
technologies
 can use sensors and native
features of the phone

14. CROSS PLATFORM
Kekurangan
 performance
 lack of widget UI
 Identical UX on all
platforms
 larger executable size
 Less support for device
capabilities

15. SILAKAN PILIH

16. ALTERNATIF
PhoneGap (HTML/JS)
 http://phonegap.com
Appcelerator Titanium (JS)
 http://www.appcelerator.com/platform
Corona SDK (lua)
 http://www.coronalabs.com/products/corona-sdk/
Marmalade (Visual C++)
 http://www.madewithmarmalade.com

17. PHONEGAP APAAN SIH?
 PhoneGap was originally developed by Nitobi, a company
acquired by Adobe in 2011. After it was acquired, Nitobi
donated the PhoneGap code base to the Apache
Software Foundation (ASF) under the project name
Cordova.
 Cordova is the name of the street inVancouver where
Nitobi's offices were located and where the company
create the first version of framework

18. CORDOVA VS PHONEGAP

19. CORDOVA VS PHONEGAP
 PhoneGap is a distribution of Apache Cordova.You can think of Apache
Cordova as the engine that powers PhoneGap
 Similar to howWebKit is the engine that powers Chrome or Safari.
 Also Similar to Debian, RedHat, CentOS, Ubuntu, Mint, etc. as distribution of
Linux Operating System

20. PHONEGAP
PhoneGap is a free and open source framework
that allows you to create mobile apps with html, css
and javascript.
Think of PhoneGap as a web view container that is
100% width and 100% height

21. SUPPORTED PLATFORM
 iOS
 Android
 Windows 8
 Windows Phone 7 and 8
 BlackBerry 5.x+
 WebOS
 Symbian
 Tizen
 Ubuntu

22. ARSITEKTUR PHONEGAP

23. FRONT-END DEVELOPMENT
 Visible to User
 Interact with User
 Presenting Data in well defined style
 HTML
 CSS
 JavaScript

24. UI FRAMEWORK

25. JQUERY MOBILE – SAMPLE CODE

26. SENCHA TOUCH – SAMPLE CODE

27. UI FRAMEWORK - ALTERNATIF
 jQuery Mobile
 jQTouch
 Ionic
 Sencha Touch
 Kendo UI Complete
 AppGyver’s Steroids
 Bootstrap
 Html5Boilerplate
 DojoMobile

28. EXPLORE
 jQuery Mobile
 http://jquerymobile.com/demos/
 Sencha Touch
 https://www.sencha.com/products/touch/demos/
 Ionic Framework
 http://showcase.ionicframework.com/

29. MULTI PAGE VS SINGLE PAGE
 We all use jQuery and love it, but I will not advise the use of
jQuery when building a multi-page app.Also, if the jQuery library
is downloaded once, the file is parsed each time it's included in
an HTML page.
 Performance on mobiles is crucial. If you don't seriously consider
optimizing each aspect of your app, you risk losing users. Bad
performance can also lead to high battery consumption.
 Use Single Page Web App when
 frequently navigation
 the pages change partially
 critical performance

30. RICH JAVASCRIPT APPLICATIONS
 Single Page WebApp
 BackboneJS
 AngularJS
 KnockoutJS
 EmberJS

31. KNOCKOUT JS
 Model-View-ViewModel (MVVM) in JavaScript, MIT licensed
 Tightly focused on rich UIs: DOM-based templates with
declarative bindings, and observable models with automatic
dependency detection
 Not opinionated about URL routing or data access —
combines with arbitrary third-party libraries (e.g., Sammy.js
for routing and plain ajax for storage)
 Big focus on approachability, with extensive documentation
and interactive examples

32. BACKBONE JS
 Model-View-Presenter in JavaScript, MIT licensed
 Most minimal of all the libraries — only one file, 800 lines of
code!
 Extremely tightly-scoped functionality — just provides
REST-persistable models with simple routing and callbacks
so you know when to render views (you supply your own
view-rendering mechanism).
 The best-known of them all, with the most production
deployments on big-name sites (perhaps easy to adopt
because it’s so minimal)

33. ANGULAR JS
 Model-View-Whatever in JavaScript, MIT licensed
 DOM-based templating with observability, declarative
bindings, and an almost-MVVM code style (they say Model-
View-Whatever)
 Basic URL routing and data persistence built in
 Tooling: they ship a Chrome debugger plugin that lets you
explore your models while debugging, and a plugin for the
Jasmine testing framework.

34. EMBER JS
 Everything you need to build an “ambitious web application”, MIT license
 Biggest framework of them all in both functionality and code size
 Lots of thought has gone into how you can decompose your page into a
hierarchy of controls, and how this ties in with a statemachine-powered
hierarchical routing system
 Very sophisticated data access library (Ember.Data) currently in
development
 Intended to control your whole page at runtime, so not suitable for use in
small “islands of richness” on a wider page
 Pretty heavily opinionated about files, URLs, etc., but everything is
overridable if you know how
 Design inspired by Rails and Cocoa
 Tooling:They supply project templates for Rails (but you can use other
server platforms if you write the code manually)

35. PERBANDINGAN
KnckoutJS BackboneJS
AngulartJS EmberJS

36. GAMES PAKAI HTML? BISA!
 The HTML using divs and background images.
 The moving animations are made with CSS transitions
 The sprites are animated with CSS keyframes
 The best score is saved with LocalStorage
http://phonegap.com/blog/2013/01/18
/my-first-mobile-game-in-html-with-
phonegap-build/

37. MONETIZING
 Advertisement
 Paid Apps
 In-App Purchase
 Freemium

38. SO…. WHAT NEXT?
1. Select a real problem you're passionate
about
2. Find the right solution
3. Build a strong team
4. Develop a great product
5. Launch with laser focused execution

39. ADA PERTANYAAN?

40. THANK YOU
Questions and Answers