Intro to PhoneGap
Upcoming SlideShare
Loading in...5
×
 

Intro to PhoneGap

on

  • 1,382 views

 

Statistics

Views

Total Views
1,382
Views on SlideShare
1,382
Embed Views
0

Actions

Likes
3
Downloads
28
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://sarthony.deviantart.com/art/Two-worlds-76448188?q=boost%3Apopular%20two%20worlds&qo=45\n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • https://github.com/callback/phonegap\n\n
  • \n

Intro to PhoneGap Intro to PhoneGap Presentation Transcript

  • Developing with PhonegapBuilding mobile applications with HTML/JS
  • Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
  • Why PhoneGap?
  • The moral reason:The web is awesome
  • The realistic reason: Cross platformapplications with HTML/CSS/JS will be faster and easier
  • What is PhoneGap?
  • Your Code
  • Your CodeNative Web View
  • Your CodeNative Web View Native APIs
  • Your Code Native Web View Native APIsNative App - .apk, .ipa, etc
  • PhoneGap uses the native browseron the device to render the HTML/ CSS/JS Keep in mind that can affect theexperience. It also keeps apps nice and small
  • PhoneGap uses thenative projectformat for eachplatform.Open, emulate,and test fromwithin the nativedevelopmentenvironment!
  • Because it’s usingthe native projectsit’s fullyextendable.
  • PhoneGap providesa JavaScript Librarythat reaches outinto the nativeAPIs.That meansanything thedevice supports isdoable.
  • PhoneGap iscompletely opensource and is partof the Apachefoundation.
  • The entire projectis available onGithubhttps://github.com/cordova
  • Getting Started
  • bin/create /Developer/Sites/demoapp com.digitalbackcountry DemoApp
  • Demo:Hello World
  • Quick segue: mobile web apps versusmobile applications
  • Very important tokeep in mind thatwe’re building amobile app, not amobile web app.Let’s look atjQuery Mobile
  • You can use ANYframework youwant, but try todesign for an app.
  • Diving into thePhoneGap APIs
  • - Accelerometer - Camera - CaptureOut of the box, - Compass - ConnectionPhoneGap - Contacts - Deviceprovides support - Eventsfor a number of - - File Geolocationbasic device APIs - - Media Network - Notification - Storage
  • capturePhotoEdit: function() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); },Camera API onPhotoDataSucess: function(imageData) { var smallImage = document.getElementById(smallImage);example smallImage.style.display = block; smallImage.src = "data:image/jpeg;base64," + imageData; }, onFail: function(message) { alert(Failed because: + message); }
  • Demo:PhoneGap API Explorer
  • Debugging
  • It’s all just HTML/JS, so you can useyour browser!Take advantage ofChrome Developertools/Firebug totest your app’s UI.
  • But what about Device APIs?Because we’re in the web view, there is no way to do line-by-line debugging.
  • Luckily we haveWeinre, which letsus debug andmanipulate theDOM from our PCs.
  • Weinre is built withnode.JS and acts asa server and usesthe developer toolsfrom Chrome toprovide hooks intothe mobile app.
  • Drop in a <script>tag on a remoteserver and Weinrewill let you use theDeveloper Tools onyour apps.Requires internetaccess, so keepthat in mind.
  • But, a much easier way:http://debug.phonegap.com/
  • Demo:debug.phonegap
  • Extending Phonegap
  • For addedfunctionalityPhoneGap providesa plug-inmechanism.Includes OS-specific code/libraries and the JSto use it inPhoneGapSome of thehelpful ones:PayPal, Facebook,Push Notification
  • Plug-is are one ofthe areas thatshow off the powerof a hybrid web/native approach.There are a ton ofnative-centricSDKs (likeFacebook) thatprovide a greatnative experience.We can use those!
  • Available athttps://github.com/phonegap/phonegap-plugins
  • FinalConsiderations
  • Remember that we’re on different platforms
  • Versus http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.html
  • Demo:PhoneGap in Action
  • DeployingPhoneGap Apps
  • build.phonegap.com
  • The Problem:You’re building a cross-platform app, but dealing with a lot of native projects
  • The Solution: PhoneGap Build - create distributionbinaries for multiple platforms in one place
  • Build includes gitsupport so you canuse git and hostprojects onPhoneGap or builda project fromGithub.
  • Build lets youdefine individualsas tester/developerwhich changespermissions on theprojectaccordingly.
  • You can use Build as your testingdistribution as well by making the download pages public.
  • Will (soon) supportpopular plugins sothat you can buildplugins right intothe build process.
  • Supports multiplePhoneGap versionsso you can target awide range ofdevices.
  • Demo:PhoneGap Build
  • Q&A Ryan Stewart Web Developer Advocate, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart