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

Cordova: Making Native Mobile Apps With Your Web Skills

on

  • 2,333 views

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 https://github.com/claytical/magic8

Statistics

Views

Total Views
2,333
Views on SlideShare
2,328
Embed Views
5

Actions

Likes
2
Downloads
17
Comments
0

1 Embed 5

https://twitter.com 5

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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. – 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 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 www.claytical.com www.github.com/claytical c.ewing@miami.edu @claytical