cordova: making native mobile apps with your web skills
DESCRIPTION
Overview of PhoneGap/Cordova and walkthrough of a small app (Magic 8 Ball). For code, check out https://github.com/claytical/magic8TRANSCRIPT
Cordova: Using Your Web Skills to Create Native Mobile Apps
Clay Ewing
Me?
• I teach here, at UM– Interactive MFA starting Fall 2013
• Web & Mobile Developer • Game Designer
Cordova, aka PhoneGap
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
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
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
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
Let’s make an app!
http://www.github.com/claytical/magic8
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)
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/
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
Unzipped iOS
Create the Project in Terminal
• For iOS, run:– bin/create <ProjectDirectory>
<Namespace> <ProjectName>
– bin/create “/Users/clay/Documents/CordovaExample” com.example.magic_8 Magic8
What the Command Creates
Our focus:
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>
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;
}
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));}
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
Some More JavaScriptvar 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(); }
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 toconfig.xml
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");}
Icons and Splash Screens
And Build.
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
Adobe PhoneGap Build