Seminar Android - Pengenalan PhoneGap
Preview:
DESCRIPTION
Slide Presentasi Seminar Android di Univ Mercu Buana Jakarta - Pengenalan PhoneGap
Citation preview
- ANDROID APPLICATION DEVELOPMENT Pengenalan Phonegap dalam
Pembuatan Aplikasi Mobile Multiplatform
- ABOUT ME Editor PojokProgrammer.net Writers Welcome! CEO
BiruniLabs Trainers Welcome!
- BRAIN GYM
- ARE YOU READY ?
- OVERVIEW
- 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
- PENETRASI SMARTPHONE 0% 10% 20% 30% 40% 50% 60% 70% 80%
Smartphone User Growth 2013 SOURCE: EMARKETER, MAY2013
- 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
- DEVELOPING MOBILE APPS
- NATIVE VS CROSS PLATFORM
- NATIVE
- CROSS PLATFORM
- 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
- CROSS PLATFORM Kekurangan performance lack of widget UI
Identical UX on all platforms larger executable size Less support
for device capabilities
- SILAKAN PILIH
- 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
- 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
- CORDOVA VS PHONEGAP
- 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
- 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
- SUPPORTED PLATFORM iOS Android Windows 8 Windows Phone 7 and 8
BlackBerry 5.x+ WebOS Symbian Tizen Ubuntu
- ARSITEKTUR PHONEGAP
- FRONT-END DEVELOPMENT Visible to User Interact with User
Presenting Data in well defined style HTML CSS JavaScript
- UI FRAMEWORK
- JQUERY MOBILE SAMPLE CODE
- SENCHA TOUCH SAMPLE CODE
- UI FRAMEWORK - ALTERNATIF jQuery Mobile jQTouch Ionic Sencha
Touch Kendo UI Complete AppGyvers Steroids Bootstrap
Html5Boilerplate DojoMobile
- EXPLORE jQuery Mobile http://jquerymobile.com/demos/ Sencha
Touch https://www.sencha.com/products/touch/demos/ Ionic Framework
http://showcase.ionicframework.com/
- 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
- RICH JAVASCRIPT APPLICATIONS Single Page WebApp BackboneJS
AngularJS KnockoutJS EmberJS
- 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
- 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 its so
minimal)
- 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.
- 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)
- PERBANDINGAN KnckoutJS BackboneJS AngulartJS EmberJS
- 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/
- MONETIZING Advertisement Paid Apps In-App Purchase
Freemium
- 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
- ADA PERTANYAAN?
- THANK YOU Questions and Answers