SlideShare a Scribd company logo
Developing Windows Phone 8 Apps using
PhoneGap
Amar Mešić
Senior Software Developer
Source Code d.o.o. Tuzla
Open at
Microsoft
Agenda
• What is PhoneGap, how does it work?
• Setting up IDE for developing WP8 apps
• Common app scenarios
• Fetching data from web (JSON)
• Persistency accross pages
• Bing maps
• Geolocation
• File and local storage
• PhoneGap build
• Porting our apps to another platform
Open at
Microsoft
About PhoneGap
It's an open source framework for building mobile apps using web-
technologies.
• HTML for layout ( Better yet HTML5 )
• JavaScript for accessing device functionality
• CSS for look and feel.
It's a collection of tools + a consistent cross-device API.
• Use the same JavaScript calls to access device functions.
navigator.notification.vibrate();
Open at
Microsoft
About PhoneGap
• Supports development for the following operating systems:
Android, iOS, Windows Phone, webOS, Windows Mobile,
Symbian OS and BlackBerry
• PhoneGap Website: http://phonegap.com/
• Source code available on github
https://github.com/phonegap/
Open at
Microsoft
About Phone Gap?
• The PhoneGap applications are hybrid
• They are neither truly native nor purely web based
• All layout rendering is done via the web view instead of XAML
• Much of the functions of HTML5 are supported
• A disadvantage is that hybrid applications do not have FULL
access to the device API (Camera, compass, accelerometer, etc.)
• PhoneGap is just a library that you must include in your app
(few JavaScript and XML files)
Open at
Microsoft
What does it do?
• PhoneGap generates a out-of-the-browser window that executes
the HTML and JavaScript
• Due to a couple of xml and dll files it enables the usage of native
APIs
• Device API supported by most platforms:
Open at
Microsoft
• GeoLocation
• Compass ( for 3GS )
• Accelerometer
• Telephony
• Camera
• Media Playback + Recording
• Contacts ( read-only )
• Video with HTML5 Video tag
• FileIO ( local application documents
folder )
• Cache images or data from the web
What does it do?
Open at
Microsoft
So PhoneGap apps are just web pages?
Yup, web pages that access device functionality.
• Apps can still provide a rich experience, especially with CSS
transitions and tweening animations.
• CSS Transitions are hardware accelerated !
• There are games built with PhoneGap!
Open at
Microsoft
How is PhoneGap different from a mobile site?
• Mobile websites are domain restricted to their origin url and
cannot access device API
• Apps are loaded from the file://protocol so server requests are
NOT restricted
Pros and cons
Open at
Microsoft
• HTML5, CSS and JavaScript skills vs. C#, Java and Objective-C
• Single code base for all platforms
• Poor performance
• Lack of pre-built UI widgets, standard controls, transitions
• Your development time can take longer
Pros
Cons
Typical PhoneGap app scenario
Open at
Microsoft
• JavaScript calls the server to fetch JSON data.
• HTML/JS/CSS + graphic assets are on the device, packaged as
part of the build process.
• JavaScript can store retrieved data in a SQLite database for
offline access.
• Maps
• Accessing local storage
• Persistent data accross pages
Getting started
Open at
Microsoft
• IDE
• Visual Studio
• Eclipse
• xCode
• Adobe Edge
• Any other editor
• OS SDK
• PhoneGap library
• More tools available at http://phonegap.com/tool
Setting up our environment
Open at
Microsoft
DEM
O
PhoneGap Config file
Open at
Microsoft
• Used for cross-platform configuration and customization (app
capabilities, description, specific platform settings
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.openms"
versionCode="10"
version = "1.0.0">
</widget>
<name>Open at Microsoft</name>
<description>
App description
</description>
UI design
Open at
Microsoft
• jQuery Mobile
• MooTools
• XUI
• jQTouch
• Kendo UI
• PhoneJS
Common app scenarios
Open at
Microsoft
• Fetching data from web (JSON)
• Persistency accross pages
• Bing maps
• Geolocation
• File storage
Fetching data from web service (JSON)
Open at
Microsoft
• HTTPWebRequest & JSON.NET vs jQuery
Bing Maps & Geolocation
Open at
Microsoft
• Map control vs Bing Maps API
• Register on http://bingmapsportal.com to obtain API key for your
app
• Alternative maps:
• Google Maps
• OSM
• CloudMade
Local Database
Open at
Microsoft
• PhoneGap uses SQLite database
• Requires permissions
var db = window.openDatabase(database_name, database_version,
database_displayname, database_size);
db.transaction(populateDB, errorCB, successCB);
• Alternative: use JS with local storage
• CouchDB, TaffyDB, NeDB, PouchDB
• Backbone.js
API Reference
Open at
Microsoft
• File API provides accecss to Isolated Storage
• Connection object gives access to device cellular and wifi info
• Contacts object provides access to
• Events : deviceready, online, offline, backbutton, menubutton
• Device object provides name, platform, version
• Full list of API device funcions available at
http://docs.phonegap.com/
Best practises
Open at
Microsoft
• Main advantage of PhoneGap is you can reuse your web
application source code across platforms.
• A good, quick approach is to write one set of assets and ‘tweak’
across platforms.
• MVC (model-view-controller) paradigm is great for prototyping, as you can revisit
and, if need be, recode particular modules of your app as you iterate.
• Model = PhoneGap JS API + offline storage
• Controller = JavaScript
• View = HTML + CSS
Best practises
Open at
Microsoft
• As you work on an app, you notice repeatable HTML/CSS patterns
that come up. Don’t copy+paste it!
• Encapsulate the view pattern HTML in a JavaScript string
• Mobile devices will not be networked all the time. Bad coverage, on
the plane, no data plan
• PhoneGap offers reachability API
Best practises
Open at
Microsoft
• For small apps, use a single HTML page.
• Use JavaScript to show/hide page elements based on user interaction
instead of linking to a separate page.
• Obfuscate your JavaScript before release.
When NOT to use PhoneGap:
• Complex games, intensive graphics. Use OpenGL for that, not PhoneGap.
• For slower phones. PhoneGap apps using the latest interactive Google
Maps APIs tend to be slow.
PhoneGap Build
Open at
Microsoft
• It allows you to easily build those same mobile apps in the cloud
• Simply upload your www folder or point to GIT/SVN repo
• You can skip build for cetrain platforms using the config.xml file
• No need to install aditional software
• App ready for submission if provided with certificates / signing
keys
Open at
Microsoft
QUESTIONS ?

More Related Content

What's hot

Performance testing of mobile apps
Performance testing of mobile appsPerformance testing of mobile apps
Performance testing of mobile apps
vodQA
 
Introduction to xamarin
Introduction to xamarinIntroduction to xamarin
Introduction to xamarin
Alejandro Ruiz Varela
 
Opening the mobile web mozilla and firefox os-chit thiri maung
Opening the mobile web   mozilla and firefox os-chit thiri maungOpening the mobile web   mozilla and firefox os-chit thiri maung
Opening the mobile web mozilla and firefox os-chit thiri maung
Chit Thiri Maung
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
Software Infrastructure
 
Introduction to Xamarin - Confoo 2015
Introduction to Xamarin - Confoo 2015Introduction to Xamarin - Confoo 2015
Introduction to Xamarin - Confoo 2015
Guy Barrette
 
Native Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGapNative Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGap
Sasha Goldshtein
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEX
Joseph Labrecque
 
Cross platform development
Cross platform developmentCross platform development
Cross platform development
dftaiwo
 
Cross platform app dev with xamarin forms
Cross platform app dev with xamarin formsCross platform app dev with xamarin forms
Cross platform app dev with xamarin forms
Shahriar Hossain
 
What's new in Blend for Visual Studio 2015
What's new in Blend for Visual Studio 2015What's new in Blend for Visual Studio 2015
What's new in Blend for Visual Studio 2015
Fons Sonnemans
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
Raymond Camden
 
Understanding the Windows Desktop App Development Landscape + Top 10 WPF Po...
Understanding the Windows Desktop App Development Landscape   + Top 10 WPF Po...Understanding the Windows Desktop App Development Landscape   + Top 10 WPF Po...
Understanding the Windows Desktop App Development Landscape + Top 10 WPF Po...
MSDEVMTL
 
Mobile architecture options
Mobile architecture optionsMobile architecture options
Mobile architecture options
johnsprunger
 
Rhomobile
RhomobileRhomobile
Rhomobile
Abhishek Nalwaya
 
DNN Connect - Mobile Development With Xamarin
DNN Connect - Mobile Development With XamarinDNN Connect - Mobile Development With Xamarin
DNN Connect - Mobile Development With Xamarin
Mark Allan
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
James Pearce
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGap
Dotitude
 
Rhodes vs Phonegap
Rhodes vs PhonegapRhodes vs Phonegap
Rhodes vs Phonegap
Ankit Shandilya
 
State of the Platforms
State of the PlatformsState of the Platforms
State of the Platforms
Sasha Goldshtein
 
Cross platform app development with xamarin.forms
Cross platform app development with xamarin.formsCross platform app development with xamarin.forms
Cross platform app development with xamarin.forms
Shahriar Hossain
 

What's hot (20)

Performance testing of mobile apps
Performance testing of mobile appsPerformance testing of mobile apps
Performance testing of mobile apps
 
Introduction to xamarin
Introduction to xamarinIntroduction to xamarin
Introduction to xamarin
 
Opening the mobile web mozilla and firefox os-chit thiri maung
Opening the mobile web   mozilla and firefox os-chit thiri maungOpening the mobile web   mozilla and firefox os-chit thiri maung
Opening the mobile web mozilla and firefox os-chit thiri maung
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Introduction to Xamarin - Confoo 2015
Introduction to Xamarin - Confoo 2015Introduction to Xamarin - Confoo 2015
Introduction to Xamarin - Confoo 2015
 
Native Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGapNative Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGap
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEX
 
Cross platform development
Cross platform developmentCross platform development
Cross platform development
 
Cross platform app dev with xamarin forms
Cross platform app dev with xamarin formsCross platform app dev with xamarin forms
Cross platform app dev with xamarin forms
 
What's new in Blend for Visual Studio 2015
What's new in Blend for Visual Studio 2015What's new in Blend for Visual Studio 2015
What's new in Blend for Visual Studio 2015
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
 
Understanding the Windows Desktop App Development Landscape + Top 10 WPF Po...
Understanding the Windows Desktop App Development Landscape   + Top 10 WPF Po...Understanding the Windows Desktop App Development Landscape   + Top 10 WPF Po...
Understanding the Windows Desktop App Development Landscape + Top 10 WPF Po...
 
Mobile architecture options
Mobile architecture optionsMobile architecture options
Mobile architecture options
 
Rhomobile
RhomobileRhomobile
Rhomobile
 
DNN Connect - Mobile Development With Xamarin
DNN Connect - Mobile Development With XamarinDNN Connect - Mobile Development With Xamarin
DNN Connect - Mobile Development With Xamarin
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGap
 
Rhodes vs Phonegap
Rhodes vs PhonegapRhodes vs Phonegap
Rhodes vs Phonegap
 
State of the Platforms
State of the PlatformsState of the Platforms
State of the Platforms
 
Cross platform app development with xamarin.forms
Cross platform app development with xamarin.formsCross platform app development with xamarin.forms
Cross platform app development with xamarin.forms
 

Similar to Developing Windows Phone 8 apps using PhoneGap

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Nick Landry
 
Phone gap
Phone gapPhone gap
Phone gap
Kevin Lee
 
phonegap_101
phonegap_101phonegap_101
phonegap_101
Asanka Indrajith
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
Sasha dos Santos
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
saritasingh19866
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
Monaca
 
Top 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App DevelopmentTop 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App Development
techugo
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
Nuxeo
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
Mihai Corlan
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
Manesh Lad
 
PhoneGap/Cordova
PhoneGap/CordovaPhoneGap/Cordova
PhoneGap/Cordova
Mihai Corlan
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
Reto Meier
 
Making the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGapMaking the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGap
Roy Clarkson
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Development Workshop on ET1, Android and Motorola RhoElements
Development Workshop on ET1, Android and Motorola RhoElementsDevelopment Workshop on ET1, Android and Motorola RhoElements
Development Workshop on ET1, Android and Motorola RhoElements
Romin Irani
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
Doncho Minkov
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
Ivano Malavolta
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
Ivano Malavolta
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar Patnaik
Mukteswar Patnaik
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Ryan Cuprak
 

Similar to Developing Windows Phone 8 apps using PhoneGap (20)

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Phone gap
Phone gapPhone gap
Phone gap
 
phonegap_101
phonegap_101phonegap_101
phonegap_101
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
Top 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App DevelopmentTop 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App Development
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
PhoneGap/Cordova
PhoneGap/CordovaPhoneGap/Cordova
PhoneGap/Cordova
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Making the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGapMaking the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGap
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Development Workshop on ET1, Android and Motorola RhoElements
Development Workshop on ET1, Android and Motorola RhoElementsDevelopment Workshop on ET1, Android and Motorola RhoElements
Development Workshop on ET1, Android and Motorola RhoElements
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar Patnaik
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 

Recently uploaded

AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
Daniel Zivkovic
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
singhlata50dh
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
quanhoangd129
 
B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024
vmsdeptcom
 
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databasesBATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATbern
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
DEMONDUOS
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
902basic
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
kiara pandey
 
DSD-INT 2024 Rainfall nowcasting – now and then - Uijlenhoet
DSD-INT 2024 Rainfall nowcasting – now and then - UijlenhoetDSD-INT 2024 Rainfall nowcasting – now and then - Uijlenhoet
DSD-INT 2024 Rainfall nowcasting – now and then - Uijlenhoet
Deltares
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)
andrehoraa
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
kalichargn70th171
 
08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching
quanhoangd129
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
6m9p7qnjj8
 
Tour and travel website management in odoo,
Tour and travel website management in odoo,Tour and travel website management in odoo,
Tour and travel website management in odoo,
Axis Technolabs
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
TaskSprint | Employee Efficiency Software
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
Inflectra
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
quanhoangd129
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
quanhoangd129
 

Recently uploaded (20)

AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
 
B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024
 
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databasesBATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databases
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
 
DSD-INT 2024 Rainfall nowcasting – now and then - Uijlenhoet
DSD-INT 2024 Rainfall nowcasting – now and then - UijlenhoetDSD-INT 2024 Rainfall nowcasting – now and then - Uijlenhoet
DSD-INT 2024 Rainfall nowcasting – now and then - Uijlenhoet
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
 
08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
 
Tour and travel website management in odoo,
Tour and travel website management in odoo,Tour and travel website management in odoo,
Tour and travel website management in odoo,
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
 

Developing Windows Phone 8 apps using PhoneGap

  • 1. Developing Windows Phone 8 Apps using PhoneGap Amar Mešić Senior Software Developer Source Code d.o.o. Tuzla Open at Microsoft
  • 2. Agenda • What is PhoneGap, how does it work? • Setting up IDE for developing WP8 apps • Common app scenarios • Fetching data from web (JSON) • Persistency accross pages • Bing maps • Geolocation • File and local storage • PhoneGap build • Porting our apps to another platform Open at Microsoft
  • 3. About PhoneGap It's an open source framework for building mobile apps using web- technologies. • HTML for layout ( Better yet HTML5 ) • JavaScript for accessing device functionality • CSS for look and feel. It's a collection of tools + a consistent cross-device API. • Use the same JavaScript calls to access device functions. navigator.notification.vibrate(); Open at Microsoft
  • 4. About PhoneGap • Supports development for the following operating systems: Android, iOS, Windows Phone, webOS, Windows Mobile, Symbian OS and BlackBerry • PhoneGap Website: http://phonegap.com/ • Source code available on github https://github.com/phonegap/ Open at Microsoft
  • 5. About Phone Gap? • The PhoneGap applications are hybrid • They are neither truly native nor purely web based • All layout rendering is done via the web view instead of XAML • Much of the functions of HTML5 are supported • A disadvantage is that hybrid applications do not have FULL access to the device API (Camera, compass, accelerometer, etc.) • PhoneGap is just a library that you must include in your app (few JavaScript and XML files) Open at Microsoft
  • 6. What does it do? • PhoneGap generates a out-of-the-browser window that executes the HTML and JavaScript • Due to a couple of xml and dll files it enables the usage of native APIs • Device API supported by most platforms: Open at Microsoft • GeoLocation • Compass ( for 3GS ) • Accelerometer • Telephony • Camera • Media Playback + Recording • Contacts ( read-only ) • Video with HTML5 Video tag • FileIO ( local application documents folder ) • Cache images or data from the web
  • 7. What does it do? Open at Microsoft
  • 8. So PhoneGap apps are just web pages? Yup, web pages that access device functionality. • Apps can still provide a rich experience, especially with CSS transitions and tweening animations. • CSS Transitions are hardware accelerated ! • There are games built with PhoneGap! Open at Microsoft How is PhoneGap different from a mobile site? • Mobile websites are domain restricted to their origin url and cannot access device API • Apps are loaded from the file://protocol so server requests are NOT restricted
  • 9. Pros and cons Open at Microsoft • HTML5, CSS and JavaScript skills vs. C#, Java and Objective-C • Single code base for all platforms • Poor performance • Lack of pre-built UI widgets, standard controls, transitions • Your development time can take longer Pros Cons
  • 10. Typical PhoneGap app scenario Open at Microsoft • JavaScript calls the server to fetch JSON data. • HTML/JS/CSS + graphic assets are on the device, packaged as part of the build process. • JavaScript can store retrieved data in a SQLite database for offline access. • Maps • Accessing local storage • Persistent data accross pages
  • 11. Getting started Open at Microsoft • IDE • Visual Studio • Eclipse • xCode • Adobe Edge • Any other editor • OS SDK • PhoneGap library • More tools available at http://phonegap.com/tool
  • 12. Setting up our environment Open at Microsoft DEM O
  • 13. PhoneGap Config file Open at Microsoft • Used for cross-platform configuration and customization (app capabilities, description, specific platform settings <?xml version="1.0" encoding="UTF-8"?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.phonegap.openms" versionCode="10" version = "1.0.0"> </widget> <name>Open at Microsoft</name> <description> App description </description>
  • 14. UI design Open at Microsoft • jQuery Mobile • MooTools • XUI • jQTouch • Kendo UI • PhoneJS
  • 15. Common app scenarios Open at Microsoft • Fetching data from web (JSON) • Persistency accross pages • Bing maps • Geolocation • File storage
  • 16. Fetching data from web service (JSON) Open at Microsoft • HTTPWebRequest & JSON.NET vs jQuery
  • 17. Bing Maps & Geolocation Open at Microsoft • Map control vs Bing Maps API • Register on http://bingmapsportal.com to obtain API key for your app • Alternative maps: • Google Maps • OSM • CloudMade
  • 18. Local Database Open at Microsoft • PhoneGap uses SQLite database • Requires permissions var db = window.openDatabase(database_name, database_version, database_displayname, database_size); db.transaction(populateDB, errorCB, successCB); • Alternative: use JS with local storage • CouchDB, TaffyDB, NeDB, PouchDB • Backbone.js
  • 19. API Reference Open at Microsoft • File API provides accecss to Isolated Storage • Connection object gives access to device cellular and wifi info • Contacts object provides access to • Events : deviceready, online, offline, backbutton, menubutton • Device object provides name, platform, version • Full list of API device funcions available at http://docs.phonegap.com/
  • 20. Best practises Open at Microsoft • Main advantage of PhoneGap is you can reuse your web application source code across platforms. • A good, quick approach is to write one set of assets and ‘tweak’ across platforms. • MVC (model-view-controller) paradigm is great for prototyping, as you can revisit and, if need be, recode particular modules of your app as you iterate. • Model = PhoneGap JS API + offline storage • Controller = JavaScript • View = HTML + CSS
  • 21. Best practises Open at Microsoft • As you work on an app, you notice repeatable HTML/CSS patterns that come up. Don’t copy+paste it! • Encapsulate the view pattern HTML in a JavaScript string • Mobile devices will not be networked all the time. Bad coverage, on the plane, no data plan • PhoneGap offers reachability API
  • 22. Best practises Open at Microsoft • For small apps, use a single HTML page. • Use JavaScript to show/hide page elements based on user interaction instead of linking to a separate page. • Obfuscate your JavaScript before release. When NOT to use PhoneGap: • Complex games, intensive graphics. Use OpenGL for that, not PhoneGap. • For slower phones. PhoneGap apps using the latest interactive Google Maps APIs tend to be slow.
  • 23. PhoneGap Build Open at Microsoft • It allows you to easily build those same mobile apps in the cloud • Simply upload your www folder or point to GIT/SVN repo • You can skip build for cetrain platforms using the config.xml file • No need to install aditional software • App ready for submission if provided with certificates / signing keys