Cordova: Making Native Mobile Apps With Your Web Skills
Upcoming SlideShare
Loading in...5

Cordova: Making Native Mobile Apps With Your Web Skills



Overview of PhoneGap/Cordova and walkthrough of a small app (Magic 8 Ball).

Overview of PhoneGap/Cordova and walkthrough of a small app (Magic 8 Ball).

For code, check out



Total Views
Views on SlideShare
Embed Views



1 Embed 5 5



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Cordova: Making Native Mobile Apps With Your Web Skills Cordova: Making Native Mobile Apps With Your Web Skills Presentation Transcript

  • Cordova: Using Your Web Skillsto 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. –
  • 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: –• Community based plugins that focus on device OS specific stuff: – plugins
  • Let’s make an app!
  • Getting Started• You need whatever IDE and SDK you would normally need. – iOS requires Xcode and the iOS SDK ( – Android requires Eclipse and the Android SDK (
  • Look and Feel• jQuery Mobile –• Dojo –• Sencha Touch –• iUI –
  • Actually Getting Started• Download the latest build –• 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 whatquestion 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, leftbottom, from(#8A2BE2), to(#551A8B));}.purple:active { color: #fef4e9; background: -webkit-gradient(linear, left top, leftbottom, 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 to config.xml
  • Use the Plugin with JavaScriptfunction 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
  • Questions? Clay Ewing @claytical