Seminar Android - Pengenalan PhoneGap

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

Seminar Android - Pengenalan PhoneGap

Mobile

declarative

apache cordova

phonegap

page

cordova

jquery

nitobi

view