SlideShare a Scribd company logo
1 of 48
Download to read offline
PhoneGap in a Day
with Troy Miles aka @therockncoder
Monday, June 3, 13
Free mobile tutorials with source
code @ therockncoder.blogspot.com
Monday, June 3, 13
Want more? Follow me, new tutorials are
announced on Twitter first:
@therockncoder
Monday, June 3, 13
Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder
Monday, June 3, 13
Check out my videos:
www.youtube.com/rockncoder
Monday, June 3, 13
Schedule
• 8:00 Morning Session 1
• 10:00 Break
• 10:15 Morning Session 2
• 12:00 Lunch
• 12:45 Afternoon Session 1
Monday, June 3, 13
Schedule
• 2:45 Break
• 3:00 Afternoon Session 2
• 4:45 Wrap Up
Monday, June 3, 13
Where Is?
• Water
• Restrooms
Monday, June 3, 13
Agenda
• Setup
• Introduction to PhoneGap
• JavaScript Best Practices
• Using Libraries
• Ajax
• Location & Maps
Monday, June 3, 13
Agenda
• Media
• Storage
• User Interface
• Icons & Splash Pages
• Performance Tips
Monday, June 3, 13
How We Will Progress
• Show a Few Slides
• Show Some Code
• LetYou Have a Turn
• Back to Slides
Monday, June 3, 13
The Apps
• Calculator
• Camera
• Compass
• Coffee + Coffee
• Touch Paint
Monday, June 3, 13
Setup Android
• Java SE 6u45 (not 7)
• Android Developer Tools
• Intellij IDEA 12 CE
Monday, June 3, 13
Build an Android App
Monday, June 3, 13
Setup PhoneGap
• Apache Ant 1.9.1
• PhoneGap 2.7.0
Monday, June 3, 13
Build a PhoneGap App
Monday, June 3, 13
Android Alphabet Soup
• ADB - Android Debug Bridge
• ADT - Android Developer Tools
• AVD Manager - AndroidVirtual Device
• DDMS - Dalvik Debug Monitor Server
• SDK Manager - Software Development Kit
Monday, June 3, 13
PhoneGap
Monday, June 3, 13
History
• Create by Nitobi in 2009 at an Apple Event
• Nitobi Acquired by Adobe
• Open Sourced as Apache Cordova
• PhoneGap is only one implementation
Monday, June 3, 13
Other Cordova
Implementations
• appMobi
• Convertigo
• Icenium (Telerik)
• ViziApps
• Worklight (IBM)
Monday, June 3, 13
Intro to PhoneGap
• What the heck is it?
• How it works?
Monday, June 3, 13
What the Heck is it?
• Think of it as a web site wrapped by an
mobile app
• Rather HTML or HTML5, more like HTML6
Monday, June 3, 13
How it Works?
• Most device APIs include an internal web
browser
• PhoneGap uses this internal web browser
as its app canvas
• It adds more features to the navigator via
software which bridges the gap between
the internal web and the device
Monday, June 3, 13
PhoneGap
• Current release is 2.7.0
• New release every few months
• Last few have been mainly bug fixes
• Recommend not upgrading your app to a
new version right away
Monday, June 3, 13
JavaScript Best
Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns
Monday, June 3, 13
Avoid Sloppy JavaScript
• JavaScript is a Harsh Mistress
• Always use ‘===’ & ‘!==’
• Code in JavaScript not C#, Java, Ruby, etc.
• Use JSLint or JSHint
Monday, June 3, 13
Avoid the Global Space
• Minimize Use of GlobalVariables
• Use Namespacing
• Use Anonymous/Immediate Functions
When Appropriate
Monday, June 3, 13
Use Design Patterns
• Singleton
• Chaining
•Revealing Module Structure
• + many more
Monday, June 3, 13
JavaScript Tips
• Functions
• Objects
• Events
Monday, June 3, 13
Functions
• Functions are first class type
• Like other types they can be passed and
assigned freely
• Anonymous functions are used frequently
Monday, June 3, 13
Objects
• Thing of JavaScript Objects like Key/Value
dictionary
• The Key can be anything when wrapped in
quotes
• TheValue can be any type including a
function
Monday, June 3, 13
Events
• Events allow for excellent separation of
concerns
• You can listen for system events or
• Trigger and respond to your own
• Many external libraries will communicate
via events
Monday, June 3, 13
Libraries
• jQuery - DOM manipulation / Ajax
• jQuery Mobile - Mobile UI
• zepto.js - lightweighter substitute for
jQuery
• underscore.js - utility belt library
• backbone.js - client side framework
Monday, June 3, 13
PGDCalculator
• Single Page App
• Uses jQuery Mobile for UI
• Hooks jQuery Mobile Events
Monday, June 3, 13
PGDCalculator
• HTML/jQuery Mobile UI
• My JQM Kernel to Dispatch Events
• JavaScript Logic
Monday, June 3, 13
Your Turn
• Open Project PCDCalculatorEx
• The UI is complete
• The Logic is complete
• Bind the two together, aka make the
buttons work
• Hint: Compare to the working version
Monday, June 3, 13
PGDCompass
• Even simpler than the Calculator
• Uses navigator.compass to supply rotation
value for a CSS3 object
• Only works on devices which have a
compass
Monday, June 3, 13
PGDCoffee
• Fairly Complicated App
• 5 Main Sections: Listings, Map, Settings,
Credits, and Details
• Use jQuery Mobile for UI
Monday, June 3, 13
Ajax
• We rely on jQuery for Ajax
• We also implement pull to refresh using
iScroll4 library and custom code
• CallsYP.com location services
Monday, June 3, 13
Location
• Use HTML5 location services
• Give user a way to use app with location
turned off
Monday, June 3, 13
Maps
• Most Web Mapping Kits will work
• PGDCoffee using Google MapsV3 for Maps
and reverse geocoding
• Reverse geocoding turns some part of an
address into a lat/long
Monday, June 3, 13
Media & Camera
• PhoneGap allows for the recording of
audio and video. Plus the taking of pictures
Monday, June 3, 13
PCDCamera
• Uses the device’s default camera
• Places picture into a canvas
• Dynamically sizes the canvas
Monday, June 3, 13
Your Turn
• Open Project PCDCamera
• Currently it can: take a pic
• Add functionality to the tweak button,
make it do anything you’d like
Monday, June 3, 13
Storage Options
• Memory
• Local Storage
• SQLite
Monday, June 3, 13
Links
• http://www.appmobi.com/
• http://www.convertigo.com/
• http://www-03.ibm.com/software/products/
us/en/worklight/
• http://www.viziapps.com/
Monday, June 3, 13
The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
Monday, June 3, 13
What We Learned
• What PhoneGap is and isn’t
• Some JavaScript Best Practice
• How to go from web to app
Monday, June 3, 13

More Related Content

What's hot

Adobe and Modern Web Development
Adobe and Modern Web DevelopmentAdobe and Modern Web Development
Adobe and Modern Web DevelopmentTerry Ryan
 
Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildTerry Ryan
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupChristian Heilmann
 
Moore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatMoore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatChristian Heilmann
 
The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015Christian Heilmann
 
9 reasons why programmers should learn react native
9 reasons why programmers should learn react native9 reasons why programmers should learn react native
9 reasons why programmers should learn react nativeReact Sharing
 
WordPress Rest API
WordPress Rest APIWordPress Rest API
WordPress Rest APIBrian Layman
 
Desktop Apps in a Javascript World - Electron
Desktop Apps in a Javascript World - ElectronDesktop Apps in a Javascript World - Electron
Desktop Apps in a Javascript World - ElectronMarc MacLeod
 
Android development war stories
Android development war storiesAndroid development war stories
Android development war storiesLope Emano
 
Introduction to React native
Introduction to React nativeIntroduction to React native
Introduction to React nativeDhaval Barot
 
How to survive the JavaScript apocalypse
How to survive the JavaScript apocalypseHow to survive the JavaScript apocalypse
How to survive the JavaScript apocalypsePóth Attila
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…Christian Heilmann
 
Functional webapplicaations using fsharp and suave
Functional webapplicaations using fsharp and suaveFunctional webapplicaations using fsharp and suave
Functional webapplicaations using fsharp and suaveTomas Jansson
 
jQueryUI and HTML5 Video Play Nice
jQueryUI and HTML5 Video Play NicejQueryUI and HTML5 Video Play Nice
jQueryUI and HTML5 Video Play NiceBrian Crescimanno
 
Build the mobile web you want
Build the mobile web you wantBuild the mobile web you want
Build the mobile web you wantk88hudson
 
Electron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptElectron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptAustin Ogilvie
 
React Native
React NativeReact Native
React NativeAlicia G
 

What's hot (20)

Adobe and Modern Web Development
Adobe and Modern Web DevelopmentAdobe and Modern Web Development
Adobe and Modern Web Development
 
Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap Build
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
 
Moore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatMoore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix that
 
The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015
 
9 reasons why programmers should learn react native
9 reasons why programmers should learn react native9 reasons why programmers should learn react native
9 reasons why programmers should learn react native
 
WordPress Rest API
WordPress Rest APIWordPress Rest API
WordPress Rest API
 
Desktop Apps in a Javascript World - Electron
Desktop Apps in a Javascript World - ElectronDesktop Apps in a Javascript World - Electron
Desktop Apps in a Javascript World - Electron
 
Android development war stories
Android development war storiesAndroid development war stories
Android development war stories
 
Introduction to React native
Introduction to React nativeIntroduction to React native
Introduction to React native
 
How to survive the JavaScript apocalypse
How to survive the JavaScript apocalypseHow to survive the JavaScript apocalypse
How to survive the JavaScript apocalypse
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…
 
Functional webapplicaations using fsharp and suave
Functional webapplicaations using fsharp and suaveFunctional webapplicaations using fsharp and suave
Functional webapplicaations using fsharp and suave
 
jQueryUI and HTML5 Video Play Nice
jQueryUI and HTML5 Video Play NicejQueryUI and HTML5 Video Play Nice
jQueryUI and HTML5 Video Play Nice
 
Universal apps lightning talk
Universal apps lightning talk Universal apps lightning talk
Universal apps lightning talk
 
Fixing web and JS gaps
Fixing web and JS gapsFixing web and JS gaps
Fixing web and JS gaps
 
Build the mobile web you want
Build the mobile web you wantBuild the mobile web you want
Build the mobile web you want
 
Electron - Build desktop apps using javascript
Electron - Build desktop apps using javascriptElectron - Build desktop apps using javascript
Electron - Build desktop apps using javascript
 
Question 4 amber
Question 4 amber Question 4 amber
Question 4 amber
 
React Native
React NativeReact Native
React Native
 

Similar to PhoneGap in a Day

jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump StartTroy Miles
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep DiveTroy Miles
 
jQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVCjQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVCTroy Miles
 
PhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessPhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessTroy Miles
 
Ab(Using) the MetaCPAN API for Fun and Profit v2013
Ab(Using) the MetaCPAN API for Fun and Profit v2013Ab(Using) the MetaCPAN API for Fun and Profit v2013
Ab(Using) the MetaCPAN API for Fun and Profit v2013Olaf Alders
 
Groovy & Grails eXchange 2012 - Building an e-commerce business with gr8 tec...
Groovy & Grails eXchange 2012 - Building an  e-commerce business with gr8 tec...Groovy & Grails eXchange 2012 - Building an  e-commerce business with gr8 tec...
Groovy & Grails eXchange 2012 - Building an e-commerce business with gr8 tec...Domingo Suarez Torres
 
Responsive Design and jQuery Mobile
Responsive Design and jQuery MobileResponsive Design and jQuery Mobile
Responsive Design and jQuery MobileTroy Miles
 
Selling Faster: Mobile Performance Tips for E-Commerce Websites
Selling Faster: Mobile Performance Tips for E-Commerce WebsitesSelling Faster: Mobile Performance Tips for E-Commerce Websites
Selling Faster: Mobile Performance Tips for E-Commerce WebsitesMobify
 
WordCamp Milwaukee 2012 - Contributing to Open Source
WordCamp Milwaukee 2012 - Contributing to Open SourceWordCamp Milwaukee 2012 - Contributing to Open Source
WordCamp Milwaukee 2012 - Contributing to Open Sourcejclermont
 
2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice
2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice
2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choicedevopsdaysaustin
 
Creating Mobile Apps With PHP & Symfony2
Creating Mobile Apps With PHP & Symfony2Creating Mobile Apps With PHP & Symfony2
Creating Mobile Apps With PHP & Symfony2Pablo Godel
 
Designing the User Experience - UCCSC 2013
Designing the User Experience - UCCSC 2013Designing the User Experience - UCCSC 2013
Designing the User Experience - UCCSC 2013Ray Vadnais
 
AppEngine Performance Tuning
AppEngine Performance TuningAppEngine Performance Tuning
AppEngine Performance TuningDavid Chen
 
Qt Design Patterns
Qt Design PatternsQt Design Patterns
Qt Design PatternsYnon Perek
 
So what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeSo what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeEric Bidelman
 
Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...
Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...
Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...Nicole C. Engard
 
David Glasser in Chicago - Meteor: Past, Present, & Future
David Glasser in Chicago - Meteor: Past, Present, & Future David Glasser in Chicago - Meteor: Past, Present, & Future
David Glasser in Chicago - Meteor: Past, Present, & Future yaliceme
 

Similar to PhoneGap in a Day (20)

jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump Start
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep Dive
 
jQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVCjQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVC
 
PhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessPhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or Less
 
Ab(Using) the MetaCPAN API for Fun and Profit v2013
Ab(Using) the MetaCPAN API for Fun and Profit v2013Ab(Using) the MetaCPAN API for Fun and Profit v2013
Ab(Using) the MetaCPAN API for Fun and Profit v2013
 
Sencha Touch in Action
Sencha Touch in Action Sencha Touch in Action
Sencha Touch in Action
 
Groovy & Grails eXchange 2012 - Building an e-commerce business with gr8 tec...
Groovy & Grails eXchange 2012 - Building an  e-commerce business with gr8 tec...Groovy & Grails eXchange 2012 - Building an  e-commerce business with gr8 tec...
Groovy & Grails eXchange 2012 - Building an e-commerce business with gr8 tec...
 
Responsive Design and jQuery Mobile
Responsive Design and jQuery MobileResponsive Design and jQuery Mobile
Responsive Design and jQuery Mobile
 
Selling Faster: Mobile Performance Tips for E-Commerce Websites
Selling Faster: Mobile Performance Tips for E-Commerce WebsitesSelling Faster: Mobile Performance Tips for E-Commerce Websites
Selling Faster: Mobile Performance Tips for E-Commerce Websites
 
WordCamp Milwaukee 2012 - Contributing to Open Source
WordCamp Milwaukee 2012 - Contributing to Open SourceWordCamp Milwaukee 2012 - Contributing to Open Source
WordCamp Milwaukee 2012 - Contributing to Open Source
 
2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice
2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice
2016 - Fail Proof Ways to Run Beautiful Tests Regardless Of Browser Choice
 
Creating Mobile Apps With PHP & Symfony2
Creating Mobile Apps With PHP & Symfony2Creating Mobile Apps With PHP & Symfony2
Creating Mobile Apps With PHP & Symfony2
 
Designing the User Experience - UCCSC 2013
Designing the User Experience - UCCSC 2013Designing the User Experience - UCCSC 2013
Designing the User Experience - UCCSC 2013
 
AppEngine Performance Tuning
AppEngine Performance TuningAppEngine Performance Tuning
AppEngine Performance Tuning
 
Qt Design Patterns
Qt Design PatternsQt Design Patterns
Qt Design Patterns
 
App Engine Meetup
App Engine MeetupApp Engine Meetup
App Engine Meetup
 
So what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeSo what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web store
 
Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...
Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...
Panning for Gold: Sifting through Emerging Technologies to Find the Real Trea...
 
Js memory
Js memoryJs memory
Js memory
 
David Glasser in Chicago - Meteor: Past, Present, & Future
David Glasser in Chicago - Meteor: Past, Present, & Future David Glasser in Chicago - Meteor: Past, Present, & Future
David Glasser in Chicago - Meteor: Past, Present, & Future
 

More from Troy Miles

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web ServersTroy Miles
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot CampTroy Miles
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with KotlinTroy Miles
 
React Native One Day
React Native One DayReact Native One Day
React Native One DayTroy Miles
 
React Native Evening
React Native EveningReact Native Evening
React Native EveningTroy Miles
 
Intro to React
Intro to ReactIntro to React
Intro to ReactTroy Miles
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application TestingTroy Miles
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
 
Angular Weekend
Angular WeekendAngular Weekend
Angular WeekendTroy Miles
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScriptTroy Miles
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in ClojureTroy Miles
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-upTroy Miles
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You KnewTroy Miles
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Troy Miles
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutesTroy Miles
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEANTroy Miles
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveXTroy Miles
 

More from Troy Miles (20)

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web Servers
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot Camp
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with Kotlin
 
React Native One Day
React Native One DayReact Native One Day
React Native One Day
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScript
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in Clojure
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You Knew
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutes
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEAN
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveX
 

Recently uploaded

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Recently uploaded (20)

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

PhoneGap in a Day

  • 1. PhoneGap in a Day with Troy Miles aka @therockncoder Monday, June 3, 13
  • 2. Free mobile tutorials with source code @ therockncoder.blogspot.com Monday, June 3, 13
  • 3. Want more? Follow me, new tutorials are announced on Twitter first: @therockncoder Monday, June 3, 13
  • 4. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder Monday, June 3, 13
  • 5. Check out my videos: www.youtube.com/rockncoder Monday, June 3, 13
  • 6. Schedule • 8:00 Morning Session 1 • 10:00 Break • 10:15 Morning Session 2 • 12:00 Lunch • 12:45 Afternoon Session 1 Monday, June 3, 13
  • 7. Schedule • 2:45 Break • 3:00 Afternoon Session 2 • 4:45 Wrap Up Monday, June 3, 13
  • 8. Where Is? • Water • Restrooms Monday, June 3, 13
  • 9. Agenda • Setup • Introduction to PhoneGap • JavaScript Best Practices • Using Libraries • Ajax • Location & Maps Monday, June 3, 13
  • 10. Agenda • Media • Storage • User Interface • Icons & Splash Pages • Performance Tips Monday, June 3, 13
  • 11. How We Will Progress • Show a Few Slides • Show Some Code • LetYou Have a Turn • Back to Slides Monday, June 3, 13
  • 12. The Apps • Calculator • Camera • Compass • Coffee + Coffee • Touch Paint Monday, June 3, 13
  • 13. Setup Android • Java SE 6u45 (not 7) • Android Developer Tools • Intellij IDEA 12 CE Monday, June 3, 13
  • 14. Build an Android App Monday, June 3, 13
  • 15. Setup PhoneGap • Apache Ant 1.9.1 • PhoneGap 2.7.0 Monday, June 3, 13
  • 16. Build a PhoneGap App Monday, June 3, 13
  • 17. Android Alphabet Soup • ADB - Android Debug Bridge • ADT - Android Developer Tools • AVD Manager - AndroidVirtual Device • DDMS - Dalvik Debug Monitor Server • SDK Manager - Software Development Kit Monday, June 3, 13
  • 19. History • Create by Nitobi in 2009 at an Apple Event • Nitobi Acquired by Adobe • Open Sourced as Apache Cordova • PhoneGap is only one implementation Monday, June 3, 13
  • 20. Other Cordova Implementations • appMobi • Convertigo • Icenium (Telerik) • ViziApps • Worklight (IBM) Monday, June 3, 13
  • 21. Intro to PhoneGap • What the heck is it? • How it works? Monday, June 3, 13
  • 22. What the Heck is it? • Think of it as a web site wrapped by an mobile app • Rather HTML or HTML5, more like HTML6 Monday, June 3, 13
  • 23. How it Works? • Most device APIs include an internal web browser • PhoneGap uses this internal web browser as its app canvas • It adds more features to the navigator via software which bridges the gap between the internal web and the device Monday, June 3, 13
  • 24. PhoneGap • Current release is 2.7.0 • New release every few months • Last few have been mainly bug fixes • Recommend not upgrading your app to a new version right away Monday, June 3, 13
  • 25. JavaScript Best Practices • Avoid sloppy JavaScript • Avoid the Global Space • Encapsulate Code into Objects • Use Design Patterns Monday, June 3, 13
  • 26. Avoid Sloppy JavaScript • JavaScript is a Harsh Mistress • Always use ‘===’ & ‘!==’ • Code in JavaScript not C#, Java, Ruby, etc. • Use JSLint or JSHint Monday, June 3, 13
  • 27. Avoid the Global Space • Minimize Use of GlobalVariables • Use Namespacing • Use Anonymous/Immediate Functions When Appropriate Monday, June 3, 13
  • 28. Use Design Patterns • Singleton • Chaining •Revealing Module Structure • + many more Monday, June 3, 13
  • 29. JavaScript Tips • Functions • Objects • Events Monday, June 3, 13
  • 30. Functions • Functions are first class type • Like other types they can be passed and assigned freely • Anonymous functions are used frequently Monday, June 3, 13
  • 31. Objects • Thing of JavaScript Objects like Key/Value dictionary • The Key can be anything when wrapped in quotes • TheValue can be any type including a function Monday, June 3, 13
  • 32. Events • Events allow for excellent separation of concerns • You can listen for system events or • Trigger and respond to your own • Many external libraries will communicate via events Monday, June 3, 13
  • 33. Libraries • jQuery - DOM manipulation / Ajax • jQuery Mobile - Mobile UI • zepto.js - lightweighter substitute for jQuery • underscore.js - utility belt library • backbone.js - client side framework Monday, June 3, 13
  • 34. PGDCalculator • Single Page App • Uses jQuery Mobile for UI • Hooks jQuery Mobile Events Monday, June 3, 13
  • 35. PGDCalculator • HTML/jQuery Mobile UI • My JQM Kernel to Dispatch Events • JavaScript Logic Monday, June 3, 13
  • 36. Your Turn • Open Project PCDCalculatorEx • The UI is complete • The Logic is complete • Bind the two together, aka make the buttons work • Hint: Compare to the working version Monday, June 3, 13
  • 37. PGDCompass • Even simpler than the Calculator • Uses navigator.compass to supply rotation value for a CSS3 object • Only works on devices which have a compass Monday, June 3, 13
  • 38. PGDCoffee • Fairly Complicated App • 5 Main Sections: Listings, Map, Settings, Credits, and Details • Use jQuery Mobile for UI Monday, June 3, 13
  • 39. Ajax • We rely on jQuery for Ajax • We also implement pull to refresh using iScroll4 library and custom code • CallsYP.com location services Monday, June 3, 13
  • 40. Location • Use HTML5 location services • Give user a way to use app with location turned off Monday, June 3, 13
  • 41. Maps • Most Web Mapping Kits will work • PGDCoffee using Google MapsV3 for Maps and reverse geocoding • Reverse geocoding turns some part of an address into a lat/long Monday, June 3, 13
  • 42. Media & Camera • PhoneGap allows for the recording of audio and video. Plus the taking of pictures Monday, June 3, 13
  • 43. PCDCamera • Uses the device’s default camera • Places picture into a canvas • Dynamically sizes the canvas Monday, June 3, 13
  • 44. Your Turn • Open Project PCDCamera • Currently it can: take a pic • Add functionality to the tweak button, make it do anything you’d like Monday, June 3, 13
  • 45. Storage Options • Memory • Local Storage • SQLite Monday, June 3, 13
  • 46. Links • http://www.appmobi.com/ • http://www.convertigo.com/ • http://www-03.ibm.com/software/products/ us/en/worklight/ • http://www.viziapps.com/ Monday, June 3, 13
  • 47. The Rock n Coder • http://therockncoder.blogspot.com • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder • http://www.slideshare.net/rockncoder Monday, June 3, 13
  • 48. What We Learned • What PhoneGap is and isn’t • Some JavaScript Best Practice • How to go from web to app Monday, June 3, 13