Transcript slides - JS(Saturday)

jQuery Mobile and HTML5 in
PhoneGap for Mobile Apps
var subTitle = {
PhoneGap is an HTML5 app platform that
allows developers to author native
applications with web technologies and get
access to APIs and app stores
};
Agenda






Why PhoneGap?
Who is PhoneGap...really?
Getting Started with PhoneGap
PhoneGap APIs
Extending PhoneGap
Final Considerations
Why PhoneGap?
 There are more than
100 000 000 WEB
developers!
 The web is
awesome!
Why PhoneGap?
 The realistic reason:
Cross platform
applications with
HTML/JS will be faster
and easier
What is PhoneGap ?
 PhoneGap is an open-source mobile
development framework produced by Nitobi,
purchased by Adobe Systems.
 The resulting applications are hybrid,
meaning that they are neither truly native
What is PhoneGap ?
Your Code
What is PhoneGap ?
Your Code
Native Web View
What is PhoneGap ?
Your Code
Native Web View
Native APIs
What is PhoneGap ?
Your Code
Native Web View
Native APIs
Native App - .apk, .xap, etc.
What is PhoneGap ?
 PhoneGap uses the native browser on the
device to render the HTML/CSS/JS
 Keep in mind that can affect the experience It
also keeps apps nice and small
What is PhoneGap ?
 PhoneGap uses the
native project format
for each platform
 Open, emulate, and
test from within the
native development
environment!
What is PhoneGap ?
 Because it’s using
the native projects
it’s fully extendable.
What is PhoneGap?
 PhoneGap provides
a JavaScript library
that reaches out
into the native APIs
 That means
anything the device
is doable
What is PhoneGap?
 PhoneGap is
completely open
source and has been
submitted to the
Apache Foundation.
http:// incubator.apache.org/callback/
What is PhoneGap?
 The entire project is
available on Github:
https://github.com/cordova
Getting Started with PhoneGap
 There are multiple
ways to “start” with
PhoneGap.
 The project includes
command line tools,
IDE plugins, and
Dreamweaver ships
with PhoneGap
support.
Getting Started with PhoneGap
 Demo:
Hello World
Getting Started with PhoneGap
 Very important to
keep in mind that
we’re building a
mobile app, not a
mobile web app.
 You can use ANY
framework you want,
but try to design for
an app.
PhoneGap APIs
 Out of the box,
PhoneGap provides
support for a
number of basic
device APIs.
- Accelerometer
- Camera
- Capture
- Compass
- Connection
- Contacts
- Device
- Events
- File
- Geolocation
- Media
- Network
- Notification
- Storage
PhoneGap APIs
 Supported Features
PhoneGap APIs
 Camera API
example
PhoneGap for Windows Phone 8
 Starting from Apache Cordova 2.3.0, released
on 7th of January 2013 has a full support for
Windows Phone 8
http://bit.ly/XlbV92
PhoneGap in Windows 8 Store Apps
 Windows 8 apps can be designed and coded
using HTML, CSS and JavaScript just like
PhoneGap apps can.
http://bit.ly/VIITP3
PhoneGap & jQuery for Windows 8
 Because Microsoft has integrated a new
security model in Windows 8, jQuery has to
be modified slightly in order to be usable for
app development.
http://bit.ly/PYyvyI
Debugging PhoneGap
 It’s all just HTML/JS,
so you can use your
browser!
 Take advantage of
Chrome Developer
tools/Firebug to test
your app’s UI.
Debugging PhoneGap
 But what about Device APIs?
 Because we’re in the web view, there is no
way to do line-by-line debugging.
Debugging PhoneGap
 But what about Device APIs?
 Because we’re in the web view, there is no
way to do line-by-line debugging.
Debugging PhoneGap
 Luckily we have Weinre,
which lets us debug
and manipulate the
DOM from our PCs.
Debugging PhoneGap
 But, a much easier way:
http://debug.phonegap.com/
Extending PhoneGap
 For added functionality
PhoneGap provides a
plug-in mechanism.
 Includes OS-specific
code/libraries and the JS
to use it in PhoneGap
Some of the helpful ones:
PayPal, Facebook, Push
Notification
Extending PhoneGap
 Available at
https://github.com/phonegap/phonegap-plugins
Considerations
Remember that we’re on different
platforms
Considerations
Versus
Considerations
 Couple of tips:
Always test features first (if !supported)
For UI-specifics, you can use the device
class to get device info
Considerations
 Couple of tips:
Always test features first (if !supported)
For UI-specifics, you can use the device
class to get device info
Build PhoneGap Apps in the Cloud
 One more thing:
 build.phonegap.com
Build PhoneGap Apps in the Cloud
 The Problem:
You’re building a cross-platform app, but
dealing with a lot of native projects
Build PhoneGap Apps in the Cloud
 The Solution:
Build PhoneGap Apps in the Cloud
 Build includes git
support so you can use
git and host projects
on PhoneGap or build
a project from Github.
Build PhoneGap Apps in the Cloud
 Sample project in Github:
https://github.com/mmateev/TwitterCordovaApp/
Expect very soon: SharePoint Saturday!
 Saturday, June 8, 2013
 Same familiar format – 1 day filled with sessions
focused on SharePoint technologies
 Best SharePoint professionals in the region
 Registrations will be open next week (15th)!
 www.SharePointSaturday.eu
Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners:
Q&A