4. What is it?
• Framework for building mobile
applications in HTML
• Allows access to native functions through
JavaScript, like
GPS, accelerometer, camera, etc.
– http://docs.phonegap.com/en/2.3.0
5. Why Use It?
• Quick, no need to learn another
language
• Cross platform compatible, minimal
effort to make an app available on
multiple mobile devices
• Open source
• Sell your app in a store
6. How does it work?
• Modern smart phone operating systems
have their version of a webview
• Cordova is literally just a local web page
seen through a full screen webview
• Plugins use device specific code
(Objective C, Java, etc) to access
functions through JavaScript
7. Plugins?
• A bunch of features are packed in
automatically:
– http://docs.phonegap.com/en/edge
• Community based plugins that focus on
device OS specific stuff:
– https://github.com/phonegap/phonegap-
plugins
8. Let’s make an app!
http://www.github.com/claytical/magic8
9. Getting Started
• You need whatever IDE and SDK you
would normally need.
– iOS requires Xcode and the iOS SDK
(https://developer.apple.com/)
– Android requires Eclipse and the Android
SDK (http://developer.android.com/sdk)
11. Actually Getting Started
• Download the latest build
– http://cordova.apache.org/#download
• Extract the zip file to wherever you want
it
• Extract the zip file inside the zip file
corresponding to the device you’re
targeting
17. Make a Purple Button
.purple {
color: #fef4e9;
border: solid 1px #551A8B;
background: #8A2BE2;
background: -webkit-gradient(linear, left top, left
bottom, from(#8A2BE2), to(#551A8B));
}
.purple:active {
color: #fef4e9;
background: -webkit-gradient(linear, left top, left
bottom, from(#551A8B), to(#694489));
}
18. The JavaScript
• Clean up index.js
– It has some extra stuff we don’t need
• Add zepto.js for easy manipulation
– You can use whatever framework you like
• Add social.js for our Social Framework
Plugin
– This is iOS specific
19. Some More JavaScript
var answers = ['It is certain', 'It is decidedly so', 'Without a doubt', 'Yes –
definitely', 'You may rely on it', 'As I see it, yes', 'Most likely’];
function getAnswer() {
$('#asking').hide();
$('#answering').show();
var selectedResponse = Math.floor((Math.random()*20));
$('#answer').text(answers[selectedResponse]);
}
function newQuestion() {
$('#question').val("");
$('#asking').show();
$('#answering').hide();
}
20. Plugins? No problem.
• Place the m and h files into the plugins
folder
• Copy the js file into the www/js folder
• Add extra frameworks to the project
• Add a line to
config.xml
21. Use the Plugin with JavaScript
function fbResults() {
var qa = $('#question').val() + " " + $('#answer').text() + "
#magic8";
SocialFrameworkPlugin.postToFacebook( shareSuccess,
shareError, qa);
}
function shareSuccess() {
console.log("Sharing Successful");
}
function shareError() {
console.log("Error sharing");
}
24. Adobe PhoneGap Build
• Streamline the process of building for
other platforms
• No need to own a mac to build an iOS
app
• Free for open source projects
• Private repositories require a
subscription
– $12/month for 3 private apps