Your SlideShare is downloading. ×
0
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, l...
Why Use It?• Quick, no need to learn another  language• Cross platform compatible, minimal  effort to make an app availabl...
How does it work?• Modern smart phone operating systems  have their version of a webview• Cordova is literally just a loca...
Plugins?• A bunch of features are packed in  automatically:  – http://docs.phonegap.com/en/edge• Community based plugins t...
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:/...
Look and Feel• jQuery Mobile  – http://jquerymobile.com• Dojo  – http://dojotoolkit.org• Sencha Touch  – http://www.sencha...
Actually Getting Started• Download the latest build  – http://cordova.apache.org/#download• Extract the zip file to wherev...
Unzipped iOS
Create the Project in Terminal• For iOS, run:  – bin/create <ProjectDirectory>    <Namespace> <ProjectName>  – bin/create ...
What the Command Creates  Our focus:
A Little HTML<h1>Magic 8 Ball</h1>    <div id="asking">          <textarea id="question" name="question" class="full" plac...
Some CSS3 for Buttons.gradient-button {          display: inline-block;          outline: none;          cursor: pointer; ...
Make a Purple Button.purple {       color: #fef4e9;       border: solid 1px #551A8B;       background: #8A2BE2;       back...
The JavaScript• Clean up index.js  – It has some extra stuff we don’t need• Add zepto.js for easy manipulation  – You can ...
Some More JavaScriptvar answers = [It is certain, It is decidedly so, Without a doubt, Yes –definitely, You may rely on it...
Plugins? No problem.• Place the m and h files into the plugins  folder• Copy the js file into the www/js folder• Add extra...
Use the Plugin with JavaScriptfunction fbResults() {         var qa = $(#question).val() + " " + $(#answer).text() + "#mag...
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• ...
Adobe PhoneGap Build
Questions?              Clay Ewing       www.claytical.com www.github.com/claytical     c.ewing@miami.edu               @c...
Upcoming SlideShare
Loading in...5
×

Cordova: Making Native Mobile Apps With Your Web Skills

2,393

Published on

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

For code, check out https://github.com/claytical/magic8

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,393
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Cordova: Making Native Mobile Apps With Your Web Skills"

  1. 1. Cordova: Using Your Web Skillsto Create Native Mobile Apps Clay Ewing
  2. 2. Me?• I teach here, at UM – Interactive MFA starting Fall 2013• Web & Mobile Developer• Game Designer
  3. 3. Cordova, aka PhoneGap
  4. 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. 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. 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. 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. 8. Let’s make an app!http://www.github.com/claytical/magic8
  9. 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. 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. 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. 12. Unzipped iOS
  13. 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. 14. What the Command Creates Our focus:
  15. 15. 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>
  16. 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. 17. 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));}
  18. 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. 19. 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(); }
  20. 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. 21. 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");}
  22. 22. Icons and Splash Screens
  23. 23. And Build.
  24. 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. 25. Adobe PhoneGap Build
  26. 26. Questions? Clay Ewing www.claytical.com www.github.com/claytical c.ewing@miami.edu @claytical
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×