0
PhoneGap & PhoneGap BuildMihai Corlan / @mcorlanMulti-Mania.be / 2013
Who I amMihai Corlan / Adobe Evangelist / @mcorlan
Welcome toTransylvania
No Vampires!
We <3 …
Who are you?
Mobile Development1. Native Apps2. Web Apps3. Hybrid Apps@mcorlan
Why would you use PhoneGap? Native Installers -> Application Stores Use standard web technologies@mcorlan
PhoneGap could be your best friend if You want to target multiple mobile platforms You know HTML/JavaScript/CSS Extend ...
Contributors Adobe – of course ;) Microsoft – Windows Phone support BlackBerry - BlackBerry support / Ripple Emulator ...
PhoneGap supports 8 platforms@mcorlan
PhoneGap Plug-ins Extend the built-in functionality with custom plug-ins http://wiki.phonegap.com/w/page/36752779/PhoneG...
Who else is using PhoneGap? SalesForce.com Mobile SDK IBM Worklight Platform SAPSome numbers: ~ 4% apps in iTunes Stor...
Demo@mcorlan
Building PhoneGap Apps@mcorlan
What can you use to build your app?@mcorlan
Untappd@mcorlaniOS Android
Build PhoneGap app as you’d build a regular web app@mcorlan
Creating the native installersThere are 2 different methods: Using the target platform tool chain Using PhoneGap Build –...
Using PhoneGap Build http://build.phonegap.com Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, andSymbian I...
Resources Source code: github.com/phonegap Docs: docs.phonegap.com Wiki: wiki.phonegap.com PhoneGap Build: build.phone...
Questions & Answers!Thank you!Mihai Corlan@mcorlanhttp://corlan.org
PhoneGap Debug http://debug.phonegap.com#CreateTheWeb
PhoneGap Emulate http://emulate.phonegap.com#CreateTheWeb
PhoneGap Build Demo
PhoneGap Build Demo
PhoneGap Build Demo
How does PhoneGap work?PhoneGap App Mobile DevicePhoneGapNativeEnginePhoneGapJavaScriptEngineWeb ViewRenders the app UIAcc...
PhoneGap29ApacheCordova?#CreateTheWeb
Upcoming SlideShare
Loading in...5
×

PhoneGap Session at Multi-Mania.be 2013

1,997

Published on

My PhoneGap session at Multi-Mania.be 2013.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,997
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
131
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Welcome tomysession!
  • We do love love garlic.Lots of garlic.
  • Who does web development?Whois a mobile developer?Who knowswhatPhoneGapis?Who hascreated a PhoneGapapplication?
  • So whatare hybrid apps?In shorttheyarethegeniuschildof Native Apps and Web apps.Theyreallyhavethebeneffitsofthebothworlds.
  • PhoneGap answers another issue many companies / customers / developers have: the ability of distributing web apps through application stores.
  • PhoneGap could be the default option for many application types especially if you want to target multiple platforms, you know web technologies, and you have an existing REST API that you could reuse with your PhoneGap app.
  • What platforms does PhoneGap support?It is the only open source framework that supports 7 platforms AFAIK. From iOS and Android to Windows Phone and BlackBerryHere is a list of built-in out of the box device APIs supported by PhoneGap. It supports accelerometer, all sort of notifications, storage, contacts and file APIs and so forth. Where you see an X the reason is that the device doesn’t have the capability most of times and not a PhoneGap issue. For example there is no accelerometer on on older iPhones.
  • You can write plugins in order to expose additional native features to JavaScript. A plugin has two parts: a native part that exposes the native feature and JavaScript part that provides the API that will be used by the developers who want to consume your plugin.
  • WikipediaUntappdHealth
  • PhoneGap doesn’t provide any UI out of the box. This means that you are free to use whatever you want.You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so onPay attention to performance (mobile vs. desktop)Pay attention to mobile browser features or lack of them (I am talking about SVG)
  • PhoneGap doesn’t provide any UI out of the box. This means that you are free to use whatever you want.You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so onPay attention to performance (mobile vs. desktop)Pay attention to mobile browser features or lack of them (I am talking about SVG)
  • Most of the time you’ll be building your PhoneGap app the same way you build web apps.- Using your favorite editors (Eclipse, vim, Dreamweaver, Visual Studio)- Test and debug the app using your desktop browser- Test and debug the app using mobile simulators/emulators and the physical devices
  • PhoneGap Build is
  • The PhoneGap Emulator allows you to test your PhoneGap application from your desktop browser. PhoneGap&apos;s JavaScript APIs are avaialble using Ripple, so you can subscribe to deviceready and even stub responses for your custom plugins.
  • So how does PhoneGap work? Most mobile platforms offer something called WebView – which is a chromless browser. A full screen browser without location bar, history buttons, without any UI.And using native code this WebView can be extended by exposing device APIs or capabilities to the JavaScript code that runs in this WebView.In this diagram you can see that there is the PhoneGap Native Engine that exposes the native capabilities through a PhoneGap JavaScript API to the application JavaScript. And the application UI is created with HTML/JavaScript/CSS and runs inside the WebViewWebView – chromless browser full screenNative Layer– PhoneGap native engine – PhoneGapJavaScrip APIApplication Files – HTML / JavaScript / CSS
  • Atthispoint I shouldstopandquicklyexplainwhatistherelationbetweenPhoneGapand Apache Cordova.PhoneGap was developedby a smallcompanycalledNitobi. When Adobe boughtthiscompany last year, wereleasedthesourcecodeas an open sourceprojectunder Apache Foundation. Andthenameofthisproject was changedfromPhoneGaptoCordova. Ofcourse Adobe continuestobeoneofthemaincontributorstogetherwithothercompanieslike IBM, RIM, or Microsoft.Today PhoneGapisthenameofAdobe‘sCordovadistribution.
  • Transcript of "PhoneGap Session at Multi-Mania.be 2013"

    1. 1. PhoneGap & PhoneGap BuildMihai Corlan / @mcorlanMulti-Mania.be / 2013
    2. 2. Who I amMihai Corlan / Adobe Evangelist / @mcorlan
    3. 3. Welcome toTransylvania
    4. 4. No Vampires!
    5. 5. We <3 …
    6. 6. Who are you?
    7. 7. Mobile Development1. Native Apps2. Web Apps3. Hybrid Apps@mcorlan
    8. 8. Why would you use PhoneGap? Native Installers -> Application Stores Use standard web technologies@mcorlan
    9. 9. PhoneGap could be your best friend if You want to target multiple mobile platforms You know HTML/JavaScript/CSS Extend existing in-browser apps with native features Data-centric apps, social networking, simple games@mcorlan
    10. 10. Contributors Adobe – of course ;) Microsoft – Windows Phone support BlackBerry - BlackBerry support / Ripple Emulator IBM@mcorlan
    11. 11. PhoneGap supports 8 platforms@mcorlan
    12. 12. PhoneGap Plug-ins Extend the built-in functionality with custom plug-ins http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins Examples: https://github.com/phonegap/phonegap-plugins Delegate heavyweight data processing to native code Create background services@mcorlan
    13. 13. Who else is using PhoneGap? SalesForce.com Mobile SDK IBM Worklight Platform SAPSome numbers: ~ 4% apps in iTunes Store use PhoneGap (Sep 2011) ~ 100,000 monthly downloads of PhoneGap SDK@mcorlan
    14. 14. Demo@mcorlan
    15. 15. Building PhoneGap Apps@mcorlan
    16. 16. What can you use to build your app?@mcorlan
    17. 17. Untappd@mcorlaniOS Android
    18. 18. Build PhoneGap app as you’d build a regular web app@mcorlan
    19. 19. Creating the native installersThere are 2 different methods: Using the target platform tool chain Using PhoneGap Build – a cloud service@mcorlan
    20. 20. Using PhoneGap Build http://build.phonegap.com Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, andSymbian It is in beta and it is free; it will always be free for Open Source projects You upload your files (index.html, CSS, JS, images) Or you provide a Git / SVN link@mcorlan
    21. 21. Resources Source code: github.com/phonegap Docs: docs.phonegap.com Wiki: wiki.phonegap.com PhoneGap Build: build.phonegap.com PhoneGap Emulate: emulate.phonegap.com Plugins: github.com/phonegap/phonegap-plugins Support: groups.google.com/group/phonegap IRC: irc.freenode.net #phonegap Apps: phonegap.com/apps Bugs: issues.apache.org/jira/browse/CB@mcorlan
    22. 22. Questions & Answers!Thank you!Mihai Corlan@mcorlanhttp://corlan.org
    23. 23. PhoneGap Debug http://debug.phonegap.com#CreateTheWeb
    24. 24. PhoneGap Emulate http://emulate.phonegap.com#CreateTheWeb
    25. 25. PhoneGap Build Demo
    26. 26. PhoneGap Build Demo
    27. 27. PhoneGap Build Demo
    28. 28. How does PhoneGap work?PhoneGap App Mobile DevicePhoneGapNativeEnginePhoneGapJavaScriptEngineWeb ViewRenders the app UIAccess tonativemobilefeaturesYour CodeHTML/JavaScript/CSS/Images/Frameworks/Libraries
    29. 29. PhoneGap29ApacheCordova?#CreateTheWeb
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×