Overview of PhoneGap/Cordova and walkthrough of a small app (Magic 8 Ball). For code, check out https://github.com/claytical/magic8

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