Web Apps for the Masses

Web Apps for the Masses

@davidscotttufts

davidscotttufts.com

Photo by razorray15

About Me • Born and raised in Brazil

• Live in Grand Rapids, Michigan

• 1 beautiful wife

• 6 great kids (5 boys and 1 girl)

• Co-founder at Rocketwood

• Web Producer at RBC Ministries

• Developing KickPress, a WordPress plugin

The Sweet Smell of Success

Graph by Francesco Schwarz

In under 2 years with WordPress on odb.org

• From 2.1 million to 5 million page views per month

• From 0 to 140,000 subscribers to daily email

• From 0 to 100,000 mobile app sales

• From 0 to 90,000 Facebook fans

• Web donations increased 50%+

• 40% less hardware

• 30% savings

We are the 15.7%

Photo by Tim Wilson

WordPress Evolution

1. Blog 2. Multi-User 3. Custom Post Types 4. CMS 5. What’s next?

Illustration by Rob Green

Popular Web Apps

Features of Web Apps

Offer a service

Safe-keeping of your personal data

Access to your personal data through an API

Roles and permissions for controlled and/or restricted access

They own you r data!

Photo by Rob Young

WordPress Web Apps

With no API, users are limited in how the can access their data

Illustration by Eric Tufts

Separating content from presentation

Illustration by Eric Tufts

Illustration by Eric Tufts

Photo by Sarah Fleming

No WordPress core files or database tables were harmed in the production of this plugin

Custom Post Types

KickPress allows for easy Custom Post Type management

• Create new post types

• Assign Roles and Capabilities per post type

• Manage custom workflows

• Extend post types with modules

Photo by Brad Coy

Advanced custom post type management

Advanced roles and capabilities for managing user permissions

3 kinds of API requests to the server

1. // Request for a full page from the theme

kickpress_is_fullpage();

2. // Request for a page fragment via Ajax

kickpress_is_ajax();

3. // Remote API request or action

kickpress_is_remote_api();

1. Full Page Requests

Triggering the KickPress API

{site}.com/how-to/ {Archive page for custom post type called “How To”}

{site}.com/how-to/api/add/

{site}.com/how-to/api/save/

{site}.com/how-to/using-powerpoint/api/edit/

More Examples:

{site}.com/2012/02/18/wordcamp/api/edit/

{site}.com/2012/02/18/wordcamp/api/save/

{site}.com/2012/02/18/wordcamp/api/delete/

{site}.com/2012/02/18/wordcamp/api/bookmark/

{site}.com/2012/02/18/wordcamp/api/add_term[category]/featured/

API Parameters are appended to the end of the standard WordPress permalinks:

2. Ajax Requests

Theme Modifications Add an extra conditional comment to the top of these theme files:

header.php footer.php sidebar.php

<?php

if ( kickpress_is_ajax() ) { return; }

?>

Theme Modifications Add a conditional blocks for any code that should be ignored on AJAX requests:

<?php get_header(); ?>

<?php if ( kickpress_is_fullpage() ) : ?>

<div id="content-wrapper">

<?php endif; ?>

<?php $post_type = get_post_type(); ?>

<?php get_template_part( 'loop', $post_type ); ?>

<?php $args = array( 'post_type', $post_type );

<?php kickpress_ajax_reload( $args, 'content-wrapper‘ ); ?>

<?php kickpress_is_fullpage( '</div>‘ ); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

3. Remote API Requests

Authentication

Photo by Jon Worth

Every registered user is assigned a “token” and a “secret” to be used in generating signatures for making ReSTful OAuth style API calls to the Web App.

Authentication credentials are available on the user’s profile page

$token = '{token-from-profile-page}';

$secret = '{secret-from-profile-page}';

$timestamp = time();

$method = 'GET';

$host = 'www.{your domain}.com';

// Create the string to sign

$string_to_sign = $method . "\n" . $host . "\n" . $timestamp . "\n";

// Calculate signature with SHA1 and base64-encoding

$signature = base64_encode(

hash_hmac( 'sha1', $string_to_sign, $secret, true )

);

$authentication_params = array(

'signature' => $signature,

'timestamp' => $timestamp,

'token' => $token

);

// Normalize the query string parameters

$query_parts = normalized_query_parameters( $authentication_params );

$query_string = implode('&', $query_parts);

// Build the URL for the remote API request

$url = 'http://' . $host . '/{post type}/api/{action}/?' . $query_string;

For more information: http://kickpress.org/documentation/api-authentication/

API Serialized Response { "status":"success", "messages":{ "note":"Term Added" }, "data":{ "terms":[{ "term_id":"7", "name":"Featured", "slug":"featured", "taxonomy":"category", "count":"26" }] } }

Use KickPress to Build your next Web App in

WordPress

The Beginning

http://kickpress.org/getting-started/