cordova: making native mobile apps with your web skills

26
Cordova: Using Your Web Skills to Create Native Mobile Apps Clay Ewing

Upload: clay-ewing

Post on 14-May-2015

2.220 views

Category:

Technology


4 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Cordova: Making Native Mobile Apps With Your Web Skills

Cordova: Using Your Web Skills to Create Native Mobile Apps

Clay Ewing

Page 2: Cordova: Making Native Mobile Apps With Your Web Skills

Me?

• I teach here, at UM– Interactive MFA starting Fall 2013

• Web & Mobile Developer • Game Designer

Page 3: Cordova: Making Native Mobile Apps With Your Web Skills

Cordova, aka PhoneGap

Page 4: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 5: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 6: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 7: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 8: Cordova: Making Native Mobile Apps With Your Web Skills

Let’s make an app!

http://www.github.com/claytical/magic8

Page 9: Cordova: Making Native Mobile Apps With Your Web Skills

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)

Page 10: Cordova: Making Native Mobile Apps With Your Web Skills

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/

Page 11: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 12: Cordova: Making Native Mobile Apps With Your Web Skills

Unzipped iOS

Page 13: Cordova: Making Native Mobile Apps With Your Web Skills

Create the Project in Terminal

• For iOS, run:– bin/create <ProjectDirectory>

<Namespace> <ProjectName>

– bin/create “/Users/clay/Documents/CordovaExample” com.example.magic_8 Magic8

Page 14: Cordova: Making Native Mobile Apps With Your Web Skills

What the Command Creates

Our focus:

Page 15: Cordova: Making Native Mobile Apps With Your Web Skills

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>

Page 16: Cordova: Making Native Mobile Apps With Your Web Skills

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;

}

Page 17: Cordova: Making Native Mobile Apps With Your Web Skills

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));}

Page 18: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 19: Cordova: Making Native Mobile Apps With Your Web Skills

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(); }

Page 20: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 21: Cordova: Making Native Mobile Apps With Your Web Skills

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");}

Page 22: Cordova: Making Native Mobile Apps With Your Web Skills

Icons and Splash Screens

Page 23: Cordova: Making Native Mobile Apps With Your Web Skills

And Build.

Page 24: Cordova: Making Native Mobile Apps With Your Web Skills

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

Page 25: Cordova: Making Native Mobile Apps With Your Web Skills

Adobe PhoneGap Build