Seminar Android - Pengenalan PhoneGap

1,116 views

Published on

Slide Presentasi Seminar Android di Univ Mercu Buana Jakarta - Pengenalan PhoneGap

Published in: Mobile, Technology, Education
  • mantaap om Nur
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Seminar Android - Pengenalan PhoneGap

  1. 1. ANDROID APPLICATION DEVELOPMENT Pengenalan Phonegap dalam Pembuatan Aplikasi Mobile Multiplatform
  2. 2. ABOUT ME  Editor PojokProgrammer.net  Writers Welcome!  CEO BiruniLabs  Trainers Welcome!
  3. 3. BRAIN GYM
  4. 4. ARE YOU READY ?
  5. 5. OVERVIEW
  6. 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. 7. PENETRASI SMARTPHONE 0% 10% 20% 30% 40% 50% 60% 70% 80% Smartphone User Growth 2013 SOURCE: EMARKETER, MAY2013
  8. 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. 9. DEVELOPING MOBILE APPS
  10. 10. NATIVE VS CROSS PLATFORM
  11. 11. NATIVE
  12. 12. CROSS PLATFORM
  13. 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. 14. CROSS PLATFORM Kekurangan  performance  lack of widget UI  Identical UX on all platforms  larger executable size  Less support for device capabilities
  15. 15. SILAKAN PILIH
  16. 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. 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. 18. CORDOVA VS PHONEGAP
  19. 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. 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. 21. SUPPORTED PLATFORM  iOS  Android  Windows 8  Windows Phone 7 and 8  BlackBerry 5.x+  WebOS  Symbian  Tizen  Ubuntu
  22. 22. ARSITEKTUR PHONEGAP
  23. 23. FRONT-END DEVELOPMENT  Visible to User  Interact with User  Presenting Data in well defined style  HTML  CSS  JavaScript
  24. 24. UI FRAMEWORK
  25. 25. JQUERY MOBILE – SAMPLE CODE
  26. 26. SENCHA TOUCH – SAMPLE CODE
  27. 27. UI FRAMEWORK - ALTERNATIF  jQuery Mobile  jQTouch  Ionic  Sencha Touch  Kendo UI Complete  AppGyver’s Steroids  Bootstrap  Html5Boilerplate  DojoMobile
  28. 28. EXPLORE  jQuery Mobile  http://jquerymobile.com/demos/  Sencha Touch  https://www.sencha.com/products/touch/demos/  Ionic Framework  http://showcase.ionicframework.com/
  29. 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. 30. RICH JAVASCRIPT APPLICATIONS  Single Page WebApp  BackboneJS  AngularJS  KnockoutJS  EmberJS
  31. 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. 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. 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. 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. 35. PERBANDINGAN KnckoutJS BackboneJS AngulartJS EmberJS
  36. 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. 37. MONETIZING  Advertisement  Paid Apps  In-App Purchase  Freemium
  38. 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. 39. ADA PERTANYAAN?
  40. 40. THANK YOU Questions and Answers

×