The document provides an overview of Apache Cordova (formerly PhoneGap), a framework that allows developers to create native mobile applications using HTML and JavaScript, enabling access to device features like GPS and camera. It outlines the steps required to get started, including setting up the development environment, creating a project, and implementing basic functions for a sample app called 'Magic 8 Ball.' Additionally, it discusses the integration of plugins and the use of Adobe PhoneGap Build for streamlining app deployment across platforms.

1. Cordova: Using Your Web Skills
to Create Native Mobile Apps
Clay Ewing

2. Me?
• I teach here, at UM
– Interactive MFA starting Fall 2013
• Web & Mobile Developer
• Game Designer

3. Cordova, aka PhoneGap

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)

10. Look and Feel
• jQuery Mobile
– http://jquerymobile.com
• Dojo
– http://dojotoolkit.org
• Sencha Touch
– http://www.sencha.com/products/touch
• iUI
– http://www.iui-js.org/

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

12. Unzipped iOS

13. Create the Project in Terminal
• For iOS, run:
– bin/create <ProjectDirectory>
<Namespace> <ProjectName>
– bin/create
“/Users/clay/Documents/CordovaExample”
com.example.magic_8 Magic8

14. What the Command Creates
Our focus:

15. A Little HTML
<h1>Magic 8 Ball</h1>
<div id="asking">
<textarea id="question" name="question" class="full" placeholder="To what
question do you seek the answer to?"></textarea>
<button id="ask" class="gradient-button purple full">Ask</button>
</div>
<div id="answering" style="display:none">
<div id="answer"></div>
<button id="askagain" class="gradient-button purple full">Ask Again</button>
<button id="newquestion" class="gradient-button purple full">New Q</button>
<button id="share" class="gradient-button purple full">Share Results</button>
<button id="tweet" class="gradient-button purple full">Tweet Results</button>
</div>

16. Some CSS3 for Buttons
.gradient-button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 15px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.gradient-button:active {
position: relative;
top: 1px;
}

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");
}

22. Icons and Splash Screens

23. And Build.

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

25. Adobe PhoneGap Build

26. Questions?
Clay Ewing
www.claytical.com
www.github.com/claytical
c.ewing@miami.edu
@claytical