Your SlideShare is downloading. ×
Seminar Android - Pengenalan PhoneGap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Seminar Android - Pengenalan PhoneGap

488

Published on

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

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

Published in: Mobile, Technology, Education
1 Comment
2 Likes
Statistics
Notes
  • mantaap om Nur
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
488
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Sebelum masuk ke dunia mobile apps, sebelumnya kita harus tahu medan terlebih dahulu, dan harus tahu peluang macam apa yang bisa kita manfaatkan
  • Berikut ini adalah data penetrasi pengguna smartphone di sejumlah negara, Siapa yang tahu berapa jumlah pengguna smartphone di Indonesia?

    Data pengguna smartphone di sejumlah negara, pengguna smartphone di Indonesia pada tahun 2012 hanya 14% saja dari seluruh handphone yang ada di Indonesia. Tingak daya beli masyarakat yang terus meningkat bisa mendorong peningkatan pengguna dalam beberapa tahun ke depan.
  • Berikut ini data pertumbuhan pengguna smartphone di Asia Pasifik. Terlihat bahwa Indonesia adalah negara kedua dengan pertumbuhan pengguna smartphone terbesar. Jelas saja karena umumnya orang Indonesia punya lebih dari satu nomor, dan biasanya juga punya lebih dari satu smartphone, misalkan satu BlackBerry dan satu Android.

    Dan bisa kita lihat bahwa negara dengan penetrasi pengguna smartphone terkecil justru memiliki pertumbuhan yang tinggi bahkan melebihi rata-rata-rata pertumbuhan global. Artinya kita bisa memastikan hanya masalah waktu saja bahwa dalam beberapa tahun ke depan, Indonesia dan India akan melampaui penetrasi negara-negara lain.
  • Siapa di antara kalian yang sudah mencoba membuat aplikasi mobile?
    Atau…. Sudah berencana membuat aplikasi mobile?

    Berita baiknya adalah…. Semakin lama serang memiliki smartphone, maka semakin lama juga dia akan menghabiskan waktunya memainkan aplikasi mobile…. Perlu bukti? Jawab pertanyaan ini, apa yang dilakukan pertama kali saat bangun tidur? Kalian lebih memilih mana, ketinggalan dompet atau ketinggalan hape?

    Fakta membuktikan bahwa kita pengguna smartphone menghabiskan waktu lebih banyak di aplikasi mobile dibandingkan mobile website, dan coba tebak aplikasi mobile apa yang paling banyak diunduh?

    Gak perlu tebak-tebak buah manggis, jawabannya ada di slide 
  • Salah satu kendala performance dikarenakan adanya satu layer tambahan berupa HTML Rendering Engine (WebView)
  • As the name states “Front-End” is the part of the code that is on the front of the application. It is usually visible to user in the form of an interface inviting to interact with user. The main purpose of the front-end code is to interact with user, as well as present the data in a well-defined style and matter.

    Everything that your eye sees on the web is the mix of HTML, CSS and JavaScripts.

    HTML (or Hyper Text Markup Language) is responsible for creating a markup of your website and letting the browser read it and display it correctly.

    CSS (Cascading Style Sheets) is the place where we bring all the colors, backgrounds, font sizes etc. to life.

    JavaScript is the most advanced language of all three which enables us to interact with user in form of sliders, drop-down menus, quizzes, and many more interactive elements where sky is the limit.

    The front-end developer is the bridge connecting the designer and back-end developer. The developer’s work is to take the final designs of an application from the designer, and code it into the front-end code so the back-end developer can understand it and build functionality of that app around it.

    Besides main elements in front-end environment, we currently have many libraries and frameworks making our code and life easier. It all depends on the needs of the project and client if we are going to use jQuery (JavaScript library), Less (CSS library), Bootstrap (Front-End framework) or any of the different ones that are coming out every day.

    - See more at: http://manningdigital.com/blog/2014/01/23/difference-between-front-end-and-back-end-development#sthash.ipX9BwkE.dpuf
  • UI Framework digunakan untuk mempermudah kita membuat tampilan dalam HTML5 + CSS3
  • Theming dengan bantuan CSS
  • Transcript

    • 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

    ×