adobe phonegap-workshop-2013

Developing social book apps with PhoneGap & Wordpress

PHONEGAPIN THE CLASSROOM

[email protected] @haigarmen

http://www.slideshare.net/haigarmen/

BUT FIRST,

A BIT ABOUT ME

Professor of DesignEmily Carr University of Art + Design

Founder & Creative DirectorLift Studios - Interaction Design Agency

Studied

Architecture,Jazz Performance& Composition

Concepts covered in this workshop will include

• publications for mobile platforms• a book as a social framework• using open source tools to publish• Native App vs. Web Technology• Book with an API• Workshop I: Introducing PhoneGap• using open source tools to publish• balancing reading with social• Workshop II: prototyping with jQueryMobile• Hybrid native/web apps• Workshop III: JSON-API tunnel

Strategy• publications for mobile platforms• a book as a social framework• using open source tools to publish• Workshop I: Introducing PhoneGap Design

• balancing reading with social• Workshop II: prototyping with jQueryMobile• gestural affordances

Technology• Native App vs. Web Technology• Hybrid native/web apps• Book with an API• Workshop III: JSON-API tunnel

This is a workshop but it is by way of

an interesting story...

A Social Bookby Alexandra Samuel

A research projectat Emily Carr University of Art + Design

A Social Bookby Alexandra Samuel

A research projectat Emily Carr University of Art + Design

Can reading a book be a participatory and social experience?

Outcomes:

1. Create a social e-book prototype that establishes the potential of e-books to support a social, participatory reader experience

2. Develop a participatory design methodology where readers contribute to the structure, design and/or content of the final outcome

What are the issues when adding social functionality into an ebook format?


Can we integrate a social component into a book without getting in the way of the original content?



How do we make a book ultimately dynamic?



How do we make a book ultimately dynamic?

What tools should we use to manage the content, comments and membership registration?

The problem with most Social books:

1. Social usually means sharing quotes on Facebook & Twitter

2. Reader comments are private and marginalized

3. Comments are separated from the original text and usually read out of context

Introducing PhoneGap

The only free open source framework for creating apps easily for 7 mobile platforms using standard HTML, CSS and Javascript

http://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html

The PhoneGap team hastwo core tenants of belief:

The web solved cross platform.

All technology deprecates with time.

http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/

Two high level goals of PhoneGap:

The web as a first class development platform.

The ultimate purpose of PhoneGap is to cease to exist.

2 Approaches to PhoneGap

1. Compile Locally 2. Compile in Cloud (PhoneGap Build)

phonegappackage


HTML

IDE

CompilesNative App


APP

phonegappackage


HTML

IDE

CompilesNative App


HTML

PhoneGapBuild

APP

upload www files or Github

android WebOSiOS

I: Install Xcode and PhoneGap

Apple's Xcode (http://developer.apple.com)

PhoneGap http://www.phonegap.com/download# version 1.9.0

Requirements

• Xcode 4.3+• Xcode Command Line Tools• Intel-based computer with Mac OS X Lion or greater (10.7+)• Necessary for installing on device:

◦ Apple iOS device (iPhone, iPad, iPod Touch)◦ iOS developer certificate ($100/year)

cd ~/Documents/phonegap-2.3.0/lib/ios/bin/

./create ~/Deskstop/DreamGap com.haigarmen.DreamGap DreamGap

Create the Phonegap package for compiling to iOS

In your terminal app:

II. Prototyping with jQuery Mobile

A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.

http://jquerymobile.com/test/docs/about/getting-started.html

<!DOCTYPE html> <html> <head> ! <title>My Page</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head> <body>

<div data-role="page">

! <div data-role="header">! ! <h1>My Title</h1>! </div>

! <div data-role="content">!! ! <p>Hello world</p>! !! </div>

</div>

</body></html>

<!DOCTYPE html> <html> <head> ! <title>My Page</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head> <body>



! <div data-role="content">!! ! <p>Hello world</p>

<ul data-role="listview" data-inset="true" data-filter="true">! <li><a href="#">Acura</a></li>! <li><a href="#">Audi</a></li>! <li><a href="#">BMW</a></li>! <li><a href="#">Mercedes Benz</a></li>! <li><a href="#">Ferrari</a></li></ul>

! !! </div>

</div>

</body></html>

! <div data-role="content">!! ! <p>Hello world</p>

<ul data-role="listview" data-inset="true" data-filter="true">! <li><a href="#">Acura</a></li>! <li><a href="#">Audi</a></li>! <li><a href="#">BMW</a></li>! <li><a href="#">Mercedes Benz</a></li>! <li><a href="#">Ferrari</a></li></ul>

! <form> <label for="slider-0">Input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /></form>

!! </div>

</div>

</body></html>

jQuery Mobile Multiple Screens

Page Anatomyhttp://jquerymobile.com/test/docs/pages/page-anatomy.html

Multi Page Example

How our Social Book works?

Wordpress (CMS)

HTML CSS & Javascript

NATIVE APPLICATION

JSON API

PHONEGAP

III. Introducing JSON API

Wordpress JSON API plugin

Javascript for API call

! <div data-role="content">!<div id="sectionlist">

<img src="css/images/ajax-loader.gif" width="46" height="46" alt="Ajax Loader">

</div>!! </div>

</div>

</body></html>

! <div data-role="content">!<div id="sectionlist">

<img src="css/images/ajax-loader.gif" width="46" height="46" alt="Ajax Loader">

</div>!! </div>

</div>

<script src="http://book.hyko.org/api/get_category_posts/?post_type=chapters&slug=section&order=ASC&callback=sectionList" type="text/javascript"></script>

</body></html>

function sectionList(data) {! ! var output='<ul data-role="listview" data-filter="true">';! ! $.each(data.posts, function(key,val) {! ! !! ! ! var tempDiv = document.createElement("tempDiv");! ! ! tempDiv.innerHTML = val.excerpt;! ! ! $("a", tempDiv).remove();! ! ! var excerpt = tempDiv.innerHTML;! ! !! ! ! output+='<li>';! ! ! output+='<a href="#chapters" onclick="chapterList(' + val.id + ')" data-transition="slide" >';! ! ! output+='<h3>' + val.title + '</h3>';! ! ! output+='<p>' + val.excerpt + '</p>';! ! ! output+='</a>';! ! ! output+='</li>';! ! }); // go through each post! ! output+='</ul>';! ! $('#sectionlist').html(output);}

Thank you

[email protected] @haigarmen

http://www.slideshare.net/haigarmen/